Let’s start off with something that we’re probably all familiar with, but would probably think isn’t possible: Pure CSS Tic-Tac-Toe… The first secret is an insane amount of mark-up, the second is having all that mark-up be siblings, the third is a very clear understanding of which patterns constitute a win, and the last is some wicked-clever CSS! Nicely done!!
And speaking of pure CSS, Slick sliding-highlight navigation effect, sans-JS.
And now for something completely absurd: Changes to the IE11 User-Agent string. Oh, that’s not the absurd part; the actual URL is! Only a Microsoft engineer would think that’s a good idea… (facepalm)
Some of the bigger news on the web-dev front recently has been the support of the picture element in both Chrome and Firefox. And the majority of thanks for that goes to Yoav Weiss. Here is a video interview and workshop with Yoav!
And here is an article from Yoav about the same subject, also discussing some history, other attempts, and use cases.
I despise litter. Nay, I doth loath litter. And cigarette butts are some of the most loathsome litter there is. So an article with the title Used cigarette butts turned into high-performing energy storage material really made my heart go pitter-patter. Finally, a useful use for all those damned things…
I am slowly coming to terms with the name “hamburger icon”… I tried hard to give all my support to “navicon“, but every time I said it to someone, they just said “Huh?”. So, let’s at least find out how to get this cholesterol-filled navigation menu icon into our pages properly…
Continuing the idea of “how to”, Secrets of the Browser Developer Tools is an incredible treasure trove of web dev deliciousness! Resources, how-tos, and more. Read them all!
Then see if you can find any they missed from this video Secrets of the Chrome Developer Tools! :-)
Got inline SVGs? Must say, I don’t use SVG inline very much, I typically use background-image and data-URIs. But if you are, then Chris Coyier has several good options for swapping inline SVGs on-the-fly.
Sticking with CSS-Tricks for a moment, a guest post from Katy Decorah addresses CSS Columns. I’ve always liked the concept, but have avoided them because a) support is still pretty bad, and b) I don’t like how they can make users scroll down to read the bottom of the first column, then scroll back up to continue reading from the top of the next column… Well, Katy nicely provides code that fixes my second problem, and my first problem is solved by the lovely graphic at the bottom of the article… :-) (Or by the polyfill references in the Comments, your call.)
Great primer on OOJS. Compares old-school examples, and thoroughly explains when/where/why OOJS is better.
CSS Animations can make a huge difference over simple, A/B, on/off transitions. Fades, slides, etc., are just more pleasing to the eye, and less jolting to the user. But linear transitions look so mechanical, and Beziers are just too damned difficult to figure out! Not so, not anymore anyway! Donovan Hutchinson‘s article Bouncy Transitions does a nice walk-through of the basic CSS Animations, and then points us to Lea Verou‘s cubic-bezier tool which, with a little playing, allows even a design-challenged fool like me to create a cool animation like this!
And finally, if you are reading this post, you simply have to know who Jeffrey Zeldman is, and if you do anything that helps to create a website experience, then you owe Jeffrey, whether you know it or not. This documentary about the man, myth and legend is well worth the ~40 minutes to watch and learn more…
Happy reading,
Atg