Projects
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/.
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 |