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

animated guide vue3

✩ 141

array explorer · Site

✩ 2451

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

awesome actions

✩ 13566

A curated list of awesome actions to use on GitHub

Benchmarking Animations

✩ 6

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

building web apps with vue

✩ 221

building-web-app-with-vue

career ladders · Site

✩ 505

A sample of career ladders I use for my organization, open sourced for anyone.

cda locale · Site

✩ 101

Showing Microsoft Cloud Developer Advocates speaking, 2017 and 2018

contentful nuxt netlify · Site

✩ 41

Example setup for Contentful and Nuxt on Netlify

cssgridgenerator · Site

✩ 3716

🧮 Generate basic CSS Grid code to make dynamic layouts!

d3 example ignitetour

✩ 21

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

✩ 14

My talk about the importance of animation in data visualizations

design for developers · Site

✩ 607

Design for Developers Workshop

devex utm builder

✩ 7

docs extensionpack

✩ 53

A collection of extensions for writing, editing, and reviewing documentation in VS Code

easiest netlify lambda example

✩ 4

ecommerce netlify · Site

✩ 1217

🛍 A JAMstack Ecommerce Site built with Nuxt and Netlify Functions

example azure node

✩ 68

An example Node webapp deployed with GitHub actions

favegame · Site

✩ 41

Small starter example of Hasura, Nuxt, and Netlify for Jamstack/SSR rendering

firefighter demo · Site

✩ 66

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

fortnite vscode theme · Site

✩ 140

frontendmasters svganimation

✩ 193

Frontend Masters- Advanced SVG Animation Course

gsap player

✩ 92

A small, customizable youtube-like player for gsap timelines

headless wp nuxt2

✩ 31

hero generator · Site

✩ 567

🦸🏻‍♀️Hero Generator! Create a nice hero image for your site or app

inbedby7pm · Site

✩ 113

My other theme was for Night Owls like myself. This theme was requested for by the "In Bed by 7pm" crowd

intro to vue · Site

✩ 2558

Workshop Materials for my Introduction to Vue.js Workshop

is this a sandwich · Site

✩ 97

Is this a sandwich?

jamstack template

✩ 9

JAMstack Workshop

✩ 62

Workshop materials for JAMstack workshop using Vue and Netlify.

JS stroll

✩ 213

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

livecode svganimation

✩ 95

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.

netlify functions example

✩ 58

night owl vscode theme · Site

✩ 2256

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

object explorer · Site

✩ 1367

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

page transitions simple

✩ 156

Vue/Nuxt Page Transitions- Simple Demonstration

page transitions travelapp · Site

✩ 1608

Travel App, Native-like Page Transitions

perfmatters demo

✩ 11

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

productive twitter · Site

✩ 156

Chrome extension: Minimal and friendly theme for productive twitter use

project explorer · Site

✩ 486

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

react aframe demo1

✩ 16

React A-Frame Demo 1

sample stripe handler · Site

✩ 156

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

sample vue shop · Site

✩ 1180

See readme for newer repo details! A sample shop that shows how to manage payments with Vue, Stripe, and Serverless Functions

sdras

✩ 22

it me!

smashing · Site

✩ 68

This was the result of a live code talk at Smashing Conf in Toronto, this is how far I got in 45 minutes

smashing template

✩ 11

a base of the smashing talk

svg workshop · Site

✩ 656

Materials for SVG Essentials & Animation Course

three vue pattern · Site

✩ 96

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

Transform_intro

✩ 6

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

vue directory tree · Site

✩ 161

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

vue hooks foodapp · Site

✩ 181

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

vue sample svg icons · Site

✩ 426

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

vue sublime snippets

✩ 146

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

vue vscode extensionpack

✩ 269

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

vue vscode snippets · Site

✩ 1119

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

vue weather notifier

✩ 193

A small SVG animation illustrating a weather app notification in Vue

vue wine label

✩ 55

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