Today’s Readings

From the Washington Post comes a pretty fun read about Internet security (yes, you read that right, “fun” and “Internet security”, in the same sentence!). Labeled as “part 1″, with interviews from the founding fathers and photos of some of the earliest equipment, it’s an interesting glimpse back at the the early thoughts, plans and processes. My two fave quotes are regarding the idea that the founders should have planned ahead and been able to avoid the security issues we face today:

  • : “You could argue with hindsight that we should have, but getting this thing to work at all was non-trivial.”
  • : “I believe that we don’t know how to solve these problems today, so the idea that we could have solved them 30, 40 years ago is silly.”

Translation of both statements: “Shut-up!” :-)

A couple cool accessibility bookmarklets:

  • tota11y wins the prize for cleverest name, and also collects any a11y concerns into a nice little floating panel for you.
  • HTML_CodeSniffer does basically the same thing, but seems to collect a lot more issues; it’s up to you to decide which collects a more useful list

A nice collection of flexbox resources, just for you!

Speaking of flexbox, starts off with a fantastic collection of CSS selectors to help solve complex problems, then demonstrates how easily some of the same problems can be resolved with a simple flexbox declaration

A jQuery plugin to make image maps (remember those?) responsive. Not sure why you would, but now you can. ;-)

Clever: Yet another “checkbox overload”, this time creating dismissible notification messages, using nothing but HTML and CSS.

I think I’ve posted about this before, but it’s so good, let’s do it again: The YouTube channel for Totally Tooling Tips is a collection of videos about developer tips. Gems in every vid, including DevTools and Sublime Text tips!

Need a new helmet? Well here’s one that looks like a real head! :-)

Parallax Scrolling: Engaging Or Annoying? Yes. Apparently it’s okay, as long you stop doing it shortly after you start doing it…

Great summary from on the Limitations on Styling Visited Links. Too bad, but I totally get it.

Coding in PHP is like grilling with propane

As someone that has authored a few WP plugins, hosts them on WP‘s Plugin Repository, but also on GitHub, I am drooling over the prospect of integrating the WordPress GitHub Plugin Updater! That is a lot of work saved…

Facebook recently reenacted a browser cache study that Yahoo! conducted back in 2007. So, before your parents were born. Amazingly, even though browsers have obviously improved a lot in the last 8 years, not much has changed when it comes to the bottom line (how many people get the cached content versus downloading it again). We can all thank ourselves for that, and our continued bloating of the Internet… So, keep on caching, it’s apparently the only way to keep up with the status quo… :-/

An impressive walk-through of a performance analysis on a real-live consumer website, Prep Sportswear. Rather bold of a company to allow this to be done live, so kudos to their dev team for being okay with it! See if there are any lessons you can learn from their work!

Speaking of a performance deep-dive, walks us through Performance Beyond the Page Load, things like how to avoid recalcs and repaints after the page has finished loading.

From the same conference, comes presentation The Wonderful World of SVG· Once you get past all the intro stuff of why SVGs rock, Chris gets into building your very own SVG icon system.

And finally, initially Google Maps’ Street View took us up and down nearly every street in the world. Then they took us under the seas. Now they’re taking us up El Capitan in Yosemite National Park… :-)

Happy reading,
Atg

Today’s Readings

An interesting conversation summary from about whether we still need CSS files, or whether we should be applying inline styles via JS… Initially I just about choked on the concept, but, while there are valid points raised, I still feel like the method we have, of separating HTML, CSS and JS, and affecting page states by changing CSS classes via JS, is a powerful, tried-and-true approach. The biggest issue people seem to raise is global cascading, which can be easily resolved by using element IDs as namespaces in your style sheets.

Much the way uses global styles to create a flag module, then specifically styles the flag with the ID rainbow… :-)

Chris’ article above links to ‘s Interoperable CSS article, which discusses enhancements to CSS to try to make it less “cascady”… He lost me the moment he used the word “compile”… :-/ (Though, I guess that really is what Less and Sass are already doing…)

continues on the theme of dealing with nested (and thus cascading) CSS by taking a more philosophical approach, considering whether such problems are truly development issues, or whether they might be design issues… I love this collection of thoughts:

The problem here isn’t How do we style this?, it’s Why has this been designed like this in the first place?. Put another way, the problem here doesn’t exist in code, it exists in design… The design issue here is solved by subtly inverting the problem: instead of saying The buttons need to be smaller when they’re in the header, we need to be saying We have a smaller variant of our buttons, and it’s these that we use in the header… It’s that subtle. They’re not smaller because they’re in the header, they’re smaller and they’re in the header.

This video starts with a nice top-level intro to how a browser renders a page; you may have already seen something like this before, but if not, it is interesting. But, for me, the video gets really interesting at about the 3:23 mark, where the presenter gets into Chrome DevTools and starts dissecting the various Paint steps that go into creating a fairly simply square image with a border.

Speaking of Chrome DevTools, takes us on a tour of a new tool (currently in Canary only) called Filmstrip. As Damon shares, this is a lot like the incremental screenshots that WebpageTest provides, but now right in your DevTools! Freaking awesome!

And speaking of performance improvements, here are two articles dedicated to improving WordPress database performance:

  • The Developers Guide to the WordPress Database (and Writing Better Code) takes us on a long journey deep inside the various tables and structure of the WP DB. I didn’t see a lot of developer tips for writing better code, but I guess once you understand the structure better, you could write better code. :-)
  • 10 Tips for Keeping a Squeaky Clean WordPress (and Multisite!) Database walks through cleaning old crap out of your WP DB, but does so via direct SQL commands… This is WAY too risky for me, so I wouldn’t recommend this approach. Nearly all of the suggested clean-up steps can be handled much more safely via the plugin that is tossed in at the very end of the article, WP Optimize. I’ve used it for years and never once ran into an issue. Maybe it is not as thorough, but you are also never going to accidentally delete all the content from one of your WP DB tables…

Speaking of WP, and continuing with the above CSS theme, here are several ways to add animation to your WP site. The article takes some time to get around to anything that is WP-specific, but further down the author does get to WP Plugins that help add animation to themes.

Okay, just one last WP post, this time showing how to use WP for rapid prototyping. Includes discussions on multiple variations of prototypes, and finally offers a 45-minute how-to video!

Hmm, interesting proposal for trying to standardize the handling of custom web font loading, time-outs and fallbacks.

Haven’t talked about this in a while, but here is an extremely thorough responsive images “state of the union”, including edge-cases, quirks, and work-arounds.

Anybody using vw or vh units for their font-size? I do, for headings mostly, but as points out, at some point those tend to get too big or too small, and you have to craft custom @media breakpoints to change the font-size. That’s why Eduardo created this Sass mixin to automagically create breakpoints for you. Okay, it doesn’t really fix the problem (and you still have to find the desired breakpoint and pass it into the mixin), but as with most things preprocessors do, it makes getting around the problem much easier… :-)

Not sure if anyone still does their debugging in Safari, but I really like the data-type indicators they’ve added to their Web Inspector Console. I can’t say that differentiating between, say, a number and a string, was hard before, but this does make it easier…

So, up to now, I’ve basically been ignoring ES6, figuring “It isn’t close enough to being usable, so why bother?” And depending on which browser support table you look at, I may be right, and I may be wrong… But suggests we all start learning ES6 now, and has even created a collection of ES6 Katas to help us all learn! Vielen Dank, Wolfram!

And finally, further proof that there are only two kinds of people… And if I had any ability to draw, I would add one more example: eating corn-on-the-cob… There are those that eat like a typewriter (eating the length of the cob, then rotating to eat the next “row”), and those that eat like a lathe (rotating the cob as they eat, then moving on to the next “column”). But in this example, there is actually a third kind of person: those that randomly bite at the cob, in no systematic order whatsoever… Watch out for these people, they are clearly not to be trusted… ;-)

Happy reading,
Atg

Today’s Readings

SVG on the Web is freaking awesome! From suggesting a ton of customizations and optimization options, to discussing a bunch of implementation options and the pros and cons of each method, to manipulations via CSS and JS, to dealing with responsiveness, to animations via SVG and CSS, to spriting, and even fallbacks… What a great resource!

Sticking with SVGs for just one more, who else but walks through creating complex SVG objects, grouping them, animating them, spriting them, and implementing them… Where does she find the time??? :-)

Infographics are cool because they present data in a format that is fun to read. But on mobile, they pretty much suck: big images, with embedded text, all scrunched down to fit inside the palm of your hand… So these animated infographics make SO much sense!

Kind of combining everything discussed above, this CodePen shows how powerful SVG animation can be, if it were explaining some data (like an infographic… :-)

What the hell, let’s just keep yapping about animation… ‘s talk from An Event Apart on Putting Your UI in Motion with CSS. It starts a little slow, but by about 1/3 of the way through, she starts really getting into what works best, and why.

14 great usability questions to check while creating form elements. (The article title says “for mobile” but why not follow this for all forms?)

You have likely seen versions of the first couple CSS checkbox tricks here, but the further down you scroll, the more interesting the examples get!

has created a very cool speech-recognition page editor… Certainly not the HAL 9000, but then I guess that’s a good thing! ;-)

It’s hard to imagine being interested in a WP alternative, but Craft claims to be a CMS for “development-oriented publishers”. Any takers?

A Look at Some CSS Methodologies, including OOCSS, BEM, SMACSS, and more.

A continuation of the same theme, but with a couple different points, Writing Good CSS. Note that there is a (non-linkable) TL;DR at the bottom of the article, if you need it by now… :-)

And finally, Samsung, makers of all-screens-large, have found a way to “[make] big trucks transparent in the name of road safety“… Brilliant. Absolutely brilliant!!

Happy reading,
Atg

Today’s Readings

Earlier this month I mentioned ‘s Flexbox course. I also mentioned that I had already signed-up. So, quick update: Great course! I have created my six dice, worked out a totally light 12-column layout, then broke free from those confining columns, and found great new methods for dealing with an unknown number of wrapping elements. I have also discovered some great tools that I’ve learned of:

  • We all know about preprocessors, right? Less and Sass are easily the most common, but there are plenty out there. Well Autoprefixer is a postprocessor, which means you get to write CSS from the future (you can still use Less and Sass, but you don’t need to use all the prefixes and old/wrong versions (like for gradients and Flexbox))! Autoprefixer uses Can I Use data (you can also customize your requirements) to analyze and alter your output CSS (thus the post in postprocessor) to provide all the necessary prefixes and alterations for you! It’s a sweet little deal, and one I cannot wait to play with!
  • I have not yet had a chance to dig as deeply into Prepos yet, but it is an alternative to CodeKit (which smart people like Chris Coyier seem to really love!), that at first glance seems to offer (at least nearly) all of the same functionality, only also on PC and Linux (while CodeKit is Mac-only), and for a couple teeny little bucks less (currently $29 vs. $32). If you’re in the market (and if you’re not, take a closer look at what they both offer, maybe you should be!), check-out both!
  • Lastly, somehow I had never tripped across the Can I Use browser usage table… Fun! :-)

Okay, had to get that out there, now back to our regularly-scheduled readings…

We all know images are the speed-killer on the web, right? Nearly every site has more images than HTML, CSS or JS, often times more than all three combined! But what strikes me, if I’m correctly reading the first chart in ‘s High Performance Images: Beautiful Shouldn’t Mean Slow article, is that over the past 3+ years we have not increased the number of images on our sites, only the weight?? That’s crazy, considering how much more we now know about reducing image size, and how much easier it has gotten to do it

I have never liked the concept of the e-bike (entirely because I am a grumpy old curmudgeon), but I do fancy getting one for my wife (and probably eventually for me, because, as I said, I am old), so I’ve been keeping my eye out for good options. And so the Maxwell E-PO has certainly caught my eye. Lightweight (even by normal bicycle standards), sleek design, a pretty impressive battery life, quick recharge, and planning to start at only $1,500! (As soon as the ubiquitous Kickstarter campaigns is announced, and eventually closes… :-/ )

And to try to make cycling safer in their fair city, Toronto(ans?) staged a die-in, in the most Canadian way possible: trying really, really hard not to disturb or bother anyone… :-)

does a great job of collecting several opinion pieces on the state of HTML, what is lacking and what is needed. I agree with much of the comments in Bruce’s article, but strongly disagree with the ideas of dropping some HTML5 elements (such as article and footer) or adding more vendor styling to HTML elements (such as adding a drop cap to article or floating sidebar (I’ll assume the author meant aside, since there is no sidebar element) to the right); I am so annoyed every time I have to override a vendor style! This is what I do for a living, if I wanted a margin on this stupid thing, I would have added it!!

really likes conical gradients. When I saw the first example in her article, I wondered if she also really likes LSD… :-) When I saw her second example, I suddenly got it. And when I saw her polyfill page, I totally got it… Note that each example is one HTML element…

While the first several groups in this Introduction to CSS Selectors article may be pretty basic, there are also less-common selectors (to me, anyhow). I guess I used to avoid things like p ~ a and such back in the day because they were so new and not well enough supported, and I just never really got into them. But, according to Can I Use, support for CSS2.1 and CSS3 selectors are all quite good!

Some über-cool Sass animation mixins. If anyone wonders who wins the battle between Sass and Less: Less = easier to set-up and learn, Sass = way better in every other way… (IMO…)

And finally, with all the new acronyms that the kids are scattering across the Interwebs these days, it can be hard to keep up. So here’s a handy cheatsheet to get you started

Happy reading,
Atg

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