Skip to main content Accessibility Feedback

Web Dev Toolkit

A collection of boilerplates, helper functions, and libraries you can copy/paste to make building a simpler, more resilient web a bit easier.

Boilerplates

A collection of templates to help you kick-start your next JavaScript project.

Web Components

Progressively enhance native HTML with custom elements.

Helper Functions

Make complicated or repetitive tasks a bit easier, and keep your code DRY.

Libraries

Hand-selected libraries that I would actually use or have used on a project.

DOM Manipulation
  • Reef. A simple, lightweight alternative to React, Vue, and other bloated frameworks.
  • Drab. A collection of HTML Web Components.
  • Sortable Tables. A tutorial on accessible sortable table columns.
  • PhotoSwipe. An amazing photo gallery plugin.
  • Swiper. Rich touch-supported sliders.
  • Bouncer. A lightweight form validation script that augments native HTML5 form validation elements and attributes.
  • Gumshoe. A framework agnostic scrollspy script.
  • Vanilla FitText.js. Create scalable headlines that fill the width of a parent element.
Scroll & Animations
Utility Libraries
  • DOMPurify. An HTML cross-site scripting sanitizer.
  • Dinero.js. A library for working with monetary values in JavaScript.
  • date-fns A small, tree-shakeable library for working with dates. Parse, validate, manipulate, and display dates and times in JavaScript.
CSS
Images
  • ImageOptim. Optimize image files. They have a native macOS app and web-based GUI tools.
  • SVGOMG. A web-based SVGO app for optimizing SVG files.
  • SVG to CSS Converter. Convert SVG files to CSS background images.
Tooling
  • Build Tool Boilerplate. A simple boilerplate for using NPM tasks to build and compile JavaScript, CSS, and image files.
  • CodeKit. A GUI-based build tool for macOS.
  • Prepros. A cross-platform GUI-based build tool for macOS, Windows, and Linux.
  • Jest. A JavaScript testing library with pretty good vanilla JS support.
  • Playwright. An end-to-end testing library built on top of Jest.
  • BrowserStack. Cross-browser testing on real, cloud-based browsers and devices.
  • WebPageTest. A web performance testing app.