June 5, 2018 Smashing Newsletter: Issue #207

Editorial

Every company is hiring, and every company is struggling with finding just the right candidate for the job. Best candidates are the ones who keep learning on their own, and the ones that have a broader overview of the tech stack and the design process. That’s why our upcoming SmashingConf Toronto— taking place in just three weeks — will be looking into how designers design and how developers build live. That’s right: no slides, but refactoring sessions, checkout refinements, accessibility/performance audits and live coding with Vue.js and machine learning. It really doesn’t get more practical than that.

Only three weeks left to the inaugural SmashingConf Toronto!

400 friendly attendees, 15 speakers and two full days. We provide group tickets for companies and agencies, as well as students and diversity tickets, too. Your team has been working hard, so maybe they could be rewarded with a practical conference and workshop, too? ;-) To the tickets →

I’m looking forward to meeting you all in Toronto soon!
— Vitaly (@smashingmag)

Table of Contents

1. Inclusive Card Components
2. Text Editing Techniques And Shortcuts
3. Take Your UI From Good To Great
4. The Cost Of Dark Patterns
5. Short And Sweet: An Accessible Character Counter
6. A Way Forward To Prettier Gradients
7. Generate Colorful Backgrounds With A Few Clicks

1. Inclusive Card Components

Cards are a popular web layout component, but there’s no unified standard to make them semantic and accessible (e.g. with a element). To help you solve these problems when designing cards, Heydon Pickering explores different permutations of a simple card component and shares tips for keeping the balance between sound HTML structure and ergonomic interaction. (cm)

2. Text Editing Techniques And Shortcuts

Typing and manipulating code often involves a lot of repetitive and—let’s be honest—quite tedious tasks. So, knowing your code editor is essential if you want to streamline your workflow. To give your process a little efficiency boost, Ben Frain summarized 18 text editing techniques every front-end developer should know in one handy blog post. (cm)

SmashingConf New York (October 23-24)

We’re very happy to announce the 5th SmashingConf New York 🇺🇸 taking place on October 23–24 in NYC. For this one, our speakers will cover all kinds of failures and the decisions they had to make to turn it all around. We’ll look into all those shiny new things in front-end and design, from Progressive Web Apps to (web fonts) performance, CSS Secrets to Design Systems, and how to convince your colleagues and clients the right way. With Sara Soueidan, Dan Mall, Monica Dinculescu, Jason Grigsby, and many other speakers.

The early bird tickets to SmashingConf New York 2018 are now available — grab yours before it’s gone!

3. The Cost Of Dark Patterns

We all know that dark patterns do a good job at tricking users into doing things they otherwise wouldn’t do. An example would be when adding insurance to an order or signing up for reoccurring billing. It’s beyond question that tricks like these are unethical, but they can harm your business, too.

Paul Boag now shares three reasons why you should avoid dark patterns and aggressive persuasion from a business perspective. A good read that dives deep into brand loyality, negative publicity, buyer’s remorse, and how all of these intertwine. (cm)

4. Take Your UI From Good To Great

Are you tired of relying on Bootstrap but still need a helping hand when it comes to designing a UI from scratch? Adam Wathan and Steve Schoger have got your back. Their project Refactoring UI explains UI design tactics from a developer’s point of view. (cm)

5. Short And Sweet: An Accessible Character Counter

It’s the details that make the difference. Rik Schennink now introduces a small component that’ll make a big difference to screenreader users: an accessible character counter.

“Short and Sweet” (as it’s called) tells the user the number of characters left when a form field is focused. It was tested with VoiceOver in Safari and NVDA in Firefox, modern browsers, and IE 10+. This little helper comes without any dependencies and is easy to set up. It also updates periodically while typing. You can get a feel for how it works in this demo. (cm)

6. A Way Forward To Prettier Gradients

Gradients often don’t turn out looking as smooth as you’d hope them to be. The problem is hard edges, especially where the gradient starts and ends. To help you cater for prettier results, Andreas Larsen built a little Sketch plugin: Easing Gradient.

The plugin makes your gradients as invisible as possible so that they don’t interfere with text or UI that you place on top of them. You can install the plugin with Sketch Runner or download the package via GitHub. By the way, there’s also a PostCSS plugin available that does the same, as well as a hand-coded solution. (cm)

7. Generate Colorful Backgrounds With A Few Clicks

A cool background graphic can draw attention to a blog post, enhance your social media profile, or simply freshen up your phone’s home screen. To make creating abstract and colorful backgrounds a breeze, Moe Amaya’s project Cool Backgrounds now unites the best JavaScript background generators in one place. (cm)

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.