Write three.js in React Using react-three-fiber

So you want to write some 3D graphics/animations in your React apps using three.js? Let’s see how we can do just that, leveraging the react-three-fiber library. This article supposes you are familiar with React (with hooks) and three.js . If not, you ... more

MobX with React Native, Simplified

State management is the core of any React application and as React is just a UI library, we need something to take care of the state of our app. State management can become troublesome and it is easy to create unmanageable React applications because ... more

A Look at the React useMemo Hook

You may have seen, released along with React Hooks, a strange hook called useMemo . What could this strange, 👽alien👽 hook mean and what is it used for? Most importantly, how can it help you and why do you need to know about it? First, a little brush ... more

Converting Arrays to Strings in JavaScript

Arrays are a powerful feature of any language. They let you house multiple pieces of information easily. They will maintain the order of items being added and can even be sorted. In modern web browsers, they even handle auto-magically converting themselves ... more

What's the Spread Operator Used For in JavaScript?

Learn about the ES6 spread operator, and some practical uses for this powerful JavaScript feature! The spread operator is a feature of JavaScript introduced with ES6 that gives you access to the insides of an iterable object . The term “iterable object” ... more

npm vs Yarn Commands Cheat Sheet

Here’s a cheat sheet you can use as a handy reference for npm & Yarn. There’s a lot of similarities between npm and Yarn. As the newer technology Yarn (released 2016) drew a lot of inspiration from npm (2010). On the flip-side, their similarities ... more

Capitalizing Strings in JavaScript

I love JavaScript, but it’s lack of built-in string manipulation in comparison to PHP is lacking. Sure, you could pull in a third-party dependency for your string manipulation needs, but oftentimes that carries way more weight than you probably want ... more

Understanding the React useReducer Hook

If you are at all familiar with reducers, you should have a good understanding of what React’s useReducer hook does. Plain and simple, it allows functional components in React access to reducer functions from your state management. If you are not familiar ... more

The React useContext Hook in a Nutshell

Early February 2019, React introduced Hooks as a way to rewrite your components as simple, more manageable, and classless. useContext is one of the built-in Hooks, giving functional components easy access to your context. But before we dive into useContext, ... more

Introduction to Creating and Publishing Docker Images

Docker containers are pretty useful, but are still very limited without the use of images. Now we’re going to explore creating, working with, and publishing our own images onto Dockerhub. Prerequisites You’re going to need a basic idea about what Docker ... more

A Primer On the JavaScript Apply and Call Methods

In a JavaScript world where arrow functions are everywhere, object and array destructuring are the norm, and functional programming seems to have won the popularity contest; writing about apply and call is hard. In this world, we don’t have any practical ... more

Countdown Timer with React Hooks

React has simplified and reduced the amount of effort that goes into front end development. The addition of React Hooks has reduced the complexity even further by eliminating the need for classes when you are in need of state management. Building a countdown ... more

Using Server-Sent Events in Node.js to Build a Realtime App

The goal of this article is to present a complete solution for both the back-end and front-end to handle realtime information flowing from server to client. The server will be in charge of dispatching new updates to all connected clients and the web ... more

Exploring the JavaScript forEach Method for Looping Over Arrays

Array.prototype.forEach is a nice little function introduced in ECMAScript 2015. It allows us to access each element of an array in order. The basics Most of us know the alphabet so here’s an easy example: Module: letters.js const letters = ['a', 'b', ... more

Introduction to Docker: Getting Started

Docker is definitely one of the more tricky pieces of tech to learn on your own. Since it’s so new there isn’t very much learning material on it, and many that do exist assume some DevOps knowledge or start throwing around commands without properly explaining ... more

Building a Countdown Timer in JavaScript

Countdown timers can serve many purposes. They can communicate to a user how long they’ve been doing something or how much time until some event happens, like the launch of your new website. In the sales and marketing context they can be used to create ... more

Authentication in Prisma - Part 2: JSON Web Tokens & Login

Over in Part 1 we setup our project to require authentication to interact with the GraphQL API. Now, we’re going to look at logging in users and generating JSON Web Tokens (JWT) for our users to lock them out from data we don’t want them to access. Installation ... more

Authentication in Prisma - Part 1: Setup

Unless if you’re using something like Firebase to handle your authentication, it can be a bit tricky to handle it in a way that is both secure and easy to manage. In this three-part series, we’re going to be going over how to setup your GraphQL API for ... more

Using toLocaleString with Numbers, Arrays or Dates in JavaScript

toLocaleString is a built-in JavaScript method used to convert the date and time to a string using the system locales. 🤓🚀 It can be used with the following JavaScript types 💪: Dates/Time Numbers Objects Arrays toLocaleString with Dates and Time 🚀 ... more

Finally Understand the JavaScript Reduce Method

Reduce is a method that can be difficult to understand especially with all the vague explanations that can be found on the web. There are a lot of benefits to understanding reduce as it is often used in state management (think Redux). The signature for ... more

Command-line Basics: Dressing up Output with cowsay

The command-line is extremely powerful. Depending on your setup, it may not be much to look at though. Light text on a dark background, dark text on a light background, it’s still just text. Text can get boring to look at all the time, even if your terminal ... more

npm Commands and Features You Should Know

I love the npm CLI. Sorry, not sorry. npm has caught some flak over the years for one reason or another. Nevertheless, its command line interface is ubiquitous. It’s the foundation for most modern build systems and it’s still the most popular solution ... more

Prisma with Node.js - Part 1: Setup

Prisma is very cool, but it’s still a bit limited on its own. What if need to manipulate the data before sending it to the database, like checking for authentication, or we need to do something with a library specific to Node.js? In this 2-part series, ... more

Custom Fonts in Gatsby

Choosing the right font can add great value to a site and enhance the user experience. The right font-loading strategy, however, can be somewhat of a challenge. That’s why Gatsby provides several developer-friendly solutions for all of our font-loading ... more

Building Maps in Angular Using Leaflet, Part 1: Generating Maps

Leaflet is an awesome JavaScript library for creating maps. It comes packed with nice features and is extremely mobile-friendly. Let’s see how we can integrate Leaflet into our Angular app. Setup Before we begin, let’s first create a project using Angular ... more

Avoid Invalid Requests to Your Express.js Server Using celebrate

In this article, we’ll build a REST API with Node.js and Express and protect one endpoint from arbitrary requests. At first, we will develop an unsecured API, then we will add a own validation and analyze the shortcomings of it, finally we’ll use celebrate, ... more

Creating a Custom webpack Plugin

If you’ve ever worked with webpack, you’ve probably heard of webpack plugins. Plugins are a great option for extending webpack’s implementation and architecture. If you look at webpack’s source code, around 80% of their code is implemented using plugins. ... more

Setting Up Prisma with Heroku and a Postgres Database

In this article, we’re going to go over the basics of creating a GraphQL API using Prisma with a Postgres Database. Prisma is a GraphQL framework that takes care of all of the little and redundant things like data relationships and CRUD operations for ... more

Using Angular CLI Schematics

If you’re like me, when you started out working in Angular (especially when it first arrived), you quickly became exhausted by the shear number of files and configurations you had to set. Creating a new component entailed manually creating three separate ... more

The V8 Engine and JavaScript Optimization Tips

V8 is Google’s engine for compiling our JavaScript. Firefox has it’s own engine called SpiderMonkey, it’s quite similar to V8 but there are differences. We will be discussing the V8 engine in this article. A couple of facts about the V8 engine: Written ... more