Dog with Sunglasses

About
Projects

Frontend

Components, styles, web frameworks, and more

Resources

Mobile UI Design Components

A collection of web components for mobile oriented design systems

web.dev

Building a better web, together Guidance to build modern web experiences that work on any browser.

Shader Gradient

Create animated shader gradients

Threlte: Three.js + Svelte

Threlte lets you use every feature of Three.js in a declarative way. Compose your scene with Threlte's render components and let Threlte handle the rest.

Shadcn/ui Color Generator

Generate configuration files for shadcn/ui

UI Components Handbook

The definitive guide to standardize the design/code of the UI Components based on the 39 most popular Reference Systems.

Shadcn Landing Pages

Build your React landing page effortlessly with the required sections to your project.

Delicious Donut Components

Learn about React Server Component patterns to that allow you to use Server Components inside of Client Components.

Icon Buddy

Huge collection of SVG icons

Text Reveal Scroll Driven Animations

Use CSS to show text highlighting and animations on vertical scroll

Invisible Details of Interaction Design

A thorough and thoughtful piece on how good design feels natural and why the underlying physical metaphors are important.

Design Systems Surf

Browse different design systems

React Server Components Lessons Learned

Learn how and why the the Mux team transitioned to using React Server Components

Component Driven User Interfaces

The development and design practice of building user interfaces with modular components. UIs are built from the “bottom up” starting with basic components then progressively combined to assemble screens.

Easy Frontend

Great visual tool to give you a starting point for your Tailwind or Bootstrap based components

React Libraries

A comprehensive, opinionated list of React Libraries, broken down by domain and function.

Omatsuri

A frontend swiss army knife: - convert svg → jsx and back - compress svg - generate fake json - keyboard event codes - generate colour shades & gradients - + more

Animations on the Web

Learn how to craft animations that make people feel something. It's for those that like my style of animations and/or anyone aspiring to improve their skills. This course contains everything I know about motion on the web.

Sticky Scroll Slide in a Container

A demo on how to use containers to make your sticky elements work more naturally.

React Marquee Component

A nice Marquee Component that can be copy pasted in a la shadcn/ui

Adapting Typography to User Preferences with CSS

A method to adapt a font to your users' preferences, so they're maximally comfortable reading your content.

Frontend at Scale

Articles, talks, and case studies about working on large scale frontend applications

Learn Testing

A comprehensive guide to getting started with testing your web apps

Patterns.dev

Patterns.dev is a free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.

Aceternity Ui

Copy paste components with lots of nice visual effects

Level Up Your CSS Skills with the :has Selector

In depth guide on the :has selector

View Transition Drag and Drop

Codepen demo of View Transition API used for a drag and drop with no JS needed

Smashing Magazine

Smashing Magazine delivers reliable, useful, but most importantly practical articles to web designers and developers.

Tab Controls with CSS :has

You can create these tab controls with CSS :has() + radio buttons

Color Designer

A collection of tools to help you design your color palettes

Ray.so - Code Images

A simple tool to create beautiful images for your code

Checklist Design

A collection of the best design practices in convenient checklists to use as you build.

Github profile for David Witt Linked profile for David Witt Twitter profile for David Witt

Home About Articles Library Projects Resources Notes Colophon Tags