Smashing Newsletter: Issue #209

Editorial

Who doesn’t like dense color-coded spreadsheets? Not because they look particularly exciting or attractive, but because they bring structure, clarity, and insight into an otherwise untamed realm of data. A good spreadsheet can serve as a strong foundation for informed discussions and sound decisions, and it shows both the big and the small picture of the surveyed landscape.

For example, a spreadsheet can serve as a way to compare features, evaluate bottlenecks and discover culprits. Harry Roberts has already explained how to audit third-parties and among other things, released a Third-Party Audit Spreadsheet. A great little template to use when working on performance optimization.

Talking of spreadsheets: we have released a monthly expenses template for digital workers a while back, to help you track your expenses that add up quickly. In his series of articles (part 1 and part 2), George Margaritis explains the design process for onboarding and filtering, powered by almighty Google Spreadsheets.

As a bonus, we also published an ultimate digital clean-up checklist that might help you keep tabs on your data and on your privacy. Any other spreadsheets you use frequently? Let us know on Twitter!

Thank you for your trust and ongoing support, everybody — you are smashing inded! Ah, and make sure to stay hydrated (or warm, depending on where you live in this wonderful world of ours!) these days.

— Vitaly (@smashingmag)

State Of Mobile 2018
SmashingConf NYC Is Coming!
React Native At Airbnb
Why Design Systems Fail
Drawing Images With CSS Gradients
Building Carousels With Obsolete HTML
A JavaScript-Based Music Synthesizer
Upcoming In Smashing Membership
Upcoming Workshops With Vitaly Friedman

1. State Of Mobile 2018

The mobile landscape is continuously evolving and bringing forth new opportunities for mobile users. In his 2h-long presentation, Luke Wroblewski walks us through not only some market fundamentals and statistics, but also how to find the core values of your app and to increase sign-up conversions and make app-onboarding more convenient. The latter part starts at 38:30.

You can also download Luke’s slides (102 MB) which he kindly shared publicly. That’s a goldmine of knowledge — and kudos to Luke for his fantastic research! (cm)

2. SmashingConf New York Is Coming!

Booo-yah! The hunt for shiny front-end and UX treasures has begun! For our fifth SmashingConf New York, taking place on October 23–24 in NYC, our speakers will cover all kinds of failures and the decisions they had to make to turn it all around. They’ll share the lessons they learned and techniques that worked well.

Early-bird tickets to SmashingConf New York 2018 are now available — grab yours before it’s gone!

We’ll look into all those shiny new things in front-end and design, from HTTP/2 Performance patterns to Progressive Web Apps, Vue.js, Webpack — all the way to Design Workflow, DesignOps and Variable Fonts. With Monica Dinculescu, Dan Mall, Jason Grigsby, Sara Soueidan and many others. It will be a quite special event, and we’d love to see you there! You can also convince your boss (PDF) that it’s a good investment! Just sayin’ ;-) (vf)

3. React Native At Airbnb

In the past few years, mobile web usage has grown tremendously, and oftentimes mobile devices are the primary or only form of communication when away from home. To provide their users with a pleasant experience on the go, the Airbnb team decided to give React Native a try two years ago. And, well, what started out as an experiment has grown into one of the main pillars of Airbnb’s mobile startegy.

Now their engineering team published a five-part article series on the things they learned using React Native. What worked and what didn’t? What are the challenges that come with building a cross-platform mobile team? Where do they stand today? And how can native be made even better? Interesting insights guaranteed. (cm)

4. Why Design Systems Fail

Everybody’s talking about design systems, but one aspect is often left out in the discussion: Why do some design systems fail? Una Kravets gave a talk at An Event Apart in Boston on the topic, and Jeremy Keith summarized it in a live blog. A good overview over building robust, easy-to-use design systems that get the buy-in they need to fully unfold their power. (cm)

5. Drawing Images With CSS Gradients

Images that look as if they are SVGs drawn in Illustrator, but in reality thet are made right in the browser? If you search CodePen for “CSS images”, you’ll get a lot of cool examples of what they can look like. Now, Jon Kantnder explains how you can create CSS images yourself — only with backgrounds and minimal use of other properties.

Jon shows how you can order each background, draw parts of circles, rounded rectangles, and how to adjust gradient stops for smooth edges. If you love tinkering with code, then this is for you. But beware: There’s a lot of thinking outside the box and experiments involved to get the desired result. (cm)

6. Building Carousels With Obsolete HTML

Do you remember the <marquee> element? Back in the days when websites were made up of <table>s, it was popular to display moving bits of content — news or a welcome message, for example. Michael Weaver asked himself whether we could still use <marquee> today, and came up with a clever idea indeed.

Even though the element is obsolete by now, it’s still well supported, and that means that we can use it to whip up a JavaScript-free image carousel or some basic animation in no time, as Michael explains. Recycling at its best. (cm)

7. A JavaScript-Based Music Synthesizer

Have you ever heard of Tenori On? It’s a music synthesizer built by Yamaha that visualizes cool light patterns as it plays the synth melody. Monica Dinculescu now turned her fascination for the device into a little project that brings the Tenori fun to the browser. Its name: Tenori-Off.

Built with JavaScript, Tenori-Off lets you change between drums and synth to create your tune, and there’s even a machine-learning algorithm in place that matches the drums to the synth. Fun! (cm)

8. Upcoming In Smashing Membership

Smashing Membership helps our site keep the site alive and go ad-free. Every Member makes a difference, and get valuable content from it, too! Coming up next:

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 really grateful for the kind support of our members! You can become one of us, as well. ;-)

9. Upcoming Workshops With Vitaly Friedman

🇩🇪 Freiburg, SmashingConf, Sept. 10 – 11, 2018

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!

July 3, 2018 Smashing Newsletter: Issue #209

Previous Issues