Snippets & Tools
Things I've built, saved, or just keep coming back to.
- Shape button corners with a squircleCSS
Use corner-shape to give buttons fuller corners, with a rounded fallback.
- Stagger a list entrance with vanilla CSSCSSAnimation
Fade and slide list items into view, with a 0.05-second stagger.
- Clip-path view transitions for themingCSSAnimation
Reveal a theme swap with a clip-path wipe using the View Transitions API.
- Format a relative time stringTypeScriptUtility
Turn a date into "3 hours ago" style text using Intl.RelativeTimeFormat.
- Josh's CSS resetCSS
A modern and opinionated CSS reset config.
- Detect a mobile deviceJavaScriptUtility
Check the user-agent string to see if a visitor is on a phone or tablet.
- Get URL parametersJavaScriptUtility
Parse query parameters from the address bar into a plain JavaScript object.
- Count lines of code with GitCLIUtility
Get the line count of tracked files in a Git repository using the CLI.
- Detect a card network from its numberTypeScriptUtility
Match common card number formats with a small TypeScript rule table.
- Set opacity with hex colorsCSSUtility
Add transparency to a color with an eight-digit hex value.
- Debounce a search inputReactTypeScriptHooks
Delay firing a search callback until typing pauses, with a cancel on unmount.
- Handle fetch errors correctlyJavaScriptFetch
Throw on unsuccessful HTTP responses and keep the useful server message.
- Build an accessible icon buttonHTMLCSSAccessibility
Give icon-only controls a name, a safe button type, and a visible focus state.
- 7 Lines of CSS to Improve UXCSS
Just a few simple CSS rules can make your text much easier to read.
Link preview
SEOPaste a URL to see its Open Graph image, favicon, and the meta tags search engines and social apps read.
Spotify artwork
MiscGet full-resolution cover art from a Spotify song, album, playlist, artist, or podcast link.
QR code
UtilityMake a QR code for a link, text, email, phone number, Wi-Fi network, or map location, then download it as a PNG or SVG.
Zero-width space
UnicodeCopy U+200B, a character with no width. Use it where a field won't accept a blank value, or to let a long string wrap.
JWT secret
UtilityGenerate a random secret for signing HS256, HS384, or HS512 tokens. It's created in your browser and never sent anywhere.
0000000000000000000000000000000000000000000000000000000000000000CSS reset
CSSJosh Comeau's modern CSS reset, ready to paste into a new project. See the code.