#frontend Development Tutorials & Tips | Roast Dev

100daysofcode 100daysofdevops 100pay 10mistakes 10yearworkanniversary 11 11labs 11tly 11ty 127001

Optimistically updating the UI with the useOptimistic hook

In summary, useOptimistic is a React hook that displays a different state only while some asynchronous action is in progress. Most basic use case is to make asynchronous data visible on UI while it's ...

16.03.2025 0 Read More

📱 How to Create a GitHub-Style Floating Header with Trig.js

Ever noticed how GitHub’s mobile app keeps the page repo details visible in a floating header as you scroll? It’s a slick UX touch that enhances navigation. In this post, I’ll show you how to ac...

16.03.2025 0 Read More

Check Out My Portfolio

In this post, I’ll share how I created my personal portfolio website using Vite for fast development, Firebase Hosting for seamless deployment, and integrated SEO best practices to ensure it’s dis...

16.03.2025 0 Read More

Handling Forms in React: Controlled vs. Uncontrolled Components

Forms are a crucial part of any web application, and in React, we primarily handle forms using either controlled or uncontrolled components. Understanding the difference between these two approaches c...

17.03.2025 0 Read More

Perfecting the Loading Experience with next/dynamic and React Suspense

Introduction In Next.js, you can speed up your app and provide a better user experience by lazy loading components. The official docs for next/dynamic describe it as a “composite of React.l...

17.03.2025 0 Read More

System.css: A CSS Library for Classic Apple System OS-Inspired Interfaces

System.css is a CSS library that recreates the classic look of Apple's System OS (1984–1991). Since System 1 through System 6 had minimal design changes, this library is based on System 6, the last ...

17.03.2025 0 Read More

Playwright for React Devs: A Complete Guide with API Testing

Introduction Let's face it – testing isn't the most glamorous part of web development, but it's definitely one of the most important. Without solid tests, we're basically crossing our finge...

17.03.2025 0 Read More

Composant Icône avec RiotJS

Cet article traite de la création d'un composant icône avec RiotJS, en utilisant le CSS Material Design BeerCSS. Avant de commencer, assurez-vous d'avoir une application de base, ou lisez mes articl...

17.03.2025 0 Read More

Level Up Your React Apps with Tailwind CSS: A Step-by-Step Guide

Have you ever had difficulties styling? Or had a rough day because one CSS rule decided to not do what it is meant to do? Is there an end to having multiple style files or cumbersome components becaus...

17.03.2025 0 Read More

🔥 Meet Rich-TODO: Turn Your Terminal into a Stunning Task Manager! 🔥

Hey Pythonistas and CLI lovers! 🐍 Tired of boring, monochromatic to-do lists in your terminal? Rich-TODO is here to revolutionize your task management! Built with the power of the Rich library, thi...

17.03.2025 0 Read More

Optimistically updating the UI with the useOptimistic hook

📱 How to Create a GitHub-Style Floating Header with Trig.js

Check Out My Portfolio

Handling Forms in React: Controlled vs. Uncontrolled Components

Perfecting the Loading Experience with next/dynamic and React Suspense

System.css: A CSS Library for Classic Apple System OS-Inspired Interfaces

Playwright for React Devs: A Complete Guide with API Testing

Composant Icône avec RiotJS

Level Up Your React Apps with Tailwind CSS: A Step-by-Step Guide

🔥 Meet Rich-TODO: Turn Your Terminal into a Stunning Task Manager! 🔥

#reading

#popular