On every project, I eventually find myself having to work directly on assets on a live server.  But what if I wanted to use the power of CodeKit & LESS on my live site? It's surprisingly easy to set-up, as long as you have the right tools…

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

Update 2: Working with CodeKit and Dropbox

So, after trying remotely working like this on a bigger project, I soon hit some problems – disconnection errors, FTP limitations, that sort of thing.  If these occur mid-save, that can help you lose some data, which is never a good thing.

It's worth pointing out that these problems are not the fault of CodeKit; just limitations with server hardware, setup and that sort of thing.

I didn't want to move the development work locally (it makes it too hard for things like client approvals), so looked into other ways of working remotely, and Dropbox provided the answer.

You'll need an account with Dropbox of course (sign up with my affiliate ref and get an extra 250Mb here), as we'll be using it's Public Folder feature to store our compiled CSS.

How to set it up

• Create a local "assets" folder on your computer.  I created this within a private projects folder within Dropbox, since that way you get some backup/version control and it allows you to pick up on a different computer if you want.
• Your assets folder should contain at least your LESS files that make up the compiled CSS.  You can also add any CSS images and Javascripts in there if you want to take advantage of CodeKit's compression tools, but remember you'll need to manually upload to your server if these are compressed or compiled.
• If you're using the LESS @import feature correctly, the extra LESS files should already be excluded for compilation, with the exception of the main LESS stylesheet which compiles.
• Set the output path of your main LESS file to a your "Public" folder within Dropbox.  You can put it into a subfolder if you want to keep things tidy.  Get the public link for the file from Dropbox.
• In the main HTML document for your site, paste the public Dropbox URL for the CSS source file.

That's pretty much it. When you edit and save any of your imported LESS files, CodeKit will compile the CSS, save it to Dropbox, and Dropbox will instantly update the online version.  Due to the generally small size of CSS files, this should only take a couple of seconds and you'll be able to refresh and see your changes.

How to deal with relative CSS image paths

LESS makes it easy to fix any path issues – obviously unless you save all of your images within your Dropbox public folder, they won't show up because the path will be incorrect.

To fix this, set a less variable for your site's Base URL:

@baseURL: "http://www.mydomain.com";

Then, simply reference this variable every time you want to use an image in your CSS:

.logo {background: url("@{baseURL}/images/logo.png") 0 0 no-repeat;}

…and you'll be good to go!

There are 2 awesome comments...

1. 

   Bryan Jones - December 22, 2011 at 7:52 pm

   Glad to see someone has gotten Transmit’s mount feature to work with CodeKit! Another way to do this is to use MacFuse to mount the remote server as a disk. Some people who had trouble getting Transmit to work reported success with MacFuse.

   The reason CodeKit can’t detect changes on a remote server (unless you mount it as a virtual disk) is that the app relies on the OS X kernel to tell it when files change. If those files are on a remote server, the kernel doesn’t handle reading/writing them, so it doesn’t detect changes. (The read/writes are handled by the operating system on your server, not your local machine.)

   And finally, CodeKit creates *zero* hidden files in your project. I would be super pissed if I downloaded an app that junked up my projects with hidden garbage, so I will never write an app that behaves that way. These hidden files may be a byproduct of mounting a remote folder as a virtual disk or there may be something else going on. Either way, CodeKit doesn’t create them!

   Thanks for the tips!
2. 

   Dan Luton - December 22, 2011 at 10:10 pm

   Hey Bryan,

   Thanks for the clarifications, and thanks also for such an awesome tool! I can’t wait for it to go gold

   Yeah, not sure what the files are – at one stage, Coda showed them as duplicate files (I had 3 “main.css”) and I had trouble deleting them.

   Having checked again, they are named like this:

   .fuse_hidden0000004600000001

   …which suggests they are in fact related to Transmit’s Disk Mount feature (I know it has it’s roots in MacFuse).

   I think I mistakenly blamed these files for the problems I had getting remote changes to work, when in fact it was simply because I was attempting the changes over FTP.

   I should probably have waited until I’d played with it a little more before posting this, but I was just blown away by the potential. CodeKit is such an amazing tool, and is already transforming the way that I work. Well done!

Leave a comment: