Aaron Gustafson's Blog, page 9

LeVar Burton changes lives, one book at a time

Growing up, I was a casual viewer of the various Star Trek series, but was never a huge fan. Sure, I had a passing familiarity with LeVar Burton���s character, Geordi La Forge, on Star Trek: The Next Generation, but to me he will always be the host of Reading Rainbow. And I���m no alone. Millions of late GenX-ers (like me) and young Millennials grew up watching and learning from his PBS show.

It���s hard to believe, but Reading Rainbow was on the air for a whopping 23 seasons, winning (quite literally) hundreds of awards for making reading exciting and fun. The show was life-changing for many kids. Perhaps the most endearing and emotional account of the impact Reading Rainbow has had in someone���s life came in the ���Kunta Thinks You���re Funny��� episode of the Nod.1 In that episode, producer Wallace Mack, Jr. got to share his story with LeVar:

To have you���this kind, attentive, black male figure���on TV every day, reading to me��� That was important to me. For a lot of younger kids and younger black guys, I think a lot of us share this need to feel that our parents are proud of us and that we are the kind of kids that our parents want. I think especially for sons to fathers, you always want to feel like you are the ultimate son for your dad. When I was younger, I didn���t necessarily feel that way with my dad.

I always knew I was different. We just grew up really different; we were different kinds of guys. We went to the same high school. He was the star football player at my high school. He was an army guy. And when I came around it was like Ah, what can we get you involved in? Let���s try basketball. Let���s try football. And none of those things really worked out for me. I always felt a little soft to him.

But I���d get the chance to see you on TV every day. You���re a different man. You���re standing there smiling and reading and really affirming that the things I cared about as a kid were okay. And not only were you reading to us, but you were opening up our world view.

LeVar Burton has done tons of other notable things during his career, but his literacy work and advocacy is inspiring. He has had an undeniably positive impact on several generations of Americans at this point and he is a great role model for young black men everywhere. I���m excited to see the role LeVar Burton plays in Oscar���s life.

LeVar Burton played Kunta Kinte in the TV version of Roots��↩

���God��� was a complicated man who did some revolutionary things

Before the January 28th episode of The Nod dropped, I���ll be honest, I had absolutely no idea who Father Divine���a black man who claimed to be God���was. You should definitely listen to the episode���it���s fascinating���but I wanted to take a moment to share a few pieces of Father Divine���s story that really stuck out to me.

First of all, Father Divine founded the International Peace Mission movement after becoming acquainted with New Thought. His movement had a lot of cult-like teachings and beliefs���Father Divine being God, for starters���but it also sought to break down gender and racial divisions. And considering it got its start in 1906 and experienced its heyday during the Great Depression (the 1930s)���attracting both blacks and whites alike���that���s pretty revolutionary.

The movement also owned a variety of businesses���including hotels���and integrated them. Again, pretty revolutionary for the time. To me, their most revolutionary act, however, came during World War II when they offered the U.S. Coast Guard use of the Brigantine Hotel in New Jersey for $1/year for the duration of the war. As the hotel staff and guests were integrated, the movement���s only stipulation for use of the hotel was that the Coast Guard desegregate as well. And it worked! In 1942!

While there is certainly a lot of bizarre, suspect, and downright deplorable history surrounding Father Divine, I have to admit I���m inspired by his ability to see an opportunity to use his power to further the agenda of equality.

If you want to know more, check out the documentary Father���s Kingdom.

Unbought and unbossed

I���ll start by admitting that Shirley Chisholm was not a woman I had much familiarity with growing up. Even though I spent a good portion of my youth in New York, my family (my mother especially) leaned heavily republican when it came to politics. Over the years, her name cropped up, but it wasn���t until Kelly became a recipient of Girls, Inc.���s ���Unbought and Unbossed��� award that I began to look into her history and appreciate the lasting impact of her life on this earth.

First of all, she was an educator. A firsthand witness to discrimination, hunger, and other issues within the education system, she turned her focus to politics. She did amazing work there, first in the New York State Assembly and later in the U.S. House of Representatives (as the first black woman elected to Congress, where she represented Bed-Stuy). She fought for the oft-forgotten and overlooked: students (naturally), domestic workers, the poor��� And she staffed her office entirely with women���half of them black���which is pretty revolutionary considering she was in Congress from 1969���1983.

Perhaps the most instructive part of her career���for me at least���was her run for President in 1972. She was running for the Democratic nomination, ultimately finishing seventh, but she faced many struggles in that run. Naturally, being black, she found it difficult to gather support from enough white Democratic voters. But beyond that, she also failed to get the support you might expect from her black male colleagues (and men in general). In an interview, she remarked:

They think I am trying to take power from them. The black man must step forward, but that doesn���t mean the black woman must step back. Being a woman is a bigger drawback for me than being black.

And yet, despite all of the systems and people working to hold her back, Shirley Chisholm was a force to be reckoned with. She took the cards she was dealt���like being assigned to the (yawn) Agricultural Committee early in her career���and found a way to make them play���by using her position to expand food stamps. She was gutsy and unafraid to speak truth to power.

I���ll share two quotes from her autobiography, Unbought and Unbossed (which also happened to be her ���72 campaign slogan), that really resonate with me. The first concerns race:

My God, what do we want? What does any human being want? Take away an accident of pigmentation of a thin layer of our outer skin and there is no difference between me and anyone else. All we want is for that trivial difference to make no difference. What can I say to a man who asks that? All I can do is try to explain to him why he asks the question. You have looked at us for years as different from you that you may never see us really. You don���t understand because you think of us as second-class humans. We have been passive and accommodating through so many years of your insults and delays that you think the way things used to be is normal. When the good-natured, spiritual-singing boys and girls rise up against the white man and demand to be treated like he is, you are bewildered. All we want is what you want, no less and no more.

The second, on the fight for gender equality:

It is true that women have seldom been aggressive in demanding their rights and so have cooperated in their own enslavement. This was true of the black population for many years. They submitted to oppression, and even condoned it. But women are becoming aware, as blacks did, that they can have equal treatment if they will fight for it, and they are starting to organize. To do it, they have to dare the sanctions that society imposes on anyone who breaks with its traditions. This is hard, and especially hard for women, who are taught not to rebel from infancy, from the time they are first wrapped in pink blankets, the color of their caste.

Shirley Chisholm���s leadership inspires me to use the power I have to empower the oppressed and under-represented. And while I may not have known about her my whole life, her legacy will live with me for the rest of it.

I���ve learned so much from Chenjerai Kumanyika

If you aren���t a podcast nerd like me, you may not be familiar with the name Chenjerai Kumanyika. My first introduction to his thoughtful and matter-of-fact approach to race relations, black history, and more came when I started listening to the Uncivil podcast.

I���m not a huge history buff, but the stories and perspective that Uncivil brings to America���s Civil War (and everything that grew out of it) is downright riveting. And the centerpiece of nearly every episode is Chenjerai���s methodical breakdown of why the particular episode���s slice of history is relevant to the issues we grapple with today.

Chenjerai���s sage wisdom pops up again in Scene on Radio���s ���Seeing White���. In that series, which I also highly recommend���thanks for the recommendation Dave!���Chenjerai provides incredible insight into what whiteness is, how white privilege shapes society, and the amount of work that I, as a white person, need to do to counterbalance the effects of our society���s white supremacist institutions and behaviors.

Over the last two years, I���ve learned so much from Chenjerai and, though we���ve never met, I feel connected to him in that way you feel connected with someone who wants you to be your best self. I���m trying and will continue to do so��� I know I���ve got a long way to go.

Thank you Chenjerai, for all that you have done and all that you continue to do. I cannot tell you how much I appreciate the education.

Why Oscar���s middle name is ���Ellison���

I don���t remember the class or the year, but back in high school I remember being asked to choose one from a selection of books to read and write a report on. That was my first exposure to Ralph Ellison���s Invisible Man and my first glimpse into the realities of racism as seen from the perspective of a black man in America.

If you���re unfamiliar with the book, it���s a story told from the perspective of the unnamed protagonist as he makes his way in New York in the 1930s. It tackles a number of topics that are still relevant today: racism, of course, but also black identity and the disconnectedness (invisibility) experienced daily by marginalized people.

I am invisible, understand, simply because people refuse to see me. Like the bodiless heads you see sometimes in circus sideshows, it is as though I have been surrounded by mirrors of hard, distorting glass. When they approach me they see only my surroundings, themselves or figments of their imagination, indeed, everything and anything except me.

It was emotionally tough to read, hit me hard, and has left a lasting impression. Invisible Man was an awakening for me in many ways, though it took many more years for me to recognize that fact.

And so, when Kelly and I were in the process of adopting a child (who we knew would likely be black), ���Ellison��� was top of mind for me as a boys name. Already having a ���son��� in my last name, however, it made sense to give Oscar the middle name ���Ellison���.

I���ve written before about my hopes for Oscar and for all black children. I want them to grow up in a society that sees (and values) them for who they are. I want them to grow up in a society that doesn���t look at them with suspicion because of their complexion. I want them to grow up in a society that recognizes the fullness of their humanity and respects their bodies and their spirits. Ellison���s novel���in addition to his other writings���remains a sobering reminder of how far we have yet to go.

PWA Q&A

Over the past few months, I���ve been running a series of question and answer sessions regarding progressive web apps. Some are videos, others are threads on Twitter. Given how much content there is at this point, I thought I���d roll it up into a post so you can see it all at once.

You can view the contents here or go directly to YouTube or Twitter to see them in their original incarnations:

One Dev Minute Videos on Twitter
One Dev Minute Videos on YouTube
#PWAChat on Twitter


What is a Progressive Web App (PWA)?

One Dev Question with Aaron Gustafson - What is a Progressive Web App (PWA)?

A progressive web app (PWA) is a website that has been progressively enhanced in order to be able to do other cool things. It could, for instance, be installed. It could work better offline. It could provide a better, more app-like user experience; something that���s a little bit more engaging.

When you boil it down, a PWA is a website that

runs under HTTPS, so it���s secure;
uses a Web App Manifest to provide meta information about the website; and
has a ServiceWorker, which helps it to work better offline and allows you to do a lot of interesting stuff in terms of managing network requests.

If you���ve got those three things, you���ve got a PWA.

What is a Web App Manifest?

One Dev Question with Aaron Gustafson - What is a web app manifest?

A Web App Manifest is a a JSON file���that stands for JavaScript Object Notation���that includes a bunch of meta information about your site. That information could be things like

icons that you want to be used when your PWA is installed;
the short name that you would want use on a home screen or in app lists;
your site���s full name; and
a description of what your site is or does.

The manifest file is referenced in the head of your HTML page via a link element. That makes it accessible by browsers or by any sort of build system that might want to make your PWA installable.

There are also several keys in the manifest that make it useful in an app store context. You can include categories when you want your app to be findable as a ���productivity��� app, for instance. There���s IARC rating to indicate the age range your app is safe for. There are also keys for screenshots and, as I mentioned, the description that you would want shown.

There are also keys for describing how the PWA should operate. You set up your start page���the location your PWA should open to whenever it is launched. There are keys for describing your theme color, orientation, and even how much browser chrome���the controls surrounding the browser viewport���you want around your app. You can make your app look like it���s running in a browser, with address bar and all of the back and forward buttons, refresh, and all that. There���s also

���minimal UI��� with fewer controls,
standalone, which basically cedes all of the browser controls over to the developer, making it incumbent on them to actually manage back, forward, and such; and
fullscreen, which is similar to standalone, but runs��� ahem��� fullscreen.


What is a Service Worker?

One Dev Question with Aaron Gustafson - What is a service worker?

ServiceWorker is a web standard, first of all, that���s been adopted by every major modern browser. It���s is a type of Worker. You may have heard that term in JavaScript before; it���s an isolated piece of programming logic that���s running in a separate thread from the main browser UI thread.

A ServiceWorker is a specific kind of Worker that allows you to be your own proxy for all network requests. That means if I am loading up a web page and I���m requesting an image, the ServiceWorker can actually intercept that request and, for example, return an image that���s already stored in the cache. Or it could go to the network and store the response in the cache and return that response to the browser.

You can use service workers���yes, you can have more than one���to enable a ton of really interesting and beneficial user experiences, such as being able to provide an offline experience. You could provide a more performant experience by caching certain frequently-referenced CSS, JavaScript, and images so you can serve up a cached version instead of going out to the network to make requests. That speeds up page load and rendering considerably. Service workers can also be used to do things like push notifications and, in development, there are specs for being able to do synchronization both as one-time synchronization events and as background synchronization events, enabling you to keep your app up-to-date whenever it has a network connection, whether a user has your app open currently or not.

ServiceWorker is a pretty ambitious spec and I���m sure it will continue to evolve, becoming more and more useful. But, in a nutshell, it���s a proxy that you control in JavaScript that enables you to create a better experience for your users.

What frameworks work best for building a PWA?

One Dev Question with Aaron Gustafson - What frameworks work best for building a PWA?

This is actually a bit of a loaded question because you actually don���t need to use any framework to build a PWA. Some are certainly designed for creating more app-like experiences on the web, but a progressive web app can be built from any website. You could have a static website���like this one���with a few enhancements in JavaScript. You could have a full-blown single page app that���s built in React or something like that. Any website can be a PWA; use whatever your team is most comfortable with.

The main idea behind progressive web apps is that the app-like experience is a progressive enhancement of a core experience that is universally usable. The main question to ask when you���re looking at frameworks, libraries, or even content management systems is Am I getting a solid first render that���s coming from the server rather than having to rely on client-side JavaScript to render my page? That way you ensure that your pages are always going to be rendered and then, once you have that, you can go ahead and take over with whatever your front-end framework is (if you decide to use one).

Do I need to build a single page app (SPA) before I build a PWA?

One Dev Question with Aaron Gustafson - Do I need to build a single page app before I build a PWA?

No.

Seriously, though, a PWA can be whatever it is that you want to make it.

The first PWA that I built was actually the HTML version of the book that I wrote back in 2011, long before PWAs existed. It���s static HTML that I generated from the ePub version of that book. I put it on the web, added a service worker and a web app manifest and I had a PWA.

You don���t need to invest in building a single-page app and, in fact, there may be certain instances where you don���t want to build a single-page app because it just overcomplicates things. Plus, URLs are very helpful for users to be able to access certain bits of content, functionality, and the like. The URL scheme is something that we should care about and we should ensure that people can access and use them. Many SPA frameworks get rid of URLs entirely or render them useless.

You don���t need to have a single-page app, but if you do, please honor URLs. Make sure that you have a rational URL structure. Responding to URLs appropriately. Don���t redirect everyone to the home page when a URL that you recognize (or that you should recognize) is requested. Follow these guidelines and you���ll build a great web experience, regardless of whether people have it as an installed PWA, view it in their browser, or are on an older browser that doesn���t support ServiceWorker and other PWA features.

What makes for a good PWA?

One Dev Question with Aaron Gustafson - What makes for a good PWA?

PWAs start with a great web experience. Make sure that you���re building an experience that works on any browser. Make sure it���s performant. Avoid making assumptions about what a user���s browsing situation is.

We live in a bubble. Most of us have fairly high-end devices connected to high speed networks and an uninterrupted supply of power. That���s not the reality throughout the world. Being aware that there���s more than our experience helps us to build more inclusive websites that can reach more people living very different lives from us.

Similarly, it���s important to consider the accessibility of your project. Make sure that people who have disabilities (e.g., low or no vision, motor disabilities) can use your product. Be certain it works with alternate input methods like keyboard and voice too.

Make accessibility and inclusive design part of your process, build something that is a great user experience, that���s performant��� that���s the foundational work you should be doing before you look at enhancing your site into a progressive web app.

Will PWAs replace native apps?

One Dev Question with Aaron Gustafson - Will PWA's Replace Native Apps?

PWAs will replace some types of native apps.

Why? Well, when you���re building a native app, you usually need to build some sort of API or web service first. Then you build a different native app for each platform you want to target. You might have an Android app, an iOS app, a desktop app for Windows, another for macOS, and so on. Chances are have a web version as well. If that���s the case, perhaps it makes sense for you to double down on your investment in the web version.

The web design and development community is substantially large with a ton of available talent and resources available at a relatively low cost. If you focus your energies there rather than dividing your money and effort across umpteen different platforms, you will likely achieve the same result with lower costs and quicker turnaround. This is especially true if you���re providing an identical experience on all of those platforms. If that���s the case, it definitely makes more sense to focus on building a great web experience that you can turn into a PWA to become installable on all of the platforms you were originally targeting with native apps.

So that���s one side of it. The other is that there will always be apps that perform better as native apps, but it will be on a case-by-case basis. If you need to be closer to the metal on the machine, a native app probably makes a lot of sense for you. If you need to have immediate access to certain device APIs that aren���t available via web standards, then a native app is going to make more sense to you.

PWA or native should be evaluated on a case-by-case basis. I don���t think PWAs are going to replace all native apps, but I think they���re gonna replace quite a few.

Why is Microsoft interested in PWAs?

One Dev Question with Aaron Gustafson - Why is Microsoft interested in PWA's?

This is an interesting question because PWAs, in a lot of ways, are viewed as a mobile solution (or at least were initially proposed as a mobile solution). Microsoft isn���t really in that space much anymore, so why is Microsoft interested? The answer is that Microsoft has actually been very interested in the web for quite a long time. Back in Windows 7, Microsoft introduced Pinned Sites, which graduated a website from the browser to the taskbar. When Windows 8 came along, Microsoft enabled developers to build native apps using web technologies. Then, when Windows 10 rolled out, Microsoft introduced Hosted Web Apps (HWAs), a precursor to PWAs in the Microsoft universe. HWAs allowed you to bundle a web app���something that existed at a URL���as an installable native app.

The web is a great distribution mechanism. It���s also where a lot of the fantastic experiences are being built and Microsoft wants to be supportive of that. We want to improve discoverability for the awesome services people are building on the web within the Microsoft Store, within Bing search results, and that sort of thing. Ultimately, it���s about giving exposure to the great software that���s being written while also being able to provide those great experiences to Windows users.

Aren���t PWA���s for mobile devices?

One Dev Question with Aaron Gustafson - Aren't PWA's for mobile devices?

PWAs did originate in the mobile space. They were originally launched for Android as an enhanced version of a Chrome link on your home screen. Samsung Internet, Firefox, and Opera also enabled installation of PWAs on Android, so yeah it was very much a mobile thing to begin with. But that���s not the case anymore.

On the desktop side of things, Microsoft has stepped up and declared PWAs first-class apps in Windows 10. Google has also been making a push to bring PWAs to desktops with installation via Chrome. Microsoft Edge will be rolling out a similar feature (which, if you think about it, is a lot like an enhanced Pinned Site). We���re starting to see PWAs show up more frequently on the desktop now. That���s where a lot of users still are, especially for certain verticals like financial and news. So why not take advantage of that?

We���ve traditionally thought about PWAs as being a mobile solution. That���s why responsive design���being able to have your design flex to different screen sizes���is such an important characteristic. Responsive design has its place on the desktop too because users are constantly resizing windows���pushing things off to the side, docking them in different ways���so they can use multiple apps at once. The things that we built to make the web look and work really well in a mobile context actually work quite well in desktop too.

Aren���t PWAs just a wrapped website?

One Dev Question with Aaron Gustafson - Aren't PWA's just a wrapped website?

Yes, in a way installed PWAs are a wrapped website, but PWAs are about providing a great experience that can work offline as well, which makes them a bit more like a native app. And that���s kinda the point. By taking advantage of ServiceWorker to provide an offline experience, synchronize and manage your data, and so on, the web is able to operate on the same plane as traditional native apps.

Now, in most cases, a website being installed as a PWA does seem very much like a website, but on Windows a whole world of OS-level APIs opens up for the developer, enabling a website to do more. Sharing, for instance, is something that people frequently do; being able to share from one app to another is super-useful. Those APIs are starting to come to the web, but within Windows we have that stuff already.

In Windows, we have the WinRT APIs. These are JavaScript APIs that allow your app to connect deeper into the OS. So when you���re an installed PWA in Windows, you can actually start to light up different native and OS-level features���adding your PWA to the Share Charm, pushing events to the Timeline, seeing if a user is using Dark Mode, etc.���and react to that. There are also integrations with a user���s calendar, their contact list, fine-grained geolocation data for geofencing, and so on. There are lots of APIs available within Windows that PWAs can take advantage of to enhance their apps.

This is one area where the Twitter PWA has actually done a fantastic job of more deeply integrating with the operating system. They use the Share Charm for sharing to the Twitter app. They share from the Twitter app too. They���ve got Live Tiles��� Jump Lists��� Timeline��� all sorts of integrations, with more on the way. It���s totally possible to build a website that acts much more like a native app with WinRT.

If the web���s so awesome, why put PWA���s in the Store?

One Dev Question with Aaron Gustafson - If the web's so awesome, why put PWA's in the Store?

The web is awesome and it���s a great distribution mechanism, but not everyone is used to looking for apps and experiences on the web. Being able to have your experience exist on the web, but also be discoverable via app stores can be the best of both worlds. And once you���re in a store, you also have the ability to promote your app alongside other apps as well, such as via the Start Menu on Windows or on listing pages in the stores themselves.

Who else is supporting PWAs?

One Dev Question with Aaron Gustafson - Who else is supporting PWA's?

PWAs have very broad support. Microsoft is, of course, supporting progressive web apps, but they���re also supported by Google, Apple, Mozilla, Samsung, Opera, and others. That means every major browser supports progressive web apps and, on certain platforms, some even give you the ability to install the app or add it to your home screen.

On Android devices you can install from Chrome, Firefox, Opera, and Samsung Internet. On iOS, you can install from Safari. On desktops you can install, of course, from the Microsoft Store and you���ll soon be able to install from Edge. You can also install PWAs from Chrome on both Windows and macOS.

How do I test my PWA on Windows?

One Dev Question with Aaron Gustafson - How do I test my PWA on Windows?

Since a progressive web app is a website, you should be following a standard browser testing protocol, using your specific support matrix. If you���re trying to test specific functionality of your PWA through ServiceWorker, you���ll need to crack your browser���s dev tools. Microsoft Edge gives you the ability to inspect how your resources are being loaded within the ServiceWorker and you can check to make sure that everything���s happening the way that it should be.

If you have a PWA installed as a standalone app on Windows, you can use the Edge Dev Tools Preview to connect to that app. As a standalone app, a PWA is running separately from Edge, so you can���t launch dev tools like you���d normally expect to. The standalone Dev Tools app enables you to connect to any instance of Edge running within Windows. That means every Edge browser tab, of course, but it also means each browser extension and any running PWAs, which is pretty cool.

How do I add my PWA to the Microsoft Store?

One Dev Question with Aaron Gustafson - How do I add my PWA to the Microsoft Store?

The first step for adding your progressive web app to the Microsoft Store is to generate the AppX wrapper that hosts the PWA. A good tool for doing that is a free and open source tool called PWA Builder. You point that service at your progressive web app and it will generate an AppX wrapper for you.

The AppX is basically a container file (ZIP) that contains an AppX Manifest that points to your URL. There may be some tweaks that you���ll need to make in that manifest file (which is XML) if you want to enable geolocation, for instance, or light up some of the WinRT features to get deeper integrated into Windows, but the basic export out of PWA Builder will get you started.

You can test that export by side loading it onto your Windows Device. Then, when you���re happy with it, you can package that up and submit it to the Microsoft Store via the Dev Center. The Dev Center will walk you through the process of building out your app listing, enabling you to indicate who it should be targeted at and such. You can even target it to specific people or groups of people, enabling you to beta test your PWA. Then, once you���re ready you can flip it live and it���ll become available to anybody with Microsoft Store access.

Is Microsoft automatically adding some PWA���s to the Store?

One Dev Question with Aaron Gustafson - Is Microsoft automatically adding some PWA's to the Store?

Yes, Microsoft is actively crawling the web looking for progressive web apps. The Bing crawler is actively identifying PWAs by looking for a web app manifest. To us, that���s a clear signal that a site wants to be considered as an app. Now anyone who wants to be excluded from that crawl can block the Bing crawler from seeing the manifest in their robots.txt file.

If, however, you do want to be in the Microsoft Store, the process runs a little something like this:

Bing finds a possible PWA;
it runs some basic sanity checks for

HTTPS,
a quality Web App Manifest (not something auto-generated), and
a service worker that does some basic offline stuff;


someone checks to make sure the site abides by Microsoft Store policies.

The last bit is a way to weed out potential spam, malware, and phishing sites, but also adult content and subscription-based content (which, per current policy, need to use Store APIs for subscription management).

If your website meets all of these criteria, we will use the information you provide in the web app manifest to populate your PWA���s Store page. Down the road, if you���re interested in taking control of your app in the Microsoft Store, you can get a Developer account and we can transfer it to you.

Can I use web components when building PWAs?

Yes! (With caveats.)

If you take a look at the support tables on Can I Use, native support is pretty uneven across the browser scape. That said, there are polyfills that make web components cross-platform.

A lot of it comes down to how much JavaScript code you want to ship and whether the trade-off of code to end user benefit is worth it. For a fantastic discussion of these tradeoffs, JavaScript, developer convenience, and user experience, I highly recommend reading this piece from Alex Russell.

What���s the Return on Investment (ROI) for building a PWA?

Like many things, it depends. Every project is different and every project defines success differently. That said, companies that have embraced PWAs have seen pretty impressive successes. The kind folks at Cloud Four have an ongoing collection at PWA Stats.

If you���re looking for ideas around how your site could benefit from becoming a PWA, check out this piece in A List Apart: Yes, That Web Project Should Be a PWA.

What are some interesting uses of ServiceWorker you���ve seen?

One of the more interesting uses of ServiceWorker, in my opinion, was Dean Hume���s dynamic WebP image-swapping. Clever stuff!

He also has a pretty clever integration with the Network Information API that enables the Service Worker to decide whether to load images or swap in a blank SVG placeholder.

There���s also some clever ServiceWorker code that will re-play failed pings to Google Analytics. That gives you the ability to analyze offline usage of your site/app too.

What are some common misconceptions about PWAs?

Oh, so many���

That you need to use [insert framework de jour here] to build a PWA. (You don���t.)
That your site needs to be a Single Page App. (It doesn���t.)
That your PWA needs to be an ���app,��� whatever that is. (Nope. Any site can be a PWA and most sites will benefit from becoming a PWA.)


What type of site or app is best suited for a PWA?

Any site can (and probably should) be a PWA. Yours included.

The way you choose to use PWA-related technologies is up to you. Not every site needs push notifications. (No, really, not every site needs push notifications.) Most sites can benefit from graceful offline handling. Every site can benefit from improved performance via caching.

If your question is more around whether it makes sense to go PWA or native, I���ve got some thoughts on that too.

Are there any Microsoft PWAs in the works?

I am aware of a number of Microsoft PWAs that are in the works. Teams was announced at Build this year. Office.com is on a path to becoming a PWA now too.

More soon

If you have a question about PWAs, hit me up on Twitter or via the contact form on this site.

Mentorship 2018

If you follow my work, you may recall that I started a formal mentorship program last year. I had the great privilege of working with two incredibly talented people���Amberley Romo and Manuel Matuzovi�����for a little over a year and enjoyed the hell out of the experience.

I had hoped to kick off a new mentorship session in January, but (as often happens) life got in the way. Now that I���m settled into a new city and a new routine, I���m itching to get things going again. And so I ask: How can I help you develop or further your career on the web?

What am I looking for in a mentee?

Whether you aspire to work on the web or you���re a veteran of the browser wars, if you think you could benefit from mentorship, I���d like to help. My ideal mentee is someone who���s passionate about the web and is���perhaps most of all���someone who I believe I can help.

To that end, my skills and knowledge will probably be most helpful to people interested in any or all of the these:

writing,
speaking,
designing/developing on the front end (but not with frameworks),
improving their UX skills,
championing accessibility, and
developing progressive web apps.

I���ve got scads of other interests and skills too, but those are probably the ones I���m most confident I can help with.

You don���t need to live near me or even in the same hemisphere. If you happen to be local to the Pacific Northwest of the U.S. or live somewhere that I���m traveling to over the next year, we���ll definitely meet in person, but that���s by no means a requirement. I���m based in the Pacific time zone (Seattle, Washington), but I���ll do my best to coordinate a regular time for us to chat that won���t require you hopping on Skype at two in the morning (unless that���s your thing). Email��� Skype��� Hangouts��� I���m happy to work however you���re comfortable.

I���m afraid I don���t speak any languages other than English,1 so that artificially restricts the pool of folks I can work with, but don���t worry if you don���t think your English is great. Honestly, it���s probably better than you give yourself credit for. It���s also 100% guaranteed to be better than my attempts at speaking pretty much any language other than English.

Who should apply?

Much of my work over the past twenty-plus years has been concentrated in the areas of accessibility and, more broadly, inclusive design. To create a web that can go anywhere and work for anyone, we need a diverse group of people making it happen. Sadly, our industry has a difficult time recruiting, developing, and, most importantly, retaining a diverse workforce. Given the egalitarian ideals that the web was founded on, that���s a travesty.

I want to see more diverse faces working on the web, speaking at conferences, writing articles, and getting promoted into leadership positions in design, UX, and development. And so this year I���m doing things a little differently: I will only be taking applications from folks who self-identify as part of an underrepresented group. Out of respect for your privacy, I���m not requiring that you label yourself in any particular way, but I do ask that you check your privilege and refrain from applying if you���re part of a group that is already heavily represented in our industry (such as white cis males).

What���s the application process?

Like last year, the application process is not meant to be challenging or time-consuming. I���d like you to write a public post somewhere on the web���such as on your blog, Medium, Twitter, or Mastodon���that discusses why you love the Web, what you love about working on it (or aspire to work on), and what your goals are for the coming year of your career. I���m not looking for any particular length; I���m trying to get a sense of you, your passion, and where your interests lie. I love seeing people publicly gush about why they love the web, but, if you���re more of a private person, you can write it in a non-public document stored somewhere on the web that you can share with me (such as on DraftIn, Google Drive, OneDrive, or Dropbox).

Once you���ve done that, use this site���s contact form to send me the link, along with a brief note about why you���d like me as a mentor. Again, I���m not looking for any particular length, but I would appreciate it if you you could touch on where our passions overlap and how you think I can help. I want to make sure we���re a good fit. And please be honest��� if you want me as a mentor because of the connections I have, say that���I appreciate honesty.

Anyway, that���s it. No big hoops to jump through. If that feels like too much writing and you���d rather speak to me in real-time, please drop me a line and say as much. I���d be happy to set up a time to chat.

Can you nominate someone?

If you know someone who you think would be a good fit for this, please nominate them! All I ask is that you introduce us with some context. The easiest (but most public) way is to @-message us both on Twitter. If you���d rather keep it private, you can kick off a DM thread with us if your nominee is on Twitter too (my DMs are open) or start the conversation by dropping me a note through the contact form on this site or sending me a message on any of the various platforms I frequent (Facebook, LinkedIn, and so on).

I look forward to working with you (or your friend)!

I���ll keep the lines open through Tuesday, 30 September 2018 in whatever your local timezone is. I met a ton of amazing folks last year through this process and got to work with two outstanding human beings. I truly look forward to getting to know you and taking one or two of you under my wing.

In hindsight, studying Latin in high school wasn���t the best choice. Oh well.��↩

Going Offline

As you���ve probably gathered if you���ve been following my work for the last few years, I���m super-jazzed about Progressive Web Apps. I think they have the potential to improve user experience, performance, access, and so much more for so many people. So I was stoked when Jeremy Keith asked me to write the foreword for his latest book, Going Offline, which tackles the complex topic of Service Workers with aplomb.

With his permission (and A Book Apart���s), I���m reprinting the foreword here.

We often talk gleefully about the open and ubiquitous nature of the web, but it has an Achilles��� heel: network connectivity. If your career is spent working on the web, chances are you might rarely encounter networking issues in your day-to-day life. When it comes to networks, many of us are spoiled with sweet, sweet speed and incredible reliability. We take it for granted that everyone in the world experiences the web like we do.

With an uncertain network connection, the web can be elusive. Broken page layouts. Missing functionality. Lost images. Dinosaurs. Broken hearts. Frustration.

With no network at all, the web ceases to exist.

Over the years, scores of people far smarter than I have looked for ways to help the web overcome its complete dependence on the network. Browser caching, Application Cache, Local (and Session) Storage, and client-side databases have all helped to some degree (well, maybe not AppCache) but these technologies have been somewhat limited in both scope and capability.

Then along came the service workers. Service workers are one of the most powerful tools we���ve had at our disposal, enabling us to control how we handle network requests. They even enable us to decide whether to make a network request at all. Of course, that power also gives us the ability to completely break our sites���if we���re not careful.

Which brings me to the book you hold in your hands. In Going Offline, Jeremy Keith breaks down heady concepts into approachable prose and easy-to-follow code examples. He also points out service worker gotchas and shows you how to deftly avoid them. Invest a scant few hours with this book, and you���ll gain a solid understanding of how to put this new technology to work for you right away. No, really���within fifteen to twenty minutes of putting it down.

Armed with the knowledge you gain from Jeremy���s words, I have no doubt you���ll do wonders to improve the resilience of the web.

���Aaron Gustafson

You can (and should) purchase Going Offline directly from A Book Apart. You can also read Chapter 1 of Going Offline on A List Apart.

Performance as User Experience

Last Tuesday, I gave a relatively new talk on web performance and optimization at An Event Apart in Seattle. The response to this talk has been tremendous both times I gave it, so I wanted to share the deck and relevant links here.

Slides

Download (PDF, 16.6MB)

Liveblogs/Notes


LukeW
Torre Capistran


Resources


10k Apart
Resource Hints
Preload, Prefetch And Priorities in Chrome
Web Font Anti-Pattern: Aggressive subsetting
Easy Navigation, Speed Are Leading Website Performance Attributes
How Loading Time Affects Your Bottom Line
How Page Load Time Affects Conversion Rates: 12 Case Studies
Research: Performance Impact of Popular JavaScript MVC Frameworks
Vanilla JS
The Best Request Is No Request, Revisited
HTTP/2 is the future of the Web, and it is here!
The Growth of Web Page Size
Not Every Article Needs a Picture

We Can Truly Transform People���s Lives

Kelly, Oscar, and I are getting ready to head out for a long weekend up in Gatlinburg, TN to take a break from house selling insanity and kick off the celebration of our 16-year anniversary. We love the Fall, but not everyone is equipped to take in the awesome beauty of Fall foliage. Thankfully, Tennessee is doing something about that.

At scenic overlooks throughout Tennessee, the state has installed special viewfinders capable of bringing the gorgeous yellows, oranges, and reds of Fall to people who are colorblind. Those of us who aren���t colorblind, you may wonder what the big deal is, but for folks who���ve gone years, even decades without ever having seen what the big deal it, this can be transformative and humbling.

This is a wonderful reminder of the great opportunities we, as technologists, have for making a real difference, however small, in people���s lives. Look for those opportunities. Harness them. Make a difference in someone���s life.

Beauty For More To See