Smashing Newsletter #301: Front-End Boilerplates

With front-end boilerplates: global CSS reset, favicons, HTML email template and VS code snippets for React, Vue, Angular and TypeScript.Issue #301 • May 18, 2021 • [View in the browser]( 💨 [Smashing Newsletter]( Hola Smashing Friends, 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](. [Birthday picker showing 6 February 2019]( Birthday picker starting from February 6th, 2019. From our [new series on frustrating design patterns](. 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. [HTML Boilerplate]( 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](. [Free Responsive HTML Email Template]( 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) --------------------------------------------------------------- From our sponsor Code, Test And Debug WordPress In A Local Environment With DevKinsta [Code, Test And Debug WordPress In A Local Environment With DevKinsta]( Design WordPress sites and themes offline with [DevKinsta]( Kinsta’s free local development tool. DevKinsta has powerful tools like a built-in database manager, SMTP server, WordPress_DEBUG toggle, and more. [Use DevKinsta to test your site]( with the latest version of PHP in a safe environment supporting PHP 7.2-8.0. --------------------------------------------------------------- #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. [CSS Boilerplate]( 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. [Smashing Online Workshops]( 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](. [A picture element to load correctly resized webp images in HTML]( Addy Osmani explains everything around images in his article on [humble 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) --------------------------------------------------------------- From our sponsor 5 Reasons Why You Should NOT Write Your JavaScript Data Grid From Scratch [5 Reasons Why You Should NOT Write Your JavaScript Data Grid From Scratch]( Of the many awesome things JavaScript developers can build, most are enjoyable, some give you a headache, but also satisfaction, and a handful should be labeled “Here be dragons.” Here are [five compelling reasons]( why creating a data grid from scratch falls into the latter category. [Change my mind](. --------------------------------------------------------------- #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. [How to Favicon in 2021]( 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. [Vue VS Code Snippets]( 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) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- #8. New On Smashing Job Board - [Senior UX Engineer]( at JobRad GmbH (Freiburg, DE) - [Associate Web Developer]( at Fahrenheit Creative Group, LLC (Jackson, Mississippi) - [Graphic Designer @ Fun Ecom Co]( at JLS Trading Co. (Remote) --------------------------------------------------------------- #9. Our Current Most Popular Articles - [How To Create, Edit And Animate SVGs With SVGator 3.0]( - [Smashing Podcast Episode 37 With Adam Argyle: What Is VisBug?]( - [How We Improved Our Core Web Vitals (Case Study)]( --------------------------------------------------------------- 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). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser]( This email was sent to {EMAIL} [why did I get this?](    [unsubscribe from this list](    [update subscription preferences]( Smashing Media AG · Werthmannstr. 15 · Freiburg 79098 · Germany