Image by the_iop from PixabayConcurrency in programming is the ability to manage and execute multiple tasks or processes at the same time (or appear to), allowing programs to remain responsive and efficient. Think of it like a chef in a busy kitchen: they’re not cooking every dish from start to finish sequentially, but instead chopping vegetables while one pan simmers and another bakes; juggling progress on several tasks concurrently.I’m a frontend engineer at OLX working mostly with React and NextJs, but I also came from a background in which I worked primarily in concurrent programs with…
How thinking in server-first component boundaries can simplify data flow and reduce client JavaScript in Next.js applications.When I first started working with the Next.js App Router, I kept running into the same situation.Components would suddenly break — usually after adding a hook or a click handler. The fix felt obvious: add "use client".But after doing this a few times, I realised something: I was slowly turning my application back into a traditional client-side React app.Which defeats the whole point of React Server Components.The real challenge isn’t learning how to use Client and…
If you can't just use an HTML form, here's how you can get closer and clean up your React form with the React.useActionState hook. Handling form state in React can get hairy. There are additional libraries on top of React to try to deal with this. In React 19, we have a new hook inside of React itself to help us with form state. Hey, accreting more to the React API continues to erode the simplicity of fn (data) => ui, but in this case, it's an improvement. Instead of a bunch of React.useState and handleChange event handlers, we get something more compact to the purpose of form handling.…
A tutorial how to use a monorepo architecture in frontend JavaScript and TypeScript with tools like npm/yarn/pnpm workspaces, Turborepo/NX/Lerna, Git Submodules, ...
A brief walkthrough on how to upgrade Vite from JavaScript to TypeScript. The tutorial assumes that you have already created a React project with Vite in JavaScript. To use TypeScript in React (with Vite), install TypeScript and its dependencies into your application using the command line: npm install typescript @types/react @types/react-dom --save-dev npm install @typescript-eslint/eslint-plugin --save-dev npm install @typescript-eslint/parser --save-dev Add three TypeScript configuration files; one for the browser environment, one for the Node environment, and one to merge both…
In 2022 we announced a new style-agnostic React library called dcx-react-library and today, after almost 3 years of hard work and 14 releases, we happy to share that version 1.0.0 is finally available. What’s new We’ve built more than 35 components organised in 3 different categories: forms, utilities and typography, keeping in mind our main principles: fewer dependencies small bundles fully tested AA accessible I’m pretty sure the main question you’ll be asking yourself is: “why did you decide to make a major release version?” After using the library on our projects, we realised that we sped…
Me and my mentors Patrick & NomnomsIntroductionHi, my name is Navika Budhraja and I’m a rising senior at UC San Diego studying Computer Science. This summer I was a web-frontend engineering intern on the Athlete Services team and consequently, got to learn a lot about how to develop athlete-facing products!During my internship, I worked with 3 other interns, Emily (Server), Sahil (iOS), and Ryan(Android), on a project to add filtering and searching logic to athlete’s saved routes, which in my case, meant working on the My Routes page on the web.“Old” My Routes that I would be improvingLike…
Optional Google Analytics helps us understand visits. Microsoft Clarity records masked interactions to improve the site. Optional tools stay off unless you choose them. Privacy details.