DEV Community: Nazmus Sakib

It's all about the Javascript concept

Nazmus Sakib — Tue, 15 Nov 2022 08:44:21 +0000

High abstraction language

Javascript is a high-abstraction language. It does not need to manually manage the resource and the memory allocation, like in C, we have to manually do the resource management and memory allocation. But in javascript, we do need to do that. It does this by itself.

It also manages the Garbage collection by itself. Garbage collection uses a mark & sweep algorithm for it. It searches memory if any variable has been allocated but no pointer, it just marks it and sweeps it out from the memory.

Edge Case

Global Variable: Garbage collection won't remove this variable because it will call in every time in the global call, it just confused whether is it important or not.
Event listener: Especially in SPA, it won't remove the unused variable.
Set timer: Like before set timer context is not removed by garbage collection.

JIT

We all assume javascript is an interpreted language, but javascript is not a purely interpreted language. It's JIT(just in time) interpreted language.

JIT means that it is a mixture of compiled and interpreted language.

The interpreter tries to read the code and try to execute them one by one. First, it executes fast later on it became slow, on the other hand, the compiler takes time to compile for the first time later on it became faster.

So in this scenario, JIT comes into the place. it uses both an interpreter and a compiler simultaneously.
The interpreter executes code line by line and the compiler prefix looks for code that can be optimized, it sends the code to the compiler if the code is optimizable. After optimizing this, the code executes faster.

Paradigm

A paradigm is a mindset of code structure that determines your coding style.

There are different types of paradigms. Like

Procedural programming

Object-oriented programming (OOP)
Functional programming (FP)

Javascript support all of the paradigm. So we call javascript a multi-paradigm language.

Prototyped-Based

A prototype is a blueprint or design of a structure. If you think about the Array.prototype then we can see an Array has some methods like pop, Push, Index of, etc. If you try to build a new array, we can inherit the method from Array.prototype then. We use it in our arrays. So this is the design we follow from the prototype.

So, we can say that javascript is a prototyped-based language.

First-class citizens

In javascript, functions are first-class citizens.

It means that you can throw functions anywhere you want. You can treat the function as a variable. You can pass a function as a parameter of a function you can return functions from inside of another function. The feature keeps you a lot of flexibility while you using the function.

Like higher-order function, and the callback function.

Dynamically Typed

You don’t need to specify the type of the variable on the declaration time, it will know its type in the runtime

Single-threaded

Javascript is a single-threaded language. And single threaded means the execution of instruction happens in a single sequence.

Javascript Engine

In modern web browsers, there is a javascript engine. In Chrome, we call it the V8 engine. If any javascript code enters into the V8 engine then it parses the code, parses means the engine reads the code, and then it goes to the AST(abstract syntax tree). Then the engine starts to interpret the code line by line and the profiler starts to find the code which can be optimized. Then the execution part.
In Execution, there are call stack and memory heap.

Runtime

Javascript engine and runtime are different topics, they are not the same. If we use Google Chrome then the environment of Google Chrome is runtime. And the mechanism of Google Chrome is a javascript engine is a V8 engine. If we work on the local environment then Nodejs is the runtime.
Runtime has web API options like DOM, Fetch API, and Timer.

Synchronous / Asynchronous

Javascript is a core synchronous language. When javascript gets an execution request in the call stack then web API take it to the callback queue and the callback queue responds against the request. then event loops take back the successful response to the call stack to execute.
That's how javascript works in an asynchronous way.

Simple Way to Learn SASS

Nazmus Sakib — Mon, 13 Jun 2022 16:58:01 +0000

What is SASS

SASS = Syntactically Awesome Style Sheet
It is an extension of CSS. It was designed by Hampton Catin and developed by Natalie Weizenbaun in 2006.
To make the CSS more maintainable & scalable, in a short SASS give us freedom and extra feature that does not have normal CSS.

Why SASS

It has some extra features special features that helps us to style that does not exist in CSS, like

We can use variables
We can use nested rules
We can imports others CSS file and mixin also
We can inherit other CSS rules
We can make our code more maintainable in simple way
NO DRY(Do not Repeat Yourself), we easily maintain DRY.
SASS is free
It supports all CSS versions
It supports standard CSS Comment (/* Comment */) and inline comment (//comment)

How SASS Works

Our browser does not supports SASS Directly. It supports CSS only. To make it support by browser we create a demo.scss(SASS file) to convert it to demo.css file by the preprocessor transpiler(source-to-source translator).
So that our browser can easily show demo.css file.

Add SASS

Add Live Sass Compiler Extension to VS Code. It will compile the SASS file to CSS.

Then Add a folder to our project named Compiler. Under the the folder add two file name style.scss(we will write our sass file into this file) and style.css(compiler will add CSS into this after compile).
We will add stylesheet CSS file from the compiler folder. Then click Watch Sass to activate compiler.

Variables

Like JavaScript, we can declare variables in SASS and use them in where necessary. In SASS we declare variable using $ sign, then we put variable values.
Using SASS variables we can declare

strings
numbers
colors
Booleans
lists
nulls

Main benefits of variables is that when we use same CSS rules in multiple elements, if we want to change the value we don’t have to change one by one. We can simply change the variables value.

Nesting

SASS nesting means, we easily use CSS rules in a nesting way of our element according to their DOM tree.

Import & partial

If we want to import other SASS fill into another SASS file we can do that by using import keywords.
If we want import demo.scss file and its SASS rules into our style.scss file then we will use import keywords.
If we put under score before (_demo.scss) demo file then SASS transpiler will not convert this SASS file into CSS file, it will consider as a SASS file which rule will be imported.
The main reason for this import to make the file more maintainable.

Mixin & Include

The declaration of CSS group that can be used throughout the style sheet.
We can declare a CSS group by mixin and we can access it by include.
We can also pass variable to mixin to change its value on our demand at include.
Mixin without the variables declaration

Mixin with variables declaration

Extend

We can share rule of any CSS selector to other CSS selector by using extend.

Let’s say we create default some rule for a button of a site. We can share the rules and also add additional rules for other button selector. extend inherit the default rules to the selected selector.

If, else if, else

We use condition in sass as like as JavaScript condition. We can pass value if the condition full filled the demand.
We use if, else if, else in the middle of mixin, we pass parameter in mixin , we get the value of mixin using include with the conditional parameter.

For

For keywords in SASS is also works as similar way of JavaScript loops. It has initial value and a closing value. It checks every value and apply rules on it.

Here we can see for syntax with $i that is index and it will run 1 to 12. We have keep in mind that if we use through keyword then it will check 1 to 12 as value mention here but if we use to keyword then it will check below 1 from the mention closing value. That’s why we use 13 to get value of 1 to 12.
#{i} will apply CSS grid width by these rules.

While

While is worked as for loop. We will first declare index here, which will be initial point then we will mention the end point.
After the condition we will increase the value of index to re-walk the path up to to the closing condition.

Each

Each is like JavaScript map method. We can map over items using each.
Suppose we can declare the background color as variable but we can easily do this by using each.
Here we can $color is listing three color, when red color come to the variable then it set the background color red, again green color set the variable green and set the background color green, as blue set background color blue.

We set list of item in a different list to iterate over the list to set variable and required rules.

Here we create a color list with a variable name $colors. We put it in each to iterate over there. We have to keep in mind that when we put additional list then we have to add $key keyword to bind it with the list.

Source: https://sass-lang.com/, Anisul Islam blog