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 |