From
smashingmagazine.com
Email Address
newsletter@smashingmagazine.com
Sent On
Tue, Jun 5, 2018 02:16 PM
Email Preheader Text
Cards are a popular web layout component, but there’s no standardized way to make them accessib
HTML
Cards are a popular web layout component, but thereâs no standardized way to make them accessible. Letâs look into the bottom of this.Issue #207 ⢠Tue, June 5, 2018 ⢠[View in the browser]( ð¨
[Smashing Newsletter](
Dear Friend,
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. It really doesnât get more practical than that.
[SmashingConf New York 2018](
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](#a1)
2. [Text Editing Techniques And Shortcuts](#a2)
3. [The Cost Of Dark Patterns](#a3)
4. [Take Your UI From Good To Great](#a4)
5. [Short And Sweet: An Accessible Character Counter](#a5)
6. [A Way Forward To Prettier Gradients](#a6)
7. [Generate Colorful Backgrounds With A Few Clicks](#a7)
8. [Upcoming In Smashing Membership](#a8)
9. [Upcoming Workshops With Vitaly Friedman](#a9)
10. [New On Smashing Job Board](#a10)
11. [Popular Articles This Month](#a11)
---------------------------------------------------------------
#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)
[Inclusive Cards](
---------------------------------------------------------------
#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)
[Text Editing Techniques Every Front-End Developer Should Know](
---------------------------------------------------------------
SmashingConf New York (October 23-24)
Weâre so 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](.
[SmashingConf New York 2018](
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.
[The Cost Of Dark Patterns](
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)
[Refactoring UI](
---------------------------------------------------------------
Our sponsor:
Online Masters in Information Design and Strategy
[Ad](
Learn to drive effective digital communication.
---------------------------------------------------------------
#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](
â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](.
[Easing Gradients](
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)
[Cool Background](
---------------------------------------------------------------
#8. Upcoming In Smashing Membership
[Smashing Membership]( helps our site keep the site alive and go ad-free. Every Member makes a difference, and get valuable content from it, too! Coming up next:
- Smashing TV ðº â[Ethics As A Design Tool]( with Morten Rand-Hendriksen â June 5 (Today), 2018
- Smashing TV ðº â[The Pizza Show]( with Sara Soueidan & Vitaly Friedman â June 26, 2018
- Smashing TV ðº â[Static Site Generators]( with Phil Hawksworth â July 10, 2018
- Smashing TV ðº â[Good Ro Great Animation â Live!]( with Val Head â July 24, 2018
We are really grateful for the kind support of almost 900 members and growing! You can [become one of us]( as well. ;-)
---------------------------------------------------------------
#9. Upcoming Workshops With Vitaly Friedman
ð¨ð¦ Toronto, [SmashingConf]( June 25 â 28, 2018
ð©ðª Freiburg, [SmashingConf]( Sept. 10 â 11, 2018
[New Front-End Adventures in Responsive Design Workshop](
Or, if youâd like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems youâre facing and would like to solve. Donât worry about the costs â weâll find a fair price for sure. Get in touch â itâs that easy!
---------------------------------------------------------------
#10. New On Smashing Job Board
- [UX/UI Interaction Designer]( at Prototype (Dubai)
âWe are looking for an interaction designer with the passion for telling stories, push digital boundaries and translate ideas into content, user interfaces and digital experiences.â
- [Senior Designer]( at Brainstorm Creative Resources (Bethesda, MD)
âA Bethesda, MD design firm that has been producing great work for national audiences for two decades, is looking to engage a Senior Designer in a temporary, on-site assignment that will begin in June and continue through mid-November.â
- [Product Designer]( at Ozmo, Inc. (Blacksburg, VA)
âOzmo is seeking a product designer who is smart, curious, and loves the challenge of solving problems that improve peopleâs lives.â
---------------------------------------------------------------
#11. Popular Articles This Month
- [How Do You Know Your Website Is A Success?](
How can we make sure our projects and websites will be a success? Hereâs a really detailed checklist thatâs worth checking out.
- [Getting Started With CSS Layout](
We have a lot more choice when it comes to CSS Layout today â should you use Flexbox, Grid or even a float? Rachel Andrew explains the various layout methods you have to choose from in our Guide to CSS Layout.
- [The Ethics Of Persuasion](
The use of persuasive tactics can fall anywhere on a spectrum from black hat at one extreme to white hat at the other, with a large fuzzy gray area separating the two. This article will present food for thought for designers and developers to avoid crossing the ethical line to the dark side of persuasion.
The authors are: Cosima Mielke (cm), Vitaly Friedman (vf), Christiane Rosenberger (research).
Sent to truly [smashing]( readers via [Mailchimp](.
We sincerely appreciate your kind support. You rock.
[Follow us on Twitter]( ⢠[Join us on Facebook](
---------------------------------------------------------------
With useful tips for web devs. Sent 2Ã a month.
Email: newsletter@smashingmagazine.com.
[unsubscribe]( ⢠[update preferences]( ⢠[view in your browser](
EDM Keywords (155)
worry
workshop
works
workflow
well
websites
website
way
want
voiceover
vitaly
user
use
us
unites
unethical
ui
typing
two
turn
touch
top
tired
tickets
thought
things
text
tested
temporary
team
sweet
success
students
struggling
streamline
spectrum
speakers
solve
smooth
slides
signing
set
semantic
seeking
safari
run
right
rewarded
repetitive
remorse
relying
really
projects
process
problems
problem
practical
possible
point
plugin
place
phone
persuasion
passion
otherwise
order
ones
one
nyc
nvda
number
month
meeting
maybe
many
make
loves
lot
looking
look
like
let
knowing
know
kinds
keeping
june
invisible
introduces
interfere
install
hope
hiring
help
harm
happy
guide
growing
great
gradients
got
good
give
get
focused
finding
find
feel
failures
facing
facebook
even
ethics
essential
engage
ends
easy
download
difference
developers
developer
details
designing
designers
design
dependencies
decisions
cover
could
costs
cost
convince
continue
companies
coming
comes
colleagues
clients
clicks
choose
choice
challenge
cater
business
browser
bottom
bootstrap
begin
balance
back
authors
article
around
announce
also
agencies