The GitHub CLI is a recent GitHub released tool that takes tasks of issue / PR management to the terminal. It will be a useful tool that will put more of our workflow for software creation into the textual domain rather than the visual domain. It’s just called.gh

**Installation of GitHub CLI 💡**

GitHub CLI has releases with significant operating systems, visit the installation page and find instructions on how to install GitHub CLI for your operating system.

For [Windows] and [macOS], you will use the package managers to update and maintain GitHub CLI, and for Linux users, you may need to grab the software from the latest release website.

Here are examples of the installation instructions for each compatible platform:

→ Windows

→ macOS

→ Debian/Ubuntu Linux

→ Fedora/Centos Linux

→ Arch Linux

You’ll need to authenticate your account after you install GitHub CLI. Running any command would activate this process of authentication(via OAuth). Well, you can use Git CLI.

**What is CLI really doing? 🤔**

The GitHub CLI lets you handle issues/ PRs / repositories from inside your console. Let’s have a look at it:

It should be said that gh is not the same stuff as git. It’s because gh just adds GitHub tools to the terminal. Version management is yet to be managed with git.

CLI Commands ➫

We’re going to cover a bunch of exciting commands. Let’s use the official Angular.js repo to run gh commands

Clone the Angular repo, and navigate to the repository. You can either clone the repo through HTTPS/ ssh/ Git CLI. I'm going to clone the repo through git CLI since we are working on GIT CLI.

Let’s execute the $gh issue --help see what commands are available.

It’s Time to view Problems/issues in the angular repo.😁

Pull Requests 🤖

It is now possible to build a Pull Request (PR) on the terminal. You will perform $gh pr create right after you have committed a feature or bug branch. This interactively creates the pull request.😉

Let’s execute the $gh pr --help see what commands are available.

Current PR’s in the repo:

$ gh pr list

Let’s view an individual pr:

I’m going with the first pull request.#38899 Through gh cmd $ gh pr view.38899

**Repository 🤖**

Let’s execute the $gh repo --help see what commands are available

It is better to clone a repository using the gh command than with the git command. I have done this above. Only through gh cmd, I have cloned angular repo.

Start functioning. You should create a new PR after this ($gh pr create)! It's sort of remarkable that all of that element is now available in the terminal!😍

Gist 🐱‍🚀

It is now simple to create a gist on GitHub from the terminal using the CLI cmd.

Conclusion 🙀

Git CLI’s primary objective is to “minimize context switching” by allowing you to continue inside your terminal/console, rather than opening your browser to access GitHub. For additional functionality and knowledge on using the current resources, you may link to the manual.

Originally published at https://www.loginradius.com.

GitHub CLI Tool ⚒ was originally published in Frontend Weekly on Medium, where people are continuing the conversation by highlighting and responding to this story.

Table of contents

· What is GIT?
· What is the version control system?
· Git advantages
· How to install Git?
∘ Installing git in Linux (ubuntu)
∘ Installing git in Windows
· Creating repositories in Git
· Making changes in Git
· Git Clone
· Staging area in Git
· Deleting files in Git
· Git Ignore
· Tagging in Git
· Branches in Git
· Git Revert
· Git Reset
· Rebasing in Git
· Git cherry-pick

What is GIT?

Git is a free, open-source distributed version control system. This maintains track of the tasks and files as they evolve with the support of multiple collaborators over time.

What is the version control system?

Version control is a system that tracks modifications to a file or collection of files over time such that different copies may be restored later. If a developer had some bugs in the new version, of his code he can switch back to the previous(old) version.

When multiple developers work on a single project, the changes made by a single developer may affect the code of another developer. So, to resolve all these kinds of problems git has branches where each developer works on an individual branch with their code and tests their code, at last, they can merge all branches. It’s awesome right!!😎

Git advantages

• distributed development
• changelog of every file
• faster development
• source code backups, useful to restore the old version of code, when new code fails
• individual features for a single project
• isolated environment for every change to our code
• git works offline in our local machine

How to install Git?

Git supports common platforms like Windows, Linux, mac os

Installing git in Linux (ubuntu)

Update your Linux before installing git

Now, you can install git

after installation, you can check it through checking version of git [git — version].

Installing git in Windows

Check the official website of Git: https:/git-scm.com/downloads

Click the Download Button for Windows and allow the download to complete.

It’ll start downloading according to your computer either it maybe 32 or 64 bits. After downloading extract it and install it on your local machine.

Creating repositories in Git

There are two ways to build repositories:

❌ Cloning(Separate topic)

❌ Git commands

Cloning will be a separate topic.

Now, let’s use Git commands. To create a repository we can use git init command to initiate an empty git repo in our project directory it’ll create a .git file. has configurations such as tags, objects, and template files.

. Create your directory for your project

. Go to the project folder

. Git init command

after initializing the git repository user can work on the files and pushing to remote repositories like GitHub.

Making changes in Git

It’s one of the important features available in git, we can track the changes of file or changes of anything in our project before we do a commit.

Command to check the status

Status of the new repo

Status of the repo with changes

I have created a new file in the project directory index.html

Status of the repo after commit

cmd: git commit -m “(commit message)”

Git Clone

Git clone command clones a remote directory from GitHub and creates a new directory in your local machine.

Only Public repo can be cloned.

Shallow clone allows you to clone the specified number of commits the user needed.

Staging area in Git

It’s a stage before commit. In this stage, we can create partial commits, edit files, or modify files preparing of a commit is called the staging area.

git add .

The above command is used to update any modified and newly created files to the staged area, deleted files are not considered for the staging area.

git add -u

The above command is used to update any modified and deleted files to the staged area, newly created files are not considered for the staging area.

git add -A

The above command is used to update any kind of modified, deleted and newly created files to the staging area

Deleting files in Git

If the user needs to delete unnecessary files, the user can remove/delete that file from the working tree this will stop tracking changes for that file.

“git rm — cached filename.txt” only deletes the file from repo whereas other above cmd will delete both in filesystem and index.

This cmd will help the user to delete/remove the only specified set of extension files. For example Files with the extension (.py )

Users can restore the deleted file from the previous history of their repo.

Git Ignore

.gitignore file is used to exclude files, folders, and type of file extension to be excluded in the staging area and in git commits.

For example, in node.js project, the user will be excluding node_modules because it contains a lot of external packages/modules. Even junk files created automatically due to extensions of IDE’s.

Open git ignore file

Note that the file name should be .gitignore and it should be created only o the root directory of your project.

I’m using type nul> because I am using the Windows machine. It can change according to the user machine say for LINUX it’s Touch. Even you can create it through creating a new file and name it as .gitignore

Tagging in Git

Tags are used to mark your code. Tags are like “Bookmark” in git pointing to a specific commit. Even we can say tags are versions of your code v1, v2, v2.2, Creating a tag requires one parameter: the name of the tag.

There are two types of tags

• Annotated tags
• Lightweight tags

Annotated tags

Annotated tags are useful when you release project publicly, annotated tags contain metadata like tag message, timestamp, author name, release notes, etc, these are useful for releasing your project publicly because visitors or other unknown user are able to know the actual details and time stamp of the tag, annotated tags always point to a tag object in the git object database.

Cmd to create an annotated tag

It creates a LOCAL tag on the current branch,but when you push your latest commit to the remote repository, git doesn’t push tags user needs to push tags separately by command.

Lightweight Tags

Lightweight tags are simple tags which will be used locally mostly, to create lightweight tags just don’t provide any additional parameters like -m,-a. The lightweight tag is just a named pointer to the commit.

Cmd to create lightweight tags

Cmd to push tags

How to tag like professional?😎

Our v1 tag seemed like a good idea at first but we’ll see v2, v3, v4, etc. in the future. Meanwhile, some bugs will occur so we’ll get v4-fixed, or maybe v4.1. At some point, it will be difficult to stick to things.🤦‍♂️

Semantic versioning can solve that problem. This is one of the popular standards, using a few simple rules. Each version is formatted as MAJOR, MINOR, PATCH and each part will change according to the rules below.

1. MAJOR when breaking backward compatibility,
2. MINOR when adding a new feature which doesn’t break compatibility,
3. PATCH when fixing a bug without breaking compatibility

NOTE ⚠️

Tags cannot begin or end with /.

You cannot use the characters ^, *, or : inside tags

Branches in Git

When the user creates their first repo by default the main branch will be the Master branch.

Branches are like separate lines of development within the same Project.

For example, You are developing a new feature or an update for your application, But this shouldn’t collapse your main repo(Master). So, you can create another branch for that part of the new code test the code once you confirm it’ll not affect the main code you can Merge both Master and new branch.

How to view branches in Git 🤔

We can use the git branch parameter through this parameter we can check merged, unmerged, local branches by providing specific parameters.

The current branch has an * (asterisk ) before its name in the git output.

How to merge branches in Git 🤔

As I said above you can merge all your branches into the main/master branch.

Git Revert

We can’t erase commits in the remote repository if any other users need them. revert is used to make a fresh commit without an existing commit that we don’t want to use.

Git Reset

When we need to go back to the previous commit we can use git reset. This cmd is used to move(HEAD), the latest commit of our working tree. We can reset files too🤪.

.git reset –hard is used to delete, completely .hard resets working tree and index. uncommitted changes and staged files will be lost, if we use –hard.

Here n indicates the number of commits to reset.

Rebasing in Git

Rebasing is completely different from the merging.

Rebase rewrites the whole git workflow. “.git rebase” command adds all your specified branch commits to the top current branch (*) commit these new commits will get added to the current branch and this will be in sequential order similar to the previous branch. After rebasing, the new commit Ids will be changed.

Git cherry-pick

Cherry-pick allows move commits from one branch to another. Cherry-picking is to rearrange the order of commits in a sustainable manner. It creates new commit with different commit id after the current commit (HEAD).

If anything is not clear or you want to point out something, please reach me

Like this article? Follow @saravanan.vijayamuthu on Instagram

My Website → https://saravananvijayamuthu.herokuapp.com/

Weather app → https://gadot.vercel.app/

Github → https://github.com/SaravananVijayamuthu

Little Occult Affairs → https://www.amazon.in/dp/8194619920/ref=cm_sw_r_cp_apa_i_GEHnFbXWYB45D

COMPLETE GIT (VERSION CONTROL SYSTEM)🛡 was originally published in Frontend Weekly on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hope u all have been doing well n staying safe in this COVID pandemic. Here are the 4 CSS Combinators which will boost your CSS experience 🔥

What is Combinator ❓

💠 A combinator is something that explains the relationship between CSS selectors.

💠 A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

Why use CSS Combinator ❓

💠 Learning about combinators makes you better at writing CSS and helps you to avoid excess CSS code.

💠 Combinators can also help you pinpoint the section or part of HTML you want to style with high accuracy because they are based on the relationship between the selectors.

Types of Combinators available in CSS 🎆

There are four types of combinators in CSS:

🧿 General Sibling selector ( ~ )

🧿 Adajacent Sibling selector ( + )

🧿 Child selector ( > )

🧿 Descendant selector ( space )

💡 General Sibling selector ( ~ )

The General Sibling selector is used to select the element that follows the first selector element.

Syntax:

first-selector ~ target-selector { … }

💡 ADJACENT SIBLING SELECTOR

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

Syntax:

first-selector + adjacent-selector { }

💡 CHILD SELECTOR

The child selector selects all elements that are the children of a specified element.

Syntax:

elementl > element2 { … }

💡 DESCENDANT SELECTOR

The descendant selector matches all elements that are descendants of a specified element.

Syntax:

selector1 selector2 { … }

If anything is not clear or you want to point out something, please reach me

Like this article? Follow @saravanan.vijayamuthu on Instagram

My Website → https://saravananvijayamuthu.herokuapp.com/

Weather app → https://gadot.vercel.app/

Github → https://github.com/SaravananVijayamuthu

Little Occult Affairs → https://www.amazon.in/dp/8194619920/ref=cm_sw_r_cp_apa_i_GEHnFbXWYB45D

A COMPLETE GUIDE TO CSS COMBINATORS was originally published in Frontend Weekly on Medium, where people are continuing the conversation by highlighting and responding to this story.

🔅 Use { } instead of new Object( )

Similarly, always treat numbers, strings, or booleans as primitive values. Not as objects. Because →

I don’t use ‘var’. I use ‘let’ and ‘const’

◾ `var` is now the weakest signal available when you define a variable in JavaScript. The variable may or may not be reassigned, and the variable may or may not be used for an entire function.

◾ I use `let` when I need to reassign a variable( like the counter in a loop ). The variable will be used only in the block it’s defined in.

◾ `const` is a signal that the identifier won’t be reassigned. If I don’t need to reassign, `const` is my default choice over `let`. Since I want the usage to be as simple as possible in the Code.

🔅 Use Comments

◾ To increase readability.

◾ To debug errors.

◾ It’s really helpful once you hand over the project to new people.

🔅 Reduce global variables

◾ It significantly reduces the chance of bad interactions with other applications, widgets, or libraries.

Downsize apps into smaller segments and use “import” to load whenever required.

🔅 Use === instead of ==

◾ When use == your variable will be converted to match types, whereas === the operator forces a comparison of values and types.

🔅 Use strict

◾ You can’t use a variable without declaring it.

Use template strings over the concatenation of strings it feels much easier and readable

If anything is not clear or you want to point out something, please reach me

Like this article? Follow @saravanan.vijayamuthu on Instagram

My Website → https://saravananvijayamuthu.herokuapp.com/

Weather app → https://gadot.vercel.app/

Github → https://github.com/SaravananVijayamuthu

Little Occult Affairs → https://www.amazon.in/dp/8194619920/ref=cm_sw_r_cp_apa_i_GEHnFbXWYB45D

Effective approaches in JavaScript 👻 was originally published in Frontend Weekly on Medium, where people are continuing the conversation by highlighting and responding to this story.

‘THIS’ Keyword

This keyword in Javascript refers to the main object which it belongs to and it has different values where it is used:

1. Inside a method or object, this refers to the owner/current object.
2. Alone or inside a function it refers to the global object(window object in browsers).

Here this refers to the owner/current object welcome

Now let’s try the same example with arrow function and normal method

Here welcomeMethod() is a method inside the object so this refers to the current object, but for arrow function, this always points to the closest function scope. Since welcome is not a function so the this inside the arrowFunc() points to the global object(in browser window object).

Now let's try the same inside a function.

arrowFunc(): this points to the nearest function scope and so prints ‘Saravanan Vijayamuthu’.

normalFunc(): this points to the global object, which does not have the property ‘name’ and so prints undefined.

If anything is not clear or you want to point out something, please reach me

Like this article? Follow @saravanan.vijayamuthu on Instagram

My Website → https://saravananvijayamuthu.herokuapp.com/

Weather app → https://gadot.vercel.app/

Github → https://github.com/SaravananVijayamuthu

Little Occult Affairs → https://www.amazon.in/dp/8194619920/ref=cm_sw_r_cp_apa_i_GEHnFbXWYB45D

‘THIS’ IN JAVASCRIPT 💡 was originally published in Frontend Weekly on Medium, where people are continuing the conversation by highlighting and responding to this story.

💡Guide #1

— — -> Set the viewport

The viewport is the user’s visible area of a web page.

💡Guide #2

— — -> Use Media Queries

Media quires are a CSS feature that allows content on the webpage to adapt to different screen sizes and resolutions.

💡Guide #3

— — -> Design for mobile-first

When we build a website, we must start with the mobile design first.

If you use chrome Try this extension Responsive Web Design Tester

💡Guide #4

— — -> Use SVG for icons

SVG PROS

🎯 Faster loading times

🎯 Better rendering quality

🎯 Scalable without using image editors

🎯 SVG can be indexed by Google

🎯 Developers can edit using the code

🎯 Graphics can be animated

💡Guide #5

— — -> Use Relative Units

Don’t use fixed units like px, pt, cm, and so on. Use % instead

👎 Not Recommended

👍 Recommended

💡Guide #6

— — -> Understand the patterns

You also have to understand how “display” property works.

Know the difference

If anything is not clear or you want to point out something, please reach me

Like this article? Follow @saravanan.vijayamuthu on Instagram

My Website → https://saravananvijayamuthu.herokuapp.com/

Weather app → https://gadot.vercel.app/

Github → https://github.com/SaravananVijayamuthu

Little Occult Affairs → https://www.amazon.in/dp/8194619920/ref=cm_sw_r_cp_apa_i_GEHnFbXWYB45D

Responsive Web Design Guide was originally published in Frontend Weekly on Medium, where people are continuing the conversation by highlighting and responding to this story.

✍ Description

Webp is a modern image format developed by Google that provides superior lossless and lossy compression for images on the web. Webs’ lossless images are? 6% smaller in size compared to PNGs. WebP lossy images are 5–34% smalls than comparable JPEG images at equivalent SSIM quality index. Unfortunately, some devices and tools do not support WebP yet.

💫 Conversion

Google provides the cweb — CLI converter. It supports PNG, JPEG, TIFF, and raw Y’CbCr samples.

💥Installation💥:

Mac: (Brew): brew install webp

Ubuntu: apt-get install webp

Windows (chokolatey): choco install webp

💥Usage💥

cwebp [opt] pic.png -o pic.webp

cwebp [opt] pic.webp — — -pic.png

🌟 Browser Support

WebP is going to be supported by Safari (and other Apple products) soon. For now, there is a polyfill library that makes WebP files readable by all browsers: github.com/chase-moskal/webp-hero

🔥 Usage

Support of WebP format can be extended to all browsers by use of the polyfil tool WebP-Hero.

❄ Load the polyfils and the webp-hero:

❄ run polyfill function:

If anything is not clear or you want to point out something, please reach me

Like this article? Follow @saravanan.vijayamuthu on Instagram

My Website → https://saravananvijayamuthu.herokuapp.com/

Weather app → https://gadot.vercel.app/

Github → https://github.com/SaravananVijayamuthu

Little Occult Affairs → https://www.amazon.in/dp/8194619920/ref=cm_sw_r_cp_apa_i_GEHnFbXWYB45D

How to use Webp format (.webp) was originally published in Frontend Weekly on Medium, where people are continuing the conversation by highlighting and responding to this story.

✨ The Ternary Operator ✨

Longhand 👉

Shorthand 🤏

✨ Short-circuit ✨

Evaluation Shorthand

Longhand 👉

Shorthand 🤏

When assigning a variable value to another variable, you may want to ensure that the source variable is not null or empty. You can either write a long if-else statement with multiple conditionals, or use short-circuit evaluation.

✨ Declaring Variables Shorthand ✨

Longhand 👉

Shorthand 🤏

It’s a good practice to declare your variable assignments at the beginning of your functions. This shorthand method can save time and space when you are declaring multiple variables at the same time.

✨ If Presence Shorthand ✨

Longhand 👉

Shorthand 🤏

This might be meaningless, but worth a mention. When doing “if checks”, assignment operators can sometimes be omitted.

NOTE: THESE TWO EXAMPLES ARE NOT EXACTLY EQUAL, AS SHORTHAND CHECK WILL PASS AS LONG AS LIKE JS IS A TRUTHY VALUE.

✨ JavaScript for Loop Shorthand ✨

Longhand 👉

Shorthand 🤏

If you wanted to access the index, do:

✨ Short-circuit ✨

Evaluation

Longhand 👉

Shorthand 🤏

✨ Decimal Based Exponents ✨

Longhand 👉

Shorthand 🤏

✨ Object Property Shorthand ✨

Longhand 👉

Shorthand 🤏

Defining objects in JS makes work much easier. ES6 provides an even easier way of assigning properties to objects. If the variable name is the same as the object key, you can take advantage of shorthand notation.

If anything is not clear or you want to point out something, please reach me

Like this article? Follow @saravanan.vijayamuthu on Instagram

My Website → https://saravananvijayamuthu.herokuapp.com/

Weather app → https://gadot.vercel.app/

Github → https://github.com/SaravananVijayamuthu

Little Occult Affairs → https://www.amazon.in/dp/8194619920/ref=cm_sw_r_cp_apa_i_GEHnFbXWYB45D

Google is the Algorithm you need to win over for your website to expand.

But why does it hate you so much?

Websites are made up of things called TAGS. And every TAG has its own function.

< H1 > </H1> TAG is unique to headings.

< P> </P> TAG is unique to paragraphs.

< IMG> TAG is unique to images.

GOOGLE literally examines these TAGS and deduces the text or details displayed on the website.

Example TEXT in < H1></H1 > TAG is seen in the Google result as an iconic bold blue link.

When the amature front-end web developers (you mean those who write Javascript, CSS, and Javas-cript?) wrap any Javascript feature they can possibly have in enough < div > elements to make your eyes bleed. I may sound a little pessimistic about it, but frankly, some days it does seem that way.

Now, Google’s going to get lost and never figure out what the content is about

It’s the unnecessary use of div tags. Div tags are incredibly flexible features on a website that help to represent a particular item.

Yet a poor organization or an amature coder may only use div tags to complete the website. Disregard of every other usable name.

Don’t get me wrong DIV TAG is very useful & versatile TAG but don’t use it everywhere.

If anything is not clear or you want to point out something, please reach me

Like this article? Follow @saravanan.vijayamuthu on Instagram

My Website → https://saravananvijayamuthu.herokuapp.com/

Weather app → https://gadot.vercel.app/

Github → https://github.com/SaravananVijayamuthu

Little Occult Affairs → https://www.amazon.in/dp/8194619920/ref=cm_sw_r_cp_apa_i_GEHnFbXWYB45D

Why does GOOGLE hate your website? was originally published in Web Engineering on Medium, where people are continuing the conversation by highlighting and responding to this story.

HTML

<!doctype html>
<html>
<head>
<meta charset=”utf-8" />
<meta name=”author” content=”Web Engineering” />
<title>CSS Glitch Effect</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<div title=”Comment what You want to learn next “>
Comment what You want to learn next
</div>
</body>
</html>

Make sure both the title and the material within the div is the same. If both are different, they can override each other.

I’ve linked css as an external css, so you can have an internal css that depends on you.

You can use the div tag within the body tag where you need to add the glitch.

Since the key component is CSS, the CSS section is going to be long.

CSS

Body that covers the overall style of the HTML document.

body
{
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
margin: 0;
background: #131313;
color: #fff;
font-size: 96px;
font-family: sans-serif;
letter-spacing: -7px;
}

Now let’s see the div look

div
{
animation: glitch 1s linear infinite;
}
@keyframes glitch
{
2%,64%
{
transform: translate(2px,0) skew(0deg);
}
4%,60%
{
transform: translate(-2px,0) skew(0deg);
}
62%
{
transform: translate(0px,0px) skew(5deg);
}
}
div:before,div:after
{
content: attr(title);
position: absolute;
left: 0;
}
div:before
{
animation: glitchtop 1s linear infinite;
clip-path:polygon(0 0,100% 0,100% 33%,0 33%);
}
@keyframes glitchtop
{
2%,64%
{
transform: translate(2px,-2px);
}
4%,60%
{
transform: translate(-2px,2px);
}
62%
{
transform: translate(13px,-1px) skew(-13deg);
}
}
div:after
{
animation: glitchbottom 1.5s linear infinite;
clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%);
}
@keyframes glitchbottom
{
2%,64%
{
transform: translate(-2px,0);
}
4%,60%
{
transform: translate(-2px,0);
}
62%
{
transform: translate(-22px,5px) skew(21deg);
}
}

Since we use the animation property, it has to be defined with the keyframes.

Each @keyframe at-rule determines what will happen at different times during the animation. For example, 0 percent is the beginning of the animation and 100 percent is the end of the animation.

We split div as div: before and div: after. And div: before, for the top of the glitch-text, and after, for the bottom of the glitch-text.

The clip-path property in the CSS allows you to designate a particular section of the item to be shown, rather than the whole field.

Here I’m including an HTML and CSS FILE screenshot

If anything is not clear or you want to point out something, please reach me

Like this article? Follow @saravanan.vijayamuthu on Instagram

My Website → https://saravananvijayamuthu.herokuapp.com/

Weather app → https://gadot.vercel.app/

Github → https://github.com/SaravananVijayamuthu

Little Occult Affairs → https://www.amazon.in/dp/8194619920/ref=cm_sw_r_cp_apa_i_GEHnFbXWYB45D

CSS Glitch Effect was originally published in Web Engineering on Medium, where people are continuing the conversation by highlighting and responding to this story.