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.
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!
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: 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.
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 🤩
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!
🔥 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!
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🙌
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 thread 👍. Here are some other resources I use too.
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.
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.
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 🤷🏽♀️