Local Storage

2018-11-20

Needed this feature for a long time. Finally implemented local storage in #Flux. Changes are now saved immediately in browser. Firebase storage is now controlled manually with Cloud Save/Load buttons in the main editor component.

Missed it by That Much

2018-09-29

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.

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.

Progress Bar

2018-09-28

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.

Intro With Style

2018-09-14

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.

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... Read the full article

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.

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.

ES6 Refactor

2018-08-18

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... Read the full article