At work I was assigned a task to handle dynamic form elements with react-hook-form. The trickiest part is that the form could be deeply nested without a limitation on the total number of layers, and binding deeply nested fields to react-hook-form is a hard work, so I ended up adapting an approach that makes binding easier and formats the result on submit.

List virtualization (also called Windowing) is a front-end performance optimization technique that renders only the visible list items in the viewport, rather than all items in the list. The benefit of a virtualized list is the reduced amount of DOM nodes to render, yielding faster load time and less memory used.

I came across this book Advanced React by Nadia Makarevich one day and decided to give it a try. It turns out to be such a wonderful read! This book is informative and contains lots of code examples to help wrap your head around complex ideas. I decided to write down some reading notes for future references.

Cross-Site Request Forgery (CSRF) occurs when attackers trick users into performing unintended actions on a website where they are already authenticated.

Cross Site Scripting (XSS) happens when attackers are able to inject scripts into a website through its vulnerabilities. There are three types of XSS attacks. Today we will look into simple examples to get a basic idea of how these attacks work and ways to mitigate them.

There are many different aspects to consider in order to improve a website’s SEO. So I spent quite some time researching and make this checklist to make optimizing SEO faster and easier in the future.

Caching plays a crucial role in optimizing performance. By setting cache control headers for your resources, you can define specific caching policies for browsers to follow. Effective caching eliminates the need for browsers to re-fetch resources that are not modified, reducing bandwidth usage and improving load speed.

Most objects in JavaScript have an internal property called [[Prototype]], which stores a reference to another object. When a property is accessed and not found on the object itself, the JavaScript engine looks at its prototype, then the prototype's prototype, and so on until the property is found or the end of the prototype chain is reached. This mechanism is known as prototypal inheritance. It allows objects to inherit properties and methods from their prototypes. For example, built-in methods like .hasOwnProperty, .map, and .filter are available on objects because they are inherited from their prototypes, even though they are not explicitly declared on the objects themselves.

Images often have large file sizes, which can significantly impact performance and consume more resources. In this section we will introduce common techniques for handling images with performance in mind.

Fonts are often large and take a while to load. Some browsers hide text until the intended font is downloaded, which could potentially delay First Contentful Print (FCP). Font swapping also poses potential layout shifts when the fallback font and the downlaoded font take up difference space, which affects Cumulative Layout Shift (CLS).