September 22, 2020 Smashing Newsletter: Issue #267

Editorial

I never get tired of being surprised by random acts of kindness around us. We might be living in unprecedented times, yet it’s not uncommon to spot small tokens of gratitude that cross our paths every now and again.

Over the last couple of weeks, it felt like I was receiving more and more kind messages from people who just stumbled upon a useful tool in one of the newsletter issues, or found one of the older Smashing books that helped them, or recently attended one of our online workshops — and just wanted to thank us.

It was incredibly empowering and moving, so last week, I committed to answering every question extensively. That would go for anything that came my way: on Twitter, in Slack, via email, anywhere. There were many questions about front-end techniques and libraries, resources for getting started, billing and estimates, inspirational showcases, or examples of particular solutions for a given interface challenge. There were all great questions, and so I did my research for at least 45 mins each day so that I could give reasonable and helpful answers, or provide some good examples.

It was so empowering to get truly kind and grateful feedback — with people all over the world sincerely appreciating a stranger taking time to help them. It’s a feeling that’s difficult to reach otherwise, and something that fuels positivity, optimism, and enthusiasm in these unusual times.

So the next time somebody sends you an email, perhaps take a moment to think, research, and come up with a helpful answer. Not only will you add kindness to the world, but also possibly learn something yourself. Oh, and don’t forget to invite the person to help others as well. It’s all about taking one little step at a time. That’s where the power of humanity lies.

Let’s enjoy the small little things in life!
— Vitaly (@smashingmag)

1. Accessible Comics
2. A Reliable Date Picker Library
3. Inspiration Is Everywhere
4. The Deck Of Brilliance
5. Debugging Tools And Strategies
6. Animated Sparkles And Rainbow Gradients With React
7. Coming Up Next on Smashing

1. Accessible Comics

When we use slightly more complex shapes and layouts on the web, sometimes it appears to be so much easier to just save it as a foreground or background image and serve different images to small and large screens. This holds true for complicated charts and graphs as well as good old comics with speaking bubbles, but what if we could re-imagine the experience altogether?

Comica11y is an experiment by Paul Spencer that aims to achieve an all-inclusive online comic reading experience. What if we could have different reading modes for the comic, e.g. with closed captions, proper focus management to navigate between panels, high-contrast mode, SVG color blindness filters, programatic bubbles, selectable and translatable text, LTR and RTL support, and even adjustable font sizes? A wonderful initiative that shows just how far we can take UI challenges and use the web to enhance the experience greatly. (vf)

2. A Reliable Date Picker Library

There are dozens of date picker libraries out there, but it’s always great to have reliable workhorses that just work across browsers, don’t have heavy dependencies, are written reasonably well, and meet all major accessibility requirements.

Duet Date Picker is just like that. It’s an accessible, WCAG 2.1 compliant date picker that can be implemented and used across any JavaScript framework or no framework at all. It comes with built-in functionality that allows you to set a minimum and a maximum allowed date, and weighs around 10kb minified and Gzip’ed (this includes all styles and icons).

If you need an alternative, check out React Dates, a library released by Airbnb that’s optimized for internationalization, while also being accessible and mobile-friendly. (vf)

3. Inspiration Is Everywhere

Inspiration can come from unexpected places — the conversations we had, the dots we’ve connected in our minds, and the little things we’ve spotted somewhere. But sometimes we need a good idea for a specific problem. That’s where online showcases can help.

We can take a look at Cyrillic, German or Japanese websites. And when looking for patterns, we could drop by Pttrns, Siteinspire or UI-Sources. For general inspiration, Awwwards can help, or you could use Muz.li and UI Playbook, both inspiration search engine to search for specific keywords, color schemes or components. And if you are in need of landing pages, Land-Book can help as well. As for booklets, Booklets.io has got your back, too. Great bookmarks to keep close! (vf)

4. The Deck Of Brilliance

Do you sometimes find yourself facing a blank page with little or no inspiration whatsoever? Competing with creatives from every corner of the globe certainly doesn’t make it easy to generate brand new ideas, especially when you feel like they’ve all already been taken.

The Deck of Brilliance gives you 52 free tools that are bound to help you work up ideas in short periods of time. All you need to do is pick a tool one after the other, and be prepared to note down your ideas when they start rolling in. The more ideas you generate, the better the chances of nailing the big one! (il)

5. Debugging Tools And Strategies

How do you debug code? Often it’s so difficult to isolate a problem although it’s staring right at you (well, that’s what we think once we find it!). Adrian Bece has written a detailed guide to debugging CSS/JS, and Sarah Drasner has featured some debugging tips and tricks that you might find useful.

For mobile, we can use Eruda, a console for mobile browsers that logs and exposes error messages, allows you to navigate the DOM tree and shows performance metrics. For React, we can measure and profile React performance, and when using DevTools, we can use a detailed dive-into profiling with DevTools. This should cover quite a few debugging issues for sure. Happy and snappy debugging, everyone! (vf)

6. Animated Sparkles And Rainbow Gradients With React

Josh Comeau loves creative experiments. On his lovely personal blog, he features accordions with sound effects, flashy confetti mode, unexpectedly friendly pop-ups, and many other things. Plus, a series of wonderful tutorials for doing all kinds of unusual effects with React.

For example, Josh has shared how he created Magical Rainbow Gradients with CSS Houdini and React Hooks (see GitHub repo), and how he created Animated Sparkles in React. Wonderful little tutorials that are worth keeping an eye on — and to add a bit of polish to make a website or app shine. Literally. (vf)

7. Coming Up Next on Smashing

With Smashing Membership, you get access to goodies, eBooks, discounts and live sessions with experts — all around front-end & UX, for just one coffee a month. Coming up next:

• “All About Icons” with Marc Edwards— October 20 at 11:00 London time

We also have online workshops on front-end & UX — designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.

• The SVG Animation Masterclass (Oct 8–22)
• Web Performance Masterclass (Oct 12–26)
• Designing for Emotion Masterclass (Oct 28–29)
• Build, Ship and Extend GraphQL APIs (Nov 12–27)
• Designing Websites That Convert (Nov 18–26)
• Building A Design System With CSS (Dec 3–17)

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.