Everything is Code
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 Case | Tool | Key Strengths | Notes |
|---|---|---|---|
| Presentations | Reveal.js | Flexible, established, supports Markdown | Requires HTML for layouts |
| Slidev | Markdown-based, interactive, fast HMR | Developer and Vue friendly | |
| Reports | Pandoc | Format conversion, markdown + LaTeX support | Setup needed |
| Typst | Clean, easy modern syntax, fast compile | Newer, evolving | |
| LaTeX | Powerful, rich ecosystem for academia | Steep 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
- 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 :)

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

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 slidevFeatures I enjoy: Themes can provide styles, layouts, components, or even configurations for tools.
- Switching between themes by just one edit in your frontmatter
- 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" />Bring up to date data from API calls. Like
https://open-meteo.comMake it look cool with mermaidJS / Katex / ChartJS VUE components
This thing can even do animations based on https://motion.vueuse.org/
Katex, for those PHD users
MermaidJS
Export to
pdf/pptxorpng. 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

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

- Live stuff:
http://localhost:3030/presenterand live annonations
Similarlo to https://github.com/DmytroVasin/DrawPen or with excalidraw

Diagrams are also code!
- https://diagrams.mingrammer.com/docs/getting-started/examples
- MermaidJS you can also use it inside HUGO/Astro/MermaidJS…
Had a look to couple of tools for diagrams
Make beautiful isometric infrastructure diagrams
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
sudo snap install foliateYou 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:
- https://parallel.ai/pricing - AIs are the web’s new user - The highest accuracy web search for your AI
- Perplexity…
- …
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

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…
The last time I called a stock EASY MONEY was $GOOGL at 173.04…
— RonnieV (@TheRonnieVShow) October 20, 2025
Now I present to you EASY MONEY Stock #2….$AMZN - One Sheet. All You Need. pic.twitter.com/mIFBtMpHCp
Infographics as a code
This can also be done with Python, but it will look more like a report or with matplotlib.
Animating yfinanceResume as a Code
Just in case that you need some help with: https://fmhy.net/misc#resume-portfolio
More options for creating your CV?
MIT | 📄 Easily create your resume with Markdown on VSCode / Typora / Obsidian
Apache v2 | Improve your resumes with Resume Matcher. Get insights, keyword suggestions and tune your resumes to job descriptions.
- 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
MIT | Version-control CVs/resumes as source code
- 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.
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?
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
- 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
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:

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.mp4You 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.mp4Animations 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.mp4Do animation logic once, ship it everywhere:
What’s your long-term investment strategy?
— Libre Portfolio (@LibrePortfolio) July 1, 2025
Here’s how regular contributions and compounding work together.#WealthBuilding #MoneyMath #CompoundGrowth pic.twitter.com/felhdHtMR5
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
#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 overThen 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.mp4Mientras duran las fiebres del oro te vas a encontrar a mucha gente que vende palas para que en teoria tu saques el oro.
— Libre Portfolio (@LibrePortfolio) October 20, 2025
Algunos los llaman vende cursos, otros vende humos.
He creado una herramienta para que cualquier persona pueda hacer data-checks (sin registros ni emails) 👇 pic.twitter.com/ZIT9PeSz0J
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-cacheMake it visible on social media.
Because lets be honest: website traffik is broken with AI.
What’s your long-term investment strategy?
— Libre Portfolio (@LibrePortfolio) July 1, 2025
Here’s how regular contributions and compounding work together.#WealthBuilding #MoneyMath #CompoundGrowth pic.twitter.com/felhdHtMR5
Then, Last night the yt algorithm hit me with this:
And this
Double Pendulum RepoAnd 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-codeSo…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/Aspect | Motion Canvas | Remotion | Manim |
|---|---|---|---|
| Programming Language | TypeScript (Web, JS) | React (JavaScript) | Python |
| Main Use Case | Vector animations & presentations | Programmatic video creation | Math & educational animations |
| Preview/Interactivity | Real-time visual preview | React-driven dynamic rendering | No live preview, manual rendering |
| Complexity & Control | Moderate, web tech based | High for UI/UX videos | High for math/algorithm detail |
| Target Users | Web developers, educators | React developers, marketers | Educators, researchers, math pros |
| Learning Curve | Moderate | Moderate | Steep (programming + math) |
| Community & Docs | Growing, good docs | Strong community & documentation | Mature 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.MP4Make 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
If you are looking for a tool to get general knowledge about a website, you can use the web-check project
- https://github.com/Lissy93/web-check
- Use it at https://web-check.xyz/
- It provides also links to other very interesting tools to explore a domain/website
🕵️♂️ 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
- https://markdowndb.com/ - A rich API to your markdown files in seconds.
Turn markdown files into structured, queryable data with JS. Build markdown-powered docs, blogs, and sites quickly and reliably.
Writing Posts with Codex
As seen during summer on this post.
How about using Codex CLI to write SSG posts?
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!- Access the container:
docker exec -it codex-container bashJust 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
https://jalcocert.github.io/JAlcocerT/ai-tools-for-cli/#goose https://jalcocert.github.io/JAlcocerT/ai-tools-for-cli/#gemini-cli-x-git-mcp

- https://console.anthropic.com/workbench/
- https://console.groq.com/keys
- https://platform.openai.com/api-keys
Writing Technical Posts with Perplexity and IDEs
Or just Cursor/Windsurf agents + Perplexity Context?