New Blogs added

kartikmahajan5688 · May 9, 2024 · f0b63b6 · f0b63b6
1 parent a42fdca
commit f0b63b6
Show file tree

Hide file tree

Showing 17 changed files with 126 additions and 13 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+/next.config.js
 /.pnp
 .pnp.js
 

diff --git a/components/home-page/hero.js b/components/home-page/hero.js
@@ -15,8 +15,7 @@ const Hero = () => {
  </div>
  <h1>Hi, I'm Kartik</h1>
  <p>
- I blog about web development - especially frontend frameworks like
- Angular or React
+ I blog about Full Stack Web Development - especially MERN stack
  </p>
  </section>
  );

diff --git a/components/layout/logo.js b/components/layout/logo.js
@@ -2,7 +2,7 @@ import React from "react";
 import classes from "./logo.module.css";
 
 const Logo = () => {
- return <div className={classes.logo}>Kartik' Next Blog</div>;
+ return <div className={classes.logo}>Kartik's Next Blog</div>;
 };
 
 export default Logo;
diff --git a/components/layout/main-navigation.js b/components/layout/main-navigation.js
@@ -12,10 +12,10 @@ const MainNavigation = () => {
  <nav>
  <ul>
  <li>
- <Link href="/posts">Posts</Link>
+ <Link href="/posts">All Posts</Link>
  </li>
  <li>
- <Link href="/contact">Contact</Link>
+ <Link href="/contact">Contact me</Link>
  </li>
  </ul>
  </nav>

diff --git a/next.config.js b/next.config.js
@@ -5,7 +5,7 @@ module.exports = (phase) => {
  return {
  env: {
  mongodb_username: "kartikmahajan5688",
- mongodb_password: "CQ53Z7T3o2Wb2BHP",
+ mongodb_password: "9805445174",
  mongodb_clustername: "cluster0",
  mongodb_database: "nextjs-blogs-dev",
  },
@@ -15,7 +15,7 @@ module.exports = (phase) => {
  return {
  env: {
  mongodb_username: "kartikmahajan5688",
- mongodb_password: "CQ53Z7T3o2Wb2BHP",
+ mongodb_password: "9805445174",
  mongodb_clustername: "cluster0",
  mongodb_database: "nextjs-blogs",
  },

diff --git a/pages/index.js b/pages/index.js
@@ -8,7 +8,7 @@ const HomePage = (props) => {
  return (
  <Fragment>
  <Head>
- <title>Kartik' Blog</title>
+ <title>Kartik's Blog</title>
  <meta
  name="description"
  content="I post about programming and web development"

diff --git a/posts/getting-started-with-nextjs.md b/posts/getting-started-with-nextjs.md
@@ -29,5 +29,3 @@ In this article, we'll dive into the core concepts and features NextJS has to of
 ## File-based Routing
 
 ![Create routes via your file + folder structure](nextjs-file-based-routing.png)
-
-... More content ...
diff --git a/posts/mastering-javascript.md b/posts/mastering-javascript.md
@@ -18,6 +18,4 @@ function printBasics() {
 }
 
 printBasics();
-```
-
-Learn more about it [here](https://academind.com).
+```
diff --git a/posts/mern-stack.md b/posts/mern-stack.md
@@ -0,0 +1,19 @@
+---
+title: Reasons To Adopting A MERN Stack In 2024
+excerpt: Thе MERN stack is a popular web development framework that simplifiеs building full-stack and dynamic web interfaces and wеb applications. The MERN full form is MongoDB, Exprеss.js, Rеact.js, and Nodе.js—each representing a key technology in thе stack and these all are JavaScript libraries.
+image: mernstack-thumb.png
+isFeatured: true
+date: "2024-05-09"
+---
+
+## Introduction 
+
+MongoDB is a NoSQL databasе, providing flеxibility in data storagе. Exprеss.js is a back-end web application framework for Nodе.js, streamlining sеrvеr-sіdе web application dеvеlopmеnt. Rеact.js is a front-еnd library or front end javascript framework for building user interfaces. It enable efficient rendering and handling of components. Nodе JS runtime environment, allowing sеrvеr-sіdе execution using JavaScript.
+
+Togеthеr, thеsе technologies form a powerful full stack development framework for developing modern, scalablе, and rеsponsivе web applications. Developers benefit from a unified JavaScript language across thе еntirе stack, encouraging a smoother dеvеlopmеnt process and facilitating the creation of feature-rich, rеal-timе wеb applications.
+
+![Create routes via your file + folder structure](why-mernstack.png)
+
+## Conclusion
+
+So, that is all about why you need to choose MERN stack for your next web application development. Additionally, thе sеamlеss intеgration, community support, and scalability makе it an idеal choicе for building modеrn, dynamic wеb applications. The MERN components together create an efficient development environment.
diff --git a/posts/optimizing-react.md b/posts/optimizing-react.md
@@ -0,0 +1,25 @@
+---
+title: Tips for optimizing React performance in 2024
+excerpt: When working with a React Js application, developers and product owners frequently worry about performance problems. They are unable to utilise React framework’s magnificent advantages because of this unpopular belief.
+image: optimizing-react-thumb.png
+isFeatured: true
+date: "2024-05-05"
+---
+
+## Introduction
+
+No user will want to waste their time on a web application that requires excessive patience from them. Time is a valuable resource. React is a well-liked framework that programmers trust for fast rendering. React is used by well-known companies like LinkedIn, DropBox, CSDN, Baidu, and others because of this.
+
+Developers can intelligently and actively ensure React performance optimisation approaches by taking a few key measures into consideration and indicating them. React, however, even renders many irrelevant components resolving such speed difficulties.
+
+## Proven Ways to Improve & Boost React Performance
+
+![Create routes via your file + folder structure](optimizing-react-thumb2.png)
+
+Making incorrect async calls when you write React code over time leads to a rise in the bundle size of a React-based progressive web application. The longer loading time of the React application is a direct result of the larger bundle size.
+
+The build size of the programme can be optimised using a few tools and tricks, nevertheless, to reduce the loading time. To get around the expensive DOM operations, there are excellent React performance optimisation approaches that we suggest. Discover how. To get around the expensive DOM operations, there are excellent React performance optimisation approaches that we suggest. Discover how.
+
+## Conclusion
+
+We hope you will follow and put into practice the React app performance optimization advice that we have offered in this blog now that you have a clear understanding of React performance challenges and React performance techniques.
diff --git a/posts/virtual-dom.md b/posts/virtual-dom.md
@@ -0,0 +1,73 @@
+---
+title: Virtual DOM in React
+excerpt: Virtual DOM is a fundamental React concept which helps React to improve the re-rendering performance whenever the DOM is updated. In this article, we will cover what the virtual DOM is, exploring its benefits using a practical example. Let’s get started!
+image: virtual-dom-thumb.png
+isFeatured: true
+date: "2024-04-27"
+---
+
+## What is the DOM?
+
+Before starting with virtual DOM, let’s refresh our knowledge about what DOM is.
+
+DOM stands for Document Object Model. It is a programming interface that allows us to create, change or remove elements from the document.
+
+When a user requests a webpage, the browser receives an HTML document for that page and it then constructs a tree like structure from the HTML to show the page. This tree-like structure is DOM where every node represents an HTML element.
+
+## Disadvantages of DOM:
+
+Every time the DOM gets updated, the updated element and its children have to be rendered again to update the UI of page.
+
+Let’s take a simple example,
+
+document.getElementById('some-id').innerValue = 'updated value';
+When the above code is executed, the DOM undergoes the following steps:
+
+1. The browser locates the HTML element with the specified id.
+2. It removes any child elements from that particular element.
+3. The element is updated with the ‘updated value’.
+4. The CSS for both parent and child elements is recalculated.
+5. The layout is updated.
+6. Finally, the DOM is painted on the screen.
+
+Recalculating the CSS and updating the layout involves complex algorithms and affects the performance. So react uses the Virtual DOM.
+
+How is the virtual DOM different from real DOM?
+As the name suggests, the virtual DOM is a lightweight replica of the actualht DOM. The virtual DOM can be saved in the browser memory and doesn’t change what is on the user screen. It provides a mechanism that allows the actual DOM to compute the minimal DOM operations while re-rendering the UI.
+
+There are two phases in the React DOM strategy, rendering and reconciliation.
+
+When an HTML element is updated, the virtual DOM is updated. Then React compares the virtual DOM with the snapshot of the virtual DOM taken just before the update, determines what element was changed and then updates only that element in the actual DOM. This is how the re-rendering is optimised.
+
+Let’s consider the following HTML code and assume that the page gets re-rendered after certain interval of time.
+
+```js
+<div>
+ <h3> Current Time </h3>
+ <span> Time: {new Date().toLocaleString()} </span>
+</div>
+```
+
+![Create routes via your file + folder structure](virtual-dom-thumb2.png)
+
+React’s render() function creates the tree like structure. The initial render is seen on the left-hand side of the above image. When the state is updated, render() provides the new tree on right with updated time. Then it uses the diffing algorithm to determine the difference between both the trees. This process is called Reconciliation.
+
+After the reconciliation process, React uses a renderer library which takes this information and renders the new DOM ensuring that only updated nodes are modified in the actual DOM.
+
+Updates to the real DOM are sent in batches instead of updating it after every single change which leads to increased performance.
+
+React also provides a set of life cycle methods that allow developers to control the reconciliation process, such as shouldComponentUpdate and forceUpdate, which can be used to optimise the performance of components.
+
+## Diffing Algorithm
+
+The diffing algorithm checks nodes in two virtual DOM trees by starting from the root node and recursively going through each node.
+
+If a node in the old virtual DOM tree matches a node in the new virtual DOM tree in type and props, it is considered unchanged, and its children are checked next.
+
+If a node in the new virtual DOM tree differs from the corresponding node in the old virtual DOM tree, it is considered changed, and the relevant part of the real DOM is updated.
+
+React has a method to speed up the comparison process by using keys on elements. By assigning a key to an element, React can match elements in the old and new virtual DOM trees using the key, instead of comparing the entire tree. This helps React quickly identify which elements have been modified and which have not, leading to quicker and more effective updates.
+
+## Conclusion
+
+In conclusion, the Virtual DOM is one of the important concepts in React which boosts its speed and efficiency. It allows efficient updates in the UI improving the overall performance of React.
diff --git a/public/images/posts/mern-stack/mernstack-thumb.png b/public/images/posts/mern-stack/mernstack-thumb.png
diff --git a/public/images/posts/mern-stack/why-mernstack.png b/public/images/posts/mern-stack/why-mernstack.png
diff --git a/public/images/posts/optimizing-react/optimizing-react-thumb.png b/public/images/posts/optimizing-react/optimizing-react-thumb.png
diff --git a/public/images/posts/optimizing-react/optimizing-react-thumb2.png b/public/images/posts/optimizing-react/optimizing-react-thumb2.png
diff --git a/public/images/posts/virtual-dom/virtual-dom-thumb.png b/public/images/posts/virtual-dom/virtual-dom-thumb.png
diff --git a/public/images/posts/virtual-dom/virtual-dom-thumb2.png b/public/images/posts/virtual-dom/virtual-dom-thumb2.png