paulhebert

@paulhebert@sunny.garden

A weirdo living in Portland. I design and code websites for a living with the folks at Cloud Four.

In my free time, I enjoy drawing, gardening, cooking, brewing, and exploring the outdoors.

My current obsession is building a web-based game where you battle spaceships, explore the galaxy, and upgrade your ship. (But I don't really know what I'm doing.)

This profile is from a federated server and may be incomplete. Browse more on the original instance.

paulhebert, to genart

I'm making a little tool to automatically animate SVG drawings and am having fun using it on old generative art pieces I made.

I like how animating this one shows the logic of how the path-finding algorithm worked.

An 2d animated pattern. Small branching shapes spread across a canvas, then at the end all of the branch ends sprout circular appendages.

paulhebert,

Here's another older piece animated. This time with a slightly different algorithm for filling space.

A number of green wiggly lines animate in, filling space and occasionally overlapping. At the end, each of the lines gets a circular endpoint and empty gaps in the space are filled with red circles.

paulhebert,

@brook thanks! Oh yeah I hadn’t noticed the festive colors! Maybe I’ll pen plot some holiday cards

paulhebert, to javascript

I've been building a little paint app for fun. I decided to add a "kaleidoscope mode" and have been really enjoying playing with it.

It's still buggy and WIP but you can play with it here: https://kaleido-paint.netlify.app/

A screen recording of a paint app. As the cursor moves lines are drawn, but they're also copied and rotated around 6 axes making it have a kaleidoscope like effect. Then a "rotations" range slider is changed to increase the number of axes.

paulhebert,

@andypiper awesome! Let me know how it goes if you do!

andy, to random
@andy@bell.bz avatar

I'm doing a new blog thing where I get something from Dribbble/Layers > re-create in Figma as something actually realistic > build it out with HTML and CSS.

I need a name for it tho that needs to be snappy.

So far I've got “Inspo to IRL” but meh.

Any ideas?

paulhebert,

@andy Possibbble

paulhebert, (edited ) to animals

I’m a big fan of this photo I took of Clover while backpacking in Goat Rocks Wilderness. It had just snowed on the mountains the night before

paulhebert, to javascript

I made a weird little @codepen experiment exploring vector fields and user interaction: https://codepen.io/phebert/pen/NWezwYE

So far the feedback I've gotten is "Feels like rubbing your hand on suede" and "It feels like everyone's watching! LOL" 😅

A 10 by 10 grid of light pink arrows on a dark purple background. Every few seconds they all shift their rotation into a new flowing pattern. After a bit, a mouse cursor moves over the arrows and they all change color and start following the cursor.

andy, to random
@andy@bell.bz avatar

just wrote flex-decoration instead of flex-direction

hire me for css

paulhebert,

@andy weird flex but ok

bleuje, to random French
@bleuje@mastodon.social avatar

collaboration with jn3008

cubes camouflage: some cubes appear and roll, revealing themselves briefly only during their movement because they match a background of dots

paulhebert,

@bleuje this is a really fun effect

paulhebert, to webdev

I was thinking through whether to use Canvas or SVG for a side project, and it occurred to me that it might be interesting to write a blog post about reasons to choose one over the other.

Would you be interested in a blog post on choosing between Canvas and SVG?

Are there specific questions you would have?

Are there reasons that you would pick one or the other?

paulhebert,

@Jeremiah for sure! It's a tricky choice. They've both definitely got pros and cons and switching between the two isn't easy.

I'd love to learn more about InVision's rendering engine if there are any public articles you're aware of!

paulrickards, to random
@paulrickards@mastodon.social avatar

Deep diving into motion capture used for biomechanics research. I know absolutely nothing about it, but it's always fascinating to peek into other disciplines to learn new terminology, workflows, software, and file formats. Seems .C3D files are used a lot for datasets.

paulhebert,

@paulrickards these are really cool.

How do you plot the number in the bottom left? Do you have a custom font or something you're using?

paulhebert,

@paulrickards Ahh got it. Thanks for the resources. Those are super helpful!

I like the human quality of the handwriting 🙂

futurebird, (edited ) to random
@futurebird@sauropods.win avatar

Dearly beloved, we are gathered here today to remember an ant, a colony member, a sister and a worker: Daffodil the Eastern Black Carpenter Ant. Daffodil loved to explore, she loved to escape and that's how we first got to know her, and suspecting that the same ant was escaping over and over she was given her yellow colors and her name.

1/

paulhebert,

@futurebird really interesting thread and video! Thanks for sharing

paulhebert, to Zelda

The latest game uses repeating patterns to create a beautiful, cohesive environment.

I generated random patterns inspired by the game using and and printed them using a pen-wielding robot!

https://cloudfour.com/thinks/coding-randomized-zelda-patterns/

paulhebert, to random

Experimenting with new pens and paper on the pen plotter. The white doesn't draw as consistently as I'd like, but the gold seems to work well

matthiasott, to accessibility
@matthiasott@mastodon.social avatar

I remember seeing an article recently about building accessible (mega) menus somewhere but now I can’t find it anymore. 🤔

What are the best resources you know about making such a navigation (keyboard) accessible?

paulhebert,

@tylersticka @matthiasott, at some point, I should organize the research I did and package it up into an article.

In the meantime, here are some of the references that I found useful when building out that mega menu:

paulhebert, to random

We just published a case study on one of my favorite web projects I've worked on in a long time: we built an interactive demo showcasing how Cloudinary's APIs can solve common developer pain points.

https://cloudfour.com/made/cloudinary-interactive-demo/

The write-up includes the finished demo, peeks at in-progress designs, info about our tech stack (server-side rendering a Preact app across PHP and Ruby back-ends), and metrics on the demo's impact (engagement went up over 400%!)

My favorite bit is the content-aware video cropping demo, so be sure to check that out!

paulhebert,

@nhoizey great call!

I've added a card to fix that behavior. Thanks for pointing that out!

paulhebert, to random

I recently tracked down a tricky web performance issue caused by an unexpected culprit.

I wrote about the issue so that hopefully others can avoid this in the future, and we can all deal with fewer layout shifts on the web:

https://cloudfour.com/thinks/watch-out-for-layout-shifts-with-ch-units/

paulhebert,

@nhoizey thanks!

It took a while to figure it out. 😅

I'm glad that Google's RUM data highlighted the problem and encouraged us to dig into it.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • JUstTest
  • mdbf
  • InstantRegret
  • ethstaker
  • magazineikmin
  • GTA5RPClips
  • rosin
  • modclub
  • Youngstown
  • ngwrru68w68
  • slotface
  • osvaldo12
  • kavyap
  • DreamBathrooms
  • Leos
  • thenastyranch
  • everett
  • cubers
  • cisconetworking
  • normalnudes
  • Durango
  • anitta
  • khanakhh
  • tacticalgear
  • tester
  • provamag3
  • megavids
  • lostlight
  • All magazines
    •