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
Red - Header
- Username, timestamp, or anything else that's on the top section of a post.Pink - Avatar
- The profile pictureGreen - Body
- Anything that makes up the middle of the post that isn't the main post text. (#Tags, and HTML needed to structure the body)Sky blue - Body text
- The actual post content.Dark blue - Footer
- Any text or buttons at the bottom of a post, like the share/like buttons.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
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)
I definitely think this is true. Nonsense like create-react-app and the absurd idea that when I code at home it should be a side-hustle or to up my employability means that a lot of people instinctively reach for React and CSS-in-JS for everything, even tiny throwaway projects that don't need any tooling.
Time was, you could poke around the source of any website you wanted and learn something, and then open Notepad and directly apply it. And most of the changes that have stopped that working so well have been necessary, but this one wasn't.
And like, sure, you can entirely do a one-evening project in React if you really want to. But it massively raises the barrier for entry — literally any computer comes with a text editor and a web browser with excellent debugging tools, so you can play around with the really basic stuff without opening the command line once. Install FileZilla or whatever and now you can share it with the world and start to play with things the browser won't let you do from a file. You can build anything, in theory, with only very basic software and without learning anything that isn't directly relevant to your goals.
But try getting the tech community to admit that. Oh no, we'll tell you the first thing you'll need to do is install VS Code and then you'll need to type some mysterious shit into the terminal so it can install hundreds of megabytes of bewildering Modern™️ garbage and then you can start writing your cute little web project in a state-driven way that's markedly harder to think about than the normal event-driven model browsers actually use.
Don't get me wrong, the tooling we've got for web development now is amazing sufficient, but I really think the culture around it has erected a massive and pointless wall between the idly curious and their first little projects, and that's a shame because those fun little projects are probably my favourite bit of the internet.
It's probably why i stopped doing web projects in my spare time. Just getting modern toolsets running was taking me the whole day when i was in the mood for Creating Stuff™️. Back in my early days i literally just messed around in HTML and JS and did weird stuff like text-only turn based resource management game with JS inputs, buttons, textarea for output, and It Just Worked. And it was so much fun.
It takes me more time to get into modern tools than it took me to create that one silly thing years ago. And then i'm all out of coding mood, only filled with regret that i wasted my saturday on such bullshit.
It makes me think. I should really ditch trying to understand "frameworks", start a new project with zero files and just focus on making something that Just Works, once again.
P.S.: It also brings me back to i time when i created minesweeper clone at my first job, on PC with no internet access (for security reasons), with just a note with an example of shuffling an array in JS with me. Literally searched online for it at home, just to bring it with me, because my weird idea for board generation depended on it and i couldn't search during work.
