Just Code
Web Development Essentials: Modularity, Client-Side Browsers, and Atomic Design Patterns

Photo by Christopher Gower on Unsplash

Web Development Essentials: Modularity, Client-Side Browsers, and Atomic Design Patterns

Devrath Rana's photo
Devrath Rana
·

5 min read

How Browsers Work

What Does a Browser Do?

A browser’s primary responsibilities include:

  1. DNS Resolution: Translating human-readable domain names into IP addresses.

  2. HTTP Exchange: Communicating with web servers using the HTTP protocol to request and receive web content.

  3. Rendering: Interpreting HTML, CSS, and JavaScript to display the content visually on the user’s screen.

This process repeats as the user navigates through various web pages.

Security Note: Patching a vulnerability on one browser does not ensure safety across all browsers. Never encourage users to use outdated browsers or actively support them. Even if you’ve taken all necessary precautions, other web developers might not have. Always encourage users to use the latest supported version of a major browser.

Resilient Web Design

  1. Embrace the Unknown Unknowns: Prepare for unforeseen issues.

  2. Maintain Core Functions: Ensure core functions work even with browser compatibility issues.

  3. Start Small and Simple: Begin with a design that covers all core features before expanding.

Dealing with Files

Browsers, web servers, and programming languages handle spaces inconsistently. Spaces in filenames can be problematic; some systems may replace them with "%20", breaking links. It’s better to separate words with hyphens (e.g., my-file.html rather than my_file.html). Google treats hyphens as word separators, but not underscores.

Modularity vs. Single Files

  1. Performance

    1. Reduce Page Load Time: Repeated CSS and JS files can be cached, reducing the need to download them again.

    2. Reusable Code: Importing common scripts and stylesheets makes code reusable across multiple web pages.

    3. Sustainable Development: Reduces the number of files, making the website more energy-efficient.

  2. Management

    1. Consistency: Writing reusable code in common files simplifies making consistent design changes across the website. For example, updating the font family for all <h1> elements can be done in a single CSS file.

Why browser are called client side or user agents? Types of user agents.

Browsers are called "clients" because they request resources from servers. The term "client-side" refers to technologies like HTML, CSS, and JavaScript that operate within the browser. The browser acts as a client, making requests with the server responding to those requests.

User Agents: Any software application that interprets web content. Examples include:

  1. Screen Readers: Assistive technologies for the visually impaired. But they are reliant on web developers to write code with higher accessibility(A11y) like marking up content so that the structure of a document is logical and consistent, and that the semantics of the content are accurate. As responsible web designers and developers, we should all share Tim Berners-Lee's vision that “this is for everyone“.

  2. Non-Human User Agents: Search engine bots.

CSS as a Declarative Language

CSS is declarative, meaning you specify what you want rather than how to achieve it. HTML semantic tags come with default styling.

Atomic Design Pattern

Organizing CSS generally follows a hierarchy where global rules come first, followed by more specific rules. For example we have parent element <section> with an ID “widget” so we will first try to define styling rules for this element so that all it's child elements can inherit them and reduce css code.

Atomic Design Components

  • Atoms: Basic HTML elements like form labels, inputs, and buttons that can’t be broken down any further without ceasing to be functional can be regarded as atoms.

  • Molecules: Simple groups of UI elements functioning together, like a search form composed of a label, input, and button. Simple UI components help developers to follow single responsibility principle - “do one thing and do it well”. Enabling easier testing, encourages reusability, and promotes consistency throughout the interface.

  • Organisms: Complex UI components made of groups of molecules and/or atoms forming different sections of web page, such as a header or footer, product listing organism or product detail organism.

  • Templates: Page-level objects that place components into a layout, focusing on the content structure rather than the final content. For example we have homepage template that displays all the necessary page components functioning together, which provides context for these relatively abstract molecules and organisms.

  • Pages: Specific instances of templates with real content, demonstrating the final UI and testing the design system’s resilience. Pages also provide a place to articulate variations in templates, which is crucial for establishing robust and reliant design systems.

    Here are just a few examples of template variations:

    1. A user has one item in their shopping cart and another user has ten items in their cart.

    2. A web app’s dashboard typically shows recent activity, but that section is suppressed for first-time users.

    3. One article headline might be 40 characters long, while another article headline might be 340 characters long.

    4. Users with administrative privileges might see additional buttons and options on their dashboard compared to users who aren’t admins.

In all of these examples, the underlying templates are the same, but the user interfaces change to reflect the dynamic nature of the content. These variations directly influence how the underlying molecules, organisms, and templates are constructed. Therefore, creating pages that account for these variations helps us create more resilient design systems.

Conclusion

  • Atoms: Fundamental UI elements.

  • Molecules: Collections of atoms forming simple UI components.

  • Organisms: Complex components forming sections of an interface.

  • Templates: Layouts demonstrating the content structure.

  • Pages: Real content applied to templates, showcasing final UI and testing design variations.

Atomic design allows designers to move fluidly between abstract concepts and concrete implementations, ensuring a robust and consistent user experience.

You can further read on such concepts here - https://developer.mozilla.org/en-US/curriculum/core/web-standards/

Web Development