A Medium Page Rewrite Challenge : Part 2, The Markup
--
In Part 1 I compared my version of the page rewrite to Joana Borges Late’s entry in her little competition idea. Now it’s time to actually talk about the code differences, where I think her approach was flawed, and why I think mine’s better.
Note this can seem subjective, but every choice I’ve made is backed by legitimate reasons and MDN’s interpretation (or should we say translation) of the specification.
Break It Down
As I said last article, my markup is half the size… but that’s only a vague indicator of something amiss. The reason smaller markup is advantageous is that NO other files — even if you use HTTP push or HTML preload — can start downloading until the HTML is complete. Thus if you stuff anything extra in there, you’re delaying parallel downloading and thus delaying the overall page load. This is why monolithic HTML where you stuff everything in the markup is dumbass. It’s why using classes when you don’t need to much less dozens of presentational classes is dumbass… yeah, yeah, I’ve said all that before.
Thus it’s a balancing act between the number of separate files, and that initial HTML load delay holding up everything else.
So let’s compare her markup to mine and see what’s going on here.
Document <head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>3 Videos My Grandma Recommends To You | by Kermit | Mar, 2023 | Tedium</title>
<meta name="description" content="This webpage is a static replica of an imaginary Medium article.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/favicon.png">
<style>
@import url("https://fonts.googleapis.com/css2?family=Cardo:wght@400&family=Crimson+Text:ital,wght@0,400;0,700;1,400;1,700&family=Lato:wght@400;700&family=Rubik:wght@400;500;600;700&display=swap");
</style>
<link rel="stylesheet" href="unified.css">
</head>
<body>Clean, simple. Adequate for a demo. BUT… the title tag is stuffed with nonsense. <title> should be in the format
<title>[pageTitle -]SiteTitle</title>Because that’s the most useful way to structure it. You don’t put verticle breaks in there, you don’t put excess meta data in there.
