Recent content on Christian Oliff
Using icon fonts in HTML markup is still very popular, despite their many drawbacks. Using them means even if you only use a single icon, you still need to load the font file and the CSS for that entire icon set which can be a (relatively) significant performance overhead. Many sites are loading icon fonts from third-party CDNs too which can be blocked by users content blockers. In fact, CSS…
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. So I created Web DevTools+, a free Safari extension for iOS and iPadOS. Features Elements inspector with ability to edit, automatically highlights currently selected section and syntax-highlighted code. CSS Quick tools and CSS overview…
When working on Bootstrap projects I often find myself wanting to quickly see the current CSS breakpoint. I created a simple CSS snippet that shows the current Bootstrap CSS breakpoint in the browser’s viewport. It appears at all times in the bottom left corner of the viewport and as it’s small, partially transparent and blurred it doesn’t distract from the main content. Copy…
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. The <dialog> element has been supported by all major browsers for a while now and can be used with Invoker Commands and is a great way to create a modal dialog without the need of JavaScript. You can…
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. It was useful for web development and design work, for example to know if an image was being scaled or if the file-size was too large. Unfortunately, the extension was removed from the…
A few years ago I wrote a short post about building a Bootstrap accordion using the <details> and <summary> HTML tags. The idea was to create a collapsible accordion without needing any JavaScript, relying solely on CSS for styling and the native functionality of the <details> element. At the time it wasn’t possible to animate the opening and closing of the accordion (with CSS), but thanks…
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. This can substantially reduce load times and improve the user experience. I’ve added it to this site and switching between pages is now even faster. Here’s how you can implement it - just stick this script…
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. I’ve previously shared my wishlists for Safari in Summer 2020 , and again in Summer 2022 , and I’m happy to look back and see that many of my wishes have since been added to Safari. Now…
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. They are all for Bootstrap 5, but could easily be adapted for earlier versions. Open Modal via URL Fragment It can sometimes be useful to have a shareable…
Apple’s iOS, iPadOS and macOS all feature an accessibility option to add labels to switches. This can be helpful for users who may not be able to distinguish between the on and off states of a switch via color alone. It’s easy to add this feature to Bootstrap switches using a little CSS. Here’s how you can do it. Copy . form-switch . form-check-input :: after { font-size : 0.5…
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. This is a great feature that allows developers to create a switch without the need for JavaScript or CSS and I hope that other browsers adopt this too. For now you can use a native switch in Safari with fallback styling for other browsers using Bootstrap. CSS…
Windows has supported High Contrast Themes in Windows since Windows 10. These customizable themes can be useful for users with visual impairments or for users who prefer high contrast colors. When a Contrast theme is activated is enables the forced-colors media query in browsers (at the time of writing, Edge, Chrome and Firefox). Unfortunately, forced colors mode can cause issues with websites…
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. Open dropdown Action Another action Something else here HTML Copy < details class = 'dropdown mb-5' > < summary class = 'btn btn-primary dropdown-toggle' > Open dropdown </ summary > < div > < ul class = 'dropdown-menu' style =…
Migrating a website project from Bootstrap 4 to Bootstrap 5 involves renaming a lot of classes which can be a tedious task. To help with this, I created a command-line tool that will do all the renaming for you across all pages in your project. It’s a comprehensive script which not only renames all the relevant classes, but also updates any deprecated elements and attributes to relevant…
Hugos’s Markdown Render Hooks allow custom templates to override Markdown rendering functionality. Render hooks are easy to setup and use and can make your site more useful and allow your Markdown content files to be simpler by passing on functionality to the render hooks rather than relying on custom code in your Markdown files. The hook kinds currently supported are: heading image link…
Last year I published the official HTMLHint extension for VS Code after Microsoft deprecated their version. Thanks to the fine folks over at Microsoft in assisting with the migration to the HTMLHint org on GitHub! I’ve since made several updates to the extension, including optimizations and fixes. The extension is now up to date with the latest HTMLHint version and it’s now possible to…
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 couldn’t find one that worked the way I wanted, so I decided to build one myself. I wanted to make it so it’d be easy to use, look nice and be customizable with the ability to turn certain CSS…
I recently had to build an accordion for a small single-page project. As I was using Bootstrap 5 for the CSS I wanted to see if I could apply the accordion styling to the <details> HTML5 tag without needing to use Bootstrap JavaScript. Here’s the solution I came up with. Accordion Title 1 Last Friday night, yeah I think we broke the law, always say we're gonna stop. And on my 18th Birthday…
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. This will decrease the file-size of the compiled CSS and in turn, improve page load speeds. There are a few different ways of integrating PurgeCSS into your Hugo build process. You could use…
With WWDC 2022 now just a couple of weeks away here is my Web Developers wish list for Safari on iOS 16. Native iframe Lazy Loading Native lazy loading of iframes with loading='lazy' has shipped in Chrome and Edge already. This feature is available in Safari via Advanced Settings > Experimental Features so hopefully we’ll see this enabled by default in iOS 16. I’d find it useful to…
GitHub Actions provide a great way to automate all parts of your development workflow. I often use the same workflows between open-source projects I work on. I’ve added the workflow configs below so feel free to copy and paste them to your projects. CodeQL CodeQL is GitHub’s code security checking engine and this action runs a repository’s source code to find security…
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. Typically only a small percentage of users will interact with the chat widget meaning that most users have needlessly downloaded a lot of data. It’d be better if the code for the widget loaded when hovered over instead. "A facade…
Just a quick post as a few people have asked me about this. I switched from using Google AdSense Ads to Carbon Ads on this site last year. I noticed that although traffic to this site has remained quite constant, the monthly revenue generated from Carbon Ads were slightly lower than Google Ads. Overall though, I’d still recommend Carbon Ads for web developer-focused sites. You have more…
Bootstrap 5 no longer includes custom CSS to enhance the layout when printing (to paper or as a PDF). I’ve bundled up the Print styles from Bootstrap 4 and published them to npm for easy use within projects. Note: This should improve the experience when printing, but there are bugs and inconsistencies with the way that browsers handle printing so testing is recommended. Quick Start Download…
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. They also have different styling and sizes which can give a messy, cluttered look to the page. Instead, you can build-your-own…