Smashing Newsletter: Issue #231

Editorial

Daily routine is wonderful — predictable, efficient and comfortable. But when we need to find that one spark of a genius idea, breaking out of the regular schedule can do wonders. In a way, that’s also because we’re used to following patterns in our lives. It’s perfectly reasonable to go to a cinema on a Friday night, but it seems to be a bit off to go on a Monday morning. It may seem fine to be burning the midnight oil, just to realize the next morning how terrible the output of the work was. Last but surely not least, it often feels strange to take off early on a Tuesday, as it’s the beginning of the work week. It doesn’t have to be.

Some of the most profound ideas that I have discovered for my work and life stem took place whenever I broke my daily routine and got away from the hustle bustle of everyday life. I often felt that I have to beat the entire world by working more and working harder, and sometimes even felt awkward when I took a few more days off. However, every now and again we need to step away to see the big picture, so that we can recharge when diving into fine details and keep ourselves going. It’s outside of the comfortable day-work-time when wonderful ideas emerge.

So, what about a little experiment? What if you asked your team members to do something that makes them happy on a Thursday morning? What if you gave them a few extra vacation days, or asked them to work outside of the office on Wednesdays? Or perhaps consider introducing ‘no-meetings-on-Fridays’ or ‘do-what-you-love-Wednesdays’?

But most importantly, perhaps take a bit of time off. You are smart, helpful, and hard-working — so take at least a day or two to step away, and maybe do something kind to yourself and to people around you, or the people you’ve never met. And guess what: the world will keep spinning, and you might finally catch that idea you’ve been chasing in vain all these years.

— Vitaly (@smashingmag)

Another Lens
Join The JAMstack Revolution!
Improving Performance With Inline CSS
Programming Design Systems
A Designer-Friendly Pseudo 3D Engine
Give Your Products More Life With Animation
Real Data For Your Mockups
Freebie: Animated Icon Pack
Small Nuggets Of Web Dev Wisdom
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. Another Lens

We all are biased in some way, and seeing things through our personal lenses can often get into the way of creating truly thoughtful, inclusive work. To examine how bias influences our worldview and our work, the Design Team at Airbnb partnered up with journalism startup News Daily. The result is Another Lens, a toolkit that helps designers — and other creatives — ask the right questions to overcome skewed perspectives and reframe their work. A good reminder to challenge our reasoning whenever we’re designing or building. (cm)

2. Join The JAMstack Revolution!

Last week, we were delighted to announce ticket sales open for a brand new event: say hello to JAMstack_conf London taking place this July! Yep, we’re teaming up with our good ol’ friends at Netlify to learn together — directly from the creators powering one of the most transformational periods in web development to date.

The event will be a celebration of today’s modern web technologies as well as the engineers and companies who are pushing the boundaries of tomorrow’s web architecture. Static site generators, serverless architecture, and powerful APIs are giving front-end teams full-stack capabilities — without the pain of owning infrastructure. Join us! (ch)

3. Improving Performance With Inline CSS

With browsers having to download and parse CSS files before rendering a page, your CSS can easily become a performance bottleneck. To improve the perceived performance, Milica Mihajlija suggests extracting and inlining critical CSS for above-the-fold-content. However, inlining prevents the file from being cached for reuse. To close this gap, Scott Jehl found a solution that uses Service Worker and Caching APIs to enable caching for inline code. Combined, Milica’s and Scott’s solutions make a perfect match to take your site’s performance to the next level. (cm)

4. Programming Design Systems

Are you a designer who wants to become a better programmer? Or vice versa? Then Rune Madsen’s free digital book Programming Design Systems is for you. The practical introduction to design systems focuses on the elements of visual design and how they relate to algorithm design. Currently covering the topics “Shape”, “Color”, and “Layout, the book is a work in process with more chapters coming up, so that by the end of the book, you’ll know how to create new and interesting designs and how to evaluate whether these can be considered successful. (cm)

5. A Designer-Friendly Pseudo 3D Engine

When Dave DeSandro wanted to make a video game, most 3D engines were too powerful and complex for his purpose. So he decided to come up with a solution himself. One that lets him design and display simple 3D models without a lot of overhead. Meet Zdog. Zdog is a pseudo 3D engine, that means that its geometries exist in 3D space but are rendered as flat shapes in <canvas> and <svg>. It’s an effective trick that turns dots into spheres and circles into toruses to create the 3D illusion. Clever! (cm)

6. Give Your Products More Life With Animation

Animation makes your digital products feel more real and more emotional. To help you make full use of this power, you might want to take a look at the free Animation Handbook by Ryan McLeod. It teaches you the value of motion, seven animation principles, and how thoughtful animations can ensure greater trust with users. Valuable lessons learned from leading designers at Google, Headspace, Lyft, Zova Fitness, and others are also part of the book. (cm)

7. Real Data For Your Mockups

Over are the times of using lorem ipsum to populate your design mockups. The open-source Data Populator fills them with meaningful content instead. Available for Sketch and Adobe XD, the plugin lets you prepare JSON data with corresponding keys that fill the placeholders in your design. And well, designing with real data comes with somebenefits — apart from being motivating. Real content informs design decisions and, since data is relentless, it makes it easier to design for robustness, too. (cm)

8. Freebie: Animated Icon Pack

If you’re looking for a versatile animated icon pack, Brodie Pointon has got you covered. His Flight Icons are built for iOS, Android, web, and video. They’re available in both JSON and GIF formats and are based on Cole Bemis’ open-source Feather Icons (if you don’t need the animated feature, be sure to check those out, too). (cm)

9. Small Nuggets Of Web Dev Wisdom

What did you learn today? To keep track of and share the things he learned, Manuel Matuzovic started the project TIL (short for “Today I learned”). Whether it’s centering a flex-item or a handy DevTools shortcut, Manuel summarizes his discoveries in brief tips and provides a link to the original resource. A treasure chest for every web developer. (cm)

10. Upcoming In Smashing Membership

Thank you for being smashing! Over the last months, we’ve been increasing the number of webinars (without increasing the price of membership — it still starts at just $5 a month!) and have also improved video quality since we’ve moved to Zoom. Also, the eBook version of Andy Clarke’s brand new book “Art Direction for the Web” is now available as a part of the Membership, too. Obviously.

Coming up next:

Smashing TV on June 13 at 16:00 GMT
“The Five Whys Of Web Font Loading Performance” with Zach Leatherman
Smashing TV on June 19 at 16:00 GMT
“Video Editing With CSS And JavaScript” with Eva Ferreira
Smashing TV on June 27 at 15:00 GMT
“Designing Landing Pages That Convert (And Look Great!)” with Laura Elizabeth
Smashing TV on July 9 at 16:00 GMT
“The Power Of Digital People” with Kristina Podnar

We are very grateful for your support which allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. (You could become a Member, too and join us in Smashingland where everyone is beautiful and you never get merge conflicts. )

11. Our Next Smashing Workshops

In our workshops, we are looking into the current state of front-end and interface design, covering advanced challenges and actual real-life solutions to front-end problems.