I get it. 2020 wasn’t the best year. We stopped exercising, started spending way too much time on Twitter, ate a lot of junk, and generally let ourselves go – and with good reason!
But 2021 has a chance to be different. So here are 21 bad front-end habits we would all be better off leaving behind.
CSS is deceptively easy to grasp at first. Want to make the text red?
color: red. Boom. But then things start getting hairier, and before you know it you’re on Twitter complaining about CSS centering. I’ve been there myself.
But when you look at CSS’s massive job description (handling all kinds of devices across all kinds of formats, not to mention different browsers and OSs) it becomes clear that CSS is actually a pretty terrific language, especially with all its recent improvements. And if you don’t believe me, turns out 76% of respondents to the State of CSS survey actually enjoy writing CSS!
I’m sure you’ve come across one or two of these. The author will talk about how they are perfectly content using only HTML and CSS with no frameworks, bundlers, or libraries of any kind.
And that’s great for them, but while there’s certainly a lot to be said for the “unreasonable effectiveness” of keeping things simple (and yes, a single out-of-date
package.json file can ruin your day), the truth is that many of today’s complexities came about to answer the demands of an always-evolving web. In 2021 most of us are not just working on simple, static landing pages anymore, and HTML/CSS isn’t always enough!
Tailwind CSS creator Adam Wathan has gotten so used to receiving pushback that the Tailwind CSS homepage adopts an almost apologetic tone, promising that “if you can suppress the urge to retch long enough to give it a chance, […] you'll wonder how you ever worked with CSS any other way.”
And sure Tailwind CSS might look weird and go against traditional best practices, but its popularity is certain, and it was one of the big trends in this year’s State of CSS report.
And the fact that 87% of Tailwind CSS developers are satisfied with it is enough to show that it has real advantages.
At the same time, there are good arguments against Tailwind CSS as well. If you’re a satisfied Tailwind CSS user that’s great, but we should always be wary of letting our passion carry over into bullying or dogmatism.
I know, I know GDPR and all that, but from a UX perspective those banners are a net loss. If you’re going to have one, at least have the decency to add your newsletter sign-up form in there as well, so I can dismiss both in one swoop.
If you stop using cookies you’ll have to stop using client-side analytics and tracking, and I say good riddance! Google Analytics ranks among the most confusing apps I’ve ever used, is not always that accurate, and speaking for myself I know I probably look at barely 1/1000th of all that data, if that (and god knows what Google does with the other 999/1000th).
Server-side analytics are more reliable, and can often be enough to track key metrics. So rather than trying to track as much as possible, what if we tried to track as little as possible?
Plus, CSS actually has native scroll management now, which lets you snap to specific checkpoints without making the user feel like they’re scrolling through molasses.
margin declaration is probably one of the most commonly used in CSS, yet in 2021 there’s a small–but–growing movement of developers suggesting maybe we should stop using it.
But if you do want to continue using margins, at least take some time to finally read up on the rules of margin collapse.
Now I’m not saying you should use TypeScript for every project if you don’t want –or need– to. But I do think everybody should get familiar with its syntax and basic principles, because it might come in handy sooner than you think.
It used to be, basic CSS could help you make font bold and style your links, and everything beyond that was a hack. Need to center a div? Negative margin hack. Need to make sure it’s square? Bottom padding hack. Need to clear some floats? Clearfix hack.
But no more! It’s 2021, and there’s now documented, sane ways to make CSS do everything you need, with the last piece of the puzzle being the new aspect-ratio property. The only problem is, what will front-end developers blog about now…?
Back in the era of Flash you couldn’t open a new tab without some offensively bad techno music (that’s what we used to call EDM back then) autoplaying at you. As a consequence, most of us has sworn to never build a website that produces soundwaves ever again.
But designers like Josh Comeau are showing that it’s actually possible to use sound in tasteful, even delightful ways that enhance user experience. Just remember the first rule of web sound design: NO AUTOPLAY!
By now it’s become a cliché to say that every logo looks the same. Brands are all dropping their quirky wordmarks and adopting generic sans-serifs, becoming blands in the process.
But there’s no reason why websites have to follow the same path! Let’s move past the two possible websites and instead take inspiration from folks like Lynn Fisher, Wes Bos, or Olivia Ng (among many others) who all have their own way of using type, color, as well as the full range of CSS properties to build unique designs.
For years now the mantra of responsive design has been mobile-first, which usually means starting by designing for the smallest viewport size, and moving up from there. But what if there was a better way? With CSS Grid you can now build dynamic layouts that resize based on the behavior of their contents, not on some predetermined static breakpoint.
What’s more, browser vendors are hard at work on container queries (the most requested feature missing from CSS). Once they land, they might very well change the way we handle responsiveness for good.
When confronted with complex features like Grid, I think it’s common to assume that you have to master all of it before gaining the rewards of your hard work. But in this case nothing could be further from the truth.
I won’t pretend to being a Grid expert, but the cool thing about Grid is that even knowing the most basic 10% is enough to make your life way, way easier. So if you’ve been putting of learning Grid, grab a cheatsheet and get gridding!
But instead of throwing up my hands in frustration, my new resolution is to learn about one new accessibility issue for every site I build. For example, I recently learned about a technique called roving tabindex. If those words are just as meaningless to you as they were to me a couple months back, then why not use that as a chance to learn something new today?
As I’m typing these words, I’m watching them appear on the screen from left to right. But for many people across the world the opposite would be true. Arabic, Hebrew, and Farsi are just a few of the languages written from right to left, and CSS has been adapting to handle them better.
Logical properties let you replace “absolute” directions like
margin-left with “relative” directions like
margin-block-end. The faster we can get used to this new way of thinking, the better it will be for the experience of RTL users everywhere.
Blogging is due for a comeback. Many of us use Twitter as an outlet instead, but it’s a very poor substitute, encouraging “hot takes” and bashing instead of constructive criticism and deeper thinking.
With platforms like Gatsby or Next.js, personal blogs can have all the bells and whistle you need – but there also simpler alternatives like Eleventy if you’re after something simpler. Or just use a platform like Dev.to! Anything is better than the empty calories of yet another Twitter rant.
It’s tempting to think that your job description is limited to making sure clicking the button goes to the next page, without worrying about what that next page has to say.
Similarly, social media networks have for years promoted the idea that they were neutral platforms, where everything is controlled by an algorithm, and human involvement should be limited at best. But the events of recent years have shown us the often dangerous consequences of this laissez-faire approach.
This doesn’t mean you should spend every minute of your day making political statements; but it’s also clear that we each have our responsibility in making sure the products we help design and build are not actively making things worse.
Don’t you hate these list articles that go on and on just so they can hit some arbitrary predetermined number of items? Whatever happened to keeping it short and sweet?
In 2021, let’s make sure we leave this outdated format behind… especially since I’m not sure I’ll be able to come up with 22 things next time!