blog post 'Moxxy becomes expressive'

blog.html

@@ -52,6 +52,23 @@
                 <div class="row" style="gap: 2em">
                     <!-- blog -->
                     <div class="column" style="--custom_width: 33%; gap: 1em">
+    <a href="blog/moxxy_becomes_expressive.html" class="card" style="text-decoration: none;">
+        <img src="blog/media/2026/moxxy_ui.png
+" alt="Moxxy becomes expressive
+" title="Moxxy becomes expressive
+" class="card_image"/>
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <h3 class="card_title">Moxxy becomes expressive
+</h3>
+                <p class="card_text">
+                    A lot has happened since I last worked on Moxxy, the most important for us today being the release of Material 3 Expressive. I personally love the direction Google is taking by making the UI fun for users (and designers!) while still focusing on and improving ease of use and readability.
+
+                </p>
+            </div>
+        </div>
+    </a>
+</div><div class="column" style="--custom_width: 33%; gap: 1em">
     <a href="blog/hshwd_release.html" class="card" style="text-decoration: none;">
         <img src="projects/hshwd/thumb.png
 " alt="Release of hshwd
@@ -81,23 +98,6 @@
                 <p class="card_text">
                     TL;DR: I made a card game, and now I'm releasing all the necessary files so you can print it! You can use them however you like, as long as it's for personal use only. No commercial or AI-related use.
 
-                </p>
-            </div>
-        </div>
-    </a>
-</div><div class="column" style="--custom_width: 33%; gap: 1em">
-    <a href="blog/a_new_dawn.html" class="card" style="text-decoration: none;">
-        <img src="blog/media/2025/website_update.png
-" alt="A new dawn
-" title="A new dawn
-" class="card_image"/>
-        <div class="box">
-            <div class="column" style="width: 100%;">
-                <h3 class="card_title">A new dawn
-</h3>
-                <p class="card_text">
-                    If you’ve been following this blog since its beginnings in 2024, back when the URL was still ailyaut.robotfumeur.fr, then you’ve probably noticed that it hasn’t been updated much in the last year.
-
                 </p>
             </div>
         </div>
@@ -110,7 +110,8 @@
         <div class="box">
             <div class="column" style="width: 100%;">
                 <h2 id="all">All posts</h2>
-                <hr><h3>2026</h3><p class="light">05/02&emsp;<a href="blog/hshwd_release.html">Release of hshwd
+                <hr><h3>2026</h3><p class="light">21/02&emsp;<a href="blog/moxxy_becomes_expressive.html">Moxxy becomes expressive
+</a></p><p class="light">05/02&emsp;<a href="blog/hshwd_release.html">Release of hshwd
 </a></p><hr><h3>2025</h3><p class="light">23/11&emsp;<a href="blog/gang_release.html">Release of Gang
 </a></p><p class="light">01/06&emsp;<a href="blog/a_new_dawn.html">A new dawn
 </a></p><hr><h3>2024</h3><p class="light">09/06&emsp;<a href="blog/202405_moxxy_progress_report.html">Moxxy UI: May 2024 progress report

blog/md/20260221+moxxy_becomes_expressive.md

@@ -0,0 +1,52 @@
+title = Moxxy becomes expressive
+timestamp = 1771684200
+preview = A lot has happened since I last worked on Moxxy, the most important for us today being the release of Material 3 Expressive. I personally love the direction Google is taking by making the UI fun for users (and designers!) while still focusing on and improving ease of use and readability.
+thumb = blog/media/2026/moxxy_ui.png
++++
+
+A lot has happened since I last worked on Moxxy, the most important for us today being the [release of Material 3 Expressive](https://design.google/library/expressive-material-design-google-research). I personally love the direction Google is taking by making the UI fun for users (and designers!) while still focusing on and improving ease of use and readability.
+
+The reason I mention this is because I think Material 3 Expressive is a perfect fit for Moxxy. PapaTutuWawa told me he wanted to make Moxxy more unique, and you will see through this blog post that the new features that Material 3 Expressive offers enable us to do just that.
+
+## An artist needs tools
+
+One of the things I like most about Material 3 Expressive are the vibrant color schemes. Lucky for us, in 2025 the planets aligned and Penpot released a new feature called [design tokens](https://penpot.app/collaboration/design-tokens), which is particularly useful for handling color schemes.
+
+At first, I still had to manually enter each color token in Penpot based on the palette generated by [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/).  But soon enough, I noticed that Material Theme Builder could export a JSON of its tokens, and that Penpot allowed me to import a JSON of my tokens. Unfortunately, they were not formatted the same way and were incompatible.
+
+So [I made a script](https://codeberg.org/ailyaut/penpot_material_theme_converter) to convert the Material Theme Builder file into a format that Penpot could import, and voilà! I could finally try out any color scheme in a matter of seconds.
+
+## Onboarding
+
+Since Moxxy is still experimental, I decided that creating a slideshow explaining what XMPP is and how it works wasn't a top priority. Instead, I chose to focus on users who know what XMPP is but don't necessarily have experience with it.
+
+With this in mind, the "Create account" button provides users with a list of reputable XMPP servers with open registration (from [XMPP Providers](https://providers.xmpp.net/)). Although this feature is uncommon among XMPP clients, I believe that having this list in-app strikes a good balance between user freedom and ease of use for beginners. 
+
+The more technical information about the recommended servers is hidden behind an "info" button (that links either to the server's main page or to the XMPP Provider's detailed page). This makes it less confusing for users who only want a cool-looking address. Of course, users can also choose a server that is not on the list.
+
+## Home screen
+
+I had already done a home screen for Moxxy some time ago, but the transition to Material 3 Expressive gave me an excuse to give it a fresh coat of paint... and features!
+
+Everything should be pretty straightforward looking at the picture, but I'd like to highlight a few features that make this UI special:
+
+1. In the conversation list, different shapes and colors are used to differentiate between users and groups (the colors won't be visible once profile pictures are set, though). This improves readability, yet I haven't seen many messaging apps do this (the only example I have is WhatsApp on iOS — I don't know why they didn't implement it on Android as well).
+2. In the top-bar menu, you can see a mysterious "Add friend contactless" option. This is a feature that PapaTutuWawa imagined to make Moxxy more unique. It lets you add a new friend by touching phones while NFC is on, which could be a fun ritual at conventions!
+3. Multiple account support is uncommon among mainstream messaging apps but very common among XMPP clients. Here it's easy to access, with only two clicks to switch accounts.
+
+The last feature I want to show you is a perfect example of how Material 3 Expressive enables us to make Moxxy more fun and personal: [shapes](https://m3.material.io/styles/shape/overview-principles#fd6fd8eb-7440-4bf9-bbbd-c951c774bfff)!
+
+Allowing users to choose their own shape is both a cool customization option and an effective way to distinguish discussions. Also, it looks great.
+
+Of course, "user shapes" are not currently in the [XMPP specification](https://xmpp.org/extensions/), but they might just be in the future if there is enough interest! Even if they aren't, the feature can still exist locally by letting users set different shapes for different contacts.
+
+## Parting words
+
+Before I let you go, I'd like to mention that Google has announced it will lock down Android, which would probably mean the end of Moxxy and most open-source apps. If you're interested in learning more or helping out, I encourage you to visit the [Keep Android Open](https://keepandroidopen.org/) website.
+
+That's all for today!
+As always, you can find the Penpot file for this design in the [moxxy/design repository](https://codeberg.org/ailyaut/design/src/branch/master/ui), where it is available under the CC-BY-SA license.
+
+If you have any comments or suggestions, please post them under this Mastodon post or send them to me via email or XMPP!
+
+:^)

blog/moxxy_becomes_expressive.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Moxxy becomes expressive
+ – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="../media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="../style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta property="og:title" content="Moxxy becomes expressive
+ – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/blog/media/2026/moxxy_ui.png
+" />
+    <meta property="og:description" content="A lot has happened since I last worked on Moxxy, the most important for us today being the release of Material 3 Expressive. I personally love the direction Google is taking by making the UI fun for users (and designers!) while still focusing on and improving ease of use and readability.
+" />
+    <meta property="og:locale" content="en_US" />
+</head>
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="../index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="../blog.html" class="nav_button_active">Blog</a>
+                <a href="../gallery.html" class="nav_button">Gallery</a>
+                <a href="../projects.html" class="nav_button">Projects</a>
+                <a href="../about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+    <main>
+        <div class="box">
+            <div class="column" style="--custom_width: 60%;">
+                <h1>Moxxy becomes expressive
+</h1><p class="light">21/02/2026 · 4 min</p><div class="spacer" style="--size: 1em"></div><p>A lot has happened since I last worked on Moxxy, the most important for us today being the <a target="_blank" href="https://design.google/library/expressive-material-design-google-research">release of Material 3 Expressive</a>. I personally love the direction Google is taking by making the UI fun for users (and designers!) while still focusing on and improving ease of use and readability.</p>
+<p>The reason I mention this is because I think Material 3 Expressive is a perfect fit for Moxxy. PapaTutuWawa told me he wanted to make Moxxy more unique, and you will see through this blog post that the new features that Material 3 Expressive offers enable us to do just that.</p>
+<h2>An artist needs tools</h2>
+<p>One of the things I like most about Material 3 Expressive are the vibrant color schemes. Lucky for us, in 2025 the planets aligned and Penpot released a new feature called <a target="_blank" href="https://penpot.app/collaboration/design-tokens">design tokens</a>, which is particularly useful for handling color schemes.</p>
+<p>At first, I still had to manually enter each color token in Penpot based on the palette generated by <a target="_blank" href="https://material-foundation.github.io/material-theme-builder/">Material Theme Builder</a>.  But soon enough, I noticed that Material Theme Builder could export a JSON of its tokens, and that Penpot allowed me to import a JSON of my tokens. Unfortunately, they were not formatted the same way and were incompatible.</p>
+<p>So <a target="_blank" href="https://codeberg.org/ailyaut/penpot_material_theme_converter">I made a script</a> to convert the Material Theme Builder file into a format that Penpot could import, and voilà! I could finally try out any color scheme in a matter of seconds.</p>
+<h2>Onboarding</h2>
+<img style="margin-bottom: 1em;" src="media/2026/moxxy_onboarding_light.png" alt="Moxxy onboarding (light theme)" title="Moxxy onboarding (light theme)" />
+<img style="margin-bottom: 1em;" src="media/2026/moxxy_onboarding_dark.png" alt="Moxxy onboarding (dark theme)" title="Moxxy onboarding (dark theme)" />
+<p>Since Moxxy is still experimental, I decided that creating a slideshow explaining what XMPP is and how it works wasn't a top priority. Instead, I chose to focus on users who know what XMPP is but don't necessarily have experience with it.</p>
+<p>With this in mind, the "Create account" button provides users with a list of reputable XMPP servers with open registration (from <a target="_blank" href="https://providers.xmpp.net/">XMPP Providers</a>). Although this feature is uncommon among XMPP clients, I believe that having this list in-app strikes a good balance between user freedom and ease of use for beginners. </p>
+<p>The more technical information about the recommended servers is hidden behind an "info" button (that links either to the server's main page or to the XMPP Provider's detailed page). This makes it less confusing for users who only want a cool-looking address. Of course, users can also choose a server that is not on the list.</p>
+<h2>Home screen</h2>
+<p>I had already done a home screen for Moxxy some time ago, but the transition to Material 3 Expressive gave me an excuse to give it a fresh coat of paint... and features!</p>
+<img style="margin-bottom: 1em;" src="media/2026/moxxy_home_light.png" alt="Moxxy home (light theme)" title="Moxxy home (light theme)" />
+<img style="margin-bottom: 1em;" src="media/2026/moxxy_home_dark.png" alt="Moxxy home (dark theme)" title="Moxxy home (dark theme)" />
+<p>Everything should be pretty straightforward looking at the picture, but I'd like to highlight a few features that make this UI special:</p>
+<ol>
+<li>In the conversation list, different shapes and colors are used to differentiate between users and groups (the colors won't be visible once profile pictures are set, though). This improves readability, yet I haven't seen many messaging apps do this (the only example I have is WhatsApp on iOS — I don't know why they didn't implement it on Android as well).</li>
+<li>In the top-bar menu, you can see a mysterious "Add friend contactless" option. This is a feature that PapaTutuWawa imagined to make Moxxy more unique. It lets you add a new friend by touching phones while NFC is on, which could be a fun ritual at conventions!</li>
+<li>Multiple account support is uncommon among mainstream messaging apps but very common among XMPP clients. Here it's easy to access, with only two clicks to switch accounts.</li>
+</ol>
+<p>The last feature I want to show you is a perfect example of how Material 3 Expressive enables us to make Moxxy more fun and personal: <a target="_blank" href="https://m3.material.io/styles/shape/overview-principles#fd6fd8eb-7440-4bf9-bbbd-c951c774bfff">shapes</a>!</p>
+<img style="margin-bottom: 1em; max-width: 480px;" src="media/2026/home_expressive_shapes.png" alt="Home screen with expressive shapes" title="Home screen with expressive shapes" />
+<p>Allowing users to choose their own shape is both a cool customization option and an effective way to distinguish discussions. Also, it looks great.</p>
+<p>Of course, "user shapes" are not currently in the <a target="_blank" href="https://xmpp.org/extensions/">XMPP specification</a>, but they might just be in the future if there is enough interest! Even if they aren't, the feature can still exist locally by letting users set different shapes for different contacts.</p>
+<h2>Parting words</h2>
+<p>Before I let you go, I'd like to mention that Google has announced it will lock down Android, which would probably mean the end of Moxxy and most open-source apps. If you're interested in learning more or helping out, I encourage you to visit the <a target="_blank" href="https://keepandroidopen.org/">Keep Android Open</a> website.</p>
+<p>That's all for today!
+As always, you can find the Penpot file for this design in the <a target="_blank" href="https://codeberg.org/ailyaut/design/src/branch/master/ui">moxxy/design repository</a>, where it is available under the CC-BY-SA license.</p>
+<p>If you have any comments or suggestions, please post them under this Mastodon post or send them to me via email or XMPP!</p>
+<p>:^)</p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="../media/icons/arrow_upward.png"/></a>
+    </main>
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2026 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://digitalbeacon.co/report/ailyaut-com" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.01g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="../rss.xml"><img src="../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>

index.html

@@ -98,6 +98,23 @@
                 <div class="row" style="gap: 2em">
                     <!-- blog -->
                     <div class="column" style="--custom_width: 33%; gap: 1em">
+    <a href="blog/moxxy_becomes_expressive.html" class="card" style="text-decoration: none;">
+        <img src="blog/media/2026/moxxy_ui.png
+" alt="Moxxy becomes expressive
+" title="Moxxy becomes expressive
+" class="card_image"/>
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <h3 class="card_title">Moxxy becomes expressive
+</h3>
+                <p class="card_text">
+                    A lot has happened since I last worked on Moxxy, the most important for us today being the release of Material 3 Expressive. I personally love the direction Google is taking by making the UI fun for users (and designers!) while still focusing on and improving ease of use and readability.
+
+                </p>
+            </div>
+        </div>
+    </a>
+</div><div class="column" style="--custom_width: 33%; gap: 1em">
     <a href="blog/hshwd_release.html" class="card" style="text-decoration: none;">
         <img src="projects/hshwd/thumb.png
 " alt="Release of hshwd
@@ -127,23 +144,6 @@
                 <p class="card_text">
                     TL;DR: I made a card game, and now I'm releasing all the necessary files so you can print it! You can use them however you like, as long as it's for personal use only. No commercial or AI-related use.
 
-                </p>
-            </div>
-        </div>
-    </a>
-</div><div class="column" style="--custom_width: 33%; gap: 1em">
-    <a href="blog/a_new_dawn.html" class="card" style="text-decoration: none;">
-        <img src="blog/media/2025/website_update.png
-" alt="A new dawn
-" title="A new dawn
-" class="card_image"/>
-        <div class="box">
-            <div class="column" style="width: 100%;">
-                <h3 class="card_title">A new dawn
-</h3>
-                <p class="card_text">
-                    If you’ve been following this blog since its beginnings in 2024, back when the URL was still ailyaut.robotfumeur.fr, then you’ve probably noticed that it hasn’t been updated much in the last year.
-
                 </p>
             </div>
         </div>

rss.xml

@@ -11,6 +11,20 @@
 	</image>
 	<atom:link href="https://ailyaut.com/rss.xml" rel="self" type="application/rss+xml" />
 
+	<item>
+		<title>Moxxy becomes expressive
+</title>
+		<link>https://ailyaut.com/blog/moxxy_becomes_expressive.html</link>
+		<description>A lot has happened since I last worked on Moxxy, the most important for us today being the release of Material 3 Expressive. I personally love the direction Google is taking by making the UI fun for users (and designers!) while still focusing on and improving ease of use and readability.
+</description>
+		<category>posts</category>
+		
+		<guid>https://ailyaut.com/blog/moxxy_becomes_expressive.html</guid>
+		<dc:creator>Ailyaut</dc:creator>
+		<pubDate>Sat, 21 Feb 2026 15:30:00 +0100</pubDate>
+		<image>https://ailyaut.com/blog/media/2026/moxxy_ui.png
+</image>
+	</item>
 	<item>
 		<title>Release of hshwd
 </title>