Themers Toolbox #2: browser hell

how nice it would be if there was only one browser ... ooh well if they all just worked our life would be so much easier but then what should we tell warstories about around the candlefire?

Heres the second part of the Themers toolbox a bunch of infomation that i signed up to collect for the Design For Drupal group

1. Modules & themes
2. Browser Hell
3. code is beautiful

Mac fascist alert
I have no clue about other platform than the mac, so if you think im missing out something please let me know, untill then this is a mac only version.

Yes iknow theyre more browsers out there, so if im missing something then use the comments and point me to it, i have only taken the most important browsers here in October 2009

modules

Lets start with a couple of modules to add some browser fun

• ie6 update module
  A simple module that ats the ie6 update campaign
  http://drupal.org/project/ie6update
• chrome module plugin
  yet another sneaky way to get a workaround the dreadfull ie6 the google chrome
  http://drupal.org/project/chrome_frame
  I havent really tested this out, its really new, but anything that can make out life easier against the ie6 should be promoted ;)
• drupal for firebug
  rule35 - theres a module for that
  So offcourse theres a module for
  http://drupal.org/project/DrupalForFirebug
  https://addons.mozilla.org/en-US/firefox/addon/8370

Browsers

firefox

This should be a no brainer but just so were clear: Firefox is a goldmine when were talking about developing tools
And now that almost all (read ie6) browsers are getting up to speed, firefox will pretty soon become your weapon of choice.

So offcourse we wanna beef up out weapon so say hello to a bunch of kick ass plugins that will make youre day better:

• firebug
  firebug
  If youre serious about anything in webdevelopment get this now!
• the webdeveloper toolbar
  Gives you an toolbar with all kinds of tools you need on your day to day need
  webdeveloper toolbar
• total validator:
  fireforx extension
• accessability testing
  wave toolbar
  The accessability geeks will kill you if you dont remember to check this out ;)
• codeburner documentation
  codeburner
• tap to the left
  treestyletap
  This gives your the tabs out to the left of the browser instead of in top of browser.
  Really handy when you like me haves a trillion taps
• pixel perfect
  Pixel Perfect gives you a layer inside the browser so you can add a jpg/png file and overlay it over the webpage. This is another nobrainer download it asap. And by the guys who did it a beer

safari & webkit

This should come with your mac, offcourse you can get this for your pc ;)
http://www.apple.com/safari/

More the wonders the developtools that safari 4 haves go and read [playing with wire](
http://www.playingwithwire.com/2009/06/safari-4-launches-new-developer-tools/)

• webkit

opera

chrome

Googles browser:
* chrome for the pc:
http://www.google.com/chrome
* chrome for osx:
developer version

Virtual box

The mac is superiour (as we all know ) but we need a little help when it comes to other OS

Download virtualbox
Get the free virtualbox its great, and if you only need to check your webpages then these wont kill you mac with an absurd demand for ram.

ie from ie6 -> ie8

Rasmus created a bunch of asskicking quick n dirty winblow developer isntallation with all you need.This really is a big help that i dont have to battle for days to get an ie6 up and running. get the disc imagess now

Its all in danish and the images only runs for an hour on the virtualbox.
But this at least gives you a chance to check it out.

Besides of these virtualboxes I have a setup with an xp so I can really dig in, but frankly i hate beeing on a pc so ;)

Linux

• kubuntu & webkit
  To check the webkit on the linux distribution, I figured out it was Quickest to download a Kubuntu and install that (oooh and it gives some geek creeds)
  Get it here http://www.kubuntu.org
• Firefox & ubuntu
  http://www.ubuntu.com/getubuntu/download

Browser test apps

• adobe browserlabs
  A flash application where you can compare the design between the different browsers
• litmus testing
  If youre really serious about testing everything in all browsers then litmus is a good choice

But basically theres nothing that beats having a real pc, mac & linux box standing in the corner :/

scriplets / bookmarklets

• reset css
  A Lifesaviour if your doing ajax work - or just dont wanna reload the whole page while doing css work.
• 960gridder
  A really wonderfull tool to checkout you grid and even it youre not into that 960 thing its awesome to check out you line heights
• firebug lite
  a javascript version of firebug

stuff

This is a watch worth ... cause how many is it that actully knows what a browser is?

google explains:

http://www.youtube.com/watch?v=BrXPcaRlBqo&feature=player_embedded

http://www.youtube.com/watch?v=o4MwTvtyrUQ&feature=player_embedded