This is not a 'how to' post but an answer to a frequently asked question. My blog was originally made with WordPress. I came across Docusaurus, an open-source static site generator for documentation sites. I thought of using that for my blog because my tech blog also works like documentation.
The best part is, all the pages are statically generated and they load up instantly with a click of a button. Docusaurus is built on top of React and JavaScript, so it's yet another reason to use it.
A local development environment is where all the development happens, after which devs push it to a live production server. In this article, you will set up a local web development environment on your computer for building modern web apps in Node.js and React. This setup is also suitable for other frontend frameworks like Vue, Angular, and Svelte.
When building web apps, you will come across dynamic data created by your app or fetched by a third-party API. JSON is the universal data format for software, so if you master JSON, you will be a dangerous frontend engineer.
My article is all about mastering JSON with ReactJS so strap in!
In this quick tutorial, I will walk you through some of the best ways you can compress images for Reactjs for huge performance wins.
As you can see on the cover image, the original file was 65 kB, and after compression, I got it down to 5 KB, that’s over 80% saving for just one image file.
This file is from one of my side projects ReactionPoll, where I make use of a bunch of Facebook and Linkedin reaction icons. My original reaction set for Facebook was 155 kB and after optimizing them, I got it to just 35 kB!
You probably know about the react-ga npm package but the sad news is, it does not work with the latest Google Analytics 4 version. It works with the old UA-0000-01 tags, but not with the G-XXXXXX tags. I’m sure an updated version of the package will solve it, but for the time being, I found a better and a working method of adding GA to your React application. And it’s so obvious, you will feel like, "why didn’t I think about it before?"
So how to add the new Google Analytics 4 in Reactjs app? You simply copy the Google Analytics script tag into the <head> section of your index.html file in the public directory.
Yeah, I know right, it’s that obvious. I found it by trial and error. If you stick around, I will show you a step-by-step guide and also give you a glimpse at how did I figure it out.
I was looking into the periodic table and trying to memorize all the elements in order. One afternoon I thought, hey can I make the periodic table with my current CSS skills?
The periodic table is a collection of elements arranged in an oddly structured way. It has already been built in the past, but the question is, can I do it myself without looking?
For those who don’t know, MERN stands for Mongo database, Express framework, React.js framework and Node.js runtime environment. Together they create a software stack for building custom web application.
Now that’s all the technical stuff, let me share what’s exactly I mean by all this..