📜 A Brief History :

Ethereum is a decentralized, open-source blockchain. It was first proposed in a white paper in late 2013. In 2015, Vitalik Buterin launched the Ethereum mainnet. Ethereum introduced Ether (ETH), which powers the Ethereum ecosystem.

Eth is a native cryptocurrency that rewards validators and is used for transaction fees.

While Bitcoin is used to perform digital transactions, such as Money Transfer, Ethereum focuses on development.

To better understand how Blockchain and Bitcoin work, I’ve explained it in more detail in my article.

The Mysterious Force 🔮 That Powers Bitcoin? It’s Not What You Think.

The main idea behind creating Ethereum is that it is a programmable Blockchain that helps developers build Decentralized Applications using Smart Contracts.

⚙️ How does Ethereum work?

Unlike Bitcoin, Ethereum's workings are different. Ethereum’s flexibility allows developers to build everything from DeFi protocols to NFTs.

Below, I break down the core components that make Ethereum function.

🤝 What are Smart Contracts?

First, we need to understand what a contract is. A contract is a legal agreement between two parties requiring them to meet certain conditions to be executed.

In Ethereum, a smart contract is a legal agreement, i.e., a programmed code written on the chain that automatically executes when certain conditions are met.

Example:

pragma solidity ^0.8.0;

contract HelloWorld {
    function greet() public pure returns (string memory) {
        return "Hello, Ethereum!";
    }
}

♦ What is Ether (ETH)?

Ether (ETH) is a cryptocurrency used in the Ethereum ecosystem. It is similar to gasoline, which is used to fuel cars.

Ether (ETH) is used to:

• Pay transaction fees (gas)
• Reward validators who help run the network
• Interact with smart contracts and dApps

It’s the backbone of Ethereum’s entire ecosystem, from NFTs to DAOs to DeFi.

📝 What is a Consensus mechanism?

Consensus means agreement among a group of people.

The consensus mechanism means all participants, i.e., nodes, must agree that the transactions are valid on the Ethereum Blockchain and added to the chain.

It ensures the Integrity, Immutability, and Security of data. The consensus mechanism prevents attacks like double spending and a 51% attack.

There are different types of consensus mechanisms, each of which works differently. I will only cover two important mechanisms.

1. 🛠️ Proof of Work(PoW) :

Cynthia Dwork and Moni Naor introduced proof of work (PoW) in 1993, and Satoshi Nakamoto adopted it in Bitcoin in 2008.

Proof of work is the mechanism by which all the blockchain nodes solve a complex mathematical problem to verify the transactions and add them as blocks to the Blockchain.

The mechanism uses high-end devices or graphics cards to run the mining software.

The race between miners starts as they compete to create and add blocks to the Blockchain. This helps the chain extend and increases security.

Once the miner solves the complex mathematical problem, the algorithm automatically incentivizes with a Bitcoin or any other cryptocurrency as a reward for the winner.

Because of the complexity and processing power, this mechanism is highly energy-intensive.

Some cryptos that use PoW are Bitcoin, Bitcoin Cash, Litecoin, etc.

2. 🌱 Proof of Stake(PoS) :

Ethereum has transitioned from Proof of Work to Proof of Stake. It was first introduced in 2012 by Sunny King and Scott Nadal.

Instead of competing to solve the complex problem using high-end devices like proof of work, in Proof of Stake, those with the highest coins become validators; the algorithm randomly chooses a validator.

The validator's job is to verify whether those transactions are valid. If they are, the validator adds them to the Blockchain.

Validators earn newly minted coins and transaction fees as a reward. If the validator did a malicious transaction, it would lose the locked coins and be permanently banned from the chain.

Benefits compared to PoW :

• Energy consumption is lower
• Transaction speeds are higher
• More secure and less expensive.

👉 Conclusion :

Ethereum isn’t just a cryptocurrency — it’s a whole ecosystem designed to revolutionize how we build applications and trust systems.

From Smart Contracts to NFTs, from DeFi to DAOs, Ethereum continues to lead the way in blockchain innovation.

☕ Buy Me a Coffee!

Hey there! If you’ve loved my work and found it helpful, consider buying me a coffee to show your support. It’s a friendly way to show appreciation.

Writing and maintaining this blog takes time, effort, and plenty of caffeine!

Every little bit helps me to create valuable content, learning new things, and share it all with you.

buymeacoffee.com/nitingutte

📚 Want to Learn More?

I am on a journey of learning Blockchain Bug Bounties and sharing everything. Don’t forget to follow me for more interesting articles.

If you enjoyed this article, feel free to clap, comment, and share with your friends.

Thank you for reading!

Thank you for being a part of the community

Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Newsletter | Podcast | Differ | Twitch
• Start your own free AI-powered blog on Differ 🚀
• Join our content creators community on Discord 🧑🏻‍💻
• For more content, visit plainenglish.io + stackademic.com

Ethereum Explained: Smart Contracts, ETH, and the Future of Decentralized Tech. was originally published in Cubed on Medium, where people are continuing the conversation by highlighting and responding to this story.

Bitcoin is the world’s most popular and widely accepted cryptocurrency, often used as a digital payment for goods and services. There is much more than being a cryptocurrency.

Let’s dive deeper and explore the real force that powers Bitcoin.

🏛️ First, we need to understand how Banks work :

A bank is a financial institution that provides essential services like accepting deposits and lending money.

When you deposit your hard-earned money, they don't simply store the money in their vault instead, they provide loans(like mortgages or business loans) to other individuals or institutions, and in that process, they earn some interest.

The banks keep a slice of that interest for themselves, and the rest is distributed to the depositors.

The banks act as a trusted centralized middleman between depositors and borrowers throughout this process.

In this way, they play a massive role in how modern economies function.

₿ What is Bitcoin?

Bitcoin is a decentralized cryptocurrency that operates without the need for a central authority to have full control over it, such as Banks or Governments.

It was created in 2009 by an anonymous founder known as Satoshi Nakamoto or a group of individuals.

The idea behind creating Bitcoin is simple: to eliminate intermediaries without needing control of a trusted third party.

Unlike traditional fiat currencies, which governments can print in unlimited quantities, Bitcoin has a limited supply; only 21 million will ever exist. This is why Bitcoin has an edge over any other asset, so-called “Digital Gold”.

🛠️ How does Bitcoin work?

Let's get into a more technical world. I will explain the core elements of Bitcoin's ecosystem.

→ ⛏️ Mining or Miners :

Miners play a crucial role in fueling the Bitcoin ecosystem. They compete with each other to solve complex mathematical problems using their high-end computers.

When the first miner solves the problem and adds the block of transactions to the chain, they earn new Bitcoins(called the “block reward”) plus the transaction fees from all transactions in that block. The process secures the network and is called Proof of Work.

Note: Proof of work is more energy-intensive.

→ 🖧 Nodes or Bitcoin Network :

It's the decentralized collection of computers connecting all participants across the globe.

The collection of computers is nothing but the Nodes that run the Bitcoin algorithm, which checks valid transactions.

→ 💰 Bitcoin Wallet :

In traditional wallets, we hold physical cash inside. Unlike physical wallets, a Bitcoin wallet is a software application called a Digital Wallet that allows you to store, send, and receive Bitcoin using the Internet.

Two key components are used in Wallets:

1. 🔑 Public Key: is publicly accessible so that anyone can use it. Like your bank account number, anyone can send Bitcoin to you.
2. 🔑 Private Key: This key is only accessible by the owner and is protected with a password. Only the owner of the private key can use those Bitcoins.

The types of wallets are Hot wallet (Online) and Cold wallet (Offline).

→ 💱 Transactions :

A transaction is a digitally signed transfer of value between wallets, recorded permanently on the Blockchain.

The Bitcoin transaction is Peer-to-Peer, which means no central authority controls it.

Peer-to-Peer: It's a decentralized network, i.e, the connection between computers without a central server.

Suppose I want to send 10$ of Bitcoin. I require the receiver's address.

Examples: Sender's address: “KwiCtP1M9xKkS8ug7zGyiGddY2S72" Receiver’s address: “1NhbiwvM1XY7HBpY1tn6cQ”

Step-by-step procedure of how transactions work:

1. 🚀 Initiating transaction: Enter the amount and the receiver's Bitcoin address.

2. ✍️ Signing transaction: Digitally signs the transaction with a private key, meaning full ownership of Bitcoin.

3. 📡 Transmission: The signed transactions are sent to the Bitcoin network or nodes.

4.✔️ Validation: The nodes verify whether the transaction is valid.

5. ⚒️ Mining and Confirmation: The transactions are collected by miners and are grouped into a Block. To add the block to the Blockchain, they must solve a cryptographic problem.

→ 💎 Blockchain: It’s one of the most important and absolute core elements of the Bitcoin ecosystem.

🧊 So… What is Blockchain?

Blockchain is an Immutable, Transparent, Decentralized technology that powers cryptocurrency king Bitcoin.

→ ⛔ Immutable: Unable to change

Once something is stored, it cannot be modified.

When a block is created, it cannot be edited, deleted, or replaced. The block is stored permanently in the Blockchain.

Example: Suppose somebody sends a Bitcoin to you, the transaction is tamper-proof and stored permanently in the Blockchain.

This makes the Blockchain more Trusted, Transparent, and secure.

→🧐 󠁩󠁩Transparent: That you see through

Transparent is nothing but accessible and visible to everyone.

In a bank, the transactions are private for security reasons. In Blockchain, when a transaction is done and recorded, it is publicly accessible and visible.

Example: You can check a Bitcoin Wallet's address, amount, and transaction history.

Transparency builds on Trust, reduces fraud, and increases accountability.

→🔥 Decentralized: No one controls

Decentralization means that no control of an authority over any other entity.

Example: I explained earlier that no single central authority can control Bitcoin. Developers, Miners, and users have the power to control Bitcoin.

Bitcoin has the Freedom to operate; no one can block the transactions. It's more secure and harder to hack.

🔠 What are Blockchain Types?

1. Public Blockchain: Decentralized & permissionless

Everyone can access this blockchain, and operations are performed like Read, write, and validate.

Example: Bitcoin.

2. Private Blockchain: Limited access

Controlled by an organisation and has limited access.

Example: Hyperledger.

3. Consortium Blockchain: Semi-Decentralized

Controlled by a group of organizations and more secure compared to other Blockchains.

Example: Quorum.

4. Hybrid Blockchain:

Combination of Public, Private, and Consortium Blockchain.

Example: IBM Blockchain.

👉 Conclusion :

In this article, we have covered the inner workings of Bitcoin and Blockchain.

Governments or Banks don't control Bitcoin, it is powered by a far more powerful decentralized network called Blockchain. And yes, Blockchain is the mysterious power that controls Bitcoin.

The future is decentralized, and it’s only just beginning.

☕ Buy Me a Coffee!

Hey there! If you’ve loved my work and found it helpful, consider buying me a coffee to show your support. It’s a friendly way to show appreciation.

Writing and maintaining this blog takes time, effort, and plenty of caffeine!

Every little bit helps me to create valuable content, learning new things, and share it all with you.

buymeacoffee.com/nitingutte

I am on a journey of learning Blockchain Bug Bounties and sharing everything. Don’t forget to follow me for more interesting articles.

If you enjoyed this article, feel free to clap, comment, and share with your friends.

Thank you for reading!

Thank you for being a part of the community

Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Newsletter | Podcast | Differ | Twitch
• Check out CoFeed, the smart way to stay up-to-date with the latest in tech 🧪
• Start your own free AI-powered blog on Differ 🚀
• Join our content creators community on Discord 🧑🏻‍💻
• For more content, visit plainenglish.io + stackademic.com

The Mysterious Force 🔮 That Powers Bitcoin? It’s Not What You Think. was originally published in Cubed on Medium, where people are continuing the conversation by highlighting and responding to this story.

In this post, I’m breaking down how I’m learning Blockchain Bug Bounties as a complete beginner and why I think this might be one of the most adventurous and rewarding field.

If you are curious about Web3(Blockchain) hacking, then stick with me to break into the new world from scratch.

Why I decided to learn Web3(Blockchain) Bug Bounties?

One day, I stumbled upon an article that blew my mind, “One of the most lucrative bug bounty program in history, which is offered by LayerZero Labs, with a record-breaking reward of $15 million for critical vulnerabilities”.

That was the reason why I started learning Web3(Blockchain) bug bounties, where Ethical Hackers get paid to find vulnerabilities in Blockchain protocols.

It’s not for Financial gain. It’s for the curiosity and the obsession that is growing around Web3(Blockchain).

What is Blockchain?

Blockchain is the Immutable, Decentralised technology that powers cryptocurrencies like Bitcoin and runs Smart Contracts.

In banks, financial transactions like deposits and withdrawals are stored in a ledger. The same works in Blockchain, the transactions are stored in a Digital ledger securely and transparently.

Transactions are shared across the Blockchain and validated by miners to create new blocks. Each new Block is the link to the previous one, creating a chain, and it’s Immutable that no one will change or modify it.

Three reasons why I chose this field?

1. It combines both Coding and Hacking, two skills I’ve always wanted to master.
2. Blockchain is still new, meaning there’s a lot of room to grow, explore, and have a good future.
3. The last one — I want to share what I learn.

My Learning Plan :

I broke down the plan into weekly goals. Every week, I set a target of what to learn and document everything. I will create a full blog series and share real-world bug bounty experience, a journey of a beginner, i.e, trying, failing, and achieving success.

If you want to learn anything, it takes 21 days or 3 weeks to master a solid foundation. So I am going to commit to a challenge for myself.

Here is how I broke down the roadmap into more Structured & Clean:

• Blockchain Foundations.
• Core Programming Skills.
• Security Fundamentals.
• Exploitation & Bug Hunting.
• Advanced Security Concepts in Web3.
• Real-World Bug Hunting & Submissions.

Tip: The path of learning is not in straight line, so the above roadmap may change.

Challenges I think I may face:

1. The learning curve will be real and honest :

Blockchain Basics, Solidity, EVM….. a lot to learn. It’s like getting lost in the forest of Web3(Blockchain), so I will learn one concept at a time.

2. Will not try too many resources :

The internet is full of tutorials, and that can be a trap for beginners like me. I will keep it simple and follow one or two trusted resources until I finish it and move to the next one.

3. Imposter syndrome :

Nobody was born knowing how to hack a smart contract or know everything about Hacking. If you have Curiosity, Patience, and Persistence, you will eventually find a way to win the battle against Imposter Syndrome; that’s the real key.

Why am I documenting My Journey?

Most of the Web3(Blockchain) bug bounty content on the internet is too advanced, too technical, or written for professionals. I’m writing for people like me, those who are learning, failing, and figuring out how Blockchain protocols work.

When I learn a new concept and I document it, it helps me to gain the information faster and understand the harder concepts clearly.

It also helps to sharpen my

• Writing skills
• Analytical Thinking
• Creativity.

What can you expect from my blog posts?

• Honest Experience: what I am learning, struggling with, and facing unexpected issues.
• Beginner-Friendly Guides: Explained in simple and clear English.
• Tips, Tricks, & Ideas: Most of the bounty hunters are not comfortable sharing their knowledge because of the rapidly growing competition in the field.
• Sharing Tools: Real examples from tools like testing frameworks like Hardhat and Foundry, automated scanners, fuzzing tools, network mapping tools, etc.
• “Lessons from my real-world Bug Bounty Hunting journey”.

Want to learn with me:

If this space excites you too, even just 1%, then follow me on my adventurous journey into the world of Web3(Blockchain) Bug bounty.

Feel free to clap, comment, and share with your friends. Follow me for more beginner-friendly blogs and honest progress updates.

The Web3 security world is just getting started. “Let’s learn, build, break, and even get paid for it, TOGETHER”

Thanks For Reading…!

As a beginner in programming, you will encounter errors in your program because of scopes.

Understanding the JavaScript scopes is the important thing to avoid weird bugs or errors in your code.

The scopes control the visibility of the variables used in your code, and they add an extra layer of security to the variables from accessing the block from outside.

There are four types of scopes in JavaScript.

• Block Scope
• Local Scope
• Function Scope
• Global Scope

— → Block Scope :

In the newer version of JavaScript(ES6) the two new keywords let and const are introduced.

The let and const keywords came with the new concept that is Block scope. Variables defined with var keyword don’t have Block scope.

Block scope is like the boundary connected to the variables given by the JavaScript engine itself. If the variable is called from the outside of the scope boundary, then the variable cannot be accessed.

Example :

— → Local Scope :

The variable declared in between opening {and closing} braces are said to be local to that block. Variables can be declared using let, const, and var keywords inside the local scope.

Local variables can only be accessed and modified inside the prior to the local scope.

Example :

If you declared a variable in the function, the variable is only available in the scope when the function is called and deleted when the function is finished its work.

— → Function Scope :

When we write a function, then the JavaScript engine automatically assigns an invisible scope to the function.

In this function scope when the variables are declared using let, const, and var then these variables cannot be accessed from outside the function’s scope.

Example :

The function variables have less span of life as compared to global variables.

— → Global Scope :

The Global scope is nothing but the scope in which the variable is declared outside the function’s body, then that variable is said to be global.

The variable declared outside the function but to the top of the program can have permission to be available all over the program.

JavaScript engine automatically assigns scope to the Global variables.

Example :

As long as the web page is loaded in the browser the global variables stay if the web page is closed or reloaded the global variables will be destroyed.

Conclusion :

Now you understood how to control your variables from accessing outside the scope. The scopes are not easy to understand for beginners but are very important concepts in any programming language.

Using global variables everywhere in your code is not good practice, only use global if you need it otherwise use locally. The global and local scope have their own benefits in your code.

Hopefully, this article helped you to learn different types of scopes in JavaScript.

If you enjoyed this post, then feel free to clap, comment, and share with your friends. Don’t forget to follow me for more interesting articles.

Thank you for reading!

The Ultimate Guide To Understand JavaScript Scope. was originally published in Nerd For Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

What is CSS?

The CSS stands for Cascading Style Sheets.

After learning HTML, the second most important skill is to learn CSS to become a Web Developer. The CSS has the ability to add style or look and feel to the websites.

It adds some special features like color, size, fonts, layout, etc that are used to present the information to the visitors.

The CSS allows you to separate the style and content from the web pages.

Benefits of CSS :

1. Faster web page loading.
2. Easy to maintain.
3. Consumes less time.
4. Support multiple devices such as large screens and small screens.

— → CSS Syntax :

The CSS syntax has three rules, Selector, Property, and a value.

Selector :

The Selector points out which type of HTML element is to edit or style. We can select a particular element to add style.

We can add multiple HTML elements in the selector, which are separated by a comma(,).

e.g :

h1, p, body, title, ID, class, etc.

Property :

It is the property in which is used to change a particular part of the selector visually.

e.g :

color, font-family, border, etc.

Values :

The values are used to change a particular property.

e.g:

blue, sans-serif, 15px, etc.

Declaration :

In the declaration block, it is the collection of properties and values which is separated by a colon, known as statements.

The collection of statements is separated by semicolons between the curly({}) brackets in the declaration block.

— → Selectors In CSS:

To style any element first you have to select the specific element with the selector.

Id Selector :

An ID selector is a unique selector which is used to select a particular HTML element to style.

The # character is written at the beginning of the selector without using any number or other character.

Example:

Class Selector :

To select the class selector we can use the period(.) operator followed by the class name after the HTML element that is in the class.

The selector can be applied to more than one class.

Example :

Element Selector :

The element selector can be used to select the particular HTML element to style.

Example :

— → Ways To Insert CSS :

1. Internal or Embedded CSS:

The Internal CSS must be applied to the single HTML element. It is defined in the head section of the HTML file using <style> element.

Example :

2. External CSS :

It is the most efficient way to write CSS style using a separate file. The CSS file can be linked to the HTML using the <link> tag and the CSS file is saved using the .CSS extension.

Example :

3. Inline CSS :

The inline CSS is used to style only one individual HTML element. In the inline CSS, you can add as many values as you want to be separated by a semicolon(;).

This method is not recommended using as it is a bad practice.

Example :

— → Colors In CSS :

Color is used to represent information to the users, and they can recognize it quickly. The more web pages are visually beautiful, the more users can enjoy reading content on the websites.

In CSS, you can set the background color, text color, and border color of the content.

RGB Color :

In CSS, you can define the colors using the built-in method RGB(). The RGB() method is nothing but the combination of three colors i.e. Red, Green, and Blue.

RGB(RED,GREEN,BLUE)

The three parameters show the quality of the color using the numbers from 0 to 255 only.

Example :

HEX Color :

HEX color uses the color units to display the colors on the screen.

#RRGGBB

In this method, the colors are defined using the RR(red), GG(green), and BB(blue).

Example :

Background Color :

This CSS property can change the background color of the content.

Example :

Text Color :

Text color can change the text color of the content. The text color can be set using a color name, HEX value, and RGB value.

Example :

Border Color :

The four sides of the text border can be changed using this property.

Example :

— → Texts In CSS :

Text is the most important aspect of any webpage. The text represents the information to the users to visit a particular web page.

The text is like emotions that have the ability to engage the audience to the websites.

Text Alignment :

Text alignment property places the text in a horizontal way. The text positioning such as right left and center are used to set the text.

Example :

Text Transformation :

It transforms the text into uppercase or lowercase.

Example :

Text Decoration :

The text-decoration is used to underline, over-line, and line-through text.

Example :

— → Fonts In CSS :

The fonts play a major role to attract users to the web pages. It is the main thing to present information in an easy and simple manner. It also helps the users to understand the information from the web page.

There are two different types of font families.

1. Generic Font Family :

The generic font family is a collection of the same types i.e. serif, sans-serif, monospace, cursive, fantasy.

Example :

2. Font Family :

The font family is used for the particular font to define the style i.e. Times New Roman, Arial, Verdana, etc.

Example :

— → Box Model In CSS :

In this section, we are going to discuss some important concepts. The two concepts are quite similar, but they are very different from each other.

Margin :

The margin property creates the empty space between any HTML element and outside the border.

Margin is used to set the four sides, i.e. Top, Right, Bottom and Left.

Padding :

It creates space between the content and the border around the content.

Border :

Border property defines the color, style, and size of the border. It can be of any type i.e. solid, dashed, dotted, double border, etc.

If we do not specify the style of the border, it will be invisible.

Content :

Content is the heart of the page that is where the information and the images are displayed.

Example:

Conclusion :

You learned the basics of CSS from this article. Now you can build your own landing page with the CSS.

There are lots of resources available on the internet if you need to dig deep in CSS.

If you enjoyed this post, then feel free to clap, comment, and share with your friends. Don’t forget to follow me for more interesting articles.

Thank you for reading!

Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer

The Stunning CSS was originally published in TheLeanProgrammer on Medium, where people are continuing the conversation by highlighting and responding to this story.

Do you want to know the difference between the double equals and triple equals comparison operators in JavaScript? Then this article might help you.

In JavaScript, there are two different types of comparison operators available to perform an equality operation.

But first, you need to understand the concepts of truthy and falsy values.

Concept of Truthy and Falsy values:

Falsy values: in which we try to convert values using boolean, then the result always becomes false.

Truthy values: in which we convert values using boolean, then the result always becomes true.

In JavaScript, there are only six types of Falsy values.

• false: When it is not true and the result is false (boolean value).
• 0: Zero.
• “”: If we don't pass any values in the string, it is known as an empty string.
• null: is the value in which it is empty or not initialized or not defined, or it has a zero value.
• undefined: is the variable in which it is not assigned any value during its creation phase.
• NaN: refers to Not-a-Number, it used to indicate an error to enter a valid number.

Example :

Double Equals or Loose Equality (==) :

In loose equality, two different types or the same values are compared to perform the equality operation. First, any one of the two operands is converted to the desired type using the implicit type coercion method.

It is also called Abstract equality.

Example 1 :

In the first example above, first, the string value ‘2’ is converted to number 2 automatically by JavaScript and then the JavaScript compares two values using loosely equality(==) operator.

If both values are the same and there is no need to type coercion in the second example.

Example 2 :

The empty string (‘’) is converted to 0 using coercion by JavaScript and then JavaScript moves to equality operation, then the output is true.

The comparison between the same operands as null and undefined is always true.

Triple Equals or Strict Equality (===) :

If both operands have the same type and same value then the values are said to be equal i.e. the output is true.

In strict equality, there is no coercion operation performed. If one value is totally different from another value, Then the output will be always false.

Example 1 :

In the given examples the output is true. Because they have the same type and same values.

Example 2 :

If both operand values are the same, but the type is different, the JavaScript engine shows the output as false.

Conclusion :

Loose equality and strict equality operators are totally different from each other. It depends on you to choose which type is best suited for your code.

If you use loose equality then definitely you will face unexpected errors in your code. Because implicit coercion takes place before the JavaScript moves to comparison in the code.

Remembering the six types of falsy values is quite confusing and hard to understand, loose equality.

It is always recommended to use strict equality or triple equals in the code to avoid errors.

To learn more about type conversion and coercion, read the following article.

Type Conversion and Coercion

If you enjoyed this post, then feel free to clap, comment, and share with your friends. Don’t forget to follow me for more JavaScript-related articles.

Thank you for reading!

More content at plainenglish.io

JavaScript Comparison Operators: Loose Equality (==) vs Strict Equality (===), Explained w/… was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

In this article, we are going to learn the little confusing concepts for beginners that will help you in your developer journey.

As in our day-to-day life, we already used conversion terms. In computers, the term conversion refers to the ability to convert one file format into other file formats without any problems i.e. converting the file .JPG into .PDF or text file into an Excel file.

In programming languages, conversion is the fundamental aspect used to deal with situations facing the code.

The conversion is the way in which the variable of one type is compatible with the variable of another type to perform a particular task.

Type Conversion or Explicit Conversion:

The conversion takes place manually or explicitly by typing the method or function name before converting the values, it is known as Explicit Conversion.

In JavaScript, there are five different types of data types as String, number, boolean, object, and function.

The type conversion only used in three data types which are String, number, and boolean.

— To String Conversion :

In this conversion, the number is converted to a string when we need it.

JavaScript provides different types of built-in methods or functions used in the Explicit conversion.

1.String()

The String() method is a Global method, and it is used to convert numbers to strings.

It can also be used to convert literals and expressions.

Syntax :

String(ValueToConvert)

Example:

As in the above example, the String() method converts numbers into a string as we expected.

We can pass null, NaN, and undefined as the values to the method then String() method converts them to string as well, without throwing errors.

Note:

undefined is the variable in which it is not assigned any value during its creation phase.

null is the value in which it is empty or not initialized or not defined, or it has a zero value.

NaN refers as Not-a-Number, it used to indicate an error to enter a valid number.

2. toString()

It does the same job as String() method.

Syntax:

number.toString()

Example:

First, we declare and assign the value to the variable then using the variable name we call the toString() method using the dot(.) operator.

If we try to pass null and undefined values, then the JavaScript engine shows TypeError.

3. toExponential()

This method can be used to convert the number into a string exponential symbol(e+number).

Syntax:

number.toExponential(OptinalParameter)

The parameter is optional which represents the number of digits after the decimal point.

Example:

4. toFixed()

The toFixed() method in JavaScript is used to convert the number into a string by specifying the number of digits to the right after the decimal point.

Syntax:

number.toFixed(optinalParameter)

The parameter is optional which represents the number of digits after the decimal point.

Example:

5. toPrecision()

In this method the number is converted to a string, to format the number to the fixed length.

Syntax:

number.toPrecision(optianlParamater)

The parameter is optional which represents the number of digits.

Example :

— To Number Conversion :

The String to Number is converted using some built-in methods in JavaScript.

Built-in methods are as follows.

1.Number()

The string value is converted to a number using the Global number() method.

It can be used to convert numerical text as well as boolean values to numbers.

Syntax:

Number(valueToConvert)

Example:

If we pass the invalid string and undefined value then the result always printed as NaN. The null value has a default value of 0.

2. parseInt()

The parseInt() method first parses or analyzes the string, and then it converts to integer i.e. number.

Syntax:

parseInt(String, Radix)

In this method the first string parameter is mandatory.

The radix is used to denote numbers to the numeral system i.e. the numbers parsed into hexadecimal to the decimal number. This parameter is optional.

Example:

In the first example, the number will be printed ‘123’, and the rest of the string from ‘$’ will ignore.

In the second example, the string value must start with the number otherwise the whole string will be ignored, and the output will be printed as NaN.

3. parseFloat()

The parseFloat() method is used to parse or analyze the string, and then it converts to a floating-point number i.e. 3.14.

Syntax:

parseFloat(String)

The single string type parameter can only be passed in the method.

Example:

In the above examples, the behavior of the parseFloat() method is the same as the parseInt() method.

— To Boolean Conversion:

In boolean conversion, the values are converted to boolean values.

Syntax:

Boolean(valuesToBoolean)

Example:

If we pass the values like empty string(‘’), null, undefined, and NaN then the result will always be false.

Type Coercion or Implicit Coercion :

Type coercion is similar to type conversion, but the only key difference is the coercion performed automatically or implicitly by the JavaScript engine.

For example, In the built-in alert() method when we pass any values the JavaScript engine will automatically convert those values into a string and display the result.

In type coercion, the same data types are used such as String, number, and boolean, converted into their desired type.

— To String Coercion :

When a string is added with the number or non-string value using the plus(+) operator then the output of the expression is always a string.

Example:

In type coercion, if the first operand is a string and the second operand is non-string then the result always prints as a string.

Here the ‘+’ operator acts as a concatenation of two different operands.

— To Number Coercion:

The mathematical operations like Subtraction(-), Multiplication(*), Division(/), and Modulus(%) performed with the string then the output of the expression is converted into a number implicitly.

In number coercion, the plus(+) operator is not used.

Example :

If any one of the string is non-numeric or both the strings are non-numeric then the JavaScript display the result as NaN i.e., not a number.

— To Boolean Coercion:

In boolean coercion, the boolean values such as true and false are converted to a number.

In the above examples, JavaScript considers the true value as 1 and the false value as 0.

Conclusion:

The conversion and coercion terms are quite confusing at first, but you have understood everything in this article. In the interview process, the interviewer may ask questions related to these types, and you will be able to answer them without any problem.

If this article helped you please clap, comment, share, and don't forget to follow me.

Thank You For Reading!

Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer

Type Conversion and Coercion was originally published in TheLeanProgrammer on Medium, where people are continuing the conversation by highlighting and responding to this story.

As a beginner in JavaScript, you used the console.log() method a lot of times to display the result of your code. JavaScript introduced different types of methods to find errors in the code.

This article gives you a basic understanding of console methods.

What is the Console?

The console is the tool where you can test or check whether your code is working properly or not.

It can be used to access the browser to troubleshoot the errors related to your code.

Remember, a console is an object that can access methods like log() using the dot (.) operator.

Syntax :

Object.Method(parameters);

Different types of methods are as follows.

1. console.log() :

As a newbie programmer, you learned to display the output of the program from the console.log() function or method.

As we know, this method can display messages or mathematical expressions in the console.

Syntax :

console.log(parameter);

Example :

Output :

2. console.info() :

The console.info() is a method in JavaScript that is used to display important messages to the console.

Syntax :

console.info(parameter);

In this method, the parameter can be of string, objects, or arrays.

Example :

Output :

3. console.clear() :

As simple as the name given, it is used to clear the mess in the console.

Syntax :

console.clear();

This method doesn’t require any parameters.

Example :

Output :

By default, the console logs the message ‘Console was cleared’.

4. console.error() :

This method is used to find errors in the code. The Console.error() method is developed for debugging.

Syntax :

console.error(parameter);

Parameters of string type are required.

Example :

Output :

The output of the console is in red.

5. console.warn() :

If something goes wrong, then this method is used to display warning messages to the console.

Syntax :

console.warn(parameter);

This method also requires a string-type parameter.

Example :

Output :

By default, the color of the message is yellow.

5. console.assert() :

The assert method only displays the message if the given expression is false.

Syntax :

console.assert(parameters(Expression, Message);

We can only pass two parameters in the method :

Expression: This is the boolean expression that is true or false can be passed.

Message: This is a string message that displays if the expression is false. You can also pass objects and arrays.

Example :

Output :

In this example, if the ID is not found, then the console logs the following message: ‘There is no valid ID found’.

6. console.count() :

We used the count variable to count the number of repetitions in the loop.

The console.count() method also counts the number of times it is called in the program.

Syntax :

console.count(label);

Parameters which is passed in the method are a type of label, which is a string.

If the parameters are not present in the method, then the default parameters will be added.

Example :

Output :

As the loop goes through every iteration, the console adds the ‘default’ name with a number.

7. console.trace() :

The console.trace() method tracks the execution of the code from the starting point to the endpoint and how the code ended at a certain point.

Syntax :

console.trace(label);

This method accepts any data as a single parameter.

Example :

Output :

8. console.table() :

This method displays data in the form of tables.

The first compulsory parameters passed are in the form of Arrays or Objects, and it requires another parameter as a column(optional parameter).

Syntax :

console.table(any data);

or

console.table(any data, data columns);

Example :

Output :

9. console.time() and console.timeEnd() Methods :

The time method is used to track how long any type of operation takes to complete the task.

It starts from the console.time() method and ends in to console.timeEnd() method. This is the period where this method calculates the total time.

Syntax :

console.time(label);

. . . .

console.timeEnd(lable);

Example :

Output :

The console logs the time with the message passed to it.

10 Grouping Methods :

1. console.group() :

This method allows grouping the content logs of the code. It is used to start the group.

Syntax :

console.group(label);

The parameter label, which is the type of string,g is optional in the method.

2. console.groupEnd() :

This method is used to end the group.

Syntax:

console.groupEnd();

No parameters used in this method.

3. console.groupCollapsed() :

This method is used to structure the separate group in a collapsed manner. It's like nesting in the loop.

Syntax :

console.groupCollapsed(label);

This method uses only one label parameter as a string type.

Example :

Output :

— A few lesser-known but useful methods include:

• console.dir() :

Displays a list of the properties of an object. It’s useful for inspecting DOM elements.

console.dir(object);

• console.dirxml() :

A hierarchical tree format of an XML/HTML element is generated and used for DOM elements.

console.dirxml(document.body);

• console.timeLog() :

Logs the current value of a timer. Use it between console.time() and console.timeEnd()

console.time("MyTimer");

console.timeLog("MyTimer");

Conclusion :

This article introduced you to the different types of console methods. You can use these methods in your debugging journey.

Some methods look simple, but they are very useful in finding bugs in your code.

If something goes wrong in your code, these methods give you the ability to find the solution to your problem.

If you enjoyed this article, please comment, share, and follow me.

Thank You For Reading!

Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer

JavaScript: Explore Different Types Of Console Methods. was originally published in TheLeanProgrammer on Medium, where people are continuing the conversation by highlighting and responding to this story.

Whether in the home, office, shops and in our computer, storage is important to organize items systematically. If we need an item, we can easily search for the item without any panic, and it requires less time.

All computers need to store the user data, such as photos, videos, files, etc. On the Hard Disk. In RAM (Random Access Memory) where the program is stored and is used to complete the task using the CPU.

In programming languages, we also need to store some data and this data is stored in a variable. Variables are the reference where the values are stored.

The variables are like boxes where the memory locations are stored. Memory locations hold the values that are required during the execution of the program.

Types of Programming Languages:

1. Statically Typed Language

In this type, the variables are stored of a certain type, other values cannot be stored.

The programming languages such as C, C++, Java, etc. are statically typed programming languages.

Example in Java :

string dogName = “Rocky”;

int num = 15;

In this example, the name of a dog is declared in a string variable dogName. We cannot add the number to a string variable.

Note — String is a data type where the text(“Rocky”) is stored in the double(“ ”) quotes. The other data type is int(integer) where the number(25) is stored.

2. Dynamically Typed Language

In these types of languages, they can hold different types of information without naming with the data type.

JavaScript, Python, PHP, Ruby, etc. are dynamically typed programming languages.

Example in JavaScript :

var name = “Alice”;

var num = 25;

In the above examples, we don’t specify the data type before naming variables as we did in statically typed languages.

Variables In JavaScript :

Before we dive into the variables first we need to understand some definitions.

1. Declaration: It means informing the compiler to give the memory for variable type, variable name, and the value associated with that variable.
2. Initialization: It means assigning an initial value(text or number) in the variable before it is used in the code.

In most programming languages there is one type to declare a variable. In JavaScript, there are majorly three types to declare variables.

1. var: Variable

Var can be declared either as Global-Scoped or Local-Scoped or Function-Scoped variable. It allows storing values as well as functions and objects.

The var keyword is used to declare variables before ES6(2015 version) or in older versions of JavaScript. Var is no longer used in the newer versions of JavaScript.

Syntax :

var Variable-Name = “some-value”;

For Example :

The variable name is declared and assigned a string value, this variable can be accessed anywhere in the program.

In function displayAge(), the variable age is declared and assigned a number value. The age variable accessed only in the function and not outside the function.

2. let: To Allow

Let can be Block-Scoped or Local-Scoped.

It can only be accessed in that block where it is declared. It means the variable only visible in between the curly braces({}).

Let allows us to assign and reassign the values in the variables.

The let keyword was first introduced in ES6(2015 version).

Syntax :

let Variable-Name = “Some-Value”;

For Example:

In the first example, we stored a string value to the name variable. And we can change or reassign the value of a variable in a second example with a different type or the same type.

3. const: Constant

Const variable can be accessed Globally, and this variable can not be changed once declared.

This keyword also introduced in the ES6(2015 version).

Syntax:

const Variable-Name = “Some-Value”;

For Example :

In this example, first, we assigned a number(10) value in the age variable. If we try to change the value inside the variable the program throws an error “TypeError: Assignment to the constant variable”.

Note: Constant is like pi value in mathematics which has the default value i.e. pi = 3.14.

Rules For Naming Variables :

1. You cannot use a reserved keyword for naming the variables.

The keywords such as if, var, else, let, const, enum, native, etc. are the system reserved keywords, and they are not used for variable names.

For Example :

The interpreter throws an error, SyntaxError: Unexpected token ‘for’.

Note: Reserved keywords are also not used for the function names.

2. Don’t use the spaces, instead use camel Case.

It is the best practice to use camelCase for the names. Users can easily read the name to understand why the variable is used for.

For Example :

It shows an error as SyntaxError: Unexpected identifier.

3. Don’t start with numbers, special characters before the variable names.

If you start with the numbers before the names, JavaScript thinks of it as a number, and the rest of the words ignored.

For Example:

You can use the number after the variable name.

4. JavaScript is case-sensitive.

The first variable name num is not similar to the second Num.

For Example:

If both values are the same, but the names are different, JavaScript thinks of them as different names.

Hoisting And Temporal Dead Zone In JavaScript

1. Hoisting :

Hoisting is the JavaScript engine behavior in which declarations of variables, functions move to the top of the code scope.

Hoisting is only for declarations not for the assignment because the JavaScript engine first allocates the memory for variables and then assigns a value.

Example: Hoisting with var

In the first line of the code, we first log the variable age into the console, and then in the second line, we are declared age, and assigned a value of 15.

The compiler shows the value is undefined Because the JavaScript engine seeing like this “var age;” at the first line. The behavior of the engine is first declaring the variable with var, second allocating some memory, and in the last, it moves to the assignment operation. In this case, we assigned a value in the last line, so the compiler is not going to see.

Note: Undefined is a primitive value that the variable is not assigned a value or the variable is just reserved i.e. not declared.

Example: Hoisting with let and const

Hoisting in let and const is different from var. It throws an error rather than showing an undefined value.

• let:

The code shows the following error “ReferenceError: Cannot access ‘age’ before initialization”.

• const:

Declaring with const, the code prompts the same error “ReferenceError: Cannot access ‘age’ before initialization”.

So, we can say that the const behaves similarly to let.

2. Temporal Dead Zone :

The temporal zone is the zone in which the time between the variable (let or cost) entering the block scope and being declared where they are unable to access.

For Example :

The code throws “ReferenceError” because the variable is accessed before initialization.

The benefit of the Temporal Zone is software bugs can be found easily.

Conclusion :

After reading this article you will get an idea what is the variables. Don’t get confused between Hoisting and Temporal Dead Zone. If you don't understand you can read this article one more time.

Apply what you learned from this article. For more detail, you can go to the official documentation of JavaScript or go to MDN web docs.

— I hope you enjoyed this detailed article, feel free to comment if anything is incorrect, and ask the questions.

Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer

JavaScript: Deep Dive Into Variables was originally published in TheLeanProgrammer on Medium, where people are continuing the conversation by highlighting and responding to this story.

There is a lot to learn to become a successful web developer.

HTML is one of them, HTML is the first skill to learn followed by CSS and JavaScript.

What is HTML?

HTML stands for Hypertext Markup Language. HTML was created by Tim Berners Lee in late 1991.

HTML is easy to learn and it helps you to add the content or information to the webpage.

Programming languages use logic where HTML uses tags. Tags are used to differentiate between text and HTML text. There is no limit to use tags, you can use as many tags as you want.

There are various types of Markup Languages.

1. HTML — Hyper-text Markup language
2. SGML — Standard Generalized Markup Language
3. XML — Extensible Markup Language
4. ASN.1 — Abstract Syntax Notation One
5. MathML — Mathematical Markup Language
6. KML — Keyhole Markup Language

History

1. HTML — Late 1991
2. HTML 2.0 — November 24, 1995
3. HTML 3 — January 14, 1997
4. HTML 4 — December 18, 1998
5. XHTML — May 2000
6. HTML — October 28,2014

Basic Structure of HTML

Don’t be afraid of this snippet, I will explain you line by line.

1. <!DOCTYPE html> Tag

The <!DOCTYPE> tag is the first element and this element is used only once.

<!DOCTYPE> tag declare document type i.e. HTML 5

This tag is not case-sensitive.

Syntax:

2. <html> Tag

<html> tag is the root element of the HTML. Every Other element is enclosed within this tag.

Syntax:

3. <head> Tag

This tag contains the metadata or information on the web page. Such as Title, Script, Link, etc

Syntax:

4. <title> Tag

<title> tag displays the title of the web page at the top of the browser.

Syntax:

5. <body> Tag

The content of the web page is wrapped in the body element.

i.e. Headings, Paragraphs, Images, Links

Syntax:

Heading Tag in HTML

HTML headings provide useful information for the user. Search engines like Google, Yahoo, Duck-Duck Go uses headings to index the structure and content of webpages.

There are total six types of HTML headings

<h1>, <h2>, <h3>, <h4>, <h5> and <h6>

Where <h1> is the largest heading and <h6> is the smallest heading.

Example:

Paragraph Tag in HTML

A paragraph is the collection of sentences that are used to provide short or long information on the page to the visitors.

<p> tad defines a paragraph. Internet browsers add an empty line or margin before and after a paragraph.

Example:

Image Tag in HTML

Images are used to attract the users and it helps to rank the website in search engines.

The <img> tag is used to insert images in the webpages.

Attributes

1. Src

Src is nothing but the source. The source is used to add the location of the image. Alt

2. Alt

Alt stands for Alternative text. To display the image, you have to add some Alternative text.

An alternative is also useful for ranking the website.

3. Width and Height

To define the image size, use the width and height attributes.

Image attribute values specified in Pixels.

Example:

Link Tag In HTML

HTML uses Hyperlinks.

Links in HTML is used to direct the user to the new web page.

The links are any type of image, video, audio, program, and HTML document.

Syntax:

Attributes

1. href

The href attribute is used to add the destination address of the link.

2. Target

The target attribute is used to open the link in the current window or new tab.

Example:

List Tag in HTML

A list is a collection of information or items.

1. Ordered List

An ordered list is grouped in ascending order.

In this list, numbers are used to list items.

It starts with <ol>

Example:

2. Unordered List

Bullet points are used to list items.

It starts with <ul>

Example:

Table Tag in HTML

Tables are a collection of rows and columns.

<table> defines a table in HTML.

<tr> tag is used to define a row.

<th> tag is used to define a header.

<td> tag is used to define a data/cell.

Example:

Attributes

1.Border

CSS border property is used to add a border to the table.

Example:

2. Collapsed Border

CSS border-collapse property is used to collapse borders into one border.

Example:

3.Cell padding

Cell padding provides space in between the cell or data content and with its border.

Example:

4.Left Align Headings

CSS text-align property is used to align the table heading to left.

Example:

5.Border spacing

CSS border-spacing property is used to add the spacing between cells or data.

Example:

Form Tag in HTML

HTML forms are used to collect information from the user such as photos, email, text, etc.

The <form> tag defines forms.

Attributes

1. Label

The <label> defines a label for form elements.

2.Input

The <input> element is form element.

Depending on the type of attribute, it can be used in many ways.

Example:

Congratulations! You just learned the basics of HTML.

Just go to the other resources to learn more about HTML in detail. Practice a lot because practice is the mother of learning.

Thanks for reading my article.

Happy Coding!