playground

The PWA Philosophy

2019-02-12

From my #presentation to the Fredericksburg Developer Group: The Progressive Web App Philosophy. If you couldn’t make it, check out the slides below. And the source for the 10 Minute PWA demo is on Github.

Christmas Ghost Break Room

2018-12-19

Not #web #development related but I had this idea over a decade ago and finally fleshed it out: Once a year the spirits of #Christmas visit a troubled soul and show them the error of their ways. Grab a sneak peak behind the scenes as the ghosts of Christmas past and future relax while their… Read the full article

CSS Blurry Christmas Lights

2018-12-11

Lots of blurry colored lights make for a great #holiday background. I set out to create a procedurally generated background that could be tweaked easily. The effect uses a pure #css solution. #SASS variables are used to simplify the color application. This demo uses JavaScript to randomize the color and position of the lights.

Flickering Zeta o’ Lantern Pumpkin

2018-10-21

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.

Tweet A Game With nano JAMMER

2018-08-12

nano JAMMER by @CasualEffects is a fun little toy for game developers. The goal is to write an entire video game using only 280 characters of source code. The language offers a few dozen sprites, 32 color palette, and variables named as greek letters. All designed to keep the character count down. I made some… Read the full article

AR In The Browser

2018-08-10

Trying out AR.js, a browser based AR solution that works remarkably well. It uses a trigger image to anchor an #AFrame scene and overlays a phone camera preview. You can get the trigger image here. Either print it or display it on another screen. Then grab a smartphone and head over to ar.greenzeta.com to check… Read the full article

WebVR Invasion!

2018-07-29

Doing some #WebVR experimentation with #AFrame. This scene was put together in a few hours using only HTML primitives. Check it out in a Google #Cardboard compatible headset for the full 3D effect. http://ar.greenzeta.com/scene.html

Google Map Web Component

2018-07-20

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

2018-07-15

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.

Simple Neural Network with Synaptic.js

2018-04-14

A simple #NeuralNetwork example using Synaptic.js. This one is trained to recognize the color yeller! It accepts three inputs representing Red Green and Blue values. Output is a percent certainty that the color looks yeller. Try out the codepen below and use the sliders to change the color.