Web applications handle lists of data for various reasons: showing a list of registered users, checkout page with items to be purchased or a log of previous transactions. A list is such a common construct that it’s a good fit for an abstraction. Vue makes it convenient to render lists of data with a nice […]
Firebase has two types of database: Realtime Database and Cloud Firestore. Both databases are NoSQL-like databases so the database is structured as key-value pairs. In this tutorial, we’ll focus on the Realtime database and explore how the security rules secure the integrity of the data in our database. We will build a note-taking called Easi […]
The Media Session API enables web apps to provide a way to interact with media elements (audio, video) without actively being on the web page playing the media. All you need to achieve this is to provide some metadata, event handlers, plug them to a media element and have rich media experience. This allows users […]
There are various reasons a web application may want to collect input from its users. However, there are times you want to limit how much input you get from your user. In this tutorial, we’ll learn how to create a word counter in JavaScript and stop the user from entering any further information when they […]
Images make up a large portion of the overall web traffic. On Instagram alone, over 95 million photos are shared daily. Delivery images in a fast and efficient way can improve the overall performance of a web application. This article covers some techniques that can be used with Cloudinary to make this seamless. What is […]
Sometimes you want to build a quick prototype without worrying about backend logic and infrastructure. This is where Firebase really shines and combined with React, you can get authentication set up really quickly. This article covers how to authenticate your web app with React and Firebase. You need to be familiar with: Higher-Order Components React […]
Javascript has a set of built-in methods for manipulating arrays. In this article, we explore three of them: includes() checks if an array contains an item indexof() returns the index of an item in an array join() converts an array into a string Let’s take a detailed look into each of them. includes() The includes() […]
A lightbox is a script used to overlay images and videos on a page and dim out the rest of the page content. This tutorial shows how this can be achieved using a bootstrap library called ekkolightbox. Setup First, we import bootstrap CSS and JavaScript files. Since bootstrap requires jQuery, we’ll import that as well. […]
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. It provides a simple interface for asking for data from your server and getting exactly what was requested and nothing more. In contrast, if you are using a REST API for your server you have no control […]
HTML provides some elements that enable web applications to accept information from their users. Text, pictures, and videos are just some of the type of information a web app may want to get from their user in order to serve a better or personalised experience. This article focuses on how to accept numbers (phone numbers, […]
Traditionally, one of the main ways to bring users back to your website/web app is through email newsletters. While email newsletters can be used effectively, the Clickthrough Rate (CTR) when compared to web push notifications is significantly less. When used appropriately, web push notifications can drive more engagement to your web app. In this tutorial, […]
In this article, we’ll see how Firebase allows us to focus on our core business logic and exposes simple to integrate APIs we can use to communicate with the backend. In the simplest terms, Serverless frameworks and architectures enable you to build and run web applications without thinking about managing servers. This frees up valuable […]
