Reduce. Reuse. Recycle. Four great approaches to reducing your code-base by creating modular and scalable CSS.
And to help with that reduction, know the shortest method for selecting elements. Here are 30 selectors you must memorize, though a few, if you didn’t already know, then you probably are not reading this blog, and probably don’t know what the letters CSS mean either…
And fitting with this concept of doing less, Lyza Danger Gardner goes a step further and says do as little as possible! I like the sound of that, not sure how the boss is going to feel about it… ;-)
And continuing with the mobile path for a few more seconds, mega-nav bars can be a mega-nightmare on tiny screens, so, how to deal?
An intermediate-level tutorial for Node, Express, Jade and MongoDB.
And if you’re looking for something more design-oriented, how about an intro-level tutorial on the 3D JS library Three.js?
Tired of having to touch your touch-enabled device? Still yearning for the computer that you just talk to?? Well, Annyang is here to help! Go ahead, say “Hello”…
The CSS Delivery Tool is a cool way to find if you have any taboos in your CSS delivery method, but doesn’t help much with finding that taboo. At least it isn’t that hard to do a Find for things like <style, style=" or @import…
It happens all the time, a design calls for a customized scrollbar look. You smack your forehead, inhale, exhale, then try to explain again how this can work, but is a monstrous endeavor, and will make the user experience suck. Well, at least now for IE, Chrome and Firefox, you can do it will a little less suckage…
And while we’re talking about scrollbars, here’s a nice tidbit for IE scrollbars.
And speaking of IE, one step forward, two steps back: ever find that animations placed inside a @media query don’t work? Yeah, that’s a thing…
But at least you can manipulate your animations with JS, so I guess you could always adjust your CSS using JS’s matchMedia…
And speaking of @media queries, we all know how great they are for making page layouts react to browser sizes, but wouldn’t it be great if you could more finely tune your responsiveness, with individual modules reacting to their size? Well, turns out you can…
Wanna make an animated GIF of yourself (and who doesn’t???)? Well it’s easy-peasy now!
I usually hesitate to include lists like this, because (like the CSS selectors link above) they usually include some stuff that every dev on the planet probably already knows. But then I remember how often I trip across something that apparently every dev on the planet already knows, and I somehow missed… So, here it is, 5 HTML5 features you need to know. At least a couple of which you probably already do…
As we all know, the world of responsive images is a nightmare. And to help with your spooky dreams tonight, here is a plethora of image compression options.
Or, you could use a Grunt/ImageMagick process to create multiple versions of your images for you. Complete with a nice primer from Addy Osmani!
And in case that’s not enough reading for you, here’s a bit more…
In “lighter news” Japan has closed its final Nuclear reactor. Obviously a little late, but better late than never!
A couple good articles about how important front-end performance is, and how to talk to the Marketing team about it…
Slick navigation indicator for your next bike ride!
Some time ago I forked and did a bit of enhancing on James Pearce’s server-side Modernizr. The major downside with that is the initial roundtrip. Well, Client Hints doesn’t give you everything Modernizr does, but does give a few useful bits, and eliminates that roundtrip.
Due to IndexDB’s limited support, especially on mobile, I’ve yet to dabble, but if you’re interested, here’s a nice looking tutorial.
I’ve loved the pure CSS modal approach the first time I saw it, and it still amazes me at how simple it is…
Until CSS can truncate multi-line text with an ellipsis, there’s Succinct.js…
And Arbitrary Anchor is a great way to deep-link to elements that might not have an ID to jump to; also includes smooth scrolling, rather than the HTML-jump…
And now for another: As slick as this small-screen nav effect is, imagine implementing it on Android 2.3… :-)
SVG.js: A lightweight library for manipulating and animating SVG. I will be exploring this thoroughly for an upcoming project…
I have never had to deal with credit card info, but if I ever do, I will be using PaymentInfo, and everyone out there should too! Brilliant.
One of the more inspiring talks I’ve seen in some time, from Harry Roberts at the 2013 CSSConf.eu: Normalising Designs for Better Quality CSS. It’s how design and development teams should work together…
Speaking of conference videos, here’s one from Edge Conf in New York. Enjoy.
And finally, this is just plain awesome… So simple, so elegant, and such minuscule code…
And finally finally, for any beginning designers out there that feel frustrated at times, have a look at other web designers’ early works. Shoot, some of these are so bad, they actually make me feel okay about my designing skills… ;-)
Happy reading,
Atg