Today’s Readings

Some big news that quietly circulated the Interweb is that Google has started automatically converting Flash ads into HTML5… Just another stab in Flash’s barely-beating heart…

Vivus is a lightweight JavaScript class… that allows you to animate SVGs, giving them the appearence [sic] of being drawn.

Nevermind the spelling error, it’s a pretty cool-looking animation.

reveals a nasty little WebKit/Blink video bug that stops autoplay, and provides the fix.

I don’t know that this effect reminds me of a trampoline, but the this trampoline effect is pretty cool

Learn Design Principles is a really great glossary / tutorial on design terminology; really useful for dealing with those designy peeps… ;-)

walks us through a progressively-enhanced Lightbox that uses @media queries, CSS animation, the dialog element, Flexbox, and srcset… Way to pack in the buzzwords, Dudley!!

Sticking with images for a sec, Flickity is a responsive, touch-friendly carousel. I like it. I especially like how I can click as fast as I want and the carousel actually speeds up and keeps up with me… Nice job!

Ok, one more, this time presents a solid approach for dealing with hero images in a responsive manner; it’s not easy, but it can be done.

A nice run-through on organizing, and optimizing, your Grunt Tasks. Well thought out, I really like the storage and inclusion techniques…

Hmm, typebetter converts normal quotes, apostrophes, and more into smart-quote-versions, as you type. Honestly, I’m not entirely sure why you need this, but it is cool to watch happen, as you type…

Automating Style Guide-Driven Development. I think the key-concept here is a “living” style guide… I would love, love, love to be involved in a project some day that actually has a style guide before I have to start building it, and then have it actually be used, and actually look anything like the final designs by the time I finish building it… :-/

And finally, wow, what a fantastic read from : The Web’s Grain — A view on designing for the web… And a beautifully-designed page, to boot!

Happy reading,
Atg

Today’s Readings

So, your site is responsive; that’s great! You’ve got breakpoints everywhere your layout starts to get wonky, and your CSS jumps into action and makes it all better; nice job! But, if you’re doing that for a large site, likely with multiple templates, breakpoints can easily get out of control… How many of them do you really need? And how do you really know?? Just measure them, silly!

Ok, breakpoints are great, but is about to bow your mind with his article for concatenating child selectors to create dynamic selector strings! How about things like:

li:nth-last-child(n+6),
li:nth-last-child(n+6) ~ li {
  /* properties here */
}

and:

li:nth-last-child(-n+6):first-child,
li:nth-last-child(-n+6):first-child ~ li {
  /* properties here */
}

?!?!

Learn flexbox layout in 5 minutes. Which sounds better than “learn flexbox layout in 53 steps”… But seriously, great way to learn that mess!

Optional password masking; it is time… (Would make a great WP plugin, if anyone out there has a few extra minutes… :-) )

frontend-stuff: “A continuously expanded list of framework/libraries and tools I used/want to use when building things on the web. Mostly JavaScript stuff.” Wow.

I think I commented on Setting Up a Mac Dev Machine From Zero to Hero With Dotfiles, part 1, which is already kind of over my head, but for those that dig it, here is part 2!

A circular, spinnable SVG menu… Yeah, of course it’s from :-)

localFont: Implement localStorage web font caching in seconds.

Ok.

I feel like I’ve linked to this before, but it’s so cute, here it is again, just in case: programming in the browser’s address bar. Thanks to for the link! :-)

And finally, I read something similar to this regarding the Agile/Scrum process, so I thought I’d share this…
Dilbert_numbers

Happy reading,
Atg

Today’s Readings

A bit more on the RICG Responsive Images plugin for WordPress, from the plugin’s author, . I’m excited to see this plugin progress and enhance toward a full responsive image solution!

Speaking of responsive images, walks us through using JS inside of PS to batch process a responsive image set, including retina versions!

And now that you have all those responsive image sizes, is here to help keep those unwieldy srcset attributes from getting, well, too unwieldy

And once you are all set for new images, what about the old ones? Here is a collection of WP plugins to help you update and organize your media assets, old and new alike.

One more plugin that I would have added to that last article would be Ajax Thumbnail Rebuild, which, once you have all your new rules in places, will cycle through all existing Media Library folders and create any image sizes that are missing from the new required set. Slick. (The process cab be a little resource heavy, so it might be best to run either during low-traffic periods, or on a dev server, then copy the resulting assets to the live server.)

There are many pitfalls to working within a distributed team, but offers several solutions and recommendations to make your remote working experience as seamless as possible.

Drop-down menus can be a real pain to navigate with a mouse, like closing if you accidentally veer outside the currently-hovered parent element. has collected several options for making drop-down menus easier for your users to navigate.

Hmm, I had never encountered image-rendering: pixelated before, but it certainly makes sense for some images!

Got SSL? We probably all should, but it’s really slow, right?? Maybe, maybe not; find out ways to improve SSL speeds.

I love The Filament Group. I love how they encounter a problem, find a solution, then work on making that solution even better, and even better, until it is as good as it can be, at least for now. The latest is their iterations to eradicate FOIT. After several tries, they have found a very elegant solution. Sadly, FontFaceObserver is nowhere close to being widely available, but the article does list two polyfills…

Pretty cool SVG masking effect! Also very cool x-ray-proof boots that little metalhead is wearing… ;-)

Want to avoid pesticides in your food? Nah, they’re delicious and nutritious, right?? :-| Well, if you do, you can try the clean fifteen, “a list of the conventionally grown produce least likely to have pesticide contamination”. Yes, “least likely” is considered a win…

A nice, easy walk-through of loading critical CSS inline, and non-critical CSS via loadCSS. Nice job, !

+spread: …a small Sass mixin that takes min/max values for a property and generates media queries that evenly spread the values across your screen dimensions.

Pay close attention to the bit about “running your CSS through a media query combiner”, please…

From the ESO‘s MUSE come The Best Images of the Deep Universe (So Far). Inspiring stuff…

As a side note: Why does anyone think that fading an image when a user hovers over it is a good idea? The UX seems completely counter-intuitive to me… As does the link underline color, again, to me… (Sorry, Wired designers·)

And finally, ever try parking in a big city’s downtown area? If you were able to successfully decipher their famously cryptic parking regulation signs, then you are a truly gifted person. But wouldn’t one of these options be much easier for everyone??

Happy reading,
Atg

Today’s Readings

A clever technique from to get the actual window size on any device. Applications of this technique could be either do this in the head then delete the div right away, or try to position it with a negative z-index so it isn’t visible to the user. But however you use it, it is clever.

Hey bikers, FlipCrown is a fantastic upgrade for your bike that allows you to easily twist your handle bars so they are parallel with the rest of your bike, for easier, more compact storage! They also have a modification for your pedals, so you can get bikes even closer… (There is a video, too, if you need something “more visual”…)

Got WordPress? Want it to be faster? Of course, we all do. While most articles on this topic collect a few plugins, here is a series that reaches out a little farther. Looking forward to the additional installments!

Got accordion menus? Of course you do… But how do you tell your users about it? Plus/Minus icons? Some form of arrow icons?? And do you put those icons on the left- or right-side of the link??? Well, you might want to read a short study on the subject to see what your users might be expecting and thinking

Awesomplete is an awesome autocomplete thingy from . But I have to say I don’t like the big “no JS” near the top of that page, because you do need JS, just not any custom JS that you need to write… In any case, awesome tool, definitely worth looking into, just as long as you know the requirements.

I think most of us have at least tried to get on the “JS at the bottom of the page” boat, but that is not always possible. writes about the four loading times of JS and how choosing the right one for your scripts can help boost your overall loading time performance.

The list of people that might one day become the first humans to inhabit Mars has been cut-down to 100; are you on it?

SVG-News.com: A treasure trove of everything you could imagine SVG!

“We need to keep [this stupid thing] above the fold”… The bane of most developer’s existence. But where is “the fold”? Find out. The lines are random selections from unique folds from unique IP addresses. Someone has a fold of 4096… So now you can tell marketing that [this stupid thing] is above the fold; the fold just happens to be at 4096… ;-)

Ever try to put a link inside of another link, like this?
<a href="a.html">This link has <a href="b.html">another link</a> inside of it</a>
Doesn’t work, right? Browsers block the behavior because it is invalid according to the spec. But sometimes it would be really nice to be able to do it! So, played around and found a functional, though still not valid, solution. Awesome!

And speaking of links, De Correspondent decided to try to fix three different distractions that current link behavior creates. The solutions are quite good, I think!

always has great, research-based tips for improving the UX of a site. This video talks about making email addresses easier to enter, thus producing more reliable data. All of the videos in the right-column are quite good.

They’re baaaaaaaack! Despite strong opposition, and thus far terrible support, Pointer Events have reached recommendation status… There is still hope..·

And finally, why is Bluetooth symbol the symbol for Bluetooth, and On/Off symbol the symbol for On/Off? Find these answers and more

Happy reading,
Atg

Today’s Readings

Well, fresh back from holiday, was great to spend a week with mom after not seeing her for far too long. But, as usual, progress stops for no one, and we have plenty of reading to catch-up with, so let’s get started!

Before diving into anything too serious, let’s ease back in with a little light-hearted CSS humor…

For non-interactive (or only slightly-interactive) sites, I think PhotoShop is still a fine tool for mock-ups, but as soon as anything much more than a :hover state is needed, I consider a functioning prototype to also be needed; some times it is just too hard to imagine the way through a site. The hows and whys are covered nicely in this getting started with prototyping article, but be sure to also read the author’s follow-up post that includes tool options and characteristics.

I need to start writing more actual articles, explaining how I do stuff… This approach to adding a loading status to any element is something I have done a lot of in my current work project, and it is really powerful when you have a lot of dynamic content flying around…

offers several approaches to providing SVG fallbacks, including using a combination of picture and srcset.

And speaking of Sara, here are several animated text options that you can create with CSS and SVGs, apparently inspried by Sara’s work. Hopefully none of these will ever be witnessed in the wild, but hopefully will inspire more practical uses of the techniques.

But I would call all of these animation techniques for dynamically adding/showing list items ready for prime time… :-)

Six options for creating the “menu to cross” icon. Simple, sweet.

I touched on ‘s collection of customized range inputs in a previous issue of Today’s Readings; have another look, because she has added more… :-)

notes a really smart performance idea: use @media queries to scope your CSS animations to larger screens only (since they are likely more capable of properly displaying them).

Maybe not completely worth the price, but this desk has all the right ideas! Love the use of holes to allow a laptop to cool…

All too often (and I dare to say nearly always) adding ARIA support to a project is an after (if at all) thought. Most common attributes are added to the common templates and themes, but here is a slightly more thorough ARIA starter file. Love it, thanks!

Bullet lists, especially on the web, are a great way to make quick, concise points. But native CSS bullet styles have lagged for a long, long time, frustrating designers and leaving developers to have to remove all native list styling and jump through hoops to try to improve things. Well, a new enhancement to lists is on the way! And with much flexibility comes only a smidge more complexity.

Three new incredibly powerful iframe attributes are also headed our way:

  1. sandbox: Specify one or more space-separated values (allow-same-origin, allow-forms, allow-popups) that you don’t want to be restricted; no value enables all
  2. seamless: Tells the iframe content to act like it is in the parent document; this includes inheriting the parent’s CSS and natively opening iframe links in the parent window
  3. srcdoc: Allows developers to specify a different iframe source, depending on whether the first two new attributes are supported

Everybody loves talking and reading about WPO, right? Right?? Well, for those of us that answered “Yes!” to both questions, here is a nice lengthy curated list of WPO resources.

But here are two resource that (as of this writing) were missing from that collection:

  1. Nines: A web performance tool aimed to help developers find critical performance issues, and
  2. memory-stats.js: minimal monitor for JS Heap Size via performance.memory

And finally, points to a series of fantastic photos taken on the set of the Batman: The Movie (1966) (why is Batman’s suit red in that cover art???).

Related note: I could easily spend the rest of my life clicking through the Vintage Everyday website

Happy reading,
Atg