DEV Community: Stephanie-dev

JavaScript: Understanding DOM

Stephanie-dev — Mon, 06 May 2024 20:19:20 +0000

Are you curious about how websites come to life? JavaScript is a powerful language that brings web pages to life. Well, today we're going to explore the Document Object Model (DOM), a crucial concept in web development.

What is the Document Object Model (DOM)?

DOM stands for Document Object Model. It's a standard way for programming languages (like JavaScript) to access and modify websites.
The DOM is a programming interface for HTML and XML documents. It's a tree-like structure that represents the document's structure, allowing programs to dynamically access and manipulate the content, structure, and style of a document.

There are three types of DOM:

Core DOM (for all document types)
XML DOM (for XML documents)
HTML DOM (for HTML documents)

We'll be focusing on the HTML DOM.

The HTML DOM Tree: A Website's Building Blocks

Imagine a website as a big tree with many branches. Each branch represents an HTML element (like a button or an image), and the tree is called the HTML DOM. JavaScript uses this tree to access and modify the website's content, style, and behavior. The DOM tree has a single root node, which is the document itself. From there, it branches out into various nodes, each representing an element, attribute, or text.

Nodes and Node Types

In the DOM, each node has a specific type, which determines its behavior and properties. The most common node types are:

Element nodes (e.g., <div>,<p>,<img>)
Attribute nodes (e.g.,href, src, style)
Text nodes (e.g., the text content of an element)
Document nodes (the root node of the DOM tree)

Node Relationships

Nodes in the DOM tree have relationships with each other, which are crucial for navigating and manipulating the document. The most important relationships are:

Parent-child relationships (e.g., a <div> element is the parent of its child elements)
Sibling relationships (e.g., two<p> elements are siblings if they have the same parent)
Ancestor-descendant relationships (e.g., a<div> element is an ancestor of its child and grandchild elements)

An illustration:

Now, what is HTML DOM?

As mentioned earlier, JavaScript is a powerful language that brings web pages to life, and at the heart of its functionality lies the HTML Document Object Model (DOM).

HTML DOM is a set of rules that defines how HTML elements (like buttons or images) are represented as objects. It's like a dictionary that explains how to access and modify website elements.

What Can HTML DOM Do?

With HTML DOM, JavaScript can:

Change the text or image on a website.
Change the website's colors and layout.
React to user interactions (like clicks or hover effects).
Add or remove website elements.
Create new events (like animations or pop-ups).

Put simply, HTML DOM is like an instruction manual for JavaScript to understand and manipulate websites.

Interacting with the DOM

JavaScript is the primary language for interacting with the DOM. It provides various methods and properties for accessing, creating, and manipulating nodes in the DOM tree. Some common examples include:

document.getElementById() to retrieve an element node by its ID/
document.createElement() to create a new element node.
node.appendChild() to add a child node to an element node.
node.style to access and modify an element's CSS styles.

Here are some examples:

1. document.getElementById()

HTML:

<div id="myDiv">Hello World!</div>

JavaScript:

const myDiv = document.getElementById("myDiv");
console.log(myDiv); // Output: <div id="myDiv">Hello World!</div>

2. document.createElement()

JavaScript:

const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
console.log(newParagraph); // Output: <p>This is a new paragraph.</p>

3. node.appendChild()

HTML:

<div id="myDiv">Hello World!</div>

JavaScript:

const myDiv = document.getElementById("myDiv");
const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
myDiv.appendChild(newParagraph);

Result:

<div id="myDiv">Hello World!<p>This is a new paragraph.</p></div>

4. node.style

HTML:

<div id="myDiv" style="background-color: red;">Hello World!</div>

JavaScript:

const myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "blue";

Result:

<div id="myDiv" style="background-color: blue;">Hello World!</div>

Summary

HTML DOM is a powerful tool that helps JavaScript create dynamic and interactive websites. Understanding HTML DOM is crucial for web development, and it opens up endless possibilities for creative and engaging web experiences.

Please like and share your comments below 🤗

Learn, Code, Repeat!

CSS Cascade, Specificity, and Selectors

Stephanie-dev — Sun, 21 Apr 2024 13:35:52 +0000

Have you wondered why certain CSS rules you apply, be it inline, internal or external, do not reflect on your live server/website as a newbie, even as a knowledgeable techie?

I have wondered too, don't worry.

We'll be delving into various terminologies and rules that apply to CSS. It might be a lot but with time, you will understand....like I did.

First, let's look at what CSS means.

CSS means Cascading Style Sheets. It is a language used to style your markup document or page, also known as HTML (Hyper Text Markup Language) page.

We have three types of CSS. They are:

Inline CSS
Internal CSS
External CSS

Inline CSS: This is the CSS or style applied to a unique element in your HTML document.

For example,

In your HTML document, you have:

<h1>This is a document</h1>

How do you apply your inline CSS?

<h1 style="color:red;">This is a document</h1>

This style="color:red;" tells the browser that the text in the <h1> element should be red.

Internal CSS: This defines a style for a single HTML page. It is usually defined in an HTML page's <head> section, within a <style> element.

Example,

<html>
<head>
<meta charset="utf-8">
<style>
       h1{
             color:red;
          }
</style>
</head>
</html>

As you can see, instead of your CSS being in the body of your HTML document like the Inline CSS, it is in the `<head>` section instead. This way, you can target all the elements you want to style in the `<style>` tag.

This is also recommended if you want to style your HTML documents separately.

External CSS: This styles multiple HTML pages with a single style sheet linked to your HTML page with a <link> tag. Your CSS rules are contained in a separate CSS file with a .css extension. It must be linked to your HTML document to see the results.

Example,

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<style>
       h1{
             color:red;
          }
</style>
</head>
</html>

I know these, why are my CSS rules not applying?

Don't worry, we're here.

Since we know what CSS is now, we will look at what CSS Cascade means.

Cascade is the algorithm for solving conflicts where multiple CSS rules apply to an HTML element. This means it reconciles and applies the rules you declare for an element based on some factors.

Understanding how the cascade algorithm works helps you understand why your codes aren't working and how the browser resolves such conflicts.

The cascade algorithm is divided into four (4) stages.

First stage - Position and order of appearance

This is simply the order in which your CSS rules appear.

Example,

h1{
   Color:red;
  }

h1{
   Color:red;
  }

In this case, we have two <h1>elements (selectors of identical specificity) telling the browser to apply certain colors to their texts. The browser will only obey the second rule and ignore the first since it's the last one to be declared.

This can also apply to your internal CSS, inline CSS, and linked stylesheets.

Some frontend developers often have two linked stylesheets in their HTML document or page. In this case, the browser picks the last linked stylesheet declared.

Example,

<html>
<head>
<title>Example/title>
<link rel="stylesheets" href="styles.css">
<link rel="stylesheet" href="https://mdn.com....">
</head>
</html>

The browser will pick the last declared linked stylesheet because it has more specificity. In a case where the browser cannot read the latest linked stylesheet or doesn't support it, it falls back to the first one declared.

This also applies to your embedded <style> tag. If it comes before a <link>tag, the <link> tag will be picked first.

The further down your CSS rules are declared, the more specific they become. Your browser will always pick the last CSS rule declared.

An exception is your inline CSS. No matter the position of your inline CSS, it overrides all other CSS rules unless you give them an !important declaration.

Another scenario is where you apply the same rules to a specific element twice. You can declare the same properties with different values to a specific element but the last property and value will be applied.

Example,

h1{
   color:red:
   color:blue;
  }

The result would be blue because it was the last rule to be declared and the most specific according to the browser.

You might wonder why a developer would declare two rules, the same properties but different values, for one element. They do this so the browser can have a fallback option if it can't read or doesn't support the second rule declared.

Second stage - Specificity

Think of this stage as a math test grade. Your class takes a test and everyone is scored with different grades, from the lowest to the highest. Now, imagine prizes are given based on how each student did on the test.

The highest scorer takes the biggest or highest prize and is seen as the most valued. Sure, other students are encouraged but the highest scorer takes the win.

Let's apply it to this stage.

Specificity is an algorithm that determines which CSS selectors are most specific through a scoring system to make those calculations.

You might be wondering, "What is a CSS selector?"

A CSS selector finds the HTML element(s) you want to style and applies the CSS rules you declare for it(them).

There are different categories of CSS selectors, namely five (5):

Simple selectors: these select elements based on element name, id, and class.
Combinator selectors: these select elements based on a specific relationship between them.
Pseudo-class selectors: these select elements based on a certain state.
Pseudo-elements selectors: these select and style a part of an element.
Attribute selectors: these select elements based on an attribute or attribute value.

I'll be touching base on the simple and attribute selectors for this stage.

The simple selectors

As mentioned earlier, they select HTML elements based on the element name, id, or class.

Element name: h1, p, div, span, button, section, article, and a are examples of element names. The list goes on and on.
When styling with CSS, you pick any of the elements you want to style and give it a rule.

Example,

h1{
   font-size:20px;
   text-align:center; 
  }

You're telling the browser that all `<h1>` elements in your HTML document should have a font size of 20px and should be center-aligned.

Class selector:This selector selects any element that has a specific class attribute.

To select elements with a specific class attribute, you put a period(.), followed by the class name you gave the element.

Example,

HTML

<p class="text">this is me</p>

CSS

.text{ 
      color:pink;
     }

You're telling the browser that any .text element should have the color "pink".

The class selector has a higher importance than the element name selector.

Id selector:This selector uses the id attribute of an HTML element to select a specific element. It is unique within a page. It has the most specificity. It is more important than any other selector and it overrides any other CSS rule you apply to the specific element if you have applied a CSS rule to the id attribute.

To select an element with a specific id, you write a hash (#) character, followed by the id of the element.

Example,

HTML 

<p id="style">style me</p>

CSS

#style{
       background-color:black;
       color:white; 
      }

You're telling the browser that `#style` element should have a `background-color` of black and a font color of white.

In summary, id > class > element name.

Universal selector

This selector selects all HTML elements to apply CSS rules.

Example,
*{
background-color:grey;
font-size:16px;
color:green;
}

You're telling the browser to apply these rules to all elements in your HTML page unless specified otherwise.

Attribute selectors

This selector targets elements with certain or specified attributes. It is usually denoted by two square brackets [].

Example,

HTML

<a href="twitter.com" target="blank">Twitter</a>

CSS 

a[target] {
         Color:green;
        }

You're telling the browser to make any `a` tag with the `target`attribute have a font color of "green".

Why did I explain all these? To make you understand the importance of each selector and how they rank in CSS Specificity.

Back to specificity...

As mentioned earlier, specificity determines which elements are most specific through a scoring program. This is so because you can have the same element targeted with the same properties but different values. The one with the higher specificity wins.

Example,

<html>
<head>
  <style>
    .test {color: green;}
    p {color: red;}
   #hello {color:blue;} 
  </style>
</head>
<body>
<p class="test" id="hello">Hello World!</p>
</body>
</html>

From explanations so far on simple selectors, which color do you think the browser would display?

Answer: if you chose "Green", you're on the right path.

If you chose "Red", I'll explain again.

In the example above, we told the browser to give the class selector, .test, a green color. We also told the browser to give the p element a red color. Lastly, we told the browser to give the #hello element a blue color. but the browser displayed a green text. Why? The id selector has higher importance than the class and name selectors.

Always remember: id > class > name

Another way to know which selectors are more important than the other is by calculating their specificity values.

Remember we mentioned it's calculated with a scoring program?

Start at 0, add 1 for each element selector or pseudo-element, add 10 for each class value, add 100 for each id value (or pseudo-class or attribute selector), and 1000 for inline styles.

Breakdown:

* Selector has a specificity value of 0

.test or [href] has a specificity value of 10

#style has a specificity value of 100

<p style="color:red;">two eggs</p> (inline CSS has a specificity value of 1000

Remember that inline CSS overrides all other CSS rules unless they have an !important declaration. This is why it has a specificity value of 1000 and is the most important

So, the updated hierarchy would be: inline CSS > id > class > name

Example,

HTML

<p style="font-size:20px;" id="hello" class="text">hello there!</p>

CSS

p {
   font-size:17px;
  }

#hello{
       font-size: 24px;
      }

.text{
      font-size:10px;
     }

What font-size would the browser display?

Answer: 20px

Why, because inline CSS has more priority than any other selector in the stylesheet.

Now, if I add an !important declaration to one of the rules:

CSS

p {
   font-size:17px !important;
  }

#hello{
       font-size: 24px;
      }

.text{
      font-size:10px;
     }

What font-size would the browser display?

Specificity calculation question:
What's the total score of this CSS rule?

a.test#style -
p[class] -

Answer:

a.test#style - 111
p[class] - 11

Note: it's always a good idea to keep your selectors simple when styling so you can easily style or overwrite with other CSS rules.

Third stage - Origin

The cascade takes into account the origin of the CSS because the CSS you write isn't the only CSS applied to a page.

If you've used Dev Tools, you must have noticed some CSS rules that were applied by default. Those are the browser's internal stylesheets or styles added by your browser's extensions or operating system.

The order of these origins from least specific to most specific:

User agent base styles: these are default styles that your browser applies to HTML elements.
Local user styles: these styles can come from your browser extensions that allow a user to write their own custom CSS for a webpage. They can also come from the operating system such as a default font size.
Authored CSS: This is the CSS that you write or author. This has higher importance than the user agent stylesheet and the local user stylesheet. It overrides both. This is the CSS you link to your HTML page with a <link> tag or embed with a <style> tag in your head section or add to your HTML name elements (inline CSS).
Authored !important: this is any !important declaration that you add to your authored CSS rule.
Local user styles !important: this is any !important declaration that comes from the operating system or browser extensions.
User agent !important: any !important that's defined in the default CSS provided by the browser.

Fourth stage - Importance

CSS rules are also applied based on their level of importance.

We'll be looking at the rank of importance from the least to the most important.

Normal rule type - background, color, or border.
animation rule type
!important rule type
Transition rule type

Animation rule type is more important than normal rule types because when an animation becomes active, its expected behavior changes its visual state and it overrides the normal rule type.

Same with transition rule types.

Summary

CSS (Cascading Style Sheets) is a language used to style HTML documents. There are three types of CSS: Inline, Internal, and External. Understanding how CSS rules are applied is crucial, and it involves understanding the CSS Cascade, which is the algorithm for solving conflicts where multiple CSS rules apply to an HTML element.

The CSS Cascade has four stages:

Position and order of appearance: The order in which CSS rules appear matters. The browser will apply the last rule declared.
Specificity: This determines which CSS selectors are most specific through a scoring system. ID selectors have higher importance than class and name selectors. Ultimately, inline styles have the most priority.
Origin: The origin of the CSS matters, with authored CSS having higher importance than user agent and local user styles.
Importance: CSS rules are applied based on their level of importance, with animation and transition taking more priority because of the changes in visual state/behavior.

Understanding these stages helps resolve conflicts and ensures that CSS rules are applied as intended.

I hope you find this post useful when you face problems relating to CSS.

Thanks for reading! Share your thoughts in the comments below.

Learn, code, repeat!

The Evolution of the Internet: The Journey Through Time

Stephanie-dev — Thu, 04 Apr 2024 23:28:37 +0000

History of the Internet:

Welcome to a journey through the history of the internet, a technological marvel that has revolutionized the way we communicate, work, and live. From its humble beginnings in the Cold War era to the ever-present network we know today, the internet has undergone a remarkable evolution, driven by the innovation and collaboration of countless visionaries.

The Cold War Era: Setting the Stage

The internet's story begins in the 1950s and 1960s, during the Cold War between the United States and the Soviet Union. In response to the fear of nuclear attacks, both nations sought to develop advanced science and technology capabilities. It was during this period that the concept of a network of interconnected computers was born.

From Mainframes to Networks: A New Era Dawns

At the time, computers were massive mainframe machines that occupied entire rooms and were very expensive. Researchers had to travel long distances to access these computers, which could only perform specific tasks. To address this challenge, the idea of connecting computers to enable communication and resource sharing emerged.

The first method of transferring data between computers, known as Circuit Switching, had limitations. All data had to be sent in a single packet, and any interruption would cause the entire transfer to fail. To overcome this, Packet Switching was developed. This method allowed data to be broken into smaller segments, ensuring that even if one segment failed to transmit, the rest could continue without interruption or starting over.

Early mainframe computer

ARPANET: The Birth of the Internet

In 1969, the first computers communicated over ARPANET, the Advanced Research Projects Agency Network, from UCLA to SRI in California. Initially connecting just four nodes, ARPANET rapidly expanded to enable research universities to share data and resources. Lawrence Roberts played a pivotal role in the development of ARPANET, proposing and leading the project for many years.

ARPANET map in 1962 and how it advanced in 1982

The Birth of TCP/IP: A Universal Language for Communication

As other networks emerged, the need for a universal communication standard became apparent. Transmission Control Protocol (TCP) and Internet Protocol (IP) were developed, providing a set of rules that allowed different networks to communicate with each other. This laid the foundation for the interconnected network of networks that we now know as the Internet.

DNS (Domain Name System): The Internet's Address Book

Imagine you want to visit a friend's house, but you only have their name, not their address. DNS, or Domain Name System, is like the internet's address book. It translates human-readable domain names (like www.example.com) into IP addresses (like 192.168.1.1) that computers use to communicate on the internet. Without DNS, you'd have to remember long strings of numbers to access websites, which would be like trying to find your friend's house without an address!

The World Wide Web: Connecting the World

With DNS and all these other developments in place, the stage was set for the introduction of the World Wide Web. In 1991, Tim Berners-Lee introduced the World Wide Web, forever changing the way we access and share information. The Web allowed users to navigate resources using Uniform Resource Locators (URLs), serving as an address for locating data on the internet. The Web also introduced HyperText Transfer Protocol (HTTP) for downloading linked resources and HyperText Markup Language (HTML) for formatting web pages.

FTP, HTTP, HTTPS: The Language of the Web

FTP (File Transfer Protocol) is like a courier service for the internet. It's used to transfer files between computers, such as uploading a website's files to a server.
HTTP (Hypertext Transfer Protocol) is the protocol used for transferring web pages from servers to your browser. It's the language of the web, allowing you to click on links and navigate between pages.
HTTPS (Hypertext Transfer Protocol Secure) is like HTTP, but with added security. It encrypts data transferred between your browser and the server, keeping your information safe from hackers.

How Do Network Packets Work?

Imagine you're mailing a letter. You write your message, put it in an envelope, and write the recipient's address on it. In computer networks, data is sent in packets, similar to envelopes. Each packet contains a piece of the message, along with the sender and recipient's addresses. These packets travel independently across the network and are reassembled at the destination, ensuring that even if some packets are lost or delayed, the message still gets through to the right destination.

Network packet

Conclusion: A Bright Future Ahead

As we reflect on the incredible journey of the internet, from its origins in the Cold War era to this present-day, one thing is clear: the internet has transformed the world in ways we never thought possible. As we look to the future, the possibilities are limitless, and the evolution of the internet continues to shape our world in ways we can only imagine.

Image of endless possibilities with the use of the Internet

DEV Community: Stephanie-dev

JavaScript: Understanding DOM

What is the Document Object Model (DOM)?

The HTML DOM Tree: A Website's Building Blocks

Nodes and Node Types

Node Relationships

Now, what is HTML DOM?

What Can HTML DOM Do?

Interacting with the DOM

Summary

CSS Cascade, Specificity, and Selectors

As you can see, instead of your CSS being in the body of your HTML document like the Inline CSS, it is in the <head> section instead. This way, you can target all the elements you want to style in the <style> tag.

This is also recommended if you want to style your HTML documents separately.

First stage - Position and order of appearance

Second stage - Specificity

The simple selectors

You're telling the browser that all <h1> elements in your HTML document should have a font size of 20px and should be center-aligned.

You're telling the browser that #style element should have a background-color of black and a font color of white.

Universal selector

You're telling the browser to apply these rules to all elements in your HTML page unless specified otherwise.

Attribute selectors

You're telling the browser to make any a tag with the targetattribute have a font color of "green".

Back to specificity...

Note: it's always a good idea to keep your selectors simple when styling so you can easily style or overwrite with other CSS rules.

Third stage - Origin

Fourth stage - Importance

Summary

The Evolution of the Internet: The Journey Through Time

As you can see, instead of your CSS being in the body of your HTML document like the Inline CSS, it is in the `<head>` section instead. This way, you can target all the elements you want to style in the `<style>` tag.

You're telling the browser that all `<h1>` elements in your HTML document should have a font size of 20px and should be center-aligned.

You're telling the browser that `#style` element should have a `background-color` of black and a font color of white.

You're telling the browser to make any `a` tag with the `target`attribute have a font color of "green".