DEV Community: Chandu J S

🗃️ Backup your .dotfiles with a simple bash script

Chandu J S — Sat, 14 Aug 2021 06:50:21 +0000

We will be creating a git repository with a script that backup your required dotfiles.

1. Create a folder for the backup



mkdir my-dotfiles

2. Initialize git



git init

3. Create file list

Create a file named backup.conf at the root of the folder.
In this file we need to list out all the files & folders we need to backup. eg:



~/.gitconfig
~/.profile
~/.vimrc
~/.xinitrc
~/.zshrc

Our backup script will loop through the items and copy everything into respective folders.

4. Create script

Create a file named backup.sh at the root of the folder.
This is our script file. Copy the content below and paste it inside the file.



#!/bin/sh

# This script copy files mentioned inside `backup.conf` to the root of the project.

# file to look for the paths to backup.
backupPaths="./backup.conf"
# home directory path.
homeDirectory=~
# same line identifier to echo in the same line.
sameLine="\e[1A\e[K"

echo "🛑 Clearing configurations directory..."
# removing the folder with exsiting contents. we have git version anyway!
rm -rf configurations
# creating it again for backup.
mkdir configurations
sleep 1
echo -e "$sameLine✅ Configurations directory cleared."
sleep 1

echo -e "$sameLine🏁 Starting backup..."
sleep 1

# looping through the list & avoiding the empty spaces
sed '/^[ \t]*$/d' $backupPaths | while read filePath; do
  echo -e "$sameLine⏳ Copying: $filePath"

  # find & replace for ~ with home path
  findThis="~/"
  replaceWith="$homeDirectory/"
  originalFile="${filePath//${findThis}/${replaceWith}}"

  # copying the files
  cp --parents --recursive $originalFile ./configurations
  sleep 0.05
done

git add .

echo -e "$sameLine🎉 Backup finished! You can review & commit your changes."

5. Make the script executable



chmod +x ./backup.sh

6. Commit all changes



git add .
git commit -m "initial commit"

7. Run script



./backup.sh

From now on, you can just run the script file whenever you need. After you run the backup script, all the files & folders mentioned inside the backup.conf file will be copied into configurations folder. Commit and push the changes to your remote repository.

🛑 Make sure you are not adding any confidential files or folders to backup.conf file. eg: .ssh or private keys.

Checkout below repository to see complete code. There is a install.sh script in the root which is made for Arch Linux systems. Feel free to fork the repository and make changes according to your needs.

ctrleffive / linux-configurations

Linux Configurations

🐧 Linux Configurations

💾 Backup Configurations

Make the backup.sh file executable with chmod +x ./backup.sh first.
Backup configurations by executing backup.sh file.
Files & folders that needs to be backed up should be mentioned inside backup.conf file.
Once backup is complete, commit the changes.
If you want to restore the backup, instead of just copy paste everything back, run the backup script. After that you can use file diff to compare the changes and pick manually.

💫 Install Packages

Make the install.sh file executable with chmod +x ./install.sh first.
Bulk install packages by executing install.sh file.
Packages needs to be installed should be listed inside install_third_party.conf & install_trusted.conf files.
Services needs to be enabled should be listed inside services.conf file.
Its better to restart the PC after script finished running.
3rd party packages are installed through pikaur AUR helper.

⚡️ Notes

Install VMWare Player from here: https://wiki.archlinux.org/title/VMware#Installation
After installing wine
- …

View on GitHub

⚙ My Arch Linux setup

Chandu J S — Wed, 04 Nov 2020 07:05:08 +0000

Hey guys! I managed to successfully install Arch Linux with all of the softwares I needed. 😁

Here is my Arch Linux setup.

Desktop Environment: KDE Plasma
Backup Tool: Timeshift with RSYNC
Package Manager Helper: Pacmac Manager
Session Manager: TBSM
Global Theme: Breeze Dark
Virtual Desktops: 2
Activities: 2
Linux Kernal: LTS (latest)
Shell: Oh My ZSH

I have a scheduled a Backup & Maintenance task every Sunday. I'll do backups, upgrade, junk clean up, and security checks to make sure everything works fine.

Other Softwares

VSCode
BleachBit (Junk cleaner)
TOR Browser
Google Chrome
Firefox
Slack
Spotify
Zoom
Krita
GIMP
Rawtherapee
Insomnia

Be sure to check out the building process HERE

🖥 A Story of 0s & 1s: Building my PC

Chandu J S ・ Oct 30 '20

#pcbuilding #hardware #desktop #linux

💾 Using Linux? Backup is critical.

Chandu J S — Tue, 03 Nov 2020 13:38:19 +0000

Whatever Operating System you are using, having proper backups is really important. But I never thought about backup when I was using Windows and Mac. Until now,

I started using Linux for my primary needs.

The main challenge of using Linux and messing around with the terminal is things can go ugly unexpectedly.

Long story short, I run the below command in the terminal accidentally.

sudo rm -rf ~/.config 😐

Guess what? 3.5 GB of configuration files are gone.

.config folder contains most of the application configurations related to your user account. This includes operating system customizations and settings. Deleting the folder will not cause any harm to your operating system. But you have to configure all the settings from the beginning. Unless you have a backup.

Timeshift

Timeshift is a system restore tool for Linux. If you ever used Time Machine in MacOS or System Restore in Windows, you will get the idea.

Here are my timeshift settings

Snapshot Type - RSYNC

I'm using a separate Hard Disk for backup. RSYNC allows you to create backups on any Linux partitions. If your system got crashed, you can connect your HDD back, run Timeshift, and use the backup from the HDD to restore.

Storage Location - HDD

I have an M.2 SSD with 256GB capacity and a 2TB Hard Disk for storage and backup purpose. A 100GB ext4 partition is reserved for backup.

Schedule - 2 per week

I am using Arch Linux. I have weekly maintenance scheduled for my PC. Before I start maintenance tasks, I will create a backup, and after the maintenance, I will create another one. Since I'm not storing any large files in the SSD, the backup size is always small.

If you have plenty of space left in your backup drive, you can choose the boot time backup. This will create a backup every time when the PC boots up. Booting speed will not be affected.

Users & Filters

I've created symlinks for folders inside the home directory from my external HDD. All of the hidden folders in the home directory are backed up except .cache. All other system folders are backed up.

After I deleted the .config directory, all my settings are reset. I simply had to open Timeshift and choose the most recent backup.

Let me know your thoughts about backups 😊

🖥 A Story of 0s & 1s: Building my PC

Chandu J S — Fri, 30 Oct 2020 08:39:05 +0000

Hello, world! 👋

I am a software developer who has been in the industry since 2013. Currently working as a front-end developer (react) at HootBoard. Here, I want to share my experience of building a PC from scratch.

I am using my Macbook Air for development since 2017. Building a PC was not really in my mind. At first, I thought I will just buy a new MacBook Pro and deal with it. But, there are a few things I always wanted to do. I wanted to move out of the Apple ecosystem and wanted to get a better understanding of how hardware and software work outside the Apple world.

I'm not a pro PC builder but I have assembled PCs before, and that was 7 years ago. A lot changed since then. This is my first time building a PC for myself!. So in a nutshell, I ordered the components from Amazon and assembled it by myself (without having the proper tools 😁 to do it. I still couldn't change an M.2 slot because I don't have the tool to remove the screw holder from the motherboard. Plus, one screw set was missing in the package 🤦)

Usage

My primary use of the computer is for software development. I make websites & mobile applications mostly. The secondary purpose is image processing. I will be using different RAW image processing applications and image stacking softwares to process some of the photos. (Check out my Night Sky Album Are We Alone?)

I've looked into several websites like mdcomputers.in, primeabgb.com, vedantcomputers.com, and of course, amazon.in.
CPU seems cheaper in a local shop than the websites. So I bought it from there. The price of other components was different on different websites. But I ended up buying all the other parts from amazon after getting some reviews about the other websites. Mostly trust issues.

Configuration

Here is the components breakdown.

#	Component	Model
1	CPU	Intel i7 10th Generation (10700)
2	Motherboard	Asus Prime Z490M-Plus LGA 1200
3	Memory	G.Skill Ripjaws V 32GB DDR4 Dual Channel
4	Primary Storage	Adata XPG SX8200 Pro 256GB NVME SSD
5	Secondary Storage	Seagate Barracuda 2 TB Internal HDD
6	Power Supply	Antec NeoEco 650M 80+ Bronze 650W Modular
7	Cabinet	Antec P82 Flow
8	Display	LG 29" Ultrawide - 29UM69
9	Power Backup	APC Back-UPS BE700Y-IND 700VA UPS
10	Keyboard	Logitech K230 Compact Wireless Keyboard
11	Mouse	HP Z3700 Wireless Mouse
12	WiFi NIC	TP-Link AC1200 Wireless WiFi PCIe Card

Display

In terms of display, my choice will be always a single ultrawide display. Maybe it's just me. But having multiple monitors in front of me is a mess for me. I usually take advantage of the multiple workspace feature in Operating Systems. So, a dual (or more) display arrangement is definitely not my interest.

Storage

I try to keep everything very minimal. For me, a 256 GB SSD is enough for my usage. My Macbook Air is a 256GB variant. I am using it for all of my personal needs. I still have more than 50% of space left on it. So, getting a fancy 1TB or 500GB SSD is overkill for me. I bought a separate Hard Disk specifically for storage.

Operating System

I've worked on all Windows versions from XP to Windows 10, a variety of Linux distros, and Mac OS. And I can say that I don't need Windows in my machine for my daily work. In fact, it's painful for me to do development on a windows machine.

I choose Arch Linux as Operating System. Check out my setup HERE

⚙ My Arch Linux setup

Chandu J S ・ Nov 4 '20 ・ 1 min read

#archlinux #kde #linux #setup

I always wanted to be a part of the open-source community. And I think being a Linux user could be a major part. I am the kind of guy who skips tutorials in software/games and tries to figure out the solution by myself (and ends up wasting more time 😁). Arch Linux fits really well for me in that case.

The DIY approach in Arch gives you control over every aspect of your operating system. And the user repository of Arch (AUR) has plenty of software packages. Whatever packages I searched so far is there. And even if the package is not available, you can simply download the source code and build it yourself.

For some people, that sense of accomplishment after successfully installing the software really matters.

Speaking about other accessories, I didn't go for any expensive models for the keyboard and mouse. I thought I will start with something simple and upgrade later. But I spend quite some money on the chair and table.

Wrapping Up

The immense satisfaction and indescribable feeling of pleasure from building your first PC and fine-tuning your operating system is what drives me forward.

Things I learned from my experience.

Have patience, it takes time.
It's not as daunting as it sounds.
Cable management matters.
You are your own tech support.
Do not buy components just because someone said it's cool!
Do not turn on the Chassis Intrusion Detection option in BIOS if your chassis doesn't have that feature.
If you want to reset the BIOS, shutdown and remove the battery from the motherboard and then short the BIOS reset pins.
Always refer to the motherboard manual.
Have a proper & stable power connection for your PC.
Have good tools.
Make sure you have an active internet connection and a computer with you during the process.

I've created a Google Photos album with some of the photos of the process. Have a look at A Story of 0s & 1s.

Let me know what you guys think about my setup.
Feedback appreciated. 😊

📙 Static website hosting with GitHub & Actions

Chandu J S — Wed, 08 Apr 2020 09:11:20 +0000

My website chandujs.dev is made with Gatsby. I made an article in dev.to recently. Read it here.

🌏 I made my website with Gatsby!

Chandu J S ・ Feb 21 '20

#gatsby #portfolio #javascript #webdev

I was using Netlify for hosting my website. Then I thought, why not use GitHub pages to host my website for free? Netlify is an awesome service, I know. But I have a problem keeping things in different places. GitHub has everything I want to host my website.

Reasons to Choose GitHub

GitHub Pages for hosting.
GitHub Actions for building & deploying.
Since my website is in a public repo, Hosting with GitHub pages is free, running GitHub Actions won't count against the 2,000 minutes per month quota.
Webhooks for triggering actions are available, repository_dispatch
Keep everything together in one place 😉

Follow these simple steps to setup GitHub actions for your website.

1. Generate Keys

Execute below command in your PC to get all keys.

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

Two files named gh-pages (private key) and gh-pages.pub (public key) will be generated.

DON'T PUSH THOSE GENERATED KEY FILES IN ANY GIT REPOSITORY. You can delete them after you added the credentials to GitHub.

2. Add Deploy Key

You need to add a deploy key for deploying the branch content to the web.

Copy the contents of the gh-pages.pub file.
Goto Settings of your repository.
Goto Deploy Keys settings.
Give Title as ACTIONS_DEPLOY_KEY
Paste key contents in Key field.
Check Allow write access option.
Click Add key.

3. Add Secret Key

And you need to add a secret key also.

Copy the contents of gh-pages file.
Goto Settings of your repository.
Goto Secrets settings.
Click Add new secret.
Give Name as ACTIONS_DEPLOY_KEY
Paste key contents in Value field.
Click Add secret.

3. Personal Access Token

If you already have a token with repo access, we can use that. Or create one with repo access from settings
You can use this token to trigger repository_dispatch events.

5. Workflow

Create a file github-deploy.yml with the following content in .github/workflows location in the root folder of your repository.

name: Github Deploy

on:
  repository_dispatch:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2

      - name: Setup node
        uses: actions/setup-node@v1
        with:
          node-version: '10.x'

      - name: Get yarn cache
        id: yarn-cache
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - name: Cache dependencies
        uses: actions/cache@v1
        with:
          path: ${{ steps.yarn-cache.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - run: yarn install
      - run: yarn build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          publish_dir: ./public

According to the github-deploy.yml file, GitHub action will execute yarn build followed by yarn install and publish the contents of /public folder into gh-pages branch in your repository whenever there is a new push event happens in master branch or whenever a repository_dispatch event is fired. After the first build, you can goto Settings page of your repository and select gh-pages from Source dropdown in GitHub Pages section.

Don't forget to link your domain with GitHub pages. For that add a CNAME file with your domain name in the /static folder of your gatsby project.

You can read more about how I link my domain & subdomains with GitHub here

🔥 Wildcard Subdomains & GitHub Pages

Chandu J S ・ Apr 5 '20

#github #webdev #dns

📸 How to take screenshots from Chrome

Chandu J S — Fri, 21 Feb 2020 12:26:38 +0000

There are lots of Chrome extensions are available to take screenshots of websites.

But you know you can use Chrome's device toolbar to take screenshots of a website in any device sizes?

1. Go to Website

2. Open Developer Tools

3. Click Toggle Device Toolbar Option

4. Choose Screen Size

Or you can choose the Responsive option and adjust the size.

5. Click Menu Icon

6. Choose Capture Screenshot Option

✌️

🌏 I made my website with Gatsby!

Chandu J S — Fri, 21 Feb 2020 10:34:00 +0000

Even though I've been a web developer for more than 6 years, I bought a domain name for my website only in 2018. And just now I finished my website. I'm lazy, maybe.

But I am pretty sure that this website is the fast, performance-optimized website I've ever made.

chandujs.dev

Pretty simple, right?

Lets breakdown the things I used to build my website.

Gatsby

This static site generator made me think to reconsider getting back in web development.
Gatsby is fast, performance baked in, modern static site generator for React. The first version of the website was done in Angular. I ported it to Gatsby after I learned Gatsby.

You can clone a starter project and start messing around from here

Plugins

Gatsby’s plugin archive is rich enough. You will get plugins for almost anything for your website.

Blogging

I have a blog section on my website. So I used gatsby-source-dev plugin to fetch dev.to posts of my user id and render on my website. Effortless blogging 😎

Portfolio Showcase

For displaying my portfolio on the website I've used the following plugins.

gatsby-source-filesystem To listing all the files in the project
gatsby-plugin-sharp Several image processing functions
gatsby-transformer-sharp Creates ImageSharp nodes from image types that are supported by the sharp image processing library
gatsby-transformer-remark Parses Markdown files using Remark.
gatsby-remark-images Processes images in markdown so they can be used in the production build.
gatsby-remark-relative-images Convert image src(s) in markdown to be relative to their node’s parent directory.
gatsby-plugin-extract-image-colors Extracts colors from image adds them to the image data

Optimization

Performance optimization is out of the box available in Gatsby.

I wrote a separate article about how I purged 95% of unused bootstrap from the website. Read it here

🗜 How I purged 95% of unused CSS from my Gatsby website

Chandu J S ・ Feb 21 '20 ・ 1 min read

#gatsby #css #bootstrap #webdev

Netlify CMS

I'm using a headless CMS from Netlify which is a simple easy to integrate CMS you can use with your static site. It's very easy to integrate with a Gatsby website.
Learn more about Netlify CMS here

Progressive Web App

This website is PWA, which means you can access the website later once you open the website. You can make a Gatsby website a PWA with very easy steps.

Install gatsby-plugin-offline node package and Add below to end of plugins array in your gatsby-config.js file

[
//...
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'Chandu J S',
        short_name: 'Chandu',
        start_url: '/',
        background_color: Variables.colors.brand,
        theme_color: Variables.colors.brand,
        display: 'standalone',
        icon: 'src/assets/images/icon.png',
        crossOrigin: `use-credentials`,
      },
    },
    'gatsby-plugin-offline',
//...
]

Netlify

In terms of hosting, I had to pay NOTHING to host my website 😁. Netlify is an awesome service that provides free hosting for static websites.

It doesn't matter what kind of static site generator you have, almost all kind of them are supported by Netlify.

Let me know in the comments if I need to clarify anything more.

The source code of my website is open and available here. Feel free to use it as per the license.

🗜 How I purged 95% of unused CSS from my Gatsby website

Chandu J S — Fri, 21 Feb 2020 10:33:26 +0000

I was using bootstrap for a long time. The last project I used bootstrap is the website I made with Gatsby.

But most of the time, I use only the responsive classes in bootstrap. The bootstrap.css file itself is 152 kb in size. I had to find a way to remove unnecessary CSS from the code. I was using bootstrap from the first version of this website. I didn't want to change.

So, I used gatsby-plugin-purgecss to remove unnecessary CSS from the production build.

Even though this is NOT an install and forgets type plugin (mentioned in their documentation), for my website, adding to the gatsby-config.js file did a good job.

⛓ How to join two arrays in JavaScript

Chandu J S — Wed, 19 Feb 2020 18:07:08 +0000

const one = [`aaa`, `bbb`, `ccc`]
const two = [`ddd`, `eee`, `fff`]

You have the above arrays.
How will you merge those into a single array?

You can use concat method.
This method will work in older browsers also.

const megaArray = one.concat(two)

There is a new way to do this.
You can use the spread operator in JavaScript.

const megaArray = [...one, ...two]

Much cleaner!

🐞 Catch exceptions in Flutter with Catcher & Sentry

Chandu J S — Fri, 13 Dec 2019 17:24:24 +0000

Who doesn't hate unhandled exceptions in their applications?

In this post, I will show you how to catch unhandled exceptions in a flutter application using a Catcher plugin and sentry.io

Create a new project in Sentry

Go to sentry.io and create a new project

We can just use the DSN for our application.

Install Catcher

Open your app's pubspec.yml file and add catcher as a dependency.

dependencies:
  catcher: ^0.2.7

NOTE: Catcher version mentioned in this post may not be the latest version.

And in your main.dart file,

Import the package,

import 'package:catcher/catcher_plugin.dart';

Replace

runApp(App());

with

void main() {
  /// checking if release mode or not
  /// no need of Catcher & Sentry in debug mode.
  if (kReleaseMode) {
    Catcher(
      App(),
      releaseConfig: CatcherOptions(
        SilentReportMode(),
        [SentryHandler('<SENTRY_DSN_STRING>')],
      ),
    );
  } else {
    runApp(App());
  }
}

Replace your sentry DSN with <SENTRY_DSN_STRING> in SentryHandler

In CatcherOptions, we have to provide a ReportMode as the first parameter and at least one ReportHandler as the second parameter. Here we are using SilentReportMode() as ReportMode and SentryHandler() as error handler.

What we are expecting here is, if there is any unhandled exception occurs, the app will send the error report to sentry silently. If you want to get user's confirmation to send an error report, you can use DialogReportMode() instead of SilentReportMode().

You can refer more in the plugin documentation here

next, in MaterialApp widget add Catcher.navigatorKey as value of navigatorKey property

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: Catcher.navigatorKey, // <---------
      home: RootPage(),
    );
  }
}

And that's it!

Catcher will catch all the unhandled exceptions in the application from now on. You can view the exceptions in the sentry dashboard.

⚡ Hot module replacement in Angular

Chandu J S — Tue, 26 Nov 2019 19:47:16 +0000

When working with angular projects, live reloading is a must. But whenever you change something in the code, the whole page will reload. Hot Module Replacement (HMR) is a feature in webpack that allows for modules to be replaced without a full browser reload. Changes will get updated instantly. This feature allows you to maintain much of the application state usually lost when reloading the page. But this is not enabled by default in angular. We need to do some adjustments to your project to get this run.

So, let's start...

1. Install Dependency

yarn add @angularclass/hmr --dev

or if you are using npm,

npm install @angularclass/hmr --save-dev

2. Add New Environment

Add a new environment file called environment.hmr.ts inside your src/environments folder with following code.

export const environment = {
  production: false,
  hmr: true,
  // you can add your existing development configs from `environment.ts` file here.
}

Now, we have a new environment file. We need to update build & serve properties in the angular.json file with the following configurations.

for the build property,

"build": {
  "configurations": {
    //
    "hmr": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.hmr.ts"
        }
      ]
    }
    //
  }
}

and for the serve property,

"serve": {
  "configurations": {
    //
    "hmr": {
      "hmr": true,
      "browserTarget": "<YOUR_PROJECT_NAME>:build:hmr"
    }
    //
  }
}

then, add node into the types array in compilerOptions in src/tsconfig.app.json file.

{
  //
  "compilerOptions": {
    //
    "types": ["node"]
  }
  //
}

3. Update Existing Environments

Next, we need to add an hmr property with value false in all other environment files (except environment.hmr.ts).

export const environment = {
  //
  hmr: false
}

4. Configure Your Application

Create a new file named hmr.ts inside src folder with following content.

import { NgModuleRef, ApplicationRef } from '@angular/core'
import { createNewHosts } from '@angularclass/hmr'

export const hmrBootstrap = (
  module: any,
  bootstrap: () => Promise<NgModuleRef<any>>
) => {
  let ngModule: NgModuleRef<any>
  module.hot.accept()
  bootstrap().then(mod => (ngModule = mod))
  module.hot.dispose(() => {
    const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef)
    const elements = appRef.components.map(c => c.location.nativeElement)
    const makeVisible = createNewHosts(elements)
    ngModule.destroy()
    makeVisible()
  })
}

then, we need to modify the main.ts file inside src folder to use HMR feature.

import { enableProdMode } from '@angular/core'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { environment } from './environments/environment'
import { hmrBootstrap } from './hmr'
import { RootModule } from './app/root/root.module'

if (environment.production) {
  enableProdMode()
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(RootModule)

if (environment.hmr) {
  if (module['hot']) {
    hmrBootstrap(module, bootstrap)
  } else {
    console.error('HMR is not enabled for webpack-dev-server!')
    console.log('Are you using the --hmr flag for ng serve?')
  }
} else {
  bootstrap().catch(err => console.log(err))
}

5. Add NPM Script

Add an hmr property in scripts object in the package.json file to make running app easier.

"scripts": {
  //
  "hmr": "ng serve --configuration hmr"
}

Success! 👏

We finished configuring HMR for the angular project.
Now try running the app

yarn hmr

or with npm

npm run hmr