Pushing CSS is always fun (especially when someone else does the leg-work, we get to just sit and enjoy the show, and then they tell us how they did it all! :-) Well, Tyler Gaw‘s CSS-rendition of the True Detectives opening credits is just that: tons of boundary-pushing work, very cool to watch, and just as much fun to read about. Nice job!
Conditioner.js watches and listens to your pages, then reacts when you tell it to; it’s like a really, really well-behaved dog with a treat on its nose, sitting patiently until you say it is okay for it to eat the treat. Things like static links to a Google Map automagically become an in-page Google Map if these conditions are met:
<a href="http://maps.google.com/?ll=51.741,3.822"
data-module="ui/Map"
data-conditions="media:{(min-width:30em)} and element:{seen}">
…
</a>
You get all that? Slick.
A couple nice primers for using the HTML5 progress element:
I like this element a lot, and think it can easily be used in production right now, with a little fallback help.
And once you have the basics, add clickable “ticks” to your range sliders!
From Paul Lewis comes a Runtime Performance Checklist (actually, it’s more like an anti-checklist, as it’s really about things we shouldn’t do) for us to compare our projects against, as well as how to find these issues and often what to do about them! In addition to all of Paul’s great wisdom, he has sprinkled numerous resource links throughout the article.
A little more light-hearted is this list of CSS “mistakes” that would be corrected, if anyone had a time machine…
And as long as we’re trying to perfect our CSS, here is a deep-dive into “how to create great looking typography for all screen sizes and resolutions.”
And why not add a little CSS animation “wow” to your pages? I would argue that demoing pages with mobile mocks, but hanging your animations on :hover doesn’t make a lot of sense, and using jQuery just to add/remove a class in the last example, and then animating the left property (instead of using translate) isn’t quite the best advice, but let’s remember that these are idea demos; we would do it right for production, right? ;-)
Our good friends at Microsoft (we can call them that now, since they’ve finally stopped supporting IE6…) are working on a motion-sensor keyboard that reacts to gestures, right over the keys themselves, via infrared sensors embedded into the keyboard, between the keys… Wow.
Ever have to deal with content images in an email? If you do, here are a few nice tricks to help properly size them, from Mr. CSS Tricks himself.
And just so I can get my performance-fix for this issue, Paul Bakaus writes about a few common mobile development pitfalls that he has noticed. I can certainly agree with them all, but would also add “Thinking all phones are the same and all tablets are the same” (or at least that all Android phones/tablets are the same). There is a HUGE difference between similar devices, but I still hear it a lot…
Could CSS Shapes finally actually be on the horizon??
And finally, I know I’m a geek, admit it fully, and this got me pretty excited… I don’t expect it to be as good as the first couple, but certainly better than the last couple…
Happy reading,
Atg