Blog
Articles about web development, design, performance, and related topics. Subscribe via RSS to keep up with new articles, or browse by topic.
- 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.
- Use autocomplete=new-password for new password fields
Tell browsers that a password field is for choosing a new password rather than entering an existing one.
- Using CSS without getting in the way of accessibility
Practical CSS choices for readable text, visible focus, reduced motion, and layouts that survive zoom.
- Adding Outlook-only CSS to an HTML email
Load Outlook-specific email styles with Microsoft conditional comments.
- Embedding video with the HTML video element
Embed video with HTML, provide multiple sources, and add a subtitle track.
- Set up Rouge syntax highlighting in Jekyll
Enable Rouge syntax highlighting in Jekyll and connect its generated HTML to a compatible CSS theme.
- Checking editable text with HTML spellcheck
Use the HTML spellcheck attribute to request spelling and grammar checks in editable elements.