In the last year I’ve worked more from home than I have in all my previous roles combined. It’s a move that comes with both a lot of freedom but also new challenges. Tech writer Matt Gemmell writes about the subject at length in this post. There’s plenty of smart advice that’s worked for me as well in practice, especially sticking to a schedule and scheduling blocks of time for email.
When I’m working at my Mac it’s easy to reference my iCloud tabs from my iOS devices when I’m in Safari. But elsewhere it’s a no go. This little extension by Kevin Marchand for the Alfred keyboard launcher makes the tabs much more accessible: I type ‘tabs’ into Alfred and immediately can open a tab with an extra key press. Very useful.
Designer Jeff Archibald:
If you’re working 60 hours a week, something has broken down organizationally. You are doing two people’s jobs. You aren’t telling your boss you’re overworked (or maybe he/she doesn’t care). You are probably a pinch point, a bottleneck. You are far less productive. You are frantically swimming against the current, just trying to keep your head above water.
These signs? They are not the signs of a healthy business or work environment.
I admittedly had a period much earlier in my career where I started falling into the “macho crazy hours” trap. That productivity was measured in time and late nights in the office. But then you wake up; perhaps a launch doesn’t go according to schedule, or there’s a management shakeup in the office. You start realizing you haven’t seen your significant other much or hung out with friends like you use to. That’s when you realize having a healthy work environment with happy employees working sane hours (with rare exceptions from time to time, but the key word is exceptions) is critical to your well being.
Work hard and show pride in your work, but realize there’s a limit.
Many “work on what you love” pieces overreach in their optimism. But there’s something about this writing by Scott Belsky, cofounder of Behance, that’s compelling. Maybe it’s the compactness and realism of what he’s pitching: work on things that you have genuine interest for, talent and opportunity.
Kevin Whipps writing for iPhone AppStorm:
The thing about Vesper is that it’s great to use and sure is pretty. But if my notes are trapped on my iPhone, it’s pretty much useless to me.
Bingo. Kevin also goes after Vesper’s creators for their lack of Markdown support; not as critical in my mind as syncing, but it’s still a problem.
I hadn’t heard of Twitter Design Director Martin Ringlein before this talk, but regardless of his exact background, he’s a natural speaker, and I loved his frankness when it came to worker capacity prior to burning out. It’s really a talk that can apply to almost any fast paced/startup profession, from producers to designers to web developers. Martin goes off on some tangents near the beginning which pad out the length of the talk, but I’d still recommend it to almost anyone.
Really interesting article by self-described fitness geek Maroun Najjar. There are insights on differences between light, deep and REM sleep, caffeine, napping and more. It’s a pretty quick read but I learned a lot.
An hour long talk by Google web developer and evangelist Paul Irish at a recent HTML5 developer conference. Some great tools and ideas here, from shell customization to SSH and Chrome DevTools tricks.
The development agency Monterail wrote a cool post recently talking about how great Trello and a Kanban methodology works for project management. I’m not a PM at my current day job, but I’ve found for both my work and personal workflow that Trello is pretty awesome. My usage is so simplistic it’s pretty hard to argue that in my case it’s only a step or two above glorified to-do list, but for me the big difference is the visuals. I can easily see if I’m getting slammed with priorities or what’s left at a glance; I’m never losing context and sight of the big picture.
Ask almost any web developer: a strong suite of development apps and plugins is central to our productivity. However, finding the right apps can be a frustrating experience because of the app selection has grown dramatically over the past year thanks to the Mac App Store, as well as the spread of GitHub and app news resources like Hacker News, Dribbble and Twitter.
To cut through the clutter, I thought it would be helpful to go over the most important tools to my daily web development workflow. Note that app usage stems from personal, idiosyncratic decisions; what works for me may not work for everyone else. Yet this is a solid toolbox and if you’re at all considering trying something new, consider an option from the list below.
A good text editor is arguably the most important app in a web developer’s toolkit; you’re only as good as your code, and you code in a text editor. I was a die hard TextMate fan for years, but TextMate’s development has reached a dead end. I had to look at alternative options, and while I toyed around with Espresso and BBEdit, Sublime Text 2 emerged as a clear choice. I love the editor’s speed, even with huge directories open, the TextMate-like Cmd+P fuzzy file search and the multiple selection mode. It also has full compatibility with TextMate bundles and themes which made the transition away from TextMate seamless.
Emmet – version 2.0 of the popular web developer plugin Zen Coding – is a revelation. I was admittedly bearish on the initial Zen Coding plugins; something about the syntax never clicked with me. But Emmet is different. It’s faster and far more refined than older Zen Coding tools. With the plugin’s HTML snippets and slick CSS resolver, I can code most HTML and CSS much faster. Even if you’ve been dissuaded by some Zen Coding quirks in the past, give Emmet a try over the course of a coding day; most developers should see a difference after just a few hours of use.
Any web developer who also designs or works off design comps has to frequently deal with alignment and size issues among images and HTML elements. I’ve seen coworkers try ad hoc measurements by using the top edge of an app window to measure alignment, or taking an actual ruler against the screen to compare the relative size of two elements. Don’t do this; there are far more accurate and faster dedicated measurement apps out there.
The most popular pixel measurement tool is inarguably IconFactory’s xScope. It’s an excellent app, but its separate mini tools never meshed well with my personal workflow. Instead I prefer Snap Ruler, an app that only focuses on tools I use heavily: a loupe and an on screen ruler. You can size elements and export CSS code in three clicks. It’s fast, lightweight and has solid keyboard shortcut support.
I bought ScreenFloat on a lark. It was on sale for $2 and I needed something simple to float a web page. Little did I know at the time how awesome this app is for web development. I use ScreenFloat almost exclusively for floating Photoshop comps and wireframes on top of the web browser as I write code. ScreenFloat’s secret weapon is its adjustable transparency; I combine mouse wheel movement to adjust comp transparency along with a global keyboard command to hide or show the comp entirely. These quick shortcuts allow me to focus on just the code instead of fiddling with the comp itself. Overall, the app greatly increases my development speed and accuracy, especially with high precision “pixel perfect” comps.
If you work with CSS, you need accurate, consistent hex colors in code to match your ideas and graphical comps. It’s true that you can generate hex colors via screenshots and the Photoshop eyedropper. Yet this workflow requires a lot of unnecessary clicks and Photoshop is a heavy app to keep open for just this purpose. Instead, get a dedicated hex color picker; there are many good ones on the App Store, but I like ColorSnapper the most. It couldn’t be easier to use: I click on an onscreen color with the app and a corresponding hex color gets pasted to my clipboard. It’s also retina display friendly and I can easily switch the code color format from hex to other popular options (e.g. rgb).
If you do any sort of file comparisons you owe it to yourself to try out Kaleidoscope. The app was originally developed by (the now Facebook owned) Sofa but is updated and maintained by Black Pixel. These are two crack design and development shops and the pedigree shows. There are many other file comparison apps out there, but I find none have the level of polish that Kaleidoscope has. I use it every day as a simple Git diff tool before my code checkins or rebases.
http://www.kaleidoscopeapp.com
Over the course of a full day of coding, the Refresh button on a web browser can turn into an annoying time sink. You’re constantly saving work, switching over to the web browser and tapping refresh to get your web content up to date. LiveReload takes that action out of your hands: HTML changes auto-reload the page when you save while CSS changes take their effect instantly, no reload necessary. It also can auto-compile pre-processor code like SASS and LESS automatically in the background. Note CodeKit tends to be the more popular auto-refresh app choice with its cleaner UI and extra customization options, but I found LiveReload to be a slightly faster experience overall.
Alfred is a bit of a cheat falling on this list given it isn’t really a web targeted app. Yet it’s such a productivity booster that I can’t imagine my Mac without it. Alfred is a keyboard ‘launcher’ app: hit a keyboard shortcut and a text box pops up where you can quickly launch applications, run shortcuts, search the web and much more. The Verge ran a great introduction to the app last month if you want more of a primer before diving in.