May 18, 2021 Smashing Newsletter: Issue #301

Editorial

Starting off a blank page or canvas is daunting. How would you structure your project? How would you start building your HTML email? Do we use global CSS resets, and if so, which one? And what's the bulletproof syntax for favicons again?

In this newsletter issue, we highlight useful boilerplates — from HTML and accessibility boilerplates to global CSS reset, favicons and VS Code snippets for React, Vue, Angular and TypeScript. We’ll be publishing a lengthier overview of these boilerplates later in the magazine, so if you are using one all the time, please let us know on Twitter.

As of how-are-things-at-the-smashing-department, there is quite a bit happening behind the scenes. We’ve been working on a few new series of articles that will be coming shortly, written by wonderful people from the community with whom we have the incredible honor to be working with.

So drop by and take a look at the new articles on CSS Container Queries by Stephanie Eckles, a case study on Core Web Vitals by Beau Hartshorne, and our shiny new posts on frustrating design patterns by yours truly — among many other articles.

Happy reading — and we hope you’ll find these articles useful for your work.

And now, off to boilerplates!
— Vitaly (@smashingmag)

1. HTML Boilerplate Explained

How do you start a new project? Do you copy the HTML structure of the last site you built or maybe a boilerplate from HTML5 Boilerplate? Manuel Matuzović usually does the same, but recently, he encountered a situation where copying and pasting wasn’t an option: To document the structure he and his team are using at work, he had to understand the choices that have been made.

The task took up quite some time to research, so Manuel published the boilerplate on his blog for everyone to use, along with detailed explanations for each line of code so that you know exactly what you’re dealing with. A great opportunity to dive deeper into the underlying structure of a page. (cm)

2. Boilerplates For Responsive HTML Emails

We all know about the challenges that come with designing and building HTML emails. A handy boilerplate for sending out nicely formatted messages while avoiding some of the major pitfalls comes from Sean Powell: HTML Email Boilerplate.

Sean’s template is available in two versions — with and without comments — and consists of a header with global styles and a body section with more specific fixes and guidance to use where needed in your design. Whether you want to create your own template based on the snippets or cherry-pick the ones that fix your specific rendering issues, the boilerplate has got you covered.

If you only need a really simple responsive HTML template with a clear call-to-action button, you might also want to check out Lee Munroe’s template. It’s tested on all major email clients, on mobile, desktop, and web. Happy emailing! (cm)

3. Modern Global CSS Resets

What are sensible CSS defaults for modern projects? Do we need to rely on HTML5 Boilerplate, or Normalize.css, or should we not use them at all? To prevent common CSS issues down the line, it is a good idea to already lay the foundation when beginning a web project. So if you’re looking for a boilerplate solution for CSS, Andy Bell’s A Modern CSS Reset is for you.

According to Andy, thee days we can trust our browsers to behave properly, so heavy-handed resets aren’t really necessary. Andy provides a tiny little CSS reset that you can use as the basis for your CSS, and provides a detailed breakdown of each declaration as well.

And in a proper CSS folder organization boilerplate, Matthias Ott explains how he structures CSS, using ITCSS and BEM. A well-established and sensible approach to avoid overwriting CSS and writing styles with maintenance in mind. This should cover the ground well! (vf)

4. Upcoming Smashing Online Workshops

We love reliable tools and techniques, and they are pretty much at the heart of the online workshops that we run — be it around accessibility, design or front-end. With our workshops, you can boost your skills around front-end and design, and get better at your work, live.

We have Summer Bundles — spend the summer learning with us! 🏖

For the next workshops, we have coming up:

• React Performance Dev
  with Ivan Akulov. May 20 – June 4.
• Dynamic CSS Dev
  with Lea Verou. May 25 – June 8.
• New Adventures In Front-End 2021 Dev
  with Vitaly Friedman. June 9–23.
• Successful Design Systems Dev
  with Brad Frost. June 29 – July 13.
• Level-Up With Modern CSS Dev
  with Stephanie Eckles. July 8–22.
• Designing Websites That Convert UX
  with Paul Boag. July 22–30.
• The TypeScript Masterclass Dev (early-birds!)
  with Stefan Baumgartner. August 5–19.
• Building Modern HTML Emails Dev (early-birds!)
  with Rémi Parmentier. September 16–24.

5. A Snippet For Loading Responsive WebP Images

What’s the responsive images syntax again? Was it srcset, or sizes, or both? We want to ship AVIF and WebP today, but we also need a loading strategy that providess a fallback for browsers that don’t support modern image foramts. Stefan Judis has a little snippet boilerplate to do it.

Addy Osmani explains everything around images in his article on humble <img> element and Core Web Vitals, and you can use Stefan’s snippet to keep the right format of the responsive images markup nearby.

Also, in case you missed it, Stefan has started publishing his Web Weekly newsletter this year. Every Monday, you’ll find a colorful mix of resources all around frontend, productivity and web development learnings paired with handy tools and GitHub projects in your inbox. Stefan’s goal: make it the best email to start your week. (cm)

6. How To Favicon In 2021

Sometimes, it’s a good idea to re-evaluate best practices. When it comes to favicons, for example — particularly given the fact that front-end developers had to deal with more than 20 static PNG files to display a simple favicon at some point. To make the process more straightforward, you can explore a smarter solution that requires just five icons and one JSON file to fit most modern needs.

Chris Coyier went even a step further and went ultra-minimalist for the CSS Tricks favicon. He explains how it works in his post “How to Favicon in 2021”. An SVG concept to get your favicons ready for dark mode is also included. (cm)

7. VS Code Snippets To Streamline Your Workflow

Are you using VS Code? We came across some useful extensions that handle the React, Vue, and Angular snippets you might need to type frequently for you. For Vue, be sure to check out Sarah Drasner’s extension. It was built for real-world use and focuses on developer ergonomics instead of cataloguing API definitions.

Burke Holland provides you with a collection of essential React snippets and commands that he selected from his day-to-day React use. And if you’re looking for Angular snippets, John Papa has got you covered. His extension adds snippets for Angular for TypeScript and HTML to your VS Code setup.

Speaking of VS Code setup: Have you heard of the “VS Code Can Do That Workshop” already? From customizing the editor to using Git and source control, it features eight exercises to enhance your VS Code skills. (cm)

That’s All, Folks!

Wow, you’ve made it this far! We hope you’ve found at least one useful, practical tidbit that will help you get better at what you do. As you see, there are so many talented folks out there working on so many brilliant projects, and we’d sincerely appreciate it if you could help spread the word and give them all the credit they deserve!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.