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)

Microformats

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

Warnings

HTML Tidy as a Firefox plugin

  • gives good warnings and has refreshable source

Webdev toolbar

  • quickest way to disable javascript
  • good for accessibility

CSS

CSSEdit

  • 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

Squarefree

  • 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

Firebug

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

Javascript

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:

Colours

Color Schemer Studio (costs something small)

  • screen colour picker

Color Blender (meyerweb.com/eric/toold/color-blend/

Testing

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.