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?

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

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…

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:

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

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