Accessing CSS Classes in FastHTML
How to retrieve the CSS classes for a FastHTML FastTag instance.
fasthtml
38 posts
An Informationally-Dense Index Page
Now that I have a lot of notebooks, it would be nice to have a more compact index page. I want to see more of my posts from mobile all at once. I'm going to prototype it in Tailwind.
This Site Is Now Powered by This Notebook, Part 6
I add a mini-nav to the vanilla non-MonsterUI version of notebook detail pages (used for in-depth CSS experiments). I also now export main.py from within this notebook.
Creating an Accessible Inline Nav FastTag
I make a lightweight vanilla InlineNav FT with FastHTML, using the HTML nav element and as minimal styling as I can get away with.
FastHTML and MonsterUI Time Converter
A FastHTML app that converts times to different timezones, and to Discord timestamps.
Performance Optimization: Moving HTML Class Injection from lxml to Mistletoe
This is a proof-of-concept of moving MonsterUI's HTML class injection from lxml post-processing to a custom Mistletoe renderer. Looks like we can get 3x faster Markdown rendering using this simple MonsterHTMLRenderer vs. parsing the rendered HTML to inject the classes.
This Site Is Now Powered by This Notebook, Part 5
Just little tweaks to make sure the site still works with all the new MonsterUI stuff.
This Site Is Now Powered by This Notebook, Part 4
Here I update audrey.feldroy.com with some of the latest MonsterUI text presets.
This Site Is Now Powered by This Notebook, Part 3
Here I improve audrey.feldroy.com in small, subtle ways.
This Site Is Now Powered by This Notebook, Part 2
Here I clean up the code, back-integrate the manual fixes I've since made, and reduce the steps it takes to export.
Troubleshooting MonsterUI on This Site
My first MonsterUI notebook wasn't rendering correctly. I started to debug it in this notebook, but ended up just using this as a test notebook for the next one.
This Site Is Now Powered by This Notebook
Here in this Jupyter notebook I rewrite audrey.feldroy.com and use nb_export to export it as my new main.py for arg-blog-fasthtml.
MonsterUI Buttons and Links
Iterating through the ButtonT enum to show all MonsterUI button types visually.
Customizing FastHTML Headers From Notebook Contents
Can we customize a FastHTML app to set different headers when rendering notebooks with nb2fasthtml, based on what the notebook actually needs for its headers?
SVG Animations in FastHTML
Exploring how to make basic SVG animations work with FastHTML.
Dark and Light Mode in FastHTML
How to make a website check the user's preferred mode and set the background appropriately.
Alarm Sounds App
Demo of adding sounds to a FastHTML app with Tone.js. Sounds make web apps come alive and feel interactive.
Alarm Clock Sounds
FastHTML MonsterUI example app that uses Tone.js to make different alarm clock sounds.
A Better Notebook Index Page
I've made good progress on creating a notebook every day. Now I have so many notebooks that my index page needs an overhaul, including:
Understanding FastHTML Routes, Requests, and Redirects
In this tutorial we'll look at the simplest routes and route handlers you can create with FastHTML. We'll define the handlers as little functions, and then call them as we would any other Python function. After that, we'll make simple GET requests to a simple index route/handler, a parameterized one, and a parameterized one with a redirect.
HTML Title Tag in FastHTML
I get so lazy about title tags. The point of today's notebook is to make me less lazy, so I actually fix the title of this site. Oh, and to explore Title and Titled in FastHTML.
Verifying a Bluesky Domain Handle on a FastHTML Site
I just changed my Bluesky to @audrey.feldroy.com. To verify my domain ownership, I added this route handler to my FastHTML website:
Understanding FastHTML Headers
FastHTML provides default headers for every page, which are also fully customizable. This notebook explores how this works.
FastHTML Piano, Part 3
Adding a settings bar with a volume slider and waveform selector to the piano.
FastHTML Piano, Part 2
In Part 1 we defined piano keys. Now let's improve them with hover effects, mouse events, and JavaScript audio.
FastHTML Piano, Part 1
My adaptation of https://developer.mozilla.org/en-US/play to FastHTML, with improvements.
Note Box FastTag
I needed a quick note box for the index page of this site, without affecting the CSS of my notebooks that explore weird CSS stuff deeply.
Images in Jupyter Notebooks, in Every Way
This notebook uses images in every possible way.
Minimal Typography for FastHTML Apps
When using pico=False and no CSS framework, a FastHTML page doesn't look great. Can we use minimal typography to make it look decent, without dependencies?
Transforming Notebook Names to Cards
I have Jupyter notebooks in nbs/. I want to turn them into cards from the filenames, without having to read the file contents.
Showing Components in Notebooks
## Understand the Problem
execnb's read_nb and nb2fasthtml's render_nb
Exploring how execnb reads notebooks and nb2fasthtml renders them, to understand the tools I'm building on.
Using Claudette with FastHTML
I'm here to learn the new web framework FastHTML by Jeremy Howard, and I'm using Claudette to help me explore it.
FastHTML by Example
Studying https://docs.fastht.ml/tutorials/by_example.html more
Auth in FastHTML
My early attempts to figure out auth in FastHTML. Things have likely changed a lot since.
Understanding FastHTML xtend
My early exploration of the xtend notebook in FastHTML.
Printing FastHTML Components
Reading through fastcore's xml.py source to figure out how FastHTML components print and render, and what to_xml and highlight do.
SemanticUI FastHTML Cards
Caution: I’ve learned better patterns since I wrote this. Leaving this here for posterity.