Angular Modularity


In my refactoring of #Flux, I broke it out into three #Angular modules: flux-engine, flux-editor, flux-interface. The engine module contains class interfaces for the data models and services for managing them. Editor is a full GUI editor for the story content. And the interface module contains the components necessary for front-end UI. A router in... Read the full article

Flickering Zeta o’ Lantern Pumpkin


I’ve been working Zeta o’ Lantern art into my #Halloween projects for a long time. This one is featured in War of the Worlds Broadcast. It has a glowing candle-lit effect using a div with a #CSS3 background transition #animation and color changed randomly with #JavaScript.  

Zeta o’ Lantern


Wanted to give the site an extra #halloween touch. I’ve been working the Zeta o’ Lantern into my blogs for a long time. This one features a glowing candle-lit effect using a div with a #css background transition and color changed randomly with #JavaScript

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.

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.


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.

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.

Google Map Web Component


The Google Maps Web Component drastically simplifies the process of adding a map to your project. The example below shows how it accepts all of the usual #JavaScript #API parameters.

CSS Paint API: Animated Gradient


Rather than write out a complex linear-gradient property to the style tag, this approach with the #CSS Paint API uses a single numeric value. The gradient structure is offloaded to a #JavaScript worklet for cleaner code. Right now the Paint API works only in Chrome and Opera.

ThePrizeInside Alexa


The Prize Inside is now an #Amazon #Alexa skill! Use the Alexa app to enable the skill on your #Echo. Check out the skill’s page