Thread by @JoshWComeau

Happy New Year!!

I know many of you work on side-projects, projects where you don't have the benefit of a product & design team. I'm betting a bunch of y'all have goals to create something new in 2020!

Thought I'd share a thread with all my favourite resources:

1. A long-time staple in my toolbox, @LeaVerou made this *amazing* tool that lets you visualize custom cubic-bezier easings. This is super helpful when the built-in timing functions don't feel right.

cubic-bezier.com

2. You know how Google Fonts shows you the "load times" for your selected fonts? There's that stress when deciding how many weights you need?

Variable fonts are a great way to get all the styles you want, with a super low payload!

Amazing resource: v-fonts.com

3. I'm sick of seeing font-awesome icons everywhere. There are so many better options (in my opinion, at least).

My favourite icons are the Feather Icons, by @colebemis. His online tool even lets you customize them!

feathericons.com

4. What about for niche icons, ones not likely to be included in a pack like Feather?

The Noun Project offers over 2 million icons, for every noun imaginable. And they're 100% free-to-use, as long as you attribute its author.

thenounproject.com

5. I shared this one recently, but it's worth highlighting again: @funkensturm built an awesome tool to help you create rich, layered box shadows. I've already used this a couple times, to magnificent effect 🤩

brumm.af/shadows

@funkensturm 6. Similar to how layered shadows are better than flat shadows, "easing gradients" are way nicer than typical linear ones.

I found this awesome tool which allows you to convert a linear gradient to an easing one: larsenwork.com/easing-gradien…

@funkensturm 7. It's important that the stuff we build is accessible to everyone!

Toptal has a great "color-blind filter". It allows you to view your site or app through the eyes of someone with various forms of color-blindness.

toptal.com/designers/colo…

8. Keeping on that accessibility train, I really like @jdan's tota11y tool: It's available as a super-convenient bookmarklet, and highlights a bunch of common issues right in-page!

khan.github.io/tota11y/

@jdan 9. One more accessibility tool: The Axe devtools. You can perform scans of your current website, and it gives you very actionable tips to fix the problems.

Also, their Pro version is currently free while it's in beta :o

deque.com/axe/

@jdan 10. Finding color palettes is hard, and often, tools simply give you 5 complementary colors, with no advice about how to use them!

Happy Hues is a wonderful tool by @mackenziechild which not only suggests palettes, but presents them in-context!

happyhues.co

@jdan @mackenziechild 11. You know how landing pages often have those fancy whimsical illustrations?

unDraw, created by @ninalimpi and @anges244, offers an incredibly vast selection of beautiful illustrations, released under an open license 🤩

undraw.co/illustrations

12. Sometimes the trickiest part of building animations is knowing what to animate, and how to use motion effectively. I really like this free book, written by @warpling, that covers the fundamental principles of motion.

designbetter.co/animation-hand…

Alright, I think that's everything I've got 😅

All together, these projects have helped me a ton. They're often created by solo developers and designers! If you found this thread useful, please RT it - I'd love for these project authors to get some more fans!