DEV Community: Vineeth.TR

🧹 How to Delete All Local Git Branches Except the Current One

Vineeth.TR — Mon, 19 May 2025 08:51:10 +0000

Working with Git for a while? Your local repository might be cluttered with old branches you no longer need.

If you're tired of cleaning them one by one, here's a one-liner to delete all local Git branches except the one you're currently on. 🧼

✅ The Command

git branch | grep -v "$(git rev-parse --abbrev-ref HEAD)" | xargs git branch -D

🧠 What It Does

Let's break it down step by step:

🔍 `git rev-parse --abbrev-ref HEAD`

This gives you the name of the current branch you're on.

main

📋 `git branch`

Lists all local branches, like so:

  feature/login
  feature/profile
* main

🔎 `grep -v "$(git rev-parse --abbrev-ref HEAD)"`

This removes (filters out) the current branch from the list. -v means "exclude matching lines".

🧹 `xargs git branch -D`

This force-deletes (-D) each branch passed in from the previous output.

⚠️ Warning

This command will force delete all local branches except your current one. That means:

Any unmerged changes in those branches will be lost.
This does not affect remote branches.
Use with caution.

If you want to be safe, replace -D with -d:

git branch | grep -v "$(git rev-parse --abbrev-ref HEAD)" | xargs git branch -d

This will only delete branches that have been merged into the current branch.

📦 Pro Tip: Make it an Alias

If you find yourself using this often, add it to your shell aliases:

alias git-clean-branches='git branch | grep -v "$(git rev-parse --abbrev-ref HEAD)" | xargs git branch -D'

Then just run:

git-clean-branches

🚀 Summary

When you're done with old branches and want to keep your workspace clean, this one-liner saves you from deleting each branch manually.

No more:

git branch -d branch1
git branch -d branch2

Just one command and your local branches are tidy again. 👌

Create a Custom React Hook to Persist URL Query Params with `react-router-dom`

Vineeth.TR — Mon, 19 May 2025 06:10:42 +0000

When working with query parameters in your React app, especially in tools like filters, pagination, or search inputs, you often want to persist those query parameters as users navigate across different views.

In this post, you'll learn how to build a simple and reusable custom React hook using react-router-dom that preserves query parameters during route changes.

🛠 The Problem

Imagine you're on a URL like:

/products?category=books&page=2

Now you click on a product to go to its detail page:

navigate('/products/123')

💥 Boom! You lose your query params. When the user clicks the back button, they're dropped on /products instead of where they left off (/products?category=books&page=2).

✅ The Solution

Let’s fix that by creating a useNavigateWithQuery hook.

This hook wraps React Router’s useNavigate and useLocation to preserve the existing query params from the current route.

// useNavigateWithQuery.ts
import { NavigateOptions, useLocation, useNavigate } from 'react-router-dom';

/**
 * A custom hook that wraps the `useNavigate` hook from `react-router-dom`.
 * It preserves the current query parameters from the URL when navigating to a new route.
 * If the target URL already includes query parameters, it appends the existing ones.
 */
const useNavigateWithQuery = () => {
    const navigate = useNavigate();
    const location = useLocation();

    return (to: string, options: NavigateOptions = {}) => {
        const query = location.search;
        const separator = to.includes('?') ? '&' : '?';
        navigate(`${to}${query ? separator + query.slice(1) : ''}`, options);
    };
};

export default useNavigateWithQuery;

🧪 How to Use It

Now, instead of using useNavigate directly, import and use your new hook:

import useNavigateWithQuery from './hooks/useNavigateWithQuery';

const ProductList = () => {
    const navigateWithQuery = useNavigateWithQuery();

    const handleProductClick = (productId: string) => {
        navigateWithQuery(`/products/${productId}`);
    };

    return (
        <ul>
            <li onClick={() => handleProductClick('123')}>View Product 123</li>
        </ul>
    );
};

✨ Done! Now if your current page has query params, they'll be automatically carried over to the next route.

🔍 Bonus: Handling Explicit Query Params

Let’s say you’re navigating to a URL that already has its own query params:

navigateWithQuery('/search?sort=desc');

The hook will append the existing query from the current route:

/search?sort=desc&category=books&page=2

It intelligently handles adding ? or & based on whether the to route already includes query parameters.

🚀 Wrap Up

This small but mighty hook helps preserve UX context when navigating across routes in your app. It’s especially useful when building dashboards, admin panels, or anything with filters and pagination.

Let me know if you’d like to see a version that merges or filters specific query params!

Happy coding! 💻

🚀 Dockerizing a React Application with Nginx

Vineeth.TR — Tue, 11 Mar 2025 05:55:37 +0000

When developing React applications, using Docker ensures consistency across different environments. Instead of running React with npm start, we can serve the production build using nginx, improving performance and efficiency.

In this post, we will:

- Create a Dockerfile to build and serve a React application using nginx.
- Write a custom nginx.conf to properly serve the React app.
- Use docker-compose.yml to run the containerized application.

📌 Project Structure

Your project should have the following structure:

/my-react-app
 ├── src/               # React source files
 ├── node_modules/      # Installed dependencies
 ├── public/            # Public assets
 ├── package.json       # Dependencies and scripts
 ├── Dockerfile         # Docker configuration
 ├── docker-compose.yml # Docker Compose setup
 ├── nginx.conf         # Nginx configuration

We will try model

Run React application in dev mode docker
Build & Run React application in prod mode with nginx docker

🌱 Run React application in dev mode docker

Here’s the Dockerfile and docker-compose.yml setup for your React application. This will allow you to run your app in a containerized environment and access it on http://localhost:3000.

🛠 Step 1: Create the `Dockerfile`

This Dockerfile will:

Use node:23 to build the React app.
Use nginx to serve the production-ready app.

# Use Node.js image as the base image
FROM node:23-alpine AS build-stage

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the entire project to the working directory
COPY . .

# Expose the port React runs on
EXPOSE 3000

# Start the React application
CMD ["npm", "start"]

⚙️ Step 2: Create `docker-compose.yml`

This allows us to run the containerized application easily.

version: "3.8"

services:
  react-app:
    container_name: react_app
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    stdin_open: true
    tty: true

🧇 Build & Run React application in prod mode with nginx docker

This setup ensures that our React application runs efficiently in production with nginx.

🛠 Step 1: Create the `Dockerfile`

This Dockerfile will:

Use node:23 to build the React app.
Use nginx to serve the production-ready app.
Copy the built files into the nginx server.


# Use Node.js image to build the React app
FROM node:23-alpine AS build-stage

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the entire project
COPY . .

# Build the React app
RUN npm run build

# Use Nginx to serve the build files
FROM nginx:alpine

# Copy the built files from the previous step
COPY --from=build /app/build /usr/share/nginx/html

# Copy the custom Nginx configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Expose port 3000
EXPOSE 3000

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

🔧 Step 2: Create `nginx.conf`

This file ensures that nginx correctly serves the React app, handling routes properly.

server {
    listen 3000;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri /index.html;
    }

    error_page 404 /index.html;

    location /api/ {
        proxy_pass http://backend:5000;  # Modify if you have a backend service
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

⚙️ Step 3: Create `docker-compose.yml`

This allows us to run the containerized application easily.

version: "3.8"

services:
  react-app:
    container_name: unified_portal_c
    build: .
    ports:
      - "3000:3000"
    restart: always

🚀 Running the Application

Now that everything is set up, follow these steps to run your React app in a Docker container:

1️⃣ Build and start the container

docker-compose up --build

2️⃣ Open in your browser

http://localhost:3000

3️⃣ Stop the container

docker-compose down

VS Code Extension Development Tips

Vineeth.TR — Tue, 12 Nov 2024 06:00:03 +0000

Getting Started with VS Code Extension Development: Tips and Tricks

Prerequisites

To begin developing VS Code extensions, ensure that you have the latest versions of Node.js, the VS Code application, and Git installed.

Getting Started

Kick off your VS Code extension project by using Yeoman and the VS Code Extension Generator to scaffold a project. You can choose either TypeScript or JavaScript as your project language.

Quick Setup (without global Yeoman installation):

npx --package yo --package generator-code -- yo code

Full Setup (with global Yeoman installation):

npm install --global yo generator-code
yo code

For a TypeScript project, select the following options:

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? HelloWorld
# (Press <Enter> for default options below)
? What's the identifier of your extension? helloworld
? Initialize a git repository? Yes
? Bundle the source code with webpack? No
? Which package manager to use? npm

Open src/extension.ts in your editor, press F5, or run Debug: Start Debugging from the Command Palette (⇧⌘P). This will compile and launch your extension in a new Extension Development Host window. To test it, run the Hello World command from the Command Palette in the new window.

Sample Development

Microsoft has created a variety of sample extensions to help you get started:

For the full repository of samples, visit VS Code Extension Samples.

Webview UI Toolkit

To streamline UI development, Microsoft provides a Webview UI Toolkit to help your extension match the VS Code theme and UI behavior.

Webview UI Toolkit for Visual Studio Code

The toolkit includes several components:

Using JavaScript Frameworks in Extension Development

You can incorporate frameworks like Angular, Vue, and React into your extension using the Webview UI Toolkit samples:

Webview Development Tips

Icons

For icon design, you can use Codicons, a set of official VS Code icons. If you’re working with React, consider using React Icons.

Auto Build for Webview

While VS Code’s extension watcher detects code changes, it may not catch updates in webview files, especially with TypeScript or frameworks. Use nodemon for efficient change detection and auto-builds.

Install nodemon:
```
npm install nodemon
```

Create a nodemon.json configuration file:

{
  "watch": ["src"],
  "ext": "js,jsx,ts,tsx,scss,css",
  "ignore": ["node_modules/**/*"],
  "exec": "npm run build"
}

Start nodemon:
```
nodemon
```

Refresh Extension

To see webview updates, reload the window by pressing ⌘⇧P and selecting Developer: Reload Window.

Alternatively, you can create a keyboard shortcut:

Press ⌘⇧P to open the panel. Click on the configure keybinding

Click on the pencil icon and create the shortcut you need to use

Footnote

Thanks to Hawk Ticehurst and the Microsoft team for providing samples and references to make VS Code extension development easier!

Enjoy building your VS Code extension! 🎉

Sync Git multiple repositories with shell/bash script

Vineeth.TR — Thu, 01 Aug 2024 17:43:01 +0000

Managing multiple Git repositories can be a hassle, especially when we need to keep them up-to-date with the latest changes. Whether we're working on multiple projects or managing a large monorepo setup, manually cloning and pulling changes can be time-consuming. That's where git-sync.sh comes in!

In this post, I'll introduce git-sync.sh, a simple yet powerful shell / bash script that automates the process of cloning and pulling multiple Git repositories. This script not only saves you time but also provides clear feedback using emojis to indicate the success or failure of each operation.

Why Use `git-sync.sh`?

git-sync.sh is designed to:

Automate Repository Cloning: Check if a repository is already cloned and clone it if not.
Keep Repositories Up-to-Date: Pull the latest changes if the repository is already cloned.
Provide Clear Feedback: Use emojis to show the status of each operation, making it easy to see what happened at a glance.

How to Use `git-sync.sh`

1. Set Up the Script

First, you need to create the git-sync.sh file.

#!/bin/bash

# List of repositories to sync
REPOS=(
  "https://github.com/user/repo1.git"
  "https://github.com/user/repo2.git"
  "https://github.com/user/repo3.git"
)

# Directory where repositories will be cloned/pulled
TARGET_DIR="$HOME/projects"

# Emoji for status
CLONE="⬇️"
CLONE_SUCCESS="⬇️✅"
CLONE_FAILURE="⬇️❌"
PULL="🔄"
PULL_SUCCESS="🔄✅"
PULL_FAILURE="🔄❌"

# Ensure target directory exists
mkdir -p "$TARGET_DIR"

# Function to clone or pull a repository
sync_repo() {
  local repo_url=$1
  local repo_name=$(basename "$repo_url" .git)
  local repo_dir="$TARGET_DIR/$repo_name"

  # Check if the directory already exists
  if [ -d "$repo_dir" ]; then
    echo "$PULL Pull latest changes for  '$repo_name'"
    cd "$repo_dir" || { echo "$PULL_FAILURE Failed to enter directory '$repo_dir'"; return; }
    if git pull; then
      echo "$PULL_SUCCESS Successfully pulled latest changes for '$repo_name'"
    else
      echo "$PULL_FAILURE Failed to pull latest changes for '$repo_name'"
    fi
  else
    echo "$CLONE  Cloning '$repo_name' Repository"
    if git clone "$repo_url" "$repo_dir"; then
      echo "$CLONE_SUCCESS Successfully cloned '$repo_name'"
    else
      echo "$CLONE_FAILURE Failed to clone '$repo_name'"
    fi
  fi
}

# Sync each repository
for repo in "${REPOS[@]}"; do
  sync_repo "$repo"
done

Make sure the script is executable:

chmod +x git-sync.sh

2. Configure the Script

Edit git-sync.sh to include your list of repositories and specify the target directory:

# List of repositories to sync
REPOS=(
  "https://github.com/user/repo1.git"
  "https://github.com/user/repo2.git"
  "https://github.com/user/repo3.git"
)

# Directory where repositories will be cloned/pulled
TARGET_DIR="$HOME/projects"

3. Run the Script

Now, simply run the script:

./git-sync.sh

The script will automatically:

Check if each repository in the list is already cloned in the target directory.
Clone the repository if it's not present.
Pull the latest changes if the repository is already cloned.

4. Status Feedback

The script provides status updates using emojis:

⬇️: Cloning the repository.
⬇️✅: Successfully cloned the repository.
⬇️❌: Failed to clone the repository.
🔄: Pull latest changes from the repository.
🔄✅: Successfully pulled the latest changes.
🔄❌: Failed to pull the latest changes.

Example Output

Here's an example of what the output might look like:

Repository 'repo1' already exists. Pulling latest changes...
🔄✅ Successfully pulled latest changes for 'repo1'

Repository 'repo2' not found. Cloning...
⬇️✅ Successfully cloned 'repo2'

Repository 'repo3' already exists. Pulling latest changes...
🔄❌ Failed to pull latest changes for 'repo3'

Customization

You can customize git-sync.sh to fit your workflow:

Add or Remove Repositories: Modify the REPOS array to include your repositories.
Change Target Directory: Set TARGET_DIR to the desired location.
Customize Emojis: Personalize the emojis used for status feedback.

Troubleshooting

Permission Issues: Ensure the script is executable with chmod +x git-sync.sh.
Access Rights: Make sure you have the necessary SSH keys or credentials for private repositories.
Network Problems: Ensure you have a stable internet connection.

Happy coding! 👨‍💻🎉

Angular Library Dependencies vs PeerDependencies

Vineeth.TR — Wed, 17 Aug 2022 04:13:04 +0000

Dependencies serve many different purposes. Some dependencies are needed to build your project, others are needed when you’re running your program.

Dependencies

The libraries under dependencies are those that your project really needs to be able to work in production. Usually, these libraries have all or part of their code in your final bundle(s).

npm install MY_PACKAGE

yarn add MY_PACKAGE

Adding package dependencies on Angular Library project.

1. Root package.json

Make sure your package added on root package.json dependencies section.

....
  "dependencies": {
      ...
      "MY_PACKAGE": "VERSION"
}

2. Project package.json

The same package should add on the Angular Library project package.json dependencies section also.

....
  "dependencies": {
      ...
      "MY_PACKAGE": "VERSION"
}

3. Project ng-package.json

Package name should added on the Angular Library project ng-package.json allowedNonPeerDependencies array section.

....
  "allowedNonPeerDependencies": [
      "MY_PACKAGE"
]

PeerDependencies

You want to create and publish your own Angular Library so that it can be used as a dependency, you may also need the peerDependencies.

In the package.json file, there is an object called as peerDependencies and it consists of all the packages that are exactly required in the project or application who is downloading and the version numbers should also be the same.

1. Root package.json

Make sure your package added on root package.json dependencies section.

....
  "dependencies": {
      ...
      "MY_PACKAGE": "VERSION"
}

2. Project package.json

The same package should add on the Angular Library project package.json peerDependencies section also.

....
  "peerDependencies": {
      ...
      "MY_PACKAGE": "VERSION"
}

Types Generator

Vineeth.TR — Thu, 14 Jul 2022 07:20:48 +0000

Types generator is a utility tool that will help User to create TS Interfaces from JSON. All you have to do is paste your single object JSON into this Types generator. Types Generator will auto-generate the TS interfaces for you.

You can past array objects also.
App link: Types Generator

CSS Loader / Spinners collection

Vineeth.TR — Wed, 10 Nov 2021 06:53:23 +0000

A general situation that we all might face while going through websites/apps is to wait for some progress or something to get loaded. A most simple solution in such scenarios is to use a loader or spinner to indicate users that something is loading in the background.
Considering this, I tried to create a library having a collection of such loaders/spinners. There are no image dependencies for this library. It's developed using pure CSS. Hence it will load fast and is easily customizable too.

HTML

Each loader has been build on top of a single html tag, so that it is easily portable. Hence more convenient to be intrgrate with projects


<div class="loader"></div>

Video Walkthrough

Please feel free to comment your suggestions and feedbacks on this post discussion or Product Hunt page

Sass Space Generator

Vineeth.TR — Wed, 18 Aug 2021 07:02:29 +0000

Sass Space Generator

In all web project we need deferent spacing class for UI designing like marign-bottom: 15px or padding: 15px
This will help you to generate several spacing classes for margin and padding.

Eg: 'mt-0' , 'pl-5'

How to create


$spacing: 0, 5, 10, 15, 20; // Modify this to generate your spacing classes
$unit: px; // Modify this to specify your unit eg: em, pt, %.

$directions:(
  l: left,
  t: top,
  r: right,
  b: bottom,
  v: top,
  h: left
);
@mixin generateSpacing($prop, $short  ) {
   @each $space in $spacing{
    .#{$short}a-#{$space} { #{$prop}: $space + $unit}
    @each $key,$val in $directions{
      .#{$short}#{$key}-#{$space} {
        #{$prop}-#{$val}: $space + $unit;
        @if $key == v {
          #{$prop}-bottom: $space + $unit;
        }
        @if $key == h {
          #{$prop}-right: $space + $unit;
        }
      }
    }
  }
}
@include generateSpacing(padding , p);
@include generateSpacing(margin , m);

How to Use

If you are not using sass on your project, I have included a basic spacing.css on github, you can use this one.
Or else you can copy this code and and generate css using online sass compiler like SassMeister, Sass.js.

The first letter represents the spacing type ( Margin/Padding).

m : margin

p : padding

The second letter represents the direction.

l : left

r : right

t : top

b : bottom

v : vertical (top and bottom)

h : horizontal (left and right)

a : all

The third represents the spacing value (which you can give your own)

For eg: mb-0 means margin-bottom: 0;

Model

This will be the generated spacing class styling examples

class	css
.ma-0	`.ma-0 { margin: 0 }`
.mt-0	`.mt-0 { margin-top: 0 }`
.ml-0	`.ml-0 { margin-left: 0 }`
.mh-0	`.mh-0 { margin-left: 0; margin-right: 0 }`
.mv-0	`.mv-0 { margin-top: 0; margin-bottom: 0 }`
.pa-5	`.pa-5 { padding: 5px }`
.pb-5	`.pt-5 { padding-bottom: 5px }`
.pr-5	`.pl-5 { padding-right: 5px }`
.ph-5	`.ph-5 { padding-left: 5px; padding-right: 5px }`
.pv-5	`.pv-5 { padding-top: 5px; padding-bottom: 5px }`

Modify Spacing values

you can create your own spacing classes by modify the $spacing variable

$spacing: 0, 5, 10, 15, 20;

Modify Spacing unit

By modifying the $unit variable you can specify your unit eg: em, pt, % ...

$unit: px;

Generate dynamic ID's using JavaScript

Vineeth.TR — Thu, 05 Aug 2021 05:14:47 +0000

Create simple ID generator with math random


const generateID = ()=> {
   return Math.random().toString(36).slice(2)
}


// How to use

const UID = generateID()

Generate dynamic ID's with length control


const generateID = (length)=> {
   const id = Math.random().toString(36).slice(2);
   const uid = [...Array(length)].reduce((r)=> {
           return r+id[~~(Math.random()*id.length)]
   }, '')
}


// How to use

const UID = generateID(8)

Generate UUID with RFc standard

RFc standard UUIDs must be of the form xxxxxxxx-Mxxx-Nxxx-xxxxxxxxxxxx , where x is one of [0-9, a-f] M is one of [1-5] and N is [8,9,a or b ]


const generateUUID= ()=> {
   const placeholder = [1e7]+-1e3+-4e3+-8e3+-1e11;
   const uid = () => {
     const id = crypto.getRandomValues(new Uint8Array(1));
     return (uid ^ id[0] & 15 >> uid / 4).toString(16)
   }
   return placeholder.replace(/[018]/g, uid)
}


// How to use

const UUID = generateUUID()

React D3 Donut Chart

Vineeth.TR — Sun, 20 Jun 2021 11:59:29 +0000

D3.js is one of the best JavaScript library for data visualizations,
let's combine D3 and React create a simple Donut Chart.
I am not going to explain how we can create react app 😉
We can start from d3 onboarding.

Add D3 on you project

npm i --save d3

Create DonutChart component

After installing D3 we will create a new react component called DonutChart. here I am giving file name 'DonutChart.js'.

import React , { Component} from 'react';

class DonutChart extends Component {

    constructor(props) {
        super(props);
    }

   componentDidMount() {

  }

render() {
        return <>
            <div></div> 
          </>
    }
}

export default DonutChart;

Use D3 in React component

We will import D3 in to our component

import * as d3 from 'd3';

Create D3 selectors with React refs

class DonutChart extends Component {

  constructor(props) {
        super(props);
        this.chRef = React.createRef();
    }

  componentDidMount() {
    const divEl = d3.select(this.chRef.current)
  }

  render() {
        return <>
            <div ref={this.chRef}></div>
          </>
    }
}

Donut Painting

Create a colors Array for the donut partition painting

const colors = [ '#8ce8ad', '#57e188', '#34c768', '#2db757', '#27acaa', '#42c9c2', '#60e6e1', '#93f0e6', '#87d3f2', '#4ebeeb', '#35a4e8', '#188ce5', '#542ea5', '#724bc3', '#9c82d4', '#c981b2', '#b14891', '#ff6d00', '#ff810a', '#ff9831', '#ffb46a', '#ff9a91', '#ff736a', '#f95d54', '#ff4136', '#c4c4cd' ];

Or else we can create random color generator. in this option you need to also consider text colors for readability and better user experiences

const colors = ()=> {  '#' +  Math.floor(Math.random()*16777215).toString(16)}

Draw donut chart

let's deep in to the show 🏊🏻, We will create a drawChart() method for portability.

    // DrawChart 
    drawChart(){
        const {data } = this.props;
        const svgContainer = d3.select(this.chRef.current).node();
        const width  = svgContainer.getBoundingClientRect().width;
        const height = width;
        const margin = 15;
        let radius = Math.min(width, height) / 2  - margin;

        // Create SVG
        const svg  = d3.select(this.chRef.current)
        .append('svg')
        .attr("width", '100%')
        .attr("height", '100%')
            .attr('viewBox', '0 0 ' + width + ' ' + width )
        //.attr('preserveAspectRatio','xMinYMin')
        .append("g")
        .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");

        let pie = d3.pie()
            .value( d => d.value )
        let data_ready = pie(data)

        // Donut partition  
        svg
        .selectAll('whatever')
        .data(data_ready)
        .enter()
        .append('path')
        .attr('d', d3.arc()
            .innerRadius(radius/ 1.75)  // This is the size of the donut hole
            .outerRadius(radius)
        )
        .attr('fill',  (d) =>  colors[d.index] )
        .attr("stroke", "#fff")
        .style("stroke-width", "2")
        .style("opacity", "0.8")


     }

Show partition name and value

We can add labels also for identifying the donut partition.

// legend Position
let legendPosition = d3.arc().innerRadius(radius/1.75).outerRadius(radius);

// Legend group and legend name 
svg
.selectAll('mySlices')
.data(data_ready)
.enter()
.append('g')
.attr("transform", d => `translate(${legendPosition.centroid(d)})`)
.attr("class", 'legend-g')
.style("user-select", "none")
.append('text')
.text(d => d.data.name)
.style("text-anchor", "middle")
.style("font-weight", 700)
.style("fill", '#222')
.style("font-size", 14);

//Label for value
svg
.selectAll('.legend-g')
.append('text')
.text((d) => { return d.data.value })
.style("fill", '#444')
.style("font-size", 12)
.style("text-anchor", "middle")
.attr("y", 16);

View DonutChart.js

let's see full picture of DonutChart.js

import React , { Component} from 'react';
import * as d3 from 'd3';
const colors = [ '#8ce8ad', '#57e188', '#34c768', '#2db757', '#27acaa', '#42c9c2', '#60e6e1', '#93f0e6', '#87d3f2', '#4ebeeb', '#35a4e8', '#188ce5', '#542ea5', '#724bc3', '#9c82d4', '#c981b2', '#b14891', '#ff6d00', '#ff810a', '#ff9831', '#ffb46a', '#ff9a91', '#ff736a', '#f95d54', '#ff4136', '#c4c4cd' ];

class DonutChart extends Component {

    constructor(props) {
        super(props);
        this.chRef = React.createRef();
    }


    // Chart load after component Mount
    componentDidMount() {
        this.drawChart()
    }


    // DrawChart 
    drawChart(){
        const {data } = this.props;
        const svgContainer = d3.select(this.chRef.current).node();
        const width  = svgContainer.getBoundingClientRect().width;
        const height = width;
        const margin = 15;
        let radius = Math.min(width, height) / 2  - margin;
        // legend Position
        let legendPosition = d3.arc().innerRadius(radius/1.75).outerRadius(radius);

        // Create SVG
        const svg  = d3.select(this.chRef.current)
        .append('svg')
        .attr("width", '100%')
        .attr("height", '100%')
            .attr('viewBox', '0 0 ' + width + ' ' + width )
        //.attr('preserveAspectRatio','xMinYMin')
        .append("g")
        .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");

        let pie = d3.pie()
            .value( d => d.value )
        let data_ready = pie(data)

        // Donut partition  
        svg
        .selectAll('whatever')
        .data(data_ready)
        .enter()
        .append('path')
        .attr('d', d3.arc()
            .innerRadius(radius/ 1.75)  // This is the size of the donut hole
            .outerRadius(radius)
        )
        .attr('fill',  (d) =>  colors[d.index] )
        .attr("stroke", "#fff")
        .style("stroke-width", "2")
        .style("opacity", "0.8")


      // Legend group and legend name 
       svg
        .selectAll('mySlices')
        .data(data_ready)
        .enter()
        .append('g')
        .attr("transform", d => `translate(${legendPosition.centroid(d)})`)
        .attr("class", 'legend-g')
        .style("user-select", "none")
        .append('text')
        .text(d =>  d.data.name)
        .style("text-anchor", "middle")
        .style("font-weight", 700)
        .style("fill", '#222')
        .style("font-size", 14);

       //Label for value
        svg
        .selectAll('.legend-g')
        .append('text')
        .text((d)=>{ return  d.data.value})
        .style("fill", '#444')
        .style("font-size", 12)
        .style("text-anchor", "middle")
        .attr("y", 16 );
    }



    render() {
        return <>
            <div ref={this.chRef}></div> </>
    }


}

export default DonutChart;

Import and Use

Let's Import and use DonutChart in application

import './App.css';
import DonutChart from './charts/DonutChart.js';
const donutData = [
 {name: "<5", value: 19},
 {name: "5-9", value: 20},
 {name: "10-14", value: 19},
 {name: "15-19", value: 24},
 {name: "20-24", value: 22},
 {name: "25-29", value: 29},
 {name: "30-34", value: 22},
 {name: "35-39", value: 18},
 {name: "40-44", value: 23},
 {name: "45-49", value: 19},
 {name: "50-54", value: 16},
 {name: "55-59", value: 19},
 {name: "60-64", value: 28},
 {name: "65-69", value: 17},
 {name: "70-74", value: 20},
 {name: "75-79", value: 17},
 {name: "80-84", value: 18},
 {name: "≥85", value: 21}
]

function App() {
  return (
    <div className="App">
       <DonutChart data={donutData}  />
    </div>
  );
}

export default App;

Result

GIT Commands

Vineeth.TR — Mon, 07 Jun 2021 13:05:01 +0000

Some easy useful git commands

Git configuration

You can configure git by creating a .gitconfig file in user folder
or use commands


git config --global user.name {{YOUR_USERNAME}}

git config --global user.email {{YOUR_EMAIL}}

git config -l

To create Git repository locally

git init

Download/Clone repository from remote

git clone {{REPOSITORY_LINK}}

Git branch

Git branches are effectively a pointer to a snapshot of your changes. When you want to add a new feature or fix a bug—no matter how big or how small—you spawn a new branch to encapsulate your changes

View all branches

git branch

Create a new branch

git branch {{BRANCH_NAME}}

Delete a branch

git branch -d {{BRANCH_NAME}}

Switch to another branch

git switch {{BRANCH_NAME}}

Merge a branch to current branch

git merge {{BRANCH_NAME}}

Sync branches

git fetch

Cleanup all local branches

Before fetching, remove any remote-tracking references that no longer exist on the remote.

git fetch --prune

Git stage

Before we make a commit, we must tell Git what files we want to commit (new untracked files, modified files, or deleted files) this is called staging.

To know the file status/changes

git status

Add a file to stage

git add {{FILE}}

Add all files to stage

git add .

Add only certain files starts with

With the asterisk command , you can add all files starting with 'index' in the staging area.

git add {{FILE_STARTS_WITH}}*

Reset/undo file changes

git reset {{FILE}}

Reset/undo all changes

git reset

Git Update

Update changes to remotes

Commit changes

git commit -m {{"YOUR_COMMIT_MESSAGE"}}

Get changes from remote

git pull

Get changes from different branch

git pull origin {{BRANCH}}

Updates changes to remote

git push

Updates changes to different branch

git push origin HEAD:{{BRANCH}}

Git Undo

Undo/revert changes from git

Reset/undo local changes

git reset --hard

Reset to previous heads

git reset --hard HEAD~{{NUMBER}}

Revert changes

git revert head

Revert a commit

git revert {{COMMIT_ID}}

Git Helps

To get git command help

git help

To see commit history

git log

View commit log as a graph

git log --graph --oneline

View commit log as a graph of all branches

git log --graph --oneline --all

Show changes between commits, commit and working tree,

git diff

Remove tracked files from the current working tree

git rm {{FILE}}

DEV Community: Vineeth.TR

🧹 How to Delete All Local Git Branches Except the Current One

✅ The Command

🧠 What It Does

🔍 git rev-parse --abbrev-ref HEAD

📋 git branch

🔎 grep -v "$(git rev-parse --abbrev-ref HEAD)"

🧹 xargs git branch -D

⚠️ Warning

📦 Pro Tip: Make it an Alias

🚀 Summary

Create a Custom React Hook to Persist URL Query Params with `react-router-dom`

🛠 The Problem

✅ The Solution

🧪 How to Use It

🔍 Bonus: Handling Explicit Query Params

🚀 Wrap Up

🚀 Dockerizing a React Application with Nginx

📌 Project Structure

🌱 Run React application in dev mode docker

🛠 Step 1: Create the Dockerfile

⚙️ Step 2: Create docker-compose.yml

🧇 Build & Run React application in prod mode with nginx docker

🛠 Step 1: Create the Dockerfile

🔧 Step 2: Create nginx.conf

⚙️ Step 3: Create docker-compose.yml

🚀 Running the Application

VS Code Extension Development Tips

Getting Started with VS Code Extension Development: Tips and Tricks

Prerequisites

Getting Started

Sample Development

Webview UI Toolkit

Using JavaScript Frameworks in Extension Development

Webview Development Tips

Icons

Auto Build for Webview

Refresh Extension

Footnote

Sync Git multiple repositories with shell/bash script

Why Use git-sync.sh?

How to Use git-sync.sh

1. Set Up the Script

2. Configure the Script

3. Run the Script

4. Status Feedback

Example Output

Customization

Troubleshooting

Angular Library Dependencies vs PeerDependencies

Dependencies

1. Root package.json

2. Project package.json

3. Project ng-package.json

PeerDependencies

1. Root package.json

2. Project package.json

Types Generator

CSS Loader / Spinners collection

HTML

Video Walkthrough

Sass Space Generator

Sass Space Generator

How to create

How to Use

The first letter represents the spacing type ( Margin/Padding).

The second letter represents the direction.

The third represents the spacing value (which you can give your own)

Model

Modify Spacing values

Modify Spacing unit

Generate dynamic ID's using JavaScript

Create simple ID generator with math random

Generate dynamic ID's with length control

Generate UUID with RFc standard

React D3 Donut Chart

Add D3 on you project

Create DonutChart component

Use D3 in React component

Donut Painting

🔍 `git rev-parse --abbrev-ref HEAD`

📋 `git branch`

🔎 `grep -v "$(git rev-parse --abbrev-ref HEAD)"`

🧹 `xargs git branch -D`

🛠 Step 1: Create the `Dockerfile`

⚙️ Step 2: Create `docker-compose.yml`

🛠 Step 1: Create the `Dockerfile`

🔧 Step 2: Create `nginx.conf`

⚙️ Step 3: Create `docker-compose.yml`

Why Use `git-sync.sh`?

How to Use `git-sync.sh`