With the scale at which the applications are working today, caching is all over and most of us are already familiar with it. It is very common for all CPUs, browsers, Web Apps, Mobile Apps, DBs to maintain their own cache. As per Amazon, “1 second of load lag time would cost Amazon $1.6 Billion in sales in a year” or for Walmart “When the load time jumps from 1 second to 4 seconds, conversions decline sharply. For every 1 second of improvement, we experience a 2% conversion increase”.
It is important to have a caching layer to ensure blazing…
And it’s huge this time, Get Ready!
React 18 changes are huge as it is focused on user experience and internal architectural changes. React 18 adapts an opt-in adoption strategy, which will enable devs to upgrade to React 18 with minimal or no code changes.
To install the latest React 18 alpha, use the @aplha tag:
npm install react@alpha react-dom@alpha
The official specific dates are not out yet but the release will happen in this order: React 18 Library Alpha → React 18 public beta → React 18 RC → React 18.
Upgrading on the Client
To upgrade to React…
“Give ordinary people the right tools and they will design and build the most extraordinary things.” — Neil Gershenfeld
Visual Studio is one of the most popular IDEs very powerful because of its rich & powerful extension environment which comes from its Marketplace. It provides all the features of both lightweight & heavy-weight IDEs. As a developer, IDE is your bow & extensions are the arrows.
I’ll be targeting extensions useful for web developers but this will also be helpful for others. The extensions I have mentioned are the ones I have used and found amazing. …
Loaders are nothing but the transformation applied to the source code of a module. They are used to handle build steps and acts as a build tool. They have a wide variety of use cases like Converting TS to JS, Loading CSS, loading inline images as data URLs.
Also as webpack would only understand JS so loaders help us convert various assets to JS.
Loaders follow the module resolution & are…
Setting up webpack may seem daunting 🤢 if you are new to it, but my aim behind writing this article is to make it simple for you. This article will be split across parts in which we will be going from zero to hero 😎
Link to GitHub Repo: https://github.com/AbhishekGautam01/webpack-react
create-react-app(CRA) comes really handy to set up a react app with a ton of predefined templates that are wildly popular amongst developers. …
In ES2015 (aka ES6) for the first time a native JS module system was added but the main problem with this is that it is static import meaning it can’t be changed at the runtime and also all imports need to be resolved before JS could execute any code which I feel sucks.
In ES2020 the TC39 approves the proposal for dynamically importing modules. So now instead of having all imports at top of the file, you can import modules whenever required. However, this feature was supported by webpack.
The major benefit which we can get from dynamic imports is…
Since hooks were introduced in React a lot of things have changed from the conventional approach. Due to the capabilities of Hooks, we have redefined how we used to approach certain concepts in React. The intent of this post is to explore possibilities for improving routing experience using Hooks. Here we will be talking about React Router and HookRouter modules.
It’s a very popular declarative way of routing in react. It takes away the pain of manually setting and configuring routes for all pages. It uses 3 major components to help achieve this — Route, Link, BrowserRouter
To define a…