Search for a command to run...
I am a Journalist-turned-Software Engineer. I love coding and the associated grind of learning every day. A firm believer in social learning, I owe my dev career to all the tech content creators I have learned from. This is my contribution back to the community.
No comments yet. Be the first to comment.
📖 Introduction In modern AI applications, communication between clients and tools isn’t always as simple as calling an API. The Model Context Protocol (MCP) provides a standardized way for clients to exchange information, invoke tools, and maintain ...
If you’re curious about how to build an intelligent agent using Model Context Protocol (MCP), you’re in the right place. In this post, I’ll walk you through how to: Create an MCP Server using FastMCP Expose a tool that calculates BMI Build a Clien...
In our previous tutorial, we built a restaurant customer support chatbot using OpenAI's Agents SDK. In this follow-up, we’ll explore guardrails—a critical feature that enhances AI chatbot safety and reliability. What Are Guardrails in AI Agents? Guar...
Video https://www.youtube.com/watch?v=UPBMkFSJdBI The Problem at Hand Uber's data platform processes approximately 1.2 million interactive queries monthly, with 36% of these coming from the operations organization. This group—comprising engineers...
Video https://www.youtube.com/watch?v=FgRGwnpd2HY Google's recent white paper on "Agents" has created quite a buzz. The paper explores the concept of AI agents and delves into their architecture and potential. Let's break down what this white paper...
I am Zahiruddin Tavargere (Zahere). A social-learner, here to learn, share and grow with the tech community.
74 posts
I am Zahiruddin Tavargere (Zahere). A firm believer in social learning, I owe my dev career to all the tech content creators I have learned from - this is my contribution back to the community.
For years, I thought the only CSS optimization technique one can do was to "minify" the files.
How wrong was I!
I came across this term called "Lean CSS" in an articlethe other day - and the first word that came to my mind, even before I read the article, was minification.
Turns out, there's more to CSS optimization than just reducing the file size.
The secret to lean CSS and improved website performance is optimizing for “selectors”
If you know how and where to place the selector - you will see tremendous performance optimization.
However, to get the placement right, one needs to understand how selectors work and how browsers parse CSS selectors.
A selector determines which element(s) a CSS rule applies to
applies to the entire document
applies a margin of all 25 px to all p elements
Any element in the document with ID value header will receive a padding of 25px
This rule will match every element in the document with a class of container and give it a color of gray
Matches all anchor elements that have an href attribute that contains the string w3schools.com
You can work with selectors only if you understand the relationship between the elements you are working on.
CSS combinators define relations between elements of a document. In CSS3, they come in three variants according to the specification:
• Descendant combinator: a descendant combinator describes a descendant relationship between two elements. A descendant combinator is made of the whitespace sign
body p
• Child combinator: a child combinator describes a childhood relationship between two elements. This combinator is made of the > sign.
body > p
• Sibling combinator: there are two different sibling combinators, the adjacent sibling combinator and the general sibling combinator. They are noted with the + and˜signs respectively.
p + *
We know the type of selectors and combinators and we understand how they can affect a change in the entire document or a specific element. But how does it affect the performance of the webpage?
To understand this you have to know how CSS works in the browser.
The Document Object Model, or DOM, is a data structure in the browser. It is a tree of objects that represent the elements in the document and their structure and hierarchy. This tree is composed of DOM nodes. The DOM is created by reading the HTML markup, tokenizing it, parsing it, and finally creating the object hierarchy that makes up the DOM.
Couldn't wrap your head around that?
Let me explain with an illustration.
In this step, the browser resolves any conflicts between the different rules and declarations applied to the same element by the importance of specificity.
Here final processed values are given to all the styles
It's during the creation of CSS object model selector placement that plays an important role.
A selector to the furthest right is the most important factor for performance
#menu ul li a #item {…}
The browser first checks for #item, then a, then li, then ul, and then #menu. Is this efficient?
No. continue reading to understand why.
This is inefficient because the browser found the element it was after on the first check, but was then forced to continue looking through the document for all the additional selectors.
One of the biggest reasons for slow rendering efficiency on websites today is the poor use of selectors.
But if you can get your head around the way browsers read CSS, you can improve your load times.
If you found this article useful, follow me on twitter for more such content.
Please subscribe to this blog for weekly articles on Digital Experiences, UI/UX, and Web Development.
Resources:
https://stackoverflow.com/questions/12279544/which-css-selectors-or-rules-can-significantly-affect-front-end-layout-renderi/
https://www.section.io/engineering-education/how-css-works-behind-the-scenes/
http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing