Forem: Shahid Bugti

CSS Battle target #9

Shahid Bugti — Sat, 20 Jan 2024 10:51:39 +0000

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<style>
  body{
  background: #222730;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0;
  }
  #a {
    background: #4CAAB3;
    width: 400px;
    height: 150px;
    position: absolute;

  }
  #b{
    position: absolute;
    border: 120px solid #222730;
   transform: rotate(45deg);
  }
  #c{
    position: absolute;
    border: 75px solid #4CAAB3;
    transform: rotate(45deg);
  }
  #d{
  position:absolute;
  border:25px solid #393E46;
  border-radius:50%
  }
</style>

link to the target
https://cssbattle.dev/play/9

List of most commonly used CSS selectors

Shahid Bugti — Mon, 15 Jan 2024 16:45:19 +0000

Block Scope and Shadowing In JavaScript

Shahid Bugti — Thu, 11 Jan 2024 14:51:46 +0000

To understand Block Scope first we must know that what a block Is.

What exactly a Block is?
A block is pair of curly braces “{ }”, it is also called compound statement.
Use of Block:
“Block is used to write multiple statements in a place where JavaScript expects a single statement.”

To understand this statement let look a an example

//The following code is perfectly correct.
if(true) console.log("true");

//But if We want to use multiple statements of code
if(true){
    console.log("This code will be executed because the condition is true.");
    // You can add more statements here
    let x = 5;
    let y = 10;
    console.log("The sum of x and y is:", x + y);
}

The curly braces or not in the syntax of _if statement _but we wanted to use multiple statements so we used a block.

Now lets see what** Block Scope** is?

Block Scope:
The block scope of a variable means that it is accessible in particular Block.

In this block of code we have three variables declared with var, let and const respectively, you can see the variables declared with let and const are in a seperate memory space named as Block, while the variable declared with** var is in global scope** , it cleares that variable declared with let and const are block scoped.

{
var a = 10;
let b = 15;
const c = 20;
}
console.log(b); //uncaught refrence error: b is not defined.

in given code we are trying to access a block scoped variable in global scope that is why JavaScript throws an error.

{ 
var a = 10;
let b = 15;
const c = 20;
}
console.log(a);//10

This code is perfectly fine because we are accessing a global scoped variable in global scope, even the “a” is declared in a block but it is still not block scoped.

*Shadowing: *
Variable shadowing happens when a variable is declared in an inner scope using the same name as a variable in an outer scope. This leads to the inner scope’s variable taking precedence, effectively replacing and overshadowing the outer scope’s variable.

var a = 20;//this is the puter scoped 
{
var a = 10;//this variable shadows the outer scoped one;
let b = 15;
const c = 20;
}

Technically both variables have same scope “Global Scope” but redeclaration is allowed in case of var, so the code is correct.

let  a = 20;
function(){
let a = 20;
}

In case of let redeclaration is not allowed but here the scopes of both variables are different.

Illegal Shadowing:
Shadowing the variables declared with let and const in same scope is illegal.

let a = 10;
let a = 5;

let a = 10;
if(true){
var a = 10;
}

Technically both the variables have same scope so it is not correct as I mentioned that in let declaration shadowing them in same scope is illegal.

Thanks for taking the time to explore this Article.
Originally Published on medium, Follow me on Medium
https://medium.com/@bugtimuhammadshahid1/block-scope-and-shadowing-in-javascript-998eb50ba0af

Lets Connect on LinkedIn
www.linkedin.com/in/muhammad-shahid-bugti-2a7b43276

Pseudo-Classes In CSS

Shahid Bugti — Tue, 02 Jan 2024 19:12:56 +0000

To understand Pseudo classes, you have to understand what are the state of an element?

CSS States:
When a user interacts with objects on a page by hovering, clicking or focusing. CSS empowers us to modify styles based on these interactions, offering users guidance on permissible and restricted actions.

A CSS pseudo-class is employed to specify the unique state of an element

/*In given Block of Code I am giving Style to the button directly*/
.Primary-btn{
color: red;
}

What if I don't want to change the style of button directly, and I want to change the style of button for a certain state, here the role of Pseudo Classes comes into play.

/*In this Block we are changing the styles for a certain state*/
.Primary-btn:Psuedo Class{
color: red;
}

Classification of Pseudo Classes:
Pseudo classes can be classified in 6 major types.

- Structural Pseudo-classes
  - :first-child
  - :last-child
  - :nth-child(n)
  - :nth-last-child(n)
  - :only-child

- Link Pseudo-classes
  - :link
  - :visited
  - :hover
  - :active

- User Action Pseudo-classes
  - :focus
  - :target
  - :enabled
  - :disabled
  - :checked

- UI Element State Pseudo-classes
  - :checked
  - :default
  - :valid
  - :invalid

- Tree-Structural Pseudo-classes
  - :root
  - :empty
  - :not(selector)

- Content Pseudo-classes
  - :first-of-type
  - :last-of-type
  - :nth-of-type(n)
  - :nth-last-of-type(n)
  - :only-of-type

a)-Structural pseudo-classes:
These pseudo classes are used to select and style elements based on their positions in document, and they enable you to select elements based on specific structural conditions, including being the initial child, final child, or a specific child within their parent.

div p:first-child {
  /* Styles for the first paragraph within its parent */
};

div p:last-child {
  /* Styles for the last paragraph within its parent*/
}

div p:nth-child(even) {
  /* Styles for even-numbered paragraphs within a div */
}

div p:only-child {
  /* Styles for paragraphs that are the only child within a div */
}

b)-Link Pseudo Classes:
These pseudo-classes are used to style the links based on there states of interaction.

a:link {
  /* Styles for unvisited links */
}

a:visited {
  /* Styles for visited links */
}

a:hover {
/* Styles for links when hovered */
}

a:active {
/* Styles for links when active (being clicked) */
}

c)- User Action Pseudo-classes:
User action pseudo-classes are used in CSS to style elements based on user interaction with those elements.

input:focus {
 /* Styles for a single input element when it is in focus */
}

#section1:target {
/* Styles for the element with ID "section1" when it is the target */
}

input:enabled {
 /* Styles for a single button element when it is enabled */
}

input:disabled {
  /* Styles for a single input element when it is disabled */
}

input[type="checkbox"]:checked {
 /* Styles for a single checkbox input element when it is checked */
}

d)-UI Element State Pseudo-classes:
UI Element State Pseudo-classes in CSS allow you to style elements based on their state or user interaction.

input[type="checkbox"]:checked {
 /* Styles for checked checkboxes */
}

input[type="submit"]:default {
/* Styles for the default submit button */
}

input:valid {
  /* Styles for valid input */
}

input:invalid {  
/* Styles for invalid input */
}

e)-Tree structural pseudo-classes:
Tree-Structural Pseudo-classes in CSS allow you to select and style elements based on their relationship within the document tree.

:root {
  /* Styles for the root element */
}

p:empty {
  /* Styles for empty paragraphs */
}

p:not(.special) {
 /* Styles for paragraphs that are not marked as special */
}

f)- Content pseudo-classes:
The Content Pseudo-classes in CSS allow you to select and style elements based on the content they contain.

p:first-of-type {
  /* Styles for the first paragraph within its parent */
}

p:last-of-type {
 /* Styles for the last paragraph within its parent */
}

p:nth-of-type(odd) {
  /* Styles for odd-numbered paragraphs within their parent */
}

p:nth-last-of-type(2) {
  /* Styles for the second-to-last paragraph within its parent */
}

p:only-of-type {
 /* Styles for a paragraph that is the only one within its parent */
}

Thanks For taking the time to explore this Article.

Originally Published on medium, Follow me on Medium
https://medium.com/@bugtimuhammadshahid1/pseudo-classes-in-css-f2f2409a2990

Lets Connect on LinkedIn
www.linkedin.com/in/muhammad-shahid-bugti-2a7b43276

LET, CONST and TEMPORAL DEAD ZONE (TDZ);

Shahid Bugti — Sat, 23 Dec 2023 17:24:41 +0000

In JavaScript hoisting of variables declared with “var” is Popular and well known among JavaScript developers.

ES6 Came with two new keywords for variable declaration those are “let” and “const”, unlike “var” declaration the variables declared with “let” *and *“const” are not accessible before declaration,

console.log(name);
var name = "Shahid"; //undefined


console.log(name);
let name = "Shahid"; //Uncaught ReferenceError

Due to this many of developers were lead to the concept that “let” and “const” declaration are not hoisted.

IS THIS CONCEPT TRUE ?
To Understand the answer first you have to understand what Hoisting is?

HOISTING:
The allocation of memory to variable before exicuting a single line of code is called hoisting.

As you can se the variables declared with “var” and “ let” both are allocated memory and one which is declared with ** “var”** is stored in Global space while the one declared with “let” is stored in a seprate space.

Now You have got the answer that the concept (** “let”** and “const” declaration are not hoisted.”) is Incorrect.

TEMPORAL DEAD ZONE (TDZ):
If “let” and *“const” * declaration are hoisted than why they are not accessible before their declaration? the answer of this depends on concept of TDZ.

“ Time period between Hoisting of a variable and Initializing it with value is Known as Temporal Dead Zone , TDZ”.

console.log(name);
//Temporal dead zone
//Temporal dead zone
//Temporal dead zone
//Temporal dead zone
//Temporal dead zone
//Temporal dead zone
//Temporal dead zone
//Temporal dead zone
let name = "Shahid";

Thanks For taking the time to explore this Article

originally published on medium
https://medium.com/@bugtimuhammadshahid1/let-const-and-temporal-dead-zone-tdz-f33225aee853

Lets Connect on LinkedIn