DEV Community: Harshit paliwal

css selector you must know

Harshit paliwal — Wed, 01 Jun 2022 07:22:23 +0000

if you are a beginner or just starting with CSS these are some important selectors you must know.

What are CSS selectors?

selectors are used to target HTML element on the web page so that we can style those elements.
I am asuming that you already know basic selectors like id and class.

// class
<div class="Box"></div>
.Box{
 color:'black'
}

// id
<div id="Box"></div>
#box{
color:'green'
}

Let's see some more use full selectors

* ( Universal selector )

*{
margin:0;
padding:0;
}

this is called Universal selector it is used to select every single element of the page.

.box *{
margin:0;
padding:0;
}

we can use a universal selector like this also here we are selecting every single child element of .box class.

div p ( descendent selector )

The next selector is called the descendent selector what descendent selector for example if you want to select every paragraph element inside a div you can use a descendent selector

div p{
font-size:2rem;
}

but don't use like this x y z p .box 😂

div + p

It will select only the element that is immediately preceded by the former element. it will select the first paragraph after each div element

div + p{
color:'red';
}

div > p

the only diffrance between div p and div > p is its only select one direct child of div element

div > p{
color:'red';
}

div ~ p

the sibling combinator is same as div + p but the only difference is div ~ p select every element and div + p only select one direct element

div ~ p{
color:'red';
}

Pseudo classes

X:checked

input[type=radio]:checked {
border: 1px solid black;
}

This pseudo-class will only target a user interface element that has been checked.

p:after p:before

this :after and :before classes are great They simply generate content around the selected element. and we can insert content with css also 🔥

pseudo-element

p::first-line

it is pretty useful first-line pseudo-element it select an element and then applies styling to the only first line of the element.

p::first-line{
color:'red'
}

nth-child

div:nth-child(n)

div:nth-child(2){
border: 2px solid black;
}

one of my favourite selector. nth-child(n) can select any child of div or any parent element nth-child(n) take parameter as an integer like if you want to select 1st child element of div you can do div:nth-child(1).

:first-child / :last-child

IF you want to select the first or last child you can simply use div:first-child this will select the first child and div:last-child this will select last child

conclusion

CSS selectors are cool and use full features if you are not using them in your code I encourage you to give them a try.

resource

css tricks
mdn

Destructuring assignment in javascript 🥶

Harshit paliwal — Wed, 01 Jun 2022 04:48:05 +0000

Super cool and Super helpful feature from ES6, even though it is a big topic 😂 I will try to make it short and easy

lets get started

Destructuring assignment

What is destructuring.

destructuring is used to break down complex structures into pieces. It's like unpacking a bag.

lets destucture with our first example

const obj ={
  name:'bla bla',
  car:'supra'
}

// Destructuring assignment
const { name } = obj   // bla bla

though we can access the value like this alsoconsole.log(obj.name) so what exactly is the point? the point is now we created a separate variable instead of array members. now we can directly access name wherever and whenever we want 🔥
some more powerful things we can do with destructuring.

let [name,lastname] = 'harshit paliwal'.split(' ')

console.log(name) //harshit
console.log(lastname) //paliwal

destructuring assignment works by copying an item into a variable. It doesn't modify the array its just a shorter way to write. same as

const arr = 'harshit paliwal'.split(' ')

console.log(arr[0]) //harshit
console.log(arr[1]) //paliwal

the variable we created is just a copy of obj/array if we change the value of the variable it doesn't affect the original object or array. we can reassign value whenever we want. 🔥

const obj = {
name:'harshit'
}
let {name} = obj;
name = 'jone'
console.log(name) // jone

There is a lot more than that we can do nested destructuring also

const obj = {
  superHero: {
    name: "iron man",
    power: {
      powerOne: 'rich',
      powerTwo: 'super genius'
    }
  }
}

const {superHero:{name, power:{powerOne, powerTwo}}} = obj

console.log(name) //iron man
console.log(powerOne) //rich
console.log(powerTwo) //super genius

Conclusion

Destructuring is a powerful feature that can be used to make your code more readable and concise.
if you are not using it in your code I encourage you to give it a try. Happy coding

Resource

javascript MDN

javascript.info

this keyword in javascript

Harshit paliwal — Sat, 07 May 2022 11:06:14 +0000

Introduction :-

One of the most confusing topics in javascript
so to access the object, a method can use this keyword.
unlike other programming language javascript, this keyword behaves differently, It can be used in any function, even if it’s not a method of an object.

this keyword

use of this keyword

const user = {
  name: 'hero',
  age: 21,
  data() {
    console.log('user name', this.name)
    console.log("user age", this.age)
  }
}
user.data()
// user name hero
// user age 21

looks easy right

In javascript, the value of this does not refer to the function which is used or its scope
it refers to value by the invocation context of function and where it is called.

Binding is important to understand 'this' keyword

Default Binding:
Implicite binding
Explicit binding
New operator method

Default binding

const myFunction = function() {
   console.log(this);
}

myFunction();    // Window

as we call function() in the window context it will refer to the window object

var myFunction = function() {
   console.log(this.a);
}
var a = 200
myFunction();    // 200

above function, this refers to the global context and return 200 its only work if we use var because it hosts in global context.

Implicite binding

function foo(){
    console.log(this.a);
}

var obj = {
    a:2,
    foo:foo
};

obj.foo();  // 2

as you see obj.foo() will refer to object obj and return 2

function foo(){
    console.log(this.a);
}

var obj = {
    a:2,
    foo:foo
};

var fun = obj.foo; 
fun() //undefined

if we assign obj.foo to var then it will refer to the function itself

Explicit binding

if we want to call a function using any particular object there we use explicit binding.

we can use call, bind, and apply

const obj = {
 name:'hero',
  age:21
}

function foo (){
console.log('user name', this.name)
    console.log("user age", this.age)
}

foo.call(obj)
// user name hero
// user age 21

call use to so explicitly say to a function what object it should use for this

apply method works same as call the only difference between call and apply is in apply function arguments passed as an array.
function.call(obj, arg1, arg2)
function.apply(obj, [arg1], [arg2])

bind use create a new function that will act as an original function but with this predefined

function foo(){
    console.log(this.a);
}

var obj = {
    a:2,
    foo:foo
};

var fun = foo.bind(obj); 
fun() //2

New operator method

The new operator lets us create an instance of a user-defined object type or one of the built-in object types that have a constructor function.

const newObj = new Car('toyota','nissan','honda')

Creates a blank, plain JavaScript object.
A new empty object is created and refer by this keyword.
Properties and methods are added to the object referenced by this.

function Car(carOne, carTwo, carThree) {
  this.carOne = carOne;
  this.carTwo = carTwo;
  this.carThree = carThree;
}

const newObj = new Car('toyota','nissan','honda')

console.log(newObj.carTwo);  //nissan

new operator has the highest priority than explicit binding and implicit binding. The lowest priority has default binding.

Arrow function for 🥶this

const arrowFun = ()=> console.log('this will not bind')

yes 😂
because the arrow function does not have there own binding. arrow function can't use this argument methods

const obj = {
  name: 'harshit'
}
const fun = () => {
  console.log(this.name)
}

fun.call(obj) // <empty string>

arrow function don't have access to new.target
Arrow functions aren't suitable for call, apply and bind methods, which generally rely on establishing a scope.

thank you for reading

As a dev why you should use the command line

Harshit paliwal — Thu, 30 Sep 2021 10:54:33 +0000

why you should use CLI over GUI

You should use the commans line because if you use it in public or with your nontech friends you look cool 😂!!
CLI(command line interface) is faster than GUI(graphical user interface).
like if you want to move your CPP or py file and in this folder here in many more different files, in GUI you will do like ctrl + click select to those files and cut/move you do it like this right what if you want to select 100 CPP file in the folder of 1000 🥲 it is going to be a real drag.

If you are using CLI the command line you can move files by just typing one line

$ mv Desktop/* .cpp Downloads/

this is just a simple example with the command line we can do a lot of powerful stuff.

## How to get started
I want to help you to start with CLI here are some basic commands I use every time

Basic Commands

Use to see the path of the current working directory

$ pwd

To go inside the directory

$ cd project-name

To view the content of the directory

$ ls

For Copy the directory

$ cp File-name

To create new directory

$ mkdir main-project

To delete a directory

$ rmdir

To create new blank file

$ touch index.html

These are some main and basic commands.
start your Command-line journey.
I am glad if you find this post useful even a little bit🥳

How I Increase my Productivity

Harshit paliwal — Thu, 30 Sep 2021 09:32:05 +0000

You are here means you want you can improve your productivity too I can help you but first thing first.

Here are some quick tips.

let us talk about productivity first.
In simple words, productivity is a way to measure efficiency. you might know that already.

now to improve productivity.
I don’t want to lecture you about do this that but since I followed these things in my life I feel like how shorted life is the thing only we need is to go with the flow.

Prepare your morning

Yes, prepare your morning it doesn't mean wake up early at 4 am do work out take bath, and get back to work at 5:30 am 😂if you follow this routine then awesome it is cool you are a superhuman.

But for a normal human like me I have an advice for you I know we sleep late at night because of study learning coding and some personal stuff it is okay 👊🏻wake up early < complete sleep so chill out no need to wake up at 4 or 5
just need to make a fixed time if you like 6 it is okay if you like 7 it is okay, just make a routine.
Discipline is the only thing that can make you a real person tho,

wake up in morning time as you like but fix the time you can wake up at that time totally after you decide
do workout take a bath and done,
your 1st hr of the day is only for yourself not for your boss/teacher/parents.
Here is complete step one.

Prepare your surroundings

Hey!! 😂 surroundings I don't mean you wake up your sibling's parents early in the morning,
What I mean is fix the thing you messed up it can be your bed your room check your desktop there might be useless folders everywhere 😂 ya I m serious fix everything that looks messed up the reason behind this is the atmosphere of your workstation room everything you see it can reflect in your mind too you don’t want to mess up your mind right then fix it now and see the change how you feeling after that.

Go with flow

Go with flow my friend don’t try every new thing you heard in a single day it might work or might not but after trying different things can decrease your will. no need to push your self no need to stop either be on the skateboard you can control and keep moving.

The last thing is discipline is the only thing that can make you a real person I don’t want to sound like some old principle but it is the true start to be in discipline it can help you in many other ways.

I am glad if this post helps you even a little bit.🥳