Jun 13
tu fala! igual com a taylor… minha musica fav é cssom mas pra show??? meio fora do tom
1
1
124
Jun 9
Browser doesn’t just “show HTML”
It does this 👇
HTML → DOM Tree
CSS → CSSOM
DOM CSSOM → Render Tree
That’s what we actually see 👀
1
3
Jun 9
Day 26 locked in @sheryians_ cohort 3.0
Just unlocked the DOM Manipulation
The frontend addiction is real
Finally taking control directly through JavaScript.
From the CSSOM to the Render Tree, understanding how the browser paints the UI changes everything.
#sheryians #cohort3
19
Day 24 | @sheryians_ - Introduction to DOM, which helps to manipulate HTML and importance in adding interactivity to websites , got to know different terminologies such as DOM, BOM ,CSSOM .
#Sheryians #WebDevelopment #LearningInPublic #LearningJourney #Restart #100DaysOfCoding
1
6
JavaScript is a scripting language. It should only be responsible for mutating the DOM/CSSOM, and dispatching HTTP requests from the client.
Also, languages aren't 'backend' or 'frontend' necessarily, strictly. Classifying a language that way is reductionist and sophomoric.
2
5
2,120
New Blog: How a Browser Works 🌐
@ChaiCodeHQ @Hiteshdotcom @piyushgarg_dev @nirudhuuu
Link: swasti.hashnode.dev/how-a-br…
Learned about DOM, CSSOM, parsing, reflow, painting & how browsers convert code into actual pixels on screen 🚀
#chaicode #chaiaurcode #chaicohort
3
48
May 30
sooo, the gist is this:
curve maps distance → magnitude through an eased falloff. that's through a defined spread radius, and perf comes from doing all the math in pre-allocated typed arrays (no measure on move)
we only touch the CSSOM when values actually change
1
3
242
A browser does much more than show HTML.
It builds the page step by step.
When you open a website, the browser starts a rendering pipeline.
Simplified flow:
1. Downloads HTML
2. Builds the DOM tree
3. Downloads CSS
4. Builds the CSSOM tree
5. Combines DOM CSSOM
1
3
16
May 19
【テックブログ更新⚡️】
ブラウザレンダリングの流れを、できるだけ噛み砕いて整理しています！
DOM / CSSOM / Layout / Paint / Compositeなど、「なんとなく聞いたことある」を繋げながら、パフォーマンス改善の基礎もまとめています🌸
zenn.dev/gemcook/articles/0c…
#gemcook
1
15
369
May 16
Launched DesignMD 🚀
Extracts frontend patterns from live websites using DOM/CSSOM analysis.
Tested on Stripe, Apple, GitHub, Linear, Airbnb, and Vercel.
producthunt.com/products/des…
3
43
the 30MB vs Chrome's GB sounds great until your test passes on Obscura and breaks in real Chrome because of subtle DOM/CSSOM differences. for real browser testing, parity matters more than footprint. we built Assrt to drive real Chrome with rubric-scored flows so parity bugs surface before users hit them, assrt.ai/r/4pknhgt7 written with ai
2
1,652
May 16
Launched DesignMD 🚀
Extracts frontend patterns from live websites using DOM/CSSOM analysis.
Tested on Stripe, Apple, GitHub, Linear, Airbnb, and Vercel.
producthunt.com/products/des…
2
41
May 14
Launched DesignMD — a tool that extracts frontend patterns using DOM/CSSOM analysis.
Extracts:
• typography
• CSS variables
• spacing
• breakpoints
• interaction states
Tested on Stripe, Apple, GitHub, Linear, Airbnb, and Vercel.
producthunt.com/products/des…
3
5
229
May 4
The browser is a highly optimized runtime with a comprehensive rendering pipeline—covering HTML parsing to DOM creation, CSSOM and layout, painting, compositing, and a JavaScript engine featuring an event loop, an asynchronous model, and a security sandbox. It also standardizes networking, caching, and cross-platform distribution.
Building that entire stack from scratch is interesting from a systems perspective, but it is rarely practical.
The real challenge arises when developers remain at the framework level and do not internalize these fundamental primitives. Tools can boost productivity, but your limit is determined by how well you understand the underlying model.
2
246
May 2
4/10
Step 3: CSS Parsing → CSSOM Tree
CSS (external, internal, inline) is parsed into the CSS Object Model (CSSOM).
CSSOM is render-blocking, browser waits for it before painting. Rules cascade and compute final styles.
1
2
9
Tailwind CSS tip:
If you need to create separate entry points for generated CSS files (for example, if you have an internal route with a lot of custom utilities), do this:
global.css
```
@import "tailwindcss";
@source not "./internal";
```
internal.css
```
@import "tailwindcss" source(none);
@source "./internal";
```
Then import internal.css in your internal route.
This helped me reduce ~15 kB of CSS that was being added to the main site unnecessarily, which, in my experiments, affects not only network performance but also runtime rendering (probably due to increased CSSOM complexity and memory usage).
1
2
119
8,666
Apr 26
The browser starts with DNS lookup to get the IP from the domain. Then it does TCP handshake followed by TLS for secure connection. After that HTTP request goes to the server and gets the response back.
Browser then parses the HTML builds the DOM and CSSOM does layout and finally paints the page. JS execution can change things at any step.
This whole flow shows how layered the web stack really is.
2
1
11
376