Portfolio & Blog - Dermot Hughes

Using @starting-style for Animations on First Render

Anyone who's ever tried to animate an element that fades or slides into view the moment it appears has realised it's not as easy as you think it should be. The good news: the CSS spec folks felt our pain and introduced the new @starting-style at-rule.

Why Snapshot Testing Sucks: Or, How I Learned to Stop Updating Snapshots and Write Better Tests

A pull request lands in your codebase, and the CI pipeline fails. A snapshot test broke. You open the diff and see ...a handful of seemingly random, tiny changes. You shrug, update the snapshots, and move on. This sucks.

Unlocking the Power of Compound Components in React

One of the patterns that can significantly improve our codebase is the Compound Component pattern. Today, we're diving deep into how this pattern works, the problems it solves, and some advanced techniques.

JavaScript Array Methods Cheatsheet

A simple cheatsheet for all the JavaScript Array Methods

Passing at least one optional prop with TypeScript

Setting if a prop is optional or not in TypeScript is really simple. But what if you have several optional props, you don't care which one is passed, but one of them has to? That's where Generics can save the day.

Frontier Bus Hire

The aim of this project was to replace an expensive, ancient Yell website with a light, fast, and optimised site. The new site was built using Gatsby, taking advantage of Netlify CMS to fulfil a client request to have an easy way to add new content such as fleet photos.

WTF are Design Tokens? | Belfast JS

I recently did a talk at Belfast JS on an introduction to Design Tokens. You can check out the recording here.

A neat dynamic glow effect for images

This will be a quick one. I've wondered for a while how Spotify do their dynamic colours from an album cover, so went down a rabbit hole. While I might look into a more accurate way , I discovered a neat trick for getting that dynamic glow effect on an image.

Is the title Front End Developer obsolete?

There has been an increasing issue where "Front End" just means anything to do with the browser or web. The shear amount of knowledge a Front End Developer apparently needed to know is so vast as to be impossible.

How to generate a PDF from a webpage with Node

How I generate a printable PDF version of my CV automatically every time I update it, using Node and a headless Chrome.

Royal Bank of Scotland & NatWest

As part of a rebranding update, Royal Bank of Scotland and NatWest required an update to their MyRewards loyalty scheme website. The brief required updating the styles of the site to a fresher and cleaner theme but without changing the core legacy code.

Reward

During my time at Reward, one of my projects was building a new website for the company. Although most of my work there was on internal apps based on Angular, this brief called for a public facing website that could be edited by the marketing team without need of the development team to intervene.