From Parcel to Vite: A short story of a 100K LOC migration

We have three main frontend projects at Logto: the sign-in experience, the Console, and the live preview. These projects are all in TypeScript, React, and SASS modules; in total, they have around 100K lines of code. We loved Parcel for its simplicity and zero-config setup. I can still remember the day when I was shocked by how easy it was to set up a new project with Parcel. You can just run parcel index.html and boom, all necessary dependencies are installed and the project is running.

Full article

Read More

Sticky Headers And Full-Height Elements: A Tricky Combination

Sticky positioning is one of those CSS features that’s pretty delicate and can be negated by a lot of things, so here’s another one to add to your mental catalog: Sticky elements don’t play nicely if they have to coordinate with other elements to make up a combined height, like 100vh. Philip Braunen explores why this happens and presents a solution to fix it.

Full article

Read More

Oops, I accidentally made our website faster by switching to Remix

Echobind cares very much about using the right tools for the job, but we’re pragmatic enough to know when it’s worth while to migrate tools and services to save a couple of bucks.

Full article

Read More

The web's clipboard, and how it stores data of different types

If you've been using computers for a while, you probably know that the clipboard can store multiple types of data (images, rich text content, files, and so on). As a software developer, it started frustrating me that I didn't have a good understanding of how the clipboard stores and organizes data of different types.

Full article

Read More

React and FormData

Learn React's newest and yet oldest standard for accessing form data, and the tricks to use it with TypeScript. When you learn how to access form data in React, historically you would have learned about controlled and uncontrolled fields.

Full article

Read More

An SSR Performance Showdown

Server-Side Rendering (SSR) is an often overlooked aspect when building high-performance web applications with Node.js. During my time consulting, many engagements centered around debugging Node.js performance issues. In these scenarios, the culprit is almost always SSR.

Full article

Read More

The AI Driven Development Glossary

As I covered in the introductory article, “The Art of Effortless Programming” (currently being expanded into a book of the same name), AI Driven Development is the process of building software leveraging AI to produce source code or applications, largely automating tasks like code generation, documentation, testing, etc. It can produce profound improvements in productivity, up to an order of magnitude or better.

Full article

Read More