Today’s Readings

The Google Developers Web Fundamentals series is a collection of really great reads and resources, and I really like their take on animation, CSS vs. JS.

From SitePoint, comes Five pretty useful JS APIs, especially for mobile.

Spaced-out is a cool menu toggle effect, but it fails pretty badly on my mobile; how about yours?

Points of Interest is a nice way to highlight sections of your website. What I really like most is actually the CSS look and effects. What I like less is that you have to add CSS classes to your mark-up, and the user cannot dismiss these highlights when “they get it”…

Just activated JetPack’s Monitor feature. No reason to think I need it, but I guess Monitor will tell me… ;-)

Nice little online SVG optimizer (unfortunately the author didn’t bother to make deep-links, so you’ll need to manually click the Optimise link at the top of the page). The savings on the example SVG are pretty impressive!

Stumbled across this MDN article on the MouseEvent whilst reading another article, and was surprised to see .altKey, .ctrlKey and .shiftKey… Somehow I was not aware these Boolean values were available… :-/

Memory Management Masterclass with Addy Osmani (LOVE that it is also captioned!). Nice live walk-through of a memory leak investigation. Slides also available.

Impulse is a really impressive JS library for creating some very common UI patterns. And performance is pretty good on the mobile devices I tried.

Are we finally at a point where we can start building things using IndexedDB? This Smashing Magazine article thinks we are. With a little polyfill help to proxy our code for WebSQL in older iOS, this is a pretty simple implementation, but it shows the strength nicely!

12 HTML5 tricks for mobile. Certainly not all necessary, but you never know what you’re going to need until you need it…

I’d add the HTML5 Page Visibility API into that list, though, great way to save on performance when tabs aren’t the active one.

Centering in CSS: A Complete Guide. You’ve just got to love , always so thorough… :-)

The concept of proportional design involves using percentage units for anything that contributes to “the combined width of the document” (width, margin-left, padding-right, etc.) and using rems for everything else (which, unintuitively, also includes max-width and min-width, since they help limit, but do not contribute to the doc width). This approach has some great benefits, give it a read.

I don’t know what your mobile testing situation is, but unless you’re as fortunate as I am and have literally hundreds of devices in a lab at work, this article on emulators, simulators and remote debugging might be pretty useful.

Must-Watch CSS: A useful list of must-watch videos about CSS. Indeed.

Haven’t talked about flexbox in some time… Well, here are a bunch of typical, annoying design layouts that are solved, rather simply, and all hack-free, using flexbox. So, enjoy!

And once you’re convinced and are finally ready to start coding your own flexbox layout, don’t. Let this incredible web-based tool do it all for you! Seriously powerful, and makes it so simple!! (Hint: Hover over the “workspace” area to get add/split controls, then click one area to adjust its settings in the left-column.)

And finally, in case all the hype and waiting for the upcoming Star Wars installment is just too much for you to handle, here is a little something to help pacify

Happy reading,
Atg

Leave a Reply

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