New Year, New Beginnings: Smashing Workshops & Audits — Smashing Magazine

Performance Checklist 2021: A Year-End Roundup

As the new year settles in and projects resume, the perennial focus on improving the web for everyone is back at the forefront. That means a renewed push on accessibility, conversion, engagement, retention, and, always, web performance. The downtime between years is a natural moment for reflection and research, and this season Vitaly has again compiled the collective front-end knowledge of the past year into the front-end performance checklist 2021.

This guide is a comprehensive resource for building fast web experiences, covering everything from metrics to tooling, front-end techniques, and overarching strategies. It has consistently proven useful for readers over the years. The checklist is also available in editable formats—including PDF, MS Word Doc, and Apple Pages — so you can tailor it to your own needs or those of your organization.

Planning the Year with Online Workshops

Smashing's practical, online workshops have become a platform for connecting with attendees worldwide to learn together through live design and coding sessions. The experience is designed to spark ideas and foster new connections. To make these sessions more accessible, there are now workshop bundles that allow you to select 3, 5, or 10 tickets for any of the workshops — be they ongoing, upcoming, or future ones. This is an option to secure tickets for yourself, your team, or your agency at the best price and for the most convenient dates.

The workshop program for the year is still expanding. If you are interested in running one, you can reach out via Twitter DM to discuss it. For updates on new workshops and access to early-bird tickets, you can subscribe here to be notified first.

New Online Audits for Front-End & UX

A new offering has recently launched: online audits. These are 30–60 minute video reviews accompanied by a written report of findings. It is a straightforward way to validate ideas and receive honest, unbiased feedback on the front-end and UX of a website, app, or mock-ups. The report includes guidelines and action points for improvement.

To get started, you can book an audit of your choice and share the relevant details about your project.

The Smashing Podcast: What’s On and How to Contribute

Last year saw a new Smashing Podcast episode published every two weeks. The show has drawn significant interest, with over 56k downloads and 34 guests from diverse backgrounds. The feedback has been strong, and the series continues to grow.

If you have a topic suggestion for the show, host Drew McLellan is open to hearing from you via Twitter, or you can reach the podcast directly. The next episode is scheduled to be released on January 26.

Newsletter Gems Worth Bookmarking

Our weekly newsletter aims to surface useful, practical tidbits from around the web industry, giving credit to the many talented folks working on brilliant projects. There are no third-party mailings or hidden advertising, and subscribing directly supports our work. For those interested in partnering with us, our partnership options are available, and you can reach the team anytime at [email protected]. Below are some of the popular pieces we have shared recently.

Checking Default Local Fonts

Default fonts vary significantly across operating systems. To make it easier to look up a system's default fonts — especially the ones that need to be available through CSS font-family — Zach Leatherman built Font Family Reunion.

The compatibility table works like a Can I Use for default local fonts: Enter a font-family and it tells you whether it is supported, as well as what the five standard CSS keyword font-families (serif, sans-serif, monospace, and the lesser-known fantasy and cursive) are aliased to in each operating system. One for the bookmarks.

Speeding Up Google Fonts

Self-hosting fonts is widely accepted as the fastest option for web fonts. However, Google Fonts can also be speedy: their ability to serve the tiniest possible font files to specific user agents and platforms, plus their relatively new support for font-display via the URL parameter &display=swap, provide a good base. As Harry Roberts shows, quite a few things can improve performance even further and mitigate many of the issues Google Fonts are commonly known for.

For his article “The Fastest Google Fonts,” Harry went down the performance testing rabbit hole to find the best combination: asynchronously loading CSS, asynchronously loading font files, opting into FOFT, fast-fetching asynchronous CSS files, and warming up external domains. All of these techniques combined might sound overwhelming at first, but Harry concludes with a slim and maintainable snippet that helps you get the most out of Google Fonts.

Simpler Responsive Emails

Coding clean, responsive emails that provide a solid experience in all popular email clients can be time-consuming. HEML aims to change that. The open-source markup language gives you the native power of HTML without dealing with all of the email quirks. There are no special rules or styling paradigms to master — if you know HTML and CSS, you are ready to start.

MJML is based on the same idea of simplifying responsive email creation. The markup language uses a semantic syntax that makes the process straightforward, while an open-source engine does the heavy lifting and translates the MJML you write into responsive HTML. A library of standard components saves extra time and lightens your email code base. And if you want to build your own, the Modular Template System Guide might help, too.

Bulletproof Email Templates

Making an HTML email work across clients is not easy. Fortunately, there are plenty of reliable tools, templates, and frameworks. Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS and advanced, email-specific post-processing. It also provides a few ready-made projects (Maizzle Starters) to start with right away.

Cerberus and HTML Email offer small collections of reliable patterns for responsive HTML emails, well-tested in 50+ email clients, including Gmail, Outlook, Yahoo, AOL, and many others. EmailFrame.work lets you build responsive HTML email templates with pre-built grid options and basic components, supported in over 60 email clients. Other options include Stripo, Chamaileon, Postcards, Topol.io, and Bee Free, which feature plenty of free templates. Litmus provides Responsive Email Templates for newsletters, product updates, and receipts, while CampaignMonitor has a free HTML email template builder with drag-and-drop functionality.

CSS Utilities and Generators

Need a CSS triangle style, a refined color palette with tints and shades, or a linear and radial gradient? Instead of hunting for snippets across the web, Omatsuri — festival in Japanese — gathers them all. It is a collection of open-source browser tools for everyday use.

The site includes a triangle generator, a color shades generator, a gradient generator, page dividers, an SVG compressor, a SVG → JSX converter, a fake data generator, CSS cursors, and keyboard event codes. Designed and built by Vitaly Rtishchev and Vlad Shilov, the source code is available as well.

For smooth, layered box-shadows, SmoothShadow is another gem. Inspired by an article from Tobias Ahlin Bjerrome, the tool lets you visually design a layered shadow and tweak alpha, offset, and blur with individual easing curves. Creator Philipp Brumm has also released it as a Figma plugin.

What Can You Put In A CSS Variable?

CSS variables are powerful. They cascade normally, inherit, make it possible to reuse code, and are extremely permissive. But what can you actually put in a CSS variable to make full use of its potential? Since some of these things are not obvious, Will Boyd explored the possibilities in a blog post. From unit values to pre-defined keywords, content strings, images, and even fancy animated values, his summary covers the most common use cases.

Small Lessons, Big Value

The learning never stops, and it is often the little insights and code tidbits prove most useful. Stefan Judis started “Today I Learned” to share brief summaries of each thing he picks up — from inlining SVG filters in CSS to telling browsers that your site supports color schemes. The topics span accessibility, bash, git, GraphQL, HTML, JavaScript, and more. Samantha Ming’s code tidbits are similarly a treasure chest of quick web dev wisdom.