Dear Friend,
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
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)
From our sponsor
Build in-demand skills in Northwestern’s online MS in Info. Design & Strategy
Earn your master’s degree online.
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)
From our sponsor
Learn How Designs Intersects With Changes Caused By the Pandemic
Whether you’re into UX/UI, or tech, the show is a must-listen.
Listen Now!
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)
From our sponsor
Learn the secret to easily gaining design approval, and so much more.
Getting design approval from stakeholders is a challenge faced by all designers and project managers. Fortunately, it can be easier than you think! Smashing author and speaker Paul Boag shares how in his free video class. Sign up and also get regular advice on UX design, increasing conversion and more. Learn more and enroll here.
8. Upcoming In Smashing Membership
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
Front-End Workshops
Meet Smashing Online Workshops on front-end & UX, with Yiying Lu, Natalia Tepluhina, Christian Nwamba, and many others.
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)
10. New On Smashing Job Board
-
Director Of User Technology Platforms at MIT Sloan Management Review (Boston, MA)
“We’re looking for someone who will perform development tasks and troubleshooting, ensure security and maintenance of digital platforms, manage contract developers and cross-functional teams, support SMR’s revenue and content goals through digital projects.”
-
Frontend Designer And Developer at Fugue, Inc. (Washington DC)
“We’re looking for a creative frontend designer/developer who enjoys the full process of taking a design from concept to completion, including establishing requirements, building prototypes, and working with a team to implement the final product.”
-
Software Engineer at Microsoft (Prague)
“Our team is responsible for the desktop platform that enables Microsoft Teams and several other Microsoft Products. We are at the forefront of Desktop development in Microsoft, focusing on delivering a modern Desktop experience using a combination of Electron and web technologies.”
11. Our Current Most Popular Articles
This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Vitaly Friedman, Rachel Andrew and Christiane Rosenberger.
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
