Projects

Follow me on  codepen  CodePen
or  github  GitHub if you want, I suppose.

CodePen

React Animated Page Transitions

Just a small demo to show a few page transitions in React. Using GreenSock and SVG.

Vue-controlled Wall-E

I found this dribbble shot of Wall-E that I loved, and wanted to see if I could manipulate him with Vue bindings. https://dribbble.com/shots/2758895-Wall-e Uses Vue, GreenSock, and SVG

Vue Time Comparison

Using the browser's native API for .toLocaleTimeString to get rid of libraries like moment.js for world time that respects daylight savings. Made with Vue, SVG, GreenSock, and 🤘🏼 The dial was built off of this dribbble shot with minor tweaks: https://dribbble.com/shots/2196737-Day-048-Speedometer and the graphic was a purchased game backround

JavaScript Array Explorer

When I was first learning array methods, I spent a lot of time digging through the docs to find the appropriate one, and I had to search one by one. I made this resource to help people find the correct array method a bit more naturally. You can narrow down what you want to do and explore until you find what's most useful to you. All of the code is MIT open source and hosted on github if you'd like to see how this is made: https://github.com/sdras/array-explorer/.

💥 Boom 💥

What I think about when I think about nuclear power races

Example Motion Design Docs

Showing how motion design documentation can communicate branding and a direction for cohesive animation on a site. Illustrations by Kristen Kong.

Dynamically Generated Alt Text

I kept hearing about machine learning being used for evil and wanted to use it for something good. Social media posts typically don't have a way to enter alt text and the only users I see that reliably remember to add descriptions to the post are accessibility experts or blind people. Hopefully this allows good alt text to be a bit more ubiquitous. You can find more information on how Azure's Computer Vision API works, as well as how to use it in your own projects here: https://aka.ms/Uzrshc

GitHub

animating vue workshop

✩ 145

Animated Interfaces with Vue.js Workshop Materials

array explorer · Site

✩ 1796

⚡️ A resource to help figure out what JavaScript array method would be best to use at any given time

awesome actions

✩ 3380

A curated list of awesome actions to use on GitHub

Benchmarking Animations

✩ 4

Writing the same simple animation in a loop in SMIL, Canvas, CSS, and Velocity for benchmarking purposes.

cda locale · Site

✩ 92

Showing Microsoft Cloud Developer Advocates speaking, 2017 and 2018

d3 example ignitetour

✩ 16

This repo serves as an example for Microsoft Ignite the Tour. In this session, we explore how to create basic charts and graphs using d3.

data in motion

✩ 9

My talk about the importance of animation in data visualizations

design for developers · Site

✩ 287

Design for Developers Workshop

example azure node

✩ 62

An example Node webapp deployed with GitHub actions

firefighter demo · Site

✩ 68

🚨 Demo to improve an existing firefighter app by making it queue tasks offline

frontendmasters svganimation

✩ 172

Frontend Masters- Advanced SVG Animation Course

gsap player

✩ 84

A small, customizable youtube-like player for gsap timelines

intro to vue

✩ 1735

Workshop Materials for my Introduction to Vue.js Workshop

JS stroll

✩ 204

Rewriting code from other languages or other technologies into Vanilla JS and SVG for fun and practice.

livecode svganimation

✩ 69

In my Smashing Toronto talk, I'll be live coding an SVG animation from start to finish. Here's the repo that houses the base materials, and any further references for things we don't have time to cover.

night owl vscode theme · Site

✩ 1301

🌌NIGHT OWL: A VS Code dark theme for contrast for nighttime coding, 🦉LIGHT OWL: a daytime light theme

nuxt type

✩ 525

Small demo showing custom page animations with a fake typography site

object explorer · Site

✩ 1169

🔥 A resource to help figure out what JavaScript object method would be best to use at any given time

page transitions simple

✩ 115

Vue/Nuxt Page Transitions- Simple Demonstration

page transitions travelapp · Site

✩ 1251

Travel App, Native-like Page Transitions

perfmatters demo

✩ 9

demo for perfmatters conf https://perfmattersconf.com/

project explorer · Site

✩ 444

🎋A CLI tool to create an annotated tree visualization of any project

react aframe demo1

✩ 14

React A-Frame Demo 1

sample stripe handler · Site

✩ 144

Serverless function that uses the stripe api for a checkout process in a Vue application

sample vue shop · Site

✩ 1018

A sample shop that shows how to manage payments with Vue, Stripe, and Serverless Functions

svg workshop

✩ 273

Starter Materials for Advanced SVG Workshop

three vue pattern · Site

✩ 77

A biofeedback visualization made with Three.js, Vue, and LUIS (cognitive services), made with Brian Holt

Transform_intro

✩ 2

Introduction to Transforms, with the use of a transition in a class applied to all examples

vue directory tree · Site

✩ 144

A visualization of relevant files for vue repo, along with notes

vue hooks foodapp · Site

✩ 157

A food app using a few hooks in Vue to show how they can work (experimental)

vue sample svg icons · Site

✩ 184

An opinionated example of how to use SVG icons in a Vue.js application

vue sublime snippets

✩ 135

Simplify and supercharging my workflow with snippets for Vue.js that help me spin things up quickly

vue vscode extensionpack

✩ 236

The extensions I use when developing a Vue application with VS Code

vue vscode snippets

✩ 755

These snippets were built to supercharge my workflow in the most seamless manner possible.

vue weather notifier

✩ 162

A small SVG animation illustrating a weather app notification in Vue

vue wine label

✩ 51

A very silly demo showing how to make a wine label making dashboard with Vue.js