DEV Community

Cover image for Awesome things for awesome people - August 2020
Jhey Tompkins
Jhey Tompkins

Posted on β€’ Edited on

10 3

Awesome things for awesome people - August 2020

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!

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post β†’

Top comments (4)

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 β€’

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 β€’

Looks like the webcam filter pen was the culprit! I've commented that one out for now πŸ‘

Thread Thread
 
robole profile image
Rob OLeary β€’ β€’ Edited

πŸ˜ŽπŸ‘ 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..

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more