May 12, 2020 Smashing Newsletter: Issue #254
This newsletter issue was sent out to 188,213 newsletter subscribers on Tuesday, May 12, 2020.
Editorial
There is no shortage of books on marketing and UX. Still, when it comes to bridging the gap between the two, many of us struggle to find the right balance. As businesses, we need to meet out targets, but as designers, we don’t want to end up with a frustrating user experience. We really need both, and we need a reliable strategy to get there.
That’s why we’ve written Click!, a new book on how to encourage clicks without shady tricks. The book, written by Paul Boag and beautifully designed by Veerle Pieters, explores practical strategies for driving sales and boosting business KPIs without alienating customers along the way.
You can get the book already, with a lil’ friendly discount, and you can start reading the eBook already — the printed copies will be shipped early June. We’ve also asked (poor) Paul to prepare a lil' gift for the first 500 readers, so make sure to get a printed copy soon!
Of course, if you feel smashing today, we kindly invite you to join the Smashing family and get the eBook for free (among with many other eBooks and a few fancy cats!).
Happy reading, everyone!
Vitaly (@smashingmag)
Table of Contents
- Custom CSS Cascades
- GitHub Tips And Tricks
- Meet SmashingConf Live
- Will It CORS?
- Creating Accessible Color Palettes
- Slack Communities For Designers
- Making Focus Blocks Work
- The Sound Of Colleagues
- Upcoming In Smashing Membership
- Our Next Smashing Workshops
1. Custom CSS Cascades
Miriam Suzanne built a demo to illustrate a very clever way to define a cascade of custom properties. One that allows you to determine which intent should take priority, without worrying about the specificity of how the value is defined.
Miriam shows how it works at the example of a button. Due to how the cascade is arranged, the default button is always falling back to --btn-bg--default. Adding the disabled attribute, always overrides any other button colors, no matter where they are defined, and, when new button types are created, --btn-bg--type ensures that only the defaults are overridden but not the state. The approach also lets you set these values contextually. A smart solution to avoid the usual dangers that highly-specified inline styles usually bring along. (cm)
2. GitHub Tips And Tricks
Do you know how to automatically squash commits on GitHub when merging pull requests? Or how to open a repo in the browser using GitHub CLI? If not, Joe Previte’s collection of GitHub tips and tricks might be for you.
In bite-sized videos, Joe shares small but powerful tips to take your GitHub workflow to the next level. And for those of you who prefer to learn by reading, most tips are also available as short blog posts. Handy little timesavers. (cm)
3. Meet SmashingConf Live: Our New Interactive Online Conference
In these strange times when everything is connected, it’s too easy to feel lonely and detached. Yes, everybody is just one message away, but there is always something in the way — deadlines to meet, Slack messages to reply, or urgent PRs to review. Connections need time and space to grow, and conferences are a great way to find that time and that space.
That’s why we’ve been working on SmashingConf Live (June 9–10), our new friendly online conference on front-end & UX. With interactive live sessions, practical insights, accessible speakers, Q&As, collaborative notes and fireplace chats with like-minded folks. With Sarah Drasner, Brad Frost, Chris Coyier and many others.
We’d love to see you in June, or maybe even sooner? Next week we’ll run Smashing Meets, our very first free online meet-ups, with 3 speakers each day, and plenty of collaborative challenges as well. We are such an incredible, friendly, global community — so let’s meet and stay connected! (vf)
4. Will It CORS?
Cross-Origin Resource Sharing (CORS) is how browsers decide how a web application can communicate with other services. Security-wise, it’s important to be careful about where you send requests to and restrict the communication. But what is safe and what could turn into a security risk?
The folks behind HTTP Toolkit built a little tool to help you assess just that. Once you’ve entered the URL of the page that wants to send a request, the URL it wants to send it to, as well as some other details, Will It CORS? will tell you if it’s safe to send and if the response can be read. A useful helper. (cm)
5. Creating Accessible Color Palettes
Finding the perfect tint or shade of a color is not only a matter of taste but also accessibility. After all, if color contrast is lacking, a product could, in the worst case, even become unusable for people with vision impairments. A very detailed contrast checker to help you detect potential pitfalls ahead of time comes from Gianluca Gini: Geenes.
The tool lets you tinker with hue ranges and saturation and apply the color palettes to one of three selectable UI mockups. Once applied, you can trigger different kinds of vision impairments to see how affected people see the colors and, finally, make an informed decision on the best tones for your palette. To use the colors right away, just copy and paste their code or export them to Sketch. (cm)
6. Slack Communities For Designers
Supporting each other, sharing inspiration, asking for feedback, encouraging discussion — all of this is a crucial part of any creative process. If you’re a designer and are eager to connect with likeminded people, there are a lot of design communities on Slack to participate in. To help you discover the right one for your needs, Ryan Yao set up Designer Slack Communities.
No matter if you’re into animation, web typography, or UX, or are looking for ways to create positive social change, explore how to shape a design culture, or just want to talk shop about design systems, Ryan’s overview has got you covered. If you know of a community that is worth joining but not listed yet, you are welcome to add it. Happy connecting! (cm)
7. Making Focus Blocks Work
The flow state is ideal when it comes to work. Streaks of uninterrupted work where you feel immersed by what you’re doing and not only get a lot done but produce quality results. Reaching that much sought-after flow can be a challenge though with calls, meetings, and pings calling for attention and interrupting you from what you’re doing.
An approach that might help you set aside time for focused work is focus blocks, i.e. time slots without any meetings and other distractions. However, the concept does only make sense when you’ve got everyone on board. Cameron Moll knows this from experience and shares some valuable tips on how cross-functional teams can make it work. Why not give it a try? (cm)
8. The Sound Of Colleagues
Working from home can have some real advantages over working from an office, but let’s be honest, it can be a rather lonely experience, too, when there are no colleagues around. If you feel your home office is getting too quiet and you need some bustle in the background to stay focused, The Sound of Colleagues has got your back.
The Sound of Colleagues lets you mix office noises to create your custom office ambient noise. People typing and talking, phones ringing, the coffee machine, the printer — all of these little things add up to bring a bit of office feeling to your home. Maybe it’ll even help you boost your productivity, who knows? (cm)
9. Upcoming In Smashing Membership
A few weeks ago, we released the Smart Interface Design Checklists, a free PDF deck with questions for designers and developers to consider when designing anything from accordions and hamburgers to maps and tables. Made possible with the kind support of Smashing Members. So thank you! ❤️
- “Inspired Design Decisions With Max Huber” with Andrew Clarke— May 12 at 15:00 London time
- Smashing Meets: Our New Online Meet-up with Mark Boulton, Yiying Lu, Phil Hawksworth and others— May 18–19
- “Expand Your Test Coverage: Manual And Accessibility Testing Unite” with Carie Fisher and Harris Schneiderman— May 19 at 18:00 London 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. 😉
10. Our Next Smashing Workshops
In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems.
We also have online workshops that are designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.
- Smart Interface Design Patterns with Vitaly Friedman (May 12–26)
- Web Performance Masterclass with Harry Roberts (May 28-June 12)
- The CSS Layout Masterclass with Rachel Andrew (June 11–12)
- Front-End Accessibility Masterclass with Marcy Sutton (June 16-30)
- Building Modern HTML Emails with Rémi Parmentier (June 18-26)
- Buy! The eCommerce UX Workshop with Vitaly Friedman (July 2-17)
- Design Systems with Brad Frost (July 7-21)
Or, if you’d like to run an online workshop with your team, 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)
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.