DEV Community: K M H Mubin

React or Vue, Which one should I learn?

K M H Mubin — Fri, 24 Sep 2021 06:39:53 +0000

Hello guys,
I'm pursuing the full-stack web development. I learn HTML, CSS, JavaScript and most popular CSS Framework like Bootstrap and tailwind CSS along with SCSS.

Most of the time, I spend on my time on Backend development. I mostly work on Django backend and sometime Node js(not frequently).
Now I'm planning to learn a frontend framework, which one should I learn between React and Vue. Both have their own advantages and disadvantage.

Tell me if you learn only one, which one it should be? Share your experience. Help me to choose one of them.

How to Design Print Ready Website?

K M H Mubin — Fri, 08 Jan 2021 14:51:12 +0000

Currently, I'm trying to make a document website about my projects. When I try to print the website, it will format like the full print document.

Here is an example, from tutorialspoint website

Website version:

Print version:

I know there is some good documentation website like docusaurus. I don't want to use those.

How can I achieve that style in CSS?

Please guide me.

Thank you.😀

How Did GitHub Profile READMEs Become the Best? Find out.

K M H Mubin — Tue, 17 Nov 2020 13:20:40 +0000

It takes just a glance, maybe three seconds, for someone to evaluate you when they see your profile or portfolio for the first time. In this short time, the other person views you based on your personality, creativity, taste, activities, and many more.

A person who has a relationship with technology might frequently visit a famous place called GitHub. A platform where more than 50 million people learn, share and work together to build software. It lets you and other work together on projects from anywhere and also contribute to the open-source projects.

With the introduction of Profile READMEs, GitHub is now a one-stop-shop for not only showing off your tech skills and coding prowess but also anything else you might want to share about yourself.

Think of it as a creative portfolio, personal website, and expressive canvas all rolled into one. Plus, all your code is there as well!

If you use GitHub to impress recruiters, friends, or anyone else coming across a GitHub profile, creating a profile README is the perfect way to stand out!

This article will show you how to create a badass one and make it stand out using some cool tricks and tools!

What is a GitHub README? 🤷

It's the first canvas anyone sees in a repository. README files typically include information about the project, and each repository should have one. How users can use the project and contribute to the project is some good content from READMEs.

What is a GitHub Profile README? 🙄

GitHub Profile README can be used to inform people of more information about ourselves. You can show off your hobbies, your sense of humor, and many awesome personality traits. It’s the best way to stand out from the rest of the Github community!

It also supports markdown, which means that we can add lots of fun stuff with HTML, emojis, GIFS, pictures, and many more.

👀 A sneak peek of my GitHub Profile README.

Create your own Profile README ➕

I'm assuming that you already have an account on GitHub. Creating GitHub Profile README is very simple, but you probably would not find it on your own.

To create it, go to https://github.com/new when you want to create a normal repository.
Name the repository with your username - in my case, that would be kmhmubin/kmhmubin. As soon as you type it in, you will be greeted with a message telling you about this secret repository.

Fig: Creating GitHub Profile README

NOTE: As I have already created the repo hence it's showing
“The repo already exists.”

Ensure your repository is Public and Initialize this repository with a ** README ** file and .gitignore file.

That’s it! GitHub does the rest of the work for you! A README.md
will automatically be generated in this special repository. Github renders that file at the top of your Github Profile, above your pinned repositories and activity.

Clone your Repository 📇

Now clone your new repository; it will help us to edit and test the README locally as much as we want.

To clone the repository, click the Green Button called Code. It will give us a link to download the repository. Please copy the link because we need it later.

Fig: Copy your GitHub Profile repo link

We will use the GitKraken Git GUI tool. You can use the terminal if you want to. Now open the Git Kraken on your pc. Sign in to Git Kraken by using GitHub Account.

Click Clone a repo option from Git Kraken.

Fig: Clone the GitHub Profile repo

Select GitHub and search your repository name and select the clone it button. It will start to clone your Profile repo on your local pc.

Fig: selecting your Profile repo

Organize your repository folder 🧱

Go to the directory where you save your local version of the Profile repo. Here is an example of my repo directory.

Note: Make sure hidden items option enable

Fig: local profile repo

Here is the folder structure at a glance.

kmhmubin:.
|   .gitignore
|   GitHub-Profile-Cover.jpg
|   LICENSE
|   README.md
|   
+---.github
|   \---workflows
|           blog-post-workflow.yml
|           topFollowers.yml
|           waka-readme.yml
|       
+---assets
|       dev.svg
|       facebook.svg
|       hashnode.svg
|       instagram.svg
|       linkedin.svg
|       mubinsodyssey.svg
|       twitter.svg
|       
\---src
        getTopFollowers.py

By default, when you clone your repo, it only contains 3 files or folder; those are .git, .gitignore, and README.md Except for those, you need to create 3 more folders.

assets: In this folder, you save your images, GIFs, and icons.
src: In this folder, you create a Python script named *getTopFollowers.py*. This script allows you to show your top followers.
.github/workflows: In this folder, store your workflow files. Workflow files use YAML syntax and must have either a *.yml** or .yaml file extension.*

If you're new to YAML and want to learn more, see "Learn YAML in five minutes."

Commit your changes and push those files to your GitHub Repository.

Personalize your Profile README 👨‍🎨

Just as with a personal website, Profile READMEs are essentially a snapshot of who you are. The options are endless. From creative profiles to interactive games, you can pretty much represent yourself however you want!

Here I'm going to complete one step at a time and commit these changes. You can follow along with me. At first, open your README.md file in an editor like VS CODE or Sublime Text.

📌 Cover Photo

I would suggest adding a nice header to make it more personalized. You can include a custom cover photo. You can make a cover photo in canva with 1920 x 583 px resolution. Save your cover photos on your GitHub repo and copy the link. Here is an example code:

![Banner](https://github.com/kmhmubin/kmhmubin/blob/master/GitHub-Profile-Cover.jpg)

Fig: Adding a cover photo

📌 Live visitor counter

I wanted to see if I could make my profile look a little bit of fun. So I added a live visitor counter to see how many people visit my GitHub Profile. I choose the Retro visitor counter cause I look good with my cover photo. Here's the example code:

<!-- retro visitor counter -->
<p align="center"> 
  <img src="https://profile-counter.glitch.me/{user-name}/count.svg" />
</p>

Change the {user-name} to your username in the URL like this:

https : //profile-counter.glitch.me/songoku/count.svg

The preview will look like this. PS: count number starts with zero.

Fig: Adding retro visitor counter

To learn more about the Retro visitor counter by Ryan Lanciaux check out his article.

%[https://dev.to/ryanlanciaux/quick-github-profile-visit-counter-14en]

📌 Welcome message with Gifs

Sayin hi with emoji looks impressive, but if you add a cool gif, it looks more expressive. So I'm adding a hand waving gifs with my welcoming text.

<!-- welcome message -->
<h2>Hi there <img src="https://media.giphy.com/media/hvRJCLFzcasrR4ia7z/giphy.gif" width="25px"></h2>

<h3>Glad to see you here!</h3>

It's really looking more lively than a simple emoji.

Fig: Adding Hand waving Gifs

📌 About yourself

In this section, you can add a bit of you, who you are, what you are doing, or what you are learning. You can add fun facts, jokes, etc.

📌 Social Links

You should definitely include some contact information in your profile, whether it’s an email, Twitter handle, LinkedIn, or other social media. Whichever you chose to include, you might want to use icon links to make it easier for people to find/notice.

You can download free icons from Iconscout. If you need to edit any icons, you can do it by their icon editor. After downloading all the social icons, upload it to your GitHub repo. And copy all these links and add to your README. Here is an example

<!-- Connect with me -->
<h3 align="left">Connect with me:</h3>
<p align="left">

<a href="https://twitter.com/kmhmubin" target="blank"><img align="center" src="https://github.com/kmhmubin/kmhmubin/blob/master/assets/twitter.svg" alt="kmhmubin" height="30" width="30" /></a>
<a href="https://linkedin.com/in/kmhmubin" target="blank"><img align="center" src="https://github.com/kmhmubin/kmhmubin/blob/master/assets/linkedin.svg" alt="kmhmubin" height="30" width="30" /></a>
<a href="https://fb.com/kmhmubin" target="blank"><img align="center" src="https://github.com/kmhmubin/kmhmubin/blob/master/assets/facebook.svg" alt="kmhmubin" height="30" width="30" /></a>
<a href="https://instagram.com/kmhmubin" target="blank"><img align="center" src="https://github.com/kmhmubin/kmhmubin/blob/master/assets/instagram.svg" alt="kmhmubin" height="30" width="30" /></a>
<a href="https://hashnode.com/@kmhmubin" target="blank"><img align="center" src="https://github.com/kmhmubin/kmhmubin/blob/master/assets/hashnode.svg" alt="kmhmubin" height="30" width="30" /></a>
<a href="https://dev.to/kmhmubin" target="blank"><img align="center" src="https://github.com/kmhmubin/kmhmubin/blob/master/assets/dev.svg" alt="kmhmubin" height="30" width="30" /></a>
<a href="https://mubinsodyssey.com" target="blank"><img align="center" src="https://github.com/kmhmubin/kmhmubin/blob/master/assets/mubinsodyssey.svg" alt="mubinsodyssey" height="30" width="30" /></a>

</p>

Fig: Adding Social Links

📌 Languages and Tools

This section shows which programming languages you are using and what tools are used every day. We will generate those icons from GitHub Profile Readme Generator or download all those programming languages icons all by yourself and upload them to your GitHub repo, which will take a long time can add shields.io badges. To add those icons, we are going to use shortcuts.😅

Go to GitHub Profile README Generator website.
Select the programming icons that you use and hit the generate button.

Copy all those links and add them to your readme like this.

<h3 align="left">Languages and Tools:</h3>
<p align="left"> <a href="https://www.cprogramming.com/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/c/c-original.svg" alt="c" width="40" height="40"/> </a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/javascript/javascript-original.svg" alt="javascript" width="40" height="40"/> </a> <a href="https://www.python.org" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/python/python-original.svg" alt="python" width="40" height="40"/> </a> <a href="https://reactjs.org/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/react/react-original-wordmark.svg" alt="react" width="40" height="40"/> </a> 
</p>

Fig: Adding Languages and Tools

📌 Latest Blog Posts

Show your latest blog posts from any sources on your GitHub profile/project readme automatically using the RSS feed using this GitHub Action. To show your blog post follow those steps.

Create a folder named .github and create a workflows folder inside it.
Create a new file named blog-post-workflow.yml with the following contents inside the workflows folder:

name: Latest blog post workflow
on:
  schedule: # Run workflow automatically
    - cron: '0 * * * *' # Runs every hour, on the hour
  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called) through the Github Actions Workflow page directly
jobs:
  update-readme-with-blog:
    name: Update this repo's README with the latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          feed_list: "https://dev.to/feed/kmhmubin,https://mubinsodyssey.com/rss.xml"

Replace the above URL list with your own RSS feed URLs. See popular-sources for a list of common RSS feed URLs.
Go back to your README.md file.
Add the following section to your README.md file; you can give whatever title you want. Just make sure that you use  in your readme. The workflow will replace this comment with the actual blog post list:

# Blog posts
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

Commit and wait for it to run automatically or trigger it manually to see the result instantly.

To trigger the workflow manually, please follow the steps:

Go to your GitHub Profile Repo.
Click on the Action tab from your repo.
Select the option name Latest blog post workflow and click run workflow button.

Fig: Trigger the workflow manually

It will run the workflow and show the blog post from your website.

Fig: Blog posts shows

To learn more about Blog post workflow, check out this repo by Gautam Krishna R.

%[https://github.com/gautamkrishnar/blog-post-workflow]

📌 WakaTime Weekly Metrics

WakaTime gives you an idea of the time you really spent on coding. This helps you boost your productivity and competitive edge. To show your waka time stats follow those steps:

Add a comment to your README.md like this:

<!--START_SECTION:waka-->
<!--END_SECTION:waka-->

Head over to https://wakatime.com and create an account if you don't have.
Get your WakaTime API Key from your Account Settings in WakaTime.

Fig: Wakatime API key

You'll need a GitHub API Token with repo and user scope from here.

Fig: selecting repo and user scope

Fig: Creating a GitHub API token

Copy the API Token and head back to your Profile README repo.
You need to save the WakaTime API Key and the GitHub API Token in the repository secrets. You can find that in the Settings of your repository. Be sure to save those like the following.
- WakaTime API Key as WAKATIME_API_KEY=<your wakatime API Key>
- GitHub Personal Access Token as GH_TOKEN=<your GitHub access token>.
Fig: Adding API & Token to repository secret
Create a folder named .github and create a workflows folder inside it.

Create a new file named waka-readme.yml with the following contents inside the workflows folder:

name: Waka Readme

on:
  schedule:
    # Runs at 12am IST
    - cron: '30 18 * * *'

jobs:
  update-readme:
    name: Update Readme with Metrics
    runs-on: ubuntu-latest
    steps:
      - uses: anmol098/waka-readme-stats@master
        with:
          WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}
          GH_TOKEN: ${{ secrets.GH_TOKEN }}

Commit and wait for it to run automatically, or you can also trigger it manually to see the result instantly.

By default, all flags are enabled; if you want to disable some of these flags, add a False value end of the flags. Here is an example:

name: Waka Readme

on:
  schedule:
    # Runs at 12am IST
    - cron: '30 18 * * *'

jobs:
  update-readme:
    name: Update Readme with Metrics
    runs-on: ubuntu-latest
    steps:
      - uses: anmol098/waka-readme-stats@master
        with:
          WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}
          GH_TOKEN: ${{ secrets.GH_TOKEN }}
          SHOW_PROJECTS: "False"
          SHOW_COMMIT: "False"
          SHOW_PROFILE_VIEWS: "False"
          SHOW_LINES_OF_CODE: "False"
          SHOW_DAYS_OF_WEEK: "False"
          SHOW_SHORT_INFO: "False"
          SHOW_LOC_CHART: "False"
          SHOW_LANGUAGE_PER_REPO: "False"

To learn more about waka time readme stats by Anmol Pratap Singh.

%[https://github.com/anmol098/waka-readme-stats]

📌 GitHub Stats

GitHub Readme Stats is a tool that allows you to generate GitHub stats for your contributions and repositories and attach them to your README. GitHub profile is really just a place to showcase your repositories and highlight your activity/contributions. To show your dynamically generated GitHub stats on your readme, follow those steps:

Copy-paste this into your markdown content, and that's it. Simple! Change the ?username= value to your GitHub's username.
Here, we are showing GitHub Statistics and Most used languages side by side.

<!-- GitHub stats -->
<b>⚡ My Dev Statistics</b>

<p>
<!-- GitHub Stats -->
<img height="180em" src="https://github-readme-stats.vercel.app/api?username=kmhmubin&show_icons=true&hide_border=true" />

<!-- Most Used Languages -->
<img height="180em" src="https://github-readme-stats.vercel.app/api/top-langs/?username=kmhmubin&exclude_repo=KNN-Image-Classification&show_icons=true&hide_border=true&layout=compact&langs_count=8"/>
</p>

Fig: Showing GitHub Stats

You can change the theme and color style however you want. To change color or theme, then check out this repo.

%[https://github.com/anuraghazra/github-readme-stats]

📌 My follower section

You can dynamically generate your GitHub followers. It's enjoyable to see who is following you. To show your dynamically generated follower on your readme, follow those steps:

Create a new folder name src inside your repository.
Create a new file named getTopFollowers.py with the following contents inside the src folder:

"""
   Copyright 2020 Yufan You <https://github.com/ouuan>

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and limitations under the License.
"""

import requests
import sys
import re

if __name__ == "__main__":
    assert(len(sys.argv) == 4)
    handle = sys.argv[1]
    token = sys.argv[2]
    readmePath = sys.argv[3]

    headers = {
        "Accept": "application/vnd.github.v3+json",
        "Authorization": f"token {token}"
    }

    followers = []

    for i in range(1, 100000):
        page = requests.get(f"https://api.github.com/users/{handle}/followers?page={i}&per_page=100", headers = headers).json()
        if len(page) == 0:
            break
        for follower in page:
            info = requests.get(follower["url"], headers = headers).json()
            if info["following"] > 5000 and info["public_repos"] < 50:
                print(f"Ignored: https://github.com/{info['login']} with {info['followers']} followers and {info['following']} following")
                continue
            followers.append((info["followers"], info["login"], info["id"], info["name"] if info["name"] else info["login"]))
            print(followers[-1])

    followers.sort(reverse = True)

    html = "<table>\n"

    for i in range(min(len(followers), 14)):
        login = followers[i][1]
        id = followers[i][2]
        name = followers[i][3]
        if i % 7 == 0:
            if i != 0:
                html += "  </tr>\n"
            html += "  <tr>\n"
        html += f'''    <td align="center">
      <a href="https://github.com/{login}">
        <img src="https://avatars2.githubusercontent.com/u/{id}" width="100px;" alt="{login}"/>
      </a>
      <br />
      <a href="https://github.com/{login}">{name}</a>
    </td>
'''

    html += "  </tr>\n</table>"

    with open(readmePath, "r") as readme:
        content = readme.read()

    newContent = re.sub(r"(?<=<!\-\-START_SECTION:top\-followers\-\->)[\s\S]*(?=<!\-\-END_SECTION:top\-followers\-\->)", f"\n{html}\n", content)

    with open(readmePath, "w") as readme:
        readme.write(newContent)

Go back to your README.md file.
Add the following section to your README.md file; you can give whatever title you want. Just make sure that you use <!--START_SECTION:top-followers—> <!--END_SECTION:top-followers—> in your readme. The workflow will replace this comment with the actual blog post list:

# My followers
<!--START_SECTION:top-followers--> 
<!--END_SECTION:top-followers-->

Go back to the **.github** folder.
Create a new file named topFollowers.yml with the following contents inside the workflows folder:

name: Get Top Followers

on:
  push:
    branches:
      - master
  schedule:
    - cron: '0 20 * * *'

jobs:
  top-followers:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup python
        uses: actions/setup-python@v2
        with:
          python-version: 3.8
      - name: Install requests
        run: pip install requests
      - name: Update README
        run: python src/getTopFollowers.py ${{ github.repository_owner }} ${{ secrets.GITHUB_TOKEN }} README.md
      - name: Commit changes
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git add -A
          git diff-index --quiet HEAD || git commit -m "Update top followers"
      - name: Pull changes
        run: git pull -r
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}

Commit and wait for it to run automatically, or you can also trigger it manually to see the result instantly.

Fig: Top Follower Preview

This Python Scripts originally developed by Yufan You, so check him out.

%[https://github.com/ouuan]

Congratulation! 🎉🎊 You have successfully created your GitHub Profile README.

Conclusion 💯

From awesome photography to cool GIFs to Spotify “Now Playing” badges… pretty much anything goes. It doesn’t have to be crazy or complicated. Some of the coolest profiles are quite simple.

These are just some of the creative ideas I’ve seen… the world is your oyster. Take advantage of the profile to show off your personality. Make it concise, be creative, and original, but most importantly, make it your own.

Resources 📚

A basic guide to Markdown: Markdown cheatsheet
Icons to make your README extraordinary: Iconscout.
Emojis to make your README fun: Emojis guide
Gifs to make your README lively: GIPHY
Easy and customizable badges: Shields.io
Resources for dynamic profile: Github Actions
Some cool profile READMEs: Awesome READMEs

Check out my profile README if you’re interested and follow me on GitHub.

%[https://github.com/kmhmubin]

🚩👉 If it was useful to you, please Like/Share to reach others as well.

I talk about web development and UI design on Twitter @kmhmubin, come to talk with me there!

Add Hashnode Blog On Google Search Console

K M H Mubin — Wed, 11 Nov 2020 09:14:19 +0000

The utility SEO tool provides you with a thorough analysis of the people who visit your site daily. For example, How much web traffic you're getting, what pages do people search when they open your site, what makes your site successful, or vice versa.

Every successful website SEO professional and webmaster has this mighty tool at his/her disposal. This tool is called Google Search Console. Search Console accounts are the main and the official way in which Google communicates with individual sire owners. Google can send webmasters information about site issues, performances, or errors.

In this article, we will look at Google Search Console from the absolute beginner's perspective. Why you need it, how to get it, and how to install it on your website.

Table of Content

What is Google Search Console
Why should you use Google Search Console
Set up an account
Add Sitemap

What is Google Search Console? 🤔

Google Search Console is a collection of tools and resources to help website owners, webmasters, web marketers, and SEO professionals monitor website performance in the Google Search Index. It's a free platform for anyone with a website to monitor how Google views their site and optimize its organic presence. That includes viewing your referring domains, mobile site performance, rich search results, and highest-traffic queries and pages.

Google Search Console was formerly known as Google Webmaster Central and then Google Webmaster Tools until taking the current name in 2015.

Why should you use Google Search Console?🤷

Google Search Console has been created to track the performance of your website easily. You can get valuable insights from your website, which means you can see what part of your website needs work. This can be a technical part of your website, such as an increasing number of crawl errors that need to be fixed. This can also be giving a specific keyword more attention because the rankings or impressions are decreasing. You need to be continually improving your content, refining your site settings, and minimizing your errors. It lets you do things like submit and monitor your XML sitemaps, ask Google to re-evaluate your errors, or see how Google sees particular pages and URLs on your site.

Set up an account 👨‍🔧

🔴 First things first. If you haven’t already signed up for Google Search Console, it’s time to do so.

🔴 Sign in to your Google Account. The thing to remember, use your business account if it's a business website.

🔴 Go to Google Search Console Official Website.

Fig: Official Website

🔴 Click on the "Add a property" button.

Fig: Add a property

It will give you two options to add your property. Those are:

Domain: This option allows you to add a domain name without www or subdomains. This option tracks everything connected to that domain.
URL Prefix: This option allows you to add the right URL with https if you have an https website and with or without www.

🔴 Here we are going to choose the second option, which is URL prefix. Add you're right URL on the form and hit the continue button.

Fig: Adding Website URL

The next step is verifying your website on the search console because it gives you access to confidential information about site performance.

There are a couple of verification methods, but you need to verify at least one option. Let's take a look at all the verification options.

HTML file upload: Upload a verification HTML file to a specific location of your website.
HTML tag: Add a tag to the section of a specific page’s HTML code.
Google Analytics tracking code: Copy the GA tracking code you use on your site. You need “edit” permission in GA for this option.
Google Tag Manager container snippet code: Copy the GTM container snippet code associated with your site. You need View, Edit, and Manage container-level permissions in GTM for this option.
Domain name provider: Sign in to your domain registrar (like GoDaddy, Enom, or networksolutions.com), verify your site directly from GSC, or add a DNS TXT or CNAME record.

🔴 From all the above options, we are going to choose the HTML tag options.

Fig: Selecting HTML tag option

🔴 This option gives you unique HTML tags and copies the tags.

Don't share these tags with anyone. Also, make a backup of the tags for futures needs.

Fig: Coping the HTML tag

Here's an example of HTML tag:

<meta name="google-site-verification" content="pLSTUJW7BTtJJN2G654sdleSdslpd8pg8b8QFM48" />

🔴 Go to your Blog's Dashboard. There is two way to go to your dashboard. Those are:

💠 From Your website homepage

Fig: From your homepage

💠 From Hashnode

Fig: From Hashnode

🔴 Choose one option you like. From Navigate to the "Integration" tab and paste the HTML Tag inside the "Meta tags" field.

Fig: Adding HTML tags on your blog

🔴 Click on the "Update" button. This will clear the cache of your blog's homepage and insert the HTML tag provided by Google inside the <head> tag of your blog.

🔴 Go back to Google Search Console and click on the "Verify" button. If you have followed the above steps correctly, Google should find the meta tag and verify the domain.

Fig: Ownership verified

Add Sitemap 🗺️

Adding a sitemap to the Google Search console means you tell Google about the links present on your blog. It will help your site to Crawl. There are four situations on a site map that will improve your site's crawl ability:

The more pages you have, the easier it is for Googlebot to miss any changes or additions.
It has lots of “isolated” pages. Any page that has few inbound links from other pages is harder for a web crawler to discover.
It’s new. Newer sites have few backlinks (links from other sites), making them less discoverable.
It uses rich media content and/or shows up on Google News. In these cases, your sitemap makes it easier for Google to format and display your site in search.

🔴 Go to the Sitemap section present on the sidebar on Google Search Console.

Fig: Adding Sitemap

Every blog on Hashnode has a sitemap, and it's available at /sitemap.xml. For example:

https://yourblogname.hashnode.com/sitemap.xml
or
https://yourblogname.com/sitemap.xml

🔴 On successful submission, you should see the following screen.

Fig: Sitemap Submitted successfully

That's it! Google is now aware of your blog. It'll crawl your sitemap periodically and index your blog posts, even the future ones, automatically.

Congratulation! 🎉🎊 You have successfully set up the Google Search Console on your Hashnode blog.

✨✨Bonus tips, Linking your blog from your social media profiles is another great way to tell Google about your blog.

Facing Problem or other info 😲

If you face any problem or want to ask questions or suggestions, you can join the Hashnode Exclusive Discord server and chat with them.

🚩👉 I talk about web development and UI design on Twitter @kmhmubin, come to talk with me there!

The cover image is an improvisation on top of the work from Canva.

Which Terminal Are you using on Windows 10 Right Now?

K M H Mubin — Wed, 11 Nov 2020 06:41:47 +0000

Hello Everyone 👋
Currently I using Cmder console. It's a pretty good console with a lot of customization. But it has small speed issues compare to git bash or build-in terminal. I'm looking for a new terminal that solves these issues. Any Suggestion?

Thank you.

Install Google Analytics On Your Hashnode Blog

K M H Mubin — Mon, 09 Nov 2020 07:08:51 +0000

Do you have a blog or a static website? If the answer is yes, whether they are for personal or business use, you need Google Analytics. In this article, we're going to look at Google Analytics from the absolute beginner's perspective. Why you need it, how to get it, and how to install it on your website.

What is Google Analytics? 🤦‍♂️

Google Analytics is a free web analytics tool offered by Google to help you analyze your website traffic.

Google Analytics allows you to track and understand your customer’s behavior, user experience, online content, device functionality, and more. Google Analytics allows you the information needed to help you shape your business's success strategy, discovering things you probably never knew about visitors to your site. That's why over 50 million websites around the world use Google Analytics.

Why you need Google Analytics? 🤷

If you have a website, you should be using Google Analytics. There are no exceptions here – it’s a useful and important tool for every website owner.

Here are just a few of the many questions about your website that you can answer using Google Analytics.

How many people visit my website?
Where do my visitors from?
What websites send traffic to my website?
Which pages on my website are the most popular?
What marketing tactics drive the most traffics to my website?

There are many additional questions that Google Analytics can answer, but those are the most important for any website owners.

How does Google Analytics Work? 🤔

Google Analytics puts several lines of tracking code into the code of your website. The code records your users' various activities when they visit your website, along with the attributes of those users. Then it sends all the information on the Google Analytics server once the user exits your website.

Google Analytics collected data from your website in multiple ways, mainly by four levels:

User Level: related actions by each user

Session Level: each visit

Pageview Level: each page visit

Event Level: button clicks, video views, subscription, etc

How to install Google Analytics ⚙️

At first, you need a Google account for other services like Gmail, Google Drive, etc. If you don't have one, then you will need to create a new one.

⛔Don't let anyone like your web designer, web developer, web host, or SEO person create your website's Google Analytics account under their own Google account so that they can "manage" it for you. If you do, they part ways, they will take your Google Analytics data with them, and you will have to start all over.

Set up your account

Once you have a google account, you can go to Google Analytics and click the Sign into Google Analytics button. You will be greeted with the Google Analytics home page.

Fig: Homepage of Google Analytics

After you click the Sign-Up button, you will fill out information for your website. We're going to assume you have one website and only need one view.

In the account setup section, you will find an option to give your account name. You can give your website name.

Fig: Add account name

Beneath this, you will have the option to configure where your Google Analytics data can be shared.

Property setup

Here you need to add a property name. The property represents a business's data. In the reporting section, select your time zone and currency based on the country.

Fig: Add property details

Below, you can find an option named "Show advance options" and pressed it.

Fig: Create a universal analytics property

It will give a new option to create a universal analytics property. Here, you need to add your website URL and select the second option named "Create a Universal Analytics property only." This option will give you only Universal Analytic ID's.

Add Business Information

In this section, you need to tell select the industry category for your website. For example, if your website shares information about jobs or education, select Jobs & Education. Tell me about your business size and what kind of information you are seeking.

Fig: Add Business Information

After adding all the information the hit the create button, and it will pop-up the term and agreement page, select term and condition based on your country, and hit the next button.

Fig: Term and condition option

You are almost done with creating Google Analytics Account. After creating an account, it will redirect you to the Tracking Code page. If it doesn't redirect automatically, click the left setting button and then select the Tracking Info option. Here you will find your Google Analytics Tracking ID.

🚫 Never share your tracking ID with anyone.

Fig: Copy Tracking ID

Your universal tracking ID starts with UA. Here is an example Tracking ID.

Tracking ID:
UA-54546992-1

Copy Your tracking ID and Go to your Blog website.

Installing your tracking code 💾

Once you are finished, you need to install it on every page of your website. Here, go to your hashnode blog, then select the Dashboard. On the dashboard, you will see an option name INTEGRATION; select this option. You will find a page like this below.

Fig: Adding Google Analytics Tracking ID

You will see a dedicated option to enter your tracking ID. Simple paste your tracking ID and save the change. It will automatically add this tracking ID to all webpages. Also, it will start tracking your information.

Congratulation! 🎉🎊 You have successfully set up Google Analytics on your blog.

Facing Problem or other info 😲

If you face any problem or want to ask questions or suggestions, you can join the Hashnode Exclusive Discord server and chat with them.

🚩👉 If it was useful to you, please Like/Share to reach others as well. Please hit the Subscribe button at the top of the page to get an email notification on my latest posts.

I talk about web development and UI design on Twitter @kmhmubin, come to talk with me there!

The cover image is an improvisation on top of the work from Canva.

Set Up Your Own Blog on Hashnode

K M H Mubin — Sat, 07 Nov 2020 11:04:10 +0000

You want to start a blog. That's a great idea!

But don't know how to set up a blog. Every time you search on the web, you are overwhelmed by so much info and everyone telling you to do different things. Who do you listen to? Where's the starting point? It's too confusing!

Well, hold up. I'm going to tell you the easiest way to set up a dev blog on your own fully free. I promise it'll be simple, relatively easy, and definitely easy to understand.

Awesome, let's move on.

Table of content 📇

Create An Account
Setup your profile
Give a name to your blog
Enter Domain name
Map your personal domain
- Namecheap
- Godaddy
You are all set

Create An Account 📝

To get started, go to Hashnode and click on the start your personal blog for free blue button to sign up.

Fig: Official Website of Hashnode

It will pop up a new window, which tells you to enter an email address to create a new blog. You can choose any email address you want or open an account using a social media account. If you chose to enter the email address instead, you'd receive a secure link in your inbox. Click on it to sign up.

Fig: sign up/in with an account

Here, I'm using my google account to sign up because I'm lazy😅. You can choose your desire email account.

Fig: choose your desire email address

Setup your profile ⚙️

After you choose the email, it will give you an option to set up your profile.

Fig: Setup your profile

Complete the form by uploading a photo, adding a unique user name and a tagline, and then hitting the next button.

Give a name to your blog 🤔

Give a proper name to your blog. You can name it whatever you wanted to and then hit next. Remember, this is your first step toward creating personal branding.

Fig: Give a name to your blog.

Enter a domain name 🌍

Here, Hashnode offers you two options. Those are:

Hashnode's free subdomain
Personal domain

💠 Hashnode's Free subdomain

Hashnode offers you a free subdomain, which can be used as your personal domain. If you don't have enough money to buy a new domain or don't own a domain name, this option is for you. Even you can choose the name for your subdomain if you want to. Pretty cool, right!🤩

Here an Example:

Sub-domain Example:

=> coolcats.hashnode.dev

Fig: hashnode's sub-domain

💠 Personal Domain

You can add your personal domain name. Enter your domain name without HTTP/HTTPS, and it will map your domain to Hashnode's blogging platform.

Here is an example:

Personal Domain Name:

=> mubinsodyssey.com

Fig: Adding a personal domain

Map your personal domain 🗺️

Adding your personal domain requires a few works. You need to add a CNAME record to your domain.

Fig: Add CNAME Record message

Hashnode Show you a message like this.

Add a CNAME record where the hostname is @ and the corresponding value is hashnode.network, or you can add an A record at the root whose value is 192.241.200.144

There are many ways to add a CNAME record to your domain, but here I'm showing the two most popular domain register site options. Those are:

Namecheap

If you buy your domain from namecheap.com, then follow those steps.

🔴 Sign in to your Namecheap account

🔴 Select Domain List from the left side menu and (3) click the Manage button next to your domain:

Fig: select domain list

🔴 Navigate to the Advanced DNS tab and (5) click the Add New Record button.

Fig: add new record

🔴 Select CNAME Record from the drop-down menu for Type, put your desired host **@** for Host and enter the record itself hashnode.network into Value. The default TTL value should be fine.

Fig: Adding CNAME Record

🔊 Follow this value table.

Type Host Value

CNAME Record @ hashnode.network

Type	Host	Value
CNAME Record	@	hashnode.network

🔴 Once you've done this, wait for 30 minutes for the host records to be accepted.

Hashnode automatically provisions an SSL certificate for you when you visit your blog for the first time.

GoDaddy

If you buy a domain from godaddy.com, then the above option will not work. Cause GoDaddy doesn't let you set a hostname of "@" for CNAME records, so this method doesn't work. Instead, we have to use an alternative option. So follow these steps.

🔴 Sign in to your GoDaddy account

🔴 Select manage your domain.

Fig: Select Manage DNS

🔴 Here you should see a list of DNS records. If there any A record exists, then remove it. Now click the Add button below.

Fig: Click ADD button

🔴 Select A from the drop-down menu for Type, put your desired host @ for Host and enter the record itself 192.241.200.144 into Value. The default TTL value should be fine.

Fig: Adding A value

🔊 Follow this value table.

Type Host Value

A @ 192.241.200.144

Type	Host	Value
A	@	192.241.200.144

🔴 Once you've done this, wait for 30 minutes for the host records to be accepted.

Hashnode automatically provisions an SSL certificate for you when you visit your blog for the first time.

You are all set 🙆‍♂️

You're all set to start blogging on your personal domain that's powered by Hashnode's blogging platform.

Fig: you're all set

Follow technologies you care about 🏃

You can follow the technologies you care about. It will personalize and show blog posts based on your following.

Fig: Follow technologies you care about

Welcome To Hashnode 🎉

Welcome to hashnode. Now are a proud member of the Hashnode community. Time to share your story.

Fig: welcome to hashnode

Here are some of my favorite bloggers on Hashnode whom you can follow:

Facing Problem or other info 😲

If you face any problem or want to ask questions or suggestions, you can join the Hashnode Exclusive Discord server and chat with them.

🚩👉 I talk about web development and UI design on Twitter @kmhmubin, come to talk with me there!

The cover image is an improvisation on top of the work from Canva.

Getting Started with Hashnode

K M H Mubin — Thu, 05 Nov 2020 11:28:03 +0000

Hashnode is a free blogging platform with an amazing community that allows you to publish articles on your own domain. On October 27, 2020, Hashnode achieves Product of the day on Producthunt.

Hashnode gaining popularity because of its unique features and easy to use. It has lots of built-in features that every technical blogger needs. Let's find out what makes hashnode different.

Free

Traditional blog websites require a custom domain and hosting. And it's not cheap. Setting up those and make it fully functional requires a lot of time and technical knowledge. As a beginner, you might not own a custom domain or any of those skills which require setup. To solve this problem, Hashnode offers you a unique subdomain, which allows you to publish your content totally free.

Custom Domain

Haahnode offers you to add your custom domain to your existing blog. You can set up a custom domain with a CNAME record.

Customization

You can personalize and customize your blog as you need. You can make your blog look different by adding custom CSS. Not only custom CSS, but you can also add third-party widgets.

Community

Hashnode has an amazing community. You can meet new people every day. You can get help from others or sharing your thought with others. Hashnode also offers you an exclusive Discord Channel, where you can directly talk with the founding members of Hashnode.

Learn from others

On Hashnode, you can follow other developers. You can read their content and follow them so that your favorite writer publishes a post you get notified immodestly.

Draft Sharing

I personally like this feature. If you are new to writing, you always feel that is it enough or lack something or fully explain what I wanted to. To answer all of those content, you can share your draft with others. They can read your draft and give you a lot of feedback.

Other features

Some of the other features are

Get automated backups of your articles on your private GitHub repo
Use GitHub as a source for your articles
Automatic HTTPS
Fast CDN
Built-in newsletter service

The good thing is that you can always request new features, which are implemented depending on usefulness.

Conclusion

If you want to start publishing your own articles without worries and want an amazing community, Hashnode is for you.

In the next lesson, we’ll learn how to set up Hashnode for you.

🚩👉 If it was useful to you, please Like/Share to reach others as well.

I talk about web development and UI design on Twitter @kmhmubin, come to talk with me there!

The cover image is an improvisation on top of the work from freepik.

Will Python Overtaken by Others!!

K M H Mubin — Wed, 28 Oct 2020 12:56:59 +0000

Nothing is eternal in this world of the living. Everything has an expiry date, even for programming languages. Right now, Python is the big fish in the market. According to many surveys, Python is one of the most widely used programming languages of 2015. In addition to being simple and easy-to-learn, Python enables developers to express concepts without writing longer code lines. The language has undergone a drastic change since its release 25 years ago, as many add-on features are introduced.

But Python, like other programming languages, has several shortcomings. Programmers need to know some of Python programming language's major limitations, which can be overtaken by other programming languages. Let's find out.

Why Python popular 😍

According to StackOverflow 2020 survey, python is one of the most wanted languages. Around 30% of developers want to develop something by using it. Also, 66.7% of developers love the Python programming language. Python’s success is reflected in the Stack Overflow trends, which measure tags in posts on the platform.

Here is another survey result from TIOBE Index for python.

As a programming language, the features of Python brought to the table are many. Some of the most significant features of Python that makes it so trendy:

Easy to learn
Readability
Memory Management
Object-Oriented
Exception Handling

Limitation of Python ⚠️

Python has varied advantageous features, and programmers prefer this language to other programming languages because it is easy to learn and code. But like every technology, Python has its weaknesses. I will go through the most important flaws, one by one, and assess whether these are fatal or not.

⭕ Speed

Python is slow. It takes a longer time to execute a task compared to other languages like C, C++. Python executes with an interpreter's help instead of a compiler, which causes it to slow down because compilation and execution help it work normally.

⭕ Run-time Errors

The Python language is dynamically typed, so it has many design restrictions that are reported by some Python developers. It is even seen that it requires more testing time, and the errors show up when the applications are finally run.

⭕ Mobile Development

Python wasn't made with mobile in mind. Developers cannot use python directly for developing mobile apps by targeting any popular mobile platforms. They have to use frameworks like Kivy to build cross-platform mobile apps using Python.

⭕ Lack of Modules support

A large and active community supports Python. The Python community members regularly share new packages or modules to make it easier for programmers to add functionality to the application. But developers often complain that the quality of individual Python modules or packages differs. Some of these packages lack adequate support and are not updated regularly.

⭕ Depends on Third-Party Frameworks and Libraries

Python lacks several features provided by other modern programming languages. So the programmers have to use some third-party frameworks and tools to build web applications and mobile apps in Python.

Overtaken by other languages 🔄

There are a few competitors on the marker of programming languages:

💠 R

R possesses an extensive catalog of statistical and graphical methods. It includes machine learning algorithms, linear regression, time series, statistical inference, to name a few. It is one of the most popular languages used by statisticians, data analysts, researchers, and marketers to retrieve, clean, analyze, visualize, and present data.

💠 Rust

Rust is a modern programming language focused on memory safety and performance. There is no virtual machine, garbage collection, or other fluff, which you will find in higher-level languages. Rust primarily aims to solve a lot of the issues which C/C++ programmers face frequently.

💠 Go

Go language is an effort to combine the ease of programming of an interpreted, dynamically typed language with the efficiency and safety of a statically typed, compiled language. It also aims to be modern, with support for networked and multicore computing.

💠 Julia

Julia is a high-level, high-performance, dynamic programming language. While it is a general-purpose language and can be used to write any application, many of its features are well-suited for numerical analysis and computational science. Julia aims to create an unprecedented combination of ease-of-use, power, and efficiency in a single language.

Conclusion 👌

Given the ubiquitous popularity of Python at the moment, it will surely take half a decade, maybe even a whole, for any of these new languages to replace it.

🚩👉 If it was useful to you, please Like/Share to reach others as well. I talk about web development and UI design on Twitter @kmhmubin, come to talk with me there!

The cover image is an improvisation on top of the work from Unsplash 💖

First Programming Language That I learned As A Computer Science Student

K M H Mubin — Sat, 24 Oct 2020 09:03:13 +0000

The way we speak to others is called language. It helps us to express ourselves and understands others. It also applies to computers but a little bit different. Computer language helps us communicate with a computer—the difference between a computer and a human being feeling and self-awareness.

To communicate with the computer, we use programming language. Just like every other language, programmer language has its own grammar. In real-life conversation, grammar doesn't matter too much, but it does because the computer follows every grammar rule.😥

Objective

As a child I always admire computer. I always think about how a computer works or how I can make a game. I asked so many people how can I make this or that. The simple answer is they did not have any concept of programming language. It takes me a long time how those programs or games are made. To pursue my dream, I am studying Computer Science and Engineering. Truth be told, It's quite a hard subject.

Difficult to understand the concept

I have been learning programming languages for a few months on my own before pursuing my undergrad. It's tough to understand the concept without anybody's help. But It was properly introduced to me during my first semester as a computer science student. It was C language. It taught in general because of its popularity and versatility.

Ups & Downs

During my learning the C programming language, I faces so many difficulties. Sometimes it feels like an alien language. Some concept goes over my head. It was a tough time to cope with others. I feel depressed and miserable. One of the main reasons was that I'm a slow learner. It takes me some time to understand the concept like an array, functions, pointer, and many more.

“There is always light in the midst of the Darkness, even if it’s only a pinpoint in the distance. And when it seems as if there isn’t, it’s just an illusion. Just a lie that the Darkness wants you to believe. Breakthrough the illusion. Remember that you’re growing through it and towards the light. You are always growing towards the light.” ― Millie Florence, Lydia Green Of Mulberry Glen

I found a way to solve my problem. I can't find any cure for my slow learning ability, though I found a way to understand those programming concepts on my own. It totally changes my life as a computer science student. You might be thinking that how I solve my problem. Don't worry. I'm going to share my secret on how I solve any problem.

To solve any problem, first find out the root.
Ask yourself why is it happening
Write down all the causes
Write down all the alternative options
Try to experiment with other options
One of the options will work, if not try again

What about the programming concept. How can I easily understand those concepts without having a hard time? For me, The problem was how it was taught. Those concepts, though, in the English language. For me, I was quite hard to understand at that time. So I find out a generous solution. If English is not your primary language, then this technique helps you to understand any programming language.

First I make note of all of those concepts taught in class.
Then I convert all of those things into my native language.
Try to make as much as visualization steps you can. Like what will be the next step.

Those three steps really solve my major problem. It totally changes the way of thinking and also helps to solve any problem.

Here is a picture from my own note on For loop concepts.

For Loop Concept

Motivation

The learning journey requires lots of concentration and motivation. If you lost focus, that's means you easily lost motivation. It requires a lot of time to learn the programming language. Because every single concept is linked with each other, you can not move forward to learn other concepts if you don't understand a concept. It can make you frustrated, and angry too. Ultimate, you start avoiding the coding stuff. If you lost, try again from the start. Don't worry if it takes a lot of time. You don't need talent; work hard as much as you can.

Hard work beats talent if talent doesn’t work hard.
— Tim Notke, basketball coach

Conclusion

In conclusion, Learning a programming language requires lots of dedication. It doesn't matter how you start; it is a matter that you enjoy learning. If you enjoy it, you can become a better developer.

If it was useful to you, please Like/Share to reach others as well. I talk about web development and UI design on Twitter @kmhmubin, come to talk with me there!

How To Get An Internship At Google

K M H Mubin — Tue, 20 Oct 2020 06:30:35 +0000

In today's labor market, employers rely heavily on resumes that display a relevant work history, whether from internships, volunteer work, or actual job experience. When attempting to enter the job market, it's all about competition.

An internship enables you to gain first-hand exposure to working in the real world. It also allows students to utilize the skill, knowledge, and theoretical practice they learned in university. You can gain an endless amount of education in your life. However, that knowledge doesn't always translate to working life. The experience we go through is what makes us.

As a tech student, we always try our best to get hired by the best tech companies. Google is one of the best tech companies in the world right now. Not only that, but Google also offers various internships such as Engineering & Technical internships, UX, Project Management, and many more for students. Google interns get paid more than most full-time employees across the country. According to Glassdoor, the average Google intern makes $5,678 per month or $68,136 per year.

Eligibility

Google offers different types of internships, which are outlined below, along with minimum requirements:

Engineering and Technology Internships

Associate Product Manager: Currently pursuing a bachelor’s, master's, or Ph.D. degree in computer science or related field.
Engineering Practicum: Currently, a first - or second-year undergraduate student pursues a bachelor’s degree in computer science or related technical field at a 4-year.
Hardware Engineering: Currently pursuing a full-time bachelor’s, master's, or Ph.D. degree in electrical engineering, mechanical engineering, or related field.
Mechanical Engineering: Currently pursuing a full-time bachelor’s, master’s, or Ph.D. degree in mechanical engineering or related technical field.
Software Engineering: Currently pursuing a PhD in computer science or related technical field.
STEP (Summer Trainee Engineering Program): Currently pursuing a bachelor’s degree in computer science or related field.
User Experience: Currently pursuing a full-time BA/BS degree in graphic design, human-computer interaction, computer science, or related field

How to Apply

Once you've found the perfect internship, the next step you need to take is to send your application. There are four main ways to do this:

Online

Applying online on the Google internship portal. You will need your resume and transcript in PDF format. You can also add an optional cover letter.

Referrals

Ask someone in Google to refer you. You can find them on LinkedIn who work at Google. This will only get you past the resume screening process. After that, the procedure is the same for everyone.

Mailing Google HR

Find a previous google employee ( x-googler ) or a former inter. Ask him/her to provide you the email address of the HR. Mail the HR directly, clearly stating your purpose with a well-crafted cover letter and resume.

Google Summer of Code

Google Summer of Code is a global program where students work on the project with open source organizations under mentorship. Students contact the mentor organizations that they want to inter with and submit a project proposal.

Prepare for an Interview

Interviews are one of the most difficult parts of the hiring process. But as long as you come prepared, you should be alright. Here are some interview tips to keep in mind:

Research The Company

It is essential to gain basic information about the company you are interviewing—lookup for important information about the company - vision and mission, key personnel, and recent milestones. It would help if you also read up on the latest news about the specific department or vertical you are interviewing.

Analyze Job Description

Read the job description carefully, and make a list of the points to justify how you can achieve these specific duties.

Prepare For Tests

Do prepare for any written tests, activities, and/or presentations mentioned in the job posting. This way, there will be no surprises during the interview, and you will be mentally prepared for it.

Practice Questions

Ask a trusted friend or family member to roleplay with you and practice answering common interview questions like 'tell me about yourself,' 'describe who you are,' 'why should I hire you,' 'why do you want this job,' 'where do you see yourself in five years', etc. Please make a list of such potential questions related to the job profile, background, company, etc. and prepare them in advance.

Communication Skills

Good communication skills can go a long way in impressing the interviewer. Listen carefully to everything the interviewer is saying. When communicating, speak calmly, and clearly. Don’t be in a rush to get all the answers out. Avoid mumbling as it makes you look nervous and unsure. If you do not know the answer, be honest about it. Always maintain good body language. When you talk to an interviewer, be sure to look at them. Don’t look down or at the wall or the clock. This shows a lack of confidence.

Every interviewer may have a different style of talking and conducting an interview. Follow their lead in their way of talking and professional behavior. This will show you can listen well and adapt easily to the office environment.

In case you feel the interview isn’t going as well as you hoped, don’t be sad or demotivated?. Continue to reply honestly and enthusiastically. Remember, a positive attitude can leave a good impression on the interviewer.

Ask The Right Questions

The interviewer may ask you if you have any questions. Here, do not hesitate to bring up whatever concerns you. However, ask only relevant questions. These can be about attributes of the specific job and the department. Any random questions can be dealt with later.

Show Gratitude

No matter how your interview goes, always take a moment to thank the interviewers for their time and consideration. A positive attitude and polite behavior can go a long way in impressing people. Remember, the interview is all about you and how well you represent yourself. So be confident and well mannered.

What's Next

Once you’ve completed the interview stage of Google’s hiring process, a hiring committee will review your application, and if you are deemed fit for the role, you will get the offer. No more worries. Let's try our best.

Good Luck 🍀

🚩👉 If it was useful to you, please Like/Share to reach others as well. I talk about web development and UI design on Twitter @kmhmubin, come to talk with me there!

PowerToys The Ultimate Utility Tool On Windows 10

K M H Mubin — Wed, 14 Oct 2020 05:21:38 +0000

Want a custom layout? Want to pick a color from anywhere without installing extensions? Need to resize photos? Want to become a power user? Fire up the Microsoft new free utility tool Power Toys will give you freedom.

Last few years, Microsoft works hard. They release so many open-source projects. One of them is Power Toys. Microsoft launched the initial version of PowerToys for Windows 95 back in the 1990s. It gives power users the to improve productivity and customize features. In 2019, Microsoft relaunched the newest flavor of PowerToys for Windows 10.

Power Toys are designed to enhance and improve windows 10 in precise and useful ways. Color Picker lets you pick the color from anywhere. Fancy Zones create layouts to help you better position windows for multitasking. The file Explorer Preview enables you to preview the more advanced type of files and many more.

It's not currently available through the Microsoft Store. You can find this open-source tool at GitHub. PowerToys full name is PowerToys (preview). Despite its preview status, the new PowerToys collection is well worth a look.

Install PowerToys

To get started, go to the

PowerToys Official Link

on GitHub and download the latest release. You'll find it under

Releases

near the top right of the home page,

Or visit the Releases page directly.

Look for the latest release and click the PowerToysSetup MSI file link to download the file.
Double-click the MSI file to install it, and the PowerToys icon should appear in the Windows System Tray. Click the icon, or if it doesn't appear, open the PowerToys (Preview) shortcut from the Start menu, then click the System Tray icon. The PowerToys icon on your taskbar, right-click it, and select Settings.

PowerToys UI

After opening the PowerToys, you'll see a screen like this:

The PowerToys Settings screen appears, pointing you to the General screen. Here, you can decide to run PowerToys as an administrator; it's better to use PowerToys as an administrator, required for specific tools.

Color Picker

A system-wide color picker. People who work with graphics, photography often have to identify a specific color and use it. That's why tools like photo editor have a color picker tool that lets you point your mouse cursor at the part of an image to identify what color it is.

ColorPicker is a quick and straightforward system-wide color picker with
Win+Shift+C. Color Picker allows you to pick colors from any currently running application and automatically copies the HEX or RGB values to your clipboard.

Win+Shift+C

Click once, and the hex color code will be copied to your clipboard so you can paste it. If you prefer RGB, you can open the Color Picker screen in the PowerToys Settings window and choose to copy the RGB color code instead when you click.

Fancy Zone

FancyZones is a window manager that makes it easy to create complex window layouts and quickly position windows into those layouts.

Windows 10 lets you multitask by positioning windows into different areas on the screen, but getting the right window into a specific spot can be challenging. With FancyZones, you can set up a particular screen layout ahead of time, then pop windows into each predefined zone of that layout.

To do this, select FancyZones in the PowerToys Settings window and click Launch zones editor. At the FancyZones editor, create a layout by choosing one of the default templates—such as columns, rows, or grid—and modifying it. Then add or remove zones as you see fit. Alternatively, click the heading for Custom to build a layout from scratch. When done, click Apply.

Windows+`

By default, you can press Windows+` (that's a tilde, the key above the Tab key) to open the Zone Editor. Then, while dragging and dropping a window, you can press and hold the Shift key (or another mouse button, like your right mouse button) to see the zones. Drop a window in a zone, and it'll snap to that layout on your screen.

File Explorer

The Windows 10 File Explorer can already preview a range of different files, including PDFs, images, audio files, video files, and Microsoft Office documents.

With the PowerToys File Explorer, add-ons will enable SVG icon rendering and Preview Pane additions for File Explorer.

Preview Pane is an existing feature in the File Explorer. To enable it, you click the View tab in the ribbon and then click Preview Pane. PowerToys will now enable two types of files to be previewed: Markdown (.md) & SVG (.svg)

Image Resizer

Sometimes a photo or other graphic is too large to share via email. You can change the size through a dedicated image editor, but the PowerToys Image Resizer tool is convenient.

PowerToys offers a quick image resizer that integrates with File Explorer.

With it enabled, select one or more image files in File Explorer, right-click them, and select Resize Pictures.

Keyboard Manager

Keyboard Manager allows you to customize the keyboard to be more productive by remapping keys and creating your keyboard shortcuts.

Power Rename

Windows don't make it easy to rename files in bulk, especially if you want to give each file a unique identifier. With PowerRename, you can rename multiple files based on a specific pattern. Open File Explorer and select the files you want to rename.

Right-click one of the files and choose PowerRename from the pop-up menu.

PowerToys Run

Finding a specific application or file to open can be challenging, especially if the item doesn't appear in your Start menu or another convenient spot.

PowerToys Run is a new toy in PowerToys that can help you search and launch your app instantly.

Alt+Space

Press Alt+Space. Now start typing the name of the item you want, and results will begin to populate in the list. Click the result for the app or file you wish to open.

Shortcut Guide

Windows 10 offers a variety of keyboard shortcuts that you can use in combination with the Win key. We can't remember all of them. PowerToys shortcut guide solves this simple problem.

Windows

Just press down on the Windows Key until the shortcut guide appears and display a list of each available shortcut.

Conclusion

PowerToys helps me to become more productive. I've been using this tool for a while. It has more than enough options, which operate in daily day tasks, especially tools like Power Run and Fancy Zone.