Categories
Programming

CSS Clamp: The Goldilocks of CSS Math Functions

There is a problem I have wrestled with a couple of times, which was frustrating to solve… but can now be easily solved using clamp, which is currently in an Editors Draft of the CSS Values and Units Module Level 4 specification. It is sat alongside similar mathmatical CSS nuggets, such as min and max […]

Categories
Programming

HTML Challenge: Toggle Switch vs Checkbox

The toggle switch has very suddenly become a ubiquitous feature of web user interfaces. You can’t hardly fill in an HTML form these days without finding one; especially as 99% of forms we now fill in are concerned with “cookie consent”. Why isn’t the toggle switch a first-class citizen of HTML, you may ask… to […]

Categories
Programming

Fixing CSS object-fit for Internet Explorer

A common problem with images, especially if they are user-generated, is that they don’t have the correct aspect ratio for their intended purpose. Also, as we re-flow pages for many different devices, we often want the image to work with different aspect ratios. This is where the CSS object-fit property comes in very useful. There […]

Categories
Programming

HTML Loading Attribute for Lazy Loading Images and Iframes

If you have been writing websites or web apps for any length of time, you will almost certainly have implemented some form of lazy-loading using JavaScript. I recently worked on a web app that implemented a search that benefitted to the tune of half-a-gig by deferring the loading of images until those images were actually […]

Categories
Programming

If HTML5 was Invented in 2018

When HTML5 was created, the new elements came from a study of class names from millions of websites. If HTML5 was conceived today, the new elements would probably have been called “container” and “col-md-6”.

Categories
Visual Studio

Visual Studio Code Extension: Preview on Web Server

This is just a nod to the handy little Visual Studio Code Extension: Preview on Web Server. Now you can configure a task, or run a command, or set up a local web server yourself… but why not just install this extension and then just hit CTRL + SHIFT + L to load the web […]

Categories
Programming

The CSS Sibling Selector

There is often a bit of confusion surrounding the CSS sibling selector, or ~ as it is known to its friends. Here is how it works. This CSS translated into English says: If there are is a paragraph next to another paragraph inside a division, make the text red Here is an example HTML snippet […]

Categories
Programming

Cross Domain Iframe Resizing

If you have ever integrated third party components on your website, you will have found a dazzling variety of integration methods, from JavaScript snippets, to iframes, to server-side APIs. Many of the integrations seek to inject content onto your page, but I sincerely advise against this. You don’t need to spend long reading the OWASP […]

Categories
Programming

HTML and CSS Full Screen Layout Without Fuss

This is a quick guide to the modern method of getting a 100% high chunk of content without a lot of fuss. This technique also works for creating a 100% chunk of content, with more content being appended after the fold. We’ll use this dummy HTML for the purposes of the example – it works […]

Categories
Programming

Website Go Faster Stripes

My early spring-clean has been going on for a while. I have been gradually deleting things to make the site go faster. As usual, if you don’t keep a close watch on things they start to bloat. My site had reached a whopping 400kb for an empty-cache first-load and spanned far too many network requests […]