Web Development

All sorts of niceties related to web development: PHP, Node.js, MySQL, MongoDB, CSS, and Wordpress

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

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

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

colpick: a simple online color picker and schemer

Dont't have Photoshop and need a quick color? colpick color picker is an online color picker I developed recently aiming general users and designers. It allows to easily select a color the same way as in Photoshop, giving RGB, HEX and HSB color values. It serves a double purpose as it also helps me maintain the colpick jQuery plugin behind it. Some of its features aim web designers: RGB and HSL codes in CSS format for easy copy/pasting and basic color schemes: analogous, complementary, triad and square. It creates color schemes based on the currently selected color.

colpick

It also allows users to save up to ten colors (using a cookie) and has a list of color hexes used by famous brands (Facebook blue, Android green ...). Users may share the selected color using a short link.

It's main goal is to substitute Photoshop's picker when you don't have it and serve any other color picking need. Please consider adding it to favorites as it may be a handy resource. Any feedback will be appreciated.

Responsive CSS Circles

CSS circles are very easy to create using border-radius. In this article I share the common fixed-width code along with my responsive CSS circles, which may include text. The downside of all CSS circles is that they don't work on IE8 and below because of lack of support for border-radius. If looking for fixed-width or responsive circular buttons, take a look at CSS Round Buttons.

Fixed width CSS circles

Fixed width CSS circles are very easy to implement. Set border radius equal to 50% of the width of a square box:

Continue reading

CSS triangles made responsive

Fixed width CSS triangles can be created easily by specifying two transparent borders and a colored border to a zero width and zero height element. Creating variable width triangles for responsive designs is not straightforward because CSS accepts border widths in pixels only. I came accross this issue recently while working on making my jQuery color picker plugin responsive.

I came up with a simple solution that uses two divs or one div and a pseudo-element to create responsive CSS triangles. Both consist of a large fixed width triangle that is covered/uncovered according to width, effectively faking responsiveness. Partially covering/uncovering the triangle makes it keep its proportions.

Now, to the code. The following are up, down, right and left pointing CSS triangles. The code is presented for both the one and two div versions. The logic used is exactly the same for both. Using two divs makes these pure CSS triangles compatible with IE7, which does not support pseudo-elements. I set up a JSFiddle for playing around with the two-div triangles: jsfiddle.net/josedvq/xEGM4 and one div triangles: jsfiddle.net/josedvq/3HG6d.

Note: For the triangles to work properly box-sizing should be set to content-box (the CSS default). Add this rule to the triangle's class if necessary.

Up-pointing CSS triangles

The following triangle is set to take 25% of the width of its container. Resize it to see the triangle in action.

Continue reading

Creating and Extending CodeIgniter Helpers

CodeIgniter helpers are groups of utility functions you may need anywhere in your code. CodeIgniter has more than 20 helpers. You may be familiar with the URL, email, form or file helpers. These have functions that simplify common tasks when working with URLs, emails and files.

Whenever you feel the need to add a function to a view (which is not a good practice) it may be time to extend a CodeIgniter helper or create your own helper. For example, formatting dates directly in the view can get tedious and you may be repeating lots of code. This is specially true if you need to show time in some special, non trivial way, like showing time elapsed. In this case extending or creating a helper might be the best choice.

Continue reading

Enable Facebook comments Moderate button

Facebook comments Moderate button allows website administrators to control more precisely the comments written on their site. Facebook does a good job sorting comments by relevance but sometimes this is not enough. By enabling the button you also enable a "Moderator View" on the Comments plugin. This view just displays a checkbox next to every comment so you can hide several comments at once. The Moderate button appears at the bottom of every comment and displays three options:

Facebook comments Moderate button

Continue reading

Fix PHP strftime %e on Windows

If you are being bugged by PHP's strftime returning false (printing nothing) when using %e modifier for day of the month on Windows then you are in the right place. It's easy to skip the huge warning red box at the bottom of strftime function page:

Warning: The %e modifier is not supported in the Windows implementation of this function. To achieve this value, the %#d modifier can be used instead.

The solution is simple: if you are using Windows only and will never move to a Linux server (which is unlikely) just change %d for %#e. If you want to make your code work on either system, it's easy to detect the OS using PHP_OS and use the correct modifier. For example, to make $format = '%B %e, %Y' (which gives "August 4, 2013") work on both Windows and Linux you can use:

$format = '%B '.((strtoupper(substr(PHP_OS, 0, 3)) == 'WIN') ? '%#d' : '%e').', %Y';
$formated_date = strftime($format, $unix_timestamp);

This code checks for the OS and uses %e just if it's running on a Windows server.

If you are using %e for several formats it may be easier to create a function to "fix" strftime. Here is the function taken from php.net:

function fixed_strftime($format, $unix_timestamp) {
    if (strtoupper(substr(PHP_OS, 0, 3)) == 'WIN') {
         $format = preg_replace('#(?<!%)((?:%%)*)%e#', '\1%#d', $format);
    }
    return strftime($format, $unix_timestamp);
}