Smashing Newsletter: Issue #242

Editorial

Accessibility has often been considered an afterthought. For years, it was an extra effort that sometimes was added on top of a finished product to ensure compliance. We’ve learned that it’s much easier to consider accessibility early on to avoid costs and maintenance issues down the line.

Yet when creating accessible products, it’s really difficult to foresee a wide range of situations in which our users might find themselves in. To many of us, ARIA seems to be mysterious, and in time of single-page applications, it’s quite difficult to know where and how accessibility fits in. We need to build robust and reliable solutions in a world that’s inherently chaotic and unpredictable. How do we even start?

We start by looking at components we use frequently: the good old accordion, the mega-dropdown, the tables, the tooltips, the notifications. And then we build out from there. With accessible components in place, we can ensure a decent foundation to start with, without making the same mistakes others have done.

At its heart, our new book, “Inclusive Components”, is just a collection of inclusive, accessible, tested components you can use in your projects right away. It examines 12 common interface patterns — accordions, tables, modals, notifications, tabs, toggles, and everything in-between — through the lens of inclusion. Heydon Pickering goes deep into details explaining the whys and the hows, making accessibility more approachable and friendly for developers.

We hope that by publishing the book, we, as a community, can better understand and apply accessibility to our products. You can start reading the eBook right away, and you can get the printed book as well (shipping starts early December). Also, jump to the table of contents.

P.S. By the way, we have free live session on accessibility with Harris Schneiderman who’ll be looking into how to translate design wireframes into accessible HTML/CSS. We’d love to see you there!

Happy reading, everyone!
— Vitaly (@smashingmag)

Designing Accessible Color Systems
JavaScript Frameworks Security Report 2019
Introducing The Smashing Podcast
Open-Source Tutorials For Learning GraphQL
Digital Wellbeing Experiments
Recursive: A Free Highly-Flexible Variable Font
Fixing Image Orientation
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. Designing Accessible Color Systems

Getting color contrast right is an essential part of making sure that not only people with visual impairments can easily use your product but also everyone else when they are in low-light environments or using older screens. However, if you’ve ever tried to create an accessible color system yourself, you probably know that this can be quite a challenge.

The team at Stripe recently decided to tackle the challenge and redesign their existing color system. The benefits it should provide out of the box: pass accessibility guidelines, use clear and vibrant hues that users can easily distinguish from one another, and have a consistent visual weight without a color appearing to take priority over another. If you’re curious to find out more about their approach, their blog post will give you valuable insights. (cm)

2. JavaScript Frameworks Security Report 2019

The folks at Snyk published their state of JavaScript frameworks security report for 2019. It investigates the state of security for the Angular and React ecosystems as well as security practices for the popular JavaScript frameworks Vue.js, Bootstrap, and jQuery.

Given the fact that Angular and React both have their proponents with ongoing discussions whether one or the other is a true framework, the report doesn’t intend to venture into rivalries but reviews each of them as viable front-end ecosystem alternatives, while focusing on security risks and best practices and the differences between them. A must-read. (cm)

3. Introducing The Smashing Podcast

What’s that strange sound in your ears? It’s the brand new Smashing Podcast, which started last week! We kicked off with two episodes — each catches you up on the latest from Smashing Magazine and has an interview with an industry expert on a specific topic.

In the first episode, our host Drew McLellan speaks to Andy Clarke about his book Art Direction For The Web, and finds out how art direction can be applied to our own web design projects. The second episode is all about running a freelance business. We talk with experienced freelancer Liz Elcoate about juggling your time, writing proposals, and managing your mental health while running a one-person business.

A new episode of Smashing Podcast is available every two weeks and you can subscribe in a podcast player of your choice. (dm)

4. Open-Source Tutorials For Learning GraphQL

GraphQL enables a client to specify exactly what data it needs from an API, so instead of multiple endpoints that return fixed data structures, a GraphQL server exposes a single endpoint and responds with precisely the data a client asked for. If you want to wrap your head around GraphQL, here are two great resources to get you started.

How to GraphQL is a free open-source tutorial to take your GraphQL skills from zero to production. Divided up into two parts, part one covers the core concepts of GraphQL while part two gives you a broader understanding of the GraphQL ecosystem. The other learning resource comes from the makers of the GraphQL engine Hasura: three open-source community-maintained tutorials (front-end, mobile, and back-end tutorials) teach you GraphQL to get you ready to build a real-time application in two hours. (cm)

5. Digital Wellbeing Experiments

Everyone has a different relationship with their phones, but we all have something in common: There are always those moments when it feels that phones distract from life rather than improve it — when having dinner with friends and everyone checks their incoming notifications, for example.

With their Digital Wellbeing Experiments, Google now showcases ideas and tools that help people find a better balance with technology and inspire designers and developers to consider digital wellbeing in everything they design and build. There are experiments that let you switch off from technology as a group, for example, stay focused by getting the right apps at the right times, or take the most important things with you on a printed “paper phone”. The code for the experiments is open-source, and if you have an idea for a digital wellbeing experiment, the Hack Pack will help you bring it to life. (cm)

6. Recursive: A Free Highly-Flexible Variable Font

A font that gives you typographic control over five stylistic axes and can go from Sans to Mono? The variable font Recursive makes it possible, offering an entirely new level of flexibility.

Taking full advantage of variable font technology, Recursive enables you to choose from a wide range of predefined styles or dial in exactly what you want for each of its axes. Inspiration came from single-stroke casual signpainting to give the font a flexible and energetic look, making it a great fit for data-rich-apps, technical documentation, code editors, and much more. Please note that Recursive is still under active development and will soon be available through Google Fonts. A beta version is already available. (cm)

7. Fixing Image Orientation

Image orientation on the web is, well, complicated. When Michael Scharnagl worked on a side project, he noticed that the images he uploaded to his server were shown in the wrong orientation. Now he wrote a blog post in which he dives deeper into the issue and how to fix it.

The reason for portrait images being displayed in landscape mode when they are embedded using <img> or background-image is the EXIF data for the image. How a browser deals with EXIF orientation depends on the browser, and there’s no cross-browser way to easily correct it either. Michael’s Node.js fix helps you correct the orientation. A handy little tip. (cm)

8. Upcoming In Smashing Membership

Last week, we pre-released Heydon Pickering’s brand new book Inclusive Components. The eBook version is and always will be free for Smashing Members, of course. 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!

Here’s the list of new webinars coming up soon:

“Building Effective Cross-Cultural Teams” with Emma Wedekind
Nov 12 at 16:00 Berlin time
“Translating Design Wireframes Into Accessible HTML/CSS” with Harris Schneiderman
Nov 20 at 19:00 Berlin time
“Encouraging Clicks Without Shady Tricks” with Paul Boag
Nov 28 at 17:00 Berlin time
“Building A CSS Layout, Live” with Rachel Andrew
Dec 3 at 18:00 Berlin 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. 😉

9. 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:

🇮🇱 UX Salon (Nov. 13–14) in Jerusalem/Haifa, Israel.
🇱🇹 UX Salon (Nov. 19) in Vilnius, Lithuania.
🇮🇹 Speaking Of (Nov. 28-29) in Milano, Italy.

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)

November 12, 2019 Smashing Newsletter: Issue #242

Previous Issues