DEV Community: Precious

React: Best Frontend Framework 2024

Precious — Sat, 29 Jun 2024 19:21:00 +0000

Introduction:
React is a free and open-source front-end JavaScript library for building user interfaces based on components(Wikipedia 2024). It has a great community of developers that is maintained by Meta.
During my internship at HNG we are going to be using this framework to build projects and products that will solve real life problems. You can know more about the internship here https://hng.tech/internship

You may be interested to know why react should be the best FRONTEND framework for web developers in 2024, it’s because of:

Easy to learn
Components based so you code are not complicated and difficult to understand.
States management: with different in built hooks one can effectively manage states in react.
Routing:
Reusable components 6.Virtual DOM which first updates before updating the DOM making it very fast. 7.it’s helps build very scalable applications. 8.One way data flow from parent to child using props which also makes learning it not complex
JSX syntax which is easy to learn
Data binding

Conclusion:
React should be your go to framework for building FRONTEND applications whether as a beginner or seasoned developer. You can join me and let’s explore this framework together during my HNG11 internship. Check it out here https://hng.tech/hire

Unleashing the Power of the DOM: A Beginner's Guide

Precious — Tue, 07 May 2024 03:30:39 +0000

INTRODUCTION:
In the vast landscape of web development, understanding the Document Object Model (DOM) is akin to holding the keys to a kingdom. The DOM is not just a concept; it's a crucial component that bridges the static world of HTML with the dynamic realm of JavaScript, enabling developers to create interactive and engaging web experiences.

Imagine the DOM as a blueprint of a building. Just as architects use blueprints to design and construct buildings, web browsers use the DOM to render web pages. Every element, from headings to paragraphs to images, is represented as an object in the DOM, allowing developers to manipulate these elements with JavaScript.
One of the most common methods to interact with the DOM is through getElementById, which allows developers to select a specific element on the page using its unique identifier. For example, to select an element with the id "myElement," you would use:

const element = document.getElementById('myElement');

Another useful method is addEventListener, which allows developers to listen for specific events on an element, such as clicks, mouse movements, or keyboard inputs. For example, to add a click event listener to an element:

element.addEventListener('click', () => {
// Do something when the element is clicked
});

Additionally, developers can use createElement to dynamically create new elements and appendChild to add them to the DOM. For example, to create a new paragraph element and add it to a div with the id "myDiv":

const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph';

document.getElementById('myDiv').appendChild(newParagraph);

Understanding these methods and their interactions with the DOM is fundamental to becoming a proficient web developer. With these tools at your disposal, you can manipulate the DOM dynamically, creating rich and interactive web experiences for users.

With these tools at your disposal, you can manipulate the DOM dynamically, creating rich and interactive web experiences for users. Let's explore a practical example to demonstrate the power of these DOM methods.
Suppose we have a simple webpage with a button that, when clicked, adds a new list item to an unordered list. We can use createElement to create the new list item, textContent to set its content, and appendChild to add it to the list.

<!DOCTYPE html>

Dynamic List Example

Item 1
Item 2
Item 3

Add Item

<br> const addButton = document.getElementById('addItemButton');<br> const list = document.getElementById('myList');</p> <div class="highlight"><pre class="highlight plaintext"><code>addButton.addEventListener('click', () => { const newItem = document.createElement('li'); newItem.textContent = 'New Item'; list.appendChild(newItem); }); </code></pre></div> <p>

In this example, clicking the "Add Item" button dynamically adds a new list item to the unordered list. This demonstrates how we can use DOM methods to manipulate the structure and content of a webpage based on user interactions.

CONCLUSION:
By mastering these fundamental DOM methods, along with other advanced techniques and libraries available in the JavaScript ecosystem, you can create dynamic, responsive, and engaging web applications that delight users and elevate their browsing experience.

INTRODUCTION TO CSS CASCADE, SELECTOR AND SPECIFICITY- A BEGINNER GUIDE 101

Precious — Thu, 18 Apr 2024 15:16:35 +0000

INTRODUCTION

CSS which stands for Cascading Style Sheet helps brings beauty and your creativity to “life on your website through styling. Its helps defines the style(s) used to design your website. Generally CSS is a language used to style your website. But what is CASCADE in CSS

CASCADE STYLESHEET:

Cascade defines the origin and layer that takes precedence when declarations in more than one origin or scope block set a value for a property on an element. That means when a selector matches an element, the property value from the origin with the highest precedence gets applied, even if the selector from a lower precedence origin or layer has greater specificity. The CSS cascade aim is to select CSS declarations in order to determine the correct values for CSS properties.

There are five steps in the cascade algorithm, in order of :

Relevance
Origin and importance
Specificity
Scoping proximity
Order of appearance Lets use an example to explain better- When two rules from the same cascade layer or origin apply and both have equal specificity, the one that is defined last in the stylesheet is the one that will be used. Let say this is HTML

This is my first paragraph

Color: red;

}

Color: blue;

}

Looking at the example above you will notice that both are at the same level or have same specificity hence the last styling will take precedence

SPECIFICTY

Specificity is the algorithm that the browser uses to decide which property value is applied to an element. If multiple style blocks have different selectors that configure the same property with different values and target the same element, specificity decides the property value that gets applied to the element. Specificity is basically a measure of how specific a selector's selection will be:

• An element selector is less specific; it will select all elements of that type that appear on a page, so it has less weight. Pseudo-element selectors have the same specificity as regular element selectors.
• A class selector is more specific; it will select only the elements on a page that have a specific class attribute value, so it has more weight. Attribute selectors and pseudo-classes have the same weight as a class.

CSS SELECTOR AND ITS SPECIFICITY

CSS selector is used to target the HTML elements on our web pages that we want to style. There are a wide variety of CS
SELECTOR SPECIFICTY

0 Element 1 Class 10 Attribute 10 ID 100 In-line style 1000 !important 10000

CONCLUSION

The cascade, specificity, and CSS selector control how CSS is applied to HTML and how conflicts between style declarations are resolved.

THE INTERNET AND ITS TECHNICALITIES: A BEGINNER GUIDE 101

Precious — Thu, 04 Apr 2024 12:53:03 +0000

INTRODUCTION
By the end of this article, you will have a clear understanding of:

The history of the internet
Network Packet
Internet Protocol (IP)
What Domain Name Service(DNS) is all about
FTP
HTTP
HTTPS

HISTORY OF THE INTERNET
In 1960’s, the United State Government researchers were looking for means to send information to one another without having to travel long distance because as at then connecting one computer to another was static as one has to bring two computers together in the same place to be able to connect them. These computers where very large and largely immovable as a computer was as big as a standard room size hence moving them were practically impossible.
With the advent of the cold war the government needed a way to communicate quickly with each other without having to travel long distance or using the normal postal medium. The proposed solution by Government researchers was Packet Switching where data or information can be shared in bit or smaller segment as against Circuit Switching where all the information was sent in chunk leading to delay in information sharing and when interrupted all the data will be lost, But Packet Switching allowing information to be sent in bit made data sharing to be sent quickly and even when interrupted the data or information is not lost whereby some have already be sent and the data sharing continues from where it stopped. This lead to the formation of Advanced Research Projects Agency Network (ARPANET) which is the foundation of the internet where information sharing is done over a network.
In 1969, the first computers communicated over ARPANET from UCLA to SRI in California and it was a success. Although this was majorly available to Government Agencies and Universities but its evolution lead to the internet we enjoy today as other networks were created over the years. In January 1st 1983 the internet was born where ARPANET and the Defense Data Network officially changed to the TCP/IP standard allowing networks to be connected by a universal language.

Network Packet
A network packet is a smallest unit of data that's grouped together and transferred over a computer network typically a packet-switched network, such as the internet. Each packet or chunk of data forms part of a complete message and carries pertinent address information that helps identify the sending computer and intended recipient of the message. Network packet works by choosing the best route available to its destination. Most networks today operate on the TCP/IP stack, which makes it possible for devices connected to the internet to communicate with one another across different networks.
Parts of Network Packet
Network Packet consist of three main parts namely:

Header
Payload
Trailer

Importance of Network Packet

Packets are used for efficient and reliable transmission of data.
Packets enable multiple computers to share the same connection.
Packets use the best route available for delivery
To ensure secure delivery, packets can be encrypted
If an error occurs, the packets can be stored and retransmitted later.

Internet Protocol(IP)
Protocols govern the methods and rules for data transmission in a network.
They are a set of rules or procedures for transmitting data between electronic devices, such as computers. Protocols are responsible for data integrity, security, and error checking during transmission. IP ensure that the data sent and received from the source device to the destination device are the same.

Protocols also manage the size and speed of data transmission. They break down large data files into smaller packets for easier transmission and reassemble them at the destination. They also control the data transmission rate to prevent data overflow at the receiving device.

Protocols help determine the route that the data packets should take from source device to destination device. This is particularly important in large networks where there are multiple possible paths. Protocols like Internet Protocol (IP) are used to route the data packets to their destination.
IP is a unique identifier for a specific path that leads to a host on a network. We have two major IP address:
-IPv4
-IPv6

Domain Names System (DNS)
Domain Name gives a user-friendly way to point to non-local resources. This could be a website, a mail system, print server, or any other server that is available on the Internet. A domain name can be more than just a website! A domain name is much easier to remember and enter into a terminal or Internet browser, than an IP address.
The Domain Name System (DNS) maps human-readable domain names (in URLs or in email address) to IP addresses. For example, DNS translates and maps the domain Google.com to the IP address IPv4: 8.8.8.8 and/or 8.8.4.4 . For IPv6: 2001:4860:4860::8888 and/or 2001:4860:4860::8844.

A URL is the complete web address of a resource, while the domain name is the name of a website and is a sub-component of every URL.

Hypertext Transfer Protocol (HTTP)

The Hypertext Transfer Protocol is the foundation of the World Wide Web, and is used to load webpages using hypertext links. HTTP is an application layer protocol designed to transfer information between networked devices and runs on top of other layers of the network protocol stack. A typical flow over HTTP involves a client machine making a request to a server, which then sends a response message.

HTTP Request: HTTP request is how web browsers ask for the information they need to load a website. Each HTTP request made across the Internet carries with it a series of encoded data that carries different types of information. A typical HTTP request contains:

HTTP version type
URL
HTTP method
HTTP request headers
Optional HTTP body.

HTTP response: HTTP response is what web clients (often browsers) receive from an Internet server in answer to an HTTP request. These responses communicate valuable information based on what was asked for in the HTTP request. A typical HTTP response contains:

HTTP status code
HTTP response headers
optional HTTP body

Hypertext transfer protocol secure (HTTPS) ** Hypertext transfer protocol secure is HTTP with security, HTTP which is the primary protocol used to send data between a web browser and a website. HTTPS is encrypted in order to increase security of data transfer. This is particularly important when users transmit sensitive data, such as by logging into a bank account, email service, or health insurance provider. Any website, especially those that require login credentials, should use HTTPS. In modern web browsers such as Chrome, websites that do not use HTTPS are marked differently than those that are. Look for a padlock in the URL bar to signify the webpage is secure. HTTPS prevents websites from having their information broadcast in a way that’s easily viewed by anyone snooping on the network. When information is sent over regular HTTP, the information is broken into packets of data that can be easily “sniffed” using free software. This makes communication over the unsecure medium, such as public Wi-Fi, highly vulnerable to interception. With HTTPS, traffic is encrypted such that even if the packets are sniffed or otherwise intercepted, they will come across as nonsensical characters. File Transfer Protocol (FTP) File Transfer Protocol is a standard network protocol used for the transfer of files from one host to another over a TCP-based network, such as the Internet. FTP works by opening two connections that link the computers trying to communicate with each other. One connection is designated for the commands and replies that get sent between the two clients, and the other channel handles the transfer of data. During an FTP transmission, there are four commands used by the computers, servers, or proxy servers that are communicating. These are “send,” “get,” “change directory,” and “transfer.” While transferring files, FTP uses three different modes: block, stream, and compressed. The stream mode enables FTP to manage information in a string of data without any boundaries between them. The block mode separates the data into blocks, and in the compress mode, FTP uses an algorithm called the Lempel-Ziv to compress the data