Prabashwara Seneviratne

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. frontendundefined.com/posts/monthly/…

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?

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.

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?

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)

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

The word for "yes" in Czech is the word for "anus" in Spanish. Thanks, @duolingo!

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. frontendundefined.com/posts/monthly/…

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 🤔

@OngDevLab Legacy

@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.

@realbashlk @starting Here's another poorly compatible implementation: you can take advantage of viewTransition's :only-chlid special case implementation. The example implemented in my blog also used this： daydreamer-riri.me/posts/list-ani…

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 🤔

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

@Alex83542898 @gundersen@mastodon.social told me about the experimental @starting-style CSS rule which makes entrance transitions much easier. But it still doesn't have good browser support. caniuse.com/mdn-css_at-rul… Demo: codepen.io/kizu/pen/wvYYm…

@realbashlk I'm also looking for this

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 😅

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 🤦‍♂️ #issuecomment-820359832" target="_blank" rel="nofollow noopener">github.com/vercel/next.js…

@BradyRyun Do you think that it helped?

Losing my blue check soon as I don’t feel it is worth the investment at this time. Too busy on other things.

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?

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.

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. 👇

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.

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🤦‍♂️