How to get icons in React
Here’s a quick review of the different ways to get icons into your React projects.
Blog
If I’ve done this right, you might not need a freelancer!
I’ve written some articles – mostly on techy stuff – which I hope help you learn something new or solve some pre-existing problems you’re having.
Tags
Date
How to import two classes with the same name in JavaScript ES6 and React
Sometimes your imports will have the same name – but you can’t use the same name twice – here’s how to fix it.
Subsetting a font file with glyphhanger
Here’s how you can subset your font files with glyphhanger.
Aspect ratio boxes
Here’s a quick one on creating aspect ratio boxes – whether or not you know the exact width/height.
Centring with absolute positioning in TailwindCSS
Here’s a quick one on how to centre an absolute positioned element with TailwindCSS.
Adding Google Analytics to Next.js – with pages and screens
Here’s how to make sure your pages and screens track in Google Analytics with Next.js.
Convert days to weeks and days
Here’s a quick mathematical one on dividing a number of days into weeks and days.
Force links to download in HTML
An easy HTML only method of forcing a link to download a file instead of showing it in the browser.
How to use functions in PHP
A short post on how to write your own custom PHP functions.
PHP loops
The different types of loops available in PHP and how to use them.
PHP operators
A list of PHP operators and what they do.
Adding Google Analytics to Next.js
Here’s a quick one on how to add the Google Analytics tracking code to a website in Next.js.
CSS Flexbox explained
Here’s an explainer on CSS Flexbox, the CSS 3 web layout model which helps you create better layouts.
Generating and inlining critical CSS in Next.js
Inlining your critical CSS can lead to big performance gains and faster loading websites.
Using JSON in PHP
A quick one on using JavaScript Object Notation (JSON) in PHP.
macOS Ventura now supports AVIF: is it time to make the switch?
Now that macOS and iOS both support AVIF via Safari, is now the time to start using the format on your website?
Improving accessibiity: fixing colour contrast ratios
Learn how to check whether all elements on your webpages have sufficient colour contrast between the background and foreground colours.
Generate random IDs with React
There’s not much more to say – here’s how you generate a random ID string to use in your React elements.
Limit file upload input to specific types
Specify the file types a user is allowed to select from a file upload HTML input element.
Responsive images with srcset
Learn how to serve responsive images with `srcset` and `sizes`.
Favicon dark mode
Use CSS media queries within an SVG favicon to offer light and dark versions.
Subsetting fonts without any specialist software
Here’s a method of subsetting Google Fonts in the browser without the need for any specialist software or coding.
Preload responsive and retina images
Here’s how to preload responsive and retina images properly, only preloading the image actually shown to the user.
Render a React component as any HTML element
Sometimes you’ll want to render a React element as a different HTML element in different places, here’s how.
Serving retina images
Here’s how to serve retina images for pixel-dense screens and prevent fuzzy images.
Adding days to a date in JavaScript
Here’s another quick and easy one on how to add days to a JavaScript date object.
Adding leading zeros in JavaScript
Here’s a very quick and easy one on how to pad integers with leading zeroes using the built in JavaScript math library.