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:
<html> <head> <title>My Page</title> </head> <body> <p>First paragraph</p> <p>Second Paragraph</p> <p>Third Paragraph</p> </body> </html>
page-break-after
If you want page break after a particular element add the following css to it.
page-break-after:always
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.
page-break-before
If you want page break before a particular element add the following css to it.
page-break-before:always
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
5 must have firefox addons for every web developer
Being a web developer there are some tools which I need and use on daily basis. Here are 5 such addons I think every web developer should install on their firefox.
1- Web developer toolbar
Home: http://chrispederick.com/work/web-developer/
Install: https://addons.mozilla.org/en-US/firefox/addon/60
This addon adds a toolbar and a menu to firefox. The toolbar contains several mini tools in it to perform various tasks. It has 11 built in menus for different tasks like cookies, css, forms, html, images and many others. You can read a review of web developer toolbar here.
2- JSONView
Home: http://benhollis.net/blog/2009/02/24/jsonview-view-json-documents-in-firefox/
Install: https://addons.mozilla.org/en-US/firefox/addon/10869
JSON is becoming more popular day by day as a data exchange format. JSONView allows you to view json documents in the browser itself without having to open in any text editor and format it. Local files can also be seen if they have .json extension. It formats the document nicely and also provides options to collapse/expand nodes too (just like XML).
In case of invalid json it reports an error.
3- Fireftp
Home: http://fireftp.mozdev.org/
Install: https://addons.mozilla.org/en-US/firefox/addon/684
You will not have to open a separate ftp client if you use this. To open Fire FTP, go to Tools -> Fire FTP on firefox menu bar. It opens an easy to use interface in a new tab. You can create multiple accounts and you will get all the features that you expect from a ftp client.
From the site: “Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and much more!”
How to dynamically load the Google Maps javascript API (On demand loading)
Normally google maps js api is loaded at the time of page load via a script tag with src set. If map is not so major feature of your application or you want to reduce page download time, you can defer loading the javascript load it when required.
This is a javascript pattern called On demand javascript.
Bottomline is: “JavaScript being pulled from the server after the page has loaded“.
Google maps provide the facility to dynamically load the api when required. So no need to load it at the time of page load. I will present an example here which will load the maps api on click of a button. Here is how to do it.
As said above, DO NOT load any javascript api from Google using script tags. Instead we will use a button.
<input id="loadButton" onclick="loadAPI()" type="button" value="Load maps api" />
To load the api onclick of this button, create a script tag, set its src and append it to document. This will load the Google AJAX API required to load other google APIs.
function loadAPI() { var script = document.createElement("script"); script.src = "http://www.google.com/jsapi?key=YOUR_API_KEY_HERE&callback=loadMaps"; script.type = "text/javascript"; document.getElementsByTagName("head")[0].appendChild(script); }
Do not forget to replace the API key above with your API key. (You can get an API key by signing up here)
Important: Note the callback=loadMaps in script.src. This is the thing doing all the magic. It tells which function to call when AJAX API has loaded. In above case it will call loadMaps function. So, let us define that.
function loadMaps() { //AJAX API is loaded successfully. Now lets load the maps api google.load("maps", "2", {"callback" : mapLoaded}); }
loadMaps function uses load method of google AJAX API to load a specific api. Above we loaded “maps” version “2″. Again callback is the name of function that will be called when maps api is loaded. callback function will be called only when the maps api is loaded successfully.
function mapLoaded() { //here you can be sure that maps api has loaded //and you can now proceed to render the map on page if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setMapType(G_SATELLITE_MAP); map.setCenter(new GLatLng(28.631466106808542, 77.07853317260742), 5); } }
That is all to it. I have created a demo along these lines. View source for code. You can see it here.
Happy New Year!
Hi friends,
I wish you all a very happy and prosperous new year with lots of happiness.
I hope that the posts I publish here are useful for you and your questions are answered. This year I promise that I will try to write better posts and write more regularly.
Best Wishes once again. 
