` elements inside it, each with a class of box. These boxes are where we'll apply Flexbox styling. **Basic CSS Styling** Let's start with some basic CSS to style the boxes and the container: ```css * { margin: 0; } .main { background-color: #1b212c; } .box { background-color: #447bbe; color: #f8f8ff; font-size: 30px; padding: 35px; margin: 10px; width: 20px; } ``` **Result:** ## display: flex To turn this basic layout into a Flexbox-powered layout, we’ll need to update the .main class with `flex-box` properties: ```css .main { background-color: #1b212c; display: flex; } ``` **Result:** ## flex-direction: row You might have noticied that just by applying `display: flex`. The layout has changed to row layout. This is because of its default behaviour which is same as adding `flex-direction: row` property. Lets add `flex-direction` property and see how the layout changes. ```css .main { background-color: #1b212c; display: flex; flex-direction: row; } ``` **Result:** After adding the `flex-direction: row` property changes nothing as we are setting it to row which is the default behaviour. ## justify-content Now let's check what `justify-content` propery actually does. ```css .main { background-color: #1b212c; display: flex; flex-direction: row; justify-content: center; } ``` **Result** The `justify-content: center` centers the flex items horizontally within the .main container. It has several values, each controlling the horizontal alignment of flex items within the container: **flex-start:** Aligns items to the start (left) of the container. **flex-end:** Aligns items to the end (right) of the container. **center:** Centers items horizontally in the container. **space-between:** Distributes items evenly with the first item at the start and the last item at the end. **space-around:** Distributes items evenly with equal space around each item. **space-evenly:** Distributes items so that the space between them is equal, including at the edges of the container. These options give you flexibility in how you arrange items horizontally within a Flexbox container. Play around these values to see how the layout in the container changes. ## flex-direction: column Now, lets change `flex-direction` property and see how the layout changes. ```css .main { background-color: #1b212c; display: flex; flex-direction: column; justify-content: center; } ``` **Result:** `flex-direction: column` property has now changed the layout to column format. Don't get confused now thinking why the boxes have gone to the starting of the container. This is where come the property `align-items`. ## align-items This property vertically centers the flex items within the container along the cross axis (which is usually the vertical axis when flex-direction is set to row). Lets update our CSS and see how it changes the layout. ```css .main { background-color: #1b212c; display: flex; flex-direction: column; justify-content: center; align-items: center; } ``` **Result:** The boxes are now align vertically center along the `cross-axis`. The align-items property in Flexbox has several values that control the alignment of flex items along the cross axis (which is usually the vertical axis when flex-direction is set to row). Here’s a list of all the possible values: **flex-start**: Aligns items to the start of the cross axis (top if flex-direction is row). **flex-end**: Aligns items to the end of the cross axis (bottom if flex-direction is row). **center**: Centers items along the cross axis. **baseline**: Aligns items such that their baselines align. This is particularly useful when you want text inside flex items to line up. **stretch**: Stretches items to fill the container along the cross axis. This is the default value. If the items don't have a specific height set, they will stretch to fill the container. Each of these properties gives you control over how flex items are aligned within their container, allowing for a wide range of layout possibilities in responsive design. ## flex-wrap The `flex-wrap` property in Flexbox controls whether flex items are forced into a single line or allowed to wrap onto multiple lines. Now let's see the usage of `flex-wrap` property. Try giving `2` box some `width` and see what happes. You can modify the see file like below & see. ```css * { margin: 0; } .main { background-color: #1b212c; display: flex; } .box { background-color: #447bbe; color: #f8f8ff; font-size: 30px; padding: 35px; margin: 10px; width: 20px; } .b2 { width: 300px; } ``` **Result** You can see that when the screen size is smaller the remaining boxes are overflow from the screen this is due to the default behaviou which sets the `flex-wrap` property to `nowrap`; Now, let give the container a `flex-wrap: wrap` property. So now the boxes are not overflowing from the screen rather they are moved to the new line. ## order Controls the order in which flex items appear in the flex container. The default is `0`, but this can be set to any integer value, positive or negative usually -1 or 1. Lets see it in action. Apply below CSS to the `b2` box. ```css .b2 { order: 1; } ``` The box 2 is now coming after all the items inside the container as we gave the value as 1. Try giving it -1 and see what happens!! ## grow Defines the ability of a flex item to grow if necessary. A value of `1` means the item will grow to fill the container, relative to the other flex items. Add below property for b2 box and see what happens now. ```css .b2 { width: 300px; grow: 1; } ``` Notice how box b2 is now taking all the remaining spaces. ## shrink Defines the ability of a flex item to shrink if necessary. A value of `1` means the item can shrink, relative to the other flex items. Lets modify the css for box b2 and see. ```css .b2 { width: 300px; shrink: 1; } ``` Notice how the box b2 is taking only the required space unlike `grow`. Try minimizing the screen and see how it behaves. ### `flex-basis` Defines the default size of an element before the remaining space is distributed. It can be set to a specific size (e.g., `200px`) or `auto`. Apply the below css to b2 box and see. ```css .b2 { flex-basis: 200px; } ``` `flex-basis: 200px;`: This sets the initial size of the .b2 flex item to 200px before any space distribution occurs based on grow or flex-shrink. This means that .b2 will attempt to take up 200px of space in the flex container. If the container has more or less space, other properties like grow and shrink will determine how the space is adjusted. Test your learning in the below website. ## Conclusion Mastering Flexbox is essential for creating responsive, flexible, and modern web layouts. By understanding properties like flex-grow, flex-shrink, flex-basis, and the shorthand flex, you can control the behavior of your elements within a container, ensuring they adapt seamlessly across different screen sizes. Whether you’re building complex grids or simple navigation bars, Flexbox provides the tools to make your designs robust and user-friendly. For more insights and practical examples on Flexbox and other CSS techniques, stay tuned to our blog and continue refining your web development skills. ]]> https://nishangiri.dev/blog/how-to-web-dev https://nishangiri.dev/blog/how-to-web-dev Sat, 25 May 2024 00:00:00 GMT Web development remains one of the most sought-after skills in the tech industry. Whether you're looking to switch careers or start a new hobby, 2024 is a great year to begin your journey into web development. This guide will walk you through the essential steps and provide resources to help you get started. ## Table of Contents ## **Step 1: Understand the Basics** Before diving into complex frameworks and tools, it's crucial to grasp the basics of web development. These foundational skills will be the building blocks of your learning journey. ### **HTML** HTML (HyperText Markup Language) is the standard markup language for creating web pages. It provides the structure of a webpage. ```html

Hello, World!

This is my first web page.

``` ### **CSS** CSS (Cascading Style Sheets) is used to style and layout web pages. It allows you to add colors, fonts, and spacing to your HTML. ```CSS body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; } h1 { color: #0056b3; } ``` ## **Javascript** JavaScript is a programming language that enables interactive web pages. It allows you to implement complex features such as dynamic content updates, multimedia controls, and animations. ```js document.querySelector("h1").textContent = "Hello, JavaScript!"; ``` ## Recommended Resources - - - ## **Step 2: Choose a Development Path** Web development can be broadly categorized into three paths: front-end, back-end, and full-stack development. ## **Front-End Development** Front-end developers focus on the client-side of web applications, dealing with the layout, design, and interactivity of a site. ## Key Technologies: - [HTML, CSS, JavaScript] - [Frameworks: React, Vue, Angular] ## **Back-End Development** Back-end developers work on the server-side, dealing with databases, server logic, and application architecture. ## Key Technologies: - [Node.js, Express.js] - [Databases: SQL (MySQL, PostgreSQL), NoSQL (MongoDB)] ## **Full-Stack Development** Full-stack developers have the skills to work on both the front-end and back-end of web applications. ## Key Technologies: - [Combination of front-end and back-end technologies] ## **Step 3: Learn Front-End Development** To get started with front-end development, you need to learn HTML, CSS, and JavaScript, along with one or more front-end frameworks. ## **React** is a popular JavaScript library for building user interfaces. It allows you to create reusable UI components. ```jsx import React from "react"; import ReactDOM from "react-dom"; function App() { return

Hello, React!

; } ReactDOM.render(, document.getElementById("root")); ``` ## Recommended Resources: - - ## **Step 4: Learn Back-End Development** To handle server-side logic and databases, you need to learn back-end technologies. ## **Node.js and Express.js** is a JavaScript runtime built on Chrome's V8 JavaScript engine. is a web application framework for Node.js. ```js const express = require("express"); const app = express(); app.get("/", (req, res) => { res.send("Hello, Node.js and Express!"); }); app.listen(3000, () => { console.log("Server is running on port 3000"); }); ``` ## Recommended Resources: - - ## **Databases** You need to understand how to work with databases to store and retrieve data. ## Key Technologies: - [SQL: MySQL, PostgreSQL] - [NoSQL: MongoDB] ## Recommended Resources: - - ## **Step 5: Version Control with Git** Version control is essential for tracking changes in your code and collaborating with others. ## **Git** is a version control system that lets you manage and keep track of your source code history. ```Git # Initialize a new Git repository git init # Add files to the staging area git add . # Commit changes git commit -m "Initial commit" ``` ## Recommended Resources: - - ## **Step 6: Build Projects** The best way to learn web development is by building projects. Start with simple projects and gradually move to more complex ones. ## **Project Ideas for Beginners** - [Personal portfolio website] - [To-do list application] - [Weather app using a weather API] ## **Showcasing Projects** Create a portfolio to showcase your projects. Use platforms like GitHub Pages, Netlify, or Vercel to host your projects. ## **Step 7: Stay Updated and Join Communities** Web development is a rapidly evolving field. Stay updated with the latest trends and technologies by following blogs, joining communities, and participating in discussions. ## Recommended Communities - - - ## **Stay Updated** - Follow web development blogs and news sites. - Attend webinars, workshops, and conferences. --- ## Conclusion Starting your journey in web development in 2024 is an exciting and rewarding endeavor. By following these steps and utilizing the recommended resources, you can build a solid foundation and progress to more advanced topics. Remember, consistency and practice are key to becoming a proficient web developer. --- **Happy Coding!** 😊]]> https://nishangiri.dev/blog/micro-frontend https://nishangiri.dev/blog/micro-frontend Sat, 17 May 2025 00:00:00 GMT Micro frontends allow large teams to build and deploy independently scalable frontend applications. In this blog, I’ll walk you through how I built a micro frontend architecture using **Webpack Module Federation**, **Docker**, and **NGINX**, based on a real-world project. --- ## What Is Micro Frontend Architecture? Micro frontends break a monolithic frontend into smaller, independently deployable pieces. Each team can own and deploy their part of the frontend. **Example structure:** - `mfe-host` (container app + shared components/utilities) - `mfe1` (remote) - `mfe2` (remote) --- ## Structuring the Repositories ``` - mfe-host/ - mfe1/ - mfe2/ ``` Each MFE is an isolated React app with its own Webpack config and deployment pipeline. --- ## 🔧 Basic Webpack Setup To better manage environment-specific configurations, we use `webpack-merge` to separate common, development, and production settings for both the Host and MFE1 apps. First, install the dependency: ``` npm i webpack-merge ``` We’ll define three config files per app: - `webpack.common.js` - `webpack.dev.js` - `webpack.prod.js` ### Host MFE Configuration **webpack.common.js** ```js const { ModuleFederationPlugin } = require("webpack").container; const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", resolve: { extensions: [".js", ".jsx"] }, plugins: [ new ModuleFederationPlugin({ name: "mfe_host", remotes: { mfe1: "mfe1@http://localhost:3001/remoteEntry.js", mfe2: "mfe2@http://localhost:3002/remoteEntry.js", }, shared: ["react", "react-dom"], }), new HtmlWebpackPlugin({ template: "./public/index.html" }), ], }; ``` **webpack.prod.js** ```js const { merge } = require("webpack-merge"); const common = require("./webpack.common"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); const TerserPlugin = require("terser-webpack-plugin"); module.exports = merge(common, { mode: "production", plugins: [new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" })], optimization: { minimize: true, minimizer: [new TerserPlugin(), new CssMinimizerPlugin()], splitChunks: { chunks: "all" }, }, }); ``` **webpack.dev.js** ```js const { merge } = require("webpack-merge"); const common = require("./webpack.common"); module.exports = merge(common, { mode: "development", devServer: { port: 3000, historyApiFallback: true, hot: true, }, devtool: "eval-source-map", }); ``` ### Remote MFE1 Configuration **webpack.common.js** ```js const { ModuleFederationPlugin } = require("webpack").container; const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", resolve: { extensions: [".js", ".jsx"] }, plugins: [ new ModuleFederationPlugin({ name: "mfe1", filename: "remoteEntry.js", exposes: { "./Page": "./src/pages/Page", }, shared: ["react", "react-dom"], }), new HtmlWebpackPlugin({ template: "./public/index.html" }), ], }; ``` **webpack.prod.js** ```js const { merge } = require("webpack-merge"); const common = require("./webpack.common"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); const TerserPlugin = require("terser-webpack-plugin"); module.exports = merge(common, { mode: "production", plugins: [new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" })], optimization: { minimize: true, minimizer: [new TerserPlugin(), new CssMinimizerPlugin()], splitChunks: { chunks: "all" }, }, }); ``` **webpack.dev.js** ```js const { merge } = require("webpack-merge"); const common = require("./webpack.common"); module.exports = merge(common, { mode: "development", devServer: { port: 3001, historyApiFallback: true, hot: true, }, devtool: "eval-source-map", }); ``` ## 🌍 Using Environment Variables Across Environments You’ll often want different values for API endpoints, feature flags, or keys in local, dev, and production environments. ### Step 1: Create `.env` files in each project root ``` .env.development .env.production .env.local ``` Example content for `.env.development`: ```bash REACT_APP_API_URL=http://localhost:4000 ``` ### Step 2: Install dotenv plugin (for custom Webpack) ```bash npm install dotenv-webpack --save-dev ``` ### Step 3: Configure in Webpack ```js const Dotenv = require("dotenv-webpack"); plugins: [new Dotenv({ path: "./.env.development" })]; ``` Alternatively, in Create React App (CRA), variables prefixed with `REACT_APP_` are auto-injected. > ⚠️ Never include sensitive data like secrets or tokens in these files. --- ### Environment-Specific Execution To specify environment files dynamically in your commands, you can set the `DOTENV_CONFIG_PATH`: ```bash npm install dotenv-cli --save-dev ``` Then update scripts like this: ```json "scripts": { "start:dev": "dotenv -e .env.development -- webpack serve --config webpack.dev.js", "start:prod": "dotenv -e .env.production -- webpack --config webpack.prod.js", "build:dev": "dotenv -e .env.development -- webpack --config webpack.dev.js", "build:prod": "dotenv -e .env.production -- webpack --config webpack.prod.js" } ``` This ensures the right environment variables are injected based on the context of the command. --- ## 🐳 Basic Docker Setup **Dockerfile** ```Dockerfile FROM node:18 AS build WORKDIR /app COPY . . RUN npm install && npm run build FROM nginx:alpine COPY --from=build /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/nginx.conf ``` **Build & Run** ```bash docker build -t mfe1 . docker run -d -p 3001:80 mfe1 ``` --- ## 🌐 Basic NGINX Configuration ```nginx server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html; } location /remoteEntry.js { add_header Cache-Control "no-cache"; } } ``` ## 🔌 Essential Webpack Plugins ```js const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); plugins: [ new HtmlWebpackPlugin({ template: "./public/index.html" }), new CleanWebpackPlugin(), ]; ``` --- ## 🚀 Production Optimization Techniques ```js const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const webpack = require('webpack'); plugins: [ new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }), new CompressionPlugin({ algorithm: 'gzip' }), new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false }), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }), new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }), new webpack.optimize.ModuleConcatenationPlugin(), ]; optimization: { minimize: true, minimizer: [new TerserPlugin(), new CssMinimizerPlugin()], splitChunks: { chunks: 'all' }, }; ``` --- ## ✅ Conclusion Start with a working micro frontend setup, then incrementally layer in optimizations to make it production-grade. From module federation to caching strategies and bundling best practices—each part matters. ]]> https://nishangiri.dev/blog/react-19-release-notes https://nishangiri.dev/blog/react-19-release-notes Sun, 08 Dec 2024 00:00:00 GMT The React team has launched **React 19**, bringing powerful features to enhance performance, simplify development, and improve user experience. This release is packed with tools that streamline building modern web apps while keeping React as intuitive as ever. If you’re a developer working with **ReactJS**, **React Server Components**, or looking to improve your **React app performance**, this guide will walk you through everything React 19 offers. --- ## 🚀 **What’s New in React 19?** ### 1. **Introducing Actions: Simplifying State and Data Mutations** One of the standout features in React 19 is **Actions**, designed to make **asynchronous operations** like form submissions and data mutations easier. **Why Actions are game-changing:** - No need for manual state management during async operations. - Automatically handles loading states, errors, and optimistic updates (i.e., showing the update before server confirmation). Here’s an example: ```javascript "use client"; import { useFormStatus } from "react"; function SubmitButton() { const { pending } = useFormStatus(); return