Smashing Newsletter: Issue #218

Editorial

I’m in San Francisco this week for the Google Developers Experts Summit and Chrome Dev Summit, and experiencing the smoke-filled air caused by the wildfires that are burning across California. We’re a long way from the active fires — I can only imagine how bad it must be close by, and I feel for those people who have lost homes, businesses, and loved ones.

As some people were posting about the air quality in San Francisco, I saw tweets from others pointing out that many other places around the world struggle with air this polluted every day. I spent some time exploring this map of air quality around the world. Tweets from real people struggling with this, coupled with research and data helping to bring to life something I knew about academically — poor air quality — but am fortunate enough not to often have to worry about in my own life.

As a person old enough to have grown up before the web, I learned about people from around the world from books and TV — with a version of their lives mostly filtered by an author or television producer. It always struck me how the web was able to bring diverse communities into each other’s lives, allowing us to see the world as they did. Social media tools made that even more possible. For several years, I used to enjoy the photos on a Flickr group called “My Backyard,” and be fascinated by the amazing birds and creatures that were everyday visitors for folks around the world. I’ve always tried to follow people from different cultures on Twitter, and follow some of the links they post, read about their day to day.

Today, we seem to so often hear about the negative aspects of technology bringing people together. Technology is being used to spread misinformation and fear, to divide rather than bring us together. I’m so sad that these tools which had their start in a time when many of us were simply marveling at the ability of social networking to expand our world view, are implicated in that.

These are complex issues. However, at an individual level, we can still use the web to help ourselves understand the world and the different issues people face based on their location, race, religion or economic status. To push against those who would seek to divide us, to cause us to distrust people not like us. I’d like to invite you all to dig a little deeper when you next read some news story. Follow people on social media from different places and walks of life, read the things they post, follow their links. Build your own understanding, and offer help where you can.

Here’s to understanding each other,
— Rachel (@rachelandrew)

Enforcing Accessibility With PropTypes
Variable Fonts With A Fallback
SmashingConf San Francisco 2019
Finding And Live-Previewing Variable Fonts
30 Seconds Of CSS
Redesigning For Dark Mode
SSL Certs Made Easy
Job Criteria Spreadsheet
A World Of Open-Source Icons
Chrome Dev Summit Goodies
Upcoming In Smashing Membershp
Our Next Smashing Workshops

1. Enforcing Accessibility With PropTypes

Did you know that React comes with type-checking abilities that are already built in? The propType property lets you run typechecking on the props for a component and, thus, make sure the data you receive is valid.

Brad Frost added PropTypes to all the components in his React project and found that (in combination with isRequired) they help enforce accessibility best practices. If you define a heroimgalt prop to your hero image, for example, your terminal and the browser’s console will tell you in case you didn’t define the alt value. A small detail with a lot of potential. (cm)

2. Variable Fonts With A Fallback

Variable fonts are finally bringing more typographic richness to the web — at a relatively low file size. All major modern browsers are supporting them now, but what about folks who use older browsers? For them, your carefully crafted typographic experience would fall back to a plain system font. If you don’t want that to happen, you can implement a classic web font as a fallback. Oliver Schöndorfer explains how to do it. (cm)

3. SmashingConf San Francisco 2019 (Apr 16-17)

Here we go again! After a wonderful NYC event, we’re getting ready for the next adventure: SmashingConf San Francisco. We’re happy to welcome Miriam Suzanne, Chris Coyier, Jennifer Brook, and Sara Soueidan among the first speakers who will be exploring practical front-end techniques and design strategies — mostly in live design and live coding sessions.

SmashingConfs are friendly, inclusive events focused on real-world problems and solutions.

If your boss needs some convincing, you can download our Convince Your Boss PDF (602 KB). 50 Early Bird tickets are now available!

4. Finding And Live-Previewing Variable Fonts

Speaking of variable fonts, there are two handy tools that can help you find variable fonts and live-preview their mighty powers. One of them, Variable Fonts, wants to get you familiar with variable fonts in a way that isn’t overwhelming, while at the same time providing more information about the fonts, their creators, and where to find and how to use them. Most publicly available variable fonts are documented on the site. Axis Praxis, on the other hand, is a playground where you can experiment with more than 30 fonts. If your font isn’t listed, just drag and drop it to start testing. Nifty! (cm)

5. 30 Seconds Of CSS

Learn a new CSS snippet in 30 seconds? Let’s take on the challenge! 30 Seconds of CSS curates useful CSS snippets you can understand in, well, 30 seconds or less! The snippets cover layout, visuals, animation, interactivity, and more. So, no matter if you want to create a bouncy loader animation or evenly distribute children within a parent element, the collection has got you covered. One for the bookmarks. (cm)

6. Redesigning For Dark Mode

Last month, Apple launched MacOS Mojave’s new dark mode feature, and even though it’s currently only implemented in Safari Technology Preview 68, it might be a worthwhile investment to already get your site ready for it today, as Andy Clarke argues. That’s why he summarized how to implement dark mode on products and websites and what you need to consider to maintain accessibility and readability when doing so. A handy overview of the state of things and how you can prepare for what’s to come. (cm)

7. SSL Certs Made Easy

If you’ve developed an HTTPS site locally once before, you probably know the hassle of generating an SSL certificate on your own. And, well, generating it isn’t all; you also need to tell your machine to trust it, so that the browser doesn’t display any “This connection is not private” errors.

Luckily, Russel Heimlich’s bash script is here to help: It generates trusted self-signed SSL certificates for local development on your Mac. A real timesaver. If you need a more robust solution for Windows and Linux, be sure to check out Filippo Valsorda’s mkcert. (cm)

8. Job Criteria Spreadsheet

Making decisions can be hard. Especially when it comes to big ones such as taking on a new job. To back up his decisions by data, Joel Califa put together a spreadsheet in which he ranks and compares job offers by different criteria — from getting stuff done and quality of life to growth potential and satisfaction. It is now open sourced, so you can copy and tweak it to your needs. A useful little helper, but remember: data is good, but you should trust your gut feeling, too. (cm)

9. A World Of Open-Source Icons

What started as a semester project by Interaction and Communication Design students, has grown to a comprehensive open-source emoji and icon library: OpenMoji. More than 1,000 emojis have been carefully designed and reviewed for the project, ranging from UX and technology-themed emojis to animals, nature, food, people, activities, places, and much more. The icons are available in colored as well as outlined versions in SVG, PNG, and OTF formats. (cm)

10. Chrome Dev Summit Goodies

News from the Chrome Dev Summit: Google’s Project VisBug is bringing design tool interactions and hot keys to the browser, giving designers and content creators the power to edit layouts, styles, text, and images right in the browser. VisBug is available as a Chrome extension. DevTools for designers so to say.

Another goodie announced at the summit is Squoosh, a progressive web app for image compression. It uses Web Assembly to do more with codecs which the browser doesn’t have baked in. Supported image formats include JPEG, GIF, SVG, WebP, and more. (cm)

11. Upcoming In Smashing Membership

We recently added our newest book Form Design Patterns to the Smashing Membership, an eBook on designing and coding accessible and progressively enhanced web forms. The eBook is included in the Smashing Membership. Each member makes a difference and gets valuable content from it, too!

Coming up:

📺 Smashing TV: “Introduction To Machine Learning And Artificial Intelligence” with Allan Kent. (Nov 27, 11:00 AM Eastern)
“The State of the Web in South-East Asia” with developers from Indonesia, the Philippines and Singapore. (Dec 4, 11:00 AM Eastern)
“Ethics in Design” with Trine Falbe. (Dec 11, 11:00 AM Eastern)

We are very grateful for the kind and generous support of 1,300 members — so grateful, we’ll be sending a gift to our first Members to celebrate our first anniversary at the end of the month! Your support allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Thank you so much for making it happen!

12. 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. Coming up next:

🇬🇧 Belfast, Northern Ireland, Pixel Pioneers, Nov. 22nd, 2018

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!

November 13, 2018 Smashing Newsletter: Issue #218

Previous Issues