Smashing Magazine - #318: Front-End Cheatsheets

For looking up JavaScript and CSS, nesting HTML tags and discovering hidden gems in Git. Issue #318 September 14, 2021 View in the browser 💨

Smashing Newsletter

Sveiki Smashing Friends,

What’s the right property for vertical alignment in Flexbox again? do we choose the right tag in HTML? Can we include span inside of button? For all of these and many other scenarios, having trusted online references and cheatsheets can save quite a bit of time.

So for this newsletter issue, we are looking at some handy little cheatsheets and references that can be very useful as a quick look-up: from accessibility and CSS to Git and JavaScript.

Meets For Speed
Smashing Meets for Speed, our next free online meet-up with Addy Osmani, Tammy Everts and Robin Marx. Jump to the schedule →

As of Smashing updates, we are very, very — very! — excited to welcome you to our next free online meet-up on web performance, and our online workshops over the next couple of weeks. With useful session and a friendly, welcoming atmosphere to meet people around the world! We’d love you to join us, of course.

Happy Smashing times, everyone!
Vitaly (@smashingmag)

1. Finding The Right HTML Tag

Let’s say you want to collect data from the user, you have a list of options to choose from, more than seven even, and the user can select several of these options. Which HTML tag do you use? Benjamin Holfve’s tool What the tag?! helps you find the HTML tag that suits your goals, not only in this situation but whenever you’re unsure about what’s the best one to use.

What the tag?!

To narrow down your search, the tool confronts you with several statements about what you want to achieve with the HTML tag you’re looking for. With each answer, the picture becomes clearer, so that you get a clear recommendation after just a few steps. In the case of our example from the beginning, the tag to use would be <select multiple>. A fantastic little helper. (cm)

2. Checking Tag Combinations

Can you include input inside legend? And what about span inside button? No worries if you don’t know the answer from the top of your head, Can Include helps you find out, without going through lengthy documentations.

Can Include

Using the WHATWG HTML specification, Can Include checks the parent-child tag combination you enter to instantly tell you if you can or can’t include one in the other or if there are any doubts regarding the combination. If you want to learn more about the tags, the results page for each combination provides you with more details about the contexts in which each of the two elements can be used. Handy! (cm)

3. Frontend Cheatsheets and Vocabulary

You might have been there before. Just when you are working on a tight deadline, you need to look up something quickly. Perhaps you've forgotten the right CSS property for vertical alignment in Flexbox, or perhaps you are missing just the right command for your Terminal.

Frontend Cheatsheets

SheCodes Coding tools provides a searchable reference list for everything JavaScript, with variables, strings, structures and all kind of attributes. Codecademy provides a comprehensive overview of front-end cheatsheets, grouped, structured and packed with ready-to-use examples.

For CSS, you will never go wrong with CSS Tricks Almanac, and you can also look up CSS vocabulary, gathered by Ville V. Vanninen from Finland as well. (vf)

4. Upcoming Front-End & UX Workshops

You might have heard it: we run online workshops around front-end and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events
Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

As always, here’s an overview of our upcoming workshops:

5. Can I Email?

A Can I Use for email? That’s exactly what Rémi Parmentier and the team at Tilt created to take away some of the guesswork when coding HTML emails.

Can I Email

To find out how well an HTML element or CSS property is supported, you can enter its name in the Can I Email search bar and the tool checks for support across email clients. Apart from the usual suspects like Apple Mail, Gmail, Outlook, Samsung Email, and Mozilla Thunderbird, Can I Email also shows support for clients one might not think of immediately, like ProtonMail, Fastmail, Orange, and, for example. One for the bookmarks. (cm)

6. Git’s Hidden Gems And Useful Tricks

Git can be difficult to get right: messing up is easy, and figuring out how to fix mistakes takes time and effort. Fortunately, there is no shortage of resources helping you to find a way out.

Dangit, Git!?! is Katie Sylor-Miller’s overview of some bad situations and how to get out of them — in plain English. Mike Riethmueller’s Git from Beginner to Advanced is a quick guide that assumes no prior knowledge of Git, and Atlassian provides advanced Git tutorials.

Git’s Hidden Gems And Useful Tricks

Not enough? A while back, Harry Roberts wrote about Little Things I Like to Do with Git, in which he introduces leaderboards, how to hide whitespace noise in diffs, how to show changed words instead of whole lines and how to generate a changelog, among many other things. Very helpful practices not only to avoid Git issues, but also get slightly more advanced when getting into trouble with Git. (vf)

From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.

7. Accessibility Checklist

So you want to make sure you don’t miss anything critical when it comes to the accessibility of your website or application. Where do you even start? A11yproject provides a comprehensive accessibility checklist for WCAG compliance.

Accessibility Checklist

It’s a very thorough set of guidelines and recommendations for keyboard accessibility, images, headings, lists, controls, tables, forms, media, animation, color contrast, mobile and touch, all gathered on one single page. For more guidance and accessible, bulletproof code snippets, take a look at our complete guide to accessible front-end components which should have your back as well. (vf)

8. Browser Extensions Performance Look-Up

When auditing the performance of our sites and apps, we often rely on a clean browser baseline for testing. That usually means a decent browser, a decent connection, a decent screen, and probably without too many apps running in the background. But more often than not, the reality looks a bit different.

Browser Extensions Performance Look-Up

Our carefully crafted applications are used along with dozens of other background processes and a good number of browser extensions. And as it turns out, they can have a tremendous impact on the loading speed. As a part of a browser extensions report, DebugBear has published a Chrome Extension Performance Lookup service. Once you know what extensions your users are likely to use (based on the industry where you are operating), you can plug the extensions and explore what impact they have on key performance metrics.

Of course, we can’t prevent customers from using those extensions, but at least it gives us some insight into what a more realistic baseline for their user experience is, and adjust accordingly — perhaps removing parallax, video auto play, and fonts after all. (vf)

8. New On Smashing Job Board

9. Recent Smashing Articles

That’s All, Folks!

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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#317: JavaScript and Front-End Tools

Tuesday, September 7, 2021

On diving deeper into JavaScript and Jamstack, optimizing for all popular frameworks, and boosting your existing Next.js setup. Issue #317 • September 7, 2021 • View in the browser 💨 Smashing

#316: Front-End Accessibility

Tuesday, August 31, 2021

With tips for automating accessibility testing, assessing third-party components accessibility, as well as useful accessibility extensions for Figma and VSCode. Issue #316 • August 31, 2021 • View in

#315: CSS Refactoring and JavaScript Migration

Tuesday, August 24, 2021

On refactoring CSS, migrating from JavaScript to TypeScript, optimizing for Next.js, and front-end case studies.Issue #315 • August 24, 2021 • View in the browser 💨 Smashing Newsletter Howdy Smashing

#314: Front-End Games on CSS and JavaScript

Tuesday, August 17, 2021

With front-end games and challenges in CSS and JavaScript to take your coding skills to the next level. Issue #314 • August 17, 2021 • View in the browser 💨 Smashing Newsletter Dobry dzień Smashing

#313: Open-Source Icons, Fonts and Goodies

Tuesday, August 10, 2021

With free icons, gradients, and illustrations to give your project the finishing touch. Issue #313 • August 10, 2021 • View in the browser 💨 Smashing Newsletter Howdy Smashing Friends, I remember

✏ What is Coding? Best React Open-Source Projects, Domain Tracker, and more...

Sunday, September 19, 2021

Codedamn Create - Build and Sell Interactive Programming Courses CREATOR.CODEDAMN.COM COMMENTS The Top 7 Websites to Learn Web Development Online MAKEUSEOF.COM COMMENTS Domain Tracker - Simple, Privacy

Exploring intrapreneurship culture

Sunday, September 19, 2021

Issue #58: Why the hardest word to spell is so crucial to product innovation ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Mechanic, Pattern Repository, Container Query Units, Holistic Approach, Hostile Architecture

Sunday, September 19, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 18 2021 Mechanic An open source

✏ Color Psychology in WD, Shopping App with ButterCMS, Image Color Finder, and more...

Saturday, September 18, 2021

Image Color Finder - Pick the Best Color Combinations in any of your Images IMAGECOLORFINDER.COM COMMENTS 10 Web Design Trends and Predictions for 2022 and Beyond [Infographic] SOCIALMEDIATODAY.COM

The New Design Books AD Editors Love

Friday, September 17, 2021

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our weekly roundup of the best designs to source and

✏ Is Your Website Accessible? Google Analytics 4 Tutorial, JavaScript Proxy, and more...

Friday, September 17, 2021

How to Use Quizzes More Effectively in Interactive Content WEBDESIGNERDEPOT.COM COMMENTS Google Analytics 4 Tutorial: A for Beginner's Guide for 2021 TORQUEMAG.IO COMMENTS Monotype Acquires

Celebrating the Cleverest Awards

Friday, September 17, 2021

A weekly dispatch from Architectural Digest's Editor in Chief. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Bamboo, Blow-Ups, and 3 Other Trends from Milan Design Week 2021

Thursday, September 16, 2021

Plus, the new Laura Gonzalez-designed Saint James Hotel is a Parisian oasis (image) Architectural Digest AD PRO Logo Saint James Paris The New Laura Gonzalez-Designed Saint James Hotel Is a Parisian

✏ WordPress vs Blogger, Creative Hamburger Menus, CSS Mirror Editing in Edge, and more...

Thursday, September 16, 2021

WordPress Vs Blogger: Which is Better for your Website? KINSTA.COM COMMENTS 20 Extremely Creative Web Layouts AWWWARDS.COM COMMENTS 10 Creative Hamburger Menus + Tips & Tricks 1STWEBDESIGNER.COM

✏ Issue #504: Typography for Data, Google Search Redesign, 8 Freelance Project Management Apps, Doodle Ipsum, and more…

Thursday, September 16, 2021

View this newsletter online Unsubscribe NEWSLETTER ISSUE #504 SEPTEMBER 15, 2021 Typography for Data In this in-depth investigation of typography for design systems, Michael Yom breaks down the