|
🚀 Looking back: Our frontend highlights of 2021
Hey! Hope you're well. This is the last issue of Frontend Focus that will land in your inbox this year. As such, we're going to take a look back at some of the frontend highlights of the past twelve months.
I've taken a look over the issues we've sent throughout 2021 and pulled together a dozen or so of the top links shared. I hope you'll enjoy looking back and reflecting on the year we've all had building the web. 🧡
So, with Christmas and the New Year just around the corner we'll be taking a short break next week, but we'll be back on the 5th of January with our usual format. As ever, if you've got a great tutorial, video, or article you want to share then please do hit reply and let us know.
Thank you for reading, and catch you in 2022.
— Chris ✌️
|
|
|
1: HTTP/3 From A To Z: Core Concepts — This post from the summer explains what HTTP/3 is, and why it has been needed so soon after HTTP/2. It also goes into how it helps improve web performance overall. This is the first post in a three part series - all of which are worth checking out if you want to round out your knowledge in this space.
Robin Marx
|
|
2: The State of 'Mobile First' and 'Desktop First' — Is mobile first or desktop first still relevant? Well, this popular article from Ahmad (who we linked to several times this year) explores that very question, outlining the pros and cons of such approaches.
Ahmad Shadeed
|
Avoid DNS Downtime — Make DNS downtime history with DNSimple! We created this 5-step checklist to help you achieve 100% uptime. Explore our effortless DNS management, along with our robust domain & DNSsecurity for yourself – enter your domain name, and we’ll do the rest. 🎅
DNSimple
|
|
|
3: Designing Beautiful Shadows in CSS — This excellent tutorial from Josh (shared back in September) takes a considered look at how to use CSS to create “rich, lush, lifelike shadows” and do away with the commonly found “fuzzy grey boxes”.
Josh W Comeau
|
|
4: Adobe Photoshop's Journey to the Web — Photoshop in the browser is quite a feat and one of those things that feels like a very real glimpse at the future of the web platform — as such, this post digging into how it's being made a reality resonated with readers.
Thomas Nattestad and Nabeel Al-Shamma
|
|
5: HTML with Superpowers — We shared this 45-minute talk all about Web Components in an October issue. It covers how to use them, style them with CSS, and build them with JavaScript. With browser support now being fairly widespread it seems you agreed with Dave: “they’re worth investigating”.
Dave Rupert video
|
|
6: Simplifying Form Styles With accent-color — The CSS accent-color property makes it quick and easy to roll out brand colors to certain form inputs by leveraging user agent styles. This article looks at what it does and how to use it alongside color-scheme for simple, accessible checkboxes and radio buttons — and imagines how we might use it in the future.
Michelle Barker
|
|
8: Reducing the Need for Pseudo-Elements — Yes, pseudo-elements still have an important place, but as this blog post from September highlights, we can now leave them behind in some scenarios — thanks to newer CSS properties.
Marcel Moreau
|
|
10: Why Are Hyperlinks Blue? — It's one of those things that you may have never stopped to ponder. If not, this is a deep dive into the history of interfaces and link design over the years, aiming to track down the origin of the blue link we know today.
Elise Blanchard
|
A CSS Christmas Elf — You’ve heard of elf on the shelf, well get ready for… Christmas on the cascade? (sorry 😅) Álvaro has created this using a combination of multiple gradients, masks, and clip-path. There’s even a timelapse video of the process which really helps in understanding how it came together.
Álvaro Montoro
|
|
