View on YouTube

This video makes use of Google Chrome’s Developer Tools which allows you to edit CSS/HTML in real-time on a web page.

Update: If you use Greasemonkey the Facebook Like Bypass script will do the above for you.

IETester – Internet Explorer is a pain to build a website on, mainly because standalone versions are difficult to run on Windows Vista and Mac. This little tool makes testing your website on multiple versions of Internet Explorer a breeze.

IETester allows you to compare you website in Internet Explorer Versions 5 to 8. Its interface is easy to understand and while there is still work needed to be done on it, I would be surprised not to see it on every web developer/designer’s desktop.

iPhoney – Lots of users are now browsing the internet on their iPhone. It makes sense for webmasters to make sure their website works correctly on the small screen.

BrowserShots – BrowserShots is quite famous for allowing designers to see their websites is lots of browser (in the region of 93) on major OS’s.  The main disadvantage though is that you have to wait over an hour to see the screen shots.

IE NetRender – Similar to BrowerShots, in terms of a web based screen grab service. But this website does not require a wait of up to an hour to see a screen shot. However, it does only support Internet Explorer.

However, many webmasters (and blog lords) forget to add a print sheet (many of the themes for wordpress lack even a simple CSS print sheet). Here is a quick video tutorial on creating a simple print CSS really quickly.

Linking to the Print CSS

Linking to the Print CSS is quite simple; essentially all you need to do is use the following code:

<link href="URL TO PRINT CSS HERE" rel="stylesheet" type="text/css" media="print" />

Hiding everything unnecessary

Hiding elements can be quite tricky, but here is a snippet of code I normally use:

#element_you_want_to_hide{
	visibility:hidden;
	position:absolute; top:0px; left:0px;
}

Further Reading

Don’t Rely on Background Colors Printing – A really neat article on why using colours in your print CSS is just a bad idea.

CSS Mastery: Advanced Web Standards Solutions 2nd Edition – An awesome book which is recommended by most professional web designers and developers.

Google offers Webmasters an easy solution to create simple or and quite complex graphs in the Google Chart API section of the Developers Guide. It is quite simple to use, if you want to create an image such as above, just link to the following image:

]http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Pie|Not%20Pie

Google will then do the graphical generation stuff; here is a quick overview of the URL structure (key -> value):

• cht – What type of chart you want:
  • p3 – 3d pie chart
  • p – 2D chart
  • v – Venn diagram
  • s – Scatter Plot
  • lc – Line Chart
  • bhs – Horizontal Bar Chart
• chd – The Chart Data
  • Separated by commas, for example 10, 20 , 30
• ch1 – Chart Label
  • Labels separated by Vertical Lines (pipes)
• chd – Chart Dimensions (Maximum – 1000×300)

Make sure you take a look at Google’s documentation, it will show you how to do some more complex stuff.