DEV Community: SYED MAZHAR ALI RAZA

JavaScript's prototype vs proto

SYED MAZHAR ALI RAZA — Fri, 04 Feb 2022 17:49:24 +0000

If you're a JavaScript developer, you might have come across the word "prototype". But have you come across "_proto_"? If yes, ever wondered what's the difference? If not, let me fill you in.

Prototype

It is an object that contains certain properties and methods, which by default in JS automatically get associated with an object(remember that functions, dates, arrays, etc are all considered as objects) created in your JavaScript code.

Prototypes are like a blueprint for a constructor function (functions that create new objects) containing all features that should be inherited by all the instances (objects produced by that class constructor).

So in short, it's a master blueprint containing various properties and methods for a class constructor, and every object created from that constructor will inherit those properties and methods.

Now the question is, how does one access those methods and properties inherited by that object (which got created by a constructor)? Yes! through "_proto_" object.

proto

It is an object that points to the prototype it was created from. So "proto" is the prototype of that particular object now.

For example, if you create an array using new Array constructor, that array's __proto__ will point to the prototype of Array constructor, and since array is also considered an object in JS, Array constructor's __proto__ will point to the Object constructor's prototype. Prototype of Object constructor is the master blueprint and its prototype doesn't point somewhere (will return null)

Want to learn this concept with an amazing example and further clarity? Check out this amazing article by Andrew Chung on the same.

Happy coding :)

10daysofJSfundamentals (DAY 8)

Hoisting in JavaScript [must know concept]

SYED MAZHAR ALI RAZA — Thu, 03 Feb 2022 13:58:11 +0000

Did you know that JavaScript allocates memory to all variables and functions first, even before executing the code?

Yes, that's true. And this results in a phenomenon called "hoisting" in JavaScript.

Hoisting allows us to use variables and functions even before they're declared. Look at this example

console.log(x);
var x = 'sample';

Interestingly, this will not throw an error. Instead, it will output undefined. Let's take a slightly deeper dive into this process.

Variable hoisting
- The interpreter hoists variables declared with var with a default value of "undefined". Therefore, If you use a variable declared with var before it's been declared, it will return undefined.
- The interpreter also hoists variables declared with let or const, but this time, the variables are not assigned a default value. JS just knows that these variables exist in the code. Therefore, If you use a variable declared with let/const before it's been initialized, it will throw an error stating "cannot access xyz before initialization".
- If you don't initialize the variable anywhere in the code, and try to use such variable, it will throw an error stating "xyz is not initialized". See how this time JS doesn't even know that xyz exists.
Function hoisting
- Unlike variables, an actual copy of the function is hoisted at the time of memory allocation. This gives an advantage of using calling functions even before they've been initialized.
- Note that if you assign a function to a variable (like in arrow functions), it will no more be treated as a function. Just how variables are hoisted by a default value of undefined, this function will also be treated the same.

Want to read a detailed explanation with more examples, check out this amazing article by Zach Snoek on FreeCodeCamp's website.

Happy coding :)

10daysofJSfundamentals (DAY 7)

The Strict mode in JavaScript

SYED MAZHAR ALI RAZA — Wed, 02 Feb 2022 18:03:35 +0000

JavaScript's strict mode, introduced in ECMAScript 5, optimizes code for JS engine, eliminates bad-syntax code, and helps in writing secure JavaScript. Let's take a slightly deeper dive into this concept.

"Use strict" mode in JS applies certain restrictions in the entire script or in a particular function it is invoked in. Just add "use strict"; to the beginning of a script or a function.

Q. What changes does use strict make? The list is pretty exhaustive. But here are some important changes you'll notice. If you're in strict mode:

Using a variable/object, without declaring it, will throw an error.
Using duplicate parameters in any function or duplicate property names in any object will throw an error.
Any assignment that silently fails (does not throw any error/no feedback to the user) in normal code (i.e assignment to a non-writable global or property, assignment to a getter-only property, assignment to a new property on a non-extensible object) will throw an error.
Deleting a function or an undeletable property will throw an error.
Using a number that begins with 0 will throw an error.
Setting a property to a primitive value, will throw an error.
There are a number of situations that could unintentionally cause this to be bound to the global object. In strict mode, instead of bounding this to global object, this gets bound to undefined.
ECMAScript 5 added a list of reserved words that will be used in the future. If you use them as variables or arguments, the strict mode will throw an error.
Using arguments.callee, arguments.caller, with keyword,eval() function, is forbidden.
Et cetera, et cetera.

Refer to this MDN doc on the same for further information and clarity.

Happy coding :)

10DaysofJSfundamentals (DAY 6)

Calmy explaining "this" in JavaScript

SYED MAZHAR ALI RAZA — Tue, 01 Feb 2022 18:15:01 +0000

The behavior of this keyword in different contexts can be very confusing for a JavaScript developer. Here is some must-know information regarding the same.

First things first, what exactly is this?

This is a keyword that references the object that is currently executing the function. In other words, This points to the object, of which the currently executed function is a property. For example:

let obj = {
    run : function() { console.log(this) }
}

Now if you execute run method, it will return the obj object. This is because this is inside the run function which is a property of the obj object.

If this is used alone, i.e outside any function (in the global context), it will refer to the window object (if JS is running in a browser), and global object (if JS is running in Nodejs).
If this is used inside a regular function, it will again refer to the window/global object. But in strict mode (I will post on what strict mode is some other day), JavaScript binds this to undefined.
If this is used inside a method of an object, it will refer to the object, that particular method is a property of.
If this is used inside a constructor function, and when the new operator is used, JS binds the this keyword with the newly created object by that constructor. Hence, it will refer to a new object that is created.
In arrow functions, JS sets this lexically. It means the arrow function does not create its own execution context but inherits this from the outer function where the arrow function is defined.

Want to understand the concept in depth with more examples, do read this article on the same.

Happy coding :)

10DaysofJSfundamentals (Day 5)

Primitive and reference values in JavaScript

SYED MAZHAR ALI RAZA — Mon, 31 Jan 2022 17:17:06 +0000

"Primitive" and "reference" values in JavaScript, a concept most developers skip as it seems to be too theoretical, actually became quite important when I was learning React. If you don't know about this, let me quickly summarize the concept.

In JS, there are two types of data/values that can be stored in a variable, primitive value and reference value.

Q1. Which values are primitive and which ones are references?

Any number, string, boolean, undefined, null, or symbol is a primitive value.
Arrays, Objects, and Functions are reference values.

Q2. Where does a primitive value gets stored, and where does a reference value gets stored?

When you declare a variable having a primitive value, the JS engine allocates the memory and store the value on the stack.
On the other hand, when you declare a variable having a reference value, the JS engine allocates the memory and store the value on the heap.

Q3. On calling these two types of variables, what do we get in return?

When you access a primitive value, you get the actual value of it. That is why when we assign a variable that stores a primitive value to another, the value stored in the variable gets copied into the new variable. Now if you make a change in any of the variables, the other one doesn't get affected.
When you access a reference value, you get the reference/location of the memory of it. That is why when we assign a variable that stores a reference value to another, the location of the value is passed to the other variable. Now if you make a change in any of the variables, **the other one also gets affected **because they are pointing to the same value stored in the heap memory.

Want to read a more clear explanation with examples? You can check out an amazing article by Tyler McGinnis on the same.

Happy coding :)

10DaysofJSfundamentals (Day 4)

"==" or "===" ? Key difference b/w them

SYED MAZHAR ALI RAZA — Sun, 30 Jan 2022 18:09:56 +0000

While learning JS, I've always wondered how == and === are different from each other, and how exactly do they work BTS. So here's what I got to know.

The equality operator (==) uses the Abstract Equality Comparison Algorithm to compare two operands. In simple words, it compares the two operands irrespective of their datatypes. For example:

console.log(2 == "2") will return true, even if the second operand here is a string. But why? How? Here's the deal.

When the operands are of different types, the algorithm converts the operands to the same datatype before comparing. Now, which one gets converted, you may ask.

On comparing a number with a string, the string is converted to a number. (empty string is converted to 0, non-number strings return NaN i.e Not a Number)
If either of the operands is a boolean, it gets converted to either number 1(if true) or 0(if false).
Lastly, if one of the operands is an object and the other is a number or a string, the object gets converted to a primitive value (just like using valueOf() and toString() methods)

The strict equality operator (===) uses the Strict Equality Comparison Algorithm to compare two operands. Even "===" also checks whether two values are the same or not but there is no type conversion before comparison. So even if the values of two operands are the same, but are of different datatypes, it will return false.

Happy coding :)

10DaysofJSFundamentals (DAY 3)

Null vs Undefined in JavaScript

SYED MAZHAR ALI RAZA — Sat, 29 Jan 2022 18:46:32 +0000

Do you really know the difference between "null" and "undefined" in JavaScript? If not, let me explain.

Undefined

In JavaScript, undefined means a variable has been declared but has not yet been assigned a value. For example:

X is like a new team member in your company who hasn't been assigned any role yet.

let X;

console.log(X) 
undefined

console.log(typeof X)
undefined

Null

Null is an assignment value. It can be intentionally assigned to a variable as a representation of no value: For example:

X is like a team member in your company who has been intentionally told to do nothing as of now.

let X = null;

console.log(X) 
null

console.log(typeof X) 
object

typeof(null) will interestingly return 'object'. Unfortunately, this can be considered a bug in JS where the datatype of null is an object.]

Also, note that undefined == null will return true, meanwhile undefined === null will return false. It means null is equal to undefined but not identical(because they have different datatypes).

Happy coding :)

10daysofJSfundamentals (Day 2)

Console.log() is not JavaScript

SYED MAZHAR ALI RAZA — Fri, 28 Jan 2022 13:51:19 +0000

This might be a heartbreak to a lot of JavaScript developers out there, but the truth is...

The very first line of code you ran as a beginner JS developer, viz console.log(), is not a part of the JavaScript language. Confused? Let me explain.

The console object (whose log method is used to print data on the web console) is one of the "Web APIs" provided by the Browser to the JavaScript Engine, which means it is your browser that is providing this functionality that is in return implemented through JavaScript.

All browsers have a set of built-in Web APIs to support complex operations, such as DOM, Fetch, History, Service Workers, and Web Storage APIs. Now you may wonder, what exactly is a part of JavaScript then?

Well, the parts of JavaScript that are standard across all environments are detailed in the ECMA Specs (primitives, data types, language grammar and syntax, arithmetic and logical operations, built-in objects and functions, etc.). This means that while Array.isArray() is built into JS, setTimeout() and console aren’t.

Do you want to learn more about this? check out this great blog by Nikhil John, where he explains this concept in-depth.

Happy coding :)

10daysofJSfundamentals (Day 1)

Most popular CSS Units

SYED MAZHAR ALI RAZA — Thu, 23 Sep 2021 07:06:50 +0000

A CSS unit is used to set the size of an element or its content. They are used to set margin, padding, height, width and so on.

The length unit in CSS is of two types:

Absolute length unit
Relative length unit

Absolute Length:

The absolute length units are fixed(not relative) and a length expressed using these units appear exactly of the same size.

Following are the most popularly used absolute length units:

1. Px (Pixels):

Pixels, abbreviated as "px", are a unit of measurement equivalent to roughly 1⁄96 inch (0.26 mm).

How to use:


img { width: 10px; }

Note: Pixels are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.

2. Pt (Points):

Points, abbreviated as "pt", are a unit of measurement equivalent to roughly 1⁄72 inch (0.35 mm).

How to use:


img { width: 15pt; }

3. Pc (Picas):

Picas, abbreviated as "pc", are a unit of measurement equivalent to roughly 1⁄6 inch (4.23 mm). Also, 1pc = 12 pt

How to use:


img { width: 5pc; }

Since screen sizes vary so much, it is not recommended to use absolute units on screen. However, they can be used if the output medium is known, such as for print layout.

Relative Length:

Relative length units are relative to certain factors like the size of the parent element's font, or the size of the viewport.

Using such units, the size of text and elements can be set and changed appropriately for different device widths.

1. Em:

Em is a relative length unit which is relative to the font-size of the element. So if the font size of a <div> is set as 2 pixels, then 1 em in that division will be 2px. By default 1em = 16px

How to use:


div {font-size: 18px } //this is the div containing an img. Its font size is set as 18px

img { width: 2em; } // here, 2rem = 36px

2. Rem:

Rem is a relative length unit which is relative to the font-size of the root element. By default 1rem = 16px.

How to use:


html { font-size: 18px } //setting the base font size as 18px

img { width: 2rem; } // here, 2rem = 36px

3. % (Percent):

Percent is a relative length unit which is relative to the size of the parent element.

How to use:


img { width: 2%; } // The width of img will be 2% of its parent element size

4. Vw (Viewport-width):

1vw is relative to 1% of the width of the viewport(the browser window size). If the viewport is 100cm wide, 1vw = 1cm.

How to use:


img { width: 2vw; } // The width of img will be 2% of its viewport-width

5. Vh (Viewport-height):

1vh is relative to 1% of the height of the viewport(the browser window size). If the viewport is 50 cm in height, 1vh = 0.5cm.

How to use:


img { height: 2vh; } // The height of img will be 2% of its viewport-height

6. Ch (Character-width):

1ch is equal to the width of the “0” character in a given typeface. In monospace fonts, where all characters are the same width, 1ch equals one character. Such unit can be used in carrying out certain scenarios like in the typewriter animation where the typing cursor has to move a length equal to 1 character. For fonts that consists of unequal widths of all characters, this unit doesn't fit to be an appropriate choice.

How to use:


img { width: 50ch; } // The width of img will be equal width of 50 "0s"

References:
CSS Units by W3 Schools
CSS Values and Units by MDN Docs

Four Case Styles you should know!

SYED MAZHAR ALI RAZA — Tue, 07 Sep 2021 07:45:55 +0000

In programming, we are mostly not allowed to use space characters between words because it is interpreted as the end of identifier or beginning of something new.
Instead, we use certain naming conventions in order to use multiple words for naming variables, classes, functions, etc. in the source code.
Following are the most popular case styles used in programming:

Camel case
Pascal case
Snake case
Kebab case

Camel Casing:

For using the camel case style, the rule is to remove spaces and capitalize each word, except the first one.
Eg: first name will be written as firstName in this case style.
Application: The camel case style is used as the naming convention of variables and functions in various programming languages like JavaScript.

Pascal Casing:

For using the pascal case style, the rule is to remove spaces and capitalize each word, including the first one.
Eg: first name will be written as FirstName in this case style.
Application: In Java, all classes, interfaces and enums are expected to use Pascal case. C# uses PascalCase for namespaces and even public methods.

Kebab Casing:

The craving makes it difficult to write but by gathering all my self-control, here I go. The rule for kebab casing is to remove spaces and then add a hyphen "-" between each word.
Eg: first name will be written as first-name in this case style.
Application: In CSS, property names are written in this style. This style is also often used in URLs.

Snake Casing:

For using the snake case style, the rule is to remove spaces and add an underscore "_" to separate each word.
Eg: first name will be written as first_name in this case style.
Application: It is used conventionally in declaring database field names. Python uses the style for variable names, function names, method names, and module or package (i.e. file) names. PHP uses SCREAMING_SNAKE_CASE for class constants.

CSS properties I am most grateful to

SYED MAZHAR ALI RAZA — Tue, 27 Jul 2021 07:21:25 +0000

Hello everyone, in this blog I am sharing a few CSS properties that I personally use alot and find very useful everytime.

1. Flexbox

Flexbox is a layout model that allows elements to fit together and distribute the space inside a container. Using different widths and lengths, objects can be aligned to fill spaces or to divide a space between elements, making it an ideal tool to use in responsive designs. Learn more

2. Grid

CSS Grid layout is a two-dimensional grid system designed to help web developers split elements into columns and rows to create a consistent layout for web applications. Learn more

3. box-shadow

Box-shadow in CSS is used to add shadows around the frame of an element. This property can help making amazing effects around the element depending upon the creativity standard. Learn more

4. Animation

Animations can be powerful tools for engaging and delighting visitors on your site. By using CSS animations, elements can be shifted, rotated, slanted, squashed, spun, and stretched on the page. Learn more

Comment your favourite CSS properties or the one you think is not heard by many!

MY WEB DEV. JOURNEY FROM SCRATCH (DAILY UPDATE; WEEK: 1)

SYED MAZHAR ALI RAZA — Fri, 01 Jan 2021 08:11:19 +0000

Hi developers! I am Syed Mazhar Ali Raza pursuing BTech in Electronics and Communications from IP University, Delhi. I am very passionate about coding, but I am an absolute beginner. I have spent the last few months learning about various opportunities as a coder. After a lot of research, I chose web development to be my first big goal for 2021.

Motive to write this blog:

I will keep a daily update of what I learned to get closer to my goal and try to be qualified enough to crack any contest, program, etc.
This challenge will make a better myself in the next few months.

DAY 1:

Today I learned the basics of web development by watching roadmap to web dev' videos. Here is what I learned:
Full-stack web development consists of front end and back end development.

Front end development:

The part of a website that the user interacts with directly is termed as the front end. It is also referred to as the ‘client-side’ of the application. It includes everything that users experience directly: text colors and styles, images, graphs and tables, buttons, colors, and navigation menu. HTML, CSS, and JavaScript are the languages used for Front End development

Front end Languages:

HTML: Used to build skeleton or the body of the website
CSS: Used for designing or styling the website. It makes it more presentable.
JAVASCRIPT: Used to add logic to a website, acts as its brain.

Note: Learning all the above languages, 100% won't be ideal. So I will learn 80% HTML, 60% CSS, and 50% javascript. Then work on projects, and if at some instance a requirement of additional info of any language arises, then it will be learned alongside.

Back end development:

Backend Dev' is the server-side of the website. It stores and arranges data and also makes sure everything on the client-side of the website works fine. It is the part of the website that you cannot see and interact with.

Back end technologies:
there are numerous languages and software for backend development, such as python, PHP, CPP, etc... I will focus on:

Node.JS: Node.js is an open-source runtime environment/platform for executing JavaScript code to write Server-Side scripts.
MongoDB: MongoDB is a document database with the scalability and flexibility you want with the querying and indexing you need. The data objects are stored as separate documents inside a collection instead of storing them in a traditional relational database's columns and rows.

Firstly, I installed VSCode and grasped a few required basics of it. Also got wise to the fact that we can also use notepad for writing an HTML code, but using an IDE makes it more comfortable and user friendly and comes very handy as you start writing big programs.

DAY 2:

Today, I made the first move by creating an HTML file then understood the boilerplate code (standardised or the most basic template of HTML code), which consists of:
<!DOCTYPE html> declaration defines to the webpage that this document is an HTML5 document.
<HTML> element is the root element of an HTML page
<head> element contains meta information about the HTML page
<title> element specifies a title for the HTML page (which is shown in the browser's title bar or the page's tab)
<body> element defines the document's body and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Added comments in the code and understood the very basics of Meta tag (included in head tag). It provides information about the webpage and the data is used by the web browser and search engine for SEO (increases web traffic on the website). Some types of metadata are description, keywords, author etc.
Understood basic tags like strong(bold), embedded(italics), division, line break(moving on to the next line), horizontal rule, Heading, paragraph,span etc.
Learned how to add links in HTML using anchor tag and its attribute target="_blank" to open the link in a new tab.
Studied tags for inserting images in a webpage and an amazing website that provides copyright-free images(Also used its attributes like width and height, but styling is never recommended in HTML; it should be performed using CSS).

DAY 3:

Inserted lists(ordered and unordered) and tables in HTML and types of bullets and numbering that can be used in a list.
Used Form tag to create a form with various types of entries like text, email, date, number, checkbox, radio, submit, reset, textarea, etc.
Used Label tag and and also select-option tags to create a dropdown list.
Learned about block and inline elements:
Block elements: A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Div, hr, p, etc. are some examples of block elements.
Inline elements: An inline element does not start on a new line, and it only takes up as much width as necessary. <a>, <span>, <select>, etc., are some examples of inline elements.
Gained an understanding of ids and classes how they are different from each other.
Learned about HTML entities(used to display reserved characters in HTML) and used a few of them to get the point of it.
The last topic of the HTML course was Semantic Tags:
A semantic tag clearly describes the meaning of specific elements to both the browser and the developer.
Example: Many web sites contain HTML code like: div id="nav" div class="header" div id="footer" to indicate navigation, header, and footer. Rather than defining each element, HTML has predefined tags that clearly defines its contect. Eg: <footer>, <header>, <nav>, <section>, <summary>, etc.

2-3 DAYS:

Got Caught in the deadly trap of procrastination, and doing college assignments. (Really embarrassing T_T).
Since college work is overwhelming these days, I decided to learn at least a little, but never take a break from it.

DAY 4:

Started off by taking a quick glance of all HTML files I made, and then jumped into CSS tutorials.
Learned how HTML has tags, CSS has selectors. Selectors are the names given to styles in internal and external style sheets. Firstly I will concentrate on HTML selectors, which are simply the names of HTML tags and are used to change the style of a specific type of element.

For each selector, there are properties inside curly brackets, which simply take the form of words such as color, font-weight or background-color.

A value is given to the property following a colon (NOT an “equals” sign). Semi-colons are used to separate the properties.
Then learned the three ways to insert a styling sheet:

Inline: An inline style may be used to apply a unique style for a single element.
Internal: An internal style sheet may be used if one single HTML page has a unique style.
External: With an external style sheet, you can change the look of an entire website by changing just one file! (.css file)

Then I learned basic font tags in CSS and their use such as font-family, font-size, font-weight.
I further moved to different ways to add colour in CSS which are Hex. Colour code(ex. C35F453), RGB Colour code [ex. rgb(255, 0, 0)] and by name (ex. red, violet).

DAY 5:

firstly, I went through CSS tags like height, width, background, box model, borders, margins, padding, etc.
Then I learned using Google developer's tool which was very fun and helpful. Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster. By right-clicking on the webpage and choosing to inspect option, one can access the dev tools. I checked out different tabs such as inspect, sources, network, etc.

By far I have learned the most basics of HTML and CSS, so I made the online grocery store web page using all tags that I have learned. It took a lot of time(1-2 hrs) because I was constantly experiencing minor errors, but eventually, I was getting better at it.
Making a project and using all tags learned by far is very helpful.

progress ongoing. Cannot blog because too much of work(took part in an open-source program, college exams, working on a project).

DEV Community: SYED MAZHAR ALI RAZA

JavaScript's prototype vs __proto__

Prototype

__ proto __

10daysofJSfundamentals (DAY 8)

Hoisting in JavaScript [must know concept]

Did you know that JavaScript allocates memory to all variables and functions first, even before executing the code?

10daysofJSfundamentals (DAY 7)

The Strict mode in JavaScript

10DaysofJSfundamentals (DAY 6)

Calmy explaining "this" in JavaScript

10DaysofJSfundamentals (Day 5)

Primitive and reference values in JavaScript

10DaysofJSfundamentals (Day 4)

"==" or "===" ? Key difference b/w them

10DaysofJSFundamentals (DAY 3)

Null vs Undefined in JavaScript

Undefined

Null

10daysofJSfundamentals (Day 2)

Console.log() is not JavaScript

This might be a heartbreak to a lot of JavaScript developers out there, but the truth is...

10daysofJSfundamentals (Day 1)

Most popular CSS Units

Absolute Length:

1. Px (Pixels):

2. Pt (Points):

3. Pc (Picas):

Relative Length:

1. Em:

2. Rem:

3. % (Percent):

4. Vw (Viewport-width):

5. Vh (Viewport-height):

6. Ch (Character-width):

Four Case Styles you should know!

Camel Casing:

Pascal Casing:

Kebab Casing:

Snake Casing:

CSS properties I am most grateful to

1. Flexbox

2. Grid

3. box-shadow

4. Animation

Comment your favourite CSS properties or the one you think is not heard by many!

MY WEB DEV. JOURNEY FROM SCRATCH (DAILY UPDATE; WEEK: 1)

Motive to write this blog:

DAY 1:

Front end development:

Back end development:

DAY 2:

DAY 3:

2-3 DAYS:

DAY 4:

DAY 5:

DAY 6:

JavaScript's prototype vs proto

proto