Newsletter #65 - Feathery 404, Digital Card Game, and Flippy Chess!

July 18, 2022

An incredible CodePen card game, a canvas-based 404 page, a FLIP chess demo, and lots more!

It's a shorter issue this week as I'm trying to migrate email service providers and that's taken up most of my time. I'll explain at the end, but for now, let's get to the goods!


Last Week's Live Show

Behind the Scenes: Elegant Seagulls Behind the Scenes: Elegant Seagullswww.youtube.com

Ryan LaBar joined us on the stream to walk through the new Elegant Seagulls site and break down some of the coolest effects.

We recreated the 404 page and Rolodex (check the CodePens below) and learned some cool

CodePens

Hack. A digital card game Hack. A digital card gamecodepen.io

Another wonderful game from our friend Jamie Coulter. In Hack your goal is to protect your mainframe while gaining access to rival data.

It's a fun game with beautiful UI and brilliant sound design, just like the rest of Jamie's CodePen games.

The game's randomness is seeded so you can challenge your friend to beat the exact deck you faced by sending them the code.

Feathery 404 Feathery 404codepen.io

We learned how to make this demo the other day on the stream with Ryan. Move your mouse over the screen and feathers will get painted behind the hidden "404" message.

Check out the horse version we created, and watch the video above for the tutorial!

GSAP Rolodex Menu GSAP Rolodex Menucodepen.io

This was the other CodePen we made, leveraging GSAP Draggable to make a spinny wheel to match the one on Elegant Seagulls's site.

Chess movement (GSAP Flip) Chess movement (GSAP Flip)codepen.io

When I think of Chess and FLIP, it's usually because I've just lost and turned the board over.

Peter Norton uses the GSAP Flip plugin to demonstrate how each piece moves around the board. I love the way the boards rotate when you choose a different piece.

Paper craft animation Paper craft animationcodepen.io

Not only is this a super cute SVG illustration and animation, but the mouse-based parallax is the icing on the cake.

Inspiration

Choo-Choo World - A Web Based Wooden Train Track Builder Choo-Choo World - A Web Based Wooden Train Track Builderchoochooworld.com

If you've ever played Roller Coaster Tycoon, you'll love this site.

You build your track with tunnels, loops, ramps, curves, and more. There's even a first-person camera option and a night mode. Spend a few minutes revisiting your childhood.

So long, partner

Thanks for riding along!

I'm currently moving the newsletter from Revue to honestly anything but Revue. I do not recommend Revue.

So I spent the last week making a Prismic ➡️ MJML pipeline that automates a bunch of stuff and gives me full control over the style of the newsletter.

Unfortunately, when it came to sending the email, I couldn't get it working in ButtonDown, ConvertKit, or anywhere else yet.

I'm also working on moving the website from Gatsby to Astro, which has been its own process.

With all of that, I didn't have too much time to put into this specific issue.

So hopefully the next issue will be snazzier and work perfectly. Or you'll get a story about a whole new set of bugs! Either way, we'll have fun with it.

Your neigh-bor,

Alex

Buy Me a Coffee at ko-fi.com

Fill your mailbox with frontend fun

A weekly newsletter that demystifies the best CodePens, tutorials, and resources. It's always fun, free, and you can hang up your spurs any time.

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy.
Check out past issues
A mailbox stuffed with letters