Forem: Gulshan Saini

Why you should use TypeScript in 2021?

Gulshan Saini — Mon, 22 Feb 2021 17:25:43 +0000

Hey Guys, In this video I will try to convince you to use Typescript for your next projects or migrate existing projects. I am going to cover couple of scenarios where JavaScript miss common issue which are very obvious.

I will show you how TypeScript can help in catching bugs early in development cycle and reduce complexity of application. TypeScript helps in not only catching code issues during compile time, it also helps in reducing the code.

Typescript types are very powerful feature that can minimize issues in your code

I did #31Days31Videos challenge. Here’s what I learned.

Gulshan Saini — Mon, 01 Feb 2021 11:35:34 +0000

I started this year with a brand new Youtube channel on full-stack development. From 2015, I had a dream to start my Youtube channel, however, I was never serious about it. I kept delaying the things due to one or the other reason. It is not like I never took that step - I created few channels, posted some content however I was not consistent. Most of the channels I started, were not aligned with my daily work so, they never took off.

If you are just interested in numbers, here are the stats from my Youtube channel

Total Videos 📈

I managed to create 33 Videos in 31 days

Video Uploads : 30
Live streams : 3
Total View : 802
Watch Time Hours : 34.2 Hours
Subscribers : 29

Few reasons to delay

Fear to face camera
The camera and Mic on the PC is not of good quality
Trying to create content on topics, I was not confident about
Overthink about the content, script, and recording
More focus on Youtube channel art, logo, thumbnails, etc
Getting out of my comfort zone - I have a full-time job
I can't spend more time with my Family
English is not my native language and, people might not like it

To address some of the issues, I purchased

DSLR in 2017
A phone with a nice camera in 2018 for b-roll
WebCam and Mic in the year 2019

Even after purchasing all those gadgets, I was still standing in the same position.

Fast forward to 31 December 2020

On the night of 31 Dec 2020 at 9:00 PM(approx), I asked myself, what I accomplished in the year 2020. I started a successful blog that is getting decent traffic. I fully utilised the corona pandemic time and wrote around 80+ posts in 8 months. But my dream of having a successful Youtube channel was still a dream.

So that very moment, I decided to give it a serious thought. I created a plan on how the year 2021 should be. I gave myself a goal i.e. I want to be a content creator and helping other devs in the community. There is nothing better than videos to share your knowledge with the community.

I opened the excel file and came up with few topics/Youtube titles, I was comfortable with. So that I do not fail this time, I further split those topics into small topics that can be easily consumed by anyone. The idea was to focus on one topic at a time which allows the viewer to consume the content easily without getting distracted and overwhelmed. This was also good for me as a creator as I need not overthink about a topic and quickly get to the point while explaining. Also, these types of focused videos will take less time to produce, edit and upload.

This activity not only helped me in creating a concrete plan but also fixed other three reasons to delay, those were

Trying to create content on topics, I was not confident about
Overthink about the content, script, and recording
I can't spend more time with my Family

Now, most of the issues were fixed and it was time to celebrate New Year in another 1 hour.

Hold on hold on, few issues are still pending i.e. facing the camera, speaking while recording in a language that is not my native.

To fix those issues, a crazy idea came to my mind. Let's build a New Year Countdown app in ReactJS and that too live on Youtube. I quickly jumped on Canva and created a thumbnail and scheduled a Livestream. I was very nervous as I never tried live stream in past. I downloaded OBS, pasted my live stream API key, and went live in a couple of minutes. There was pressure on my mind to finish the small web app in just 50 minutes. I forgot everything and opened VSCode and started coding. I am glad I was able to finish the application just before New Year.

[shhhhh......secret - nobody came to watch while I was streaming 😂 ]

I was really happy about my decision to go live as it allowed me to overcome my fear. During the process, I didn't even think about the camera or voice quality. I used all super powers of a developer(Google & Stackoverflow). My main focus was to finish the application within a limited time.

Just after finishing the video, I decided to do the #31Days31Videos challenge. I already had a plan and list of topics that I would be covering in the next 31 days.

After posting continuously for 31 days

I feel more comfortable in front of Mic
I am not worried about the camera, mic, or language
Getting better at recording and editing videos
I am learning small things about the Youtube platform - you need not know everything before you start. You can make small improvements in each video.
Youtube feels like part of my daily routine - there is no need to have a special time/isolated space/recording studio.
I understood, to produce good quality you need to produce a good quantity. The more you create, the more you learn. The next video will always be better than the previous one. If you compare your first video with the latest one, you will always feel ashamed of it 😊

If you came this far and want to be part of my Youtube journey, please subscribe to my channel. If you enjoyed the content, smash the like(👍 ) button, just below the video. Turn on the bell (🔔 ) notifications so you get the latest updates, whenever I post a new video.

I hope this post helps and motivates you to accomplish your goals.

Cheers!!!

5 Command To Master Chrome Dev Tools

Gulshan Saini — Mon, 18 Jan 2021 12:49:17 +0000

Subscribe On Youtube

In this video I am going to show you 5 commands to master chrome dev tools

1 - Convert object to table

Command: table({})

let data = {
  "market": "Capital Market",
  "marketStatus": "Close",
  "tradeDate": "11-Jan-2021",
  "index": "NIFTY 50",
  "last": 14347.25,
  "variation": 209.89999999999964,
  "percentChange": 1.48,
  "marketStatusMessage": "Market is Closed"
};
table(data); // convert json to table

2 - Print all keys for an object

Command: keys({})

let data = {
  "market": "Capital Market",
  "marketStatus": "Close",
  "tradeDate": "11-Jan-2021",
  "index": "NIFTY 50",
  "last": 14347.25,
  "variation": 209.89999999999964,
  "percentChange": 1.48,
  "marketStatusMessage": "Market is Closed"
};
keys(data); // return keys of object

3 - Clear the console

Command: clear()

You can clear the console by typing CMD+K on MAC or CTRL+K on windows
Otherwise you can also call clear followed by round brackets and press return key

let data = {
  "market": "Capital Market",
  "marketStatus": "Close",
  "tradeDate": "11-Jan-2021",
  "index": "NIFTY 50",
  "last": 14347.25,
  "variation": 209.89999999999964,
  "percentChange": 1.48,
  "marketStatusMessage": "Market is Closed"
};
clear(); // clears console

4 - Inspecting element

Command: inspect(elementSelector)

You can inspect element without touching mouse or touchpad using following command

// go to google.com
// open developer console and type
inspect(document.querySelector('input[name="q"]'));

5 - Show markup of recently selected element

$0 returns the most recently selected element

BONUS TIP

Similarly, $1 returns the second most recently selected one
The $0, $1, $2, $3 and $4 commands work as a historical reference to the last five DOM elements inspected within the Elements panel

Opinion: Convert tutorial to video?

Gulshan Saini — Fri, 18 Sep 2020 05:55:58 +0000

I had a thought last night i.e. How to make dev.to post reach more audience.

Their are some great post which covers

explaining hard stuff
a new concept, package or library
entire process of developing project

etc...

So, I thought, Why not convert these posts to videos?

In video, I can refer to the post and follow steps while we solve some problem. A credit(link back) to post in video description.

What is your opinion?

Queries

Should I do that?
Am I allowed to do that? What is license of posts done on dev.to

How to crop image in browser using JIMP?

Gulshan Saini — Sun, 26 Jul 2020 15:09:18 +0000

I had a situation where I had no backend server to handle the crop and resizing of an image. I know of a few cloud services which could do this easily however they come with a cost. So I thought to implement the solution within the browser itself. Before we proceed, let we warn you that this might not be an optimal solution for a page with a lot of images and which might require the use of web worker to offload the task to worker threads.

Read full article

Output

How to disable prettier in VSCode for a specific project?

Gulshan Saini — Fri, 19 Jun 2020 16:54:26 +0000

Post source

Prettier is an opinionated code formatter and ensures that code follows consistent style. It can automatically fix formatting related issues for HTML, CSS and JavaScript - for complete list of supported languages, please look at the official docs.

If you are working in a big team and want consistent code formatting without manual intervention(code reviews), I highly recommend Prettier.

Prettier is available as VSCode extension which can be enabled and it automatically take cares of formatting. You could even set preference when to format the file i.e. on file save or when you paste text etc.

I love Prettier and use it daily for personal and organization projects. There could be a case where you do not want Prettier to automatically format files.

Now the first option is to disable the VSCode extension. I am sure this is not what you are looking for as it is pain to enable and disable the extensions every time you switch projects.

Other option is to enable Prettier only when a configuration file is present in the project. To enable this option open VSCode settings

On Windows/Linux - File > Preferences > Settings
On macOS - Code > Preferences > Settings

Search for Prettier:Require Config and make sure it is checked

WellHealthOrganic Vitamin B12

So how does this work?

By turning on this option, Prettier will only work for the projects having valid .prettierrc file. A valid .prettierrc could be as simple as having just opening and closing curly braces as follows

{}

Originally posted at tutorial.tips

What is rel="noopener"?

Gulshan Saini — Fri, 09 Aug 2019 02:14:12 +0000

Original Post

In HTML, link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, <form>, or <link> element.

When you open another page using target="_blank", the other page may run on the same process as your page, unless Site Isolation is enabled. The other page can access your window object with the window.opener property. This allows other page to redirect your page to a malicious URL - see About rel=noopener for more details. However, as mentioned by @Jake in his article, the origin security model of the web prevents other page from reading your page.

Solution

Include rel="noopener" for all external links, generally when using target="_blank". The new window will run in separate process and it won't be able to access window.opener property of parent page. You may also use rel="noreferrer" which also prevents Referer header being sent to new page.

Try it yourself

Google - Neither noopener nor noreferrer

<a target="_blank" href="https://www.google.com">Google</a>

Google - rel="noopener"

<a target="_blank" rel="noopener" href="https://www.google.com">Google</a>

Google - rel="noreferrer"

<a target="_blank" rel="noreferrer" href="https://www.google.com">Google</a>

Steps for verification

Click on link and go to new page/tab
Open developer console and check value of window.opener
While you are in developer console, go to network tab and reload the page to check referer under Request Headers(Chrome browser). For first & second, it should be https://gulshansaini.dev/what-is-rel-noopener/ whereas in third case, referer property should not be present.

Is SEO impacted if we use noopener or noreferrer?

Search engines do not consider noopener or noreferrer to rank pages. It is used to improve security of website.

Benefits of noopener

Improved security
Improved performance - if new tab/page is running expensive JavaScript, it won't affect the referring page as it will not run on a separate process.

Link to original post: https://gulshansaini.dev/what-is-rel-noopener/

Automate NPM versioning

Gulshan Saini — Thu, 28 Feb 2019 15:11:06 +0000

If you are already using npm cli to manage package/product version, this article might not be for you.

It may seem very obvious, to use npm cli to maintain package version(s) however in reality its totally different. I have seen projects where versioning is handled manually.

What is version?

When we release a package we need to version it. Versioning a release could also be swapped with term tagging.

When we create a version, we are actually pointing a git commit id to human readable alphanumeric string. In below example we can see how v16.8.3 is linked to commit id 29b7b77

What is semantic version?

A release could fall in any of below categories

Major release: Non backward compatible changes
Minor release: Backward compatible with new feature
Patch release: Bug fix release with no new feature

For example, if current package version is 1.0.0

patch release version would be 1.0.1
minor release version would be 1.1.0
and, major release version would be 2.0.0

Now, you can manually update the version in package.json and create new tag on current commit id however this is not what we want. We want some automation in this process.

Let's, do it!!

Automate semantic version with npm cli?

To demonstrate automation process, I am going to quickly create a new package and initialise repository on my local drive

mkdir semver && cd $_ && npm init -y && git init

Next, lets create a javascript file with single console.log statement just to visualize changes in git log

echo "console.log(\`index file -> v1.0.0\`)" > index.js

Also, lets commit changes to local repository

git add .
git commit -m "initial commit"

If we open package.json we can see, right now the version is set to 1.0.0

{
  "name": "semver",
  "version": "1.0.0",
   // skipped rest of lines
}

Lets begin by creating patch release

To make it more realistic lets change the console.log statement to print index file -> v1.0.1

Open your favourite editor and make those changes - finally the contents of index.js file should be

console.log(`index file -> v1.0.1`)

Also, do not forget to commit you changes.

git add .
git commit -m "fixed issue with console statement"

To create patch release we just need to type npm version patch in terminal

npm version patch
v1.0.1

That's it - npm automatically updated the package.json and created new tag v1.0.1.

To verify, open package.json in editor and you should see new version

{
  "name": "semver",
  "version": "1.0.1",
   // skipped rest of lines
}

Similarly, to verify if a new tag v1.0.1 was created we can type git tag in terminal

git tag

//output
v1.0.1

How cool was that!!!

Now, lets create minor release

Again, make some backward compatible changes in index.js and commit those changes

// contents of index.js after changes
console.log(`index file -> v1.1.0`)

// commit changes
git add .
git commit -m "updated minor version in logs"

To make minor version we just modify last portion of command as follows

npm version minor

//output
v1.1.0

Cool!!! you can again verify the updated version in package.json and new tag that was created using git tag command

Finally, lets create major release

Lets replace contents of index.js with below contents and commit changes

// contents of index.js after changes
console.log(`Hello`, process.env.USER)

// commit changes
git add .
git commit -m "replaced console message with new one"

To bump the major version we update last command as follows

npm version major

// we should see below output
v2.0.0

Finally, if we run git tag command on terminal, we should see all tags that we created above

git tag

// output
v1.0.1
v1.1.0
v2.0.0

You can type npm version --help in terminal to see all available options or, read further on official page npm cli

I hope you liked this article!!