Goggle’s new book on browsers and web – 20 things I learned

20 Things I Learned

Google has created a new interactive book called “20 things I learned about browsers and the web“. It has 20 small chapters each answering a topic related to web like browsers, html, privacy, security etc.

This book itself has been created in HTML 5 and has both mouse and keyboard navigation enabled. Moreover, after it loads once, you can read it offline.

Written by the chrome team and with beautiful illustrations by Christoph Niemann,this book is a delight to read. Its language is very simple and catchy and users without any technical background can also read it without worrying about technical jargons.

You can read the book at http://www.20thingsilearned.com/. For the lazy below are direct links for chapters.

Cloud Computing
Web Apps
HTML, JS, CSS and more
3d in a Browser
A browser madrigal or old vs modern browsers
Browser Extensions
Synchronizing the Browser
Browsers and Privacy
Malware, Phishing and Security Risks
How modern browsers protect you from malware and phishing
Using web addresses to stay safe
IP addresses and DNS
Validating identities online
Evolving to a faster web
Open Source and browsers
Conclusion: 19 things later

61 jQuery Image and gallery plugins

Presenting list of 61 jQuery plugins for galleries and slideshows. All of them are different and you can choose from them depending on the project you are working on.

If you come across any plugin which I have  not included here, please take a moment to add it in comments. I will update the post. The list is in alphabetical order.


Continue reading 61 jQuery Image and gallery plugins

Simple way to search Flickr API using PHP

Flickr provides a large number of API methods which you can use to search for images, contacts, comments, notes etc.
This post will show the use of one simple method flickr.photos.search to search images using PHP. We will send a REST request and will ask for a JSON response. Though this method allows you to search using tags, text, date and others parameters, we will restrict to the use of only tags in this example. You are free to add other paramters.

First of all you will need an api_key which is mandatory to use with flickr api. Go to http://www.flickr.com/services/apps/create/ and get one. We are ready to jump into code now.

First define the search parameters and create the URL to which the request will be sent.

$api_key = "YOUR_API_KEY_HERE";
$tag = 'flower,bird';
$perPage = 25;
$url = 'http://api.flickr.com/services/rest/?method=flickr.photos.search';
$url.= '&api_key='.$api_key;
$url.= '&tags='.$tag;
$url.= '&per_page='.$perPage;
$url.= '&format=json';
$url.= '&nojsoncallback=1';

Assign your api key to variable $apiKey. $tag is the tag name you want to search for. You can enter more then 1 tag separated by commas. $perPage is the number of results in a single response.
Assign these variable to corresponding keys in URL and set the format to json. nojsoncallback = 1 will give us raw json instead of wrapping it up in a callback function.

Now try to get the results from flickr. Once response JSON is received, use json_decode to convert it to an object so that we can iterate on it and get values.

Continue reading Simple way to search Flickr API using PHP

19 Things NOT To Do When Building a Website

Here is a very useful post I found today. 19 mistakes to avoid while designing websites. Although, I am no expert on designing but I have found myself making some of these mistakes then and now.

Some of my favorites from the list are:

  • If your website does not work in Firefox, welcome to 2007 DUMBASS.
  • If your site needs a search engine for users to find information, it’s time to start over and fire the guy who came up with the site map (and those slick drop downs on your nav)

and most important (for me at least)

  • Just because a technology is new, or you just discovered it does not make it suitable to put on a business website, JUST BECAUSE you can. – Absolutely right – I did this with AJAX.

Do read the full post on Josiah Cole’s blog.

FAQ: Specifying css page breaks after or before elements for printing

While printing web pages you can specify the browser to insert page breaks before or after certain elements. This can be handy for printing documents like tickets, vouchers where information must be grouped and displayed on separate pages.

There are 2 CSS properties which can be used to insert page breaks in HTML while printing. These are page-break-after and page-break-before.

For example, consider a page with following html:

		<p>First paragraph</p>

Second Paragraph

Third Paragraph


If you want page break after a particular element add the following css to it.


This will force the following element to print in a new page. If it is applied to second paragraph in above html, third paragraph will be printed on a new page.


If you want page break before a particular element add the following css to it.


This will insert a page break just before current element, hence printing it on a new page. If it is applied to second paragraph in above html, second paragraph itself will be printed on a new page.

Full reference for these properties can be seen at W3.org