Site generated at Fri 6 Sep 2024 18:36:28 BST

Author: manojlds

blog/2024/09/06/thoughts-on-fasthtml/index.html

@@ -322,7 +322,9 @@
   <h1 itemprop="name headline">Thoughts on FastHTML</h1>
   <p class="post-meta"><time datetime="2024-09-06T12:45:00+01:00" itemprop="datePublished">Sep 6, 2024</time></p>
   <div class="post-content" itemprop="articleBody">
-    <p>I’ve been working on building a chat application that required complex visualizations and interactions. Initially, I decided to try out FastHTML for this project.</p>
+    <p><img src="https://stacktoheap.com/images/fasthtml.jpg" width="686px" height="386px" /></p>
+
+<p>I’ve been working on building a chat application that required complex visualizations and interactions. Initially, I decided to try out FastHTML for this project.</p>
 
 <p>FastHTML, combined with htmx, seemed like a promising stack, especially with its modern approach to handling dynamic web content. However, after spending considerable time with it, I found myself at a crossroads.</p>
 
@@ -342,6 +344,37 @@ <h2 id="the-downside-of-writing-views-in-python">The Downside of Writing Views i
 
 <p>Another factor that contributed to my decision was the way views are written in FastHTML—using Python. Initially, I found this approach intriguing; it’s not every day you get to write your front-end code in Python without any Javascript or Typescript. But as the project grew, it became tedious. The novelty wore off, and I realized that separating concerns with a JavaScript-based front-end made more sense for the complexity I was dealing with.</p>
 
+<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">Body</span><span class="p">(</span>
+        
+        <span class="n">Div</span><span class="p">(</span>
+            <span class="n">Div</span><span class="p">(</span>
+                <span class="n">H1</span><span class="p">(</span><span class="s">'Chat Bot'</span><span class="p">),</span>
+                <span class="n">Div</span><span class="p">(</span><span class="o">*</span><span class="p">[</span><span class="n">ChatMessage</span><span class="p">(</span><span class="n">msg</span><span class="p">)</span> <span class="k">for</span> <span class="n">msg</span> <span class="ow">in</span> <span class="n">messages</span><span class="p">],</span> <span class="nb">id</span><span class="o">=</span><span class="s">"chatlist"</span><span class="p">,</span> <span class="n">cls</span><span class="o">=</span><span class="s">"chat-box h-[85vh] overflow-y-auto"</span><span class="p">),</span>
+                <span class="n">Form</span><span class="p">(</span><span class="n">Group</span><span class="p">(</span><span class="n">ChatInput</span><span class="p">(),</span> <span class="n">Button</span><span class="p">(</span><span class="s">"Send"</span><span class="p">,</span> <span class="n">cls</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">)),</span>
+                    <span class="n">hx_post</span><span class="o">=</span><span class="s">"/"</span><span class="p">,</span> <span class="n">hx_target</span><span class="o">=</span><span class="s">"#chatlist"</span><span class="p">,</span> <span class="n">hx_swap</span><span class="o">=</span><span class="s">"beforeend"</span><span class="p">,</span>
+                    <span class="n">cls</span><span class="o">=</span><span class="s">""</span><span class="p">,</span>
+                <span class="p">),</span>
+                <span class="n">cls</span> <span class="o">=</span> <span class="s">"pt-4 pl-4"</span>
+            <span class="p">),</span>
+            
+            <span class="n">Div</span><span class="p">(</span>
+                <span class="n">Div</span><span class="p">(</span>
+                    <span class="n">A</span><span class="p">(</span><span class="s">"Agent DAG"</span><span class="p">,</span> <span class="n">role</span><span class="o">=</span><span class="s">"tab"</span><span class="p">,</span> <span class="n">cls</span><span class="o">=</span><span class="s">"tab tab-active"</span><span class="p">),</span>
+                    <span class="n">A</span><span class="p">(</span><span class="s">"Agent Conversaion"</span><span class="p">,</span> <span class="n">role</span><span class="o">=</span><span class="s">"tab"</span><span class="p">,</span> <span class="n">cls</span><span class="o">=</span><span class="s">"tab"</span><span class="p">),</span>
+                    <span class="n">A</span><span class="p">(</span><span class="s">"LLM Traces"</span><span class="p">,</span> <span class="n">role</span><span class="o">=</span><span class="s">"tab"</span><span class="p">,</span> <span class="n">cls</span><span class="o">=</span><span class="s">"tab"</span><span class="p">),</span>
+                    <span class="n">role</span><span class="o">=</span><span class="s">"tablist"</span><span class="p">,</span> <span class="n">cls</span><span class="o">=</span><span class="s">"tabs tabs-boxed"</span>
+                <span class="p">),</span>
+                <span class="n">Div</span><span class="p">(</span>
+                    <span class="n">Div</span><span class="p">(</span><span class="nb">id</span><span class="o">=</span><span class="s">"agentdag"</span><span class="p">),</span>
+                    <span class="n">cls</span> <span class="o">=</span> <span class="s">"p-4"</span>
+                <span class="p">),</span>
+                <span class="n">cls</span> <span class="o">=</span> <span class="s">"p-4"</span><span class="p">),</span>
+            <span class="n">cls</span> <span class="o">=</span> <span class="s">"grid grid-cols-2 divide-x divide-primary"</span>
+        <span class="p">),</span>
+        <span class="n">cls</span> <span class="o">=</span> <span class="s">""</span>
+    <span class="p">)</span>
+</code></pre></div></div>
+
 <h2 id="transitioning-to-svelte">Transitioning to Svelte</h2>
 
 <p>After wrestling with FastHTML for a while, I decided it was time to pivot. Svelte had been on my radar for quite some time, and the features provided by SvelteFlow (a framework visualizing flows with drag and drop nodes) were exactly what I needed for my project.</p>

feed.xml

@@ -6,13 +6,15 @@
 </description>
     <link>https://stacktoheap.com/</link>
     <atom:link href="https://stacktoheap.com/feed.xml" rel="self" type="application/rss+xml"/>
-    <pubDate>Fri, 06 Sep 2024 18:31:22 +0100</pubDate>
-    <lastBuildDate>Fri, 06 Sep 2024 18:31:22 +0100</lastBuildDate>
+    <pubDate>Fri, 06 Sep 2024 18:36:23 +0100</pubDate>
+    <lastBuildDate>Fri, 06 Sep 2024 18:36:23 +0100</lastBuildDate>
     <generator>Jekyll v3.9.5</generator>
 
       <item>
         <title>Thoughts on FastHTML</title>
-        <description>&lt;p&gt;I’ve been working on building a chat application that required complex visualizations and interactions. Initially, I decided to try out FastHTML for this project.&lt;/p&gt;
+        <description>&lt;p&gt;&lt;img src=&quot;https://stacktoheap.com/images/fasthtml.jpg&quot; width=&quot;686px&quot; height=&quot;386px&quot; /&gt;&lt;/p&gt;
+
+&lt;p&gt;I’ve been working on building a chat application that required complex visualizations and interactions. Initially, I decided to try out FastHTML for this project.&lt;/p&gt;
 
 &lt;p&gt;FastHTML, combined with htmx, seemed like a promising stack, especially with its modern approach to handling dynamic web content. However, after spending considerable time with it, I found myself at a crossroads.&lt;/p&gt;
 
@@ -32,6 +34,37 @@
 
 &lt;p&gt;Another factor that contributed to my decision was the way views are written in FastHTML—using Python. Initially, I found this approach intriguing; it’s not every day you get to write your front-end code in Python without any Javascript or Typescript. But as the project grew, it became tedious. The novelty wore off, and I realized that separating concerns with a JavaScript-based front-end made more sense for the complexity I was dealing with.&lt;/p&gt;
 
+&lt;div class=&quot;language-python highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;Body&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
+        
+        &lt;span class=&quot;n&quot;&gt;Div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
+            &lt;span class=&quot;n&quot;&gt;Div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
+                &lt;span class=&quot;n&quot;&gt;H1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'Chat Bot'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt;
+                &lt;span class=&quot;n&quot;&gt;Div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;ChatMessage&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;msg&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;msg&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;messages&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;chatlist&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;cls&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;chat-box h-[85vh] overflow-y-auto&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt;
+                &lt;span class=&quot;n&quot;&gt;Form&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Group&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;ChatInput&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(),&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Button&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;Send&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;cls&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;btn btn-primary&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)),&lt;/span&gt;
+                    &lt;span class=&quot;n&quot;&gt;hx_post&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;/&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;hx_target&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;#chatlist&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;hx_swap&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;beforeend&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
+                    &lt;span class=&quot;n&quot;&gt;cls&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
+                &lt;span class=&quot;p&quot;&gt;),&lt;/span&gt;
+                &lt;span class=&quot;n&quot;&gt;cls&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;pt-4 pl-4&quot;&lt;/span&gt;
+            &lt;span class=&quot;p&quot;&gt;),&lt;/span&gt;
+            
+            &lt;span class=&quot;n&quot;&gt;Div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
+                &lt;span class=&quot;n&quot;&gt;Div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
+                    &lt;span class=&quot;n&quot;&gt;A&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;Agent DAG&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;role&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;tab&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;cls&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;tab tab-active&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt;
+                    &lt;span class=&quot;n&quot;&gt;A&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;Agent Conversaion&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;role&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;tab&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;cls&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;tab&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt;
+                    &lt;span class=&quot;n&quot;&gt;A&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;LLM Traces&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;role&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;tab&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;cls&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;tab&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt;
+                    &lt;span class=&quot;n&quot;&gt;role&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;tablist&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;cls&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;tabs tabs-boxed&quot;&lt;/span&gt;
+                &lt;span class=&quot;p&quot;&gt;),&lt;/span&gt;
+                &lt;span class=&quot;n&quot;&gt;Div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
+                    &lt;span class=&quot;n&quot;&gt;Div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;agentdag&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt;
+                    &lt;span class=&quot;n&quot;&gt;cls&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;p-4&quot;&lt;/span&gt;
+                &lt;span class=&quot;p&quot;&gt;),&lt;/span&gt;
+                &lt;span class=&quot;n&quot;&gt;cls&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;p-4&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt;
+            &lt;span class=&quot;n&quot;&gt;cls&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;grid grid-cols-2 divide-x divide-primary&quot;&lt;/span&gt;
+        &lt;span class=&quot;p&quot;&gt;),&lt;/span&gt;
+        &lt;span class=&quot;n&quot;&gt;cls&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;&quot;&lt;/span&gt;
+    &lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
 &lt;h2 id=&quot;transitioning-to-svelte&quot;&gt;Transitioning to Svelte&lt;/h2&gt;
 
 &lt;p&gt;After wrestling with FastHTML for a while, I decided it was time to pivot. Svelte had been on my radar for quite some time, and the features provided by SvelteFlow (a framework visualizing flows with drag and drop nodes) were exactly what I needed for my project.&lt;/p&gt;