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.

Image for post
Image for post
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…

How loss teaches you humility

Image for post
Image for post
Credit: Sid Ali on Pexels

It was probably April, 9 years ago that my mum started complaining about flu-like symptoms. Being from the UK, the only option for healthcare is the NHS, and after about a week or two of severe symptoms, we saw a specialist, who diagnosed chronic fatigue syndrome, a disease that is pretty controversial — but we trusted the doctor.

Over the next few days, my mum went from being one of the strongest people I knew, to being unable to speak, and unable to walk. Suddenly this wasn’t the flu anymore. The next time I saw her after finishing school was…

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?

Image for post
Image for post
.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…

Image for post
Image for post
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…

Image for post
Image for post
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?

Image for post
Image for post

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. …

Image for post
Image for post

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
Image for post
Image for post

Step 1: NASA, no, really

Image for post
Image for post

There are a bunch of new JavaScript features which are starting to gather quite broad support on the major browsers and Node.js, but are not being used very widely by most developers.

Below, I outline the newest JS features which are going to make your life 10 times easier, along with the support for each so you can figure out if you can start using them.

🔗 Optional Chaining

Optional chaining is something you might be familiar with if you have used Swift. Currently, in JavaScript, if you want to get the child of an element in an object which may be undefined…

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