Christian Oliff

Using icon fonts in HTML markup is still very popular, despite their many drawbacks.

As an iPad Pro owning front-end developer, I’ve often been a bit frustrated at the lack of developer tools for testing and debugging websites on the go.

When working on Bootstrap projects I often find myself wanting to quickly see the current CSS breakpoint.

Continuing my series of posts on building Bootstrap components using just CSS and native HTML elements, this post demonstrates how to create a Bootstrap modal dialog using the <dialog> HTML element.

I used to regularly use a simple browser extension that showed image size information, you just right-clicked on any image and it would display a simple dialog with the image dimensions, file size, and full URL.

A few years ago I wrote a short post about building a Bootstrap accordion using the <details> and <summary> HTML tags.

If you have a multi-page site and want to improve performance when navigating between pages, I recommend using speculation rules to prefetch and render pages on hovering over a link.

The Safari browser has come a long way in recent years, but there are still a few CSS/HTML features that I’d like to see added that would make it even better for web developers and users alike.

When working on building websites with Bootstrap I often find myself copying and re-using a bunch of useful little JavaScript snippets to enhance functionality and I thought I’d make a quick blog post to share a few of my most used ones.

Apple’s iOS, iPadOS and macOS all feature an accessibility option to add labels to switches.

Safari introduced a native HTML switch element in version 17.4 which is easy to use just by adding the switch attribute to a checkbox input.

Windows has supported High Contrast Themes in Windows since Windows 10.

Following on from building a Bootstrap accordion using the details HTML tag, I thought I’d try to build a Bootstrap dropdown using the same details HTML tag.

Migrating a website project from Bootstrap 4 to Bootstrap 5 involves renaming a lot of classes which can be a tedious task.

Hugos’s Markdown Render Hooks allow custom templates to override Markdown rendering functionality.

Last year I published the official HTMLHint extension for VS Code after Microsoft deprecated their version.

I recently spent a while looking for a CSS inspector JavaScript library that would function in a way similar to DevTools elements inspector that would show the CSS rules applied to a component.

I recently had to build an accordion for a small single-page project.

PurgeCSS is a great tool which can dramatically reduce the amount of compiled CSS deployed to your site by removing any classes that are not being used in your HTML markup - leaving only the CSS which is used.

With WWDC 2022 now just a couple of weeks away here is my Web Developers wish list for Safari on iOS 16.

GitHub Actions provide a great way to automate all parts of your development workflow.

The Freshdesk Messaging chat widget loads 1.1 MB (gzipped) of JavaScript and assets on page load increasing the time for the page to complete loading by 5 seconds.

Just a quick post as a few people have asked me about this.

Bootstrap 5 no longer includes custom CSS to enhance the layout when printing (to paper or as a PDF).

It’s easy enough to just copy and paste the JavaScript ‘share this page’ widgets from Facebook, Twitter, LinkedIn etc, but these load their own JavaScript which comes with a performance and they also add their own tracking scripts to your site.