DEV Community

loading...
Cover image for Awesome things for awesome people - August 2020

Awesome things for awesome people - August 2020

jh3y profile image Jhey Tompkins Updated on ・2 min read

Here's a roundup of what I made in August! 😎

A bit of a slower month with some other things going on, my birthday, and having some downtime to rest a bit! 😄

SCREAMING_SNAKE_CASE

Had this idea of an SVG animation for screaming snake case. The idea being a snake that's a lawyer screaming 😅

Wait for the snake to scream.

Party Eggo

I've enjoyed making various hybrid animations for Discord this month 😅 The process is a little lengthy. But, the animated SVG come out quite nice.

Party Bear

There's even merch(Shirts, stickers, hoodies, etc.) for this one! 😎

Loading Cubes

Some nice little loading cubes ❄️

Jh3y x Eggo

Another Discord hybrid emoji 😅

Love Buttons

Want to try and focus more on some micro-interaction UI. Put together this little "Love" button on the stream ❤️

DIY Animation Scrubber

Had this idea that you could create your own animation scrubber using CSS variables and animation-delay, and I was right! You can!

Move Things with CSS Book Promo

I'm writing an ebook and trying to release it this week 😯 It's called "Move Things with CSS" and it's about CSS animations and transitions. Naturally, I had to make a CSS animated promo for it.

Color Search Engine with Unsplash && React

Revisited a demo to convert it to using Netlify's serverless functions. Search by keyword to find a color using the Unsplash image API.

LEGO Webcam Filter

For the CodePen challenge, I took the opportunity to combine Legra.js with p5.js to create this LEGO filter 😅

Check it out here: https://codepen.io/jh3y/pen/YzqZVBb

CSS Art Exploded View Demo

Using this Rilakkuma CSS Art to create an exploded view to show how layering is a useful technique for creating images with CSS.

HSL && Mix Blend Mode Duotone Wheel

Create those rad duotone filters with CSS mix-blend-mode.


That's that!

Wanna see more? Reach out and say "Hi!" on Twitter!

Discussion

pic
Editor guide
Collapse
robole profile image
Rob OLeary

Hi Jhey,

You may want to consider reducing the number of codepens included in the post. Having so many cripples the browser. Cool demos as always.

Collapse
jh3y profile image
Jhey Tompkins Author

Yeah, I've noticed this with the last two roundups 👎

A bit of a shame that this is the case. Thank you! 🙏

Collapse
jh3y profile image
Jhey Tompkins Author

Looks like the webcam filter pen was the culprit! I've commented that one out for now 👍

Thread Thread
robole profile image
Rob OLeary

😎👍 The codepen script is async, so putting a decent number of pens in one post shouldnt grind it to a halt, but depending on what you do in a pen, you need to see if it plays nice in the aggregate I guess wrt resources. When I embed more than one codepen in an article, I just include the embed script once, on the first pen. The script is probably cached but it still requires a call each time. I don't know what Dev.to does behind the scenes. Something else to consider..