4 ms·

I also blog with org mode and anything that can be exported as a block of html can be easily included. Recently I dropped an interactive chart using React into

I also blog with org mode and anything that can be exported as a block of html can be easily included. Recently I dropped an interactive chart using React into the text, for example.

adityaathalye 1y ago
Ditto. I wanted to show JavaScript text art animation, and could "just" do this: *** ~setInterval~ and ~setTimeout~ worked just right These let us call functions that do exactly the thing we want, viz. punch /[[#the-aesthetic-of-text-art-and-its-animation][characters]]/ into our "live spreadsheet" medium, exactly the way the artist placed them in the original art source. These methods can make a CPU sing, but hey, the awesome art is worth every watt it, ah, draws. #+html: <div class="box invert"> #+html: <em>Random twitch loop <code>setTimeout</code> and recursion.</em> #+html: <div id="blink-demo"></div> #+html: </div> #+html: <script type="text/javascript">demoBlink();</script> #+html: <div class="box invert"> #+html: <em>Flipbook-like frame-by-frame animation loop with <code>setInterval</code>.</em> #+html: <div id="glider-demo"></div> #+html: </div> #+html: <script type="text/javascript">demoGlider();</script> This works very nicely because I've structured my website as "every post is just a microsite". See: src: https://github.com/adityaathalye/shite/tree/master/sources/posts/animate-text-art-javascript https://github.com/adityaathalye/shite/tree/master/sources/p... \_ (develop %|u+4) $ tree sources/posts/animate-text-art-javascript/ sources/posts/animate-text-art-javascript/ ├── animations.js ├── blink.ddw ├── DarkDrawSheetView.png ├── glider.ddw ├── HanukkahOfData2022ArtCopyrightDwimmertxt.png ├── HanukkahOfData2022ArtSliceCopyrightDwimmertxt.png ├── HanukkahOfData2022DarkDrawDrawingViewCopyrightDwimmer.png ├── HanukkahOfData2022DarkDrawSheetViewCopyrightDwimmer.png ├── index.org ├── loading.ddw └── spinner.ddw 1 directory, 11 files
- BeetleB 1y ago
  #+html works, but why not just a proper HTML source block? Easier to edit, and you get syntax highlighting?
  - adityaathalye 1y ago
    Yeah, that post was before I realised there's a better way. Now I use a proper source block with export control etc.

I also blog with org mode and anything that can be exported as a block of html can be easily included. Recently I dropped an interactive chart using React into the text, for example.

adityaathalye 1y ago

Ditto. I wanted to show JavaScript text art animation, and could "just" do this: *** ~setInterval~ and ~setTimeout~ worked just right These let us call functions that do exactly the thing we want, viz. punch /[[#the-aesthetic-of-text-art-and-its-animation][characters]]/ into our "live spreadsheet" medium, exactly the way the artist placed them in the original art source. These methods can make a CPU sing, but hey, the awesome art is worth every watt it, ah, draws. #+html: <div class="box invert"> #+html: <em>Random twitch loop <code>setTimeout</code> and recursion.</em> #+html: <div id="blink-demo"></div> #+html: </div> #+html: <script type="text/javascript">demoBlink();</script> #+html: <div class="box invert"> #+html: <em>Flipbook-like frame-by-frame animation loop with <code>setInterval</code>.</em> #+html: <div id="glider-demo"></div> #+html: </div> #+html: <script type="text/javascript">demoGlider();</script> This works very nicely because I've structured my website as "every post is just a microsite". See: src: https://github.com/adityaathalye/shite/tree/master/sources/posts/animate-text-art-javascript https://github.com/adityaathalye/shite/tree/master/sources/p... \_ (develop %|u+4) $ tree sources/posts/animate-text-art-javascript/ sources/posts/animate-text-art-javascript/ ├── animations.js ├── blink.ddw ├── DarkDrawSheetView.png ├── glider.ddw ├── HanukkahOfData2022ArtCopyrightDwimmertxt.png ├── HanukkahOfData2022ArtSliceCopyrightDwimmertxt.png ├── HanukkahOfData2022DarkDrawDrawingViewCopyrightDwimmer.png ├── HanukkahOfData2022DarkDrawSheetViewCopyrightDwimmer.png ├── index.org ├── loading.ddw └── spinner.ddw 1 directory, 11 files

BeetleB 1y ago
#+html works, but why not just a proper HTML source block? Easier to edit, and you get syntax highlighting?
- adityaathalye 1y ago
  Yeah, that post was before I realised there's a better way. Now I use a proper source block with export control etc.