#StandWithUkraine
MISHA.WTF

Video Tutorials

Here you will find some of my coding tutorials.

Most of these are things I've had to learn at some point, and wanted to share with others while it was fresh in my mind.

··············
W3C Design Tokens in CSS using Style Dictionary
19:50
Design TokensDesign SystemsStyle Dictionary

Learn how to turn your Design Tokens from W3C format into CSS using Style Dictionary.

Build a Figma plugin using Vite and Preact
17:49
FigmaVitePreact

Learn how to build a sample Figma plugin using Vite Preact template.

Recreating code editor from Chakra UI docs using React Live and TailwindCSS
43:18
Chakra UIReact LiveTailwindCSS

Recreate the live code editor from Chakra UI, built using React Live and TailwindCSS.

ESLint + Prettier shared config for Next.js
20:07
ESLintPrettierNext.js

Learn how to create and publish a custom ESLint and Prettier shared config, for use in Next.js projects!

HeadlessUI Slideover
12:01
Headless UITailwind UITailwindCSS

In this video we look at how to update the existing implementation of the Tailwind UI Slide Over component that I showed in an earlier video, with the ready-made React component that is now available out of the box from Tailwind UI.

Icon Library with SVGR and Rollup
21:23
RollupSVGRLibraries

Learn how to build your own SVG icon component library for React! In this video, we use SVGR and Rollup to make a publishable NPM package, with components generated directly from your SVG files.

Accessible SlideOver with Tailwind UI and React-Aria
53:36
React AriaTailwind UIAccessibilitya11y

In this video I show you everything you need to build the "Slide Over" from Tailwind UI as a fully accessible React component, using Tailwind CSS, React-Aria and Framer Motion.

00000
Go Home