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
- Practical Tips For Rebranding A Product
- Disabled Buttons And How To Do Better
- A CSS-Only, Animated, Wrapping Underline
- Smashing Online Workshops 2020
- Getting To Grips With CORS
- Mineralogy Illustrations Sorted By Color
- Upcoming In Smashing Membership
- Our Next Smashing Workshops
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)
“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)
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)
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.
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)
Elijah summarized three different methods for dealing with time and dates. The
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)
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)
- “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. 😉
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.
- Behavioral Design Workshop (Aug 17-31)
- Designing for a Global Audience (Aug 20 - Sep 4)
- Smart Interface Design Patterns (Sep 22 - Oct 6)
- 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 firstname.lastname@example.org and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)
Every week, we send out useful front-end & UX techniques. Subscribe and get the Smart Interface Design Checklists PDF delivered to your inbox.
You can always unsubscribe with just one click.
- Interfaces, Design Systems and Cityscapes
- Front-End Accessibility Edition
- Japanese And Cyrillic Sites, CSS, Free Illustrations
- CSS Edition
- Performance, CSS Techniques and Fun Forms
- State of CSS/JS, “Back” Button UX, SVG
- Custom Dropdowns, CSS, Performance and Building Tools
- Hybrid CSS Positioning, Free Fonts, Push Notifications
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.