Photo by fauxels from Pexels

Building web applications is something a whole generation of developers have grown up with. Building phone applications in android and iOS, however, usually requires knowledge of Swift or Kotlin, which may not be your first language in programming.

Having all your code work on all devices, in the same repo, is the dream scenario for those building web first. Fortunately we can accomplish just that with Apache Cordova. In this article, we’ll be looking at how you can take your React project and transform it into a native iOS or Android application. Let’s get started.

Note: This tutorial is based…


Photo by Ferenc Almasi on Unsplash

Web components will be familiar to you if you have worked at all with React. They are custom, replicable pieces of HTML, which can be referred to elsewhere in the code.

Web components are their own HTML specification, so you may be surprised they can be used in a standalone manner with pure JavaScript and HTML. Let’s take a look at how to do that.

Imagine we have a status bar item which we reuse in multiple places. The structure of it might look like this:

Imagine having to paste that into multiple places and maintain it so it…


GraphQL is a language built primarily for use with APIs. It interacts with JavaScript and other languages quite easily. In this article, let’s take a look at the basics around how to combine Express, MongoDB, and GraphQL into a basic API for getting titles and dates from a database.

GraphQL is a bit of a departure from classic REST APIs, but once you get used to it you’ll see how easy it can be to run. Let’s take a look.

Install GraphQL

The first step is to install the standard GraphQL packages and Express on your Node.js …


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

Johnny Simpson

@fjoltdev on 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