Smashing Newsletter: Issue #244

Editorial

As designers and developers, we are usually quite busy. We’re always running behind deadlines and seeking perfect solutions, while being faced with new challenges and opportunities. Perhaps the only exception is late December when things slow down and everybody seems to be less in a hurry to deploy that feature and refactor that component. It’s a great time to be slow, and mindful.

Every year in December, I set aside a week to thoroughly think about the passing year and set out some goals for the upcoming one. They are rarely professional or financial notes though; some of these days I write down interesting stories of fascinating people I’ve met that year, and most of these days I think about my family, my close friends, and myself.

You deserve a break, and a little reward for the hard year. Take the time to be slow. Perhaps think about places you could visit.

Perhaps look back at this year and think about how happy you were. Being busy and between projects feels great sometimes, but what do you actually remember from that year? What have you learned, and who have you met? How much time did you spend with people with whom you’d actually like to spend much more time with?

Looking forward, which places would you like to visit next year? What cultures to explore? What personal achievements to accomplish? What friendships to rekindle? Perhaps you could invite your partner to join you at a music festival or an art exhibition? Get the tickets ahead of time and look forward to the wonderful and precious time to spend together with your loved ones in 2020.

Perhaps you could call a good old friend and invite them for a birthday ahead of time, or a community gathering, so you both have time to prepare and set aside for that shared experience next year.

Perhaps you’d love to clean up, sort out and back up your digital footprint to help you ensure a good smooth start to the new year. In fact, I’ve prepared a digital clean-up checklist a couple of years ago that still proves to be quite useful even today!

And don’t forget to ask yourself whether there is anything you really want and like. Do you feel that you missed out on something this year? Make sure you’ll get it — even it’s a little bit more expensive than usual — you are worth it and so is your family. Maybe by the end of 2020, you’ll be looking back at these goals and be surprised at how wonderful the year has become. And that’s something worth preparing for, isn’t it?

Happy slow times, everyone!
— Vitaly (@smashingmag)

Scaling SVGs Made Simple
Time-Travel-Debugging For The Web
Flowy, A Simple Flowchart Engine
A Portfolio That Thinks Out Of The Box
Recreating Print Layouts With CSS
Conference Videos To Catch Up On
Dealing With Ads In 2020
30 Days Of Code Tidbits
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. Scaling SVGs Made Simple

Scaling <svg> elements can be a daunting task, since they act very differently than normal images. Amelia Wattenberger came up with an ingenious comparison to help us make sense of SVGs and their special features: “The <svg> element is a telescope into another world.”

Based on the idea of the telescope, Amelia explains how to use the viewBox property to zoom in or out with your “telescope”, and, thus, change the size of your <svg>. A small tip that works wonders. (cm)

2. Time-Travel-Debugging For The Web

An early Firefox DevTools experiment that is worth keeping an eye on is Web Replay. Web Replay records your actions so you can track bugs down faster and understand your code better — a collaborative time-travel debugging instrument, so to say.

The replaying process preserves all the same JS behavior, DOM structures, graphical updates, and most other behavior that occurred while recording. Want to give it a try? Replay is already available in Firefox Nightly for macOS (still disabled by default until it is more stable, but you can turn it on manually). Handy! (cm)

3. Flowy, A Simple Flowchart Engine

Are you working on a web app with flowchart functionality? Well, then you might want to take a closer look at Flowy. Created by Alyssa X, the minimal JavaScript library is a real timesaver.

Once implemented into your project, Flowy helps you build automation software, mind mapping tools, or simple programming platforms with ease. The flowchart engine currently depends on jQuery, but there are plans to replace jQuery with ES6 in a future release to make the already minimalist Flowy even slimmer. Be sure to check out the demo to see Flowy in action. (cm)

4. A Portfolio That Thinks Out Of The Box

A lot of sites look rather similar these days, but sometimes you come across a design that surprises you, one that is different from what we are usually used to see on the web. Bruno Simon’s portfolio is such an example.

To browse the portfolio, you don’t scroll down a page or click through an image gallery but use your keyboard to maneuver a little red jeep through a 3D landscape to follow along the signs and learn more about Bruno’s projects and experiments or view his contact details. Fun! (cm)

5. Recreating Print Layouts With CSS

When it comes to creative layouts, magazines are an endless source of inspiration. And thanks to CSS Grid, there’s nothing to hold you back from bringing more sophisticated layouts to the web, too.

Inspired by magazine layouts, their use of typography and their structures, Dan Davies took on the challenge to recreate some of the print work he liked on the web. The result is an awe-inspiring collection of nine layouts that use the potential of CSS Grid to its fullest. Beautifully art-directed and responsive, they are great examples of pushing the limits of what’s possible on the web layout-wise. (cm)

6. Conference Videos To Catch Up On

Some amazing conferences took place in the past month, with beyond tellerrand, performance.now(), and Cascadia JS being only three of them. If you couldn’t attend but wish you had, there are now video recordings of the sessions available.

At beyond tellerrand in Berlin, Cassie Evans, for example, explored SVG animations, Jason Pamental talked variable fonts, and Charlotte Dann demonstrated how you can use your coding prowess to make physical art.

performance.now() in Amsterdam was, of course, dedicated to all things performance, with Henri Helvetica taking a retrospective look at how the 14 performance rules for developers from 2007 apply today in our quest to deliver and load resources as quickly as possible. How privilege defines performance (Tatiana Mac) and a deep dive into third-party performance (Simon Hearne) were also among the 14 talks.

Last but not least, at Cascadia JS 2019, 37 speakers discussed the cutting-edge of JavaScript, web development, and engineering culture this year, among them Charlie Gerard, Jasper Schulte, Samantha Siow, and Brian Holt. Lots of new takeaways guaranteed. (cm)

7. Dealing With Ads In 2020

Ads are a two-sided sword: nobody really likes them but a lot of sites depend on them to generate revenue. Working for a news company that is dependent on ads, Christian Schaefer wanted to find ways to minimize their impact and make them less annoying. Now he summarized his approach in a comprehensive blog post.

The post shares valuable insights into how Christian and his team developed a generic solution to transform and combine mobile and desktop ad code into one responsive ad loading code, how they improved performance by lazy loading the ads, what they did to prevent the ads from breaking the site’s layout, and some other things that add up to bringing the front end into a much better position when dealing with ads. Great tips for everyone who finds themselves wrangling ads. (cm)

8. 30 Days Of Code Tidbits

Who doesn’t love a bite-sized tip? One that doesn’t take long to swallow but teaches you something new to instantly ease your life as a developer? Using the hashtag #codetidbits30 on Twitter, Samantha Ming posts a new coding tidbit every day in December.

Three ways to remove array duplicates, a little trick to style elements that have no children or text at all, and a solution for displaying your data in your browser dev tools, these are only some of the tips in the series. Covering JavaScript, HTML, and CSS snippets, #codetidbits30 is a true treasure chest of front-end goodies. Be sure to follow along. (cm)

9. Upcoming In Smashing Membership

We released Heydon Pickering’s brand new book Inclusive Components. The eBook version is and always will be free for Smashing Members, of course. Please check your dashboard to download it.

We are also looking into a slightly more interactive format for our Smashing TV sessions. We kindly invite you to submit your questions or actual mock-ups of your work in the Membership channel (#tv), so our speakers can review and provide feedback to your current projects — live!

“Building A CSS Layout, Live” with Rachel Andrew— Dec 10 at 18:00 Berlin time
Improving Web Forms, Live, with Adam Silver, January 2020
Smart Interface Design Patterns, video course with Vitaly Friedman, January 2020

Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉

10. Our Next Smashing Workshops

In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems.

Practicing skills matters. For technical workshops or ice skating. Meow!

🇨🇭 Web Zürich (Dec 18) in Zürich, Switzerland.
🇯🇵 Awwwards Conference (Jan 20) in Tokyo, Japan.
🇳🇱 Awwwards Conference (Feb 19) in Ams, Netherlands.
🇺🇦 Projector Practicum (Feb 21–23) in Kyiv, Ukraine.
🇺🇸 SmashingConf SF (Apr 21–22) in San Francisco, USA.
🇺🇸 SmashingConf Austin (Jun 9–10) in Austin, Texas, USA.
🇩🇪 SmashingConf Freiburg (Sep 7–8) in Freiburg, Germany.
🇺🇸 SmashingConf New York (Oct 20–21) in New York, USA.

Or, if you’d like to run an in-house workshop at your office, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)

December 10, 2019 Smashing Newsletter: Issue #244

Previous Issues