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.
- IIFE - A way to keep all of your variables and functions scoped to avoid conflicts.
- Revealing Module Pattern - Allows you to keep most of your variables and functions out of the global scope, but make some of them publicly available.
- Constructor Pattern - Create multiple instances of script that share methods but contain unique information.
- Class Pattern - An alternative approach to implementing the constructor pattern, with a nicer syntax and some additional features.
- Service Worker - Middleware that lets you intercept requests and responses to your site, cache assets, provide offline experiences, and more.
- Web Component - A way to define reusable custom HTML elements, with built-in styles and interactivity.
- JavaScript Testing Suite - A starting setup for running linting, unit tests, and end-to-end tests on your JavaScript.
- Cloudflare Worker Function - A boilerplate for creating serverless functions with Cloudflare Workers.
Web Components
Progressively enhance native HTML with custom elements.
Helper Functions
Make complicated or repetitive tasks a bit easier, and keep your code DRY.
- arrayIntersect.js - Get the intersecting values between two arrays.
- buildQuery.js - Build a query string from an object of data.
- cleanHTML.js - Sanitize an HTML string to reduce the risk of XSS attacks.
- decodeHTML.js - Decode HTML entities from an encoded string.
- dedupe.js - Remove duplicate items from an array.
- deepMerge.js - Deeply merge two or more objects or arrays.
- emit.js - Emit a custom event.
- encodeHTML.js - Encode the HTML in a user-submitted string to reduce the risk of XSS attacks.
- getCookie.js - Get the value of a cookie.
- getFlagEmoji.js - Get a country’s flag emoji from its two-letter country code.
- getParam.js - Get the value of a query string from a URL.
- getParams.js - Get all URL parameters from a query string.
- getType.js - More accurately check the type of a JavaScript object.
- parseJWT.js - Decode the payload from a JSON Web Token (JWT).
- randomNumber.js - Get a random integer with a minimum and maximum value.
- randomString.js - Generate, hash, and encode cryptographically random strings.
- range.js - Create a range of numbers between two values.
- serialize.js - Serialize all form data into an object.
- shuffle.js - Randomly shuffle an array.
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.