DEV Community: suraj more

Intro to SASS

suraj more — Sat, 14 May 2022 03:40:34 +0000

What is Sass?

As there website says, "Sass is the most mature, stable, and powerful professional grade CSS extension language in the world".
It is completely compatible with all versions of CSS.
With Sass you can write code logically and organized which increases reusability of code.
Uses .scss file extension.

Variables:

It creates variables which directly convert to actual values. it does not create root in css file.
We can create variable just like javascript, use dollarsign to create variables.
It easy to maintain colors value, can easily change value at only one place. -examples: .sass

    $primaryColorBtn: green;

    .card {
        color: $primaryColorBtn;
    }

.css

 .card {
    color: green
 }

Maps:

just like js has Maps scss provides same functionality.
syntax is map-get("map's name", "key's name")
throught key's name it look through map to get value.

$font-sizes: (
    "regular": 0.875rem,
    "medium": 1rem,
    "large": 1.2rem
)

.card {
    font-size: map-get($font-sizes, large);
}

in this snippet, first finds "large" key in font-sizes map and get value from it.

Nest Keyword:

in css, to assign css properties to child classes we use these kind of syntax ".parent .children {}"
in sass we can use nesting to achive this thing with out repeating parent isentifiers.

.form-horizontal {
    display: flex;
    .btn {
        color: $primaryBtnColor;
    }
}

which result in to ".form-horizontal .btn {color: green }"

This will assign primary btn color only to "form-horizontal" parent's child.
Still be careful of using to-much nesting in your project.
It better to create resuable classes than using nesting.

Partial Files:

In sass, you can create partial sass files which contains small css code blocks to make code modular.
It can be created using _(underscore) as prefix.
compiler does not create those partial files as separate file.
In which target file these partial files are being import,
It creates all partial file's code to target file's css after compilation

@include and mix-ins:

sass allows to create function as mixin to increase reusablity.
Allows to create mixin with parameter to make more dynamic.

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
}

.warning {
  @include important-text;
  color: yellow;
}

include is used to access the mixin in different class.
mixin with parameter:

@mixin important-text($color) {
  color: $color;
  font-size: 25px;
  font-weight: bold;
}

.warning {
  @include important-text(yellow);
}

@extends:

extend keyword is used to extend on class's property to another classes.

.text-basic  {
  border: none;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.text-warning {
  @extend .text-basic;
  color: yellow;
}

.text-error {
  @extend .text-basic;
  color: red;
}

.text-success {
  @extend .text-basic;
  color: green;
}

Math calculations:

With sass, can do math calculation without using "calc" keyword.
It support "+", "-", "*", "/" operations.
Allowed to do Math operations with same units only. like,

80% - 20% valid
100vh - 78vh valid
30% + 10vh not-valid

import:

in css for importing file use "import("./abc.css").
in sass, use "@import './abc'".

Hoisting and Temporal Dead Zone (TDZ)

suraj more — Fri, 13 May 2022 15:11:38 +0000

What is Hoisting???

In JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

Let's try to learn this terminology with example

debugger;
console.log(a);
abc();

var a = "Hello";

function abc () {
  console.log("Print Hello");
}

Result:

as per above image "dubugger;" is set on first line to see how thinks works.we are still on first line, but variable and function have gotten memmory allocation.
because, before executing first line interpretor goes through code and do memmory allocation for all functions and variables.

This is one of stage of creating execution context. Generally, There are two stages:

Assigns memory to every variable, class or functions
Starts executing code line by line.

This first stage is called hoisting. Now using this concept we will understand another important topic which is Temporal Dead Zone. so,

What is Temporal Dead Zone???

as per MDN defination,
A temporal dead zone (TDZ) is the area of a block where a variable is inaccessible until the moment the computer completely initializes it with a value.

as per defination we get variable type should be block scoped like "let" or "const" ( not var because it is functioned scope,we will see at the end.)
so let's understand by example:

{
    console.log(data);
    let data = "hello";
}

Result:

"Uncaught ReferenceError: Cannot access 'data' before initialization"

it gives reference error for data, because as we seen in hoisting, it trys to create execution scope and assigns memory for every variable, class or function.but, let is not global scoped, so it is not accessible.

Now, change sequence of code:

{
    let data = "hello";
        console.log(data);
}

so, error is gone and it prints "hello".

for const, it works same way but const varible needs to initialize with some value as per its rule.

Now let's see for var, var is special keyword compare to earlier two. because it is global scoped, we can access it before declaration as it is added to global scope compare to let which is added to block scope.

Hooks in React

suraj more — Sat, 04 Sep 2021 09:31:25 +0000

Hooks are a new feature introduced in React 16.8 and available in later versions. We can use state and other features of react by using hooks. React has two ways of creating component, one is using class and other is using function.

using class to generate component needs to add react boiler-plate code because of that using function for generating component is introduced. to use state like features of react in later way hooks are useful.

There are certain hooks that react provide us. useState, useEffect, useRef and useReducer. but we can create custom hooks as per our requirements.

useState:

as name suggests it used to handle state of component. It helps to manage state between component re-renders.

lets look at example below,
we have one button "Click Me", on clicking that button text should be changed to "title changed"

export default function App() {
  let title = "Initial header";
  const handleClick = () => {
    title = "title changed";
    console.log(title);
  }
  return (
    <div className="App">
      <h1>{title}</h1>
      <button onClick={handleClick}>Click Me</button>

    </div>
  );
}

as we can see, when button is clicked the title value is changed in console, but on browser it shows old value, to update value component needs to re-render and between that rendering process we also need to maintain updated state. This thing can be achieved using useState

import { useState } from "react";

export default function App() {
  const [title, setTitle] = useState("Initial header");
  const handleClick = () => {
    setTitle("title changed");
  };
  return (
    <div className="App">
      <h1>{title}</h1>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

useEffect:

useEffect hook is used to handle activities when component renders . There is some syntax variation is used to customize useEffect.

//executes at component's initial render
  useEffect(()=> {

  }, []);

//executes at component's state title is changed.
  useEffect(()=> {

  }, title);

//executes at component's renders
  useEffect(()=> {

  });

Flex Box in CSS

suraj more — Tue, 31 Aug 2021 16:26:37 +0000

Flex box is used in CSS for layout of items in the html page in responsive manner. We have other layout properties like inline, block and inline-block, through which can be achieved responsiveness, centering items or assigning same available width or height to items using margins, paddings or float, writing css for different screen size which becomes very complicated when page has more items in it. In this case it is better to use flex-model layout.

As we know flex-box is layout related CSS property which contains certain properties which help us to
use flex-box more effectively. They are

flex-direction:
flex-direction is used for showing items in container horizontally or vertically aligned.for that we use below css code:

.container {
  display: flex;
  flex-direction: row;
}

.container {
  display: flex;
  flex-direction: column;
}

use column-reverse or row-reverse as flow-direction it works same as column and row respectively but orders are reversed.

flex-wrap:

flex-wrap property use for whether items of container will use free space of container.for that
flex-wrap has two properies wrap and no-wrap.
no-wrap tries to align item in one line where as no-wrap if width is greater than screen size it will add that item to next line.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

flex-flow:

flex-flow is property to set flex-direction and flex-wrap in same property like

.container {
  display: flex;
  flex-flow: column no-wrap | column wrap;
}

.container {
  display: flex;
  flex-flow: row no-wrap | row wrap;
}

justify-content:

Justify-content property is used to set alignment of items in box on same-axis

.container {
  display: flex;
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

center:

flex-start:

flex-end:

space-around:

space-evenly:

align-items:
this property aligns item on other axis of flex-box container. If flex-direction is set column then this property is used to align items on x axis and vice-versa.

.container {
  display: flex;
  justify-content: flex-start | flex-end | center;
}

center:

flex-start:

flex-end:

This is basic level of flex-box understanding. There are other properties of flex-box like flex-grow, flex-shrink, align-self on that you can read about it. Thanks for reading this blog.
Thanks for reading the blog.