A couple of weeks ago, Chris jotted down his thoughts about whether web design has gotten easier in the past 10 years. Are the languages improving? Is front-end development becoming more specialized and is it getting easier for new folks to join the field? Well, on that front he had the following to say about the CSS language:
CSS has gotten easier. We use way fewer “hacks” all the time. I can literally feel it. The CSS we write today feels so intentional and direct. 10 years ago I feel like every other element had some kind of weird hack on it, and today, almost none. If CSS feels any harder, I’d wager it’s because the sites we’re building are bigger and more complex so the styling systems for them need to be all the more robust and the dangers of getting it wrong more stark.
I was talking to a front-end developer a year ago and I realized that they didn’t know what the float property was or how it worked… and they didn’t need to know! They didn’t know what a clearfix was or why it was useful, they didn’t have to know about all these whacky browser bugs that have been neatly catalogued in my brain after a decade of working in the field. Now they can start a project with flexbox and CSS Grid and make much more powerful, flexible, and user-friendly designs.
This is absolutely worthy of celebration, as Robin Sloan mentioned just this week:
For all that is Bad with web development in 2020, the steady stream of powerful new CSS capabilities is Very Good
But! The one area of front-end development that I would argue has been almost entirely ignored since 2008 is the HTML language itself. Chris writes:
HTML5 was the only big HTML change in the last decade, and it wasn’t particularly dramatic. It’s cool it’s the looser variant (instead of getting XHTML3 or something). More compatible this way. Maybe I’ll close my
<br />and maybe I<br>won’t. Having better semantic tags (e.g.<article>) is great. Input types are wonderful. But none of this pushes HTML to be significantly easier or harder.
I would argue that, yes, HTML has not gotten any easier or harder since then — and that leads into some unforeseen difficulty for us developers. Although sure, we’ve had some big improvements, like the support for responsive images, but besides that, I can’t think of anything that improves my daily life as a web developer.
I have a hunch that because HTML hasn’t been developed much over the last decade it means that we’ve had to rely on complex frameworks and libraries to do the work the browsers should be doing for us. Dave Rupert wrote about this very thing recently when it comes to accordions and the details element:
At the risk of being a broken record; HTML really needs
<accordion>,<tabs>,<dialog>,<dropdown>, and<tooltip>elements. Not more “low-level primitives” but good ol’ fashioned, difficult-to-get-consensus-on elements. A new set of accessible controls for a modern era… except that these things have been in-use on nearly every major website and application for the last two decades and exist in every major design system.
I couldn’t agree with this more and I’m pretty sure this is why it’s so hard to make websites accessible these days. We’re asking browsers to do something that they just don’t want to do and that requires a ton of JavaScript and framework magic or npm install react-accordion or whatever.
So here’s what I would like to see in 2020: I want our community to take all these react-whatever libraries and to use that as the beginning of a new set of standards for us to build into HTML itself, and with accessibility in mind from the ground up. And then we need to collect a bunch of these new elements under a single umbrella to get everyone — browser makers, developers, and users — enthusiastic about it all.
We could call it 2 Fast 2 HTML. Or HTML: Next Generation. Or perhaps HTML: Reloaded. Or maybe we could just call it HTML6? That would be fine too, I guess.
Writing clearly is, surprisingly enough, a significant part of being a good front-end developer and the folks at Basecamp describe how internal communication works at their company. I particularly love this bit of the article:
Meetings are the last resort, not the first option.
Also:
Writing solidifies, chat dissolves. Substantial decisions start and end with an exchange of complete thoughts, not one-line-at-a-time jousts. If it’s important, critical, or fundamental, write it up, don’t chat it down.
Chris wrote up his annual thank you post where he breaks down the stats and analytics for the CSS-Tricks website. It’s always interesting to see the changes over time and compare the years back-to-back. Big changes last year included this humble newsletter and, over the next year, we’re going to spending a lot more time focused on “how to” posts.
(Oh, and if you have an idea for an article — no matter how big or small! — feel free to reach out to us as we’re always looking for contributors.)
Here’s a swell post by Ali Churcher on how to make a grid-powered resume! It’s also neat that Ali explores how to make sure that it’s designed for print as well, just in case you need a physical copy, too.
Speaking of CSS Grid, that’s what I used to make the super simple layout on a new essay about the difficulty of design systems work called Systems, Mistakes, and the Sea. It’s a super simple layout at desktop sizes: throw the image to the left and the text to the right in a rather simple grid like this…
CSS Grid and flexbox combined with the object-fit property are the two big game changers for me when it comes to design on the web. With object-fit we can tell inline images how to expand and contract, just like background images. And that means we get all the semantic value of the img tag with all the design benefits that CSS affords us. The design took all of 30 seconds and it was thoroughly shocking how all these CSS features click-clacked together.
I love that Frank Chimero is designing his blog out in the open, and writing about each development as it ships. This is neat as it shows just how many questions we must ask ourselves before building anything. I also love this bit, too:
Over the last few years, I’ve found myself repeatedly making a comment about websites: you can design a blog that’s superior to most with a couple lines of CSS.
p {
font-family: Georgia, serif;
line-height: 1.5;
max-width: 33em;
}It’s important to note here that okay typography isn’t really technically difficult to achieve. The really hard part is staying focused, removing stuff we don’t need from a webpage, and saying no as politely as we can.
And finally, here’s a swell post by Dag Frode Solberg on how to make all the text in a table cell selectable. With just a single line of CSS…
table {
user-select: all;
}…it’s possible to make the text within the cell selectable with just one click (instead of having to click and drag all the text or click the text multiple times).
In fact, there’s a ton of great posts I had somehow missed on the CSS Christmas website. It’s really worth digging into them all. There are posts about typography, cleaning up CSS (and keeping it maintainable), and even creating a game in CSS.
An Event Apart
How are you going to invest in yourself in 2020? That’s where An Event Apart comes in. Level up your front-end skills while learning from 17 brilliant speakers over three days of delightfully curated sessions. Attend An Event Apart to be ready for anything the industry throws at you.