3 ms·

Looks like the GIF is fully built out in code. It's really nice to look at, well made, and easy to understand too. I wonder what program or code they used. I'd

by jdw64 3mo ago

Looks like the GIF is fully built out in code. It's really nice to look at, well made, and easy to understand too. I wonder what program or code they used. I'd love to know. p.sI thought it was a GIF, but it's an iframe. That was a nice little surprise.

gurjeet 3mo ago
Specifically, it's an JS-controlled/animated SVG embedded in an iframe.
- jdw64 3mo ago
  Yeah, I'm looking at it in developer mode. It's using a GSAP timeline approach to update SVG properties. I'm curious how they handle security and caching for something like this. It looks like they're using Tailwind, at least. but this approach is really clean and nice. It really feels like the best way to learn is by studying other people's code.
  - stavros 3mo ago
    What kind of security and caching concerns do they need to handle to animate an SVG?
    - jdw64 3mo ago
      I didn't explain myself very well. With iframes, there can be security concerns in general. Though in practice, there's usually no real issue. It just surfaces the surface level risk that JavaScript could be tampered with, but it's almost never something to actually worry about. As for caching strategy, cache invalidation issues do pop up from time to time. Since the filenames usually include a content hash, I'm guessing they're using a Vite style caching strategy. Cache invalidation might almost never be a problem, but you still plan for it just in case.
bddicken 3mo ago
Author here, thank you. Technically, they are using js + gsap + svg embedded i the article with iframes. Process-wise, I drafted most of them as static images in excalidraw, passed the images along to cursor for a first draft, applied styling rules, and then did a bunch of fine-tuning.
- jdw64 3mo ago
  Thank you so much.!!!! It can't be easy to put this much care into helping others understand, with that hand drawn feel and everything. I really learn a lot from it. The animations were great and made everything really easy to understand. Have a nice day.!

by jdw64 3mo ago

gurjeet 3mo ago

Specifically, it's an JS-controlled/animated SVG embedded in an iframe.

jdw64 3mo ago
Yeah, I'm looking at it in developer mode. It's using a GSAP timeline approach to update SVG properties. I'm curious how they handle security and caching for something like this. It looks like they're using Tailwind, at least. but this approach is really clean and nice. It really feels like the best way to learn is by studying other people's code.
- stavros 3mo ago
  What kind of security and caching concerns do they need to handle to animate an SVG?
  - jdw64 3mo ago
    I didn't explain myself very well. With iframes, there can be security concerns in general. Though in practice, there's usually no real issue. It just surfaces the surface level risk that JavaScript could be tampered with, but it's almost never something to actually worry about. As for caching strategy, cache invalidation issues do pop up from time to time. Since the filenames usually include a content hash, I'm guessing they're using a Vite style caching strategy. Cache invalidation might almost never be a problem, but you still plan for it just in case.

bddicken 3mo ago

Author here, thank you. Technically, they are using js + gsap + svg embedded i the article with iframes. Process-wise, I drafted most of them as static images in excalidraw, passed the images along to cursor for a first draft, applied styling rules, and then did a bunch of fine-tuning.

jdw64 3mo ago
Thank you so much.!!!! It can't be easy to put this much care into helping others understand, with that hand drawn feel and everything. I really learn a lot from it. The animations were great and made everything really easy to understand. Have a nice day.!