Full Width [alt+shift+f] Shortcuts [alt+shift+k]
Sign Up [alt+shift+s] Log In [alt+shift+l]

Tinloof - Blog

Tinloof - Blog
How to design an accessible carousel (part 1) This series of articles is made out of two parts: In this first article, we provide a comprehensive...
9 months ago
74
9 months ago
This series of articles is made out of two parts: In this first article, we provide a comprehensive guide to designing an intuitive and universally accessible carousel for any web project. In the second part, we'll focus on the development approach, walking you through...
Tinloof - Blog
How to design an accessible carousel In this article, we provide a comprehensive guide to designing an intuitive and universally...
9 months ago
27
9 months ago
In this article, we provide a comprehensive guide to designing an intuitive and universally accessible carousel for any web project. Outcome Carousels in UI are practical interactive elements that efficiently display images or content pieces without taking up too much vertical...
Tinloof - Blog
Using CSS files in web components When building a microfrontend in React using tools like create-react-app, Webpack, or Vite you might...
over a year ago
20
over a year ago
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:
Tinloof - Blog
Localization with Sanity In this article, we describe how we make it possible to translate content from Sanity and publish...
over a year ago
19
over a year ago
In this article, we describe how we make it possible to translate content from Sanity and publish content that is specific to languages/regions.
Tinloof - Blog
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...
over a year ago
18
over a year ago
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”...
Tinloof - Blog
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,...
a year ago
18
a year ago
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.
Tinloof - Blog
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...
over a year ago
18
over a year ago
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.
Tinloof - Blog
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...
over a year ago
17
over a year ago
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...
Tinloof - Blog
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...
over a year ago
17
over a year ago
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).
Tinloof - Blog
10 Shopify SEO best practices with Sanity and Remix Ecommerce competition keeps increasing - for each product you now have dozens of alternatives. As a...
over a year ago
16
over a year ago
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...
Tinloof - Blog
PWA: What it is and why you should try it The percentage of global web traffic on mobile phones has surged over the past decade. As of...
over a year ago
16
over a year ago
The percentage of global web traffic on mobile phones has surged over the past decade. As of November 2022, 60.28 percent of all web traffic came through mobile phones. Providing a good mobile user experience is therefore crucial to attract and retain users. Mobile applications...
Tinloof - Blog
SEO best practices on Sanity When we build a website with Sanity, we configure SEO best practices to rank higher on search engine...
over a year ago
16
over a year ago
When we build a website with Sanity, we configure SEO best practices to rank higher on search engine result pages.
Tinloof - Blog
How to create React Notifications/Toasts with 0 dependencies In this article, we will demonstrate how to build React Notifications (toasts) from scratch, without...
over a year ago
16
over a year ago
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),...
Tinloof - Blog
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...
over a year ago
16
over a year ago
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...
Tinloof - Blog
How we build fast Shopify stores It is no surprise that ecommerce page speed is a key factor in user satisfaction, conversion rates,...
over a year ago
16
over a year ago
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...
Tinloof - Blog
Figma for developers: all you need to know If you're a frontend developer, you are probably spending as much time on VS Code as on Figma. This...
a year ago
16
a year ago
If you're a frontend developer, you are probably spending as much time on VS Code as on Figma. This quick read highlights some of the goodies that I personally use to speed up my workflow. A word of caution
Tinloof - Blog
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...
over a year ago
15
over a year ago
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
Tinloof - Blog
Why we charge daily: Tinloof’s pricing model explained This article explains why Tinloof bills on a daily basis instead of a fixed rate.
a year ago
Tinloof - Blog
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...
over a year ago
15
over a year ago
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...
Tinloof - Blog
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...
over a year ago
15
over a year ago
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...
Tinloof - Blog
Guide to fast Next.js Insights into how Tinloof measures website speed with best practices to make faster websites.
a year ago
Tinloof - Blog
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...
over a year ago
15
over a year ago
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...
Tinloof - Blog
A/B testing with Sanity and LaunchDarkly We’ll show in this demo how it’s possible to create and control A/B Tests using Sanity and...
over a year ago
Tinloof - Blog
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...
over a year ago
Tinloof - Blog
Figma variables: tips from 3 scenarios Figma variables are a feature let you reuse and manage design elements more easily. Instead of...
a year ago
15
a year ago
Figma variables are a feature let you reuse and manage design elements more easily. Instead of manually updating each instance of a design element, you can set a variable, like a color or padding, and apply it across your project. If you want to make a change, you update the...
Tinloof - Blog
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...
over a year ago
15
over a year ago
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...
Tinloof - Blog
Managing Tinloof-powered websites If your website was built by Tinloof, you should be able to self-manage it without any guide. We...
a year ago
14
a year ago
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
Tinloof - Blog
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...
over a year ago
14
over a year ago
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:
Tinloof - Blog
ReasonML for production React Apps? 🤔 (Part 3) A while ago I published this article about building an accessible and reusable modal/dialog...
over a year ago
14
over a year ago
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...
Tinloof - Blog
How to create microfrontends with Web Components in React We often hear about microfrontends, this happens when your company plans to have multiple teams...
over a year ago
14
over a year ago
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....
Tinloof - Blog
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...
over a year ago
14
over a year ago
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
Tinloof - Blog
Text with media background: practical solutions Text over images or videos is common on websites, and when not done right, it can make the text hard...
a year ago
14
a year ago
Text over images or videos is common on websites, and when not done right, it can make the text hard to read and cause accessibility and usability issues. Designers might not catch these problems early on because they use ideal settings to test designs. The real problems show up...
Tinloof - Blog
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...
over a year ago
13
over a year ago
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...
Tinloof - Blog
Images and videos on Sanity This article is outdated. You can read the Managing Tinloof-powered websites article...
over a year ago
13
over a year ago
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.
Tinloof - Blog
How to build cron jobs with Netlify functions We leveraged Netlify Scheduled Functions to automate the task of fetching jobs from Heavybit's...
over a year ago
13
over a year ago
We leveraged Netlify Scheduled Functions to automate the task of fetching jobs from Heavybit's portfolio companies into their Jobs page.
Tinloof - Blog
Why most CMSes suck We're in 2023, and you mainly have 3 CMS options to build and manage your website: Monolithic CMS...
a year ago
13
a year ago
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)
Tinloof - Blog
Website migration 101: transitioning to a headless CMS In this article, we share insights gleaned from migrating websites created with WordPress, Hubspot...
a year ago
13
a year ago
In this article, we share insights gleaned from migrating websites created with WordPress, Hubspot CMS, Webflow, and similar tools, to a headless CMS setup.
Tinloof - Blog
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...
over a year ago
13
over a year ago
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...
Tinloof - Blog
How to dynamically create a sitemap with Sanity and Remix In this article, we will explain how to dynamically create a sitemap using both Sanity and...
over a year ago
13
over a year ago
In this article, we will explain how to dynamically create a sitemap using both Sanity and Remix. We’ll learn by following an existing example of a sitemap built for Heavybit’s website, a San Francisco-based VC whose website is built with both technologies. Remix is a React...
Tinloof - Blog
Tinloof design principles Tinloof focuses on key principles to consistently create pleasant and practical designs. We're not...
a year ago
13
a year ago
Tinloof focuses on key principles to consistently create pleasant and practical designs. We're not tied to any specific style - Swiss, Linear-like, neobrutalism, a certain typography or color palette. Instead, we stick to basics that make our process smooth, please our users,...
Tinloof - Blog
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...
over a year ago
12
over a year ago
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...
Tinloof - Blog
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...
over a year ago
12
over a year ago
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...
Tinloof - Blog
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...
over a year ago
12
over a year ago
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.
Tinloof - Blog
Why we prefer Sanity over Contentful In this article, we'll explain 5 reasons why we prefer Sanity over Contentful Headless CMS.
over a year ago
Tinloof - Blog
Analytics with Sanity We’ll explain in this article the analytics possibilities with Sanity and how we enable them in our...
over a year ago
12
over a year ago
We’ll explain in this article the analytics possibilities with Sanity and how we enable them in our projects.
Tinloof - Blog
Guide to content creation with Sanity We go through how Sanity can be used as a headless CMS to create and manage content.
over a year ago
Tinloof - Blog
Perfecting the design handover process At Tinloof, we aim for seamless and efficient design handoffs, drawing from our experience...
a year ago
12
a year ago
At Tinloof, we aim for seamless and efficient design handoffs, drawing from our experience completing dozens of projects. Our ultimate goal is a "0 questions asked" handoff, akin to an improved IKEA assembly experience. In this article, we'll explore the three core sections...
Tinloof - Blog
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...
over a year ago
12
over a year ago
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...
Tinloof - Blog
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...
over a year ago
12
over a year ago
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).
Tinloof - Blog
The SEO scam: $62,000 later Context Like many businesses operating online, we at Tinloof decided to explore SEO to attract more...
a year ago
12
a year ago
Context Like many businesses operating online, we at Tinloof decided to explore SEO to attract more leads. Seeing the numerous SEO gurus on LinkedIn and Twitter, one might think it's worth a shot to try this approach, hoping to strike gold when search engines place your website...
Tinloof - Blog
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...
over a year ago
11
over a year ago
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...
Tinloof - Blog
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...
over a year ago
11
over a year ago
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...
Tinloof - Blog
Translating Shopify stores with Sanity At Tinloof, we have an internal library that does a lot of heavy lifting when it comes to building...
over a year ago
11
over a year ago
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...
Tinloof - Blog
A basic introduction to functional programming principles in ReasonML Functional programming is a programming paradigm based on several principles such as immutability...
over a year ago
10
over a year ago
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...
Tinloof - Blog
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...
over a year ago
9
over a year ago
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...
Tinloof - Blog
ReasonML for production React Apps? 🤔 (Part 1) ReasonML is a functional programming language with smartly inferred strict types, that compiles to...
over a year ago
9
over a year ago
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...