How to build a waitlist with Supabase and Next.js
Let's build a simple app where: 1. Users sign up and join a waitlist. 2. Upon admin approval, users get a notification email and can use the app.
Mohammed Elhadi Baci
Guide to fast websites with Next.js
This article was originally published on Vercel. At Tinloof, we're obsessed with delivering fast websites such as jewelry brand Jennifer Fisher, which went from a Shopify theme to a modern Next.js website that instantly loads with 80% less JavaScript. When evaluating the speed of a website, they look at key metrics in a typical user journey:
Seif Ghezala
Managing Tinloof-powered websites
If your website was built by Tinloof, you should be able to self-manage it without any guide. We wrote this article just to make sure you're not missing out on any feature that helps you manage your website more effectively. Navigating the CMS
Omar Benseddik
Why most CMSes suck
We're in 2023, and you mainly have 3 CMS options to build and manage your website: Monolithic CMS (e.g. WordPress, Hubspot) Modern website builder (e.g. Framer, Webflow)
Seif Ghezala
Exploring the different ways of building Shopify stores
Shopify is a global e-commerce platform which allows users to build an online store swiftly and sell merchandise online through their easy-to-use dashboard. There are different ways of creating Shopify stores. These are: Creating a store using one of Shopify's built-in themes
Basel Sababa
10 Shopify SEO best practices with Sanity and Remix
Ecommerce competition keeps increasing - for each product you now have dozens of alternatives. As a result, CAC (Customer Acquisition Cost) increases, pushing ecommerce business owners to look for more affordable lead generation strategies. SEO is one of them. Online store owners aim to optimize their ecommerce for search engines, to attract more web visitors and increase sales.
Omar Benseddik
Translating Shopify stores with Sanity
At Tinloof, we have an internal library that does a lot of heavy lifting when it comes to building fast Remix websites that have their content managed from Sanity. A while ago, we took a step back to research and implement a localization setup with Sanity that handles all use-cases and provides a decent user experience for content managers. Now that we have a great localization workflow, we included it in our code generation tool, and in this article, we’ll cover what that looks like from both the user and developer perspectives.
Seif Ghezala
How we build fast Shopify stores
It is no surprise that ecommerce page speed is a key factor in user satisfaction, conversion rates, SEO, and brand perception. Research clearly shows that the slower the ecommerce is, the less likely visitors are going to purchase; 79% of customers are less likely to buy again if dissatisfied with site performance, and 64% of mobile users expect an ecommerce to load in 4 seconds or less. In this article, we will go through 5 tips on how Tinloof creates Shopify stores that satisfy both users and search engines.
Omar Benseddik
How to setup Algolia search with Remix
In this article, we will build a simplified version of our client Heavybit's library browse module. We built it using Algolia search with Remix. You can check the full working version from here.
Burak Tarım
How to create CSV uploader with Sanity?
We built the Betty's Eddies website for our client marimed. You can read more about our case study about Betty's Eddies. Betty's Eddies technology stack is; NextJS for the frontend, and Sanity for the CMS and we coded it with typescript. Betty's Eddies has a stores page that includes many stores around the USA and they want to add a store list with a CSV file.
Burak Tarım
Translating Sanity content with Smartcat
In this article, we will show you how you can add localization to your Sanity CMS and how you can translate documents using Smartcat. Smartcat allows us to upload an HTML file and automatically translate it to almost any language you want. You can learn more about Smartcat from their website. We used this logic in our client Exakthealth. You can read more about our work here.
Burak Tarım
How to integrate Fathom Analytics into your Remix App
When it comes to building successful websites, it's important to gain insights and data about your website visitors in order to enhance their experience. In this guide, we will go over the steps of integrating Fathom Analytics into a Remix application. Creating a site in Fathom Analytics
Basel Sababa
How to build cron jobs with Netlify functions
Context Heavybit is a developer tools investor that invests in companies like Mux, Sanity, Contentful, Stripe, LaunchDarkly, tailscale, and more. To promote the different jobs of their portfolio companies, they wanted to display those on their website.
Burak Tarım
Images and videos on Sanity
This article is outdated. You can read the Managing Tinloof-powered websites article instead. - Images and videos have to be properly configured to rank in search engine result pages and not impact negatively page speed.
Omar Benseddik
A/B testing with Sanity and LaunchDarkly
We use Sanity to build fast websites that rank on the Google search engine and attract users. We know that A/B testing is a key great way to find out what content fits better with your target users, so integrating it on Sanity is a great way to test your content with real users before going live with them. This article will be a demo where we show how our clients usually create A/B tests from Sanity and control them from an A/B testing platform called LaunchDarkly.
Seif Ghezala
Guide to content creation with Sanity
This article is outdated. You can read the Managing Tinloof-powered websites article instead. - Sanity is a content platform that is used to unify, structure, and deliver the content of an organization.
Omar Benseddik
Why we prefer Sanity over Contentful
Contentful and Sanity are both great headless CMS solutions that make it possible to easily manage the content of your website or application without hurting its performance. Even though we like Contentful and still use it in some of our projects if it’s the client's preference, Sanity is our headless CMS solution of choice. In this article, we'll explain 5 reasons why we prefer Sanity.
Basel Sababa
Localization with Sanity
This article is outdated. You can read the Managing Tinloof-powered websites article instead. - You want to create an international website by either translating content from one language to others or publishing content that is only relevant to a specific locale (explained below).
Seif Ghezala
SEO best practices on Sanity
This article is outdated. You can read the Managing Tinloof-powered websites article instead. - When we build a website with Sanity, we configure SEO best practices to rank higher on search engine result pages.
Omar Benseddik
Using CSS files in web components
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 is an example of a CSS module in a React component:
Vladimir Zotov
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 making a decision on when to render it and you usually have 3 choices: Client-side rendering: the application is rendered on the browser when the script loads.
Seif Ghezala
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 a few minutes what Headless CMS is and show you how it's used. So, what is a headless CMS, what are the use cases and benefits of a headless CMS, and what can it be used to create? What is a CMS?
Omar Benseddik
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 speed matters, how to measure it, and how to improve it. Why website speed matters
Seif Ghezala
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’ll be answering the question: what is React? We’ll look into its origins, usage, explain key terminology and also cover how and why React is used.
Omar Benseddik
How to create microfrontends with Web Components in React
We often hear about microfrontends, this happens 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. It decides to break the project down into several mini-apps hosted by a parent app. Each team then can work in isolation, pick their own tech stack, preferred flavor of agile and so on. How it works
Vladimir Zotov
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 into two sections: The trick
Omar Benseddik
How to create React Notifications/Toasts with 0 dependencies
In this article, we will demonstrate how to build React Notifications (toasts) from scratch, without using any third-party library (except React). The notification component has the following requirements: Four color variations: info (blue), success (green), warning (orange), and error (red).
Seif Ghezala
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 getText() is called. Then it assigns the getText() function to the variable text.
Omar Benseddik
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, therefore page speed is critical to avoid a high bounce rate. This article explains how we improved the performance of their website, which is built with Gatsby.
Seif Ghezala
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 functional with JavaScript (the stopwatch works).
Omar Benseddik
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 functional with JavaScript (the stopwatch works).
Omar Benseddik
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. Here’s a preview of what we will achieve by the end of the article:
Seif Ghezala
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 might want to find a nice place to sit for an hour and follow the tutorial. We have 1 goal: set up a production-ready NodeJS backend for a blog. Just by targeting that goal, we will learn:
Seif Ghezala
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 #1: JavaScript is not compiled while you write it
Seif Ghezala
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 you've ever used the Chrome dev tools, you probably came across both versions of the SplitPane. For example, the Elements section of the dev tools contains a horizontal SplitPane: You can also find a vertical SplitPane in the Sources section of the dev tools:
Seif Ghezala
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 Part 1 here, Part 2 here and Part 3 here. Though, my opinion shouldn't really matter if you're also evaluating ReasonML. That's why I will share an approach that should help you decide whether to use something in production or not.
Seif Ghezala
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 component API: we should be able to easily use our accessible modal anywhere and populate it with content.
Seif Ghezala
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 official documentation itself admits that the async story and JSON handling are not that great. This is exactly why, in this second part of the series, we'll build a simple Login page for our words counter. By doing that, I'm pretty sure we will bump into these 2 points among other things and have a better overview of building React applications in Reason.
Seif Ghezala
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 ReasonML version of the ReactJS). It has improved a lot lately and even added support for hooks in a release a couple of days ago. In this series of articles, I will build applications in ReasonReact and try to accomplish most of the tasks I usually do with ReactJS. For each article, I will share what I like/dislike about building React applications in Reason. The goal is to determine how ready is ReasonML for building serious React applications. Access Part 2 here, Part 3 here and Part 4 here.
Seif Ghezala
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 is fairly easy. There are dozens of resources that explain how to do so, including the React documentation. This article provides an in-depth step-by-step guide to building a modal component that is accessible and reusable. We will follow the official W3C requirements for building an accessible modal dialog with a reusable API. Let’s approach our task with a few iterations and try to meet the following requirements:
Seif Ghezala
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 JavaScript. This article aims to introduce you to some very basic functional principles present in ReasonML and OCaml. We will see how these principles are closely related and help avoid errors.
Seif Ghezala
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 type system, but it’s dynamic. This is one of the key advantages of using the language, providing an incredible productivity gain. Yet, we recently started to find more and more use-cases for statically typed languages that compile to JavaScript. TypeScript and ReasonML are two leaders of this trend that started a couple of years ago. They both compile to JavaScript but have different type systems. TypeScript was built as a superset of JavaScript. While Reason was built as an extension to the functional programming language OCaml. In this article, we will put these two type systems under a microscope, studying some of their differences and similarities. It’s in no way intended to be a dance-off between Reason and TypeScript. Rather it’s a basic and objective comparison of their type systems (in case you were planning to call me out on this 😛). It’s also not a comprehensive analysis. There are other interesting points of comparison that this article doesn’t treat.
Seif Ghezala
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 performance of a React application can be defined by how long the user should wait before seeing the UI resulting from a certain interaction. This article aims to point out some general performance issues in React applications with concrete examples and provide simple solutions to solve them. It includes changes related to the latest version of React (16.8.2) at this time, which comes in with support for Hooks.
Seif Ghezala
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 by default. Reason’s official documentation is clear, yet covering the theory with “Hello World” examples won’t make you properly experiment with the language. This article does not aim to showcase all Reason’s features nor convince you whether to use it. It will rather walk you through a realistic application of Reason to learn plenty of its features and get a real taste of the language’s interoperability with NodeJS. We will use Reason to build a tree-cli-like NodeJS tool that lists a directory’s content in the shape of a tree.
Seif Ghezala
How to make and test your own React drag and drop list with 0 dependencies
I know, drag and drop is a solved problem. There are several great utilities you can use to easily have a drag and drop list in your application (dragula, react-beautiful-dnd, and react-dnd). These libraries offer APIs that make it easy to meet your needs without worrying about what is happening under the hood. Most of them hide a complex logic to make the drag and drop work properly on several devices, whether touch or not. However, using external dependencies comes at a cost. In fact, it increases the bundle size of your application, which can affect its overall performance. You also become dependent on the maintenance of the library. Therefore, before rushing to use a library, you should take a look at your problem and ask yourself if there is a simple way to solve it without relying on a library.
Seif Ghezala
JavaScript’s Maps For Better Performance
This article is not intended to explore the API of the Map object in details. If you’re looking for such a source, please check out MDN. In general, the Map data structure is useful when we want to retrieve/add/delete values through a set of unique keys. One of the characteristics that make JavaScript Map data structure unique compared to its implementation in other languages, is the fact that it remembers the insertion order of its keys.
Seif Ghezala
How to Create a PWA Game using Preact in 5 steps (Tutorial)
In this article, we will create a Progressive Web Application! Don’t worry, we won’t make another todo list. Instead, we will build a fun game that satisfies Google’s checklist for building a PWA. Final result You can play it here and check the final source code on Github.