Smashing Newsletter: Issue #240

Editorial

It’s easy to get lost in heated debates about frameworks, methodologies and tooling these days. As we strive for better performance and scalability and agile processes, we write and read and debate these topics extensively, leaving the slightly less exciting topics aside. Yet, ‘less exciting’ doesn’t necessarily mean ‘less important’.

Year after year, we try to expose and surface topics that are often forgotten in the myriad of posts out there. Obviously, these topics are reflected in our dear ol’ Smashing Magazine, but also in our tweets, newsletter posts, books, webinars, workshops and conferences. After all, we have a very small team, and everybody is involved in pretty much everything we publish and produce at some point. The next year won’t be an exception to this rule.

We keep exploring how to make inclusive interfaces a default in most applications these days, and Heydon Pickering’s upcoming book will be examining just that. We’ll explore how to combine respectful design decisions with business metrics in Paul Boag’s new book which will be coming in early 2020. Last but not least, Trine Falbe is exploring a strategy for ethical design frameworks in small as well as large organizations in her upcoming book, too! We also have a couple of surprises coming up, but we can’t reveal them just yet!

With our Smashing TV webinars, we’ll be switching to live sessions in which experts review sites, apps, mock-ups and ideas. You’ll be able to submit your problem, and we’ll try to find a solution together on the spot — be it an accessibility issue, a CSS bug, a JavaScript error or a performance/conversion audit. The first ones will be a session with Ben Callahan, and the next ones with Rachel Andrew and Paul Boag.

For our conferences in San Francisco, Austin, Freiburg and NYC next year, we’ll be exploring various challenges of localization and internationalization, proper estimates and pricing, interface design patterns, accessible SPAs and web performance, refactoring, migration, privacy and the evolving role of advertising and privacy. Of course, these are just a few topics we’ll be highlighting — along with many front-end/UX case studies on how mid-size companies deal with everyday challenges in design and development.

The web is beautifully complicated, and so are the challenges that we have yet to tackle. Let’s see and learn and share and grow as a result — that’s the power of the community at hand.

Sincerely yours,
— Vitaly (@smashingmag)

But First, Accessibility Support
Instant Offline Access With Dash
Tools To Circumvent Web Font Pitfalls
Web Design As An Agent Of Power
A Tiny Guide To Variable Color Fonts
Taking Your Coding Skills To The Next Level
Performance Testing SPAs
A Collection Of Personal Sites
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. But First, Accessibility Support

There are many different ways that assistive technologies interact with browsers and code. Since it’s still not possible to fully automate screen readers and voice control softwares, we are left with having to do manual tests. And that’s where a11ysupport.io comes into play.

Originally created by Michael Fairchild, this community-driven website aims to help inform developers about what is accessibility supported. It’s a project that is active and contributions are always welcome, so start testing away! (il)

2. Instant Offline Access With Dash

If you’re one of those folks who simply cannot sleep on a plane and wished there was just a super-productive way to get some work done instead, you’re probably always on the lookout for tools that’ll get you through those flights even with spotty WiFi. Well, search no more — we’ve stumbled upon a pretty useful one!

In case you haven’t heard of it yet, Dash is a free and open-source API documentation browser that gives your iPad and iPhone instant offline access to 200+ API documentation sets and 100+ cheatsheets. Folks such as Sarah Drasner use it especially on the day before a long trip; all you need to do is download all the docs you need, and you’re all set! You can even generate your own docsets or request docsets to be included. Nifty! (il)

3. Tools To Circumvent Web Font Pitfalls

Web fonts are easy to implement, but they can have a significant impact on a site’s performance, too. To help you speed up the time to first meaningful paint, Peter Müller built Subfont. The command-line tool analyzes your page to generate the most optimal web font subsets and inject them into your page. Subfont currently supports Google fonts as well as local fonts.

Speaking of web fonts: To prevent flash of unstyled text from causing layout shifts, you might want to consider choosing your fallback font in relation to your web font’s x-heights and widths. The better they match, the less likely your layout will shift once the web font is loaded. Monica Dinculescu came up with Font Style Matcher to help find just that perfect fallback font. Before you opt for a fallback font, you might also want to check how well it is supported across different operating systems to not run into issues. Three small but mighty tools to circumvent some of the most common web font pitfalls. (cm)

4. Web Design As An Agent Of Power

We all first discovered the web at different points of our lives and at different points of its growth. To most people, the web they grew up in looks very, very different from the one we use today. As designers and developers, we probably can’t help but ask ourselves what our career paths look like now — with so many automated technologies being invented to “scale resources” more effectively.

“The World-Wide Work” is a talk by Ethan Marcotte that touches upon topics that need to be heard and discussed: automation, power, justice, and labor in the tech industry. It’s no doubt that we have many challenges waiting ahead of us, but the question is how do we collectively design a better web — one that works more equitably for all? A must-read! (il)

5. A Tiny Guide To Variable Color Fonts

“The tech is new, the adventure is big!” If you look at the experiments which Arthur Reinders Folmer of Typearture did with variable color fonts, this quote truly hits the mark. Arthur uses variable color fonts to create animations that are not only awe-inspiring eye candy but also explore the full potential of the font technology.

They might allow little customization compared to SVGs, but variable color fonts are easier to implement and they offer a lot of room for creative adventures, too — using input from the microphone, camera, or gyroscope to adjust the variables and animate the illustrations, for example. Sounds exciting? Arthur put together a little guide in which he dives deeper into the tech behind his experiments. A fantastic overview of what’s possible with variable color fonts today. (cm)

6. Taking Your Coding Skills To The Next Level

CSS animation, Grid, Flexbox… The web is evolving at such a fast pace that there’s always something new to learn. And, well, what better occasion could there be to finally dive into the topic you’ve been wanting to tackle for so long as with a fun little game?

If you’ve always wanted to conquer deep space — and learn the basics of object animation in CSS along the way — the CSS Animation course by HTML Academy has some exciting tasks for you to solve. To help your CSS Grid skills grow and blossom, there’s Grid Garden where you use CSS to grow a carrot garden.

If zombies are more up your alley, try Flexbox Zombies. It’ll give you the expertise you need to survive the living deads — all thanks to your coding skills! Or try guiding a friendly little frog to its lily pad with Flexbox in Flexbox Froggy to finally get to grips with the Flexbox concept. Another cool Flexbox learning game that shouldn’t be left unmentioned is Flexbox Defense. Last but not least, if you’re struggling with CSS selectors, there’s CSS Diner to teach you how to select elements. Now, who said learning can’t be fun? (cm)

7. Performance Testing SPAs

Single Page Applications radically changed how websites work. But sites built with React, Vue, Angular and other front-end frameworks are also more complex when it comes to performance testing: Entering your URL into WebPageTest to get a performance audit doesn’t deliver meaningful results as most of the user’s flow happens client-side in SPAs and does not have a specific URL to point to.

So how do you counter these problems? Nicolas Goutay found some workarounds which he now summarized in an article for CSS-Tricks. Valuable tips and tricks that will get you ready to test the performance of your Single Page Applications without needing to ditch the trusty WebPageTest. (cm)

8. A Collection Of Personal Sites

With the Internet ingrained in our day-to-day lives, what’s the best way to voice your own ideas, thoughts, and feelings? A personal site, of course! And because there are so many of them out there, Andy Bell decided to keep a collection of some so that folks can discover each other’s work and even receive updates from their RSS feeds.

If you’d like your site to join the collection, you’ll find simple instructions on GitHub that’ll appear in the list once your request has been approved. What a great way to find folks who share your interests and learn new ways of how to develop and design websites! (il)

9. Upcoming In Smashing Membership

Thank you for being smashing! A few months ago, we released the brand-new Smashing Magazine Print, with practical and thought-provoking articles on ethics and privacy to make us all think. Members ($5 plan) receive the digital version for free, Smashers ($9 plan) get the printed issue shipped directly to their doorsteps.

Mark your calendars for our next webinar and join in!

Smashing TV on Oct 29 at 16:00 GMT
“Selling Design Systems” with Ben Callahan

Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. (Ah, you could become a Smashing Member, too! Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉)

10. Our Next Smashing Workshops

In our workshops, we are looking into the current state of front-end and interface design, covering advanced challenges and actual real-life solutions to front-end problems. Coming up next:

🇺🇸 SmashingConf NYC (Oct. 15–16) in NYC, USA.
🇺🇸 JAMstack_conf (Oct. 16–18) in SF, USA.
🇦🇹 ScriptConf (Oct. 25) in Linz, Austria.
🇱🇹 UX Salon (Nov. 19) in Vilnius, Lithuania.
🇮🇹 Speaking Of (Nov. 28-29) in Milano, Italy.
🇮🇱 UX Salon (Dec. 5) in Tel Aviv, Israel.

Or, if you’d like to run an in-house workshop at your office, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)

October 15, 2019 Smashing Newsletter: Issue #240

Previous Issues