Jason!
Again, thank you so much for participating in my little CSS contest.
I feel honored and flattered. Doubly flattered because, in addition to your version, you wrote two long articles about it.
I knew I would learn something from you again. I'm talking about the facades.
In my defense, I say that I wasn't used to embedding YouTube videos because I always hated that bloated software cluttering up my web pages. I used to make a link-image that opens the video in a new page. The same method I do with Google Maps. It's not just the bloated software, it's the random content that appears at the end of the video.
Now, the sad part...
I'm used to your low blows in your replies, but this time you've gone too far. I think you embarrassed yourself.
First, this is a *CSS contest*. It is not about who hosts better or who loads fonts better.
My article clearly states that big websites should serve their own fonts. I chose Google fonts to keep things simple and homogeneous versions.
Although I appreciate your version towards people with special needs (and other techniques), it is disqualified for comparison, because you made a simpler version, with less fonts, less colors, less variation of font size, less variation of details... Look how the "save" icon changes by window width in the replica (and not in your version):
https://storage.googleapis.com/jblate/medium/replica/jk/special-icons.png
You despised the green light from the W3C validator. For receiving the green light, I had to write more code.
The contest challenge was to create a REPLICA (in appearance) with the best code.
Which means maintaining the appearance (the good and bad parts) of the Medium article page. You chose not to make a replica and started criticizing my version, which is indeed a replica.
Now, since you have a better performance because of facades and preloads, I created another version of the replica: no custom fonts and no YouTube videos (the iframes remain):
https://storage.googleapis.com/jblate/medium/replica/replica-no-youtube-no-custom-font.html
And Lighthouse (mobile) gave it 98%, 3 times in a row.
Laugh is that I tried (mobile) my PRODUCTION version and it received 98% too ;)
Then I tried your version 3 times in a row (mobile): 68%, 83%, 82%
I think the top value is the most accurate. Low value shall be due to slow traffic and/or busy servers.
My versions are alive for anyone to test them. Anyway, for the experienced ones, it is just looking at the code to realize that my versions are fast enough. Anyway, just a [CTRL] refresh proves it.
My article {
The monolithic version (one HTML file embedding all CSS and JS) of the replica weights 90 kB — without images. The embedded CSS includes small icons and the file font-face.css. This version was created for study purposes only.
}
You should have not even mentioned the monolithic version. It only exists for the easy UNDERSTANDING of the whole weight (cacheable and not). You are clearly misleading the readers. Like you have done with your table with the size of the files.
It is easy to realize how you "confused" yourself with the numbers. I am going to help you.
I saved your version and my version (the recent one, without custom fonts - this is OK because your fonts are just two lines in the HTML).
I found this:
My replica (without custom fonts & without embedded icons):
37.2 kB replica-no-youtube-no-custom-font.html
6.8 kB unified.js (NOT minified, 0.8 kB is remark lines)
11.1 kB no-youtube-no-custom-font.css (32.0 kB - 20.9 kB of embedded icons; not true code)
========
55.1 kB TOTAL CODE (DOESN'T INCLUDE EMBEDDED ICONS)
Your (JK) *simpler* version:
26.2 kB template.html
17.9 kB tedium.screen.css
3,5 kB tedium.js
33.6 kB endscreen.js (*MINIFIED* HIDDEN FILE)
=======
81.2 Kb TOTAL CODE
So, your code for a *simpler version* is 60% bigger than mine? HAHAHAHAHAHA!
##################
IMPORTANT EDIT:
I have checked again the file “endscreen.js”, it seems to be related to YouTube only.
I must have made a mistake the first time I’ve checked it.
Removing that file from the count, the TOTAL CODE of Jason Knight’s *SIMPLER* version is:
47.6 kB
(13.5% smaller than mine)
Please ignore the next paragraph.
##################
Besides "forgetting" to count endscreen.js and telling smaller weight for the other files, you used JS for fundamental parts (the icons at least) of your webpage. I have used JS only for the tooltips. The replica should be built with HTML and CSS, not JS.
How embarrassing!
Another demoralization for you. Aren't you the guy that always tell that each time "style" is written inside an HTML tag it is the living proof that the author is an idiot?
<header style="--avatar:url(../images/avatars/gonzo.png);">
How is that you say? "... has NONE business in the markup". HAHAHAHAHAHAHA!
How embarrassing!
Yes, I have used a few line breaks and white spaces for layout. It is very practical, easy to write/read/maintain.
But, your venerable wisdom qualifies that (and everything else that I do) as little/stupid/ignorant/garbish/crap/place-here-another-of-your-of-insults-that-clearly-expresses-how-above-us-you-live.
Now I wonder how would you "qualify" this flaw that you made in your "shorter" and "perfect" version:
https://storage.googleapis.com/jblate/medium/replica/jk/tooltips.png
I have much more to tell, but you don't deserve my attention anymore.
You are not a person to be taken seriously.
I will not reply to you anymore.
Anyway, I really hope you get healthy.
