Today’s Readings

Here is a great interactive SVG Filters demonstration, complete with copy/paste code samples. Granted, aside from sepia and maybe one or two others that could be appropriate for portfolio sites or something, most of these filters are not very practical, but you just never know…

And I hesitate to share these SVG clipPath examples, because I am afraid someone would actually implement them on a live site, and that would absolutely be a horrible user experience, but I felt I had to share them because the tech is so impressive… :-/ So, please, enjoy them and be inspired by them as a demonstration of possibilities, but never actually put something like this on a live site…

svg.connectable.js is “A JavaScript library for connecting SVG things”; Very useful, very impressive, and quite a pain to do on your own!

px2svg “Converts raster images to SVG, using color-run optimization”; Ok, maybe not so commonly useful, but still pretty darned impressive, and would certainly be a pain to do on your own!

And I am certainly no expert (or anywhere even slightly close to that!) when it comes to PhotoShop, but I am still duly impressed with the ability to use Adobe Extract within Photoshop (and Creative Cloud) to export assets from a PSD and create multiple variations (sizes, resolution, etc.) in a single workflow!

Awesome, tiny two-way binding library from . Less than 2k compressed, supported by IE9+, and only a few intentional limitations to keep things small and simply. Love it!

An impressively-detailed article on, IMO, one of WordPress’ strongest, yet simplest, advanced features: Custom Page Templates. Strong; because you can literally create a complete different page layout and design by simply creating a new template; and simple, because to make it work all you have to do is name the PHP file properly. There are a lot of other hooks and whistles discussed in the article.

While we’re beefing-up your WordPress skills, let’s have a look identifying, and then fixing, slow database queries in WordPress.

Sticking with CSS Tricks for a sec, here’s a nice method for responsively-realigning page elements without using floats, or even media queries, by adding just a tiny bit of Flexbox

Sticking with CSS for a sec, presents 5 things every web designer needs to know about CSS. Which contains 6 things… :-)

Well, the term Isomorphic JavaScript has been around long enough, don’t you think? `bout time for a change, don’t you think??

Speaking of [whatever we’re calling JavaScript now], How to Become a Great JavaScript Developer sure doesn’t sound like very much fun, but I’ll bet it will help… Now, what JS library can I use to add more hours to the week??

And speaking of ECMAScript, if, like me, you’ve been mostly ignoring ES6 because, well, the compatibility table looks like this, but, like me, you’re starting to have this searing, gnawing, scraping feeling crawling up from the depths of your midriff because you fear you are slowly falling behind the times, then maybe this ES6 in Depth series will be just right for you (and me)!

And finally, “It has been over 3,000 days since we left Earth. We’re now almost 3 billion miles away from home. Out here, where the sun is distant and faint, is a place no one has ever seen before: Pluto, and its system of moons; the farthest worlds ever to be explored by human kind.” This is the HD-version of the promo for the July 14, 2015 Plutonian arrival of NASA’s New Horizons, “the fastest spacecraft ever created.” Open the link on the big screen, draw the blinds, turn the sound up as loud as your neighbors can stand, and enjoy… :-)

Happy reading,
Atg

Today’s Readings

Let’s start with a little proficiency tip with 3 Keyboard Shortcuts I Wish I Learned Long Ago. I imagine most developers already know the one about switching between open applications (Cmd + Tab on Mac, Alt + Tab on PC), but the author has a couple variations on that!

I cannot imagine what scenario is missing from How to undo (almost) anything with Git. I assume there is at least one, I just cannot think of it…

Um, Quttons are freaking awesome… Makes me want to collect them all!! ;-)

And Gradify CSS is pretty freaking awesome too! Hard to imagine a way this could be used in production, but for a curated site, it would make for nice eye-candy!

Keeping with the awesome, the page scroll effects are über-awesome! I particularly love the Parallax option, for some reason it feels very natural to me. But even having read the article, I cannot tell what the “hijacking” option does…

I’ve been using grunticon for some time now to provide SVG support and fallbacks, but offers a Gulp-version, and runs you through his set-up and workflow!

Here is a HTML5 feature accessibility support for all Major Browsers. While Edge is still a mystery, IE will hopefully fade into the sunset some day in the next few years, and hopefully the upcoming Safari release will improve their standing a bit…

Speaking of accessibility, from Fluent 2015 comes the video for Custom Interfaces with ARIA, HTML and JavaScript by .

ponders a future of the web which he and his wife, , have coined “Progressive Apps“, which “aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins” and are described by a serious collection of criteria, including being responsive, connection-independent, always up-to-date, safe, discoverable, installable, and of course, linkable. Man, how things have changed since I saw my first <html> tag… :-)

And finally, a burger icon I could really sink my teeth into… :-)

Happy reading,
Atg

Today’s Readings

After taking Monday off, let’s dive right back into the mix!

Friendly discussion in the comments regarding a few options to apply styles to all but the last of any selector.

Google Maps is easily one of my fave Google products, and yet I have always thought that, even with all the amazing features it has, it is one of the most neglected: creating custom maps is still a hidden, convoluted process; the custom icon sets for custom maps is pathetic; and if you have ever tried printing a custom map then you know they are basically useless, just a series of pins with no connection between them and what they represent… But I digress… :-) Here is a good Google Maps feature: from the desktop version you can now send locations to your mobile version

Speaking of Google Maps…

In honor of World Oceans Day, Google has released 40 new coastal and underwater Street View tours from pristine areas around the world, including places like the Great Barrier Reef, Cook Islands, American Samoa, Bali and more.

An HTML5 Rocks article instructing how to use the autocomplete to speed your user’s form completion. Great stuff!

And speaking of improving forms, we can help all of our visitors if we offer proper error messaging via ARIA attributes.

Similar to the recent SVG-Morpheus, here is another slick animated SVG, this time the history of mobile phones… :-)

[D]id you know that WordPress provides dedicated functions for uploading files, figuring out the file type and adding attachments?

Well I for one did not…

And speaking of WordPress, here’s a clever tactic to let clients easily, and safely, create custom-content sidebar widgets on-the-fly: using custom post types.

Okay, one more: The final installment of a fantastic series of WordPress tutorials on conditional tags, many I had never encountered before.

Throttling vs. Debouncing: Both are quite useful, but there is a difference, and thanks to for illustrating that difference so well.

The benefits of accordions on mobile, and why you should probably stop using them

Nice design piece on how to align elements by misaligning them. 1 + 1 doesn’t always equal 2…

A host of CSS4 selectors that are already landing in browsers, such as :default, :read-only, :valid, :optional, :has(), :focus-within, case-insensitive attribute selectors (to match a href[".pdf"] and a href[".PDF"], and many more!

While not CSS4, here are 5 CSS selectors that you probably don’t think of all that often

Fascinating quick study that finds that Google is not only ranking fast mobile sites above slow mobile sites, but is apparently also ranking any mobile site above any desktop site

A couple readers have forwarded links that I’d like to share:

Another clever technique for emphasizing :visited links, this time using CSS Blend Modes.

And finally, Astronomy Picture of the Day is now 20 years of astronomy photos each and every day… Love…

Happy reading,
Atg

Today’s Readings

Great piece on the history of loops and how the first attempts at animation led to the lowly and powerful animated GIF.

One very deep article on CSS animation, targeting convertees from Adobe After Effects to CSS, but it’s really for anyone that wants to learn more about CSS animation!

A few more ideas on how to engage users with page animation, including form tips and achieving “realism” with your animations!

And while knowing how to roll your own animations, knowing how to dig deep into @keyframes and such, is always a great idea, some times you might want/need some help. So, here are the Top 12 Tools for Creating Animations with HTML5 (Sigh, link bait… So, not HTML5 of course, but CSS… And certainly not all 12 are “the top” above all other options… But you get the idea, have a quick scan, you never know when you might find something good…)

Flash sucks. But until it has completed its slow, painful, crawl toward death, Chrome has added some improvements to help it suck less (battery power, that is) by pausing what appear to be unnecessary Flash players. Sad, but a great idea.

And speaking of helping to murder Flash, how about Flash2SVG, a tool that helps you convert your Flash assets to SVG (Warning: The linked page contains audio that you cannot silence)? I had not heard of it before, but then I have never really dealt with Flash, so have nothing I would need to convert away from it, but while the author readily admits the resulting animation isn’t perfect, it is pretty darned good!

Back to that battery life thingy for a quick sec, here is a cool infographic on how to save battery life on your iPhone. The bit about not closing apps in Multitask is annoying, because I read a very similar article some time back that told me the exact opposite… Argh!

There are certain CSS features that we probably don’t use very often. I think CSS counters fall into that category for most of us…

Boy, could not be more right about me not even thinking about CSS counters… Depressingly, I can remember when thinking about them was a waste of time, because they were not supported well enough… No more! But his examples in this article sure make me think about them now!

4 ways to use modern CSS with old browsers is really more like “4 ways to use modern CSS and ignore old browsers”, but that’s not a bad thing! CSS Shapes, Multicolumn Layout and Flexbox certainly qualify as modern CSS, but the article basically says all (can) fallback very satisfactorily.

covers a bunch of annoying situations associated with Copy & Paste & The Web. Great topic, and great collection.

I don’t know if I would call The Accessibility Cheatsheet so much of a cheatsheet as an anthology! Great collection, great presentation!

Speaking of anthologies, CSS-Tricks has put together an insane collection of performance-related links, including CDNs, testing tools, browser extensions, asset optimization tools & techniques, and much, much more! Be sure to continue reading through the comments for many more!

And finally, this is the first [good] image taken by Bill Nye’s LightSail spacecraft… Space looks pretty beautiful, even from a tiny image like that… :-)

Happy reading,
Atg

Today’s Readings

Frontend Performance Training: This repo contains slides and materials to help you learn about frontend performance. From basic principles to workflow automation, you and your team can learn how to audit sites, fix problems, and stick to a performance budget throughout the life of a project.

Wow, not even kidding…

“Responsive images today” video by . Did you know that you can target different image resolutions without @media queries, by using a comma-separated list of images in the img element, or by using img-set in CSS background-image?? Well, you can soon, anyway…

Like to learn more about responsive images? How about learning pretty much everything?? One of the best voices on the subject, , is working his way through what looks to be a 9-part series on responsive images; links to all parts so far can be found between the article and the comments (here’s the closest deep-link I could find, then scroll up a bit).

takes a second-pass at improving his site’s speed, and is nice enough to tell us “what I did, why I did it, and the tools I used to optimize front-end performance on my site.”

Wanna check your page load performance? Well, here is a “[s]uper simple example of adding perf timing to the page display during dev work“…

From come 7 Essential JavaScript functions to help your code perform more efficiently. Certainly the debounce and poll functions anyway!

Moving beyond “just” performance, even if your code works just fine, make sure it doesn’t smell!! And if it does, will help you find it, and fix it.

An incredibly slick method for letting users know which links they have already visited on your site, well beyond the possibilities of :visited. Great use of localStorage!

describes what he calls Interface Experience Maps, which he uses to describe and plan progressive enhancement functionality and requirements. I’ve made so many of these over the years, all as scribblings on notebook paper, but I’m glad they have a name, and hope to see people use them more often!

A Practical Guide to Flexbox: Don’t Forget about flex-shrink. With the spec so new, it’s these little pieces that will frustrate us all until it eventually becomes second nature.

has come up with a HTML/CSS combo for creating a CV that looks like a CSS file, fittingly called CSSCV. Not sure I would go through the effort, but it’s a really nicely done project!

Social share icons… You’re unlikely to find a site with none, but if your boss/client has any conscience or good-sense, you can at least convince them to forgo the brutal embed methods all the social sites offer (the additional crap they push on your users is ridiculous!) and just offer HTML links. So, how to get a nice, clean, simple set of links? Just click a bit, then copy and paste.

symdiff is an interesting Grunt task, comparing your HTML and CSS and warning you about anything unused on either side.

I try really hard to make all abbreviations on this site accessible, so any person, or machine, can figure out what they mean. But touch experiences have always bothered me: without a hover, those meanings are just not there… Until abbr-touch, that is… Very nice. (Though, when you offer a demo link, it would be nice if it opened a working demo, not the source code of a demo page… ;-)

Bootstrap Form Builder “generates valid HTML for Bootstrap 3 forms that will work on any website”. It’s a slick generator, if you’re a Bootstrapper!

I remember quite a while ago when advised us all to be careful when creating nested border radii, and quipped “There probably is some fancy math you could do to figure out the perfect values, but I find eyeballing it works pretty well.” Well, Chris, here’s your fancy math, without having to do the math! ;-)

And finally, whether you’re looking to get away from the big city, or dig a little deeper into it, I gotcha covered…

Happy reading,
Atg