Blog
Articles about web development, design, performance, and related topics. Subscribe via RSS to keep up with new articles, or browse by topic.
- 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.
- A practical SEO setup for a Jekyll site
Add reliable metadata, a sitemap, and robots.txt to a Jekyll site with two small plugins.
- Keeping scripts out of local Jekyll builds
Use Jekyll environments to include production-only scripts and other environment-specific markup.
- Chrome extensions for accessibility testing
A practical set of Chrome extensions for checking page structure, alternative text, colour vision, and WCAG issues.
- Which font files do you need for a website?
The practical differences between TTF, OTF, EOT, SVG fonts, WOFF, and WOFF2—and which format to use on the web.
- Selecting empty elements with CSS :empty
Use the CSS :empty selector to find elements with no child elements or text.
- Adding Staticman comments to a Jekyll site
Add moderated comments to a Jekyll site by storing Staticman submissions in the site's Git repository.
- Google Analytics alternatives
Compare Google Analytics alternatives for product analytics, self-hosting, real-time traffic, and behaviour reports.
- Changing the text cursor with CSS caret-color
Change the colour of the text insertion cursor with the CSS caret-color property.
- Making a device vibrate from a web page
Trigger a short vibration or vibration pattern from JavaScript with the Vibration API.
- Adding HTTP response headers to a Netlify site
Configure security and caching response headers for a static site hosted on Netlify.
- CSS variables make repeated values easier to manage
Reuse values, provide fallbacks, and update themes with CSS custom properties.
- Using the HTML autofocus attribute
Use the HTML autofocus attribute to focus a form control when a page loads.
- text-decoration is a useful CSS shorthand
Set a text decoration's line, style, and colour with one CSS declaration.
- Centering flexbox items
Center flexbox items horizontally, vertically, or in both directions with two CSS properties.