<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="../assets/xml/rss.xsl" media="all"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Blind Not Dumb (Posts about dynamic)</title><link>https://www.feoh.org/</link><description></description><atom:link href="https://www.feoh.org/categories/dynamic.xml" rel="self" type="application/rss+xml"></atom:link><language>en</language><copyright>Contents © 2026 &lt;a href="mailto:feoh@feoh.org"&gt;Chris Patti&lt;/a&gt; 
&lt;a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/"&gt;
&lt;img alt="Creative Commons License BY-NC-SA"
style="border-width:0; margin-bottom:12px;"
src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png"&gt;&lt;/a&gt;</copyright><lastBuildDate>Mon, 02 Mar 2026 00:41:16 GMT</lastBuildDate><generator>Nikola (getnikola.com)</generator><docs>http://blogs.law.harvard.edu/tech/rss</docs><item><title>NiceGUI: Awesome Python Dynamic Websites For The Web Dev Impaired!</title><link>https://www.feoh.org/posts/nicegui-awesome-dynamic-websites-for-people-who-write-ugly-html.html</link><dc:creator>Chris Patti</dc:creator><description>&lt;h3&gt;Confession&lt;/h3&gt;
&lt;p&gt;I have a guilty confession to make: The idea of trying to come up to speed with modern front
end web development fills me with inchoate dread.&lt;/p&gt;
&lt;p&gt;Javascript, Typescript, React.js, advanced CSS, CORS - all of it just makes my head spin.&lt;/p&gt;
&lt;p&gt;It's not that I don't think these are all worthy skills to have, I &lt;em&gt;do&lt;/em&gt;! But the truth is I
still feel like I really want to solidify my transition from Python novice to Journeyman and
one day even with blood, sweat, tears, and a little luck ascend the lofty mountain top to
Expert!&lt;/p&gt;
&lt;p&gt;So when the fine folks over at &lt;a href="https://pybit.es/"&gt;Pybites&lt;/a&gt; mentioned it as a suggestion for
their "Summer of Pybites Code 2025" competition, I thought it was worth a look.&lt;/p&gt;
&lt;p&gt;I was pleasantly surprised!&lt;/p&gt;
&lt;h3&gt;It's Surprisingly Eaasy!&lt;/h3&gt;
&lt;p&gt;Here's how you create an input form with a prompt that lets you enter some text:&lt;/p&gt;
&lt;div class="code"&gt;&lt;pre class="code literal-block"&gt;  &lt;span class="k"&gt;with&lt;/span&gt; &lt;span class="n"&gt;ui&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;card&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt;
        &lt;span class="n"&gt;ui&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;input&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"Search for images"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;value&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"quasar"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;bind_value&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;ng&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;"search_text"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;props&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"outlined"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="n"&gt;ui&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;button&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"Search"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;on_click&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="k"&gt;lambda&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;ng&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;search_image_request&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;

    &lt;span class="n"&gt;ui&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;run&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;Pretty straight forward, right? The ui.card() just gives our input box a nice fancy border.&lt;/p&gt;
&lt;p&gt;The ui.input bit is mostly self explanatory other than the .bind_value() which simply stores
the result of our input into the search_text property.&lt;/p&gt;
&lt;p&gt;The ui.button line is what it says on the tin as well, with the addition of that lambda in
the on_click event which simply calls our search_image_request() function when we click the
Submit button.&lt;/p&gt;
&lt;p&gt;You can see what this looks like along with the results of a search:&lt;/p&gt;
&lt;p&gt;&lt;img alt="An Example NiceGUI application I built showing a text
input" src="https://www.feoh.org/images/NiceGUI_Blog_Example.png"&gt;&lt;/p&gt;
&lt;p&gt;Needless to say, this is pretty neat! I can make very intuitive API calls to create
interactive user interface components on a dynamic web page! NiceGUI even handles creating a
server for your app, although you can deploy it other ways as well.&lt;/p&gt;
&lt;p&gt;So until the day comes when I can devote myself to learning how to build for the modern web,
it's really "Nice" to know that there are tools out there that &lt;em&gt;are&lt;/em&gt; within my reach to help
me build beautiful interactive web apps in my favorite programming language - Python!&lt;/p&gt;
&lt;h3&gt;Potential Down Sides&lt;/h3&gt;
&lt;h4&gt;Javascript All The Way Down&lt;/h4&gt;
&lt;p&gt;NiceGUI is a Python wrapper over &lt;a href="https://quasar.dev"&gt;Quasar&lt;/a&gt; - an "Enterprise Ready"
Javascript framework written atop &lt;a href="https://vuejs.org/"&gt;Vue.js&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;If you try to view the web pages it generates with anything other than a Javascript enabled,
modern web browser, you're out of luck. I suspect people with screen readers and the like
don't have a chance.&lt;/p&gt;
&lt;p&gt;It's possible that Quasar implements the proper Aria roles to make the generated sites more
accessible in a modern browser, but I have no real idea honestly.&lt;/p&gt;
&lt;h4&gt;Edge Cases Can Bite You&lt;/h4&gt;
&lt;p&gt;One of the things I really struggled with when initially trying to use NiceGUI is the fact
that if you enclose a &lt;code&gt;ui.image&lt;/code&gt; inside a &lt;code&gt;ui.card&lt;/code&gt; or any other container, you must either
manually style the container large enough to eocompass the image, or instead use the
&lt;code&gt;ui.interactive_image&lt;/code&gt; which will apparently handle this case more smoothly.&lt;/p&gt;
&lt;p&gt;If you don't, you'll find as I did that you get ... Nothing. Your image simply doesn't
display. This lead to a bunch of head scratching on my part, until the nice folks over at
NiceGUI pointed me in the right direction.&lt;/p&gt;
&lt;h3&gt;Conclusion&lt;/h3&gt;
&lt;p&gt;Despite the potential issues, I think NiceGUI is a really handy tool to have in one's belt
for those moments when you just &lt;em&gt;really&lt;/em&gt; need to build a quick and dirty interface for
something that renders to a web browser. The API is very approachable, and the folks behind
the project couldn't be more welcoming and helpful.&lt;/p&gt;
&lt;p&gt;I'm very glad to have taken the time to learn NiceGUI. Give it a go and let me know what you
think!&lt;/p&gt;</description><category>dynamic</category><category>python</category><category>ui</category><category>web</category><category>website</category><guid>https://www.feoh.org/posts/nicegui-awesome-dynamic-websites-for-people-who-write-ugly-html.html</guid><pubDate>Mon, 04 Aug 2025 00:11:54 GMT</pubDate></item></channel></rss>