02.05.13 |
∞
If you’re writing a web app and care at all about the iOS market, startup images are important. Yet when searching around for more detailed help on my Blue Drop weather app, it was hard to get a definitive answer on both code and image requirements for different iOS devices.
But when I stumbled on Taylor Fausak’s site after a few Google searches, the answer was obvious. On this post Taylor goes over proper startup images for just the iPhone 5, but he also wrote earlier about how to handle other iOS devices.
02.04.13 |
∞
Steven Bradley of Vanseo Design examines how exactly auto in the context of CSS offset works. It’s an issue that can easily mess up the location of absolutely positioned elements, especially, as Steven highlights, for drop down menus and popups. Worth a read for almost anyone who works with CSS and page layout regularly.
02.01.13 |
∞
Ask almost any front end web developer: once you get deep in a complex, ongoing project with a lot of CSS, unused selectors can be a problem. We’re naturally inclined to keep on bulking up our projects with cool CSS3 transformations and responsive media queries, but it’s decidedly unglamorous to prune what’s no longer needed.
That what makes this little Firefox plugin such a good start. It’s far from comprehensive – you only can really search for unused selectors in the immediate scope of the page you’re on – but it has come in handy.
01.31.13 |
∞
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.
01.30.13 |
Web/UI Design |
∞
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.
Sublime Text 2
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.
https://www.sublimetext.com
Emmet
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.
http://docs.emmet.io
Snap Ruler
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.
http://www.snaprulerapp.com
ScreenFloat
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.
http://www.screenfloatapp.com
ColorSnapper
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).
http://colorsnapper.com
Kaleidoscope 2
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
LiveReload
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.
http://livereload.com
Alfred
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.
http://www.alfredapp.com
01.30.13 |
∞
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.
01.29.13 |
∞
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.
01.28.13 |
∞
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.
01.25.13 |
∞
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.
01.24.13 |
∞
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.