Smashing Newsletter: Issue #249

Editorial

We cover a huge range of subjects on Smashing Magazine. Sometimes authors will ask me whether I’d be OK with a piece about a CSS framework or a certain approach to writing CSS, inferring that because I’m known for my CSS and web platform work I’d be very much against such things. As it happens, I enjoy reading these pieces, and I love the fact that we can share an article about a new CSS feature one day, and a popular JavaScript framework on the next.

I find that quite often when I don’t see the need for a certain approach, it’s because I’ve never come up against the problem that it solves. Reading articles or watching conference talks can be enlightening. I might still not be a fan, but I can gain an understanding of why people might use a certain thing. And, given that we rarely get to ship a project without making some compromises, I can be open to the fact that one day it might be the best option for something I’m working on.

I think we lose a lot when we become tribal, refuse to believe that another approach might have merits, or assume that because a thing solves our problems it should work for everyone and angrily defend it against all opposing thought. We lose our ability to solve the problems that we have, rather than those of someone else. We lose the ability to have rational discussions about the pros and cons, and to learn from each other. It might be that a certain approach isn’t for you, but that there is a nugget of a great idea in there that you may want to adopt in your work.

In my work on CSS, I want to see what problems people are solving outside of the core platform features because there may be things that could be better solved by the web platform. Is there a general need for something like this? In my work at Smashing, I want to publish content that truly represents the field of web design and development today. I’m helped in that by my team of editors who often know far more about their specialist subject than I do, and I hope that our readers will sometimes take a look at a piece that isn’t related to their favorite tools or technology, and learn something about it.

Enjoy learning from each other!
— Rachel Andrew

A Guide To Console Commands
How To Make Inputs More Accessible
Open Peeps, A Free Hand-Drawn Illustration Library
When CSS Blocks
An Open-Source Screen Recorder Built With Web Technology
All Your SVG Icons In One Place
Design And Creativity Are Borderless
Intimacy, An Interactive Short Poem
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. A Guide To Console Commands

The capabilities of the developer’s debugging console have evolved significantly in the past years — from a means to report errors to automatically logging information like network requests and security errors or warnings. There’s also a way for a website’s JavaScript to trigger various commands that output to the console for debugging purposes. And while these features are mostly consistent between browsers, there are also some functional differences.

If you’re looking for an overview of what console commands are capable of, Travis Almand put together a helpful guide. It covers Firefox and Chrome and examines various commands that can be used in the browser’s console output or with JavaScript. A handy summary. (cm)

2. How To Make Inputs More Accessible

In 2019, WebAim analyzed the accessibility of the top one million websites, with a shocking conclusion: the percentage of error-free pages was estimated to be under one percent. To make our sites inclusive and usable for people who rely on assistive technology, we need to get the basics of semantic HTML right. With its credo of starting small, sharing, and working together, Oscar Braunert’s article on inclusive inputs is a great starting point to do so.

Starting off with the basics of WAI, ARIA, and WCAG, the article explores how to make inputs more accessible. The tips can be implemented without changing the user interface, and, as Oscar puts it: “If in doubt, just do it. Nobody will notice. Except some of your users. And they will thank you for it.” (cm)

3. Open Peeps, A Free Hand-Drawn Illustration Library

584,688 possible combinations. That’s the number of different characters you could create with Pablo Stanley’s hand-drawn illustration library Open Peeps.

Open Peeps lets you mix and match different vector elements to create diverse personalities: combine clothing and hairstyles, change emotion with facial expressions, set the scene with different poses — the possibilities are sheer endless. And if you’re in a hurry, Pablo also prepared some ready-to-download Peeps that you can use right away. Open Peeps is released under a CC0 license, so you are free to use the illustrations in both personal and commercial projects. A great way to add a handmade touch to your design. (cm)

4. When CSS Blocks

For a long time, the Filament Group’s loadCSS project has been the way to load non-critical CSS, and particularly the preload-polyfill approach is still used in production these days. The idea: You load any stylesheets as preloads, and then use their onload events to change them back to a stylesheet once the browser has them ready. Browsers that don’t support preload are served a polyfill instead.

While the pattern is no longer recommended, it’s a good illustration of why it’s important to be careful about how you use preload and how the order of your document influences performance, as Tim Kadlec points out. In his article “When CSS Blocks”, he dives deeper into network priority issues and what you can do to improve performance through a minor change to the way you load CSS and the DOM order. (cm)

5. An Open-Source Screen Recorder Built With Web Technology

Have you heard of Kap, yet? The open-source screen recorder is one that is definitely worth checking out if you’re frequently doing screen recordings.

Built with web technologies, Kap produces high-quality recordings in GIF, MP4, WebM, or APNG formats. You can include audio (even from your microphone), highlight clicks, and trim the recordings. As a bonus goodie, there are also options to share your recorded GIFs on Giphy, deploy them with ZEIT now, or upload them to Streamable. Perfect for technical demos. (cm)

6. All Your SVG Icons In One Place

Having one central place to organize all your assets is always a good thing, not only for teams — to keep track of what you have and to quickly find what you’re looking for. The free cross-platform app Iconset is such a place: it helps you collect, customize, share, and manage all your SVG icon sets.

To make it easier to find the icon you’re looking for, you can organize your icons in sets or with tags, and, once you’ve found the icon you need, you can drag it directly into your favorite tool. A real timesaver. Iconset supports cloud services like Dropbox or OneDrive so that all your icons are always in sync between team members. The app is available for Mac and Windows. (cm)

7. Design And Creativity Are Borderless

From January to December 2018, French designer Robin Noguier went on a journey through 16 countries — from Sri Lanka to China, Indonesia to Australia, Mexico to Chile. In each country he traveled to, he met, interviewed, and took portraits of one creative to shine a light on the talents and design industries that are usually underrepresented.

Robin’s project Esperanto takes us with him on this exciting journey, sharing the stories of the people he met and granting insights into different processes and industries. As Robin concludes after the year: We all speak the same language when it comes to design and have more similarities that bring us together than differences that pull us apart. (cm)

8. Intimacy, An Interactive Short Poem

An inspiring experiment comes from the French graphic and interaction design student Thibaud Giffon: “Intimacy”. The interactive short poem uses abstract images, sound, and text to explore intimacy from different angles.

Compassion, distance, confusion, touch — these are four of the eight chapters that make up the poem; and each one of them reflects the topic in its own, unique way: with warm and harmonious waves or circles that melt into each other but also with dissonant strings or colorful bubbles that burst as they make space for themselves. Beautiful! (cm)

9. Upcoming In Smashing Membership

Only a few more days now until we 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.

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 channel), so our speakers can review and provide feedback to your current projects — live!

“Building A Modern Electron App With React Hooks” with Cassidy Williams— March 5 at 17:00 London time
“Live UX Review” with Paul Boag— March 10 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.

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.

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)

March 3, 2020 Smashing Newsletter: Issue #249

Previous Issues