November 18, 2014

Proportionally Scale or Crop Images Using CSS

How do you resize an image so that it fits inside a fixed size container while maintaining its aspect ratio? The apparent solution is to set the image width, height, min-width and/or min-height to 100% or auto. However, this solution is not generic enough to handle images with varying aspect ratios properly. Here is an example:

Proportionally Resized Images

June 5, 2014

AdSense Responsive Ads - Why Not?

Google has been constantly adding new features to AdSense, offering publishers more control over how ads are displayed on their website. Here are some features related to ad code implementation that rolled out during the past 12 months:

  • Introduction of Asynchronous Ads — July 2013
  • Introduction of Responsive Ads — July 2013
  • Introduction of Custom-Sized Ads — December 2013

At this moment, publishers can choose from standard, responsive and custom-sized ad units when creating one. If you have not chosen the ad code implementation method or you are looking forward to change it, I suggest going for responsive ads.

May 3, 2014

Google Maps Asynchronous Loading

While working on a project that uses Google Maps API, I noticed the following problems:

  1. The content below Google maps appeared after a slight delay
  2. Google PageSpeed Insights kept telling me to "eliminate render-blocking JavaScript and CSS in above-the-fold content"
  3. The maps did not load when the page was loaded via AJAX
  4. The maps did not work in jQuery Mobile

All of these problems were caused because I was loading the Google Maps API synchronously. Let me explain. Almost all Google Maps API examples tell you to do this:

April 22, 2014

StackOverflow Like Pagination

Some while ago, I built a pagination system in PHP to display a long list of pagination links. The pagination system showed at most 5 links at a time and additional links were represented by ellipsis (...). However, I was not able to deal with certain edge cases, so I drew some inspiration from the pagination system used on StackOverflow to tackle them. This is what the end result looked like:

Pagination using ellipsis

March 29, 2014

jQuery UI Datepicker for jQuery Mobile

Can you guess which datepicker is this?

jQuery UI Datepicker for Mobile

It is the jQuery UI datepicker tweaked for jQuery Mobile!

March 9, 2014

CSS nth-child Selector Pwned

The CSS3 :nth-child() selector pseudo-class allows you to select elements based on their position in the set of children of their parent. It accepts an argument in the form of an + b. How exactly does it work? Let me explain.

In very simple words, the expression an + b matches every ath element in the set starting from the bth element keeping in mind that (i) the index numbering starts at 1 (ii) zero and negative values do not represent any element (iii) text and non-element nodes are not counted. The following corollaries exist:

December 2, 2013

5 jQuery UI Autocomplete Examples

The jQuery UI Autocomplete widget enables users to quickly find and select from a list of values as they type. If you find the jQuery UI Autocomplete demos and documentation too daunting, here are some examples with explanation to get you started.

  1. Using Label-Value Pairs
  2. Add CSS Class to the Dropdown
  3. Load Data via AJAX
  4. Highlight Matched Text
  5. Custom HTML in Dropdown

October 31, 2013

Google Analytics Visitors' Screen Resolutions Report

Earlier when I decided to redesign my blog I asked myself this question: what screen size should I design for? I answered myself by looking at the visitor data collected by Google Analytics. Even though I decided to go for a responsive design, a screen resolution report provided my with some interesting insights. For example I inferred that more than 75% of my visitors would be able to see the newly introduced 970x90px large leaderboard AdSense ads.

August 1, 2013

Fast-Start Enabled Videos with FFMpeg

MPEG 4 is the most dominant video format for the web, which is supported on a variety of platforms and devices. And FFmpeg is the most popular software for encoding videos. While there are tons of articles about encoding MPEG 4 videos with FFmpeg, most of them fail to warn you about something: most video players will not start the playback until the whole video is downloaded. This could be annoying, especially for large videos.

July 2, 2013

How to Share Google+ Comments with a Specific Person

Tip: if you are commenting on a blog post that uses Google+ comments, you can choose to share the comment with a specific person (e.g. the blog author) instead of public or your circles. When posting a comment:

  • Remove the "Public" circle from the "Shared with" box
  • Type in the person's name or email address