Jammie Awards, Generative Canyons, & Car Physics! | Frontend Horse | Creative Web Development

Newsletter • Issue 73

Jammie Awards, Generative Canyons, & Car Physics!

Howdy, partner!

I'll start off with a bit of fun news: I've been nominated for a Jammie Award! I'd love your support if you'd like to go vote!

To vote for me you need to choose "Alex Trost" in the Live Streamer of the Year category.

A few friends from the Frontend Horse community have been nominated as well: Ben Holmes, Stephanie Eckles, and the hosts of FSJam and Coding Cat are all wonderful, and a vote well cast!

CodePens

Ghost through the Forest

Ricardo Oliva Alonso sends a ghost floating through the woods. It has fun animations and great atmospheric sound effects. It's all done with divs and CSS (minus the sound, of course)!

Check it out

Haunted Moon - One Div

It's October, which means Lynn Fisher's Divtober has begun! Every year she comes up with 31 prompts and people make CSS art using just one div.

Check out the community's work with the divtober tag on CodePen.

Check it out

Taffy Slide Shader

This one just looks like a delightful melting taffy slide to me. A beautiful animated vertex shader by Zach Saucier using simplex noise.

Check it out

Canyon Loop

A fun artistic pen from Tom Miller. Using JS he creates random canyon SVG shapes, then uses GSAP to scale and move them while increasing their opacity. A little bit of animated noise grain is the perfect detail on top.

Check it out

Sponsor

Jamstack Conf 2022

Come celebrate with us at the biggest party of the year!

Join thousands of developers and web enthusiasts for two days of keynotes, hands-on workshops, connection building, all the food and drinks you can handle, and the Jamstack block party with a special live-coding performance by Char Stiles and Dan Gorelick!

Use Code FRONTENDHORSE20 to get 20% off early bird tickets today.

Check it out

Articles

Use cases for CSS comparison functions

An in-depth article with real-life use cases for comparison functions like clamp(), max(), and min(). Written by Ahmad Shadeed.

Check it out

Better Scrolling Through Modern CSS

This great article touches on theming, layout shift, and how scrollbars work across different browsers and operating systems. Written by our friend Mayank from the Frontend Horse Discord.

Check it out

Resources

Theatre v0.5

Theatre.js is a visual motion design tool for the browser. Think Adobe AfterEffects for Three.js and SVG animations.

They just launched version 0.5, which introduces `@theatre/r3f`. It brings a Blender interface to React Three Fiber.

An interface where a model of a butterfly has visible rotation controls, allowing you to move it in place rather than messing with number values.

If you like the idea of visual editing for 3D scenes, you should check this out. If you're using react-three-fiber for complex 3d scenes, this seems like a godsend.

Check it out

State of CSS Survey

The State of CSS survey for 2022 is open! These surveys are fun to do every year, and I always end up learning about new features. You might recognize Frontend Horse among the resources section!

Check it out

Inspiration

Camping Car Physics - Spline

Spline continues to be an impressive tool for 3D creation on the web, and their new physics features makes it even more approachable and fun.

This is a fun demo where you drive your little car around a delightful little campground. If you love Bruno Simon's personal site, you'll enjoy this too!

Check it out

Figtree - Variable Font Site

I couldn't decide if I should categorize this as an inspiration or a resource, as it's both.

Erik uses an SVG filter to make the waves feel like they're moving, placing a little sailboat on top that doesn't get warped (Desktop only).

The rest of the site is clean and beautiful, with some delightful animations that show off the attributes of the free variable font.

It's a lovely font that I'm already putting to work in my projects!

Check out Figtree

Videos

5 underused HTML Elements

I've been doing more short-form videos lately, and really enjoying the creation process.

Here I share 5 underused HTML elements that developers might want to use more.

Check it out

Essential SVG Tool

If you're not using SVGOMG as part of your SVG workflow, check out this video to see why you probably should!

Check it out

First day at the new job

A skit about a front end developer's first day on the job.

Check it out

Quora Mobile Redesign

I've been sharing Hyperplexed's work for a bit now, but I still think they're very underrated. Follow them on YouTube and check out this great video where they redesign Quora's mobile layout.

Check it out

So long, partner

That's it for this week, thanks so much for reading! And thanks if you voted in the Jammie awards! I'm up against some wonderful competition, and I'm just thrilled to even be nominated. Thanks so much for all the support, and I hope you have a wonderful week.

Your neigh-bor,
Alex