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

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…

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/

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/

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

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 🤩

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!

Thank you 🙏🏻

Thanks!

These are so helpful. Thank you for sharing!

Awesome! Great stuff

Thank you for the shout-out Josh and so happy you like the illustrations!!! Love all the tools mentioned so it's great to see unDraw in there! ❤️

For sure, thanks for creating such an awesome resource =D

🙏😊❤️😘😁

Thanks Josh 🤗🥳

I wrote an article about this recently:

If you’re interested, it hasn’t been merged yet, but I converted it to a browser extension. dev.to/nickytonline/a… #DEVcommunity

😍 thanks friend

Love it!

I'm honestly obsessed with how smooth this is

How can you even differentiate between all the icon fonts? They mostly all have the same core offering and they all look pretty much the same to me.

Wow Josh, fantastic resources! Thank you for sharing!

These are all amazing! Thanks for sharing.

github.com/sw-yx/spark-joy This is a great collection that includes some of these resources by @swyx including a cameo from you twitter.com/JoshWComeau/st…

Thanks for sharing, Josh! Happy New year!

Thanks for putting these out Josh. Great resources. 🔥👏

This is great. Thank you!!

Thanks for the list!! 🤗

This is why I'm glad I didn't just stop at code and learned design as well. I can design & code my side-projects from start to finish by myself. Thanks for sharing the resources, there's always something new you can learn🙌

Do you have any specific way of coming across these resources? They're magnificent.

Unfortunately not :( most of these are things I saw on twitter over like 3 years. ProductHunt has good stuff sometimes but the good-to-bad ratio makes it a bit of a slog

Actually I shouldn’t say good-to-bad. More whether they’re useful to me vs useful to someone else

Feel the exact same way with Product Hunt, sometimes it's like you've found a raw gem you've been craving for all your life and sometimes it's just .... a pie without a filling. But thank you for sharing! <3

Awesome, thank you!

This thread is a goldmine

Thanks for sharing. The majority I never heard of before. That drop shadow tool is 🔥

Nice resources, thanks a lot 👌

So good

Great list, thanks!

Thanks for great resources! Anyone knows some tool for creating svg animations?

save thread

Done! We've saved this whole thread to your Readwise library so that you can revisit/remember it 🧠📚

Awesome thread 👍. Here are some other resources I use too. 1. Optimizilla imagecompressor.com Useful for bulk compression and optimization of images, up to 20 at a go. shrinks JPEG and PNG images to the minimum possible size while keeping the required level of quality.

2. Getwaves getwaves.io You know how on some headers you see on some landing pages have this wavy outline at the bottom, Get Waves is used for creating wavy svg shapes. Simply adjust settings until desired form is gotten.

Awesome! Thanks for sharing :D

Still on SVGs 3. Blob Maker blobmaker.app Blobmaker is a free generative design tool, that helps you quickly create random, unique, and organic-looking SVG shapes.

Mockuper mockuper.net This resource lets you create mockups of your projects on either desktop, phones, and tablets using your screenshots. Useful when trying to display your projects on your portfolio site or whatnot 🤷🏽‍♀️

See your life.... instead of you to gimme the job and pay

🤦🏽‍♀️🤦🏽‍♀️🤦🏽‍♀️. Pay for designing my side projects 😂. LMFAO.

Okay o... bye

Oh this is awesome! I’ve done this myself in Photoshop, it’s a pain

such wealth 😊😊 I hope you enjoy this.

These look awesome! Thanks for sharing

save thread

save thread

Done! We've saved this whole thread to your Readwise library so that you can revisit/remember it 🧠📚

There should be an awesome list for people like you Josh, thanks for sharing!

awesome thread! Thanks for the info, and happy new year!

These are life-saving! Thank you 🙌

(No comment)

Brilliant post, thanks heaps!