October 6, 2020 Smashing Newsletter: Issue #269

Editorial

Our experiences shape our expectations. Conventions that used to be just a natural way of working and living in the past need rethinking to remain viable — just because the way we work and live has changed entirely. I asked myself: what will be the new default in the new reality? How should we all change to accommodate for it — be it small agencies, mid-size product teams or small companies like ourselves here at Smashing?

For many of us, it didn't take long to get used to the idea of online conferences and online workshops. The experience online is always different, but in times when we don’t really have a choice, it seems that we have found ways to make them work online still.

Nobody wants to spend more time on screen, so instead, we could chunk the entire experience into manageable segments, and make sure attendees stay connected in-between sessions. E.g. by breaking online workshops into 2.5h-chunks spread across weeks, with enough breaks for networking — and adding interactive live teamwork and live Q&A into the mix.

With new online events being announced every other day, everyone is in competition with everyone else. So it’s not surprising then to see very theme-specific, niche events, along with events dedicated to a particular audience, e.g. run in Russian or Spanish.

On the other hand, it shouldn’t be too surprising to have live streams becoming a default feature of any in-person events in the future, too. Not only because flying will remain expensive, cumbersome and damaging for the environment, but also because companies have been noticing that it’s just much more reasonable to “send” employees to multiple online events instead of just one in-person gathering.

In all of that, we shouldn’t forget that digital really is different. It’s not necessarily as rewarding as in-person experiences are, but it has its advantages, too. Online makes it possible for everyone to attend without leaving the comfort of their desks, as well as learn and network at their own individual pace. It’s also more affordable and makes traveling optional, which makes events accessible for young families and people who prefer not to travel.

It’s up to us to invent that better digital future, and figure out how we can provide the offering that our attendees, readers and customers will fall in love with — albeit digitally. One thing is certain though: the new default expectations will be different, and that’s not necessarily a bad thing.

— Vitaly (@smashingmag)

1. Linear Scale For Typography With CSS clamp()
2. The State Of Design Systems And Prototyping 2020
3. Git Cheatsheets
4. Master TypeScript In 50 Short Lessons
5. Customize Illustrations With A Few Clicks
6. Growing List Of Accessibility Resources
7. Designing And Testing 3D Keyboards
8. Coming Up Next on Smashing

1. Linear Scale For Typography With CSS clamp()

It doesn’t sound like a difficult problem, but it’s actually not that straightforward: make the font-size or line-height grow automatically between two values, from small to large screens. For years, we’ve been using some sort of combination of calc, vh and vw units, trying to achieve growth between two values within a particular viewport range. Now, we can achieve the same much easier, with CSS clamp().

In the article “Linearly Scale font-size with CSS clamp() Based on the Viewport”, Pedro Rodriguez explains how CSS clamp() actually works. It actually takes 3 values:

clamp(minimum, preferred, maximum);

The value it returns will be the preferred value, until that preferred value is lower than the minimum value or higher than the maximum value. So once you pick your minimum and maximum font sizes, and your minimum and maximum viewport widths (and convert the widths to rem units), we can use a bit of school math to calculate the slope and let the font-size grow within its boundaries.

Great for responsive typography and so many other things, be it icon sizes or spacing. Browser support? All modern browsers (no good news from IE and Opera Mini though). (vf)

2. The State Of Design Systems And Prototyping 2020

It’s always interesting to explore what worked or failed for other professionals, so we can take some of the lessons and apply them to our context. The 2020 Design Systems Survey by Sparkbox highlights the results of the annual survey among organizations that have heavily invested in making design systems work well. The survey dives into common design system challenges and strategies to overcome them. The survey also dives into in-house design systems, design system maturity and the contributions of a design system to a positive culture within those organizations.

Conducted by the team behind Framer, The State of Prototyping 2020, provides a 31-pages PDF report exploring current challenges and benefits of prototyping. Only a third of respondents is able to provide a prototype within 12h. The common challenges are steep learning curves when starting to use a tool for the first time, and often the prototyping tool doesn’t fit exact requirements. A registration via email is required.

Not good enough? You can also explore the State of Email 2020, featuring current trends in email design and development, provided by Litmus. (vf)

3. Git Cheatsheets

Aw, Git! It’s always quite a challenge to remember all the right commands at just the right time, so having a few cheatsheets around can be quite useful. Git log features common ways to use the Git log to track what changed or search for commits. Git Branch cheatsheet shows how to list branches, create new ones, rename and switch branches, as well as delete them.

Need something slightly more advanced? Atlassian’s Git cheatsheet goes into more detail around Git basics, undoing changes, rewriting Git history, Git branches and remote repositories, and GitHub Cheat Sheet features shows how to inspect and compare, track path changes, share and update, ignore patterns, and add temporary commits. (vf)

4. Master TypeScript In 50 Short Lessons

What’s TypeScript, and how can we make it work well for all of us? That’s the question we’ve asked ourselves early this year. So we’ve teamed up with Stefan Baumgartner, a seasoned JavaScript developer drawn to TypeScript for years, to break it all down into understandable pieces. The result is “TypeScript in 50 Lessons” — our shiny new book, with everything TypeScript explained, from start to finish.

The eBook, along with a friendly discount for printed copies is going to be released this Wednesday, and printed books will be shipped in November. 476 pages, beautifully designed by Rob Draper. Download a free PDF sample and jump to the table of contents. Of course, the eBook is always free for Smashing Members. Learn how to make sense of TypeScript and how to make it work for you. Happy reading, everyone! (vf)

5. Customize Illustrations With A Few Clicks

While design systems have become a tool for many design teams, illustration systems and libraries have become useful tools to create new illustrations for every occasion with a few clicks — especially if you happen to be on a tight budget. Vector-Creator allows you to pick a style, add and arrange elements, add your own SVG, PNG or JPEG and export to PNG or SVG.

Open Doodles is a free set of sketchy illustrations by Pablo Stanley, with custom compositions and a generator to fully customize your illustrations. And smash.illustrations is an illustration constructor with colorful and trendy characters, free for commercial and personal use. Of course, nothing can beat the artwork created specifically for a project from scratch. Still, in some situations, it might not be viable, and that’s where such constructors can become quite handy indeed! (vf)

6. Growing List Of Accessibility Resources

Chances are high that just when you need to look-up a solution or a technique, it will be quite difficult to find it quickly. Hannah Milan’s A11yresources provides a growing list of accessibility tools and resources, ranging from articles and browser extensions to newsletters and podcasts and videos.

A quite comprehensive list, well organized and structured — with pretty much everything you might need to resolve that accessibility issue quickly. For the bookmarks! (vf)

7. Designing And Testing 3D Keyboards

Have you ever actually given thought to that keyboard you interact with day in and day out? Perhaps every key press could be that much more enjoyable, easier and satisfying if you took the time to consider that there may be something better just waiting for your attention.

If you feel like you are ready to build a custom mechanical keyboard, why not virtualize it first? Built using three.js, Keyboard Simulator can help you with just that. You can experiment with so many different 3D models and even share your designs with others. Nifty!

Interested in diving into more possibilities of mechanical keyboards? Check out Ben Frain’s complete guide to mechanical keyboards in which he talks about the variety of layouts, switch types and even keycap material. (il)

8. Coming Up Next on Smashing

With Smashing Membership, you get access to goodies, eBooks, discounts and live sessions with experts — all around front-end & UX, for just one coffee a month. Coming up next:

• “All About Icons” with Marc Edwards— October 20 at 11:00 London time

We also have online workshops on front-end & UX — designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.

• The SVG Animation Masterclass (Oct 8–22)
• Web Performance Masterclass (Oct 12–26)
• Designing for Emotion Masterclass (Oct 28–29)
• Front-End Accessibility Masterclass (Nov 6–20)
• Designing Websites That Convert (Nov 18–26)
• Smart Interface Design Patterns, 2020 Edition (Dec 1–16)
• Building A Design System With CSS (Dec 3–17)
• Build, Ship and Extend GraphQL APIs from Scratch (Jan 5–19)

Or, if you’d like to run an online workshop with your team, 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)

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.