What is CodeKit?

CodeKit is a web development tool for Mac, written by Bryan Jones (follow him on Twitter here).  At it's most basic level, it runs "behind the scenes" of your usual IDE (I use the excellent Coda).  It compiles LESS, SASS, Stylus and other code files as you work – it provides error checking and minification for CSS and Javascript amongst others.

It's been around for a few months – still in Beta stage, but from what I can see, pretty much ready to go.

It basically allows you to develop your sites using LESS (or one of the others) without the need to load the LESS dependency (a small Javascript file which normally does the compiling for you when you load the site).

It's smart. Really smart. I would suggest you check out the website and Bryan's excellent videos to get a better grasp of what it can do for your workflow.

What is LESS?

LESS is described as "the dynamic stylesheet language". I'm not fluent with LESS yet, I hadn't dived-in with everyone else partly because I've been busy of late, and partly because I was hesitant due to it's apparent reliance on Javascript to work correctly.

LESS allows you to use Javascript-style variables and functions within your CSS, and to construct CSS in a way that's far more structured and manageable in the future.  The logic is pretty simple and easy to get to grips with. Go check out the LESS website now for more information and code examples.

What You'll Need

Here's what you will need in order to work directly on your live server/website with CodeKit:

• A Mac, running OS X 10.7 (Lion)
• An IDE for code edits (Coda, TextMate, Espresso, etc)
• A copy of the CodeKit Beta (download here)
• A copy of Panic's Transmit (download here) – you will need to buy this if you continue to use it. Note that you could probably use any software which allows you to mount a remote site as a "local" drive, but I only tried with Transmit's "Mount as disk" feature.

How to set it up

1. Mount your remote site/folder using Transmit. You should see it appear under "Devices" in the Finder sidebar.
2. Open the site/folder in your IDE so you can edit the files (just like you normally would).
3. Drag the mounted drive directly into the main CodeKit window. It will scan the structure automatically and show you the file hierarchy.
4. Begin editing!

CodeKit will recognise the changes you make as you save the files.  You may need to wait a few seconds longer for the data to be transferred (compared to working locally, which is instant), but it works perfectly.

Update

I had some issues with this method today – at first I thought it might be a combination of attempting to use a local CodeKit framework with imports into the remote LESS file, however it turned out to be because I was editing the remote files via FTP.

For some reason, CodeKit does not recognise these edits, and the file (no matter how many times you save, or refresh the project in CodeKit) will stay as it is. Looking at the folder structure, there are some hidden files generated by CodeKit which could be to blame (cache files perhaps?).

Anyway, the workaround is to simply edit the files as if you were working locally, so just drag the mounted files/structure (how you do this depends on the IDE of course) into your IDE and edit then as if they were local files. CodeKit then recognises the changes and works as normal, including importing any framework files you're referenced.

Oh, and if you use Coda, I also found a useful syntax highlight mode for LESS, which you can download here:

http://groups.google.com/group/coda-users/browse_thread/thread/b3327b0cb893e439

Panic Coda

Web: panic.com/coda | License: Commercial, $99

All the coding tools you could need in one place, including syntax-highlighted editing of all major code-types such as PHP, CSS, HTML, Ruby, Javascript, XML and more. I particularly love the excellent Site Manager which stores all of your sites in one place and provide easy access for direct, live editing of the site code using FTP, and the clips manager that serves as a snippets repository for reusable code.

Filezilla

Web: filezilla-project.org | License: Free

Simple to use and packed with great features – one of the best free FTP clients out there.

Adobe Fireworks

Web: www.adobe.com/products/fireworks | License: Commercial, ~$299

Easy to use graphics editor with the best support for PNGs for web use. Build rapid designs and slice them up ready to build into a template. Fireworks can also handle (most) Photoshop PSDs with ease, so it's particularly useful if you work with designers who prefer to work in Photoshop.

VMware Fusion

Web: www.vmware.com/products/fusion | License: Commercial, $79.99

Set-up multiple operating systems which can be run in OS X without needing to reboot. Essential for effective cross-browser testing.

MAMP

Web: www.mamp.info | License: Free (Pro version: £39)

Localhost server environment to enable fast, live development – provides a one-click server running Apache, PHP and MySQL.

Quicksilver

Web: docs.blacktree.com/quicksilver/quicksilver | License: Free

Quickly access all of your applications at the touch of a button – no more searching around in your Apps folder!

Apple Time Machine

Web: www.apple.com/macosx/what-is-macosx/time-machine.html | License: Free (ships with Mac OS X)

The perfect incremental backup solution – and best of all, ships with OS X and is seamlessly integrated. Just add an external disk drive!

Betterzip

Web: macitbetter.com | License: Shareware, $19.95

Brilliant archive utility offering a variety of formats and and easy-to-use interface.

Skype

Web: www.skype.com | License: Free

Communicate with worldwide clients for free, or add a real phone number without needing a physical phone line.

Process

Web: www.jumsoft.com/process | License: Shareware, $39

Useful task-list and project tracking.