Today’s Readings

As CSS turned 20 years old (almost old enough to drink in most countries!), offers a nice look back, as well as a link to an interview with creator Håkon Wium Lie, and a link to Håkon’s 1994 thesis on CSS!

Pretty slick CL backup tool for Mac: Mackup. Moves all your config files to Dropbox, then creates an alias to them from the original location. restore simply recreates the aliases.

Whole bunch of great SVG links in the latest Smashing Magazine newsletter:

And, this one is funny timing, because I just finished converting all the SVG data-URIs on our company website back to SVG URLs to reduce the CSS file size! :-)

And, as long as we have the can of SVG wide open, let’s have a deeper look into animating SVGs!

does a little DevTools Timeline deep-dive to find that opacity is the cause of his janky scrolling. But way more interesting to me is just watching someone use DevTools to really dig into a performance investigation, and then to find that I am not the only person that has no idea what all those colored bars mean, or how to really make use of them to fix the problem… Whew! :-)

And speaking of CSS performance, here is a nice deep-look into how a browser renders your pages, and what affects your CSS has on rendering the critical path.

jsinspect… is a tool for detecting copy-pasted and structurally similar JavaScript. It also detects boilerplate and repeated logic, so you could use it to extract code into methods or help find dead code.

At first I thought “I already have tons of options for diffing files” but the “detects boilerplate and repeated logic” part is pretty darned useful!

And while we’re at it, why don’t we just “automatically fix linting errors“…

A very thorough and thought-provoking article about website navigtation wayfinding, specifically for mobile, but I think it really applies to all website navigation. This topic has been at the heart of some of my more… animated conversations with project managers… :-/

And speaking of project management, poor project planning has resulted in far more wasted time in my life than I would like to admit. ThoughtPlan seems like a great tool to help collect thoughts and make them usable really fast. “Signup for free!” always makes me nervous, but hey, we all need to pay the rent, and this does look cool. Wonder if it works on mobile, and offline with back-online-syncing…

And once we have our project organized, we can work on getting our editors and our CMS on the same page

Then, lest we hand our neighbors a basket full of rocks before walking into our glass houses, let’s talk about front-end developer planning

“Planning”… Why does that word make so many people squirm?

I’m usually quite leery about using JS to alter existing HTML elements / expected behavior, but I have to admit that this jQuery-enhanced select is pretty slick-looking! Also, I was not aware that you could create elements like this:

var li = $('<li>',{
    html: '<img src="'+option.data('icon')+'" /><span>'+option.data('html-text')+'</span>'
});

I always do it more like this:

var li = $('<li><img src="'+option.data('icon')+'" /><span>'+option.data('html-text')+'</span><li>');

Cool. But I do question appending each and every li inside the loop, that’s a lot of DOM-fondling… I would prefer to see them concatenated into either an HTML fragment or a single string, then appended to the DOM…

If you’ve watched ‘s CSS Performance Tooling video, you know how a large animated GIF can kill a site. Well, the good folks at Imgur have another way to fix that issue: GIFV, the animated-GIF-to-video-converter…

But if your CSS is actually SASS before it is CSS, you might want to meet Takana, a live SASS editor…

Okay, so, show of hands: who’s been paying attention to all the web components hub-bub? Well, if your hand, like mine, is still done, then maybe it’s time for you (and me) to meet Ellie

If you ever work with remote content, and have to do so via the command line, chances are, whether you know it, like it, or not, you’ve been inside of a Vim editor. And it probably sucked. is here to help you get to know Vim just a little better

And finally, one of the better definitions of programmer that I’ve encountered… :-)

Happy reading,
Atg

Leave a Reply

Your email address will not be published. Required fields are marked *