See the entire conversation

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:
68 replies and sub-replies as of Jan 02 2020

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.
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:
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!
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.
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 🤩
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:…
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.…
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!
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
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!
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 | Colorful illustrations
Open-source illustrations for every project you can imagine and create.
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.…
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!
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 🤗🥳
😍 thanks friend
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. This is a great collection that includes some of these resources by @swyx including a cameo from you…
🔥 The CSS filter `backdrop-filter` lets you apply effects to everything _behind_ the element. Blurring content behind a modal is so much more trivial than it used to be :o Works in all major browsers except IE!…
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 👌
Great list, thanks!
Thanks for great resources! Anyone knows some tool for creating svg animations?
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 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.
Online Image Сompressor
Optimizilla is the ultimate image optimizer to compress your images in JPEG and PNG formats to the minimum possible size.
2. Getwaves 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 is a free generative design tool, that helps you quickly create random, unique, and organic-looking SVG shapes.
Mockuper 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
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 🙌
Brilliant post, thanks heaps!