Hypertext Markup Language - First Act
It's not enough for an official to be good. There has to be a system that forces them to be good. - Jesse Robredo
In the previous article, we talked about the conspiracy to attack Renderland by the bugs and how bugs take advantage of human and machine errors to reproduce and spread.
This article will primarily focus on HTML and how to use the DevTools Elements tab to inspect and debug HTML errors.
This section is optional and you can skip it if you feel like it.
In render land, there exists a tribe known as the HTML tribe. They are a group of powerful entities responsible for creating and maintaining the structure and content of websites. The tribe is made up of a vast array of members, each with their own unique abilities and responsibilities.
- Document Object Model (DOM) describes the structure browsers use to represent HTML elements internally.
Elements
At the core of the HTML tribe are the HTML elements. These are the building blocks that make up the structure of a webpage. Each element has its own specific purpose and role within the tribe. Some of the most common elements include the header, paragraph, image, and hyperlink elements.
An HTML element consists of several parts:
<h1 id="title" class="secondary">Hello, BugBook</h1>
<!-- This is a comment in HTML -->
<!-- This is a comment in HTML -->
<!-- This is a comment in HTML -->
<img src="https://i.insider.com/602ee9ced3ad27001837f2ac?width=700" alt="psst: visit this image link" />
<!-- This is a comment in HTML -->
<!-- This is a comment in HTML -->
Starting tag: The start tag is the opening tag that begins the element. It consists of the element name enclosed in angle brackets, such as <p>.
Attributes: Attributes provide additional information about the element, such as the element's ID, class, or style. They are specified in the start tag and consist of a name-value pair, separated by an equals sign, such as class="example".
Bug Maneuvers
How to navigate bug-infested areas and how to locate bugs
Next, I'd check the like button's event listeners to find out what actually happens when you click on like.
I then realize the event handler is being referenced instead of being invoked!
type Props = {
liked: boolean;
likePost: (postId: string) => void;
}
const LikeButton = ({ liked, likePost }: Props) => {
return <Button onClick={() => likePost}>{ liked ? "Unlike" : "Like" }</Button>
}
It went through and it returned HTTP Status Code 200. However, the like button still shows Like instead of liked.
I immediately open up the Developer Tools on my browser and navigate to the Network tab.
The network tab doesn't show any outgoing requests! Meaning clicking the like button wasn't sending a request to the server.
👨🏿💻 The Energy Man: This will help me narrow down the problem. I'm now going to investigate why aren't there any requests being sent.
Preventing Bugs
We have explored how to identify and deal with various bugs, this section will explore prevention methods.
Content: The content of an element is the information that is enclosed between the start and end tags of the element. For example, the content of a paragraph element <p> might be text, images, or other elements.
End tag: The end tag is the closing tag that marks the end of the element. It consists of the element name preceded by a forward slash, such as </p>.
Some HTML elements, such as images and line breaks, do not have a closing tag, in which case the start tag is written with a forward slash at the end, like <img src="example.jpg" />.
In addition to these basic components, HTML tags can also include attributes. These are used to provide additional information about an element, such as its size, color, or link destination. Attributes are included within the opening tag and are separated from the element name by a space.
Attributes: There are many nations that live in this planet and they use a system of attributes to identify each
- ids and classes
Additional Info
z-index
children and hierarchy
Pseudo Elements
Pseudo elements are also members of the HTML tribe. They are used to style specific parts of an element without having to add extra markup. Pseudo elements are indicated by a double colon (::) preceding the name of the element.
For example, the ::before and ::after pseudo elements are commonly used to add content before or after an element's content. They are often used for decorative purposes, such as adding icons or shapes to a design.
Browser support for pseudo elements varies depending on the browser and version. Most modern browsers support the commonly used pseudo elements, but some older browsers may not support them. It's important to test your code on different browsers and versions to ensure compatibility.
Overall, pseudo elements are a powerful tool for web developers and designers to create unique and engaging designs. By using pseudo elements, designers can add depth, texture, and personality to their designs without having to add extra markup to the HTML code.
The Box Model
Imagine each element on a web page as a Tetris block, with different shapes and sizes. Each block has its own width and height, just like the elements on a web page.
The content inside each block is like the colored tiles in Tetris, which can be arranged in different patterns. The padding is like the empty space around the tiles, which helps to separate them from other blocks.
The border is like the outline of each block, which can be thin or thick, and can have different colors or styles. Finally, the margin is like the empty space between blocks, which helps to create a visual separation between them.
Just like in Tetris, the size and position of each block on a web page can affect the overall layout and appearance. By understanding how the different properties of each block work together, you can create a well-designed and visually appealing web page, just like how different Tetris blocks can be arranged to create a perfect fit.
Destroying The DOM
Our team of scouts has intercepted the messages and figured out the bug’s plans to attack Renderland. The Box Model is one of Renderland’s core weaknesses as it controls how pages are rendered and how much space each element take.
There are a couple of reasons why we could end up with an infected DOM, therefore worsening the user experience on a website.
Layouts
Compatibility
To avoid cross-compatibility issues, it's important to test your web pages on different browsers and devices, use standardized HTML, CSS, and JavaScript code, and implement accessibility features to ensure that your content is accessible to everyone.
cross-browser implementations (engines and parsing)
Browser inconsistencies: Browsers may interpret HTML code differently, leading to differences in the layout, styling, or behavior of web pages.
JavaScript compatibility: JavaScript code may not work the same way across different browsers and devices, leading to issues with functionality.
CSS compatibility: CSS code may not be supported or may be interpreted differently by different browsers, leading to differences in styling and layout.
Video and audio compatibility: Different browsers and devices may support different video and audio formats, leading to issues with multimedia content.
Accessibility: Different browsers and devices may have different accessibility features, leading to differences in how users with disabilities can access and interact with web content.
Responsiveness
Different screen sizes: Web pages can appear differently on different screen sizes and resolutions, making it important to design pages with responsiveness in mind.
Responsive web design is the practice of creating web pages that adapt to different device sizes and resolutions. However, inconsistencies in browser rendering and poorly written CSS code can cause layout bugs such as elements not scaling or adapting properly on different devices.
Syntax
Resources
- Font rendering: Fonts can be rendered differently on different devices, leading to differences in the appearance of text on web pages.
Defending The DOM - Second Act
"They may take our lives, but they'll never take our freedom!!!" - William Wallace
The Elements Tab
Modifying Elements
Element Options
Element State
Break On Element
Screenshots of nodes
Yes, there are HTML coding standards that are widely used by web developers to ensure consistent and high-quality HTML code. Here are some examples:
W3C HTML Standards: The World Wide Web Consortium (W3C) provides standards and guidelines for HTML that ensure interoperability across different browsers and devices. These standards are widely used by web developers.
HTML5 Boilerplate: HTML5 Boilerplate is a popular open-source project that provides a set of HTML, CSS, and JavaScript templates for creating web pages. It follows best practices and coding standards to ensure consistent and high-quality code.
Google HTML/CSS Style Guide: Google provides a style guide for HTML and CSS that outlines best practices and coding standards for creating web pages. This guide is used by many developers to ensure consistent and high-quality code.
Airbnb CSS / Sass Styleguide: This is a comprehensive guide for CSS and Sass, that outlines how to write scalable and maintainable CSS code, including naming conventions and coding standards.
Bootstrap: Bootstrap is a popular open-source framework for creating responsive web pages. It provides a set of HTML, CSS, and JavaScript components that follow best practices and coding standards.
By following these coding standards, web developers can create consistent and high-quality HTML code that is easy to read, maintain and update.
Miscellaneous Tips
BEM or SaaS
Static Site Generator