It’s been a great — and busy — month of learning. The power and potential of the modern web developer’s toolkit is seriously impressive to someone who cut his teeth on static table-based HTML 3 in the 1990s. I’m not talking about gee-whiz technology like Flash, which never seemed to serve a purpose other than making a website look expensive. I mean truly useful tools that help developers make much better products at a much faster rate. The new technologies have shifted much of our work away from the gritty detail that used to make web development so damn tedious. The web professional has been elevated from musician to conductor; our conceptual map for a project is effortlessly transformed into corresponding code by the wave of a hand. We can do so much more, and do it faster and more efficiently than ever.
I was so enamored by all these fine choices, I found the greatest challenge was simply deciding on which frameworks or tools to settle on. Both client-side and server-side ecosystems have balkanized into zealous factions since I left, making it difficult to settle on the right toolkit. Naturally, I can come back and learn the rest, but I needed my first foray into modern web practices to really work. Below are some of the tools and practices that I’ve come to depend on in the past couple of months, in no particular order.
Compass/Sass and Sensible CSS
While I was skeptical, I became a Sass believer once I read this article. Sass, along with its cousin Less, is a pseudo-language expansion on CSS that compiles to beautiful minimized stylesheets. Nested CSS was enough to convert me, let alone the power behind “mixins”, loops and mathematical operators. Compass expands on this with a rich set of prefab mixins and helper functions, but its sprite magic will blow your mind (if you’re so inclined). Skip this video to about 1:40. CSS is a true pleasure to work with now. I’ll add more about this amazing pair in a future entry; for now, suffice it to say that you’ll refuse to go back to editing in vanilla CSS once you see this indispensable pair in action.
Susy Framework and Responsive Design
While we’re talking CSS, allow me to heap praise on the CSS framework, another best practice that was just beginning to take hold when I checked out of professional development in 2007. These provide a just-add-water logical scaffold for your projects: you define column widths and page size, and the framework CSS assembles all your divs and sections into a sensible grid. This is a huge time-saver and brings a lot of order to my projects. Bootstrap and Foundation both enjoy a lot of buzz, but Susy is now my go-to framework: it’s built on Compass/Sass, it’s semantic (none of this “span-2″ business in my pretty HTML) and it makes responsive design a snap. Responsive design, incidentally, is amazing. I have unconditionally put a mobile-first design approach in my workflow for new projects. Frankly, all new sites need to be co-developed for mobile and desktop; pinching and panning on a 5″ screen just isn’t going to cut it anymore.
Git: Remembering What You Did and Why You Did It
When I came back to the business, a friend of mine gave me the best two words of professional advice I’d ever heard: Learn Git. I have to confess: I’m a version-control n00b. What else can you expect from a lone-silo cowboy coder? Well, even as a single developer, Git is essential. It naturally encourages the division of tasks into self-contained chunks; each “commit” should represent a new functional state for your project. It’s a cinch to go back in time if you later regret adding some new feature, and branching opens up the possibility of working on long-term changes while maintaining the functional production site. After you configure the project’s repo, pushing changes up to the public server is as easy as my old unix workhorse, rsync. Git has become so invaluable, I am retrofitting old, living projects into git workflows to finally put some order to their maintenance.
The Scrum Way
I am just learning about agile and scrum practices at the moment, and I’ll be posting more about these workflows in the future. The scrum project management method reduces projects of any size into their fundamental problems in the form of stories (“I am a user and I want to edit my listing”) which we then solve during bursts of activity (no wandering willy-nilly from feature to feature). Because we focus on solving simple problems in a stepwise fashion, the client can monitor stages of development (rather than waiting for a Madmen-esque grand reveal) and — supposedly — give feedback that doesn’t completely invalidate earlier, approved work. It requires forethought and imagination, but scrum pushes us to engineer high quality, innovative products that actually client solve problems (rather than simply appearing to).
I really have no business talking about TDD right now, but after reading some tutorials on test-driven development and unit testing with PHPUnit, I am sold. TDD pushes us to make resilient, future-proof code by developing tests alongside the working code. We design the automated test before you write a line of code, and we only move on once it passes the test. It’s natural selection in a text editor. The sweet thing is, once you’re done, you have a beautiful test suite for the project that can detect problems as the project evolves through feature creep. I haven’t had the time yet to actually develop a project with this methodology, but it’s on my must-learn list.
Laravel: Making Server Side Programming Fun Again
If I’m going to learn just one PHP framework in 2013, Laravel is the one. This was a hard decision to come to; whatever choice I made would require a commitment of several months’ worth of projects to dig in to any meaningful depth. The PHP framework accelerates projects by doing all of the heavy lifting behind the scenes, managing tedious chores like HTML template logic, SEO-friendly slugs and application security. A good platform shouldn’t kill servers for simple requests. It should offer a simple easy-to-scan workspace. Above all, it should be so flexible I’ll never have to bend my own project goals simply to appease the framework’s demands (I’m looking at you, WordPress).
There’s a disquieting number to choose from, each with their advocates fervently backing their platform. While I had initially settled on CodeIgniter if only for its reputation of a gentle learning curve, flexibility and a huge support community, I’ve been sold on Laravel as the PHP framework of the future. I’m currently going through some tutorials, but have so far been delighted at how damn easy it makes development. Django, Yii and Symfony are on my list, but I’ve got a bright future with Laravel. Stay tuned.
Sublime Text 2
I am a long-time vim booster, but Sublime Text 2 has really lived up to its name. It makes editing and working with code effortless in a way I’d never experienced in a text editor. With user-contributed plug-ins and code snippets, Sublime Text 2 is evolving rapidly while remaining lightweight and fast. Check out this list of must-have plug-ins. It ain’t free and while it’s worth every penny, you can use the full-featured trial version, apparently indefinitely.
jQuery for a Better User Experience
Some Mac Stuff
At the risk of annoying my Windows colleagues, I’ve gotta say I’m pleased with how well OS X has held up for software developers over the years. It’s the unix core that I’ve most bonded with, but lately I’ve been depending on a few cheap interface tools that really speed up development.
- Total Spaces: Apple’s latest user-friendly modification to virtual desktops is sluggish and gives me motion sickness. It’s just bad UX design, and they arrogantly removed any user-accessible means to alter it, including from the terminal. Total Spaces gives me control over my virtual desktops work, and now I swap desktops with my own keyboard shortcuts and without stupid animations. Totally worth $15.
- Live Reload: Buy the app and install the plugins for Firefox and Chrome. Then gawk in amazement as your Sass (or plain CSS) saves are immediately displayed in the browser. No application switching, no refresh button. Live Reload’s immediate feedback is really speeding things up.
- Divvy: Quickly lay out your windows in a tight grid on the screen. I tend to make a mess out of windows and actually waste a fair bit of time looking for them. Divvy quickly resizes my windows into a nice, orderly grid. It’s a little bit frivolous but it my obsessive-compulsive side loves it.
This was a birthday present I just installed today, so I’m especially excited about it. This blog entry is the first thing I’ve typed on it — I love it. The Das Keyboard cherry MX brown mechanical keyboard feels and sounds oh-so-satisfying, and it’s going to last me a long time (that is, until its foretold demise in a deluge of coffee). If you’re going to sit at a computer ten hours a day, having a good keyboard is mandatory. Goodbye, crappy 10-year-old Apple keyboard with your cheap dome switches. The icing on the cake: blank keys! Sure, it’s good for remapping (putting the ⌘ key in the right spot was the first thing I did) and is making me a better touch typist, but a blank keyboard is just cool. It looks like the keyboard coders would use on the Death Star. My nerd credibility has nowhere to go but up using this bad boy.