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:

• Visual Studio 2008 Web Developer Express
  • see article: “how to debug javascript with ~” written by Bernie for ways to do it
• Better: [Debug Bar] or http://www.my-debugbar.com/wiki/CompanionJS/HomePage Companion JS

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