A few years ago, I wrote about how we can use css to style broken images. The technique leveraged on the fact that any styling to the ::before or ::after pseudo-elements on the <img> element will only be applied if the image doesn’t load. So, we could style those elements and they would only display if the image was broken.

Here’s an example of how I’ve styled broken images on this site:

There are pros and cons to handling broken images this way. One limitation is browser support, as this technique doesn’t work in some major browsers like Safari.

Having recently done a lot of work with service workers, it occurred to me that we could use the service worker to handle broken images in a different way. Since the service worker can tell if an image file isn’t able to be fetched, we can handle that condition by, for example, serving a different image to the browser.

In his The Case for Progressive Web Apps presentation at An Event Apart in Chicago, Jason Grigsby walked through the process of building Progressive Web Apps for your Web experiences and how to go about it. Here's my notes from his talk:

Progressive Web Apps (PWAs) are getting a lot of attention and positive stories about their impact are coming out. PWA Stats tracks many of these case studies. These sorts of examples are getting noticed by CEOs who demand teams build PWAs today.

A PWA is a set of technologies designed to make faster, more capable Web sites. They load fast, are available online, are secure, can be accessed from your home screen, have push notifications, and more.

With the introduction of Service Workers, developers are now able to supply experiences on the web that will work even without an internet connection. While it’s relatively easy to cache static resources, things like forms that require server interaction are harder to optimize. It is possible to provide a somewhat useful offline fallback though.

First, we have to set up a new class for our offline-friendly forms. We’ll save a few properties of the

Mobile is all the rage these days. We’ve shaken off the shackles of the desk. Now everything’s on-the-go. A dependency on phones and tablets has created the perfect space for growing mobile technology to expand in all directions. So, it’s natural to be thinking about transitioning from web to mobile development.

If you want your development skills to find their way to this world, it’s important to understand how different it is. Here are five considerations for transitioning from web to mobile development.

The clear advantage is the “anywhere-and-everywhere” nature of mobile. The fact that we can pick up our smartphones any time and open an application makes a big difference. The contrast between that and web applications is almost a chasm, given that they are best used on PCs.

As a developer, I approach new platform features with a healthy amount of skepticism. But when I first heard about Progressive Web Apps and ServiceWorkers, I was actually excited about the world of possibilities that it could offer. If anyone still doesn’t know what a Progressive Web App (PWA) is, here is a small explanation - it’s a term that is used to make your web app feel more like a native app, and we use something called service workers to achieve this. A Service Worker is a script that runs in the background and is separate from a web page - it opens up a lot of features for our web app such as,

This is a command line application, using Node.js, that fetches the GitHub Issue/s you specify and writes them to files on your computer in both HTML and markdown formats. This way you can view them without an internet connection.

There’s been a lot of buzz around Progressive Web Apps (PWAs) lately, with many people questioning whether they represent the future of the (mobile) web. I’m not going to get into the whole native app vs PWA debate, but one thing is for sure — they go a long way to enhancing mobile and improving its user experience. With mobile web access destined to surpass that of all other devices combined by 2018, can you afford to ignore this trend?

The good news is that making a PWA is not hard. In fact, it’s quite possible to take an existing website and convert it into a PWA. And that’s exactly what I’ll be doing in this tutorial — by the time you’re finished, you’ll have a website that behaves like a native web app. It will work offline and have it’s own home screen icon.

Since Frances and I published a blog post last year introducing Progressive Web Apps, a healthy conversation has started about what is and isn’t a PWA. There are a lot of opinions and many shades of gray. What are the hard requirements? Which requirements are marginal? What’s aspirational? This article outlines these requirements, attempts to classify them, and provides a baseline for “what is a Progressive Web App?”

Browsers gate Progressive Web App installation prompting and badging on criteria that they detect when users navigate to sites. These criteria have been designed to ensure that sites which invoke prompts are reliable, fast, and engaging.