Recently, we had an in-depth discussion on structuring React applications using a layered architectural approach. This method aligns with fundamental software architecture principles such as the Single Responsibility Principle (SRP) and the Single Source of Truth (SSoT). It shares similarities with Clean Architecture and Layered Architecture and, interestingly, shows parallels with the Model-View-Controller (MVC) pattern in some respects. We are also applying Dependency Inversion principle (DIP), depending on abstractions rather than concrete implementations of lower-level modules.

Deploying single-page applications (SPAs) on platforms like GitHub Pages presents unique challenges, especially when it comes to handling direct URL access. In this post, we delve into the intricacies of setting up a Preact SPA on GitHub Pages, exploring solutions to common routing issues and discussing the broader implications for various SPA technologies.

Both Result and Either types are considered monads in functional programming. They are commonly used for error handling and control flow in languages that support functional programming paradigms, such as Haskell, Scala, and even in TypeScript with certain libraries.

Both Result and Either are monads because they implement the monadic interface, specifically the bind (or flatMap, andThen) function, and satisfy the monad laws (Identity and Associativity).

These types are powerful abstractions for dealing with computations that might fail, providing a way to sequence operations while propagating errors in a clean, functional way.

This concept became particularly relevant with the rise of module bundlers like Webpack, Rollup, and tools like Parcel, which analyze your import and export statements to determine which parts of a module are used by your application. If a function, class, or variable from a module is never used, the bundler can exclude it from the output bundle, reducing the size of your application and improving load times for your users.

When working in a React application with API calls, handling redirects in the middle of the request chain can be tricky.

The Dependency Inversion Principle (DIP) is one of the five SOLID principles, and it plays an essential role in achieving maintainable and flexible code. It can be applied to frontend development, particularly when using technologies like React and Redux.

Testing Shadow DOM elements can be a bit tricky due to their encapsulation. However, you can access the Shadow Root to test the elements inside it. In this article, we'll explore how to test Shadow DOM elements using React, TypeScript, and @testing-library/react.

A shell is a command-line interpreter that provides a user interface for the Unix/Linux operating system. The shell interprets the commands you enter in the terminal and tells the operating system to execute them.

Pair programming is a collaborative strategy that has gained traction in the software development world. It involves two developers working together on a single task, with one taking the lead and the other providing support. This approach is not just about sharing the workload; it's about leveraging the collective expertise to drive efficiency and quality.

1. Task Allocation and Leadership
2. Acceptance Criteria
3. Exploration through Proof of Concepts (PoCs)
4. Convergence and Decision-making
5. Refactoring and Continuous Delivery
6. Repeat

The usage of React.FC or React.FunctionComponent has been a subject of debate within the React community. Both approaches—using it or not—have their pros and cons.

Do not use React.FC​

IMHO, do not use React.FC or React.FunctionComponent in your codebase, only if you know you are using children props.