About Jose Vargas

Jose Vargas is an Electrical Engineering student and freelance, self-taught web developer from Costa Rica. He owns and maintains codeitdown.com.

Posts by Jose Vargas

Responsive CSS Shapes

February 4, 2014Web DevelopmentJose Vargas

Creating simple fixed-size CSS shapes like circles, triangles, and squares is very straightforward. New properties, like border-radius and transform allow creation of a whole array of CSS-only shapes that previously required images. Even though responsiveness adds a level of complexity, all basic shapes require only one div, making them more convenient than SVG vector shapes.

Responsive CSS shapes scale without losing their aspect ratio. They are traditionally achieved in the web using images or Javascript. However, there is a very simple way to create shapes compatible with all major browsers (yes, IE7 too) using CSS only. This article aims to serve as a reference for the creation of basic responsive CSS shapes. It's a review of my three articles on CSS circles/ovals, CSS triangles and CSS squares/rectangles.

Continue reading →

CSS vendor prefixes reviewed

January 31, 2014Web DevelopmentJose Vargas

CSS vendor prefixes like -webkit, -ms, -moz and -o are constantly being dropped as people updates their browsers and as browsers adopt the standard unprefixed properties. A post about today's recommended prefixes would probably be outdated in a few months. I'll just add caniuse.com frames showing updated compatibility tables for the most important CSS properties that still may need prefixes to make it easier for you to decide by yourself.

Properties not listed here, like box-shadow and text-shadow do not need prefixing. This doesn't mean they are fully supported. Internet Explorer 9 and below, for example, don't support text-shadow, prefixed or not. Border-radius is not supported by IE8 and below.

Continue reading →

HDMI with Ethernet cable: to buy or not to buy

January 21, 2014Off-TopicJose Vargas

HDMI with Ethernet, High Speed
After buying an AmazonBasics HDMI cable I noticed a "HIGH SPEED with Ethernet" sticker in the connectors. I didn't know what it meant so I searched a bit to find out what these cables are capable of. I hope this article makes clear whether you need an HDMI with Ethernet cable or not, and how to make use of the Ethernet feature.

If all you want is the good ol' HDMI cable, it doesn't matter whether it has Ethernet or not. All HDMI cables work for the vast mayority of applications, which are normally just transferring HD video and audio. Any device needing an HDMI cable can use an HDMI with Ethernet cable just fine.
Continue reading →

DIY RAM memory: circuit and steps (1 bit)

January 18, 2014Off-TopicJose Vargas

This article presents a step by step guide for building a 1 bit memory using just BJTs (bipolar junction transistors) and resistors. It's a nice and simple educational project as it shows how data can be stored in a circuit using basic parts only. I created several diagrams to make each step clear. The complete diagram is at the end of the article. The project is based on DIY RAM Memory: Register Style instructable, with a few minor changes. Following the steps and testing the circuit after each step is recommended, specially if not using the transistors and/or resistors suggested below.

The idea

Consider the basic SR latch consisting of two interconnected NOR gates:

SR latch implemented with NOR gates

The idea of the DIY RAM project is to first implement the NOR gates using BJTs and then add some simple logic to transform the SR latch into a D latch, which is basically a 1 bit RAM. Finally, switches will be added at the input and an LED at the output in order to be able to write/read the bit easily.

Continue reading →

CSS square and rectangle

January 17, 2014Web DevelopmentJose Vargas

CSS square and rectangular containers with a fixed aspect ratio are very easy to implement when they are also fixed-size. It's just a matter of specifying width and height in pixels. When adding responsiveness, keeping an aspect ratio is not straighforward. For responsive shapes, using paddings is the way to go.

In this article I share the code used to create fixed-size and responsive CSS squares and rectangles with vertically centered content, which is a common use for them. An SVG image with a width percentage width and height:auto is an alternative to CSS squares. However, SVG adds the overhead of loading an extra file and won't hold content.

Continue reading →

How to get Latex accents to work

January 16, 2014Off-TopicJose Vargas

Getting Latex accents and other special characters to work can sure give one a headache. In this article you'll see how easy it is to get your accents working once you know exactly what you're doing.

As explained here, Latex uses the ASCII character set by default. ASCII has only 128 characters which are not enough for languages other than English. This means Latex does not recognize accents, tildes, the circumflex, diaeresis, cedilla and others by default.
Continue reading →

CSS round buttons

January 13, 2014Web DevelopmentJose Vargas

CSS3, with its great border-radius property, allows creation of fixed-size and responsive CSS round buttons. This article explains how to create circular buttons using CSS3 only. Add animation, shadows and/or images to the buttons to get to get the perfect look and feel. The round buttons, both fixed-size and responsive work in all modern browsers and will render square in CSS2- browsers.

Why CSS round buttons?

First, why CSS? Because it's easy and clean. Using Javascript is not necessary and is more complicated than creating simple CSS buttons. Besides, CSS3 has everything you need to add effects and animations to these buttons. Unless you are doing something very creative, CSS is more than enough.

Now, why round buttons? Round buttons have a ton of applications. Round home and help buttons, as well as video or music player buttons are very common in web sites and applications. Using responsive buttons means that they will automatically resize without distortion nor need for extra CSS rules. A simple SVG image may be used as an icon for best results. SVG vector shapes resize without loss of detail, making them great for responsive design.

Round buttons may also hold text. "GO" buttons, which, for example, start a tutorial or product tour are the most common example. Round OK buttons are also quite popular. In general, they are used to hold a single short line of text.

Continue reading →

Costa Rica from the inside

January 12, 2014Off-TopicJose Vargas

As a Costa Rican blogger I felt it was time to write my first article about my beatiful country. This article tries to briefly describe Costa Rica as it is, from the inside, with all its beauty and problems. It is aimed at travelers that want to learn both the good and the bad before adventuring into this great country. It's a short read. You won't be bothered with specific info you'll probably forget right away.

General info

Map of Costa Rica

Costa Rica is a Central American tropical country with a population of 5 million. It's the only Latin American country with absolutely no military forces. Because it was colonized by Spain, the native language is Spanish, spoken through all the country. Almost half the population is concentrated near the capital, San José, which is close to the center of the territory. The country is divided into seven provinces.

We have one of the oldest and more stable democracies in the world. Costa Rica is known for being a free, peaceful and happy country and as far is I can tell it is true (not Heaven though).

The climate is, of course, tropical, with a dry (December to April) and a rainy season (May to November). The mean temperature is 20 C in the capital and metropolitan area and 27 C at the coasts.

Continue reading →