Blog
Articles about web development, design, performance, and related topics. Subscribe via RSS to keep up with new articles, or browse by topic.
- Dark mode for SVG favicon
Use CSS inside an SVG favicon to give it separate colours for light and dark mode.
- Showing task progress with HTML progress
Use the native progress element for task completion, and style its browser-specific inner parts when needed.
- RSS feeds for GitHub releases, tags, and activity
Follow repository releases, commits, tags, and user activity with GitHub's built-in Atom feeds.
- A one-line CSS layout debugger
Outline every element on a page in a different colour with one line in Chrome DevTools.
- Use an emoji as a favicon
Put an emoji in a small inline SVG and use it as a favicon without creating a separate image file.
- Facebook advertising trends that mattered in 2020
A 2020 snapshot of the Facebook ad formats, placements, and campaign settings advertisers were paying attention to.
- How the SameSite cookie attribute works
How the SameSite cookie attribute controls cross-site requests, including the difference between Strict, Lax, and None.
- Git cheat sheet for beginners
The small set of Git commands I would learn first, from creating a repository to working with branches and remote changes.
- The web development tools that earn their place
A practical look at version control, build tools, editors, testing, and the other tools that support a web project.
- Styling the hr element with CSS
Style the HTML hr element with a gradient, dashed line, or decorative glyph.
- What to try when Photoshop feels slow
Practical settings and workflow changes that can make a slow Photoshop installation more responsive.
- Technical SEO tools worth keeping around
Useful technical SEO tools for redirects, hreflang, structured data, crawling, validation, and page performance.
- Social media image sizes for 2020
A 2020 reference for profile, cover, post, story, and advertising image sizes across major social networks.
- Replace a Dropbox file without changing its shared link
Replace a shared Dropbox file while keeping its existing link working.
- Respecting prefers-reduced-motion with animated GIFs
Serve a still image instead of an animated GIF when a user prefers reduced motion.
- Semantic HTML and SEO
Use semantic HTML to describe page structure clearly for browsers, search engines, and assistive technology.
- Adding dark mode with prefers-color-scheme
Add a dark colour scheme that follows the visitor's system preference, using CSS and custom properties.
- Give every meaningful iframe a useful title
Give embedded iframes a useful title so screen-reader users know what each frame contains.
- Getting a free SSL certificate with Cloudflare
Put a website behind HTTPS with Cloudflare's free Universal SSL certificate.
- Creating a page for each tag in Jekyll
Generate a page for every Jekyll tag and link those pages from each post.