React Animated Page Transitions
Just a small demo to show a few page transitions in React. Using GreenSock and SVG.
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
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/.
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
Animated Interfaces with Vue.js Workshop Materials
A curated list of awesome actions to use on GitHub
Writing the same simple animation in a loop in SMIL, Canvas, CSS, and Velocity for benchmarking purposes.
Showing Microsoft Cloud Developer Advocates speaking, 2017 and 2018
🧮Generate basic CSS Grid code to make dynamic layouts!
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.
My talk about the importance of animation in data visualizations
Design for Developers Workshop
🛍 A JAMstack Ecommerce Site built with Nuxt and Netlify Functions
An example Node webapp deployed with GitHub actions
🚨 Demo to improve an existing firefighter app by making it queue tasks offline
Frontend Masters- Advanced SVG Animation Course
A small, customizable youtube-like player for gsap timelines
Workshop Materials for my Introduction to Vue.js Workshop
Rewriting code from other languages or other technologies into Vanilla JS and SVG for fun and practice.
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: A VS Code dark theme for contrast for nighttime coding, 🦉LIGHT OWL: a daytime light theme
Small demo showing custom page animations with a fake typography site
Vue/Nuxt Page Transitions- Simple Demonstration
Travel App, Native-like Page Transitions
demo for perfmatters conf https://perfmattersconf.com/
Chrome extension: Minimal and friendly theme for productive twitter use
🎋A CLI tool to create an annotated tree visualization of any project
React A-Frame Demo 1
Serverless function that uses the stripe api for a checkout process in a Vue application
A sample shop that shows how to manage payments with Vue, Stripe, and Serverless Functions
This was the result of a live code talk at Smashing Conf in Toronto, this is how far I got in 45 minutes
a base of the smashing talk
Starter Materials for Advanced SVG Workshop
A biofeedback visualization made with Three.js, Vue, and LUIS (cognitive services), made with Brian Holt
Introduction to Transforms, with the use of a transition in a class applied to all examples
A visualization of relevant files for vue repo, along with notes
A food app using a few hooks in Vue to show how they can work (experimental)
An opinionated example of how to use SVG icons in a Vue.js application
Simplify and supercharging my workflow with snippets for Vue.js that help me spin things up quickly
The extensions I use when developing a Vue application with VS Code
These snippets were built to supercharge my workflow in the most seamless manner possible.
A small SVG animation illustrating a weather app notification in Vue
A very silly demo showing how to make a wine label making dashboard with Vue.js