Frontend Performance Training: This repo contains slides and materials to help you learn about frontend performance. From basic principles to workflow automation, you and your team can learn how to audit sites, fix problems, and stick to a performance budget throughout the life of a project.
Wow, not even kidding…
“Responsive images today” video by Pete LePage. Did you know that you can target different image resolutions without @media queries, by using a comma-separated list of images in the img element, or by using img-set in CSS background-image?? Well, you can soon, anyway…
Like to learn more about responsive images? How about learning pretty much everything?? One of the best voices on the subject, Jason Grigsby, is working his way through what looks to be a 9-part series on responsive images; links to all parts so far can be found between the article and the comments (here’s the closest deep-link I could find, then scroll up a bit).
Jonathan Suh takes a second-pass at improving his site’s speed, and is nice enough to tell us “what I did, why I did it, and the tools I used to optimize front-end performance on my site.”
Wanna check your page load performance? Well, here is a “[s]uper simple example of adding perf timing to the page display during dev work“…
From Dave Walsh come 7 Essential JavaScript functions to help your code perform more efficiently. Certainly the debounce and poll functions anyway!
Moving beyond “just” performance, even if your code works just fine, make sure it doesn’t smell!! And if it does, Elijah Manor will help you find it, and fix it.
An incredibly slick method for letting users know which links they have already visited on your site, well beyond the possibilities of :visited. Great use of localStorage!
Aaron Gustafson describes what he calls Interface Experience Maps, which he uses to describe and plan progressive enhancement functionality and requirements. I’ve made so many of these over the years, all as scribblings on notebook paper, but I’m glad they have a name, and hope to see people use them more often!
A Practical Guide to Flexbox: Don’t Forget about flex-shrink. With the spec so new, it’s these little pieces that will frustrate us all until it eventually becomes second nature.
Harry Roberts has come up with a HTML/CSS combo for creating a CV that looks like a CSS file, fittingly called CSSCV. Not sure I would go through the effort, but it’s a really nicely done project!
Social share icons… You’re unlikely to find a site with none, but if your boss/client has any conscience or good-sense, you can at least convince them to forgo the brutal embed methods all the social sites offer (the additional crap they push on your users is ridiculous!) and just offer HTML links. So, how to get a nice, clean, simple set of links? Just click a bit, then copy and paste.
symdiff is an interesting Grunt task, comparing your HTML and CSS and warning you about anything unused on either side.
I try really hard to make all abbreviations on this site accessible, so any person, or machine, can figure out what they mean. But touch experiences have always bothered me: without a hover, those meanings are just not there… Until abbr-touch, that is… Very nice. (Though, when you offer a demo link, it would be nice if it opened a working demo, not the source code of a demo page… ;-)
Bootstrap Form Builder “generates valid HTML for Bootstrap 3 forms that will work on any website”. It’s a slick generator, if you’re a Bootstrapper!
I remember quite a while ago when Chris Coyier advised us all to be careful when creating nested border radii, and quipped “There probably is some fancy math you could do to figure out the perfect values, but I find eyeballing it works pretty well.” Well, Chris, here’s your fancy math, without having to do the math! ;-)
And finally, whether you’re looking to get away from the big city, or dig a little deeper into it, I gotcha covered…
Happy reading,
Atg