inbtwn

This is what I decided to do today I guess. Here's how much HTML your browser renders to make a single post on different websites. This is a long post and has a rant at the end (Don't Miss Out!)

Color codes

The first image for each site is the HTML as viewed in my browser's dev tools (inspect element). The second is an example post, where every element in the post has a translucent dark blue for a background color. When an element is "stacked" more, it will appear darker.

Cohost:

Since Cohost allows writing custom HTML, this could be much longer depending on the post. I only want to show what the website generates for a standard text post, though.

Tumblr:

Way more than a Cohost post for a similar post. Some of the extra elements come from the mouseover events that Tumblr has on all the buttons and avatar. They aren't the actual popups, they're just the elements that handle the mouse event and become the container for the popup.

Neocities:

Did you know neocities has a feed? When you sign up you can follow other people's websites so you can know when they update. It has a feature where you can post status updates like this. It's a bit bare bones, you can't reply to a comment on a status, only to the status itself. It's fine though since the main point of neocities is to be a web host, not a social media feed.

Twitter:

The avatar section alone is larger than the entire neocities post. Is this all necessary? No

Mastodon:

Nice. You probably can't read it from the image, but almost every element has a descriptive class name. It says (version 4) because the Mastodon software had an update recently, and my instance just switched to it. Apparently it's a pretty bad update for viewers that don't support javascript, as it doesn't have any fallbacks and will just display nothing at all.

Here's what they all look like in relation to eachother (from left to right: neocities, cohost, mastodon, tumblr, twitter):

Why is twitter a big guy

There are almost no professional web designers that write HTML by hand anymore. They use tools that have layers of abstraction that makes it easier to work with at large scales.

The HTML it outputs to your browser is not meant to be developed/looked at by anyone at that point. It's like a compiled program. It's optimized to a small size by giving everything classnames with corresponding CSS in the most efficient way possible, and becomes an unreadable mess in the process.

Here's a comparison to show what I mean. The HTML of a twitter post vs a mastodon post.

For the mastodon post I say ah yes splendid. this is the .status__content__text element because it is the element that contains the text content of a status. It is inside the .status__content element which is inside the .status element. Very cool! Computers

This is the text of the tweet because it's in this obfuscated tunnel of fuck in the .css-16my406 in the .css-1dbjc4n in the .css-1dbjc4n in the .css-1dbjc4n in the .css-1dbjc4n. i just wish i could have a Hang out with a Tibetan Monk Soda

This is the text of the tweet because it's in this obfuscated tunnel of fuck in the .css-16my406 in the .css-1dbjc4n in the .css-1dbjc4n in the .css-1dbjc4n in the .css-1dbjc4n. i just wish i could have a Hang out with a Tibetan Monk Soda

Who Cares If The HTML Is Ugly Just Close Your Eyes

True, most people don't see it, but anyone who's tried to make a userscript for twitter knows tfw. It's a pain in the ass to work with this, whatever selector you use to address a specific element that doesn't have an id WILL break your script after a site update. It also makes custom userstyles a fucking nightmare.

I think it also contributes to the general trend of 'black-box-ification' of technology where no one knows how anything we interact with on a daily basis works, or how to fix stuff when it breaks.

Like how they stopped putting schematics on the back of home appliances because there's a financial incentive to prevent people from knowing how to repair their possessions. (Or they have unserviceable microcontrollers inside)