Snippets
A running list of things worth remembering.
- 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.