Prabashwara Seneviratne's blog about frontend development
Ever since ChatGPT's release in 2022, "AI" is everywhere. It's very tiring. In this post, I thought I would share my experience with LLMs and a few techniques I picked up for getting the most out of them. (If you are in a rush, you can jump straight to the tips ) Surprising moments with LLMs I think the best way to describe my experience with LLMs is to describe the surprising moments I had with…
"Tests are annoying". "They can't even test the visual output properly". "They can never check this functionality". If you asked me about what I thought about tests, this is what I would have told you several years ago. In my past self's defense, testing frontend can seem pointless. The real purpose of the frontend is to render a visual output and there is still no way to programmatically check…
I have written about a variety of topics around frontend and React so far. From now on, I am going to write mostly about how I have survived as a frontend developer. What do you mean? Being a frontend developer is hard for a number of reasons. The techniques keep changing The platforms keep changing The tools keep changing The designs keep changing Hype Complexity Bad advice Outdated advice The…
For the last four months, I stepped away from my usual life in Prague to help my parents with several legal and health issues in Sri Lanka. This took a very heavy toll on me and while taking some time off to recover after getting back to Prague, I thought it might be interesting to share my journey with this blog. So here we go. An unexpected start (Late 2022) In September 2022, I quit my job at…
Managing state is a big part of building a React app. You might already be familiar with managing state in a React single page application (SPA) using state management libraries such as Redux Toolkit or Zustand. But managing state in a Next.js app is quite different. In this post, I will walk you through how you can manage state in a Next.js app. In most cases, you will not need a state management…
While building Next.js apps, we often need to create pages that render different content based on the URL parameters passed to them. In this post, I will walk you through how you can work with URL parameters in Next.js. (Note: The approaches below work only with Next.js's App router. The same functionality can be achieved using the older Pages router but it requires a different approach.) Using…
Cookies are a very useful HTTP feature. In this post, I will walk you through how you can work with cookies in a Next.js project. I will also describe how you can use cookies securely since cookies are not suitable for storing sensitive information by default. A bit about HTTP cookies Setting cookies Setting up server actions Setting cookies in a server action Reading cookies Reading cookies…
Things were not off to a great start. I had just cloned the project and I kept getting this cryptic error message when I tried to install the dependencies using yarn . Running the project returned yet another cryptic error message. After a few hours of digging, I finally figured out what was going on. But we are getting ahead of ourselves. Let's see how we got here. The problem The project needed…
UPDATE: This post was easily misunderstood. Let me offer a few clarifications. I am not presenting a universal solution for managing state in this post. I am only describing how my understanding of state management has changed. Initially, several statements in this post accidentally implied that certain libraries were incapable of certain use cases. I have since removed the offending statements…
This post belongs to a series of posts about state management libraries. You can find more about the series here . Everybody has regrets. As developers, I think many of us regret a few of our technical decisions. One of my biggest regrets is the approach I picked for building the daily quest widget when I worked at Wargaming Prague. (You can read more about this here ) The daily quest widget was a…
This post belongs to a series of posts about state management libraries. You can find more about the series here . I first heard about MobX during a meetup in 2017. The speaker seemed to be very passionate about it. But I soon found myself zoning out as he kept talking about all the jargon in MobX. Observables? Derivations? Reactions? Proxies? It all sounded so complicated. Later, I tried to go…
This post belongs to a series of posts about state management libraries. You can find more about the series here . In 2020, I stepped away from building on the web to build PC game UIs using React . But I missed the web so I came back 2 years later and boy, had things changed. There were dozens of new libraries, frameworks and tools in the React space. As I went through the recommendations from…
I should have written this post two years ago while I was still in Wargaming Prague. But I still think about my time there a lot because it was very different from the work that I have done before or since. In this post, I want to take you to the time when I used React to build the in-game UI of the World of Tanks PC client. (If you prefer watching over reading, you can find the talk I gave about…
Many React apps use a state management library like Redux for managing state. But do you really need one? In this post, I will describe the pros and cons of using a state management library so that you can decide whether using one is worth it. I will also debunk some common myths about state management and give you my take on what you should do. The pros of using a state management library More…
You might have come across the term "state management" while learning about React. But what does it really mean? In this post, I will introduce you to state management in React and how you can get started with it. Why do we need state management? I think the best way to introduce state management is to describe why we need it in the first place. State is a core concept in React. Instead of…
This post belongs to a series of posts about state management libraries. You can find more about the series here . By the end of last post , our sample app, Timo , was finally ready for some experiments. So in this post, let's look at Zustand to see why it has become a favorite in the community. To do this, I will refactor Timo to use Zustand so that we can see what it is like in practice. What is…
When I first started working with React, Redux was pretty much the only library that was used to manage state in React. But that is not the case anymore as I wrote this post in 2024. In this post, I will introduce several React state management libraries to you. Since I can't list every one of them here, I will only go over a few that have markedly different philosophies that are actively being…
Putting a React app online for the first time is an exciting moment. But things often tend to go wrong when you deploy for the first time. Sometimes, React apps could crash to a completely white screen like this one. These white screen crashes often occur due to two main reasons. In this post, I will explain those reasons and walk you through how you can resolve them to get your app working again.…
This post belongs to a series of posts about state management libraries. You can find more about the series here . In the last post , I told you that I was going to add Tanstack Query to Timo to clean up the server state management code. I thought that this would reduce the size of the codebase since Tanstack Query handles a lot of the repetitive logic needed for interacting with a REST API. But…
This post kicks off a series of posts about state management libraries. You can find the other posts in the series here . When I started working with React in 2016, Redux was the go-to option for managing state in a React app. But now there are many other libraries and patterns for managing state. Each of them make bold claims as to why they are the best. So I thought I would try several of them…
If you have a React web app using React router hosted on Netlify, you might run into a "Page Not Found" 404 error page when you refresh or directly load a non root URL. In this post, I will explain why this error happens and how you can fix it . Why does this error occur? This error occurs because React router uses client side routing. Client side routing is a technique where Javascript on a…
If your frontend project uses Vite, you need to create a production build before deploying it to production. To build a Vite project for production, you need to run npm run build in the root folder of the project. The production build will then be generated and placed in the dist folder. Read on to learn more about production builds and how Vite generates them. Why do we need production builds?…
The most popular way of starting a React project is to use a project builder like Create React App (CRA) or Vite . But what if you didn't want to them and the conventions they enforce? In this post, I will walk you through how you can set up a basic React project from scratch by installing and setting up the tools manually. A quick overview of what we need to do To setup a React project from…
If you are setting up a React project from scratch, you need to setup a transpiler such as Babel and a bundler such as Webpack. (If you want to know why we need these tools, you can check out this post ) Both of these tasks can be done by configuring Webpack and here is a basic webpack config that does it. This configuration needs to be placed into a file called webpack.config.js . If you don't…
If you created a React project using Create React App or a custom project template, you might have noticed that it uses Webpack and Babel. But what do they do? In this post, I will explain what each of these tools are and their purpose in a React project. Webpack What is Webpack? What is Webpack used for in a React project? Babel What is Babel? What is Babel used for in a React project? Next steps…
In the last post, I mentioned that I will be doing in-depth reviews of state management libraries for the next few months. To make these reviews thorough, I planned to refactor a real web app each month to use a different library. However, the real projects I am working on are too big for me to refactor in a month. So I had to create a new web app from scratch to use for this series of reviews. To…
If you have been working with React for a while, you might have been tempted to use React context and a state hook ( useState or useReducer ) to manage the global state of your web app. If you can use something that comes with React for free, why would you resort to using a separate library? In this post, I will show you the biggest issue with React context that makes it a poor choice for managing…
I first came across a right to left layout when I was Googling something on the Dubai airport WiFi a few years ago. As a Sinhala and English speaker, I was really surprised. It was hard for me to imagine a language that was read in different direction. But a significant portion of the world uses languages that are read from right to left such as Arabic - Used in Northern africa and the middle…
If your React project uses Create React App (CRA) which is installed as the react-scripts npm package, you need to create a production build before deploying it to production. To build a Create React App project for production, you need to run the npm run build command in the root folder of the project and the production build will be generated and placed in the build folder. Read on to learn more…
If you are using React Router in a React app, you might encounter an HTTP 404 - Not Found error when you refresh or reload a non root ( / ) URL. Why does this happen? By default, web servers and object storage providers serve files from the disk. So when you go to the root / URL, it will try to serve index.html and if you go to /about-us it will serve /about-us/index.html . We usually build…
If you are using Nginx to host a React app with React Router, you might come across a 404 error when you directly load a React Router Route. For example, if you have a route with the path /about-us , it might work when you load the root route / and navigate to /about-us by clicking on a link but it will return a 404 when you try to load /about-us directly Why doesn't this work? This error occurs…
In this post, I will walk you through how you can use docker to set up a development environment for a React project. What is Docker? Why should you use Docker to set up the environment? Pre-requisites Overview of the setup Setting up a development environment for a create-react-app project Adjustments for a Vite project Notes What is Docker? Docker is a containerization platform that allows us to…
If you are using Docker Compose to manage the services of your application, it is convenient to use it to host the React web app itself as well. To do this, there are two approaches that you can follow. Create a custom docker image and use it in Docker Compose (Recommended) Mount a production build of the React app directly into a web server image Let's walk through both approaches. Using a custom…
If you want to use Docker to host your React app, you need to create a Docker image with a production build of your app and a web server to serve it. Here is a sample Dockerfile that does just that. The React app itself is also built within docker so you don't need to worry about setting up a Node.js environment or creating a production build manually. This Dockerfile relies on a custom nginx.conf…
In this post, I will walk you through how you can set up a docker image for your React app. At the end you will have a docker image that can be built and run on any machine that has docker installed without setting up a special development environment. Pre-requisites Creating a docker image Create a Dockerfile Adjust build output folder Add .dockerignore Build the image Running the docker image…
So you started building your React app and you realized that you need someplace to store the data. While you can save the data in the browser using the Web Storage (i.e. localStorage or sessionStorage) or IndexedDB APIs, most React apps store the data on the server or the backend so that it can be loaded on other devices. If you want to set up a backend for your React app, you have two options.…
Many developers use the terms "library" and "framework" interchangeably. But there is a difference and being aware of it can help you make better decisions when using third-party code. What is a library? According to dictionary.com, a library is "a collection of manuscripts, publications and other materials for reading, viewing, listening, study or reference". In programming, a library is a…
Note: Most links on this post use the wayback machine to show how a site looked like at the time. 2015 This was when my journey on the web began as I learnt HTML, CSS, JS and PHP. To complete an university assignment of building an IMDB clone site, I used jQuery and Bootstrap . Binding click events with jQuery's $ global and having an entire component show up with only a few bootstrap classes…
If you are starting out with React, the sheer number of libraries that are used alongside it can be overwhelming. In this post, I will try to provide a short summary of them so that you can orient yourself better. I won't be able to list every single library here but I hope that knowing the landscape will help you know what is out there. (This post was also translated into Korean ) A quick note…
You are trying to update the state of your React app with the useState hook. You call the setState function with the new value but then when you try to use that state, you find that it hasn't updated yet! Here's a counter app with a similar problem. It should increase the count shown in the window and show a popup with the increased count. But the popup still has the old count value. Why is the…
You are making multiple calls to setState from React's useState hook. Perhaps you want to add multiple items into an array that is in that state variable. But only one item is added! Here's a list component with the same problem. Why does this happen? Like I've explained in this post , calling setState does not update the state immediately. It only asks React to do it in the future. So in this…
It takes time to learn. It takes time to get good at what you learn. It takes time to build. It takes time to make whatever you build great. You want it now. You feel bad that you don't have it now. But it still takes time. So give yourself some time. (Related: Teach Yourself Programming in Ten Years )
Learning frontend development can be overwhelming. There are a lot of things to learn and on top of that, you are not sure how much of each thing you should know. With most modern websites being built with frontend frameworks like React, you might be wondering whether you can skip learning Javascript and jump straight into React. While you could jump straight into React without knowing Javascript,…
You know that you need to know Javascript to use React. But how much Javascript should you know? Do you need to learn every concept and master it or can you learn a few basic concepts and then jump into React? In the long term, the more Javascript you know the better. It is the primary programming language of the web and is crucial fundamental knowledge that will help you understand and use…
Despite all the tools we have for debugging frontend code, nothing beats a quick console.log to check the current state of the app. For years, I have temporarily stuffed console.log statements in all nooks and crannies within components and I was surprised when I did the same in a fresh CRA app recently and found it printed twice in the console. Historically, this meant that the component was…
HTML, CSS, and JS are everywhere — on mobile apps, desktop apps, and smart appliances of all shapes and sizes. What if I told you that they are in “AAA” PC/console games too? Check out this talk to see how we use web tech to build game UIs for the popular online multiplayer game, World of Tanks. Presented at WebExpo 2022
As frontend developers, we often need to choose between many libraries and tools. In this post, I will present a few questions and crude checks that can help you make a better decision. What do you want it to do? What other libraries or tools should it work alongside? Is it mature enough? Is it actively maintained? Does its direction align with your use case? What is it like to work with? Docs?…
Concurrent mode is an upcoming feature of React that enables you to keep your apps much more responsive during I/O or CPU bound operations. Get the highlights in this talk. Presented at Reactive Meetup Prague Watch video on YouTube