Petr Tcoi Official Website

One of the advantages of Next.js is the ability to combine frontend and backend within a single project and use shared types and interfaces. Unfortunately, the server-side part of the framework operates independently from the frontend, functioning as a largely standalone application. Therefore, ensuring type safety requires additional effort. In this article, I will share my experience in addressing this issue.

In this article, I want to share my experience of developing applications using the FSD (Feature-Sliced Design) approach.

My first experience with Astro. A simpler and more efficient alternative to NextJS for small websites.

A brief analysis of the performance of the spread operator and possible alternatives.

A brief introduction to the fp-ts library. Practical example breakdown with the use of TaskEither / Either.

A brief overview of possible ways to use Ramda with React/Redux. My first experiments with this library.

The final article on testing. Basic setup of Storybook. Connecting the theme selector. Visual testing using Chromatic.

Continuation of testing the site. More accurate checking of the sidebar menu and theme change using the Playwright framework. Testing website interactions, snapshot tests, and checking whether elements appear in the visible area of the screen.

Configuration and implementation of unit tests and integration tests using the testing-library library. The functionality of the buttons to open and close the sidebar menu has been checked.

Demonstration of changing the theme via CSS variables and manipulating the DOM: setting the data-theme attribute for the tag. Also, smooth transition is added when changing the color scheme of the site using the transition property.