September 14, 2021 Smashing Newsletter: Issue #318
This newsletter issue was sent out to 178,694 subscribers on Tuesday, September 14, 2021.
Editorial
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.
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.
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.
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.
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.
As always, here’s an overview of our upcoming workshops:
- Building Modern HTML Emails Dev
with Rémi Parmentier. September 16–24. - Accessible Front-End Patterns Masterclass Dev
with Carie Fisher. September 30 – October 14. - Designing Landing Pages That Sell Design
with Rob Hope. October 5–19. - Jump to all online 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.
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 Mail.ru, 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.
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)
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.
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.
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)
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.