Webdev Resources
JavaScript
Splitting.js
JS library to iterate through every instance of class (or to break a single div into multiple divs) to be able to animate them individually. Useful for animating text char by char or delaying each item in a list.
Alpine.js
Simple interactivity directly in HTML
Manage HTML DOM with vanilla JavaScript - HTML DOM
Do you really need a framework library?
Vanilla JS Toolkit
A collection of tools and snippets for working with JavaScript.
Color Thief
A library to extract colors from an image.
CSS
Visual CSS Generator
Handy graphical generators for things like gradients and box shadows.
A thread of my favorite clever CSS tricks
A thread of by Steve8708 on Twitter, including some vertical and horizontal scroll effects.
Native Elements
CSS Superpowers for HMTL elements. Visual Great for quickly making a basic (usually single page) site.
Image Carousel in CSS
I found this on Twitter via @prathkum
Full bleed images in a blog layout
CSS Grid full-bleed layout tutorial via Josh W Comeau
CSS Shadow generator
CSS Shadow Palette Generator via Josh W Comeau
Highlight images without alt text
CSS to Highlight any image on your site that doesn’t have alt-text. Via @addyosmani on Twitter.
Aech
An opinionated CSS stylesheet that makes simple projects look good. Uses CSS variables for customisation! By Kabir Goel
Ambilight effect for the Web with CSS)
Some wild svg filter effects I didn’t even know were possible before.