DEV Community: Robin Hooda

Master CSS Selectors

Robin Hooda — Fri, 25 Dec 2020 08:51:21 +0000

What are CSS selectors?

In CSS, selectors are patterns used to select the HTML element(s) on our web pages we want to style.
In layman terms, selectors are used to grab a DOM element to apply styles to it

What are different types of CSS selectors?

.class

Selects all elements with given class name
Write a period (.) character, followed by the name of the class
It will select all p with class="myClass"

child .class

We can target child element using a class hierarchy
We have to write parent class name followed by a space, and then followed by the child's class name
Below example will add background-color: yellow to the paragraph

#id

Style the element with given id attribute
In below example intro is the id of the paragraph
We select the elements by adding # followed by the id attribute of the element

element tag

We can directly select an element by its tag name and apply the styles
In this case we don't have to mention id or the class - simply write the element name in our styles and add properties to it
Below example will grab all the p elements and apply the style to it

Mixture of #id, .class and element tag

Below example will grab all the h1 elements which have class named heading and id's as greeting and intro respectively.

And it's output will look like this-

adjacent selector

Selects only the element which is preceded by the former element
In this case, only the first paragraph after each h1 will have gray text

attributes selector

Will only select the anchor tags that have a title attribute

Will style all anchor tags which link to http://www.google.com

Star designates that the proceeding value must appear somewhere in the attribute's value
This covers any links which consists of 'com' in them such as, google.com, gmail.com, wikipedia.com

Attribute "contains" value
Needs to be whole word

Attribute "contains" value
Does not have to be whole word

Attribute "starts with" value
The value has to be a whole word
- Either whole word
- Or word followed by -

Attribute "starts with" value
The value DOEST NOT have to be a whole word

Attribute "ends with" value
The value DOEST NOT have to be a whole word

If still have any doubts, do drop me a message on my linkedin or twitter

Don't forget to follow me on -

Clean Code Philosophy

Robin Hooda — Sun, 20 Dec 2020 18:09:23 +0000

A guide to know all about clean code and its importance

Guide to Git commands

Robin Hooda — Sun, 20 Dec 2020 18:08:40 +0000

A blog on guide to git and its important commands that are used daily in the developer's life

Here is a list of 15 Git commands that you may not know yet, but hopefully they will help you out on a journey to master this tool.

Modify The Most Recent Commit

git commit --amend
—-amend allows to append staged changes (e.g. to add a forgotten file) to the previous commit. Adding —-no-edit on top of that will amend the last commit without changing its commit message. If there are no changes, -—amend will allow you to reword the last commit message.

For more: git help commit

Interactively Add Selected Parts of Files git add -p -p (or —patch) allows to interactively select parts of each tracked file to commit. This way each commit contains only related changes.

For more: git help add

Interactively Stash Selected Parts of Files git stash -p Similar to git-add , you can use --patch option to interactively select parts of each tracked file to stash.

For more: git help stash

Stash with untracked
git stash -u
By default, when stashing, the untracked files are not included. In order to change that bevahiour and include those files as well you need to use -u parameter. There is also -a (—all) which stashes both untracked and ignored files altogether, which is probably something you usually won’t need.
Interactively Revert Selected Parts of Files
git checkout -p
--patch can be also used to selectively discard parts of each tracked file. I aliased this command as git discard

For more: git help checkout

Switch to Previous Branch
git checkout -
This command allows you to quickly switch to the previously checked out branch. On a general note - is an alias for the previous branch. It can be used with other commands as well. I aliased checkout to co so, it becomes just git co -
Revert All Local Changes
git checkout .
If you are sure that all of your local changes can be discarded, you can use . to do it at once. It is, however, a good practice to always use checkout --patch.
Show changes
git diff --staged
This command shows all staged changes (those added to the index) in contrast to just git diff which only shows changes in the working directory (without those in the index).

For more: git help diff

Rename Branches Locally
git branch -m old-name new-name
If you want to rename the currently checked out branch, you can shorten this command to the following form:
git branch -m new-name
For more: git help branch
Rename Branches Remotely
In order to rename a branch remotely, once you renamed your branch locally, you need to first remove that branch remotely and then push the renamed branch again.
git push origin :old-name
git push origin new-name
Open All Files with Conflicts at Once
Rebasing may lead to conflicts, the following command will open all files which need your help to resolve these conflicts.
git diff --name-only --diff-filter=U | uniq | xargs $EDITOR
What changed?
git whatchanged —-since=‘2 weeks ago’
This command will show a log with changes introduced by each commit from the last two weeks.
Remove file from last commit
Let's say you committed a file by mistake. You can quickly remove that file from the last commit by combining rm and commit --amend commands:
git rm —-cached
git commit —-amend
Find Branches
git branch --contains
This command will show all branches that contain a particular commit.
Optimize the repository locally
git gc --prune=now --aggressive
For more: git help gc