August 4, 2020 Smashing Newsletter: Issue #260

Editorial

What an incredible community we have! There are plenty of articles, podcasts, tips, newsletters, and tooling that wonderful people around the world release and share — often for free — so that we all can learn from each other.

Every month I try to remind myself to check the sites of people who share what they’ve learned and find a way to support them somehow. It can be Patreon, or it could be buying their books or templates or goodies — even though I might not be able to use them.

• Ahmad Shadeed is currently writing a book on Debugging CSS which might be worth checking out;
• Cassie Evans is running fantastic workshops on SVG animation;
• Amelia Wattenberger has published a jam-packed book on Fullstack D3 and Data Visualization;
• Stephanie Walter is running various UX workshops;
• Umar Hansa has a packed video course on Modern DevTools.

And we always applaud the wonderful effort of our colleagues at CSS-Tricks, Codrops, UX Collective, UX Design Weekly (among so many others!) — all fantastic resources for all of us to get better at our work.

We are all in this together, as a community. So let’s support and care about each other, especially in these difficult times!

— Vitaly (@smashingmag)

Table of Contents

1. Practical Tips For Rebranding A Product
2. Disabled Buttons And How To Do Better
3. A CSS-Only, Animated, Wrapping Underline
4. Smashing Online Workshops 2020
5. Getting To Grips With CORS
6. Natively Format JavaScript Dates And Times
7. Mineralogy Illustrations Sorted By Color
8. Upcoming In Smashing Membership
9. Our Next Smashing Workshops

1. Practical Tips For Rebranding A Product

Do we rebrand? And when is the right time to do so? A lot of product people are asking themselves these questions as their product becomes more mature. The team at Overflow was in the same situation a while ago.

To reflect the evolution of their product from an easy-to-use, practical flow diagramming tool into a tool that is used for design communication and presentation workflows, they decided that it was time for a rebranding. In the article “Evolving the Overflow Brand”, they share their approach and what they learned along the way. Interesting ideas and takeaways that you can incorporate into your own redesign process. One that particularly helps make the challenge more approachable: Think of your product as a human being and imagine what they are like and how they feel to visualize your brand’s new identity. (cm)

2. Disabled Buttons And How To Do Better

“Disabled buttons suck.” It’s a strong statement that Hampus Sethfors makes against this widespread UI pattern. As Hampus argues, disabled buttons usually harm the user experience, causing irritation and confusion when nothing happens when a button that carries an action word like “Send” is clicked. But they do not only prevent people from completing tasks with as little effort as possible, disabled buttons also create barriers for people with disabilities — due to issues with low contrast and assistive technologies not being able to navigate to disabled buttons. Now, how can we do better?

Hampus suggests to keep buttons enabled by default and show an error message when a user clicks it. If you want to indicate that a button is disabled, you could use CSS to make it look a bit grayed out (considering contrast, of course) but keep it enabled and put focus on a meaningful error message. A small detail that makes a difference. (cm)

3. A CSS-Only, Animated, Wrapping Underline

Underlines are hard, especially if you want to do something that goes beyond the good ol’ text-decoration: underline. Inspired by a hover effect he saw in the link underline on Cassie Evans’ blog, Nicky Meulemann decided to create something similar: a colored underline with a hover effect where the line retreats and is replaced by a differently colored line.

The twist: The lines should not touch during the animation and, most importantly, links that wrap onto new lines should have the underline beneath all lines. If you want to follow along step by step how it’s done, be sure to check out Nicky’s tutorial. (cm)

4. Smashing Online Workshops 2020

A while back, we’ve launched our online workshops on front-end & UX to help all of us boost our skills online. As our workshops span over 2–3 weeks, attendees find time to learn and do homework and make connections that wouldn’t be easy to build otherwise.

It’s wonderful to see small communities emerging within those workshops. Attendees sharing what they’ve learned, coding, designing together — waking up in the middle of the night to join in! All these things are incredibly rewarding to see.

We’ve just announced new workshops recently — on behavioral design, web security, front-end testing and many others, so take a look, and perhaps join us as well. (vf)

5. Getting To Grips With CORS

Access to fetched has been blocked by CORS policy. Getting this error message in your console might be frustrating, but it’s a sign that CORS is doing a great job keeping your site secure. To dive deeper into what CORS is actually doing — and why it’s actually our friend —, Lydia Hallie wrote “CS Visualized: CORS”.

In the article, Lydia illustrates what cross-browser requests are and how we can use CORS to make sure we’re accessing those resources safely. She looks into client-side and server-side CORS and the difference between simple and preflighted requests. Last but not least, there are also tips for what you need to consider when it comes to cookies, authorization headers, and TLS certificates. A handy resource. (cm)

6. Natively Format JavaScript Dates And Times

Do we still need libraries like Moment.js or date-fns to format JavaScript dates and times? With native browser capabilities being quite good these days and browser support being great, too, not necessarily, as Elijah Manor points out.

Elijah summarized three different methods for dealing with time and dates. The toLocaleDateString method comes in handy when you want a date that contains only numbers, a long wordy date, or one that outputs in a different language. If you only need to output the time portion of a JavaScript date object, there’s toLocaleTimeString. Finally, the generic method toLocaleString lets you pass one or all of the options from the former ones into one method. Elijah built a CodeSandbox playground where you can experiment with the different approaches. (cm)

7. Mineralogy Illustrations Sorted By Color

Have you ever had an idea popping into your head that you couldn’t let go of? When Nicholas Rougeux came across the massive collection of mineral illustrations that British naturalist and illustrator James Sowerby created at the beginning of the 19th century, he wondered what they would look like arranged by color in a big collage. And, well, he spent the next four months doing exactly that: arranging all of Sowerby’s illustrations from the 718-plates-strong series British Mineralogy containing minerals found within Great Britain and Exotic Mineralogy containing those from beyond its borders.

The result is the stunning project British & Exotic Mineralogy. A fascinating artwork that creates a bridge between the meticulous work of two people living two centuries apart and the techniques they used — from the paintbox to modern web technologies. If you want to learn more about Nicholas’ approach and the challenges he faced along the way, there’s an accompanying blog post in which he shares a look behind the scenes. (cm)

8. Upcoming In Smashing Membership

• “Getting Projects Out The Door Faster And Less Painful” with Kristina Podnar— August 6 at 14:00 London time
• “End-to-end Testing With A Real Browser” with Umar Hansa— August 13 at 19: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. 😉

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

Design Workshops

• Behavioral Design Workshop (Aug 17-31)
• Designing for a Global Audience (Aug 20 - Sep 4)
• Smart Interface Design Patterns (Sep 22 - Oct 6)

Front-End Workshops

• Web Application Security (Aug 6-14)
• Front-End Testing (Aug 19 - Sep 3)
• Jamstack! (Sep 1-16)
• The CSS Layout Masterclass (Sep 10-11)
• Vue.js: The Practical Guide (Sep 17 - Oct 2)
• Build, Ship & Extend GraphQL APIs from Scratch (Oct 15-30)

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

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.