Adam Tuttle

How my dev stack has changed in recent weeks

While I'm always pushing myself to try new things and find ways to be more productive, over time I've developed a sort of "home base" for the tools that I use to get my work done. I thought I would start by describing what that home base is:

  • ColdFusion Builder 2
  • Chrome & FireFox (latest stable builds) and their respective developer tools
  • Samsung Galaxy Tab 10.1"
  • Android Smartphone (currently a Motorola DroidX)
  • LESS CSS
  • jQuery
  • Bootstrap (most especially for the responsive css grids)

And yes, while the last three are technically "frameworks", I consider them an indispensable part of my tool belt. It is the exception, not the rule, when I find myself starting a green-field project and NOT using one of them.

For months now I've been a true believer in at least "always mobile" if not "mobile first". The percentage of consumption being done on phones and tablets is already astonishing and still on an upward trend, so if your websites aren't optimized for mobile screens you're already at a disadvantage. So I test everything that I work on with both my tablet and my phone.

If you don't have a tablet I would recommend you get one, if only for this purpose. They can be pricey, so if you're on a limited budget my advice would be to keep your eye on Woot -- they seem to have tablets on sale at least 2-3 times a month. Subscribe to the daily email and watch for a deal on the tablet you want. I got mine at a really nice discount, and it's been worth every penny, even if just for testing purposes. The fact that my kids and I then have it to play with in leisure time is all bonus.

And of course whatever toolkit I'm using has to have good support for ColdFusion. Not just syntax highlighting, but real productivity features.

I spent some time trying to use TextMate as my primary IDE (during my time also learning Ruby on Rails for a few projects at Wharton), but constantly found myself hitting Alt+/Alt+ to move lines up/down, or hitting the CFB keyboard shortcuts and then frustratingly typing out things like <!--- ---> and <cfdump var="##" />... As tiny and insignificant as these types of shortcuts are, if you use them 100 times in a day, you're going to miss them when they're gone. And this doesn't even account for things like code insight and CFB Extensions. Neither of these is a constant fixture in my process, but when they do pop up, I'm incredibly thankful for them.

So what's inspired me to write this post? Three new (to me) things:

Less.app

I've been using LESS ever since I saw Nathan Strutz demo it at MAX 2011. That does not make me an early adopter. I consider myself late to this party. Lucky for me, the party is still raging on at 3am. And it's a damn fine party.

But, because I'm lazy, I was taking the lazy route. I would directly include my .less files in-page, and the less JavaScript library, and it would be converted on the fly. This way I didn't have to add any steps to my development process to compile LESS to CSS for testing. Granted, it seemed fast as hell, but even fast as hell is greater than zero milliseconds, and in this game every millisecond counts.

This week I stumbled on Less.app, which is an OSX application (There's a Cross-platform port using AIR, but the native one's better looking on OSX) that you leave running in the background, and it auto-compiles your .less files into css, optionally minifying in the process, instantly when you save a change to a .less file. Practically, this means that I write LESS code, and by the time I Cmd+Tab over to Chrome and refresh the page, the css file has been updated with my changes.

And even better? On the off chance that I make a syntax error, like forgetting a closing } brace, Less.app immediately alerts me to that fact. (The messaging could be clearer, but once I figured out what was going on, it started being easy to spot my mistakes.)

Sublime Text 2

I totally get why some people don't dig Sublime. It's definitely not for everyone, and to be honest I'm still not 100% sold on it. But it definitely has some features that I'm growing used to and will be adding as feature requests for CFBuilder. I've been using it off and on for a month or two, and then last week I decided to try and use it as my only IDE. I survived, but I think ultimately I'll end up with CFBuilder keeping the top spot in my tool belt. If I just need to edit 1 or 2 files, and I know I won't need the more advanced features of builder, then I'll use Sublime for its lightning fast startup and file-loading times.

In particular, my favorite sublime feature is Cmd+D. Highlight a variable and press this key combo. Each time you press it, Sublime highlights the next occurrence of the same word... but the trick is that it doesn't un-highlight any as it goes. It uses multiple-selection, so after you've selected each of these occurrences, just start typing and you'll replace them all at once. I don't know exactly why I like this better than a search/replace. Maybe it's that I get to see each instance as I add it to the collection. But it just feels so much more natural.

Adobe Shadow

Shadow is a great little tool that was just released last Wednesday. It's actually not entirely new technology. It's based on an existing project that accomplishes the same thing, but the difference is that Shadow is easy to setup and use, where the original project (Weinre, which stands for Web Inspector Remote, and is pronounced "winery" (or "wiener"? who knows...)) was complicated and difficult to get running, or so I'm told. Right now it's what's called an "MVP", or Minimum Viable Product. This means that Adobe has lots of ideas and plans for where they could take this, but right now its features are limited to just enough to get the point across and make an impression. The limitation is that currently it only watches for URL changes and follows them. You can't submit forms/etc. But it has made an impression on me!

There are 3 components to Shadow: A desktop app, a Chrome extension, and a native app that you install on your (iOS and Android) phones and tablets. You turn them all on and enter a couple of numeric passcodes to connect the devices to the desktop, and from then on, the devices open whatever web address you have open in Chrome. They... shadow... you. Get it? Not only that, but you can do what's called Remote Debugging. If you're familiar with Chrome Dev Tools, which allow you to tweak the HTML, CSS, and JavaScript of a live page and see the effect -- that's what remote debugging is. Except you're doing it directly on the selected device, from your computer. I can pretty much say, this is the best thing to happen to front-end web development since CSS.

If you're a visual person and don't really get what Shadow does for you, you can see it in action in this video on Adobe TV.

It's interesting to note that for the most part my tool belt isn't changing, I'm just adding to it. Sublime isn't really replacing my CFBuilder usage, but rather complementing it in a few cases where I would have previously used Notepad++ or something along that line.

1 response:

Lola LB

Lola LB

The only thing I don't like about Sublime Text 2 for Mac is the inability to drag-drop. I deal with text on my side (working with a programmer who does most of the work) and sometimes its quicker just to use Sublime Text and I often have to move text around. I'll select text, hold the mouse button down to drag it somewhere only to find it doesn't work. So I have to stop to do Cmd-X, find the new place, and then Cmd-V. Irritating interruption to my work flow.

Your comment:

Leave this field empty: