DEV Community: Aman Kumar Jagdev

Best Chrome Extensions you should have as a web developer

Aman Kumar Jagdev — Fri, 07 May 2021 12:57:11 +0000

Getting Started

👋🏻 Hey Swift Readers, to keep it simple for you, you can skip the introduction and directly jump to extensions by clicking here

Introduction

I have been doing web for quite a time now, and like every other web developer, most of my time is spent on my browser(Chrome) and my code editor(VS Code).
As we all know most of us use Chrome 🌐 or some sort of Chromium-based daily, and extensions are something that can really improve the experience while using it. I always looked for interesting extensions to improve my productivity as a web developer and here are some which I found quite useful.

Extensions

So, I have compiled a shortlist of Chrome extensions that I use regularly to increase productivity as a web developer. ✌🏻

Click on the links below to jump to a particular extension
These extensions can be installed on any chromium-based browser.

Major browser which supports these extensions is Chrome, Microsoft Edge (Chromium-based version), Brave and Chromium itself.

WhatFont
GitZip
React Developer Tools
JSON Formatter
Cookie-Editor
Color Picker – ColorZilla

WhatFont

Download

WhatFont | Chrome Web Store

What it does?

This allows you to easily identify fonts present on a web page. It presents you with a beautiful one-click simple UI to inspect fonts, giving you all the required information about a font such as name, size, family, weight, etc.

WhatFont in Action

GitZip

Download

GitZip | Chrome Web Store

What it does?
This extension allows you to directly download files and sub-directories of a GitHub repository as zip, without having to clone or download the whole project.

GitZip in Action

React Developer Tools

Download

React Developer Tools | Chrome Web Store

What it does?

This helps you to inspect your React components and their state inside the Chrome dev tools. It can be accessed in the new tabs in Chrome Dev Tools "⚛️Components" and "⚛️ Profiler“, which will be added after installation.

React Developer Tools in Action

JSON Formatter

Download

JSON Formatter | Chrome Web Store

What it does?

It helps you to beautify & format JSON with Syntax highlighting which makes it easier to read.
For example Responses in the form of JSON from an API.

JSON Formatter in Action

Cookie-Editor

Download

Cookie-Editor | Chrome Web Store

What it does?

This is a fast and easy-to-use cookie manager for your sites, you can easily delete, edit, search, add, protect and block cookies on your site. You can even import and export them in JSON format.

Cookie-Editor in Action

ColorZilla

Download

ColorZilla | Chrome Web Store

What it does?

This extension helps you to extract a color reading from any point in your webpage. It provides you with an advanced eyedropper tool providing you with hex code of the color and other information.

ColorZilla - Colorpicker in Action

Moreover, you can also use the inbuilt color picker in power toys (if you are on windows).
To check out more interesting windows productivity tools, go to Top Windows apps to boost your productivity

What's next?

First and foremost, thank you for reading. If you've made it this far, leave a reaction to show your support!

Furthermore, feel free to leave a comment with any additional chrome extensions that you use on a regular basis, and let's have a healthy discussion over there. 😄

Top Windows apps to boost your productivity

Aman Kumar Jagdev — Sat, 24 Apr 2021 08:05:31 +0000

Getting Started

👋🏻 Hey Swift Readers, to keep it simple for you, you can skip the introduction and directly jump to apps by clicking here

Introduction

Since I remember using computers 💻 , I've been a windows 🐱‍💻 user (Except for a few Linux distro switches). I always wanted to improve my experience and I always looked for interesting applications to improve my productivity.
I've been developing for years and I'm still eager to find applications to improve my productivity both for general and development purposes.

More to come!

Many of the apps listed in this article are very feature-rich. I'm doing this as part of a series in which I'll be thoroughly discussing the best possible use cases and setups for each of these applications and their plugins to help you become a productivity god!!
So Stay tuned for updates on this series 😄

Applications

So, I have compiled a shortlist of windows applications that I use regularly to increase my productivity. ✌🏻
The majority of the applications listed here are open source, and their repositories are also related if you want to contribute.

Click on the links below to jump to a particular app
Moreover, Important links are present at the first line of each app for faster usage

PowerToys
Windows Terminal
Auto Hot Key
Everything
Quick Look

Power Toys

Links

What it does?

This is a utility application created by Microsoft. "Windows machine utilities to optimize efficiency," according to Microsoft's description.

In a Nutshell, This small application bundles many fantastic productivity features into a single package that would otherwise require the installation of several individual applications, such as an advanced color picker, Fancy Zones, Keyboard Manager, Power Rename, and much more!

Power Toys Application

Color Picker

Above is just one example of what you can achieve with power toys, a full guide will be posted soon!

Windows Terminal

Links

What it does?

It is another Microsoft product that aims to combine all terminals into a single modern, fast, reliable, and effective terminal.

It works for shells such as Command Prompt, PowerShell, and WSL.

Some of its features are having multiple tabs, panes, and Unicode support, as well as UTF-8 support for all you emoji🤪 fans out there.

But what sets it apart is that it has a GPU-accelerated rendering engine to speed it up and we can also build custom themes and designs for our command line.

Windows Terminal in Action

NOTE: The windows terminal will not look exactly like the image above when it is first installed. The full customization and configuration guide will be available soon!

Auto hotkey

Links

What it does?

It is simply a macro-creation and automation utility, that allows users to automate repetitive tasks.

They have their own custom scripting language used to program .ahk (auto hotkey) script files.

At its most potent, this is a very strong tool, and we can achieve incredible results with it. From extending a basic abbreviation to automating the whole system

Auto Hot key in Action

Above is an example of a very simple script that can help you achieve simple automation, but you can look at this post to better understand the Auto Hotkey!

Everything

Links

What it does?

One thing we may all agree on is that Windows search sucks, and while it has improved significantly, it is still far from perfect.

"Everything," on the other hand, is a sophisticated search engine that immediately locates files and directories.

Everything in Action

The example above shows how you can search for something, but wait for the full guide for more amazing integrations of everything that can make your life even easier.

Quick Look

Links

Quick Look

What it does?
According to their own description, "QuickLook enables a very quick preview of file contents by pressing the Spacebar"

And it does just as it says, bringing up the fast preview functionality of Mac OS inside Windows.

It supports a wide range of major image, video, text, and other file formats!
It will be a game-changer in terms of saving time when previewing files in windows.

Quickly previewing an image file

Quickly previewing an video file

What's next?

First and foremost, thank you for reading. If you've made it this far, leave a reaction to show your support!

Check on series updates for complete guides on these individual applications and to further improve your experience with Windows.

Furthermore, feel free to leave a comment with any additional productivity tools for Windows that you use on a regular basis, and let's have a healthy discussion over there. 😄

Build your React App Faster!

Aman Kumar Jagdev — Sat, 04 Jul 2020 05:08:49 +0000

So I guess most of you must be wondering from the title that how can I build my apps faster. Is there some sort of extension for autocomplete or some niche little vscode tricks to get your development faster.
The answer is quite different.

You all must have heard of templates and most of you might be using starter templates to make your apps. Some of you might be using good old create-react-app.

So imagine you had a GUI app to just mention the name of your component and pages in react and if you want to have routing enabled and automatically you have an app to work with.. with all the things you needed in the first place.

So I thought of making something that could achieve this.

For those who are in a hurry can directly check it out themselves.
React Builder

Journey

One day as I was doing some project, I started with the create-react-app and started making different components and pages. As most of the apps nowadays require routing, I installed react-router-dom I set it up with the Navigation bar.
I used to repeat the above-mentioned process again and again in different projects. So I thought I should make a template out of it. But that would also be troublesome cause we have different component names and different routing styles and sometimes we don't even need routing.
I might need one component to be ClassBased with state and I might need one to be functional.
So from here, I got the idea of making React-Builder.

Solution

So the solution I thought is a GUI tool to help you get started with your react apps faster.

So the Tool is named React Builder.

This is the homepage

Usage

Step 1 | Choose your preferences

Here you can select your preferred starter environment currently it only supports create-react-app.
Moreover, you can choose between yarn or npm/npx. And you can give the name to your project.

Step 2 | Choose Dependencies to add

You can directly mention packages you want to add in the app.
Ex: We have react-router-dom axios etc..

Step 3 | Add Components and Pages

Here you can add all the component Names with their type and you can select whether a component is a page or not.

Note: Routing will only be done between components marked as pages

Step 4 | Add routing

You can enable routing in your app from here. And you can select which component to use as Navigation Component or you can say Navigation Bar.

NOTE : Don't remove react-router-dom dependency if you enable routing

Step 5 | Build your App

Once you click on Create App It will download a js file and will give you a script

You would need to place that js file in the folder you want to create the react app and run the script there.

Final Result

You have successfully created your react app with desired preferences.

The folder structure generated with App.js on following the above steps looks like this.

As you can see it has generated all the components and pages and installed dependencies and also done routing in App.js and our Navigation Component.

So what are you waiting for Start Hacking now
GO to : React Builder

Contribution

It is an open-source project. Take some time to look over the project yourself and feel free to make improvements and contribute to the noble cause

REPO : https://github.com/amanjagdev/react-builder

Fed up with logging Everything! | AutoLogMe

Aman Kumar Jagdev — Sat, 27 Jun 2020 08:01:06 +0000

Recently while I was working on my project and couldn't find the bug, Nothing seemed to be working. So I started with the oldest approach of just logging everything I can.

Starting with things like "This function called" and then going on to the variables, step by step I started logging everything.

Soon enough everything in the whole program was logged.😂

I realised that its too much work just to explicitly mention my function name and then logging variables. And as it became cluttered we had to use logs like "#####FUNCTION CALLED>>>>" and "foo>>> ${foo}".

Journey

Suppose you only have a function that just does this automatically for you. You only need to pass in some variables and it will show you them in a formatted manner. Moreover you don't even to mention the name of the function and it will automatically log it for you.

I thought of developing something that could just help me log everything faster and clearly than I do.

Solution | auto-log-me

I made an npm package to resolve the issue that you can use in your projects to easily do debugging and in general logging.

auto-log-me
Check it out

What it does?

As the name suggests It helps you to debug your js programs by logging the function name with the variables and you can use one of the three given function to also log and Error, Warning or Info along with it.
The best part is everything is colour coded so it won't get cluttered.

Installation

yarn add auto-log-me
OR
npm install auto-log-me

How to use it?

Import

const { autoLog, autoLogE, autoLogI, autoLogW } = require('auto-log');

import { autoLog, autoLogE, autoLogI, autoLogW } from 'auto-log';

Usage | This Example shows many possibilities on how to use this.

const CalledInThis = () => {
    const foo = "Value of foo";
    const foosome = {
        value: "This is a object"
    };

    autoLogI('Hi');
    autoLogW('Hi');
    autoLog('Hi');
    autoLogE('Hi');
    autoLogI();
    autoLogW();
    autoLog();
    autoLogE();
    autoLogI('', { foo, foosome });
    autoLogW('', { foo, foosome });
    autoLogE('You can even write errors', { foo, foosome });
    autoLog('', { foo, foosome });
}
CalledInThis();

Output

Getting Started with React Hooks

Aman Kumar Jagdev — Thu, 25 Jun 2020 12:23:23 +0000

In February 2019, React Team finally announced the stable release of React (Version — 16.8.0)with React Hooks included.
In this tutorial, we will go through the basics of React Hooks. We will go through topics such as what are React Hooks and how can you start using them today.

And at the last, we will focus on how you can easily rewrite your old Components into new ones using Hooks.

What Are React Hooks?

React Hooks let you use state, and other React features without having to define a Class-Based component. It basically helps you to make your code cleaner and easier to manage. React hooks lets you simply all the react lifecycle methods and use the state and other features in a Functional Component.

According to React’s official docs

A Hook is a special function that lets you “hook into” React features.

Before hooks only React Hooks, Only Stateful Components(i.e Class-Based components ) were able to use state and we could change the state using this.setState() method.

We used different lifecycle methods like componentDidMount() , componetWillMount() , componentDidUpdate()

And a basic counter program will look something like this:

Now In the above code, we have created a basic counter variable in the state and we are updating it using setState() method.

Now there are many hooks available to use in functional component to mimic the same functionality.

Such as useState(), useEffect() , useReducer(), useContext() and there are some other uncommon ones too.
But today we will be focusing on the useState() hook.

useState()

We call it inside a function component to add a local state to it. React will preserve this state between all the re-rendering happening.
useState() returns a pair which has the current state value and a function that lets you update the value.

Here to mimic the same code we start by a simple functional component and add the hook to it.

const [count, setCount] = useState(0);

Then we have a local state count = 0 and a function setCount() we can update the value of count by passing the new value in setCount(value).

And React will automatically handle the re-rendering of the component once the state is updated.

We need to import the hook from ‘react’ in order to use it.

import React, { useState } from "react";

And now we add a function to handle the updation every time the button gets clicked.

const updateCounter = () => {    setCount(count + 1);  };

And the final code using hooks will look something like this:

The above code will yield the same result as the previous one and hence we have successfully made a component with hooks.

There are many more hooks that we have not discussed here as it was just an introduction to the topic. I will soon update another hook’s story too. Meanwhile, you can visit the official website of ReactJS to study other hooks.

Now another question arises that …

Should you rewrite every single old component using hooks?

The answer to it is probably not, Class-based components and other lifecycle methods are not going anywhere soon. You should learn hooks and try to write new components using hooks.
If you have made big projects, It won't be a very good idea to rewrite them using hooks and you can definitely add new components using hooks which will be totally fine as you can mix Class and Function components.

To Study More

For more details on this, refer to React’s official website:

Official React Docs

React State Management with Recoil

Aman Kumar Jagdev — Wed, 24 Jun 2020 16:52:15 +0000

Recently in May 2020, A open Source project by the Facebook experimental community, Recoil's development was started. Now the project is set-up and is mostly ready to use.

NOTE: Beware, the project is still in development So I wouldn't suggest to use it directly in production projects.

What is recoil?

Recoil is a state management library developed by Facebook Experimental. But don't think of it as just another library.

As we all know recently Reacts Hooks came into play, and I love using React hooks. they make everything so much simple and the best part is not going over the fuss of classes and this.

If you also love using Hooks then Recoil is perfect for you.

What's Different?

If you are familiar with the other state management libraries then you must be familiar with the fact that all the state management libraries till now are only focused on the state. Every one of them like redux and context API is basically about handling the state the old way. Although they have implemented the hooks in them it still doesn't feel like using the native react hooks.
So, now let's see what recoil does differently :

It feels just like React (just like a global version of useState)
Easy State Management
Simple concepts like atom and selectors

Get Started | Implementing State

So basically there are two concepts introduced in Recoil i.e atom and selectors.

but before that, you need to add to your Application

import React from 'react';
import { RecoilRoot } from 'recoil';

const App = () => {
  return (
    <RecoilRoot>
      <TextInput/>
      <CharacterCount/>
      //Other Components
    </RecoilRoot>
  );
}

Atom

An atom represents a piece of state. Atoms can be understood as something that can be read from and written to from any component.
Components which are associated with this atom will automatically be re-rendered once atom is updated.

const someState = atom({
  key: 'textState', // have to be unique for recoil internal reasons
  default: '', // initial value of state/atom
});

Selectors

A selector represents a piece of derived state. You can think of this as the output of passing state to a function that modifies the given state in some way.

//Gives the No of charecters
const charCountState = selector({
  key: 'charCountState', // Have to Be Unique
  get: ({get}) => {
    const text = get(someState); //pass a atom in this function
    return text.length;
  },
});

Getting Started | Using State

There are two ways to get the declared state into our components. i.e By useRecoilState or useRecoilValue.

useRecoilValue

Whenever you want to use the value of the state but don't want to update it in the whole component.

import { useRecoilValue } from 'recoil';
const CharacterCount = () => {
    const count = useRecoilValue(charCountState);
    //Name of the Atom or selector
    return <>Character Count: {count}</>;
}

useRecoilState

Whenever you want to use the value of the state and also want to update globally through the component itself.

import { useRecoilState } from 'recoil';
const TextInput = () => {
    const [text, setText] = useRecoilState(someState);

    const onChange = (event) => {
        setText(event.target.value);
    };

    return (
        <div>
            <input type="text" value={text} onChange={onChange} />
            <br />
      Value of the state : {text}
        </div>
    );
}

Conclusion

We have successfully implemented the global state using Recoil. Although this was a small part but it is enough to use it in your projects. As we all know its a developing project so many changes whether they be explicit in syntax or under the hood. So I wouldn't really suggest to use it in big projects one can always try new things and in my opinion if you like Hooks then you would love using Recoil.

DEV Community: Aman Kumar Jagdev

Best Chrome Extensions you should have as a web developer

Getting Started

Introduction

Extensions

WhatFont

GitZip

React Developer Tools

JSON Formatter

Cookie-Editor

ColorZilla

What's next?

Top Windows apps to boost your productivity

Getting Started

Introduction

More to come!

Applications

Power Toys

Windows Terminal

Auto hotkey

Everything

Quick Look

What's next?

Build your React App Faster!

Journey

Solution

Usage

Step 1 | Choose your preferences

Step 2 | Choose Dependencies to add

Step 3 | Add Components and Pages

Step 4 | Add routing

Step 5 | Build your App

Final Result

Contribution

Fed up with logging Everything! | AutoLogMe

Journey

Solution | auto-log-me

What it does?

Installation

How to use it?

Getting Started with React Hooks

What Are React Hooks?

useState()

Should you rewrite every single old component using hooks?

To Study More

React State Management with Recoil

What is recoil?

What's Different?

Get Started | Implementing State

Atom

Selectors

Getting Started | Using State

useRecoilValue

useRecoilState

Conclusion

Refrences