In response to my MVC Series (and more specifically my old-curmudgeony-grumblings), David Wells‘ Serverside React Rendering: Isomorphic JavaScript with ReactJS + Node was brought to my attention. Looks good, need deeper-digging, anyone use this yet?
So basically opacity and transform are the only CSS properties that you can reliably animate without concern of jank. And here is how to animate an element’s box-shadow, without animating its box-shadow!
While support for CSS Grid Layout is not anywhere close to being ready for prime-time, the spec does seem to be stabilizing, and there is a pretty nice polyfill, so maybe it’s time to start getting to know the vocabulary and ins-and-outs of using CSS Grids on your projects!
Icon fonts are evil. Yeah, I know, I know… I need to get rid of them on here…
notie.js
A clean and simple notification plugin (alert/growl style) for javascript, with no dependencies.
Pretty elegant!
In the opening editorial to a recent Smashing Magazine newsletter, Vitaly Friedman outlines a very simple, practical approach to providing accessibility to all of your future projects, along with a bunch of resource links to help you get there!
Speaking of accessibility, the eBay Tech Blog framework uses an interesting approach to insure developers use the proper semantic, and thus accessible, elements for the proper use-cases.
Okay, one more on accessibility, Marcy Sutton presents How to win at mobile accessibility. The slides are also available.
The British Museum website was recommended to me by a friend, and so I was prepared to be impressed. However, the message telling me that “This website is best viewed as a desktop experience” while I was using an iPhone 6 with iOS 9, and then that my desktop browser “does not support WebGL” and therefore I need to “Download Google Chrome”, while I was using the latest desktop Chrome, leave me with a really nasty taste of bile in my mouth… #usabilityfail #movingon
For any fellow Gmailers out there, these Keyboard shortcuts for Gmail should prove helpful.
As should these Sketch Keyboard Shortcuts and Tricks for any Sketchers out there!
Anybody wanna Lerp? No, not LARP, Lerp… Nice tip from Rachel Smith!
Chris Coyier provides a pretty cool, and very simple, example of Scaled/Proportional Content with CSS and JavaScript. Sucks that we need JS for this, but that’s life. At least until Chris published the SVG article he teases at the end of this one… ;-)
Is the Floating Action Button the new Hamburger Menu? TL;DR: Yes. And it’s just as annoying in desktop browsers…
Speaking of the infamous burger menu icon, here are several mobile navigation patterns for your inspirational pleasure…
And while we’re making inspired navigation, here is a slick animated menu indicator. Really like the final result!
And finally, fascinating little time machine, taking us all back to the glorious 90s! (Press the “On” button to get the party started!)
Happy reading,
Atg