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…
Sara Soueidan 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 Ana Tudor‘s collection of customized range inputs in a previous issue of Today’s Readings; have another look, because she has added more… :-)
David Walsh 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:
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 allseamless: Tells theiframecontent to act like it is in the parent document; this includes inheriting the parent’s CSS and natively openingiframelinks in the parent windowsrcdoc: Allows developers to specify a differentiframesource, 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:
- Nines: A web performance tool aimed to help developers find critical performance issues, and
- memory-stats.js: minimal monitor for JS Heap Size via performance.memory
And finally, Khoi Vinh 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