As CSS turned 20 years old (almost old enough to drink in most countries!), Jeremy Keith 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:
- Create cool animations
- SVGs are perfect for lossless, scalable icons, and they’re even cooler when you change colors just like icon fonts!
- Scalable text!!
- Clipping can create some cool effects. Most of these are a little flat, but imagine throwing some animation on the clipped shapes!
- Did you know you can add JS right inside of SVGs?
- And if that isn’t enough, Awesome SVG will keep you busy for a while…
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!
Remy Sharpe 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 Addy Osmani‘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. Robert Nyman 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