Blogs
Everything is Code

Everything is Code

October 20, 2025

Intro

BC we have to use those OpenAI Prompt packs: https://academy.openai.com/public/tags/prompt-packs-6849a0f98c613939acef841c

Motion Canvas is great for interactive, visually rich web animations.

Remotion is best for React developers needing video automation and scaling.

Manim is the tool for deep mathematical visualization with powerful programmatic control.

Presentations: Reveal.js vs Slidev

  • Reveal.js is a popular HTML presentation framework that supports Markdown and is flexible but often requires writing HTML for layout and animations. It is widely used but less concise for slide content.[1]
  • Slidev is built on Vue.js and Vite, providing an extended Markdown format for creating slides. It is more concise than Reveal.js, supports Vue components for interactive slides, has instant hot-reloading, built-in theming, and recording features. Slidev is very developer-friendly and web-based, allowing extensive customization.[2][1]
  • In summary, Slidev is often preferred for modern developer presentations due to ease of use, interactivity, and faster iteration, while Reveal.js remains a flexible, established choice.

Reports: Pandoc vs Typst vs LaTex

  • Pandoc is a versatile converter tool supporting Markdown, LaTeX, HTML, DOCX, and many other formats. It is great for converting documents and combining Markdown with raw LaTeX for complex formatting. It requires some setup but is widely used and flexible.[3][4]
  • Typst is a relatively new open-source typesetting system designed as a LaTeX alternative, known for a clean syntax inspired by Rust and Python, faster compilation, and easier document styling. It offers good readability of error messages and web collaboration features. It is intuitive for simple to moderately complex documents but less mature than LaTeX.[5][6][3]
  • LaTeX is the traditional, powerful typesetting system with extensive features for academic and complex document layouts. It has a steeper learning curve and verbose syntax but the richest ecosystem and long-term support.[3][5]
  • Overall, Pandoc is excellent for format conversion and combining Markdown with LaTeX, Typst offers a modern alternative with easier syntax, and LaTeX is ideal for advanced, professionally typeset documents.
Use CaseToolKey StrengthsNotes
PresentationsReveal.jsFlexible, established, supports MarkdownRequires HTML for layouts
SlidevMarkdown-based, interactive, fast HMRDeveloper and Vue friendly
ReportsPandocFormat conversion, markdown + LaTeX supportSetup needed
TypstClean, easy modern syntax, fast compileNewer, evolving
LaTeXPowerful, rich ecosystem for academiaSteep learning curve

This selection depends on priorities: Slidev for modern web presentations, Reveal.js for flexible HTML slides; Pandoc for format conversions, Typst for newer simpler typesetting, and LaTeX for complex document mastery.

PPTs as a Code

My SliDevJS ForkMy SliDevJS Fork
Presentations as a Code pushed to Github Pages
  1. RevealJS

You can place this one inside HUGO SSG if you want, like: https://github.com/joshed-io/reveal-hugo

My favourite: SliDevJS

https://jalcocert.github.io/JAlcocerT/make-slidev/

You can create a Micro SaaS around Slidev

Like: https://github.com/JAlcocerT/slidev-editor with Firebase and Logto auth working as per this post :)

Building in public a slideb editor plus tech talk

Star History Chart

https://jalcocert.github.io/JAlcocerT/creating-presentations-with-ai/

SliDev Real Estate

SliDev and Tech Talks

As I feel quite confortable with SliDev, ill be capturing the upcoming interesting tech talk I conduct.

The latest tech talk, I have place here

And also any slidev ptt done for youtube tech videos if applies, will be inside Home-Lab/SlidevJS.

npm init slidev #yarn create slidev

Features I enjoy: Themes can provide styles, layouts, components, or even configurations for tools.

  1. Switching between themes by just one edit in your frontmatter
  2. Embed Twitter, youtube… thanks to VUE components, like the demo ./components/Counter.vue
#<Tweet id="1866822826696773747" scale="0.5" />
#<Youtube id="fxVNTffZC2U" width="300" height="200" />

  1. Bring up to date data from API calls. Like https://open-meteo.com

  2. Make it look cool with mermaidJS / Katex / ChartJS VUE components

  3. This thing can even do animations based on https://motion.vueuse.org/

  4. Katex, for those PHD users

  5. MermaidJS

  6. Export to pdf/pptx or png. They are all pngs btw, so be mindful if non tech people will have to edit

Cool PPTs other created: https://raw.githubusercontent.com/BaizeAI/talks/refs/heads/main/packages/2025-06-11-kubecon-hk/slides.md

You can combine SliDev + OBS + FastApi Audio Recorder S2T-TTS for youtube video creation workflow

FastAPI x Astro x ChartJS pulling data from sqlite

  1. RSS…of youtube CTRL+U: https://www.youtube.com/@UnfoldingData/shorts -> https://www.youtube.com/feeds/videos.xml?channel_id=UCogC2-5ZqMrLIWtm00RP7Ow with this kind of Vue component
<LatestYouTubeVideo channelId="UCPPMA8ZEusAe5dVH6PbjZFA" width="400" height="225" />
  1. Live data via APIs with custom components. Like these 2, with open-meteo or yfinance based.

Slidev live data component from yfinance

  1. Live stuff: http://localhost:3030/presenter and live annonations

Similarlo to https://github.com/DmytroVasin/DrawPen or with excalidraw

alt text

Diagrams are also code!

  1. https://diagrams.mingrammer.com/docs/getting-started/examples
  2. MermaidJS you can also use it inside HUGO/Astro/MermaidJS…

Had a look to couple of tools for diagrams

  1. https://github.com/stan-smith/FossFLOW

Make beautiful isometric infrastructure diagrams

  1. https://markmap.js.org/ and https://github.com/markmap/markmap

It renders text to diagram and can reference files: https://gist.githubusercontent.com/raw/af76a4c245b302206b16aec503dbe07b/markmap.md

MIT | Build mindmaps with plain text

https://github.com/terrastruct/d2

D2 is a modern diagram scripting language that turns text to diagrams.

eBooks as a Code

Initially, I thought that ebooks could be just done via Rmd

Then I understood here, that pandoc is what make the thing work.

And found a cool SSG Theme to host your ebook pdfs statically.

Then, I created to just dump my notes into ebooks: https://github.com/JAlcocerT/ebook-ideas

ebook ideas Repoebook ideas Repo
Source Code to ship ebooks
ℹ️
When you create an ebook, use Foliate to read on your desktop
sudo snap install foliate

You know, just in case you want to create your pdf libre or your epub libre org!

Or to write a e-book for your friend (Anna’s archive).

Others, like WhyCryptoCurrencies, use Pollen instead

Or…because you can now have deep research agents everywhere:

Some people had problems when trying to convert their Words to epub with amazon tools.

So they others to do it form them and be able to publish to Amazon: https://kdp.amazon.com/en_US/

But you dont have to do so if you write on a epub friendly format from the get go.

But before going deep and create an ebook, why not creating a pdf article for your website?

Like…something for https://www.jalcocertech.com/support/whitepapers/

Reports as a code

As seen while exploring yfinance on this repo and post.

You can make a one prompt vibe coded report

Stonks EDA Summary Report

via yfinance-104.ipynb

https://github.com/JAlcocerT/py-stonks/blob/main/z-eda-yfinance/yfinance-104.ipynb

I mean…a real report.

Not just a cool matplotlib graph or a pdf that you vibe coded with a tech solution for jira x pbi.

And then I got to know about Carbone, which I tinkered with on the wedding v2 post

Fast and simple report generator, from JSON to pdf, xslx, docx, odt…

ℹ️
We have Pandoc to convert between tons of formats docx, epub, pdf, md, jsom, latex…

Infographics as a code

This can also be done with Python, but it will look more like a report or with matplotlib.

Animating yfinanceAnimating yfinance
YFinance for Python, cool plots and animations | Post
Data In Motion RepoData In Motion Repo
Source Code of Matplotlib Animations with yfinance - Example Total Returns

Resume as a Code

Just in case that you need some help with: https://fmhy.net/misc#resume-portfolio

More options for creating your CV?

  1. https://github.com/BingyanStudio/LapisCV

MIT | 📄 Easily create your resume with Markdown on VSCode / Typora / Obsidian

  1. https://github.com/srbhr/Resume-Matcher

Apache v2 | Improve your resumes with Resume Matcher. Get insights, keyword suggestions and tune your resumes to job descriptions.

  1. More than a way to create a CV, a way to impress if you are on linkedin: https://github.com/Nutlope/self.so

LinkedIn -> personal site generator

  1. https://github.com/rendercv/rendercv with great docs

MIT | Version-control CVs/resumes as source code

  1. YAML Resume

Control a yaml like: https://github.com/yamlresume/yamlresume/blob/main/packages/cli/resources/resume.yml

Get a PDF to apply to the offer you want before some AI agent take it.

Render content using LaTeX templates. I liked: https://yamlresume.dev/docs/layout/templates/moderncv-classic

Generate PDFs via XeTeX or Tectonic compilation engines

MIT | Resumes as code in YAML, brought to you with ❤️ by PPResume.

  1. https://github.com/aadya940/autoresume

Apache v2 | An Open Source Resume Builder and LaTeX Code Editor with AI Capabilities.

Kind of a LandThatJob?!

People do all sort of creative stuff around PDF: https://github.com/domdomegg/pdf-scanner or https://github.com/lookscanned/lookscanned.io

🖨 Makes PDFs look like they were scanned

You can do what with PDF?

  1. https://github.com/pdfme/pdfme

MIT | Open-source PDF generation library built with TypeScript and React. Features a WYSIWYG template designer, PDF viewer, and powerful generation capabilities. Create custom PDFs effortlessly in both browser and Node.js environments.

Fast PDF Generator Easy PDF Template Design Simple JSON Template Works on Node and in the browser. Use templates to generate PDFs—complex operations are not required. Anyone can easily create templates using the designer. Templates are JSON data that is easy to understand and work with.

With very interesting templates: https://pdfme.com/templates and even template designer playground https://pdfme.com/template-design

  1. Posters, ebooks, letter, reports…https://github.com/Kozea/WeasyPrint

WeasyPrint is a smart solution helping web developers to create PDF documents. It’s free and open source software that can be easily plugged to your applications and websites and turns simple HTML pages into gorgeous:

See the examples and their source code: https://weasyprint.org/

BSD3 - The awesome document factory

  1. https://github.com/plutoprint/plutoprint

PlutoPrint is a lightweight and easy-to-use Python library for generating high-quality PDFs and images directly from HTML or XML content. It is based on PlutoBook’s robust rendering engine and provides a simple API to convert your HTML into crisp PDF documents or vibrant image files. This makes it ideal for reports, invoices, or visual snapshots.

MIT | A Python Library for Generating PDFs and Images from HTML, powered by PlutoBook

pip install plutoprint



## Video as a Code

[Video ,editing' Thanks to FFMPEG and the CLI](https://jalcocert.github.io/JAlcocerT/photo-video-tinkering/#video-editing), of course!

You could also use GUI tools:

![Applying KDENLIVE LUT](/blog_img/outro/kdenlive-lut.png)

But really, just to know the format of the videos of one folder and joining the similar ones together you dont need that:

```sh
bash -lc 'header_printed=0; \
find . -maxdepth 1 -type f \( -iregex ".*\.\(mp4\|mov\|mkv\|avi\|mpg\|mpeg\|wmv\|m4v\|3gp\)$" \) -print0 \
| sort -z \
| while IFS= read -r -d "" f; do \
  base=${f#./}; \
  if [ $header_printed -eq 0 ]; then \
    printf "%-12s %-8s %s\n" "Resolution" "FPS" "File"; \
    printf "%-12s %-8s %s\n" "----------" "----" "----"; \
    header_printed=1; \
  fi; \
  if command -v ffprobe >/dev/null 2>&1; then \
    res=$(ffprobe -v error -select_streams v:0 -show_entries stream=width,height,avg_frame_rate -of default=nw=1:nk=1 "$f" 2>/dev/null); \
    width=$(echo "$res" | sed -n "1p"); \
    height=$(echo "$res" | sed -n "2p"); \
    afr=$(echo "$res" | sed -n "3p"); \
    fps=$(awk -v r="$afr" "BEGIN{split(r,a,\"/\"); if(length(a)==2&&a[2]>0) printf \"%.2f\", a[1]/a[2]; else print r}"); \
    printf "%-12s %-8s %s\n" "${width}x${height}" "${fps}" "$base"; \
  elif command -v mediainfo >/dev/null 2>&1; then \
    info=$(mediainfo --Inform="Video;%Width%x%Height%|%FrameRate%" "$f" 2>/dev/null); \
    printf "%-12s %-8s %s\n" "${info%%|*}" "${info#*|}" "$base"; \
  else \
    printf "%-12s %-8s %s\n" "(install ffprobe or mediainfo)" "-" "$base"; \
  fi; \
done'

# Resolution   FPS      File
# ----------   ----     ----
# 3840x2160    50.00    DJI_20251003204711_0010_D.MP4
# 3840x2160    50.00    DJI_20251003204913_0011_D.MP4
# 3840x2160    50.00    DJI_20251003204946_0012_D.MP4
# 3840x2160    50.00    video.mp4

You can always add music to your videos: https://www.youtube.com/audiolibrary?feature=blog

ffmpeg -y -i initial_silenced_video.mp4 -stream_loop -1 -i afilador_101.mp3 \
  -c:v copy -c:a aac -shortest -map 0:v:0 -map 1:a:0 \
  ./resulting-video-with-audio.mp4

Animations as a Code

As we saw in summer, we can do cool animations as a code

git clone https://github.com/JAlcocerT/DataInMotion
#git branch -a
git fetch --all --prune && (git switch libreportfolio || git switch --track origin/libreportfolio) && git pull

uv run animate_sequential_compare_price_evolution_flex_custom.py GLD BTC-USD 2025-01-01 10 short

ffmpeg -y -i gld-btc.mp4 -stream_loop -1 -i afilador_101.mp3 \
  -c:v copy -c:a aac -shortest -map 0:v:0 -map 1:a:0 \
  ./gld-btc-audio.mp4

Do animation logic once, ship it everywhere:

With the proper data model, you can save the Google Sheets read with =GOOGLEFINANCE("CURRENCY:USDEUR"; "price"; FECHA(AÑO(HOY()); 1; 1); HOY(); "DAILY")

Or =GoogleFinance("CURRENCY:BTCUSD"; "price"; HOY()-30; HOY())

Not to mention the possibility to vibe code very quickly this kind of aggregates within st.

See how quickly you can iterate through your ideas:

uv run streamlit run streamlit_portfolio_aggregate.py
#uv run streamlit run streamlit_ath_viewer.py #from WK42Y25
#uv run streamlit run LibrePortfolio-Plots.py #a better version of streamlit_ath_viewer and streamlit_script_plots

Streamlit price and dividends of a portfolio aggregated

#from the same libreportfolio branch
uv run LibrePortfolio-PlotsFlask.py

docker compose build --no-cache
#sudo docker compose up -d
#sudo docker compose down #test of the image over

Then just make the built webapp container public with portainer+cloudflare with libreportfolio-flask:8501 to https://graficas.libreportfolio.fyi/

Record and Share: because people share even gsheets

ffmpeg -y -i untitled.mp4 -stream_loop -1 -i ImmortaYT.mp3 \
  -c:v copy -c:a aac -shortest -map 0:v:0 -map 1:a:0 \
  ./graficas-libreportfolio.mp4

You know, we can do animation as a code as seen with matplotlib.

And you should probably place your codes into a repo like DataInMotion if you go that route.

What if you have couple of brands and want to recycle your animations?

You can even create a quick streamlit, then flask web apps around animations to let other create with your tools:

uv run streamlit run LibrePortfolio-Plots.py 
uv run LibrePortfolio-PlotsFlask.py
docker compose build --no-cache

Make it visible on social media.

Because lets be honest: website traffik is broken with AI.

Then, Last night the yt algorithm hit me with this:

And this

Double Pendulum RepoDouble Pendulum Repo
Python Double Pendulum
Double Pendulum RepoDouble Pendulum Repo
Source Code a chaos theory in motion webapp

And then…I saw this: https://github.com/bufferhead-code/this-video-is-written-in-code

git clone https://github.com/bufferhead-code/this-video-is-written-in-code

So…wait, didnt we already…?

Matplotlib can be used for creating basic 2D animations and exporting them as videos or GIFs, mainly for data visualizations and scientific plots.

It supports animation classes that update frames over time, but it is limited in terms of creative, sophisticated motion graphics or professional video production and interactivity.

In contrast, tools like Motion Canvas, Remotion, or Manim provide much richer features for video animations with more control, flexibility, and higher production value.

They are specialized for creating engaging presentations, explainer videos, or educational animations beyond simple graph animations.

Blender is a professional 3D modeling and animation software, and yes, it supports scripting—usually with Python—to automate scene creation, object manipulation, lighting, and camera control. This scripting allows creating complex 3D scenes and animations programmatically.

Blender scripting is powerful for 3D animations, simulations, and rendering, which is quite different and much more advanced compared to 2D animation libraries like Matplotlib.

  • Matplotlib: Best for simple 2D scientific animations, basic video export.
  • Motion Canvas/Remotion/Manim: Better suited for rich 2D animated videos and educational content.
  • Blender: Professional 3D animation software with Python scripting for complex 3D scenes and animations.

So, for video animations where creative flexibility and professional output matter, tools like Motion Canvas or Remotion are superior to Matplotlib.

For 3D scenes and animations via coding, Blender scripting is the go-to solution.

Motion Canvas, Remotion, and Manim are all tools for creating programmatic animations and videos, but they cater to different use cases and technologies.

Motion Canvas is a modern TypeScript-based tool focused on vector animations with real-time preview and strong web integration.

It is praised for allowing CSS features and live timing control in animations but is still relatively new with fewer complex examples and features compared to others.

It targets users who prefer coding animations with web tech and want interactive previews while creating.

Remotion stands out as a React-based tool for creating programmatic videos. It enables creating MP4 videos using React components, making it excellent for developers familiar with React who want to automate and scale video production.

Remotion is well-regarded for strong documentation, ease of use, and a focus on collaborative and dynamic video creation, including applications like product videos and in-browser editing.

Manim, on the other hand, is a Python library specialized in math and educational animations. It offers fine-grained control for precise formula animation and algorithm visualization.

It requires more programming expertise and manual effort but is powerful for STEM use cases.

Recent research advances also use AI to automate some Manim coding, improving accessibility.

Manim excels in complex mathematical and algorithmic animations rather than general vector or video creation.[7][8][9]

Feature/AspectMotion CanvasRemotionManim
Programming LanguageTypeScript (Web, JS)React (JavaScript)Python
Main Use CaseVector animations & presentationsProgrammatic video creationMath & educational animations
Preview/InteractivityReal-time visual previewReact-driven dynamic renderingNo live preview, manual rendering
Complexity & ControlModerate, web tech basedHigh for UI/UX videosHigh for math/algorithm detail
Target UsersWeb developers, educatorsReact developers, marketersEducators, researchers, math pros
Learning CurveModerateModerateSteep (programming + math)
Community & DocsGrowing, good docsStrong community & documentationMature community, rich resources

Animations x SSG

This year I also was playing around with Astro components.

And withing the datanova theme, I found out that they are doing a really cool animation (which is a SVG!)

npm install
#npm run dev
npm run dev -- --host 0.0.0.0 --port 4321 #http://192.168.1.11:4321/

Video Geolocation with FFMPEG

https://github.com/JAlcocerT/Py_RouteTracker

With a GoPro and its metadata, it’s all about:

exiftool GX011032.MP4
exiftool -ee GX011032.MP4

Make sure to record with GPS on to bring that lovely Geo data.

For just accelerations:

Conclusions

https://github.com/slidevjs/slidev

Webs are also code

Ghost with Docker 🐋 ↗ WP with Docker 🐋 ↗

If you are looking for a tool to get general knowledge about a website, you can use the web-check project

🕵️‍♂️ MIT | All-in-one OSINT tool for analysing any website

And you can use these projects together with https://github.com/datopian/markdowndb - MIT Licensed

Turn markdown files into structured, queryable data with JS. Build markdown-powered docs, blogs, and sites quickly and reliably.

Commento for Websites | Docker Config 🐋 ↗

Writing Posts with Codex

As seen during summer on this post.

How about using Codex CLI to write SSG posts?

Codex CLI | Docker Config 🐋 ↗
git clone https://github.com/JAlcocerT/Home-Lab
cd codex-cli

docker compose -f docker-compose.codex.yml up -d --build

# To stop the container (using either method):
# docker compose -f docker-compose.codex.yml down  # Using compose
# docker stop codex-container && docker rm codex-container  # Using container name
docker exec -it codex-container bash
codex #And ask anything you want!
  1. Access the container:
docker exec -it codex-container bash

Just in case that you dont want to do the n8n + CMS API.

Example: given the repository https://github.com/Snouzy/workout-cool?tab=readme-ov-file#deployment--self-hosting

Agentic CLI is cool

Goose | Docker Config 🐋 ↗ Gemini CLI | Docker Config 🐋 ↗

https://jalcocert.github.io/JAlcocerT/ai-tools-for-cli/#goose https://jalcocert.github.io/JAlcocerT/ai-tools-for-cli/#gemini-cli-x-git-mcp

Gemini MCP Working Goose CLI UI

Writing Technical Posts with Perplexity and IDEs

Or just Cursor/Windsurf agents + Perplexity Context?

SelfHosting Updates - Oct 2025Interesting APIs 101