DEV Community: Kelvin Duobu

How does a webpage get to a user?

Kelvin Duobu — Thu, 24 Aug 2023 08:40:20 +0000

Many things happen between the time a web page is requested and the time it loads completely in your browse.

• Client Request:

This process begins when the user enters a URL in the browser. This sends a request from the users device to the server that hosts the page that has been requested. This request is sent through the Hypertext Transfer Protocol.

• Domain Name System:

For the user to efficiently communicate with the server the domain name of the user is translated into an IP address and this process is known as the DNS Resolution. The IP address is the address or location of where the webpage can be found. Once the IP address has been created, the user is able to establish a connection with the web server.

• Server Processing:

The server receives the request and begins processing it. This processing involves making queries, running scripts or accessing resources needed to generate the requested page.

• Server Responds:
Once the server is done processing, it returns a response to the user. It can return numerous responses such as error responses or successful responses. If the requested page does not exist anymore the server responds with a 404 error (Not found), or if the page has been moved temporarily it returns a 302 and if permanently returns a 301. If there are no errors, the server will respond successfully with a 200, which means OK and the page will be rendered.

• Browser Renders Page:

As the browser receives the response, it begins to render the requested page. It receives the HTML file and begins rendering along the CSS and JavaScript files. These are styles and scripts used to display the webpage as intended by the website's design.

From the client request to server processing, and from DNS resolution to browser rendering, each stage plays a crucial role in delivering the web content we access every day.

Parts of a Browser

Kelvin Duobu — Wed, 23 Aug 2023 11:01:46 +0000

Web browsers have become a very useful tool in our digital lives, enabling us to access and interact with the information available on the Internet. In this article, we will delve into the essential parts of a web browser and uncover how they collaborate to provide a seamless browsing experience.

• User Interface (UI)
The user interface is the graphical representation of the browser that users interact with. It includes components like the address bar, navigation buttons, bookmarks, and the settings menu. The UI is designed to be user-friendly, allowing users to navigate the web easily.

• Address Bar
The address bar, also known as the URL bar, is where users enter the web addresses of the websites they want to visit.

• Tabs and Windows
Tabs allow users to open multiple web pages within a single browser window. Tabs make multitasking more efficient, as users can switch between different websites without opening multiple browser windows.

• Rendering Engine
The rendering engine is the heart of a web browser, responsible for displaying the content of web pages. Different browsers use different rendering engines. The rendering engine renders HTML, CSS, and JavaScript to create the visual representation of a webpage. Some examples of rendering engines are Blink (Google Chrome and Microsoft Edge), Gecko (Firefox), WebKit (Safari) and Trident (Internet Explorer).

• Browser Engine
The browser engine, also known as the layout engine, coordinates with the rendering engine, user interface, and other components. It processes requests from the rendering engine to display web content in the browser window. For instance, the Safari browser uses the Webkit engine, Google uses blink and Firefox uses the Gecko engine.

• JavaScript Engine
JavaScript is a powerful scripting language used to create interactive and dynamic web content. The JavaScript engine interprets and executes JavaScript code present on web pages. This enables features like form validation, animations, and real-time updates. An example of a JavaScript engine is v8 which is capable of running JS scripts, it powers Chrome, NodeJS, Deno and many others.

• Extensions and Add-ons
Extensions and add-ons enhance a browser's functionality by adding features and customizations. Extensions are typically built using HTML, CSS, and JavaScript, allowing developers to tailor the browsing experience to their preferences. For example, an Ad Block extension on chrome blocks ads on websites to make the users experience better.

• Networking
Browsers communicate with web servers over the internet through Transmission Control Protocol/ Internet Protocol to fetch web content. The networking component handles tasks such as establishing connections, sending requests, and receiving responses. It plays a crucial role in loading web pages quickly and efficiently.

Web browsers are software that brings the internet to our fingertips. They involve the collaboration of various components, each serving a specific purpose that is to provide a seamless browsing experience.

What are HTTP status codes?

Kelvin Duobu — Sun, 13 Aug 2023 14:11:42 +0000

Status codes are messages a website's server sends to the browser or system to indicate whether or not a request has been fulfilled.
Categories of status codes:

• Informational responses (100 – 103): They are messages that alert the user to wait for a final response when the request is processing.

• Successful responses (200 – 207): This category of status codes indicates the action requested by the client was received, understood, and accepted.

• Network messages (300 – 308): These messages indicate that the requested content has been moved and will require further action to complete the request.

• Client side error responses (400 – 499): They are messages that indicate an error caused by the clients input.

• Server side error responses (500 – 599): They are messages that indicate that the server which the client is trying to access has a problem.

How a Browser renders a page for a user

Kelvin Duobu — Fri, 11 Aug 2023 11:35:39 +0000

In this article I explain the steps your browser takes to convert HTML, CSS, and JavaScript into a working website you can interact with.

• Receiving the HTML document and Constructing the DOM:

• Parsing The HTML
In this step the browser receives the HTML file and changes its format into a readable form for the user to understand.

<html>

<head>
    <script src="index.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div>
        <p>Sample 1</p>
        <p><span class="text">Sample 2</span></p>
    </div>
</body>

</html>

• Fetching External Files:

    <script src="index.js"></script>
    <link rel="stylesheet" href="style.css">

• Applying CSS:

body {
    font-size: 5px;
}

p {
    font-weight: bolder;
}

.text {
    color: red;
}

CSS has something called the cascade. The cascade is how the browser determines what styles are applied to an element.
This is important because the browser has to recursively go through the CSS tree structure and determine the styles that affect a particular element.

• The Render Tree:

• Layout:

• Painting:

• JavaScript:
Most modern websites contain JavaScript now so the browser will have to fetch its files and execute it after rendering the page. JavaScript adds interactivity to the page to enhance user experience. It can trigger animations and fetch data. JavaScript can also remove and add elements from the DOM tree, and you may modify the CSSOM properties of an element via JavaScript as well.

In conclusion, the process of how a browser renders a webpage is complex, involving different components within the browser. From parsing and constructing the DOM to applying CSS styles, calculating layouts, and executing JavaScript, each step plays a vital role in transforming raw code into the visually appealing and interactive web pages we interact with daily

Semantics Tags in HTML

Kelvin Duobu — Wed, 09 Aug 2023 18:48:07 +0000

What are HTML Semantics?

HTML semantics refer to the practice of using HTML tags in a way that conveys meaningful information about the content they enclose. Semantic HTML emphasizes on providing structure and context to a website. By using the right semantic tags, developers can better describe the making it easy for both humans and machines to understand the content's significance.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article>- Clearly defines its content.

Why do we use them?

• Code Readability:
Semantic HTML enhances the readability and maintainability of code. The use of semantic tags in our code allows our code to make more sense and as our project grows, it helps us orient ourselves.
• Makes our site more accessible:
Semantic HTML tags have imbedded accessibility constructs that enable users with disabilities to make use assistive technologies such as screen readers and screen magnifiers.
• Content Organization:
Semantic HTML helps in organizing the content of the site in a meaningful order with the use of appropriate tags. Developers can structure the content hierarchically, making it easier for users to grasp information

HTML Semantic elements

Tags	Explanation
article	The element specifies independent, self-contained content.
nav	The element defines a set of navigation links.
aside	The element defines some content aside from the main content it is placed in (like a sidebar).
section	It represents the section of the document.
details	It specifies the tag for additional details.
header	The element represents a container for introductory content or a set of navigational links.
footer	The element defines a footer for a document or section
main	This specifies the main page content and should be unique
summary	This specifies a header for the element.
mark	This specifies the text that is highlighted.

Examples and when they are used

• Article:

<body>
    <article>
        <h1>Article Title</h1>
        <p>This is the content of the article.</p>
        <p>It can have multiple paragraphs and other elements.</p>
    </article>
</body>

The element is used to explain a self-contained piece of content, like a blog post or news article.

• Header and Nav:

<body>
    <header>
        <h1>Website Title</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>

The element is used to define the header section of a webpage, typically containing the site's title, logo, and main navigation and the element represents a navigation menu and contains links to different sections or pages of a website.

• Aside:

<body>
    <aside>
        <h2>Related Articles</h2>
        <ul>
            <li><a href="/article1">Article 1</a></li>
            <li><a href="/article1">Article 2</a></li>
        </ul>
    </aside>
</body>

The element is used for content that is not related to the main content but provides some information.

• Details and Summary:

<body>
    <details>
        <summary>Click to expand</summary>
        <p>Hidden content revealed when the details are expanded.</p>
    </details>
</body>

This element allows us to create accordions. It's particularly useful for displaying a list of items, conserving screen space and providing a neat way to organize and present information.

• Footer:

    <p>Contact us at contact@example.com</p>
    <nav>
        <ul>
            <li><a href="/privacy">privacy Policy</a></li>
            <li><a href="/terms">Terms of Service</a></li>
        </ul>
    </nav>
</footer>

The element represents the footer section of a webpage, typically containing contact information, copyright notices, and secondary navigation.

• Main:

    <main>
        <h1>Main Content</h1>
        <p>This is the main content of the webpage.</p>
    </main>
</body>

The element is used to define the main content area of a webpage, excluding headers, footers, and sidebars. There can only be one main element on the page.

Sample layout:

<html>

<head>
    <title>Semantic HTML layout</title>
</head>

<body>

    <header>

    </header>

    <main>

    </main>

    <footer>

    </footer>

</body>

</html>

By using the appropriate semantic elements, web developers can create more meaningful and well-organized documents for both humans and assistive technologies.