Snippets

A collection of boilerplates, web components, and helper functions that you can copy/paste to make building for the web a bit faster.

My guides, code snippets, and more are free and open to everyone thanks to the generous support of my Go Make Things members.

Boilerplates

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

Class Pattern - Create multiple instances of a script that share methods but contain unique information.
Cloudflare Worker Function - A boilerplate for creating serverless functions with Cloudflare Workers.
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.
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.

Progressively enhance native HTML with custom elements.

<accordion-group> - Create progressively enhanced accordion groups.
<ajax-form> - Add Ajax capabilities to form elements.
<ajax-html> - Asynchronously update server-rendered HTML in response to events.
<code-sandbox> - Create a live code sandbox on any website.
<details-expand> - Expand and collapse all of the <details> elements on a page.
<flag-emoji> - Render a country’s flag emoji from its two-letter country code.
<modal-toggle> + <modal-content> - Wrapper components that make working with the <dialog> element a bit easier.
<responsive-table> - Create a responsive table on smaller viewports.
<show-hide> - Create a progressively enhanced disclosure component.
<simple-toc> - Create a basic table of contents from the page headings.
<table-of-contents> - Create a multi-level table of contents from the page headings.
<toggle-password> - Toggle password visibility with a checkbox or button.
<toggle-tabs> - Create accessible toggle tab components.

CSS components and utility classes.

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.
getDateInCurrentUsersTimezone.js - Convert a date string from the timezone it was saved in to the current user’s timezone.
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.
logNodeTreeTypes.js - Recursively check the node type of every node in a tree.
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.