Sunday 25 November 2007

BarCamp London: Tools I use for Front End Development - Natalie Down

TextMate to write HTML + server side

  • New From Template
  • or HTML mode then doctype tab-->

Image Editing with the GIMP or Picnik (online)


  • nice bookmarklet available to pick them up (cross browser)


HTML Tidy as a Firefox plugin

  • gives good warnings and has refreshable source

Webdev toolbar

  • quickest way to disable javascript
  • good for accessibility



  • can group CSS styles in sidebar — uses comments in source
  • dragging and rearranging in sidebar, rearranges text in source
  • can rename group names in source; sidebar updates automatically
  • don’t really use CSSEdit preview — use Firebug instead


  • Test styles — pops up a separate window for adding CSS
  • Better than Firebug for changing large amounts of styles as it stays when refresh main page
  • Another one to show grey backgrounds — lighter for more heavily nested


  • can edit layout directly in layout view
  • can grab bits in console and then click on them


Firebug useful for checking for memory leaks

  • use Profile over a period of time

Can test out CSS class changes by hand, before you run the

YSlow — has JSLint built-in for checking poor Javascript style

Insert jQuery bookmarklet

IE Javascript debugging:


Color Schemer Studio (costs something small)

  • screen colour picker

Color Blender (


Using IE in Parallels

  • can install Bonjour on Windows — automatically detects local webserver

Source control

svnX provides Tortoise-like behaviour for OS X

1 comment:

Cristiano Betta said...

Beware about YSLow. I installed it and noticed that even the yahoo sites don't score particularly high. Bit ironic.