Today’s Readings

Now back to our regularly-scheduled program…

brings us some rather uncommon units of measurement, like deg, rad, grad, and turn. Erm, yeah… we all knew those, right???

I don’t fully understand what is talking about with this node.js-powered automated JS profiling script, but I trust that it is good…

These animations are as impressive as they are over-the-top!

Several variations of responsive pagination, all based on the same HTML, and easily customizable.

So, we’ve all heard that sitting all day is bad for us, right? And we’ve all heard about the whole standing-desk craze, right?? Well, we now have desks that tell us when to switch positions, and then switch positions for us, even syncing with our Fitbits, so we can track, um, our standing and sitting… Oy…

I’m pretty sure we’ve covered object-fit before, but it’s worth repeating

An email from , via the W3.org respimg list-serve:

I’ve been working on a flow chart that might capture how someone decides which combination of responsive image features might make sense. I’m considering a separate flow chart on picking image breakpoints.

Here’s my current work in progress:
https://dl.dropboxusercontent.com/u/196424/images-flowchart.pdf

Yeah, it’s like that…

For a deep-read (have a long train ride or flight coming up?), offers a thorough collection of Design Principles that he continues to collect and curate. He also offers a bit of an introduction, but it too, I’m afraid, is a bit of a long-read… :-)

Speaking of deep-reads, Weighing SVG Animation Techniques (with Benchmarks). Wow, that’s thorough.

And speaking of SVG, wow, really nice intro-level walk-through on SVG Shapes; the next article in the series focuses specifically on the path element, nicely explaining what that massive d attribute means… Both are great reads!

I’m sure like most of you, I have hated the masked password field from the very first time I had to use it, and grumble to myself every time I mistype something and have to Backspace over the entire password and start again… So I rejoiced when I read ‘s first article on password unmasking, but felt certain it would never catch-on; after all, people are brainwashed into thinking it is necessary for the security of the planet! But with Luke’s latest article on the subject, Showing Passwords on Log-In Screens, he includes success stories and conversion rates. Hopefully this will help convince other sites to take this bold and beautiful step forward…

After far, far, far too long, YouTube is now using HTML5‘s video tag as their default player, not Flash… Huzzah!

And finally, I saw this on “The Facebook” the other day and just thought it was cute… :-)

Google and I are so close that we finish each other's sentences...
Google and I are so close that we finish each other's sen[tences]

Happy reading,
Atg

Today’s Readings

Some nice examples of adding motion to your transitions to provide a more natural, and intuitive, experience.

The Page Visibility API has been around for a while, so I was curious why Smashing Magazine was publishing an article about it now. But the author (the famed !) makes a nice, subtle transition for muting or unmuting a tab.

Get to know the Virtual Viewport. A change in Chrome 40, which actually catches Chrome up with… IE?

recently helped answer what is apparently a common question: Why do we need responsive image markup (i.e. the picture element or srcset attribute) when we have CSS and JS? Thank you, Bruce.

And between the two markup options, the srcset attribute certainly has better support than the picture element does

(Though, I am curious how the iOS column says that it requires a -webkit prefix… How do you prefix an attribute)?

So, for us WP users, we have a new plugin on the block that allows us to add the srcset attribute to our templates! (Also available via GitHub, if you prefer.) And here is a solid explanation of the new plugin, by one of the authors.

But just in case you still prefer to use the picture element, here is a little code to help add that to your WP templates too!

(Though, I am surprised to see both code bases only offering the functionality via PHP code in the templates, and not via a shortcode from within the editor, arguably where it would be much more useful…)

And while we’re so deeply-entrenched in WP-land, we all have those moments when we wonder why WP does something some way, or have some idea how we can make the code better. So, why not give them a hand?

Okay, just one more: Learn how to load previous or next posts via Ajax. Come one, that’s cool, right?

It’s no secret that I love SVGs, but I don’t think I have ever exported an SVG myself. So I will trust the author of this Illustrator SVG Exporter script that it is a pain, and that this script makes it much easier… Any takers?

Then I stumbled across this free online SVG editor. It’s certainly not going to win any design competitions, but how does it work? Using a sample image I found online (borrowed from here), it converted the initial 86.5 kb file to 71.1 kb, a savings of 82.2%… I wasn’t able to “combine paths”, as this broke the image somehow, but nearly 15.5 kb is nothing sneeze at! I also like how it updated the preview with each setting change, so I could easily see the effect without committing… I didn’t get into the actual editor, because I have no idea what the hell I’m doing there… :-/

Then I stumbled across ‘s SVGOMG… And OMG is right! Definitely a nicer interface, and more optimization options. Though this optimizer says the initial SVG was 84.46 kb and the optimized file was 48.88 kb (or 17.24 kb, if you toggle on Gzip), which is a savings of 42.13%… Impressive…

Most developers check their sites on at least a handful of mobile devices, if they’re lucky enough to have a few handy. Some, the adventurous, even bother testing on 3G. But who in the world tests on 2G? The good folks at 34 Cross, that’s who! And the site in question is the topic of this new performant, responsive, CSS-only site exposé on CSS Tricks. Oh, and get ready for some maths… Nicely done. Nicely done, indeed.

Speaking of RWD, has collected a whole slew of RWD resources, nicely grouped intro categories for your perusing pleasure…

And one you’ve got RWD in place, remember that it is only the beginning, and that you might also want to consider using a few ÄWD techniques. Luckily for you, literally wrote the book on it, and has now made that book available online, for free… I love our industry… :-)

I still keep thinking one of these days I’m going to wrap my head around design patterns. Hasn’t happened yet, but maybe this series on PHP design patterns will be what I need…

So far in my career I’ve been lucky enough to almost completely avoid custom fonts, and have been able to get designers to rely solely on web fonts. Some day that luck is going to run out, and when it does, I’ll be happy I know about this article from the Filament Group about responsible web fonts.

It’s not that I think this loading indicator is so practical, but I do think it is amazing that it is a single div and CSS-only… As in no-js

And finally, I have two articles that involve the U.S. Senate and votes regarding climate change. One cites that all but 1 Senator agreed that climate change is real, and the other actually lists which members of the Senate think humans actively contribute to climate change. (I’m actually pretty surprised to see so many in the right-column with an “R” beside their name…)

Happy reading,
Atg

Today’s Readings

A very extensive list of WP plugins to customize the editor.

Tinted windows that block sunlight and generate electricity. Um, hello.

Tenon allows you to easily test the accessibility of your website via their website, their API, or their Chrome extension, and has taken care of the Firefox extension, and has taken care of the WordPress plugin… So what are you waiting for, you really have no excuses, now do you?

As you’re standing in a museum, staring at famous works of art, have you ever wondered what they see? Clever… :-)

Using WEBP/JPEG 2000/JPEG-XR/APNG Now With Picturefill and Modernizr. Also compares the various images side-by-side, and often with comparison slider. Fantastic article!

Got Git? Want to move beyond commit, pull, and push?? This series of video Git tutorials, mostly free, will help.

And how well do you know HTML, CSS and JS? Care to find out?

Well we can always stand to improve our JS skills

And if that only whetted your whistle for more JS, this curated list of “essential” JS articles should help.

And once you know all there is to know there, how do you put it all into practice? Why, learn all the ins-and-outs of DevTools, of course! :-)

Get to know the Web Animations API a little better.

Then dig into a deep comparison of CSS animation versus JS animation… You might not hear (it’s a video) what you are used to hearing about this topic…

Wow, ever wanted to know exactly what happens when you type a URL into a browser’s address bar and press the Enter key?

Very slick off-screen content filter panel. Really like the animation as items are filtered into and out of view…

And here is the other extremely common UI pattern right now, the auto-hiding/-revealing header.

Would you like to play a game? Well, hopefully none of these design games will lead to the threat of Global Thermonuclear War, but you might want to play to win, just to be safe…

Once again shows us something new and innovative, this time fit-content, which as he points out “is excellent for aligning groups of content with unknown width, such as a site navigation bar”.

And finally, my thanks to Creative Bloq for the mention in their 10 web design trends that will change everything in 2015 article! Always humbling to be mentioned amongst such luminaries in our industry…

Happy reading,
Atg

Today’s Readings

I know I tend to focus on developer articles here, but 365 Awesome Designers seems like a great inspiration site!

A nice walk-through of a JS-only WAMP PubSub process using WebSockets and Autobahn. (How’s that for keyword-stuffing? :-)

CSS-creep. We’ve all done it, and deep-down, we all know when we’re doing it (or at least when we did, when we’re trying to override it…). offers some solid solutions for preventing it before it happens.

Google’s Chrome Remote Desktop app now lets you access a home PC from your iPhone. In case, you know, you ever need that… (Apparently the Android-version has been around for a bit already.)

span:nth-child(3):nth-last-child(3) { ... }. Breaking that down: that’s the third child and the third-last child. Given ‘n’ and ‘m’, the general formula is :nth-child(n):nth-last-child(m+1-n).

Have to admit, I’ve never found :nth-child to be intuitive, and this article doesn’t do anything to help with that, but I can recognize where the author is headed, and see the power of the combinations. Impressive.

And in case those aren’t enough to intimidate you, how about this group of “coming soon” CSS4 Selectors? Man, CSS is getting so complicated… :-) My fave code sample from the article is this one:
:not(:has(:not(img))) // does not have anything not an image
Whaaaaa???? ;-)

You already have everything in Google’s universe, why not let them handle your domain name too?

Hey bikers, here is your next investment:

smrtGRiPS: Bicycle Navigation GPS Tool Brings Good Vibrations

Vibrating grips to indicate turn-by-turn navigation is the just the beginning. Scroll down to watch the video and see everything they plan to implement. The video talks about how their network will help locate any stolen bike, but I wonder what prevents a thief from simply removing the grips from your bike, either to steal the grips themselves, or remove the trackability… Seems pretty sweet, none-the-less…

So far only implemented in Firefox, Object.prototype.watch() looks to be a very cool debugging feature!

Did you know iOS8 allows you to scan the front of a credit card using your phone’s camera, rather than type all that crap into a bunch of form fields? Neither did I, but that’s pretty awesome!

Chrome Canary just made debugging CSS animations a whole lot better!

And finally, ever wonder what R2-D2 is saying with all those beeps and whistles? Well wonder no more…

Happy reading,
Atg

Today’s Readings

On the heals of the defeat of SOPA, the resurfacing of CISPA as CISA, Spain’s new Canon AEDE law once again stresses the fragility of our free, open, and equal Internet.

A Teenager’s View on Social Media, written by an actual teen. A fascinating piece from a vantage point most of us could only guess at. My favorite quote, and the one to surely get the most pull-outs, is:

It’s dead to us. Facebook is something we all got in middle school because it was cool but now is seen as an awkward family dinner party we can’t really leave.

And speaking of vantage points most of us could only guess at, how about a peak inside North Korea’s internal Internet?

Scroll slow, have fun! Actually, I recommend using your keyboard’s down-arrow key, scrolling was too fast to make the images understandable. But it is fun! :-)

You may have heard that is writing a new book. And maybe you have also heard that it will be available on Github, as he writes it… That alone should be enough to get your excited, but why he is writing that way is really what excited me.

Async.js promises to help solve Ajax callback hell. (If you read the article, you’ll hopefully get my terrible pun…)

Applying NASA coding standards to JavaScript. Okay, this article just used the word NASA and the word JavaScript in the same headline… If that’s not the best nerd-bait I’ve ever seen, I don’t know what it; READ!

As I am currently in the middle of reading my second Ernest Hemingway book, and have been known to dabble in JS once in a while, I found this book’s title catchy: If Hemingway Wrote JavaScript. Clever.

A Quick Look Back… at the first Forward event… (That’s kind of poetic, isn’t it??) Loads of great videos!

Serverside React Rendering: Isomorphic JavaScript with ReactJS + Node. (I had to look it up to: Isomorphic JavaScript: Shared JavaScript that runs on both the client & server) Very cool stuff, and something I wish I had a chance to play with and implement, seems like a great idea for any JS

A Case Study in JavaScript Code Improvement may sound a little droll at first glance, but it does involve the Star Wars API… I know, right???

Cross-tab communication has apparently been available in Chrome and Firefox for some time, but it is something you have to fake with polyfills in all other browsers. If you need to, here’s how.

Wow, that’s an awful lot of JS in a row… So, here’s enough CSS to balance the scales: Quick Left offers The 2014 CSS Report: Examining how CSS is being used in the wild. Very cool read, but I can’t help imagining some poor developer choking when s/he encountered their awesome claim-to-fame:

Longest selector .ClientAreaContainer .element-columns-alpha-outer .element-columns-alpha-inner .element-column-right-alpha-outer .element-column-right-alpha-inner .element-column-right-alpha-content:first-child .ContentEditor > p .h2Grey

Sticking with (mostly) CSS for a second, the 3D Curtain is an impressive content transition effect.

If you’re a WP developer, here’s a useful plugin, to help get your ready for developing! It offers a series of plugins to add that will help you develop & debug in WP.

Got a redesign planned? Well, before you start designing or developing the new one, follow this great advice and make sure you’re learning everything you can from the old one first!

And finally, planning your next holiday trip? These travel posters just might make you consider Kepler-16b, or maybe HD 40307g… :-)

Happy reading,
Atg