A couple years back, on Jan 1st, I shared a list of my favourite free design/dev mini-resources. I think it's time for an update!
https://twitter.com/JoshWComeau/status/1212416797254832130
1. Open Peeps by @pablostanley — An endlessly-customizable, diverse, CC0-licensed, pay-what-you-want set of hand-drawn people illustrations.
I use these for the avatars on my course platform!
openpeeps.com
I use these for the avatars on my course platform!
openpeeps.com
2. ColorReview by Anton Robsarve.
It's a color picker that integrates the WCAG color-contrast thresholds, so you can tell *as you're picking colors* whether they're accessible or not!
color.review
It's a color picker that integrates the WCAG color-contrast thresholds, so you can tell *as you're picking colors* whether they're accessible or not!
color.review
3. While I'm on the subject of color: @dawidwoldu's “Parametric Color Mixer” is an incredibly fun experimental tool to come up with surprisingly-nice colour palettes.
https://twitter.com/JoshWComeau/status/1450831675018076167
4. One more on color: @mackenziechild’s Happy Hues. A collection of accessible color palettes.
Unlike other tools, Happy Hues shows you these colors *in context*, so that you can actually figure out how to use them to color a website / web application.
happyhues.co
Unlike other tools, Happy Hues shows you these colors *in context*, so that you can actually figure out how to use them to color a website / web application.
happyhues.co
5. Clippy, a visual tool for creating “clip-path” shapes.
Drag handles to create the perfect shape, and then copy the CSS to apply the cut-out to your HTML elements!
bennettfeely.com/clippy/
Drag handles to create the perfect shape, and then copy the CSS to apply the cut-out to your HTML elements!
bennettfeely.com/clippy/
[Video alt: A photo of a sparkler has its edges dragged and contorted, creating different shapes. Underneath, the CSS is shown so that you can copy the shape and apply it elsewhere]
6. Undraw, a set of free, permissively-licensed, beautiful SVG illustrations. This library has grown over the years, and there are *so many* wonderful illustrations, covering just about every category.
undraw.co/illustrations
undraw.co/illustrations
The only downside to Undraw is that it's *too* popular, and it means that lots of other creators are already using them. They might seem a bit generic as a result.
I work around this by tracing over them in Procreate. Makes them feel more unique!
Left: Undraw
Right: traced
I work around this by tracing over them in Procreate. Makes them feel more unique!
Left: Undraw
Right: traced
7. Cubic Bezier by @LeaVerou
When working on CSS transitions, the built-in timing functions (ease-in, ease-out, etc) are all pretty subtle and bland. I like to design my own.
This wonderful tool has been my go-to for years!
cubic-bezier.com
When working on CSS transitions, the built-in timing functions (ease-in, ease-out, etc) are all pretty subtle and bland. I like to design my own.
This wonderful tool has been my go-to for years!
cubic-bezier.com
[Video alt: Handles are dragged to create a shape. The "GO!" button is pressed, and a box moves according to the curve drawn.]
8. WAVE by WebAIM, an accessibility auditing tool.
It's a super-convenient browser extension that lists possible accessibility issues, and highlights them on the page for you. 💯
wave.webaim.org/extension/
It's a super-convenient browser extension that lists possible accessibility issues, and highlights them on the page for you. 💯
wave.webaim.org/extension/
9. Shadow Palette Generator, by me!
The CSS `box-shadow` property produces pretty underwhelming results by default. This tool generates rich, life-like shadows by combining lots of individual color-matched layers.
joshwcomeau.com/shadow-palette/
The CSS `box-shadow` property produces pretty underwhelming results by default. This tool generates rich, life-like shadows by combining lots of individual color-matched layers.
joshwcomeau.com/shadow-palette/
This tool was inspired by @funkensturm's wonderful box-shadow tool. Check it out too!
shadows.brumm.af
shadows.brumm.af
10. Tabbied, a tool for generating unique geometric art.
There are a bunch of different configurable designs, each more beautiful than the last.
tabbied.com
There are a bunch of different configurable designs, each more beautiful than the last.
tabbied.com
11. Sticking on the generative art train: fffuel, a collection of generative designs.
It features *a ton* of great tools. I recently shared their blurry gradient generator:
It features *a ton* of great tools. I recently shared their blurry gradient generator:
https://twitter.com/JoshWComeau/status/1475502608882315283
12. One last example in this category: Haikei, a webapp that features highly-customizable generative designs.
app.haikei.app
app.haikei.app
(Also, it's not as useful/practical, but if you haven't already seen it, check out Tinkersynth! It's a generative-art toy I created a few years back.)
(Please don't try and sell the output as an NFT.)
tinkersynth.com
(Please don't try and sell the output as an NFT.)
tinkersynth.com
13. Feather Icons by @colebemis
Every dev needs a good icon pack, and Feather Icons has been my go-to for years. I use them on my blog, and in my course platform! Beautiful SVG icons.
feathericons.com
Every dev needs a good icon pack, and Feather Icons has been my go-to for years. I use them on my blog, and in my course platform! Beautiful SVG icons.
feathericons.com
14. Polychroma, a beautiful gradient generator by @stormwarning.
Pick between different color modes to produce lively, rich gradients. It's a minimal tool, but the results are very pretty.
polychroma.app
Pick between different color modes to produce lively, rich gradients. It's a minimal tool, but the results are very pretty.
polychroma.app
(Related: @erikdkennedy's gradient generator uses a similar strategy, and offers more customizations!)
learnui.design/tools/gradient…
learnui.design/tools/gradient…
(I may or may not be working on a gradient tool myself, as well 😮. More to come!)
I hope this list is helpful! 🙏
By the way: if you'd like to learn how I get the most out of these resources, check out the Treasure Trove in my CSS course, css-for-js.dev! I've written detailed guides for a bunch of resources, including most of the ones listed here. ✨
By the way: if you'd like to learn how I get the most out of these resources, check out the Treasure Trove in my CSS course, css-for-js.dev! I've written detailed guides for a bunch of resources, including most of the ones listed here. ✨
• • •
Missing some Tweet in this thread? You can try to
force a refresh
