Web Development

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

Responsive Font Size with CSS

Making your font-size respond to viewport or container size should be a must to complete your responsive designs. Having a fixed font-size accross devices is not always a good idea. The key point is to get a readable font size and a comfortable line length in most viewports. CSS viewport units and media queries provide the means to implement a responsive font size.

Continue reading

WordPress Related Posts in 4 Easy Steps

Adding Related Posts to WordPress is a great way of keeping your users reading your site for a little longer. There are two ways to add a WordPress Related Posts section: installing a plugin or doing it yourself. I would use plugins for a lot of things but adding related posts is so easy that using a plugin feels like overkill. If you know how to tweak WordPress, doing it yourself will give you more control over the displayed posts and layout.

Continue reading

Testing WordPress Themes Online

Editing and testing changes to a WordPress theme is certainly frustrating when using the default online editor. This is specially true when editing the active theme. WordPress doesn't offer any option to test drive your changes before they go live. Being used to edit CSS files offline, the first thing that came into my mind was to replicate the WordPress site offline and then upload the files via FTP. However, I ended up doing my editing and testing online for several big reasons.

Continue reading

K2 Joomla extension tutorial

The K2 Joomla extension was built as a complete replacement for Joomla's default article system. K2 adds important features that Joomla misses like comments, image auto-resizing and author profile pages. It gives Joomla a level-up as a blogging platform, adding the features that make WordPress great. Joomla has the plus of having tons of settings which allow to personalize the exact behaviour of pretty much everything.

Continue reading

Ordered List CSS Styles

Styling ordered list numbers with CSS is not as simple as one might think because there is no CSS selector to target list numbers. Styling them is only possible with a simple CSS3 technique that uses a counter to replace the default numbers.

Styled numbers will only be visible in CSS3 browsers , but fallback is provided so that default unstyled numbers are displayed in old browsers.

Continue reading

Responsive CSS Shapes

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

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