Jose Vargas

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 Ads with Google AdSense

Responsive websites using CSS3 media queries are getting more popular every day. The convenience of a single design that adapts to virtually any device makes responsive design a very practical approach. In responsive design, images are usually scaled by using percentage widths in CSS. However, AdSense ads won't work the same way.

Probably a second impulse when implementing responsive ads is using display:none to hide wide ads in small viewports. However, using display:none on AdSense ads is explicitly prohibited by Google in their Ad Implementation Policies. There are just three alternatives for responsive websites:

Continue reading

CSS vendor prefixes reviewed

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

Ad Placement Principles

There is no such thing as a universal solution for ad placement. You won't find it here and you'll never find it. I rather write this article to give you, ad Publisher, some general guidelines on what to try and how to try it. After reading several blog articles on Adsense Ad Placement and how they doubled or tripled their income overnight and trying every Ad placement they suggested, I still had a terribly low CTR and income for the number of visits I was having. I suppose you know exactly how I felt.

The solution for my extremely low CTR was not using a particular ad unit nor placing ads above the fold, one of the first recommendations you'll find on the web. The key for me was to start using my head.

Continue reading

HDMI with Ethernet cable: to buy or not to buy

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)

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

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

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

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

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

HSL, HSB and HSV color: differences and conversion

If you are here you've probably heard of HSL, HSB or HSV color models. They are nothing more than transformations of RGB values. Simple equations are used to convert from RGB to HSL and HSV color. HSB is exactly the same as HSV, but HSL is slightly different as explained below. Because they are both based on RGB, they are also meant to be used to represent color in digital devices. This article explains the basic definitions involved (no previous knowledge on color theory is assumed) and shares the equations to convert between them.

Why did they bother creating color models that represent the same colors RGB already could? Although RGB is perfect for machines, it is not very human-friendly. HSL and HSV color models were created as a more convenient way for us to specify colors in software.

HSB / HSV color cilinder

H stands for Hue and S stands for Saturation in all cases. Hue is usually a number between 0 and 360 that represents the angle in the color wheel (a hue wheel, that is). The B in HSB stands for Brightness and the V in HSV for Value, which are exactly the same: the perception of the ammount of light or power of the source.

Both Saturation and Brightness/Value are given as a real number between 0 and 1 or as a percentage. Playing around with the HSB fields of a color picker is probably the easiest way to understand these intuitive concepts.

HSL cilinder

HSL is slightly different. Hue takes exactly the same numerical value as in HSB/HSV. However, S, which also stands for Saturation, is defined differently and requires conversion. L stands for Lightness, is not the same as Brightness/Value. Brightness is perceived as the "amount of light" which can be any color while Lightness is best understood as the amount of white. Saturation is different because in both models is scaled to fit the definition of brightness/lightness.

Continue reading