#remarkjs — Public Fediverse posts

I have been in a web accessibility course all day and I just realized that there does not appear to be any (maintained) solution to add captions and scopes to tables and rows and columns (respectively) in remark / rehype.
Did I miss something?
#a11y #markdown #remarkjs #rehypejs #javascript #accessibility #mdx

I have been in a web accessibility course all day and I just realized that there does not appear to be any (maintained) solution to add captions and scopes to tables and rows and columns (respectively) in remark / rehype.
Did I miss something?
#a11y #markdown #remarkjs #rehypejs #javascript #accessibility #mdx

I have been in a web accessibility course all day and I just realized that there does not appear to be any (maintained) solution to add captions and scopes to tables and rows and columns (respectively) in remark / rehype.
Did I miss something?
#a11y #markdown #remarkjs #rehypejs #javascript #accessibility #mdx

I have been in a web accessibility course all day and I just realized that there does not appear to be any (maintained) solution to add captions and scopes to tables and rows and columns (respectively) in remark / rehype.
Did I miss something?
#a11y #markdown #remarkjs #rehypejs #javascript #accessibility #mdx

I have been in a web accessibility course all day and I just realized that there does not appear to be any (maintained) solution to add captions and scopes to tables and rows and columns (respectively) in remark / rehype.
Did I miss something?
#a11y #markdown #remarkjs #rehypejs #javascript #accessibility #mdx

After tinkering last night, I discovered the #Markdown plugin adds a hefty 700 kB of JavaScript. That explains #Remarkjs' 650 kB footprint. I think I can do without Markdown, and that’s the beauty of #bespokejs' modular architecture 🧩

Be still my beating ❤️ I just discovered a mine of #bespokejs #presentation plugins:
https://www.npmjs.com/search?q=keywords%3Abespoke-plugin

There are plugins for #MarkDown support, presenter notes, and keyboard shortcuts to toggle blackout and fullscreen mode, or to go to a specific slide.

Now I can make my #Remarkjs theme even more, er, Remark-able!

I’ve packaged up my #Remarkjs-inspired #slideshow theme for the #bespokejs #presentation library:
👉 https://codeberg.org/harlows/bespoke-theme-remark

The #CSS and #JavaScript slide counter are split out for easy reuse.
The demo should be reasonably self-explanatory, but I’ll add more notes to the README over time.

I did some more tinkering to make #bespokejs more Remark-able, all with a tiny 8 kB #Javascript footprint (let's not talk about the 40 kB of fonts):
https://blog.harlow.net.nz/presentations/

(You can see the #Remarkjs #slideshow I shamelessly copied here: https://remarkjs.com/)

I love #Remarkjs for creating #slides from #Markdown, that is, until I noticed the library is ~650 kB. So, then I went full on #FrugalComputing and looked for the smallest #HTML #presentation library...

That honour, AFAICT, goes to Mark Dalgleish's modular #Bespokejs. The #Yeoman generator failed for me, but with a little perseverance I hand coded a demo:
https://blog.harlow.net.nz/presentations/
that only required 8 kB of #Javascript. Remarkably, that's 1/80th of Remark.js!

👉 https://markdalgleish.com/projects/bespoke.js/

After making my first simple #Remarkjs #presentation, I think I see the landscape a little clearer:

👉 @jmlilly's Liminal is a "minor extension" that provides a scientific theme for Remark.js http://www.jmlilly.net/talks/liminal-v2/

👉 @yihui's #Xaringan is an #Rpackage that translates #Rmarkdown into Remark-readable #markdown; using the #RStudio #IDE it supports theming & live previews of your slides https://slides.yihui.org/xaringan/

👉 @grrrck's added some serious extra bling to Xaringan https://pkg.garrickadenbuie.com/xaringanExtra/

Another bonus of #Remarkjs is that you can embed #COinS metadata into a #slideshow so folks can import your citations directly into #Zotero

Inspired by @kfitz's use of #reactjs for #presentations, I thought I might try using #remarkjs (because I like that it's #Markdown driven). Ideally, I'd like to generate a #slideshow from a markdown file as easily as @hibbittsdesign's Docsify-This renders a web page.

Discover how to include SVG graphics animated with the GreenSock JavaScript tool set in a RemarkJS slide deck. Check out this blog post for more information:

https://tessarinseve.pythonanywhere.com/nws/2023-10-31.wiki.html

#RemarkJS #GreenSock #SVG #GSAP