Slide image for hypermedia savings

awhillas · Apr 5, 2024 · 51dcd34 · 51dcd34
1 parent 0ace3a5
commit 51dcd34
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 5 deletions.
diff --git a/content/headspace.md b/content/headspace.md
@@ -6,6 +6,28 @@ Modified: 2024-04-02
 Category: Software Engineering
 ---
 
+# 4th April, 2024 - The revolution is televised
+
+Found this great talk that breaks down the kind of API that I want to build which is a [Hypermedia Maturity Model](https://8thlight.com/insights/the-hypermedia-maturity-model) level 3 me thinks
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/zM5t6DaYrqM?si=dkAb8PhJP1zngC5B" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+Which I found in the videos section of the [FastAPI HyperModel resources page](https://jtc42.github.io/fastapi-hypermodel/resources/).
+
+## htmlx?
+
+> htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext
+
+I got a little side tracked with [htmlx](https://htmx.org/) in combo with this type of hypermedia in which the server is rendering HTML snippets and sending them after in this video. This means ditching React and having simple HTML+HTMLx as the frontend. What gave me pause to seriously consider this was the results of doing this on a large system or at least their reported stats:
+
+![Refactoring from SAP to hypermedia system]({static}/images/savings_with_hypermedia.png)
+
+Performance over thousands of elements is a factor (2nd last point above) because its just rendered HTML at the end of the day, which React struggles with. Performance being one of the biggest complaints of Miro. It also seems to reduce the frontend by about 90%, which if your a lone developer is huge!
+
+Checkout:
+- [PyHAT: Awesome Python htmx](https://github.com/PyHAT-stack/awesome-python-htmx) - PyHAT is more than just a snake with a hat 🐍🤠. It stands for Python htmx ASGI Tailwind—a web stack that allows you to build powerful web applications using nothing more than... drumroll... Python, htmx, and Tailwind.
+- [Hypermedia Systems](https://hypermedia.systems/) book by the htmlx guys with an example using Flask and htmlx and Jinja2 for rendering HTML fragments.
+
 # 2nd April, 2024 - Hypermodel
 
 Going to go with a Level 2 hypermodel using `[fastapi-hypermodel](https://jtc42.github.io/fastapi-hypermodel/)` which is...

diff --git a/content/images/savings_with_hypermedia.png b/content/images/savings_with_hypermedia.png
diff --git a/docs/feeds/atom.xml b/docs/feeds/atom.xml
@@ -1,5 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom"><title>Alexander Whillas</title><link href="https://alexander.whillas.com/" rel="alternate"></link><link href="https://alexander.whillas.com/feeds/atom.xml" rel="self"></link><id>https://alexander.whillas.com/</id><updated>2024-04-01T00:00:00+13:00</updated><entry><title>Project: Headspace</title><link href="https://alexander.whillas.com/project-headspace.html" rel="alternate"></link><published>2024-03-31T00:00:00+13:00</published><updated>2024-04-01T00:00:00+13:00</updated><author><name>Alexander Whillas</name></author><id>tag:alexander.whillas.com,2024-03-31:/project-headspace.html</id><summary type="html">&lt;p&gt;A new type of interface to data and media which takes ideas from Pure-data/Max-MSP and online whiteboard spaces like Miro while at the same time leveraging linked-data&lt;/p&gt;</summary><content type="html">&lt;h1&gt;2nd April, 2024 - Hypermodel&lt;/h1&gt;
+<feed xmlns="http://www.w3.org/2005/Atom"><title>Alexander Whillas</title><link href="https://alexander.whillas.com/" rel="alternate"></link><link href="https://alexander.whillas.com/feeds/atom.xml" rel="self"></link><id>https://alexander.whillas.com/</id><updated>2024-04-02T00:00:00+13:00</updated><entry><title>Project: Headspace</title><link href="https://alexander.whillas.com/project-headspace.html" rel="alternate"></link><published>2024-03-31T00:00:00+13:00</published><updated>2024-04-02T00:00:00+13:00</updated><author><name>Alexander Whillas</name></author><id>tag:alexander.whillas.com,2024-03-31:/project-headspace.html</id><summary type="html">&lt;p&gt;A new type of interface to data and media which takes ideas from Pure-data/Max-MSP and online whiteboard spaces like Miro while at the same time leveraging linked-data&lt;/p&gt;</summary><content type="html">&lt;h1&gt;4th April, 2024 - The revolution is televised&lt;/h1&gt;
+&lt;p&gt;Found this great talk that breaks down the kind of API that I want to build which is a &lt;a href="https://8thlight.com/insights/the-hypermedia-maturity-model"&gt;Hypermedia Maturity Model&lt;/a&gt; level 3 me thinks&lt;/p&gt;
+&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/zM5t6DaYrqM?si=dkAb8PhJP1zngC5B" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen&gt;&lt;/iframe&gt;
+
+&lt;p&gt;Which I found in the videos section of the &lt;a href="https://jtc42.github.io/fastapi-hypermodel/resources/"&gt;FastAPI HyperModel resources page&lt;/a&gt;.&lt;/p&gt;
+&lt;h2&gt;htmlx?&lt;/h2&gt;
+&lt;blockquote&gt;
+&lt;p&gt;htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;I got a little side tracked with &lt;a href="https://htmx.org/"&gt;htmlx&lt;/a&gt; in combo with this type of hypermedia in which the server is rendering HTML snippets and sending them after in this video. This means ditching React and having simple HTML+HTMLx as the frontend. What gave me pause to seriously consider this was the results of doing this on a large system or at least their reported stats:&lt;/p&gt;
+&lt;p&gt;&lt;img alt="Refactoring from SAP to hypermedia system" src="https://alexander.whillas.com/images/savings_with_hypermedia.png" /&gt;&lt;/p&gt;
+&lt;p&gt;Performance over thousands of elements is a factor (2nd last point above) because its just rendered HTML at the end of the day, which React struggles with. Performance being one of the biggest complaints of Miro. It also seems to reduce the frontend by about 90%, which if your a lone developer is huge!&lt;/p&gt;
+&lt;p&gt;Checkout:
+- &lt;a href="https://github.com/PyHAT-stack/awesome-python-htmx"&gt;PyHAT: Awesome Python htmx&lt;/a&gt; - PyHAT is more than just a snake with a hat 🐍🤠. It stands for Python htmx ASGI Tailwind—a web stack that allows you to build powerful web applications using nothing more than&amp;hellip; drumroll&amp;hellip; Python, htmx, and Tailwind.
+- &lt;a href="https://hypermedia.systems/"&gt;Hypermedia Systems&lt;/a&gt; book by the htmlx guys with an example using Flask and htmlx and Jinja2 for rendering HTML fragments.&lt;/p&gt;
+&lt;h1&gt;2nd April, 2024 - Hypermodel&lt;/h1&gt;
 &lt;p&gt;Going to go with a Level 2 hypermodel using &lt;code&gt;[fastapi-hypermodel](https://jtc42.github.io/fastapi-hypermodel/)&lt;/code&gt; which is&amp;hellip;&lt;/p&gt;
 &lt;blockquote&gt;
 &lt;p&gt;FastAPI-HyperModel is a FastAPI + Pydantic extension for simplifying hypermedia-driven API development.

diff --git a/docs/feeds/rss.xml b/docs/feeds/rss.xml
@@ -1,2 +1,2 @@
 <?xml version="1.0" encoding="utf-8"?>
-<rss version="2.0"><channel><title>Alexander Whillas</title><link>https://alexander.whillas.com/</link><description></description><lastBuildDate>Mon, 01 Apr 2024 00:00:00 +1300</lastBuildDate><item><title>Project: Headspace</title><link>https://alexander.whillas.com/project-headspace.html</link><description>&lt;p&gt;A new type of interface to data and media which takes ideas from Pure-data/Max-MSP and online whiteboard spaces like Miro while at the same time leveraging linked-data&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Sun, 31 Mar 2024 00:00:00 +1300</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2024-03-31:/project-headspace.html</guid><category>Software Engineering</category></item><item><title>Engineering First Business Model</title><link>https://alexander.whillas.com/the-low-hanging-fruit-business-model.html</link><description>&lt;p&gt;An alternative approach to tech business development in which all product decisions are made by the developers not Product Managers with the aim of keeping engineering effort minimal.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Mon, 02 Oct 2023 00:00:00 +1300</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-10-02:/the-low-hanging-fruit-business-model.html</guid><category>Business</category></item><item><title>Free Energy Principle</title><link>https://alexander.whillas.com/free-energy-principle.html</link><description>&lt;p&gt;My understanding of the Free Energy Principle and how it applies to (machine) learning agents.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Tue, 08 Aug 2023 00:00:00 +1200</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-08-08:/free-energy-principle.html</guid><category>Machine Learning</category></item><item><title>Reflections on Motivation</title><link>https://alexander.whillas.com/reflections-on-motivation.html</link><description>&lt;p&gt;Reflections on what makes motivation in us.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Tue, 04 Jul 2023 00:00:00 +1200</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-07-04:/reflections-on-motivation.html</guid><category>Life</category></item><item><title>Phonetica Game Dev Log</title><link>https://alexander.whillas.com/reading-video-game-dev-log.html</link><description>&lt;p&gt;A new game I&amp;rsquo;m working on to help kids learn to read by sounding out words.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Sun, 11 Jun 2023 00:00:00 +1200</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-06-11:/reading-video-game-dev-log.html</guid><category>Rust</category></item><item><title>Solid Pod Server</title><link>https://alexander.whillas.com/solid-pod-server.html</link><description>&lt;p&gt;Trying to get behind the linked data movement by following Tim Berners-Lee&amp;rsquo;s latest crazy vision of the future of the web.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Sun, 28 May 2023 00:00:00 +1200</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-05-28:/solid-pod-server.html</guid><category>Rust</category></item><item><title>Learning Rust</title><link>https://alexander.whillas.com/learning-rust.html</link><description>&lt;p&gt;Why I&amp;rsquo;m learning Rust and how I&amp;rsquo;m doing it.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Sat, 29 Apr 2023 00:00:00 +1200</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-04-29:/learning-rust.html</guid><category>Rust</category></item><item><title>Realtime Machine Learning</title><link>https://alexander.whillas.com/realtime-machine-learning.html</link><description>&lt;p&gt;Experiments in online/real-time Machine learning.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Sat, 29 Apr 2023 00:00:00 +1200</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-04-29:/realtime-machine-learning.html</guid><category>Machine Learning</category></item><item><title>A new Hope...?</title><link>https://alexander.whillas.com/a-new-hope.html</link><description>&lt;p&gt;A bit about the philosophy of this website.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Fri, 28 Apr 2023 00:00:00 +1200</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-04-28:/a-new-hope.html</guid><category>Life</category></item></channel></rss>
+<rss version="2.0"><channel><title>Alexander Whillas</title><link>https://alexander.whillas.com/</link><description></description><lastBuildDate>Tue, 02 Apr 2024 00:00:00 +1300</lastBuildDate><item><title>Project: Headspace</title><link>https://alexander.whillas.com/project-headspace.html</link><description>&lt;p&gt;A new type of interface to data and media which takes ideas from Pure-data/Max-MSP and online whiteboard spaces like Miro while at the same time leveraging linked-data&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Sun, 31 Mar 2024 00:00:00 +1300</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2024-03-31:/project-headspace.html</guid><category>Software Engineering</category></item><item><title>Engineering First Business Model</title><link>https://alexander.whillas.com/the-low-hanging-fruit-business-model.html</link><description>&lt;p&gt;An alternative approach to tech business development in which all product decisions are made by the developers not Product Managers with the aim of keeping engineering effort minimal.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Mon, 02 Oct 2023 00:00:00 +1300</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-10-02:/the-low-hanging-fruit-business-model.html</guid><category>Business</category></item><item><title>Free Energy Principle</title><link>https://alexander.whillas.com/free-energy-principle.html</link><description>&lt;p&gt;My understanding of the Free Energy Principle and how it applies to (machine) learning agents.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Tue, 08 Aug 2023 00:00:00 +1200</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-08-08:/free-energy-principle.html</guid><category>Machine Learning</category></item><item><title>Reflections on Motivation</title><link>https://alexander.whillas.com/reflections-on-motivation.html</link><description>&lt;p&gt;Reflections on what makes motivation in us.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Tue, 04 Jul 2023 00:00:00 +1200</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-07-04:/reflections-on-motivation.html</guid><category>Life</category></item><item><title>Phonetica Game Dev Log</title><link>https://alexander.whillas.com/reading-video-game-dev-log.html</link><description>&lt;p&gt;A new game I&amp;rsquo;m working on to help kids learn to read by sounding out words.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Sun, 11 Jun 2023 00:00:00 +1200</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-06-11:/reading-video-game-dev-log.html</guid><category>Rust</category></item><item><title>Solid Pod Server</title><link>https://alexander.whillas.com/solid-pod-server.html</link><description>&lt;p&gt;Trying to get behind the linked data movement by following Tim Berners-Lee&amp;rsquo;s latest crazy vision of the future of the web.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Sun, 28 May 2023 00:00:00 +1200</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-05-28:/solid-pod-server.html</guid><category>Rust</category></item><item><title>Learning Rust</title><link>https://alexander.whillas.com/learning-rust.html</link><description>&lt;p&gt;Why I&amp;rsquo;m learning Rust and how I&amp;rsquo;m doing it.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Sat, 29 Apr 2023 00:00:00 +1200</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-04-29:/learning-rust.html</guid><category>Rust</category></item><item><title>Realtime Machine Learning</title><link>https://alexander.whillas.com/realtime-machine-learning.html</link><description>&lt;p&gt;Experiments in online/real-time Machine learning.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Sat, 29 Apr 2023 00:00:00 +1200</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-04-29:/realtime-machine-learning.html</guid><category>Machine Learning</category></item><item><title>A new Hope...?</title><link>https://alexander.whillas.com/a-new-hope.html</link><description>&lt;p&gt;A bit about the philosophy of this website.&lt;/p&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Alexander Whillas</dc:creator><pubDate>Fri, 28 Apr 2023 00:00:00 +1200</pubDate><guid isPermaLink="false">tag:alexander.whillas.com,2023-04-28:/a-new-hope.html</guid><category>Life</category></item></channel></rss>