Cool Web Developer Tools – Koala and Chrome Remote Preview

Cool Web Developer Tools – Koala and Chrome Remote Preview

Don’t like the command line? Fear no more!

I saw a tweet the other day that told of a way to compile Sass, LESS, or CoffeeScript without using the command line. Enter Koala, a cool little app to help you make the jump to preprocessors as painless as possible. Normally I use the command line and type in ‘compass watch’ and forget about it. It really isn’t that difficult, but a lot of people seem to get scared when confronted with it. If all you want to do is compile, I really don’t see a reason why you shouldn’t use Koala. The interface is incredibly easy, with very few buttons or options. The ones it does have, are the ones you would most commonly use. Take a look at the image below and see what I mean.

Koala app for Sass, Less, and CoffeeScript

Basically you just have a couple things to do after you install the app. Hit the plus sign to locate the folder containing the files you want compiled. In my example, they are .scss files as that is what I am most interested in. Folder shows on the left, the files within on the right. Click on one of the files and you see a set of options pop out on the right. Dynamic Compilation will auto compile for you. If you don’t want that, uncheck it and then you can hit the compile button whenever you need it to. Crazy easy right? Below that are some other options, with the most important one being Compass. You then have a drop down menu to select how you want the output CSS file to be styled (nested, expanded, compact or compressed).

The one thing you do have to change is the output path of the files you are compiling. It seems by default that they will compile into the same folder, which is generally not what you want. All you do, is right click on one of the files, browse to the css file you want it to compile to, and that is it! Open your Sass, LESS or CoffeeScript file you want to edit in whatever editor you want, and when you save…BAM! Compiles for you. Very nicely done, that.

Chrome Remote Preview

Written by Viljami Salminen, which you probably know as an author at Smashing Magazine. Basically Chrome Remote-Preview, once setup, lets your devices all see the same site with the change of a txt file. Type a url in there, save, and all the devices automatically refresh to see the same thing. That way you can view a site on a bunch of different devices all at the same time to see if there are any layout problems. While the functionality is awesome…the “documentation” is written with the assumption that you will just know what to do.

Copy and paste all files to a public Dropbox folder/server/localhost, edit ‘url’ file and wait for devices to refresh. That’s all!

The instructions are so damn vague that is is almost laughable. No sir, it is NOT that simple. At least for an idiot like me who sometimes feels like he is feeling his way through the dark with stuff like this. So below, I’ve written up some instructions using the Dropbox and the Chrome extension method, for you front-end people to get it going as quickly as possible.

  1. Download Remote-Preview, and unzip the files
  2. I’ll assume you have a Dropbox account: Open Dropbox, and copy all of the files from the unzipped folder into your Public folder in Dropbox
  3. Install Chrome Remote-Preview extension
  4. In Dropbox, right click on the update.php file in the control folder and copy public link
  5. Turn extension on in Chrome and right click on the icon it places in the tool bar to get to the Options
  6. Paste in the url you copied
  7. In Dropbox again, right click on the index.html file outside of the control folder, and get the public link for that
  8. Enter that url in browser on whatever device(s) you want to use
  9. In Dropbox, open the url.txt file, and change the url to whatever site you want to look at in the other devices, then save

Now, whenever you change that url in the txt file, and save, it will refresh all the devices. The only issue I see is if you want to just refresh the url of the page you are already on to see a change go through. I’m not sure how to do that since it is looking to see if there is a change to the txt file. Other than that though, it allows you to see any problems on your devices, at the same time. Pretty bad ass little tool, and I believe this will come in handy in the near future.

Coupon Code: webmachine

Tags: , ,

Leave a Reply