A nice ongoing feature over at Press Play with video essays and written analysis of this year’s Oscar nominees. I especially liked their breakdown of the supporting actress category; with all this attention focused on Anne Hathaway, it’s easy (and unjustified) to forget why the other four nominees are even there, especially Jackie Weaver.
There are other image placeholder generator sites out there, but there’s something about this one that’s endearing. With a simple image or CSS background request to fakeimg.pl in addition to the expected pixel dimensions you can set custom text and colors as well.
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.
As I’ve noted previously here, a great design and development working relationship is essential. Developer Derrick Ko writes a great post on how to make that possible:
Plan your sprints with both engineering and design present. Give both sides a chance to be heard when deciding the priority of upcoming feature work. There’s a lot less friction when the team understands the tradeoffs at play.
Once things are prioritized, stick to it.
Brad Frost is a prolific, smart web designer with big credentials (e.g. Nike, An Event Apart), so it’s no surprise that he makes a strong case that generally web carousels are unnecessary (in Brad’s words, “carousels are organizational crunches”) or poorly implemented. It’s advice I’ll consider when I’m reflecting on the carousel that’s running on my home page…it may need a rework.
There are many excellent guides and references online for basic, “core” HTML and CSS. But for more intermediate and advanced topics like media queries and CSS3 based transformations, most great articles tend to be comprehensive yet very narrow in scope. This extended tutorial guide set up by developer Shay Howe and others is different; you’ve get a really nice starter introduction to a broad range of HTML and CSS topics.
One small quibble though; I’d argue the second lesson on “detailed positioning” is content that should be in a basic or starter tutorial, not a guide labeling itself as advanced.
Film Crit Hulk:
>
BUT IN ALL THE PRESS THAT HE GOT TO DO FOR THE FILM, THERE WAS SOMEONE HE REFERENCED TIME AND TIME AGAIN, AND INSTANTLY HULK SAW THE ENTIRE THROUGHLINE.
HOOPER IS OBSESSED WITH KUBRICK.
AND THEN IT ALL MADE SENSE…
HOOPER DOESN’T KNOW FUCK ALL ABOUT WHAT KUBRICK WAS ACTUALLY DOING.
Nice Branch thread where a lot of experienced web developers – David Kaneda, Harry Roberts and many others debate the pros and cons of various CMS options. Interesting to see a lot of support for both Jekyll and Perch, two options I’ve generally overlooked on my own side CMS work.
SlashFilm‘s David Chen:
It is a fact that many people will leave this film thinking that torture, in some way, helped lead to the killing of Osama Bin Laden. That’s what political pundits are getting upset about — the fact that people think torture was effective at all. And if the pundits are correct in saying that the film sends people out of the theater with an understanding that torture was effective, then who is wrong? Filmgoers for not understanding what the film is trying to say? Or Bigelow for depicting torture irresponsibly? As usual, I think the answer lies somewhere in between.
I don’t fully agree with David’s stance here, but his writing and the evidence behind his arguments is excellent.
Author David Bushell’s work tutorial here for Smashing Magazine is notable, not for hitting the usual responsive design notes but his restraint. There’s a legitimate smaller scope with his example: the emphasis is on progressive enhancement and heavy lifting on CSS3 where possible, not flashy jQuery plugins. That’s a good thing.