Smashing Newsletter: Issue #208

Editorial

There is a lot happening in the world of Smashing Magazine right now. We have just launched our latest book, Smashing Book 6: New Frontiers in Web Design, and as we continue to finalize the book, you can add your name to it! Head over to our form to get started. The team is also packing for our upcoming Smashing Conference — this time in Toronto.

Smashing Magazine, the conferences, and the books really are all about you and what you need as professional web designers and developers. We love hearing your thoughts, and would love to see your own contributions to the magazine. So, if you have an idea for an article, then do let us know. My own career as a public speaker and writer started with writing articles for my own site and other publications, so I’m always happy to help first-time authors get started — as is everyone here. Get started by taking a look at our writing guide, and get in touch with your ideas!

I’m looking forward to meeting you all in Toronto soon!
— Rachel (@smashingmag)

A Directory Of UI Goodies
Update Notifications For PWAs
Inside The Front-End Brain
Getting Started With Variable Fonts
Bringing Personality Back To The Web
Real-Life Loading Performance
Distinct Design Systems

1. A Directory Of UI Goodies

A good set of tools helps ease the work. To compile and share useful resources for designers and UI developers, Jess Eddy brought UI Goodies to life, a directory of UI resources for everything from accessibility, animation and color to design systems, lightweight frameworks, icons, backgrounds and more. Good stuff. If you know of a resource which you feel should be part of the collection, feel free to submit it. (cm)

2. Update Notifications For PWAs

Have you ever been on a website that uses a popup notification to inform you that there’s a new version of the site available? It’s a nice approach for offline-first sites — especially since it usually is quite tricky to make changes to the user’s cache when you make updates to the site. Dean Hume now shares how you can build such update notifications and display them each time a new version of the service worker is available. A thoughtful detail. (cm)

SmashingConf New York (October 23-24)

We’re very happy to announce the 5th SmashingConf New York 🇺🇸 taking place on October 23–24 in NYC. For this one, our speakers will cover all kinds of failures and the decisions they had to make to turn it all around. We’ll look into all those shiny new things in front-end and design, from Progressive Web Apps to (web fonts) performance, CSS Secrets to Design Systems, and how to convince your colleagues and clients the right way. With Sara Soueidan, Dan Mall, Monica Dinculescu, Jason Grigsby, and many other speakers.

3. Inside The Front-End Brain

What happens when you look at a design? Do you start to think about all the things that will be related to actually implementing it? The Flexbox header, the Grid layout, the hamburger menu, and, oh, that little SVG search icon right there in the corner maybe?

Chris Coyier now admitted that his front-end brain works in exactly this way whenever he sees a design — even if he knows he’s not going to build it —, and lets us in on the triggers that catch his attention and how he would solve them based on an example. Interesting insights. (cm)

4. Getting Started With Variable Fonts

This year, variable fonts will be supported by all major browsers, and, well, they are the perfect match for our digital times. Variable fonts store multiple font styles in one single file, and that while keeping the file size low thanks to the fact that the individual styles get drawn dynamically inside the browser.

This brings along a lot more freedom as it allows you to think beyond the usual categories of light, regular, and bold and generate styles and widths in between. If you want to dive in deeper, Oliver Schöndorfer wrote a great primer on variable fonts, the new possibilities, and the challenges they bring along. Promising. (cm)

5. Bringing Personality Back To The Web

Generic web layouts don’t have the best reputation these days, and, well, we often feel bored by how predictable and uninspired most web experiences have become. For our upcoming Smashing Book 6 (which you can pre-order now, by the way), Vitaly pondered about how we can bring personality back to the web.

The result is a deep-dive into practical techniques and strategies that might help you find and form your site’s personality, and produce an experience that stands out from the mass. We published the chapter on Smashing Magazine as a free excerpt. Enjoy the read! (cm)

6. Real-Life Loading Performance

Performance matters. However, performance tests usually are synthetic, meaning that the data comes from the device and network connection the test was run on instead of from real users. Real User Monitoring (RUM) changes that.

Relying on JavaScript APIs in the browser, RUM helps you gather statistics about how your site performs in real life: The Navigation Timing API collects performance for HTML documents, while the Resource Timing API collects metrics for document-dependent resources such as sheets, scripts, and images. Jeremy Wagner wrote a comprehensive article on how you can make use of this data. (cm)

7. Distinct Design Systems

Recipes for buttons, form elements, tooltips — a lot of design systems are rather generic. What’s often missing is the unique angle on the organization, as Dan Mall argues in his article “Distinct Design Systems.”

Dan suggests that, to provide real value, a design system should strive for “only-ness” and cater to the aspects that other design systems don’t cater to to really reflect your organization’s positon and the problem it tries to solve. A way forward to more innovative — and valuable — design systems. (cm)

June 19, 2018 Smashing Newsletter: Issue #208

Previous Issues