Blog

We share tips, tutorials, and lessons from recent experiments on the web.

When building a microfrontend in React using tools like create-react-app, Webpack, or Vite you might expect plain CSS files and CSS modules to just work, but they don’t 😱. Here...

Vladimir Zotov

2021-10-24 · 3 min read

Using Next.js and Vercel to instantly load a data-heavy website

A React application is JavaScript code that gets transformed into static HTML. This transformation is called "rendering". Whenever you build a React application, you're inevitably...

Seif Ghezala

2021-06-21 · 8 min read

Explain Like I'm Five: Headless CMS

This post is part of the series Explain Like I'm Five (#eli5), which aims to make tech concepts and terms easy to understand. In this post, we explain in 4 minutes what a headless...

Omar Benseddik

2021-06-19 · 7 min read

Explain Like I'm Five: Website speed

This post is part of the series Explain Like I'm Five (#eli5), which aims to make tech concepts and terms easy to understand. In this two minutes read, we'll explain why website...

Seif Ghezala

2021-06-12 · 3 min read

Explain Like I'm Five: React

This post is part of the series Explain Like I'm Five (#eli5), which aims to make tech concepts and terms easy to understand. In this post, we explain in two minutes what React is...

Omar Benseddik

2021-05-29 · 3 min read

How to create microfrontends with Web Components in React

You might hear about microfrontends when your company plans to have multiple teams build a big new web project. The company does not want teams to fight over a single monstrous SPA...

Vladimir Zotov

2021-01-07 · 5 min read

How to build an Auto-Playing Slideshow with React

In this article we'll build an auto-playing slideshow using React. The article is divided in two sections: The trick Functionality Here's the final result (Codepen link here...

Omar Benseddik

2020-11-16 · 6 min read

How to create React Notifications/Toasts with 0 dependencies

In this article, we'll build from scratch React Notifications (toasts) without using any third-party library (except React). The notification component has the following...

Seif Ghezala

2020-10-19 · 6 min read

Asynchronous JavaScript - what is it? (Promises, callbacks, async/await)

JavaScript code is executed synchronously. In other words, from top to bottom and one line at a time. First, the code will execute the function and know what to return when...

Omar Benseddik

2020-08-30 · 4 min read

How we boosted the performance of a Gatsby website by 80%

Sbaï Dentaire is the number 1 user-rated dental practice in Casablanca (Morocco) by Google users: Many patients book appointments through the website on the go from their mobile...

Seif Ghezala

2020-07-19 · 9 min read

How to build a stopwatch with HTML, CSS, and plain JavaScript (Part 2)

This series of articles is made out of two parts: In the first part, we built the stopwatch's user interface with HTML and CSS. In this second part, we'll make the user interface...

Omar Benseddik

2020-06-28 · 11 min read

How to build a stopwatch with HTML, CSS, and plain JavaScript (Part 1)

This series of articles is made out of two parts: In this first part, we build the stopwatch's user interface with HTML and CSS. In the second part, we'll make the user interface...

Omar Benseddik

2020-06-28 · 6 min read

How to create scroll animations with just 1 React hook (Part 1)

This is a series of articles where we learn a few techniques to create scroll animations with just 1 React hook. In this first part, we will use the scroll event to achieve that...

Seif Ghezala

2019-11-01 · 4 min read

How to create & manage a Postgres database in NodeJS from scratch

Notice: Before you jump in and start reading, it's important to understand that this is not a tutorial you'd read while sitting in public transportation or on your toilet seat. You...

Seif Ghezala

2019-09-01 · 8 min read

Learn ESLint concepts, not rules

What is ESLint and why is it useful? A solution is useless if it doesn't solve a problem. So let's start with the problems we have when writing JavaScript code. Problem #...

Seif Ghezala

2019-08-01 · 6 min read

How to make your own SplitPane React component with 0 dependencies

A SplitPane is a collection of 2 elements whose heights can be changed by dragging a line that separates them. Based on its layout, a SplitPane can be horizontal or vertical. If...

Seif Ghezala

2019-07-01 · 7 min read

ReasonML for production React Apps? 🤔 (Part 4)

This is the last article of the series. We've built a few things with ReasonReact and now it's time to share my opinion about using Reason to create React applications. Access...

Seif Ghezala

2019-06-01 · 7 min read

ReasonML for production React Apps? 🤔 (Part 3)

A while ago I published this article about building an accessible and reusable modal/dialog component in React. The component achieves the following requirements: A reusable...

Seif Ghezala

2019-05-11 · 8 min read

ReasonML for production React Apps? 🤔 (Part 2)

I like to go to the Roadmap of ReasonML from time to time to get excited about what's getting cooked. Whenever I visit the page, I can't help but notice these 2 points: So the...

Seif Ghezala

2019-05-03 · 9 min read

ReasonML for production React Apps? 🤔 (Part 1)

ReasonML is a functional programming language with smartly inferred strict types, that compiles to JavaScript. ReasonReact is Reason bindings for ReactJS (aka the translated...

Seif Ghezala

2019-04-19 · 9 min read

How to create an accessible React modal

A modal dialog is a window overlaid on top of the main application. It’s an inert window where the user can’t interact with the rest of the application. Creating a modal in React...

Seif Ghezala

2019-04-01 · 6 min read

A basic introduction to functional programming principles in ReasonML

Functional programming is a programming paradigm based on several principles such as immutability and purity. ReasonML extends the functional language OCaml and compiles to...

Seif Ghezala

2019-03-01 · 4 min read

ReasonML vs TypeScript: comparing their type systems

A type is a labeled set of constraints that can be imposed on a value. A type system analyses values in a piece of code, and validates them against their types. JavaScript has a...

Seif Ghezala

2019-02-01 · 8 min read

Yeah hooks are good, but have you tried faster React Components?

This article is not meant to perf-shame you. If you’re a beginner in React, don’t focus on performance issues but rather on getting comfortable and productive with it. The...

Seif Ghezala

2019-02-01 · 12 min read

How to get a taste of ReasonML by building something useful

ReasonML, a programming language that compiles to JavaScript, was built by extending the functional programming language OCaml, leveraging powerful and safe types smartly inferred...

Seif Ghezala

2019-01-08 · 17 min read