Smashing Newsletter #206: PWAs, Container Queries and Design Systems

Progressive Web Apps are known to be fast, reliable, and engaging. Have you considered to make the switch?Issue #206 • Tue, May 22, 2018 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friend, Nobody wants to be slower than a competitor, and nobody wants to lag behind. We’ve been thinking a lot about what would make a conference a truly valuable experience, and how attendees can learn most. That’s why at our upcoming [SmashingConf Toronto 2018 🇨🇦](), well-respected speakers will show how they work — performance audits, accessibility audits, refactoring, debugging, sketching, improving conversions in eCommerce as well as designing and building a design system. A conference full of practical, hands-on live sessions. With Lea Verou, Dan Mall, Tim Kadlec, Marcy Sutton and [many other speakers](. [SmashingConf Toronto 2018]( Meet [SmashingConf Toronto 2018]( (June 26–27), a conference with interactive live sessions. Ah, and just in case you need to convince your manager to bring you to the event, here’s our [Convince Your Boss PDF](. We’d love to meet you there! :-) Let’s think out of the box every once in a while, — Vitaly ([@smashingmag]() --------------------------------------------------------------- Table of Contents 1. [The State Of Front-End Tooling 2018](#a1) 2. [Case Studies About Switching To A PWA](#a2) 3. [Eqio: A Simple Alternative To Container Queries](#a3) 4. [A Toolkit To Enable Data-Driven User Experiences](#a4) 5. [A Tribute To Life In The Rainforest](#a5) 6. [Hand-Curated Freebies For Designers And Developers](#a6) 7. [Trip Planning Made Easy](#a7) 8. [Free Design Systems Talks](#a8) 9. [Upcoming In Smashing Membership](#a9) 10. [Upcoming Workshops With Vitaly Friedman](#a10) 11. [New On Smashing Job Board](#a11) 12. [Popular Articles This Month](#a12) --------------------------------------------------------------- #1. The State Of Front-End Tooling 2018 Front-end development is an ever-changing landscape. New tools replace old ones, some are adopted quickly, others take a bit longer until they are fully accepted. But what’s the current state of front-end tooling? More than 5,000 front-end developers participated in the [Front-End Tooling Survey 2018]( to paint a clear picture of the current state of things and show how usage has changed over time. [The Front-End Tooling Survey 2018 Results]( The findings range from the most popular preprocessor (Sass with 65%), the most popular CSS framework (Bootstrap with 34.7%), and how much acceptance CSS linting has gained, to how much experience developers have with different CSS methodologies and which ones they actually use in their projects. Check out the [complete survey results]( for more insights. (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](. [SmashingConf New York 2018]( The Early Bird tickets to [SmashingConf New York 2018]( will go live on May 29 — please mark your calendar! And we’ve got some [wonderful workshops]( as well. Tickets will go on sale in one week on Tuesday May 29th, and we’ve got only 50 early birds available. Make sure to [→ check the speakers](! :-) --------------------------------------------------------------- #2. Case Studies About Switching To A PWA Progressive Web Apps are known to be fast, reliable, and engaging. And, well, a 4x increase in conversion rate, doubling up the average user session length, or shaving off loading times by more than a half aren’t hollow promises but real-world success stories from switching to a PWA. [PWA Stats]( To collect stats and case studies about how Progressive Web Apps have helped improve user engagement and conversion rates, CloudFour brought [PWA Stats]( to life. The community-driven list gives detailed insights into how companies like Forbes, Pinterest, Twitter, but also booking platforms and e-commerce sites have benefitted from making the switch. It’s also a good time to recap [Aaron Gustafson’s comparison]( on when to go for PWA or Native.(cm) --------------------------------------------------------------- #3. Eqio: A Simple Alternative To Container Queries In times of web-based design systems and component libraries, the classic responsive design principles that are tailored all around the viewport width aren’t enough anymore. Imagine you want to use a component in a different context than it was created for, for example, or you have a component that regularly changes its sizes. Now if only Container Queries were here already! [Eqio](stowball/eqio-a-simple-tiny-alternative-to-element-container-queries-79b27cedb307) To close the gap until native Container Queries will become reality, Matt Stow created a useful little polyfill: [eqio](stowball/eqio-a-simple-tiny-alternative-to-element-container-queries-79b27cedb307). It uses IntersectionObservers to allow components to adapt their styling based on their width instead of the viewport’s by applying appropriately named classes to the component when its width satisfies your pre-defined requirements. A simple and tiny alternative. (cm) --------------------------------------------------------------- Our sponsor: Meet Overflow — User Flows Done Right User flows are a great way to effectively communicate the story behind your website or app, while fully engaging your audience with an interactive presentation. To make designing user flows faster and easier than ever, the team behind the popular prototyping platform Proto.io now introduced [Overflow](. [Overflow]( Tailored especially to the needs of designers, Overflow lets you turn your designs into playable user flow diagrams in minutes. Just sync your existing designs from Sketch (Figma and Adobe XD will follow next) and link your screens with connectors. Once your user flow is ready, you can share it with stakeholders and team members using the Overflow cloud. Overflow is currently in public beta and available for download on MacOS, with a Windows version being planned. [Download it for free](. --------------------------------------------------------------- #4. A Toolkit To Enable Data-Driven User Experiences Predictive data analytics. They could help predict the next page a user is likely to visit and let you prefetch it to improve perceived performance. Or you could use them to adjust the user experience depending on the next article, product, or video a user is likely to view. Interesting ideas, but let’s be honest: They are quite complex and difficult to implement. [Guess.js]( now wants to change that. [Guess.js]( Brought to life by Minko Gechev, Addy Osmani, Katie Hempenius, and Kyle Mathews, Guess.js provides libraries and tools that simplify predictive data-analytics driven approaches. The goal: Lowering the friction of applying this thinking to modern sites and apps, and using the data from analytics and machine learning models to cater for better user experiences. Worth taking a closer look at. (cm) --------------------------------------------------------------- #5. A Tribute To Life In The Rainforest The Amazon rainforest is the home of unique and intriguing species. However, wildlife is threatened. To raise awareness for the endangered animals, a team of designers created a multidisciplinary design project that joins type design, illustration, and web design. Its name: [Amazônia](. [Amazonia]( Amazônia explores the idea of developing a complete design ecosystem. Amazonia Script, the main building block, is a hand-drawn brush pen typeface with 763 slightly rugged and condensed glyphs, fast and curved strokes. Its sister, Amazônia Life, contains 54 icons representing endangered inhabitants of the rainforest, and finally, a beautiful set of 26 animal illustrations tops things off. Eye candy and an immersive web experience beautifully blended together. By the way, if you want to purchase the font and icons set, the designers will donate $1 to the World Wildlife Fund to protect the Toco Toucan and its friends. (cm) --------------------------------------------------------------- #6. Hand-Curated Freebies For Designers And Developers Everybody loves a good freebie, right? If you’re up for some freebie hunting, be sure to check out [ByPeople](. Adding new freebies that are bound to give your design and development projects the finishing touch on a daily basis, the community is one of the biggest repositories of free assets. [ByPeople]( Over 10,000 hand-curated downloadable goodies, collected into growing categorized lists, are available: free tools, fonts, GUI kits, themes, templates, plugins, code snippets, and everything else you could wish for. A treasure chest. (cm) --------------------------------------------------------------- Our sponsor: Online Masters in Information Design and Strategy [Ad]( Learn to drive effective digital communication. --------------------------------------------------------------- #7. Trip Planning Made Easy Summer’s just around the corner and you haven’t found the perfect travel destination yet? Or maybe you’re going to a conference abroad and would love to explore the country a bit? If you want to go on a trip but aren’t a fan of all the planning and researching that needs to be done beforehand, [Route Perfect]( might be just what you’ve been looking for. [Route Perfect]( The service helps you plan a trip based on your preferences and budget — with just a few clicks. You decide where you want to start and end your journey, the date and duration, and who you’ll be travelling with, and Route Perfect will suggest you a route that you can easily customize to your liking with a few sliders. Finally, once you’re satisfied, you can even book directly on the site. Great inspiration is guaranteed, but despite all the planning don’t forget the most important thing when travelling: Get lost. After all, that’s how you discover the best spots and make the best memories, right? (cm) --------------------------------------------------------------- #8. Free Design Systems Talks Everybody’s talking about Design Systems. We even have a neat and very popular [📕 Design Systems book]( dedicated to them. If you haven’t gotten around to dive into the topic yet or if you feel you need some real-life tips from fellow designers who have successfully implemented a design system into their process, the folks from DSCONF have got you covered. [DSConf]( The two-day conference all about Design Systems took place just a few weeks ago, now the organizers [share the videos of the talks online](. Among the speakers are Jina Anne (Amazon), Karri Saarinen (Airbnnb), Josh Brewer (Abstract), and many more. If you don’t have the time to watch the talks completely, no worries, you’ll find the main takeaways neatly summarized on the site, too. (cm) --------------------------------------------------------------- #9. 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 📺 “[New Adventures In Front-End](” with Vitaly Friedman — May 31, 2018 - Smashing TV 📺 “[Ethics As A Design Tool](” with Morten Rand-Hendriksen — June 5, 2018 - Smashing TV 📺 “[The Pizza Show](” with Sara Soueidan & Vitaly Friedman — June 26, 2018 - Smashing TV 📺 “[Static Site Generators](” with Phil Hawksworth — July 10, 2018 We are really grateful for the kind support of our members! You can [become one of us](, as well. ;-) --------------------------------------------------------------- #10. 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! --------------------------------------------------------------- #11. New On Smashing Job Board - [WordPress Developer]( at Cornershop Creative (Remote, US Only) “The core responsibility for this position will be investigating, troubleshooting, and coding solutions for WordPress-based websites and applications for our non-profit and small business clients.” - [Junior UX/UI Designer]( at Lumens Design Group (New York City) “As you work closely with our Creative Director, you will be involved in every step of the design process, and have the opportunity for your work to reach real audiences and make a true impact on the overall outcome.” - [Web Developer]( at Columbia Southern University (Orange Beach, AL) “The Web Developer will work to maintain the general web presence and reputation of the university through development of primary and affiliate website pages, email campaigns and template strategies in addition to maintaining standards compliant coding and page structure.” --------------------------------------------------------------- #12. Popular Articles This Month - [Reducing The Need To Hand-Code Theme Parts]( For a long time, people dreamed that they would be able to put together a web page by dragging and dropping different elements together. So what if you took the world’s most popular CMS and develop the most advanced page builder for it? - [I Used The Web For A Day With JS Turned Off]( Have you ever wondered whether it’s possible to do anything on the web without JavaScript? How many sites use progressive enhancement in practice? Chris Ashton did an experiment to find out. - [New CSS Features That Are Changing Web Design]( Today, the design landscape has changed completely. We’re equipped with new and powerful tools — CSS Grid, CSS custom properties, CSS shapes and CSS writing-mode, to name a few — that we can use to exercise our creativity. Zell Liew explains how. The authors are: Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools). 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](