DEV Community: Rajasekar Thangavel

Colored console in VS code

Rajasekar Thangavel — Thu, 22 Jan 2026 06:56:33 +0000

Open VS Code
Press Ctrl + Shift + P
Type Preferences: Configure User Snippets
Choose:
javascript.json (for JS / Node)
or typescript.json (for TS)
or New Global Snippets file (recommended if you use both)

{
  "Chrome Colored Console Log With Variable": {
    "prefix": "clogvar",
    "body": [
      "console.log(",
      "  `%c ${1:LOCAL DEV ************} %c ${2:Message}: ${3:variable}`,",
      "  `background: ${4:#2196f3}; color: ${5:white}; padding: 2px 6px; border-radius: 4px; font-weight: bold;`,",
      "  `color: ${6:#2196f3}; font-weight: bold;`",
      ");"
    ],
    "description": "Chrome console log with background, message, and variable"
  }
}

in vscode
clogvar and press in any file

React Native

Rajasekar Thangavel — Tue, 15 Jul 2025 11:49:42 +0000

title: React Native
published: true
description:
tags:

Use a ratio of 100:42 for best results.

published_at: 2025-01-25 03:35 +0000

Difference between CLI and EXPO

Feature	Expo Go	Expo CLI
Purpose	Run & preview apps	Manage & build Expo projects
Installation Needed?	No (only install Expo Go app)	Yes (npm install -g expo-cli)
Works with Custom Native Code?	❌ No	✅ Yes (bare workflow)
Hot Reloading	✅ Yes	✅ Yes
Builds Standalone Apps?	❌ No	✅ Yes (expo build)
Requires a Physical Device?	✅ Yes (or Emulator)	✅ Yes (for testing on devices)

📌 React Native Native Components with Props

Component	Description	Key Props
View	Container for other components (like )	style, onLayout
Text	Displays text content	style, numberOfLines, ellipsizeMode
Image	Displays images	source, resizeMode, style
ScrollView	Scrollable container	horizontal, showsVerticalScrollIndicator
FlatList	Optimized list for large datasets	data, renderItem, keyExtractor
SectionList	List with sections (grouped list)	sections, renderItem, renderSectionHeader
TextInput	Input field for text entry	value, onChangeText, keyboardType
Button	Simple button component	title, onPress, disabled
Pressable	More flexible button	onPress, onLongPress, style
TouchableOpacity	Button that fades when pressed	onPress, activeOpacity
TouchableHighlight	Button that highlights when pressed	onPress, underlayColor
Switch	A toggle switch	value, onValueChange
Slider	Selects a value in a range	value, onValueChange, minimumValue, maximumValue
KeyboardAvoidingView	Adjusts layout when keyboard appears	behavior, keyboardVerticalOffset
Modal	Pop-up modal window	visible, onRequestClose, animationType
Alert	Shows a native alert	title, message, buttons
StatusBar	Controls the status bar appearance	hidden, barStyle, backgroundColor
ActivityIndicator	Displays a loading spinner	animating, size, color
ImageBackground	Uses an image as a background	source, style, resizeMode
RefreshControl	Enables pull-to-refresh in ScrollView	refreshing, onRefresh
Vibration	Controls device vibration	vibrate (method)
Linking	Opens external links	openURL, canOpenURL (methods)
Share	Opens a share dialog	share (method)
Platform	Detects platform (iOS/Android)	OS, Version, isTV
PermissionsAndroid	Manages Android permissions	request, check (methods)
NativeModules	Calls platform-specific native modules	Varies by module
PixelRatio	Handles pixel density scaling	get, roundToNearestPixel

📌 React Native Native Components with Props

Component	Description	Key Props
View	Container for other components (like )	style, onLayout
Text	Displays text content	style, numberOfLines, ellipsizeMode
Image	Displays images	source, resizeMode, style
ScrollView	Scrollable container	horizontal, showsVerticalScrollIndicator
FlatList	Optimized list for large datasets	data, renderItem, keyExtractor
SectionList	List with sections (grouped list)	sections, renderItem, renderSectionHeader
TextInput	Input field for text entry	value, onChangeText, keyboardType
Button	Simple button component	title, onPress, disabled
Pressable	More flexible button	onPress, onLongPress, style
TouchableOpacity	Button that fades when pressed	onPress, activeOpacity
TouchableHighlight	Button that highlights when pressed	onPress, underlayColor
Switch	A toggle switch	value, onValueChange
Slider	Selects a value in a range	value, onValueChange, minimumValue, maximumValue
KeyboardAvoidingView	Adjusts layout when keyboard appears	behavior, keyboardVerticalOffset
Modal	Pop-up modal window	visible, onRequestClose, animationType
Alert	Shows a native alert	title, message, buttons
StatusBar	Controls the status bar appearance	hidden, barStyle, backgroundColor
ActivityIndicator	Displays a loading spinner	animating, size, color
ImageBackground	Uses an image as a background	source, style, resizeMode
RefreshControl	Enables pull-to-refresh in ScrollView	refreshing, onRefresh
Vibration	Controls device vibration	vibrate (method)
Linking	Opens external links	openURL, canOpenURL (methods)
Share	Opens a share dialog	share (method)
Platform	Detects platform (iOS/Android)	OS, Version, isTV
PermissionsAndroid	Manages Android permissions	request, check (methods)
NativeModules	Calls platform-specific native modules	Varies by module
PixelRatio	Handles pixel density scaling	get, roundToNearestPixel

use Flatlist

const data = [
  {
    id: 1,
    name: 'John',
  },
  {
    id: 2,
    name: 'Jane',
  },
  {
    id: 3,
    name: 'Doe',
  },
];

<FlatList
        data={data}
        renderItem={({ item }) => <Text>{item.name}</Text>}
        keyExtractor={(item) => item.id.toString()}
/>

Useful links

1.) https://results.2024.stateofreactnative.com/en-US

How to deploy react web app or static html in AWS instance

Rajasekar Thangavel — Tue, 17 Jun 2025 12:07:56 +0000

prerequisites

Feature	Inbound Rules	Outbound Rules
Direction	Controls incoming traffic to the instance	Controls outgoing traffic from the instance
Purpose	Define who can access your server	Define where your server can access
Example	Allow HTTP (port 80) so browsers can load your site	Allow access to external APIs or databases
Common Ports	`22` (SSH), `80` (HTTP), `443` (HTTPS)	`80`, `443`, custom DB/API ports
Default Behavior	All inbound traffic denied unless explicitly allowed	All outbound traffic allowed unless restricted
Use Case	Allow only specific IPs or ports to access your app	Restrict external communication for security

Inbound Rule:

Allow TCP port 22 from 0.0.0.0/0 — for SSH access to EC2
Allow TCP port 80 from 0.0.0.0/0 — for web server access

Outbound Rule:

Allow all traffic to 0.0.0.0/0 — default for most servers
(Optional) Deny all except specific IPs/ports — for lockdown servers

Step 1: Click on "Launch Instance"
Step 2: Select "Desire OS"

Step 3: Select Instance Types & Key Value pair
Instance Type - Based on required size
Key value pair - SSH login

Step 4: Network Settings - Enable public access and private access

Step 5: Configure required storage

Step 6: Click on "Launch Instance"

Note the instance's public IP and private IP

Step 7: Once the instance is launched successfully. SSH to connect to the instance

chmod 400 "jun17.pem"
ssh -i "jun17.pem" 
ubuntu@ec2-3-110-45-121.ap-south-1.compute.amazonaws.com

Install a web server to host the application

sudo apt install nginx -y

sudo nano /etc/nginx/sites-available/default

Host a static HTML pages

server {
    listen 80;
    server_name aws_ip;

    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Restart service

sudo nginx -t
sudo systemctl restart nginx

Host React app

Install Nodejs in instance

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

server {
    listen 80;
    server_name aws_ip;

    location / {
        proxy_pass http://localhost:3000; # or 5173, etc.
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

sudo nginx -t
sudo systemctl restart nginx

Configure firewall in nginx (OPTIONAL)

sudo ufw status
sudo ufw allow 80
sudo ufw allow 22
sudo ufw enable

Note: Use PM2 for running multiple process at the same time in single instance.

Shopify Installation

Rajasekar Thangavel — Sun, 08 Dec 2024 01:49:23 +0000

CLI Installation

npm install -g @shopify/cli@latest

Connect with github
https://shopify.dev/docs/api/github-app

Pull the theme in local

shopify theme pull --store {store-name}

https://shopify.dev/docs/storefronts/themes/getting-started/customize

Customize theme

shopify theme dev

Local theme sync

shopify theme dev --theme-editor-sync

Push development theme to live

shopify theme push -a

Change the live theme from local development

shopify theme dev --theme <<ID>>

https://shopify.dev/docs/storefronts/themes/getting-started/customize

Theme commands

https://shopify.dev/docs/api/shopify-cli/theme

Angular Chart Visualization Task

Rajasekar Thangavel — Sat, 07 Dec 2024 05:02:32 +0000

Angular Chart Visualization Task

Task

Visualize data using charts in Angular.

Requirements

Use a charting library like Chart.js or ngx-charts.
Create a dashboard with the following charts:
- Bar Chart: Visualize monthly sales data.
- Pie Chart: Display product category distribution.
- Line Chart: Show daily active users.
Add interactivity:
- Filter bar chart data by quarter (e.g., Q1, Q2, Q3, Q4).
- Toggle pie chart view between percentages and absolute values.
- Filter line chart data by a custom date range.

Sample Data

1. Monthly Sales Data (Bar Chart)

export const monthlySalesData = [
  { month: 'January', sales: 15000 },
  { month: 'February', sales: 20000 },
  { month: 'March', sales: 18000 },
  { month: 'April', sales: 22000 },
  { month: 'May', sales: 25000 },
  { month: 'June', sales: 24000 },
  { month: 'July', sales: 26000 },
  { month: 'August', sales: 28000 },
  { month: 'September', sales: 23000 },
  { month: 'October', sales: 27000 },
  { month: 'November', sales: 30000 },
  { month: 'December', sales: 32000 },
];

export const productCategoryData = [
  { category: 'Electronics', percentage: 35 },
  { category: 'Fashion', percentage: 25 },
  { category: 'Home Appliances', percentage: 20 },
  { category: 'Books', percentage: 10 },
  { category: 'Other', percentage: 10 },
];

export const dailyActiveUsers = [
  { date: '2024-12-01', users: 500 },
  { date: '2024-12-02', users: 550 },
  { date: '2024-12-03', users: 520 },
  { date: '2024-12-04', users: 600 },
  { date: '2024-12-05', users: 580 },
  { date: '2024-12-06', users: 610 },
  { date: '2024-12-07', users: 650 },
];

Disable BitLocker in windows drive

Rajasekar Thangavel — Wed, 19 Jun 2024 03:47:35 +0000

Disable-BitLocker -MountPoint "C:" manage-bde -status

Best Links AI and others

Rajasekar Thangavel — Fri, 10 Nov 2023 14:13:24 +0000

https://pfpmaker.com - Profile Maker

Code Snippets

Rajasekar Thangavel — Thu, 05 Oct 2023 07:10:51 +0000

Remove default styles in angular

import { Component, ViewEncapsulation } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-expression-dialog',
  templateUrl: './expression-dialog.component.html',
  styleUrls: ['./expression-dialog.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class ExpressionDialogComponent {
  constructor(public dialog: MatDialog) {}
}

Convert Base64 string into PDF using Angular

Rajasekar Thangavel — Fri, 02 Jun 2023 03:49:10 +0000

When you get base64 string from API encoded browser will not understand the format so need to convert base64 string into pdf using below method

const linkSource = 'data:application/pdf;base64,' + 'JVBERi0xLjMNCiXi48/TDQoNCjEgMCBvYmoNCjw8DQovVHlwZSAvQ2F0YWxvZw0KL091dGxpbmVzIDIgMCBSDQovUGFnZXMgMyAwIFINCj4+DQplbmRvYmoNCg0KMiAwIG9iag0KPDwNCi9UeXBlIC9';
const downloadLink = document.createElement("a");
const fileName = "sample.pdf";
downloadLink.href = linkSource;
downloadLink.download = fileName;
downloadLink.click();

`
Credits: https://stackoverflow.com/a/51998228

Exercise 1

Rajasekar Thangavel — Sat, 15 Oct 2022 14:24:23 +0000

import React, { useEffect, useState } from "react";

const HelloWorld = () => {
  const [result, setResult] = useState([]);
//   useEffect(() => {
//     filterDeveloper();
//   }, []);
  const data = [
    {
      name: "Rajasekar",
      title: "Developer",
    },
    {
      name: "Ganesh",
      title: "Manager",
    },
    {
      name: "Arun",
      title: "Developer",
    },
  ];

  const filterDeveloper = () => {
    let test = data.filter((item) => {
      return item.title === "Manager";
    });
    setResult(test);
  };
  const style1 = {
    color:"white"
  }
  const style= {
    backgroundColor: "red",
    ...style1
  }



  return (
    <>
    {result.map((item, index) => (
        <div key={item.name} className="test" style={style}>
          {index + 1} {item.name} - {item.title}
        </div>
      ))}
      <button onClick={filterDeveloper}>Test</button>
    </>
  );
};

export default HelloWorld;

How to use promise in nodejs

Rajasekar Thangavel — Fri, 23 Sep 2022 14:08:16 +0000

Where we need promise

When the time of using javascipt code if there is delay in output for example if you are developing student management system with role number you need to access particular fees details but accessing roll number is time taking process in the case need to use promise

Promise definition

const delay = new Promise(resolve => {
    setTimeout(() => {
        resolve();
    }, 90000);
});

Promise calling function

delay.then(()=> {
    console.log("Done Waiting");
})

Promise in loop

const delays = [122, 100, 2000, 600];

const delay = (millisec) => {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(millisec);
            resolve(millisec)
        }, millisec);
    })
}

Promise.all(
    delays.map(d => delay(d))
).then(() => { console.log("-----------") })

Ref : https://medium.com/developer-rants/running-promises-in-a-loop-sequentially-one-by-one-bd803181b283
https://stackoverflow.com/questions/65167410/wait-for-array-map-iterations-in-promise-all

Select all table rows from the table not only current page in vuetify 2.x

Rajasekar Thangavel — Thu, 07 Jul 2022 13:05:49 +0000

Select all table rows in all pages

Add @toggle-select-all="selectAll" in table

  <v-data-table v-model="selectedTasks" :headers="headers" 
:items="tasks" item-key="id" show-select 
:toggle-select-all="selectAll">

</v-data-table>

selectAll(event) {
    if (event.value === true) {
        this.selectedTasks = [...this.tasks];
    } else {
        this.selectedTasks = [];
    }
}

Working example - https://jsfiddle.net/ktrajasekar/8nqu64f9

DEV Community: Rajasekar Thangavel

Colored console in VS code

React Native

Use a ratio of 100:42 for best results.

published_at: 2025-01-25 03:35 +0000

Create a new React native project using expo

Add navigation to the react native

Components Documentation

Difference between CLI and EXPO

📌 React Native Native Components with Props

📌 React Native Native Components with Props

use Flatlist

Useful links

How to deploy react web app or static html in AWS instance

prerequisites

Inbound Rule:

Outbound Rule:

Install a web server to host the application

Host a static HTML pages

Restart service

Host React app

Install Nodejs in instance

Configure firewall in nginx (OPTIONAL)

Shopify Installation

CLI Installation

Pull the theme in local

Customize theme

Local theme sync

Theme commands

Angular Chart Visualization Task

Angular Chart Visualization Task

Task

Requirements

Sample Data

1. Monthly Sales Data (Bar Chart)

Disable BitLocker in windows drive

Best Links AI and others

Code Snippets

Remove default styles in angular

Convert Base64 string into PDF using Angular

Exercise 1

How to use promise in nodejs

Where we need promise

Promise definition

Promise calling function

Promise in loop

Select all table rows from the table not only current page in vuetify 2.x

Select all table rows in all pages