The Filament Group carries serious weight in the responsive web design community, not just on some of their projects, but their open-source code contributions: Picturefill and Grunticon alone are very significant. That’s what makes this post worth paying attention to. Scott Jehl outlines strategies for using webpagetest.org along with inline and asynchronous JavaScript requests to speed up a site’s load time.
The consistently excellent Jonathan Snook gave a talk at the recent Beyond Tellerrand conference about how to organize your CSS in a scalable, modular system. I’ve been a fan of Snook for years due to his work on SMACSS, a CSS organization system I’ve loosely adapted on my work projects. A highly recommended watch for those responsible for CSS on larger code bases.
Transition effects on icons are becoming increasingly popular, especially in navigation changes for the ubiquitous hamburger icon. While generally I rely almost entirely on detailed CSS3 transforms for my work, Marka provides an alternative, a simple JS wrapper around a icon for easy transforms. It might be fun to experiment with this on an upcoming project.
CSS Wizardy’s Harry Roberts writes one of the best single guides to keeping specificity low and complex CSS projects from getting out of control. I use to be more neutral on IDs, but at this point, I’m fully onboard with Roberts: they don’t serve any purpose a class can’t already deliver on.
Leave it to Chris Coyier from CSS Tricks to try and figure out, with code examples and video, some responsive imagery basics. Pay extra attention to the strong explanation of the sizes attribute, integral to srcset-based responsive images.
One of these features that snuck out months ago that I had no idea that existed. As developer Jon Hollin explains, with a simple change in the viewport meta tag you’re able to auto hide the top and bottom nav bars as the page loads.
Nice, short but sweet article by Google web development advocate Paul Lewis on some simple, essential rules to maximize performance on your web pages. The best part is midway down, labeled “avoid performance bottlenecks”:
A while back I wrote an article with Paul Irish on HTML5 Rocks explaining how you can get high performance animations, or in this case, how you can exploit the pipeline to make sure you hit 60fps. What it boils down to is only changing properties that trigger compositing rather than layout or paint.
I’m far from a data engineer, but every so often I’m curious about what’s going on in the web-based charting world for simple data plotting. Since late 2013 developer Nick Downie has been coding away on this framework, and I’m particularly impressed with the documentation and straightforward usage. It probably won’t be as in depth for hard core scientists, but for many organizations this could be all they need for simple analytics and stat dashboards.
Web developer Paul Lewis:
The majority of the time a user spends on your site is not waiting for it to load, but rather, using it. Therefore, user frustration can come from poor UI responsiveness, slow scrolling and jerky animations…
…With that in mind I want to highlight seven runtime performance problems that I see most often, and that your projects may suffer from.
Developer Razvan Onofrei:
Setting a vertical rhythm shouldn’t be very hard. There are many tools out there that can even generate the CSS for setting your vertical rhythm on the scale you choose.
The baseline is the imaginary line upon which a line of text rests.
There is one problem with most of these tools: they bring the baseline concept into discussion without really tackling the problem.In typography, the baseline is the imaginary line upon which a line of text rests. And it has to be aligned with the grid we use for establishing our vertical rhythm. That’s it.
But here comes the tricky part. We all know how line-height works and that the text will always be vertically aligned to its middle, NOT to the baseline.
Really enjoyed reading through the wonky breakdown between cap height, line-height and overall alignment on the web. I expect to play around with his alignment gist at some point.