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:
November 18, 2014
June 5, 2014
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
While working on a project that uses Google Maps API, I noticed the following problems:
- The content below Google maps appeared after a slight delay
- The maps did not load when the page was loaded via AJAX
- 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
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:
March 29, 2014
March 9, 2014
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:
January 31, 2014
google-cache-control:max-age subversion property on selected files (value specified in seconds). To specify a longer expiry date on files that do not change often, set this property to a higher value, e.g. 604800 (= one week). This allows the files to be saved or cached by a browser or proxy for a longer duration. To disable caching altogether set this property to 0.
December 2, 2013
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.
October 31, 2013
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
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.