Prabashwara Seneviratne

I write code and write about writing code.

Tinkerer ⚙️ | Traveler 🌍 | Impatient 💨
Sri Lankan 🇱🇰 in Prague 🇨🇿

[Prabashwara Seneviratne @realbashlk]

In the end, it took me almost a month to set up and host a small web app with a live backend. In this post, I describe some of the troubles I ran into and how the end result turned out.

https://t.co/NB0MGmmL0A

[Prabashwara Seneviratne @realbashlk]

I wanted to start reviewing different state management libraries for React. To do that, I thought I would refactor a real web app to use each of those libraries.

[Prabashwara Seneviratne @realbashlk]

Since the real web apps I am working on are too big to refactor quickly, I thought I could build a small web app on my own for this. How hard can it be?

[Prabashwara Seneviratne @realbashlk]

To do this, I'm thinking of creating a small app and then refactoring it to use each of the different state management libraries to compare how easy to use, versatile and performant each of them are.

What do you think of this approach?

[Prabashwara Seneviratne @realbashlk]

How should I review different state management libraries?

Over the next few months, I am planning to do some in-depth reviews of state management libraries for React. (e.g. Redux toolkit, Zustand, Recoil, Jotai)

[Prabashwara Seneviratne @realbashlk]

@erikras @duolingo Most Czech abbreviate that just "no". It was incredibly confusing for the first few months.

[Prabashwara Seneviratne @realbashlk]

So I did some experiments and found that it is really difficult to get React context to efficiently update components when you use it for global state. You can find these experiments and more examples in my latest post.

https://t.co/OWcpIe5caC

[Prabashwara Seneviratne @realbashlk]

Sometime ago I heard that React Context should not be used for managing global state. I tried to figure out why but I couldn't find a solid reason 🤔

[Prabashwara Seneviratne @realbashlk]

@OngDevLab Legacy

[Prabashwara Seneviratne @realbashlk]

@Alex83542898 @starting I didn't know about the View Transitions API, thanks for sharing it with me!

It seems like this will be the norm for transitions on the web in the future - it is a pity that support for it is so low. I also couldn't find a polyfill for it.

[Prabashwara Seneviratne @realbashlk]

First day back at work. Spent half of the day figuring out where I left everything and the other half figuring out why the Transition component from react-transition-group was causing a React strict mode warning about findDOMNode 🤔

[Prabashwara Seneviratne @realbashlk]

Flew into a rather gloomy looking Tenerife North. Thankfully it cleared up as we drove south.

[Prabashwara Seneviratne @realbashlk]

@Alex83542898 @[email protected] told me about the experimental @starting-style CSS rule which makes entrance transitions much easier. But it still doesn't have good browser support.
https://t.co/2YqVJZc90l

Demo: https://t.co/2GzT8RvCcG

[Prabashwara Seneviratne @realbashlk]

I give up. I can't stop time. Not with Next.js being so difficult with fake time.

Instead we will have tests that break every year 😅

[Prabashwara Seneviratne @realbashlk]

My fight against time continues as I still can't get Next.js to run well with fake time.

Spent a long time digging into why the site was not showing in cypress only to find that using cy.clock() to set a fake time causes Next to not render 🤦‍♂️
https://t.co/uPHRVQwAeH

[Prabashwara Seneviratne @realbashlk]

@BradyRyun Do you think that it helped?

[Prabashwara Seneviratne @realbashlk]

Devised a hack that overrides the Date global when running in Next in a test env. It works but I don't like it.

The other option is to make the tests calculate past / future time relative to present time which seems like a bad idea. What do you think?

[Prabashwara Seneviratne @realbashlk]

Started adding integration tests. The site has a lot of functionality that depends on time so decided to lock all of the components at a specific time. This was surprisingly difficult to do. 👇

[Prabashwara Seneviratne @realbashlk]

Managed to set the time on the browser through Cypress's cy.clock but then Next started complaining about hydration errors due to mismatches between SSR and CSR HTML since Next kept running on real time.

[Prabashwara Seneviratne @realbashlk]

Spent the day getting the Cypress integration tests to run on Github actions.

The solution?
- Get cypress to run in a fixed timezone using the TZ environment variable
- Use Next's preview mode to make it skip caching the result of getStaticProps.

[Prabashwara Seneviratne @realbashlk]

Confidently said during a meeting that we can't style the underline in underlined text with CSS.

But a quick search revealed text-underline-offset, text-decoration-color and text-decoration-thickness🤦‍♂️