We’ve all been there: you’ve been adding to your CSS but iterations later there’s plenty of unused selectors junking up your files. You need grunt-uncss, a Grunt task to strip unused CSS from your projects. It’s arguably best for smaller projects, because if you’re not careful with keeping your Gruntfile with proper source html files you could have a mess on your hands.
Nice talk at the Fronteers web developer conference all about the flexbox module by developer Zoe Gillenwater. Some of the talk got a bit too deep into coding syntax that was a bit difficult to follow in a single slide based presentation. But stick around to the end where Zoe talks about the practical benefits of using flexbox today. It’s the first time I’ve been encouraged to dip my toe into flexbox with production level work.
Keeping to a reasonable line width adds significantly to a web page’s readability. But it’s easy when building a site to forget about this and hand counting characters on a screen is a drag. That’s why Chris Coyier’s simple bookmarklet here works great. Run it on any site and determine immediately how your lines are shaping up.
Web developer Louis Lazaris takes a novel approach to extended CSS instruction: spend $7 in the form of an e-book and get 83 solid CSS articles from Impressive Webs. No extra promos, no extra advertising. Smart.
I’ve read my share of CSS Flexbox tutorials and feature sites, but none that had the finesse and clarity that developer Philip Walton pulls off here.
I mostly have confined my Flexbox work to just smaller side projects or Chrome packaged apps, given the specifications limited compatibility among all modern browsers (Safari has a bit of catching up to do with Chrome but we’re almost there.) But damn do the showcase examples here make it tempting for future implementation. Even with fallbacks, the code here is just so clean and semantic.
Emmet LiveStyle is a Chrome extension paired with a Sublime Text plugin that transforms your CSS workflow. Install both tools and you get no BS live bi-directional CSS editing. To put it another way, either tweak in Chrome DevTools, your Sublime Text CSS file or both, and the changes immediately take effect on your page.
Admittedly LiveStyle isn’t perfect. First you have to be committed to Sublime Text as a text editor (which I’d highly recommend, but it isn’t for everyone). Setup can be sometimes annoying; when you switch to the tool in DevTools you’re often forced to assign CSS files you’re editing manually. Also it’s in beta, so expect occasional stability problems. But for the most part when you start getting in a CSS editing groove it’s pretty awesome.
Yes, this technique written by web developer Stephen Shaw has gotten linked by almost every tech source online: Smashing Magazine, Sidebar, Hacker News, it’s all here. But it’s worth the hype. Comes down to this: as long as you set the height of an element, you can easily center it vertically with just a few simple CSS rules. Heavily cross browser compatible too.
Web agency Barrel suggests some good ideas for taming image heavy sites. As a small caveat, I’m not crazy about some of the author’s example CSS (selectors that combine two classes in one level like ‘img_wrapper.loaded’ should be avoided) and I disagree that writing inline onloads are the way to go – there are cleaner, JS solutions to detect a reliable image load. That said, it’s an excellent primer, especially for newer front end web developers.
Nifty jsFiddle example originally tweeted by developer Lea Verou. If you want to animate a block level element from a fixed height to height: auto, rely on max-height.
I have not gotten the chance to use Phantom CSS out yet, but it’s promise and buzz among fellow web developers is promising when it comes to visual regression testing. To put it in the words of its creator, developer James Cryer:
PhantomCSS takes screenshots captured by PhantomJS and compares them to baseline images using Resemble.js to test for rgb pixel differences with HTML5 canvas. PhantomCSS then generates image diffs to help you find the cause so you don’t need to manually compare the new and old images.
Think about it: an open source delivery system to generate images for differences in a web site. That’s extremely powerful stuff as it can catch errors eyeballing code often misses, especially on a large web site base where visual spot checks on every page are out of question.