Some nice examples of adding motion to your transitions to provide a more natural, and intuitive, experience.
The Page Visibility API has been around for a while, so I was curious why Smashing Magazine was publishing an article about it now. But the author (the famed Dudley Storey!) makes a nice, subtle transition for muting or unmuting a tab.
Get to know the Virtual Viewport. A change in Chrome 40, which actually catches Chrome up with… IE?
Bruce Lawson recently helped answer what is apparently a common question: Why do we need responsive image markup (i.e. the picture element or srcset attribute) when we have CSS and JS? Thank you, Bruce.
And between the two markup options, the srcset attribute certainly has better support than the picture element does…
(Though, I am curious how the iOS column says that it requires a -webkit prefix… How do you prefix an attribute)?
So, for us WP users, we have a new plugin on the block that allows us to add the srcset attribute to our templates! (Also available via GitHub, if you prefer.) And here is a solid explanation of the new plugin, by one of the authors.
But just in case you still prefer to use the picture element, here is a little code to help add that to your WP templates too!
(Though, I am surprised to see both code bases only offering the functionality via PHP code in the templates, and not via a shortcode from within the editor, arguably where it would be much more useful…)
And while we’re so deeply-entrenched in WP-land, we all have those moments when we wonder why WP does something some way, or have some idea how we can make the code better. So, why not give them a hand?
Okay, just one more: Learn how to load previous or next posts via Ajax. Come one, that’s cool, right?
It’s no secret that I love SVGs, but I don’t think I have ever exported an SVG myself. So I will trust the author of this Illustrator SVG Exporter script that it is a pain, and that this script makes it much easier… Any takers?
Then I stumbled across this free online SVG editor. It’s certainly not going to win any design competitions, but how does it work? Using a sample image I found online (borrowed from here), it converted the initial 86.5 kb file to 71.1 kb, a savings of 82.2%… I wasn’t able to “combine paths”, as this broke the image somehow, but nearly 15.5 kb is nothing sneeze at! I also like how it updated the preview with each setting change, so I could easily see the effect without committing… I didn’t get into the actual editor, because I have no idea what the hell I’m doing there… :-/
Then I stumbled across Jake Archibald‘s SVGOMG… And OMG is right! Definitely a nicer interface, and more optimization options. Though this optimizer says the initial SVG was 84.46 kb and the optimized file was 48.88 kb (or 17.24 kb, if you toggle on Gzip), which is a savings of 42.13%… Impressive…
Most developers check their sites on at least a handful of mobile devices, if they’re lucky enough to have a few handy. Some, the adventurous, even bother testing on 3G. But who in the world tests on 2G? The good folks at 34 Cross, that’s who! And the site in question is the topic of this new performant, responsive, CSS-only site exposé on CSS Tricks. Oh, and get ready for some maths… Nicely done. Nicely done, indeed.
Speaking of RWD, Brad Frost has collected a whole slew of RWD resources, nicely grouped intro categories for your perusing pleasure…
And one you’ve got RWD in place, remember that it is only the beginning, and that you might also want to consider using a few ÄWD techniques. Luckily for you, Aaron Gustafson literally wrote the book on it, and has now made that book available online, for free… I love our industry… :-)
I still keep thinking one of these days I’m going to wrap my head around design patterns. Hasn’t happened yet, but maybe this series on PHP design patterns will be what I need…
So far in my career I’ve been lucky enough to almost completely avoid custom fonts, and have been able to get designers to rely solely on web fonts. Some day that luck is going to run out, and when it does, I’ll be happy I know about this article from the Filament Group about responsible web fonts.
It’s not that I think this loading indicator is so practical, but I do think it is amazing that it is a single div and CSS-only… As in no-js…
And finally, I have two articles that involve the U.S. Senate and votes regarding climate change. One cites that all but 1 Senator agreed that climate change is real, and the other actually lists which members of the Senate think humans actively contribute to climate change. (I’m actually pretty surprised to see so many in the right-column with an “R” beside their name…)
Happy reading,
Atg