Today’s Readings

For better or worse, Google’s AMP project is out there now, and as long as it is a thing, then hearing the news that WordPress is AMP-ready, is for the better…

And since we’re already drinking the WordPress Kool-Aid, let’s take a run through “just a few” WPMU DEV posts on how to set-up, tighten, and customize, a WordPress project:

And since we’re already drinking the Build Tool Kool-Aid, let’s have a look at 6 PostCSS plugins for Developers.

And once you’ve got your CSS all nicely modernized, make sure it is as lean as it can be by running it through TestMyCSS. Does a nice job of picking up long selectors, duplicate statements, duplicate selectors, and more! Does not do such a nice job of fetching CSS files from HTTPS, and I don’t see an “upload” option. Bummer, but still a great tool!

And if you’d like, here are a few more CSS tips and tricks, via a very cute delivery method…

Several great options for implementing automatic art-directed cropping for responsive images.

Three more death-blows to Flash…

  1. as the New York Times switches from Flash to HTML5 video players,
  2. media-delivery powerhouse Brightcove switches from Flash to HTML5, and
  3. some company called Google promises to stop running Flash display ads in 2017!

And with the continuing demise of Flash, let us remember that another aging comrade-in-arms is also soon dying: IE. And with that death will come much suddenly-superfluous code… But how to even start that clean-up? Fret not, as SitePoint is here to help with a few post-IE spring cleaning tips!

From The Paciello Group, comes a short note on the use of alt="" and the title attribute on img elements. TL;DR: Use alt, who cares about title?

One more from The Paciello Group, and one more regarding accessibility, here are a few basic screen reader commands for accessibility testing. You know, like we all do, right?

Okay, one more accessibility item, though really more of a browser/testing/support item, is this page of HTML5 elements, all with minimal styling, meant to help with cross-device support testing, as well as a single document to test your new CSS on.

If you’re looking at add a CSP security header to a project, getting the options just right can be a bit of a task, leaving you with either security holes or content/functionality breaking. So let walk you through fine-tuning your CSP header.

And finally, I think someone (read: Not it!) should convert this list of untranslatable words into a Lorem Ipsum-style content generator… :-)

Happy reading,

Today’s Readings

Pure CSS tribute to Mr. Dylan… Thank you, Mr. Keith… :-)

Nice walk-through of JS‘s classList from . Support is certainly looking good, with only IE10, 11 and Mobile partially supporting it.

continues the theme with these 5 Ways that CSS and JavaScript Interact That You May Not Know About.

Was wondering how long this would take:

Pressure.js… is a JavaScript library that makes dealing with Apple’s Force Touch and 3D Touch simple.

Great collection of Service Worker resources & notes from (and not just because he mentions me… :-P ).

Okay, one more from Jeremy, as he has one more note on Handling redirects with a Service Worker

And as long as we’re talking about cutting-edge JS, here is an entire battery of articles on getting started, being productive, and moving beyond, with React…

  1. From SitePoint, Building a React Universal Blog App: A Step-by-Step Guide, by , starts from the very beginning (creating the directory), provides the starting package.json file, and marches right through code sample after code sample, to get you completely set-up and running!
  2. From CSS Tricks, I Learned How to be Productive in React in a Week and You Can, Too, by , offers a fresh set of eyes, debunks a few myths about React, and also walks through code sample after code sample to demonstrate how to get up and running!
  3. Then shares 9 things every React.js beginner should know; I always feel like I should read these kinds of lists before I get started with a tech, but then it often makes no sense until I start digging in… You decide your approach.
  4. Next, starts a series on Performance Engineering with React. Always good to know performance DOs from the get-go, I feel.
  5. From, hopefully these React and Redux Cheatsheets will come in handy during early navigation!
  6. And finally, comes MERN, which “is a scaffolding tool which makes it easy to build isomorphic apps using Mongo, Express, React and NodeJS.” Pretty sweet!!


Nice series about the Web Animations API. The entire series is complete, so you can binge-read start to finish as soon as you finish reading this! ;-)

is so cool… She wrote an article simply titled The `background-clip` Property and its Use Cases, which indeed begins by explaining background-clip, then showing a few very primitive explanation demos. All very nice. Then she proceeds to just slam us in the face with increasingly awesome examples by adding CSS filters and creating skeuomorphic form controls… Amazing…

And finally, reader shares his article How to Speed Up Your WordPress Blog & Make it Insanely Fast. I think most of these are well-covered, but it cannot hurt to reiterate something so important!

Happy reading,

Today’s Readings

I recently referenced the Chrome Extension DevTools Author, which lets you theme certain panels. My experience wasn’t perfect, but nice job author of Author, , for reaching out and helping me resolve the issue!

Just in time for the official DevTools dark theme to hit the streets… :-/

I really like the floating label pattern, especially with no JS required! Maximum usability, minimal overhead…

walks us through CSS filters in this awesome live-coding presentation!

And if you’re digging the CSS filters, is a really fun way to learn more!

From comes a crapload of useful SVG links!

A pretty thorough collection of responsive typography tidbits, culminating in a Sass plugin to help you write less code. There are a few other useful bits scattered throughout the comments, if you can tippy-toe your way around the piles left by the troll…

Then walks us through using SVG to create responsive hero text!

Writing Next Generation Reusable JavaScript Modules in ECMAScript 6 is a great intro to getting your hands dirty with ES6/ES2015 now, as in today, and making it usable by everyone out there.

With all the buzz Service Worker has received as of late, it is easy to see why is so excited about streams! At the very least, we can finally create real progress bars… ;-)

How to: Pure CSS masonry layouts.

How am I only now learning about the HTML5 hidden attribute?? And browser support is pretty slamming!

Great couple quick bits to make scrollable regions more accessible!

And finally, I was just doing a review of an older project where we use a lot of background images and wondered if I could use inline images instead, but the responsive positioning seemed like it would be tricky to match. Until I read this article about object-fit and object-position.

Happy reading,

Today’s Readings

With the incredibly powerful news that iOS Safari 9.1 will finally support the picture element, support will soon take a huge leap forward, making art direction implementations a much more available option!

There are a couple other features worth noting in the 9.1 release notes, including the removal of the hated 350ms tap delay, and adding support for CSS variables and the will-change CSS property!

Also pretty powerful news that AWS is now offering free SSL certificates!

And speaking of AWS, here are a few best-practices for using AWS’ IAM.

Yet another nice, simple, easy-to-follow “use Flexbox for your complex layout” demo. Though published by WPMU DEV, there is nothing specifically having to do with WordPress here, everything in the article is applicable everywhere…

And as long as we’re playing with Flexbox, the Flexbox Playground CodePen is an awesome way to play with, get to know, and be awed by, all the various flexbox properties and attributes… It’s almost too powerful to fully grasp, when you consider all the combinations you can create…

The great shows us How Tabs Should Work (UI tabs, not browser tabs). Considering his impressive list of requirements near the top of the article, a wonderful solution to a very common, and commonly-troubled, UI pattern! (Note that he even offers a non-jQuery version near the bottom!)

And while we’re re-thinking UI patterns, here is a great walk-through on the thinking of, and designing, a new mobile navigation menu for As the first commenter states, it is always nice to see the thought that goes behind design.

A very nice, easy-to-follow Part 1 of JavaScript Modules: A Beginner’s Guide. Looking forward to Part 2!

And since the previous article started talking about ES2015 (formerly ES6), this ES6 Cheatsheet might also be useful… :-)

The Responsive Breakpoints Generator certainly got a lot of attention in the last couple weeks, and deservedly so. This Smashing Magazine article does a nice job of explaining the problem this tool solves, and how to best go about using it.

A Gulp-Based External SVG Symbol Sprite Icon System. As the author, , admits, it’s a horrible title, but it’s a great article on the subject!

And sticking with Una for a sec, I have to admit that I understand very little of what she is saying in her dotCSS 2015 presentation, but the effects she gets solely using CSS Blend Modes, Filters and Gradients, are amazing

And finally, I have mentioned before that I basically have no interest in computer game playing. But I cannot deny the power of the technologies used, and the impressive visuals that are created within them. So if you are interested in game development, check-out this HTML 5 game development video series!

Happy reading,

Converting WordPress to Web App: Adding “Add to home screen” functionality

Welcome to the final installment of my Converting WordPress to Web App series, where I will finish converting this site from a standard WP website to a cache-enabled, offline-first, performance-optimized, installable Web App, that takes advantage of Build and Deployment processes, and sits safely revisioned in a Version Control repo.

These are the steps that I have taken thus far:

  1. Series Intro
  2. Adding Version Control
  3. Adding a Build Process
  4. Adding a Deployment Process
  5. Adding Caching and Offline Support
  6. Adding “Add to home screen” functionality (this post)

And now, on to…

Adding “Add to home screen” functionality

For the record, what we’re talking about here is getting this little pop-up onto a website, so users can add an icon to their device’s home screen, that basically acts like a bookmark to your website:

An example of an "Add to Homescreen" pop-up, as displayed in Chrome on Android
“Add to Homescreen” pop-up, as displayed in Chrome on Android. Image screen-captured from Increasing engagement with Web App install banners.

Exactly how to best go about this has changed a little over the years…

When the iPhone first came out, Apple told us how to add a special link and meta tag to our pages and make a specially-sized icon available. And when Android came out, they initially supported the same Apple-centric tags and methods. And Windows Phone created their own tags. Then every iPad seemed to require a new tag, and soon this turned into tag soup! Just take a scroll through Everything you always wanted to know about touch icons

But even though we developers did this, it was still up to the user to figure out if this was available on our sites and then figure out how to add the home screen icon on their device. And, naturally, that process varied from device-to-device, and all those methods were their own little version of a pain in the ass…

So instead, developers like the great figured out how to create a custom pop-up with some script to try to help your users do this. Which is nice, but is now frowned upon because there is no way to tell if a user has already installed your app or dismissed the pop-up. (You can of course set a cookie, but we all know they’re only so reliable.) So you ended up with the possibility of someone that did install the app, or dismissed it, still getting the pop-up.

The current best practice is nicely documented by Google, and involves just a few simple steps:

  1. Your site needs a manifest file, which is a simple, static JSON file in your root directory. Jeremy Keith offers his as a nice, simple example, though other sites claim that a "short_name" parameter is required, which is missing from Jeremy’s…
  2. Your site must have a registered Service Worker. Oddly, it can actually just be an empty JS file that does absolutely nothing, you just need to register one.
  3. Your site must be served via HTTPS. This is a requirement to register the Service Worker, and it just makes good sense.
  4. With all of the above in place, a user must visit your site twice over two separate days within two weeks. The idea here is that first-time visitors are not faced with “INSTALL ME!” style messaging, and if they come back in that period, then they probably like the site, so now let’s offer installation. (This makes testing pretty difficult, so Chrome offers a flag that bypasses this restriction; enable chrome://flags/#bypass-app-banner-engagement-checks.)

And that’s it, this just works. In Chrome. On Android. Only. Hopefully other browsers will start following some similar pattern, ideally based on the same simple requirements. But for now, this is the method I will be following. It is, after all, just another progressive enhancement item, to me. If you have a project that requires this feature, then I would recommend going with Matteo’s solution above.

Creating the manifest.json File

If you’re at all like me, reading the W3C spec on the Web App Manifest might be enough to put you off of this step. Instead, I once again started with and the manifest file he created for his site.

The only adjustment I made was adding the possibly-required "short_name"; here is my manifest.json:

    "lang": "en",
    "short_name": "",
    "name": "Aaron T. Grogg's website",
    "icons": [
            "src": "favicon-144.png",
            "sizes": "144x144",
            "type": "image/png"
            "src": "favicon-300.png",
            "sizes": "300x300",
            "type": "image/png"
    "start_url": "/",
    "display": "browser",
    "background_color": "#ffffff",
    "theme_color": "#ffffff"

I think the only items worth really discussing are the "start_url" and the "display". The "start_url" tells the device which page to open when the icon is selected, and the "display" tells the device if it should open in a regular browser window (with visible controls, as I would like my site to), or one of the other three options.

With this file ready and added to my repo’s /dist directory, I need to add the following link tag to my site’s header.php file:

<link rel="manifest" href="manifest.json">

It is worth noting that the above link has only been supported in Chrome since version 39. Prior to that, since version 31, you would have needed the following code:

<meta name="mobile-web-app-capable" content="yes">

It is up to you if you want to add that as well.

Adding Service Worker and HTTPS

Since I already set-up a Service Worker in a previous installment in this series and set-up HTTPS in another previous post, that’s all there is to this installment!

So all that is left is to visit the site, either with the Chrome restriction-bypass flag enabled, or following the time period restrictions, and wait for the “Add to Home Screen pop-up to appear!

Miscellaneous Notes

The Google Chrome GitHub repo offers a slew of varying code samples that you can click through. The documentation for each is in the index.html file in each sample, sadly not in the files where it would have been more easily reviewable.

The Google Developers site offers another in-depth walk-through, though this one also deals with installing native apps, as well, so not everything applies to this topic. The FAQ section has a few good points worth being aware of, like how to prevent the banner from displaying and how to detect if a user tapped the “Add” button. It is currently not possible to know if the app is installed or force the appearance of the “Add” message.

In addition to Matteo’s JS script referenced above, he also offers that script nicely wrapped in an easily configurable WordPress plugin. So, again, if you need this functionality for a project, and you’re using WP, this might be a nice route!

Status Thus Far

This week’s installment completes this series. Just a little over a month ago, this was a standard WP website, where I made manual edits and uploaded them via FTP. There was no Build Process, no Deployment Process, and my code was not even in a repo!

Now, I edit files locally and commit them to my repo, where my continuous integration process automatically triggers a build process that performs file concatenation, minification, and optimization, removing unnecessary CSS prefixes from any CSS files I have, and adding prefixes that are still needed, before determining my site’s critical CSS and pushing that into a file, then deploying the resulting code base to my Stage server for review. When I’m happy with that, one click deploys to my Live server, where a Service Worker automatically caches necessary assets into the user’s browser to improve page load speed and provides offline access to the most recent posts on my site. Return Android/Chrome users are also offered the option of installing a link to my site on their home screen, just like a native app.

That’s a pretty huge improvement for this old site! :-)

You can see all of the changes that I have made by checking out the repo on GitHub. This will continue to be my working repo for this website, so things will continue to change as this site progresses. So if you are reading this much later than it was written, it may not look the way it seems it should; just let me know if you have any questions on anything you see!

Next Up

There are so many options that I have no idea what I might try to conquer next…

With a Service Worker installed, I could easily enable push notifications to notify users with the installed app of new postings…

I mentioned at the end of the last installment that I wish my cache list was dynamic, so maybe I will look into that…

I would also like to find a way for WordPress to automatically create WebP-versions of all the images I upload, so I could then also use Service Worker to send the better-compressed images to browsers that can support them…

I really should dig into all of the Gulp Tasks out there to see if I can improve my Build Process in any way…

So, yeah, the possibilities are pretty endless… But you can be sure that whatever I decide to tackle next, will be documented here. :-)

Thanks for joining me on this journey, and happy Web Apping,