This is a repost from 2007-Dec-04 titled "How AJAX is like pepper." I wanted to freshen it up a bit. It's amazing how relevant it still is today.
Take It From The Top
In a recent post about How Do I Get Into Programming?, I mention the best way to learn web development was to focus on the "Trinity of the Web."
- HTML - Provide the structure of a document
- CSS - Provide the presentation of a document
Learn the basics of these three technologies...in that order. They are the building blocks of the Internet and they've lasted over 25 years so I'mma betting they will last another 10!
The good news is once you learn one of them, you'll be able to apply the concepts to their open-source counterparts.
You know that lag you get when you visit a site?
It's the Google Analytics loading in the background and sending data out for reports.
It's the jQuery on multiple pages because someone didn't use the slim build of the library.
It's the Ad Network script you added to your site so you can earn some extra money if someone clicked on an ad.
Oh, and it's the React framework in the background to provide a quick user experience while visiting your site.
Cue the splash screen with the "Loading..." message.
I keep referring back to this tweet from Zach Leatherman:
Which has a better First Meaningful Paint time?— Zach Leatherman (@zachleat) September 6, 2019
? a raw 8.5MB HTML file with the full text of every single one of my 27,506 tweets
? a client rendered React site with exactly one tweet on it
(Spoiler: @____lighthouse reports 8.5MB of HTML wins by about 200ms)
What does it mean?
It means the browser loaded an 8.5MB HTML file with 27,506 tweets faster than a client-rendered React site with exactly one tweet on it.
HTML wins again.
Google AMP Was On The Right Track
Without the extra crap, the page would load faster therefore making it a better experience for the user.
Which is what we all want, right?
So What's the Silver Bullet?
Well, for one, it's not a silver bullet. It's a collection of silver bullets.
1. Design with HTML
Think of HTML as a wireframe of your website and code as much as you can with simple HTML.
I know, I know, I can hear everyone saying, "<Framework> can help us with that." I can attest I'm just as guilty because I love Bootstrap for my websites.
If you absolutely have to, use a slimmed-down version of the framework/library. If there isn't one, try bundling and minifying the code with a Task Runner.
You'll thank yourself later (and so will your audience).
2. "Apply Lipstick to the Pig" with CSS
Once the HTML is done, you can easily apply CSS to your pages. Don't worry, it takes time to learn CSS. If you need assistance with learning CSS, I have a CSS Collection to help and, oh, make sure you check out the CSS Zen Garden. ;-)
While CSS frameworks do all of the heavy lifting for you, it's always good to understand how the 'C' (meaning Cascading) works in Style Sheets.
It's been proven.
Bottom line: keep it simple and use it with good judgment.
You'd be surprised what you can find with simple HTML and CSS.
What nudged me into updating this post from 2007 was the weekly ASP.NET Community Standup with Jon Galloway, Damian Edwards, David Fowler, and Stephen Halter.
One of the headings in the post recommends,
I'm with Jon on this one.