Smashing Newsletter: Issue #248

Editorial

Can better design make the world better? I truly believed so when I was growing up. As I was studying computer science back in the early 2000s, our professor invited Vint Cerf, one of the few Internet pioneers who helped design and build the TCP/IP protocol and other building blocks of the Internet.

I was listening to his speech from one of the first rows, and of course, I couldn’t resist asking a question when I had a chance. I asked something that everybody asks at some point: What skills would be important for a student to master in order for them to be successful in life. Vint kept his breath for a moment, and then answered looking straight at me: “You need to learn how to learn. And learn how to teach. Because that’s when you learn best.”

It might not sound like a big deal, but that answer has stayed with me for almost twenty years now. And throughout all these years, I’ve learned that the best way to truly understand something is to pull it apart, study it meticulously, bring it back together and teach it to others. So around five years ago, I decided to dedicate my time to teaching every year for one entire month.

This year is no exception. In fact, I couldn’t be more honored to be teaching in the University of Applied Science in Amsterdam (thanks, Vasilis!) and in the Projector Design School in Kyiv, Ukraine (thanks, friends!) this February. In fact, as I’m writing this editorial, I’ve just finished a 10-day course for product designers and product managers in Kyiv, Ukraine.

Students at work in a Smart Interface Design Patterns class at the Projector design school in Kyiv, Ukraine.

It’s always incredibly empowering to see how students are ignited when working on our little interface design projects together, and how their creativity breaks boundaries as we all learn and explore new uncharted territories — together. Tough constraints, little time, difficult challenges, remarkable solutions.

They learn, and I learn along with them, and get inspired to make something that has never existed on the web just yet. The results are often surprising, original, exciting and refreshing, and I would never trade this experience for anything else. And perhaps some of the things we discuss and explore together will help some students succeed in their careers, just like Vint’s words had helped me.

Of course, teaching isn’t for everybody, but perhaps all of us could seek local schools, universities and communities, and share something about what we care and value in life, in our work, with our families and in the world around us. Little changes often make for a significant impact. We just need to get started and do something.

I still believe that better design can make the world better, but it’s only through people who genuinely care about other people and their craft and want to make that world a bit better, that this change will happen. My aim is to do a little something every year that would help us all get there one day. Perhaps that could be one of your aims, too.

— Vitaly (@smashingmag)

Learn CSS Positioning With… Cats!
Find And Fix Errors In Your Designs
The Ultimate Guide To iframes
Our Smashing Books and Conferences
A Deep Dive To Autofill
An Open-Source Font For Developers
Performance Testing On A Blank Slate
An Ancient Hero’s WebGL Adventure
Vintage Pattern Inspiration
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. Learn CSS Positioning With… Cats!

Could there be a better way to learn CSS positioning as with a bunch of friendly cats? That’s probably what Ahmad Shadeed thought, too, when he created his interactive guide to how CSS positioning works.

The guide teaches you to use CSS to position three cartoon cats and their blanket inside a box, and once you’ve grasped the concept, you can start tinkering with the interactive demo that visualizes how the result changes as you edit the values. Now who said learning can’t be fun? (cm)

2. Find And Fix Errors In Your Designs

We all know those moments when we are so immersed in a project that we lose the distance we need to be able to catch little inconsistencies: an incorrect border-radius around an image or missing styles or text, for example. If you’re designing in Figma, the free and open-source plugin Design Lint makes finding and fixing errors like these easy so that no bug makes it into production.

Design Lint checks for missing text, fill, stroke, and effects styles, and catches incorrect border-radius values on all your layers. To not interrupt your workflow, the plugin automatically updates as you fix errors. The repo is available on GitHub, so feel free to write specific rules to tailor the plugin to your needs. (cm)

3. The Ultimate Guide To iframes

With a lot of articles advising against them, iframes don’t have the best reputation. JavaScript developer Nada Rifki sees things differently: She suggests not to let their reputation prevent you from relying on iframes. After all, they have many legitimate use cases.

To help you form your own opinion on this controversial element, Nada wrote an ultimate guide to iframes which explores iframe features and how to use them; tricky situations where iframes might come in handy; last but not least, how you can secure your iframe against potential vulnerabilities. A great opportunity to see things from a different perspective. (cm)

4. Smashing Books and Conferences

As you are reading these lines, we are working on our next books and conferences for 2020. In December, we've released Heydon Pickering's Inclusive Components, a practical handbook for building fully accessible interfaces.

Just a few weeks ago we've announced The Ethical Design Handbook, another practical guide on how to make ethical decisions to influence positive change and help businesses grow in a sustainable way. The book will ship wordlwide early March. We couldn't be more excited to see it in your hands!

We also work on our upcoming conferences: SmashingConf SF 2020 (April 21–22) and SmashingConf Austin 2020 (June 9–10), with hands-on workshops, friendly community and practical sessions on front-end, CSS/JavaScript, design and UX. We pour our heart and soul to make our events memorable and useful for everyone, and we hope to see you there as well. We'd be honored to see you there! (vf)

5. A Deep Dive To Autofill

The less you ask of users, the more inclined they are to complete a form, and faster form filling increases checkout conversion, as Shanmuga Priya Pandiyan from the front-end engineering team at eBay points out in her guide to autofill.

The guide explores how to effectively use autofill features to help users complete address and credit card forms as quickly and frictionless as possible. You’ll learn more about the peculiarities of the expiration date and cardholder name fields, how to ensure that autofill is successful across platforms, and the autocomplete attribute values that make your address forms work like a charm. Little details that make a difference. (cm)

6. An Open-Source Font For Developers

High readability, quick text scanning, no distraction — these are just some of the demands developers have on a typeface. Well, the free and open-source typeface JetBrains Mono meets all of them beautifully.

To do so, Jet Brains Mono takes advantage of some small but mighty details: Compared to other monospace fonts, the height of JetBrains Mono is increased while the characters remain standard in width to keep code lines to the length developers expect. To improve readability even further, 138 code-specific ligatures reduce noise so that your eyes need to process less and whitespace becomes more balanced. Clever! JetBrains Mono comes in four weights and supports 145 languages. (cm)

7. Performance Testing On A Blank Slate

Browser extensions have a noticeable impact on performance and bandwidth, so noticeable that a page that is around 1.5–1.6Mb might take over 55Mb to load with browser extensions running. Given this impact, it’s always a good idea to create a clean user profile before you start measuring and testing performance.

How to do it? The following guides help you set up a new profile in Firefox, Chrome, and Edge. And did you know that Firefox even lets you set which extensions are allowed to run in Private Browsing windows? (cm)

8. An Ancient Hero’s WebGL Adventure

A reluctant hero on a quest he never asked for — that’s the story behind the browser-based adventure video game Heraclos. Set in ancient Greece, the young Heraclos stumbles across an amphora that belongs to one of the gods. He is declared to be the chosen one and gets sent off to climb the secret mountain and return the amphora to his owner.

What makes the game so noteworthy is the fun twist in the interaction between the hero and the god (a parody of common heroic stories) but also the technical background: Heraclos was designed in only three months by a group of students at the Gobelins school of images in Paris — with WebGL and Cannon.js. A great example of what’s possible on the web. (cm)

9. Vintage Pattern Inspiration

Inspiration lies everywhere, and sometimes it’s, quite literally, at your feet: tiled floors with their beautiful patterns and colors.

The folks at Present & Correct stumbled across a 1940’s catalog from Céramiques de la Lys, a French tile manufacturer, that is full of interesting patterns and layouts. And since a treasure like this is too good not to be shared, they posted scans from the catalog on their blog. Eye candy to get lost in. (cm)

10. Upcoming In Smashing Membership

We’re still waiting to get the physical copies back from the printer, but the eBook is already available for our dear Members: The Ethical Design Handbook. It is and always will be free for Smashing Members. Please check your dashboard ("eBooks") to download it.

“Video Killed My Data Plan: Performant Video Delivery On The Web” with Doug Sillars— Feb. 25 at 17:00 London time

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. 😉

11. 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.

🇩🇪 TypeTech (Mar. 13–14) in Munich, DE.
🇺🇦 JS Fest (Apr. 2) in Kyiv, UKR.
🇺🇸 SmashingConf SF (Apr. 21–22) in San Francisco, USA.
🇮🇱 UX Salon (May 10–11) in Tel Aviv, Israel.
🇵🇱 infoShare Conference (May 13–14) in Gdańsk, PL.
🇺🇸 SmashingConf Austin (June 9–10) in Austin, Texas, USA.
🇩🇪 SmashingConf Freiburg (Sept. 7–8) in Freiburg, DE.
🇺🇸 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)

February 18, 2020 Smashing Newsletter: Issue #248

Previous Issues