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.
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
- Inclusive Card Components
- Text Editing Techniques And Shortcuts
- Take Your UI From Good To Great
- The Cost Of Dark Patterns
- Short And Sweet: An Accessible Character Counter
- A Way Forward To Prettier Gradients
- Generate Colorful Backgrounds With A Few Clicks
Cards are a popular web layout component, but there’s no unified standard to make them semantic and accessible (e.g. with a
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.
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)
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)
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)
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)
- Email, Design Teams, Regex and Compression
- CSS Linter, Regex, Performance, Accessible Components
- Free Fonts, CSS, Design Systems and SVG
- npm, Async CSS, Free SVG/EPS Icons
- Serverless, Gradients and Degreeless Design For Everyone
- State of CSS, Variable Fonts and Staying Focused
- Performance, Sketch and Animation Handbook
- Animation In React, CSS Sticky and Inclusive Design
- Business For Designers, CSS Experiments and Open-Source Illustrations
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.