I recently posted a rant about icon fonts. In the past, my strong opinions about such things have led people to call me opinionated and pedantic. The thing is, this isn't just a hobby to me. It's my craft.
This isn't just any old career path. It's something I believe in. It's something I'm passionate about. Why wouldn't I do it to the best of my ability?
There are a few topics in particular that I get really fired up about. When somebody just doesn't get these—or worse, doesn't care—that's when I get upset. But it's only because I care about the web.
USE LESS JAVASCRIPT!
This has got to be the single biggest issue with the current state of the web. There's HTML-in-JS, CSS-in-JS, React, Vue, Angular... It's absolutely fucking everywhere. JavaScript can and should be used to enhance a website, but a website should never rely on it.
If you must use JavaScript, can you use vanilla JS? It's really powerful nowadays.
If you love state-based UI, I get it! But there's an ever-growing list of anti-frameworks that give you the same benefits without the overhead of a massive dependency:
Write semantic HTML
Semantic HTML, or the lack thereof, is something I get particularly upset about. The fact is, you must always use the right element for the right purpose. This isn't me being pedantic. A website might look all right visually, but it can still be riddled with problems due to <div> soup. It matters.
If you need a paragraph, then for fuck's sake, use a <p>, not a <div>. The "p" literally stands for "paragraph"!
But why does it matter?
There are a number of reasons. I'd say the most important is accessibility, but there are others. Here's a short list from the MDN Web Docs about the importance of semantic HTML:
- Search engines will consider its contents as important keywords to influence the page's search rankings
- Screen readers can use it as a signpost to help visually impaired users navigate a page
- Finding blocks of meaningful code is significantly easier than searching though endless
divs- Suggests to the developer the type of data that will be populated
- Semantic naming mirrors proper custom element/component naming
You get all the proper functionality, accessibility, and SEO baked in, without having to re-implement it (often badly) using JavaScript. And it's not hard to do. You just need to ask yourself: what kind of data should this HTML element hold? And then make the most appropriate choice.
Here's a shorst list to get you started.
Keep your CSS sane
The web development community loves to give CSS a hard time—especially those who brown-nose JavaScript. They say it's "broken". They say it "doesn't scale". They complain about the cascade. These are all features, not bugs.
To make your life much easier, and perhaps even learn to love CSS, I highly recommend learning a maintainable methodology. There are a bunch out there, but CUBE CSS and MaintainableCSS are good places to start.
If you agree with the points I've made, and you crave a simpler web, my friend Chris Ferdinandi gave a fantastic talk called The Lean Web. I highly recommend it to all my developer friends. 💯