92Y VR Experience

An immersive Web VR video showcasing the future of 92Y.

ConEdison DSM

Instructional website for energy company ConEdison to help building managers learn energy efficiency techniques.

Create A Neural Network With TensorFlow.js

TensorFlow.js is an extremely powerful machine learning framework. But its demonstration apps can be a little intimidating for newcomers. I wanted to make a straightforward example of a model that demonstrates the basics of TensorFlow.js. In this article walks through a simple classification model which solves for XOR.

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.

GZ Playground

Web experiments and other fun stuff

Web experiments and other fun stuff

Ivanka Trump Storefront

Website and ecommerce solution for the Ivanka Trump brand.

AutoCraft

Custom WordPress site built for auto customization team AutoCraft.

Estée Lauder Breast Cancer Awareness

Custom WordPress site built for the Estée Lauder Companies’ Breast Cancer Awareness Campaign 2017.

nod.js

Google’s Cardboard viewer standard has no standard control scheme. This is what led me to write nod.js, a simple gesture based event system for Google Cardboard enabled web apps. It uses device accelerometers to detect a sharp motion in one of four directions: up, down, left and right. With nod.js you can implement actions such as next, previous, confirm and cancel without the need for an external controller.

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.

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.

Jo Malone English Oak Experience

Custom website built for the Jo Malone English Oak product launch.

Sherwin-Williams Donate Your Color

A Chrome browser extension developed for the Sherwin-Williams Donate Your Color campaign.

Theraflu Thermoscanner

An interactive kiosk, developed for GSK's "How Sick is Vegas?" campaign.

Predator Vision

A recent project I worked on involved a thermal camera. At first it wasn’t clear whether or not we would be able to wire it into a web app. I decided to create a few alternative prototypes to fall back on, one of which involved motion detection. Anything moving is likely to produce heat. The effect works by capturing two frames, 3 seconds apart, from the live video feed. Even someone holding still to pose for the camera moves a little. Cheating, for sure, but the effect works really well.

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

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

LUMA Partners Website

Custom WordPress site built for investment bank LUMA Partners.

Skippy Art

An HTML5 canvas app that simulates drawing in Skippy® peanut butter with your finger.

Estée Lauder Breast Cancer Awareness

Custom WordPress site built for the Estée Lauder Companies’ Breast Cancer Awareness Campaign 2016.

Browser Based Voice Recognition With Pocketsphinx.js

My latest GreenZeta Original, HeyHilri! The World’s First Politically Inspired Digital Assistant, explores Javascript based voice recognition in the browser. When I started this project my first inclination was to use a web service. Finding a reliable service, that was affordable, was harder than I expected. Some searching led me to the project Pocketsphinx.js. Pocketsphinx... Read the full article

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.

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.

Converse Counter Climate Banners

HTML5 banner ads for Converse “Counter Climate” campaign.

Gazprom Presentation Builder

Web based CMS for multi-media presentations on iPad and AppleTV