Newsletter • Issue 27
Physics Based Burgers, Radical Forms, and Clever Spinners
Howdy, partner!
This week we’ve got a couple great articles, a free CSS course, and best of all, a CodePen of that lets you construct a Cheeseburger with ‘realistic’ physics!
In fact, let’s start off with that big stack of fun.
Physics-Based Burger Creator
Last week we had Stephen Shaw on my Twitch streaming show, Component Carousel! He came on and built a fun new component for our Heavy Metal Burger Joint website.
Shaw, who you might know from CodePen and The Keyframers, put together a physics-based burger creator, where by hitting a couple buttons, you can drop different burger ingredients and assemble the perfect burger. Or drop way too much and cause complete chaos. Your call!
(It’s a heavy metal burger place, so of course the buns are black.)
He walked us through building it with the 2D physics library Matter.js, and it uses ‘chain physics’ to give everything that wiggly feel.
Here’s the CodePen so you can play and stack your own burger masterpiece. Check out the replay of the episode here to watch us build it in real time.
Follow on Twitch so that you’re notified the next time we go live with a fantastic guest to build something fun!
Follow on TwitchBouncy Castle Signup Form
Adam Kuhn has a knack for sneaking a few dozen clever techniques into every CodePen he puts out. The signup form he made for us back on Component Carousel is no exception.
Since he showed us how to do it all on stream, I’ve written up some of the most interesting parts.
The article breaks down how he animates text typed into a form, how that text slides along a path, a few SVG tips, animation tricks, and more.
Read Reinventing the Signup FormConcentric Circle Spinner
I love when a pen can be a small and pure demo of an idea and still look wonderfully cool. This concentric circle spinner by Luke Richardville is exactly that.
It’s only a couple dozen lines of code but I love the effect and I learned a few things going through it. I broke down the techniques in an article that you can check out here.
You’ll get more from it than you might expect at first glance. Plus I break down things like the ease with fun diagrams like this one.
I mean, if a bezier curve illustration doesn’t get you to check out the article nothing will.
Read Concentric Circle SpinnerLearn CSS!
This is an incredible and free course that covers the fundamentals more thoroughly than I’ve seen anywhere else in one place. It was put together by an all-star team of Andy Bell, Rachel Andrew, Una Kravets, and Adam Argyle.
I’ve already gone through a couple modules and it’s top notch. It’ll be at the top of the list when I recommend CSS resources to developers.
Learn CSS!Horse Fact
Horses were domesticated around 6,000 years ago, in the area around Ukraine and Kazakhstan. For context, we began to keep cats as pets about 8,000 years ago, and domesticated dogs over 17,000 years ago, making them our original friend.
Still, there’s no .dog domain, so horses are clearly winning in that regard.
So Long, Partner
That’s it for this week. Thanks for hitting the trail with me! Special thanks to everyone who joined me on Component Carousel, as well as the people I’ve featured in this issue.
Follow Frontend Horse on Twitter, and on Twitch. If you enjoyed this, I’d be over the moon if you share it with a friend or tweet about it.
It’s the end of the trail for now, but I’ll see you next week. Take care.
Your Neigh-bor, Alex