Smashing Newsletter #208: UI Goodies, Design Systems and Loading Performance

It’s 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.Issue #208 • Tue, June 19, 2018 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friend, 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]( --------------------------------------------------------------- Table of Contents 1. [A Directory Of UI Goodies](#a1) 2. [Update Notifications For PWAs](#a2) 3. [Inside The Front-End Brain](#a3) 4. [Getting Started With Variable Fonts](#a4) 5. [Bringing Personality Back To The Web](#a5) 6. [Real-Life Loading Performance](#a6) 7. [Distinct Design Systems](#a7) 8. [Upcoming In Smashing Membership](#a8) 9. [Upcoming Workshops With Vitaly Friedman](#a9) 10. [New On Smashing Job Board](#a10) 11. [Popular Articles This Month](#a11) --------------------------------------------------------------- #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) [UI Goodies]( --------------------------------------------------------------- SmashingConf New York (October 23-24) We’re so 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](. [SmashingConf New York 2018]( The early bird tickets to [SmashingConf New York 2018]( are now available — grab yours before it’s gone! --------------------------------------------------------------- #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) [PWA Notification]( --------------------------------------------------------------- #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? [Your Brain On Front-End Development]( 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. [Variable Fonts]( 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) --------------------------------------------------------------- Our sponsor: To Improve Your Front-End Work, Get Your Back-End In Our Seats. [An Event Apart]( is three days of high-end, carefully curated design, code, and content for interaction designers and developers. Presented by modern masters—the industry shakers and shapers whose design work, books, tools, websites, articles and videos are shaping this rapidly changing field. [Overflow]( Get ahead of the curve. An Event Apart is jam-packed with tips, techniques, and insights into the future from the web’s best designers, leaders, and presenters. You’ll come away inspired, and raring to return to work! To design a better experience, attend a better-designed UX conference. Join us in Boston, Washington DC, Chicago, Orlando, or San Francisco … and set yourself Apart. [Save $100 with code AEASM](. --------------------------------------------------------------- #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. [Bringing 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. [Loading Performance]( 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) --------------------------------------------------------------- Our sponsor: Online Masters in Information Design and Strategy [Ad]( Learn to drive effective digital communication. --------------------------------------------------------------- #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]( [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) --------------------------------------------------------------- #8. Upcoming In Smashing Membership [Smashing Membership]( helps us to keep the site alive and go ad-free. Every Member makes a difference, and get valuable content from it, too! We want to get past this 1,000 mark real soon! ;-) [Coming up next]( - Smashing TV 📺 “[The Pizza Show]( with Sara Soueidan & Vitaly Friedman — June 26, 2018 - Smashing TV 📺 “[Static Site Generators]( with Phil Hawksworth — July 10, 2018 - Smashing TV 📺 “[From Good To Great Animation — Live!]( with Val Head — July 24, 2018 We are absolutely grateful for the support of 933 members (and it’s growing daily)! You can [become one of us]( as well. ;-) --------------------------------------------------------------- #9. Upcoming Workshops With Vitaly Friedman 🇨🇦 Toronto, [SmashingConf]( June 25 – 28, 2018 🇩🇪 Freiburg, [SmashingConf]( Sept. 10 – 11, 2018 [New Front-End Adventures in Responsive Design Workshop]( Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Don’t worry about the costs — we’ll find a fair price for sure. Get in touch — it’s that easy! --------------------------------------------------------------- #10. New On Smashing Job Board - [Web Developer]( at Colorado Public Radio (Denver, CO) “You have an eagerness to learn new skills and to innovate ways to get our audio and written content onto diverse digital devices and platforms. They should also enjoy creatively solving problems with experimentation and data.” - [UI Designer]( at Effectory (Amsterdam, Netherlands) “Design is your thing. You develop an approach for varying design questions, differing from iteration to working on details.” - [Associate Technology Director]( at Grow (Norfolk, VA) “Grow is looking for senior level developers interested in transitioning from coding, to leading and managing a team of developers.” --------------------------------------------------------------- #11. Popular Articles This Month - [Once Upon A Time: Using Story Structure For Better Engagement]( From campfires to books to advertisements to film, stories have a power over us that no other human invention can wield. They calm us, thrill us, enthrall us and send us running back to the box office for another hit. - [Smashing Book 6 Excerpt: Bringing Personality Back To The Web]( In times when everything is generic, how do we stand out without spending too much time and resources on elaborate art direction? Let’s explore a strategic guide for bringing back personality to the web, in regular real-life projects. - [Building A Pub/Sub Service In-House Using Node.js And Redis]( As the size of data for each message in our system differs from a few bytes to up to 100MB, we needed a scalable solution that could support a multitude of scenarios. In this article, Dhimil Gosalia explains why you should consider building an in-house Pub/Sub service, too. The authors are: Cosima Mielke (cm), Vitaly Friedman (vf), Christiane Rosenberger (research). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( --------------------------------------------------------------- With useful tips for web devs. Sent 2× a month. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](