GUEST EDITOR 💫 BLOBS 🅾️ PICASSO IN 3D 👨🎨
Heya,
It's an exciting week for this humble newsletter because we've got Chris Coyier jumping in the captain's chair.
As you may know, Chris is one of the founders of CodePen (from whence I pinch many a link). He is also the founder of CSS Tricks (from whence I get many guest post rejections).
Did you know that one antonym for 'blob' is 'suspicion'? The algorithm nailed that one.
Enjoy,
Chrises.
🕸️ The Cool Side of the Web
Dissection
I was admiring the design of this podcast site the other day. So nice.
Chris Coyier
jkdesign.com
Omar Aqil renders Picasso's work as 3D visuals with Adobe Suite. Amazing.
Chris Fitz
behance.net
⭐ Chris Coyier's Corner
Make your own blobs.
Blobs! Blobs are in! Blobs are, ahem, a bit bizarre. I’ll bask in a design like this annual report cover by Matt Pamer all day. I enjoy watching a design trend like this manifest itself in design tooling and implantation in lots of different ways.
You could start with <svg>. You could draw your own. The Pen Tool in pretty much every vector design tool is highly capable of it.
I’m a cheater though, I’d probably check The Noun Project for some example blogs and steal the SVG from there quick. But sadly there isn’t much there, thank god for THE BLOBMAKER.
blobmaker.app
Give the blobs, Life!
After you have a blob, it’s just begging to be moved around.
Monica Dinculescu shows how you can do just that with CSS alone and liberal use of various CSS transforms in a keyframe animation.
codepen.io
Or, you can use a JavaScript library to get all morphy on you.
Just like Heartbeat has done with KUTE.js.
codepen.io
This Pen uses Greensock, but adds in some native SVG filters so that the blobs squish into each other satisfyingly.
We could call it the gooey effect.
A library like Greensock could help you with moving and morphing them around. Greensock even has a plugin that is probably the most powerful morphing tool out there.
codepen.io
We’ve only looked at SVG so far, but don’t rule out <canvas>! Liam Egan has made this canvas-based blob downright jiggly.
codepen.io
Why not add a little physics to the party, like gravity, and let them blobs get squishy that way!
Hakim El Hattab got it done here.
codepen.io
And blobs don’t have to be alone! Blobs that are squished together are like fluid.
You might get a kick out of Peeke Kueper's article "Simulating Blobs of Fluid."
peeke.nl
🥇 World of WordPress
This is my year of JavaScript: here's 13 of the most interesting Vue UI component libraries.
Chris Fitz
codeinwp.com
All the big WordPress news in one article with links to the most interesting articles on the web.
Chris Fitz
codeinwp.com
🙃 Backwards talking dreams - Fun stuff
The rise of the swear nerds.
The poetics of constructing a perfectly fun, non-gendered, incredibly filthy, insult.
Chris Fitz
theoutline.com
Play rock, paper, scissors with a recurrent neural network.
I lost a lot of games but managed to put my fist through the monitor, so I guess I won the war.
Chris Fitz
codepen.io
Outro
Blobs are the best web trend of the year, and it's only February.
If you'd like to see Chris Coyier's Corner again, then shout it out on Twitter. Alternatively, you can hit me up on Twitter with fresh links, editing requests, and so on.
Forwarding emails is the best exercise for your fingers. That's not me speaking, that's science.
If you received this via a forward, then join the ship here.
I'll be back next week,
Chris Fitz