I’ve been really interested lately in engaging gradient backgrounds. Most websites selling products are relatively static, and bringing something living can help improve conversions. Recently I was trying to create a compelling gradient effect as a background to a project website I am working on. The effect I was after should be a) simple, b) random and c) subtle. The final results can be found here.

A single frame from the gradient animation

So I started out, like anyone would with a basic CSS gradient. The CSS gradient used to be pretty new technology, but now is broadly supported by the major browsers, but it’s always…


It’s often useful to get a list of the most popular pages on your website or app, either to feed into analytics, or to build UI elements which show users what your most popular content is. In times gone by, a hit counter might be used to track your most popular pages.

However, in the modern world, it’s much easier to use the Google Analytics API. Since Google has recently updated Analytics to ‘Google Analytics 4’, and also changed the Javascript API, I thought I’d write a guide on how I’ve done this on my website, Fjolt. …


CSS does a lot with its selectors, but there’s still a lot more it could do to make things easier for developers. In this guide we’ll be looking at some of the main developments coming from the CSS Selectors Specification 4, and how it might make your development life easier.

These are, for the most part, not currently supported by browsers!. For a more comprehensive view of current selectors, read A complete guide to get you started with CSS Selectors.

:has

Parent Selection. We all want it, and :has tries to solve it. Not supported by any browsers currently mostly due…


I recently started a new blog with NodeJS where I was quickly faced with the conundrum of how to notify users when a new article is published. Most importantly, I wanted to do all of this without depending on a third party service. I thought this would be a great opportunity to use web notifications.

Native browser notifications only really work when a user has the website open. I wanted all users to get a notification from the server when something new happened, whether the website was open or not.

But if the user has the page closed, how can…


WebP is a web format that seems to pop up every now and then when browsing the net. In the past, I have written it off as a niche file format that won’t give me any real benefits. I wrote it off, that is, until I started using it. WebP is perhaps one of the most innovative file formats for the web, but its uptake has remained low relative to its value. So why should you be using WebP?

.WebP has massive size benefits

⛏ WebP is way smaller

WebP is significantly smaller than what you’re currently using, and that’s a certainty. WebP is on average 22% smaller than a…


The effect we will be creating.

One way we can increase conversions for websites is increase the amount of time users spend on sites, or interacting with call to action buttons. This can indirectly lead to increases in conversion.

So thinking of this issue, I wondered if we could do something cool with WebGL and create dynamic buttons that might make users more likely to want to hover or focus on buttons. Along the way, we’ll learn something about noise.

View the CodePen Demo

Step 1. Set the scene with WebGL

The first thing to do is write a little bit of JavaScript using Three.js. What I did here was create a single…


The effect we will be achieving in this tutorial.

Apple recently started rolling out attractive and animated cards recently on Apple Music. Animations and effects like this really drive engagement with websites, and ultimately lead to more conversions.

I thought this was a pretty cool way to present cards, which are becoming a more prevalent way to display content on the web. This tutorial will cover the important points to master this effect.

Link to CodePen Demo

Step 1. Three.JS

As with a lot of tutorials I do on WebGL, we will be using Three.JS to achieve this effect. The process we will be using looks a bit like this:


In a world of constant change, can traditional companies keep up?

As tech has continued to disrupt the landscape of pretty much every industry, big traditional companies who have never had a footprint in tech are starting to try and get involved. Subscription models provide consistent income, phone apps drive new customers to your product pipeline, and low maintenance of technology products mean high margins.

It’s no wonder then that companies in pharmaceuticals, consumer goods, auto, and traditional manufacturing processes see a shift from old school consumer good supply chains to high margin tech products as the obvious direction they should be headed in. …


If you used web technologies before 2015, you will know that JavaScript used to be really slow to change. In fact, it was only in 2015 that one standard JavaScript specification was released that quantified all of the features we’d been using into a single document.

That all changed in the next 5 years, however, when JavaScript released a new specification every year, with better features in each. So what is next for JavaScript? There is a whole series of proposals for new features in JavaScript, some in the early stages of being defined. …


Demo of the effect

So the other day I was messing about with spheres and textures, and came across some pretty striking examples of where people had used textures to take a sphere and make it really spiky. It got me thinking of mountains on earth, and how that might look in WebGL. In this tutorial we’ll be looking at making the world, but with extremely exaggerated geography.

I wanted to cover three(.js) main things in this tutorial

  • How shaders work at a high level
  • How to create a height map
  • How to work with shapes across JS and Shaders

Step 1: NASA, no, really

Johnny Simpson

@smpnjn on instagram and twitter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store