3 ms·
This works if your code snippets generate relatively static output. Lately I often need to create animations, often interactive ones. See https://akkartik.name/
by akkartik 1y ago
This works if your code snippets generate relatively static output. Lately I often need to create animations, often interactive ones. See https://akkartik.name/debugUIs.html https://akkartik.name/debugUIs.html, for example.
In my life I've often switched to more manual tools when I notice that the more automated tool causes me to live within certain limitations. Sometimes it has taken me a decade to notice these limitations. Automation matters when I do something tens of times a day. But I publish a blog post once in tens of days. It feels worth some additional work to get a little more control and break out of ruts.
- justinhj 1y agoI 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 agoDitto. 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 agoYeah, that post was before I realised there's a better way. Now I use a proper source block with export control etc.
- adityaathalye 1y agoThe neat thing about org-mode for writing and publishing (I don't use it for "productivity") is that every time I have a new requirement, there is a solution that I can integrate into my existing writing workflow. And I get multimedia publishing "for free". Discussed here: https://news.ycombinator.com/item?id=43157672 https://news.ycombinator.com/item?id=43157672 Why and How I use "Org Mode" for my writing and more 217 points by sebg 7 months ago | 64 comments src: https://github.com/adityaathalye/shite/blob/master/sources/posts/why-and-how-i-use-org-mode/index.org https://github.com/adityaathalye/shite/blob/master/sources/p...