War of the Worlds Broadcast

Article

The Progressive Web App Philosophy

The PWA Philosophy is all about creating an adaptive experience that fits as diverse an audience as possible.

Update

Final QA

Did a final round of #QA for War of the Worlds Broadcast. Lots of minor fixes and tweaks. Adjustments to the layout for really narrow phones in portrait orientation. Almost forgot to install ssl on the site :).

Update

Offline Support & Manifest

Added all the behind-the-scenes PWA features, web-manifest and service worker. I use workbox to handle the caching strategies. Since the site is static, everything is cached upfront.

Update

Missed it by That Much

The Lighthouse scores are pretty good. I got dinged for not having http2 or webp images. And the fact that it’s so media heavy. Not too concerned about that. Overall I’m pretty happy with it.

Update

Progress Bar

To keep things interesting over a slow connection, I added a progress bar that kicks in once the audio becomes playable but the image assets aren’t fully loaded. The syringe is an inline svg.

Update

Audio Vizualizer

The pulsing radio light is a feature I always wanted in War of the Worlds Broadcast but never had a way to pull it off. That is until I found this article, which explains that you can pipe the output from an #html5 #audio element into the #WebAudioAPI. That allowed me to measure the decibel […]

Update

Intro With Style

Added a glowing silhouette of the radio as an inline svg. It adds a graphic touch to the app before any actual image files load. The menu is fully interactive at this stage as well. For mobile devices that don’t auto-play, the radio becomes a button to “tune in” and trigger the stream.

Update

Look ‘n’ Feel

The final menu style using the vintage button look. I was going to try some analog format for the clock but this works well so i kept it. The explanatory copy now expands/collapses instead of scrolling.

Update

Vintage Buttons

I wanted to create a real mid-twentieth century look for the interface, without resorting to images. The button style is inspired by typewriter keys and glowing elevator buttons. The gold ring is a series of box-shadows. The glowing effect is a combination of background color clipped to transparent text and a text-shadow overlay. [codepen_embed height=”350″ […]

Update

Bundle Size

Fontawesome (I’m a pro user!) is getting too big for its own good. Even with just the media controls the bundle size was almost 2M. With the social network icons I was pushing upwards of 4M. I switched to the material icon font which brought the bundle down to 200k. It includes everything I need […]

Update

Media Player Controls

The original site was supposed to feel like a live broadcast, hence no controls. With the slide out menu there’s a discrete place to put some controls so why not. The forward/rewind buttons jump 30 seconds and the skip buttons jump between acts.

Update

The Road to Appiness…

In an effort to behave more app-like, the control bar at the top of the site is replaced with an action button and slide-out menu. This way I’m not struggling to find room for buttons or dealing with popups. Everything is going in the one menu.

Update

Introduction

To decrease time-to-interactive in the #PWA, I integrated the introduction copy into the preloader. The first line of copy appears as the #JavaScript bundle loads up and audio begins streaming. The second line appears as image assets are loaded. If assets are cached, the second screen never appears.

Update

Plugins and Filters

I expanded the StageHand object to accept #plugins. It was necessary to place the #martian plants outside of the window stage. The original War of the Worlds Broadcast was supposed to have the martian plants wither and die before fading away. Using #CSS #filters the plants now turn grey before fading out.

Update

Tripod

In order to add the Tripod heat-ray effect I had to expand the Stage Hand element generation to include a child element. The beam overlays the main walk cycle and fades in and out to create the shooting effect.

Update

Stage Hand

Moving to #CSS #animation simplifies the #JavaScript quite a bit. I threw away all of the #jQuery animation and replaced it with a class that simply adds and removes HTML elements.

Update

SoundBlaster.js

Yes, I named my audio class SoundBlaster. Taken from my #WebAudioAPI #Angular service created for Hypertension. This adds support for the HTML audio element for streaming long clips.

Update

ES6 Refactor

When I created War of the Worlds Broadcast in 2012 it was meant to be a tech demo of #HTML5 multimedia. Web development has changed quite a bit and it’s time to recreate it as a modern tech demo. HTML5 media is commonplace now, but the process and approach of building it is much more […]

Article