I’ve seen a recent tide of front end developers who are leaning against IDs in their CSS selectors. Based on the work I’ve seen recently on sites from Apple to Amazon and Smashing Magazine, ID selectors are not going away any time soon. Yet designer Oli Studholme makes a pretty compelling argument why they should.
CSS guru Chris Coyier, on integrating CSS preprocessor language SASS into his workflow:
I can tell you that after making the jump, I am actually more productive. And I write better CSS. And the projects I work on are in better, more maintainable shape because of it. And in some cases, faster. My advice is: don’t let people get on your case. Just do what you gotta do. If you get some time to try it out, do it. And do it on a real project. Just tinkering around doesn’t count. You gotta really try it to see how it might work with your day to day.
Chris’s argument is influential now that I’m experimenting more and more with SASS. I’m a relatively recent newcomer to the language, and it’s pretty fascinating to see its effects both in the office and on side projects.
Dan Mall is a huge figure in the web design community. I’ve been a fan of Mall’s output for years, yet I haven’t spotted many interviews with him after he left NYC firm Big Spaceship. This talk with The Industry‘s Conor O’Driscoll is brief yet informative. I especially liked hearing about Dan’s day to day:
I wake up everyday around 4:45AM-5:00AM. I get to the gym between 5 and 5:30 where I’ll lift for an hour then play either basketball or racquetball with my brother, then head home around 7 to shower and get ready for the day…We’re in bed by 9PM.
That’s an early schedule, and I’m impressed Dan sleeps eight hours a night.
I’ve lately been catching up with this news summary site each evening after work. It’s a quick summary of the big stories and uses excellent typography and a responsive design. I shouldn’t be surprised given the work is by Mule Design. It was mocked up and launched within a week.
I learned a few nice tricks here by web developer Flavio Copes, most notably the ability to debug code based on DOM modifications.
Social news site Hacker News has come a long way from its modest roots in 2007. It has diversified its subject matter (though tech and startups still dominate) and in the process has become essential reading for developers, designers and entrepreneurs. I scan HN headlines regularly, at least once every day. Unfortunately, the site’s design is a total eyesore. There’s inadequate line spacing, poor use of typographic hierarchy, little contrast, and comments that stretch out too much – it’s better on the eyes to read on narrower columns.
A simple Chrome or Safari extension that restyles HN’s look is an obvious choice and there are many popular options out there. Yet few address how I tackle HN so I decided to create my own: You can download the Chrome variant at the Chrome Web Store and the Safari extension is available as a direct download on Cloud. You can find downloads and source code for both at my GitHub.
I like to make Hacker News as scannable as possible; I usually ignore comments, point totals and other article stats. To emphasize this I adjusted typography; headlines are bumped up to 24px Helvetica. All other text is secondary and set to 14px or smaller.
Many other extensions are minimal to a fault; there’s little contrast or division between headlines. That cuts down on scan speed as you scroll down a web page. So instead I went in the opposite direction: I added extra white space between articles along with soft gradients to emphasize splits between headlines. I also shifted HN’s color palette away from sepia and oranges to neutral, soft whites. Branding aside, neutrals are just more comfortable to browse through for longer periods.
Note that while I’m not so much into HN article stats, they do help measure “hotness” and article popularity. It’s a lot easier to scan these stats visually instead of deciphering HN’s default view with several tiny numbers crammed next to a headline. To achieve this I swapped out the numbers and replaced them with multi-colored, CSS3 based bar graphs. They automatically appear when mousing over an article and display points (red), comments (yellow) and article age (green). To get a quick snapshot of what’s hot you can tap ‘s’ to turn all article graphs on at once.
Overall, my extension is a slightly different slant on Hacker News than what’s already out there. It’s not for everyone, but if you read HN I encourage you to check it out.
File this under the “why didn’t I discover this earlier?” department. Instacss is a very straightforward, super quick CSS documentation repo. Up till now when I had to cross reference a CSS property, I usually ended up running a Google search with the term and ultimately navigating over to W3 Schools. W3 is still a sold resource, but Instacss is far more useful. It’s super fast with live examples and clear browser compatibility charts.
If you’re looking for a good intro to front end semantic fundamentals, especially for non technical people, look no further. I dig the layout, the organization and its structure. There’s no fluff here – just the basic syntax with a few examples.
If you’re anyone that dives into CSS on a regular basis you’ve had to fish for extra colors for use on gradients, hovers, border edges, and other HTML elements. For tonally consistent options I’ve relied on colllor in the past. Yet often I just want to slightly lighten or darker a specific hex color, but don’t want to open up Photoshop just to slightly adjust a HSL curve.
That’s exactly why 0 to 255 works so well. No more Photoshop or big third party tools. Just head here, enter a hex color, and you get a full spectrum of colors from light to dark.
I rarely find work that’s as tedious as determining proper CSS from sprite sheets. Sprite Cow makes the process far more easy: Upload a sample sheet and click directly on individual sprites to get their proper CSS coordinates.