HTML First; CSS Grid Complete; Validate Like A W3C Boss
I trust everyone had either an amenable U.S. holiday celebration or managed to avoid social media posts from those of us broadcasting our tales of food and drama.
My plans for de-screening went awry, and I ended up using the break from these Drops to start writing yet-another e-book on creating universally executable CLI tools with WebR.
I also ended up triaging some website theming issues in another context. This begat today’s Drop theme of — once more — performing an IRL “CSS reset” on how we approach web projects, to both keep things simple, and make web work fun again.
TL;DR
This is an AI-generated summary of today’s Drop.
The blog post begins by introducing the concept of “HTML First”, a set of principles designed to make building web software easier, faster, and more maintainable. It emphasizes the use of HTML’s default capabilities, simplicity, and the web’s View-Source affordance to make web programming more accessible to a wider audience. The goal is to reduce the cost of building software and the resources required for hiring. The HTML First approach encourages the use of vanilla approaches, HTML attributes for styling and behavior, and modern web browser standards such as Web Components.
The second section of the blog post discusses CSS Grid, a two-dimensional grid-based layout system that has become a standard for designing user interfaces. It highlights the advantages of CSS Grid over previous layout models, such as control over both rows and columns, and the ability to create complex layouts. The author recommends a “Complete Guide to CSS Grid” by Chris House as a practical resource for understanding and using CSS Grid elements.
The final section of the blog post introduces the World Wide Web Consortium (W3C) and its validation service. The author suggests using the W3C’s open-source code to validate HTML, and mentions the Nu HTML Checker as a reliable utility for finding HTML tag errors. The author also recommends a W3C Validation VS Code extension for those who use Microsoft’s software.
HTML First
Longtime Drop readers will know that my approach to web development is generally centered around simplicity, inclusivity, and leveraging the power of modern web browsers. This all starts with HTML.
HTML First is a set of principles designed to make building web software easier, faster, and more maintainable. It’s all about harnessing the default capabilities of modern web browsers, the extreme simplicity of HTML’s attribute syntax, and the web’s View-Source affordance. The main goal here is to widen the pool of people who can work on web software codebases, making web programming more accessible to a more significant number of humans. This is not only beneficial for individuals looking to break into the field, but also for organizations seeking to decrease the cost of building software and the resources required for hiring.
But what does it mean to adopt an HTML First approach? It’s about preferring vanilla approaches, using HTML attributes for styling and behavior, libraries that leverage HTML attributes, and relying on open, modern web browser standards such as Web Components. It’s about avoiding build steps, preferring naked HTML, and being “View-Source” (vs. DevTools⇒Inspect) friendly. Remember the early days of the web when you could “peek behind the curtains” and see the code responsible for any part of any web page? HTML First aims to bring back that transparency, making it easier for aspiring developers to learn and grow.
HTML First focuses on the simplicity and ease of understanding HTML, using it as the bedrock of web products. It’s not just about defining content and structure, but also setting styling and behaviors. This approach enables us to unlock the excitement of seeing a creation come together rapidly, transitioning smoothly between the text editor and the browser, with very few unexpected potholes or context switches.
One link inside HTML First that I especially appreciated was the one for the “Locality of Behaviour principle”.
CSS Grid Complete
Nerds of a certain age will remember the lengths we had to go through (“back in the day”) to get sites to look decent. We used transparent PNGs of varying dimensions to try to get content into proper positioning, relied on the (now shunned) “<center>” element far too much, and wore out our t, r and d keyboard letters whilst abusing “<table>” elements for fun and profit. Thankfully, kids today have it much easier.
If you’re not familiar with it, CSS Grid is a two-dimensional grid-based layout system that has become one of the de-facto ways we design user interfaces. It’s the first CSS module created specifically to solve the layout problems we’ve been hacking our way around for as long as we’ve been making websites.
As noted in the first paragraph, in the past, we’ve used tables, floats, positioning, and inline-block to lay out our web pages. They are 100% hacks and left out a great deal of important functionality, like vertical centering. Then came Flexbox, a great layout tool, but its one-directional flow has different use cases. CSS Grid and Flexbox actually work together quite well, complementing each other’s strengths.
CSS Grid gives you control over both rows and columns, something that was tricky to achieve with previous CSS layout models. It’s like having a real grid on which you can place your elements, and you can define the grid structure and size of grid items independently. This means you can create complex layouts that were previously difficult or even impossible.
Why am I waxing semi-poetic about it?
Well, the other day, I came across a most excellent “Complete Guide to CSS Grid” by Chris House and found it to be a quite amazing, practical complement to the aforelinked section on MDN.
If you want to grok and use CSS Grid elements, start with Chris’ post, keep MDN handy, and fire up your fav text editor to get some kata in!
Validate Like A W3C Boss
I’ve been part-time masquerading as a front end developer for one of the datascience-backed projects we have at work and got lost in some of that “vanilla HTML” we mentioned in the first section.
The World Wide Web Consortium (W3C) has a handy validation service, but I’m not too keen on putting any “real” code into a generic text box on any given website.
Thankfully, I don’t have to, since the W3C makes that code available for anyone to run.
In doing so, I learned about the Nu HTML Checker it is based on. Despite it being written in icky Java, this utility is very solid and more than does what it says on the tin.
Nu works fast and found the HTML tag errors that both my eyes and IDEs did not. There’s also a pretty handy W3C Validation VS Code extension based on it if you, like me, have not weaned yourself from Microsoft’s most insidious piece of software (besides MS Exchange).
hrbrmstr's Daily Drop 
Leave a comment