Web Designing, Architecting, AI-ing, by Matt Ji

Abstract

Web can be viewed from many angles: Old and new, big and small, uniform and diverse. It's hard to pick along a continuum because the tribes like to territorialize. This poses a problem and an opportunity for planeswalkers to take advantage of three key evolving themes of the web: javascript vs all the other languages, corporate monopoly of backend data, AI's role at completing the trilogy of the semantic cybernetic future of intelligence.

Web Designing, Architecting, AI-ing

Consider carefully what UX means in a market system environment and what that entails for designers and their roles. First and foremost, let's deconstruct that term, market system environment, before this article becomes an exponential word salad. A market is where buyers and sellers engage in negotiation and transactional behavior. A system is a framework for analyzing the traces, feedback loops and connections between individual nodes of buyers and sellers. Are you with me so far? Because now we're talking about the environment, which is all of the ignored relationships that has never needed analysis because it was never measured or even imagined. It is this third sphere where the creativity and adaptability of designers shine the most but is also at the highest risk to exposure to be percieved by others to have a sort of irrelevant thinking.

Simple case: QWERTY

The oft-mentioned QWERTTY keyboard layout is an artifact of design. It was first introduced to slow down typing speed so the old-fashioned typewriters didn't jam. It was a design-implementation success because it served the intended purpose of making sure the device interfaces robustly with users. Unbeknownst to the original designers, the design was so successful that it hijacked the market system environment upon further commercial adoption and ingrained feedback loops to make QWERTY the successful standard that it is today.:

However, a designer who is looking to solve a different "higher-level" problem might take a look at ergonomics a little more seriously. The very intent of the QWERTY design was to slow on the pain of wrist discomfort. Today, that constraint of keys jamming might be gone but the standard remains. That designer might introduce something like the Dvorak key-layout below after indoctrinating new party members to its cult.:

Depending on your design politik worldview on keyboards, you either: (1) believe that once something becomes a standard, it is an "already-"solved problem and attention should be directed elsewhere or (2) aim to radically tear-down outdated standards in favor of typing nirvana for both yourself, others and future generations. Clearly, there is a "secret third thing" betwixt these views but it is hard to consider where to even begin without the dialectic placeholders of conservative and liberal political stances especially when it comes to design. And who knows? Maybe the highest-level of keyboard layout design is no keyboard, because why would ergonomics be a thing when health/pain is solved in the future?

The Dao of Web Design

The Dao creates one.
One creates two.
Two creates three.
And three creates the ten thousand things.
– Dao De Jing - Lao Tzu - chapter 42

The intended objectives of a designer isn't to one-shot a solution but play with the apparatuses that works. Works is also a fuzzy term which is why I re-introduced the key-layout example in the context of standards and feedback loops. In other words, you kind of have to create a cult if you want to trigger mass adoption of your particular way of doing things, whether it be a new programming language or an AI tool. And within this playground of frameworks, a designer will often be met with this panlogic conundrum of chapter 42 of the Dao De Jing or Schelling's Hegelian Dialectic.

So what does this mean for webdesign and UX. The current state of the design is heavily favored in the javascript frameworks that prioritize beautification elements and components that engage a user through the browser with glowing and flashy buttons. It really is a sensory overload dark design pattern that is meant to serve the purpose of a unitary CTA, or Call to Action in web design parlance of getting a user to click "I Agree" or "Buy Now" without being subversive. This is a pattern that, once again, makes a recursive look-back at the market system environment feedback loops that reinforce this practice.

Attention is a valuable scarce resource to the user; but to the provider, it is a commodity that serves as the platform to alienate, isolate and rectify an individual and transmute it into a unit of exchange

This is the sad current state of UX today. Users are delighted by the inane overstimulation and their attention is trapped. Is there a way out of this trap? You betcha'. Every 'QWERTY' has its 'Dvorak'. Indeed, web developers have manifestos written like Resilient Web Design which sets up an accessibility awareness mindset. Those who know study and know these concepts deeply wield unimaginable Jedi-like powers. But for those developers, mindlessly droning away to create red and blue buttons serving as soul-less puppets to their big tech employers, what can be done to serve, enrich and empower them to re-invigorate the web with a new slant towards transparency?

This is where the focus turns toward DX, or developer/designer experience. As anybody who has touched business applications knows, things are ugly or broken on the back-end but flavorful and colorful on the front-end. Why? Now you have a better inkling of this phenomenon to answer this question yourself.

To follow the formula that has worked in the past: we need a dialectic, auto-generator, one that culture intrinsically provides, serves and replicates for eons in our memetic universe.

HTMX vs Javascript Frameworks

There is a story of a funny guy out of Montana who works as an assistant professor at Montana tech. He has been larping as a twitter troll and in the past year became a little bit of a viral hit among web developers. HTMX is the new buzzword floating around and it is centered around making HTML cool again while being hyper-ironic in a very gen-Z-esque meme-ing fashion. Quite a juxtaposition!

What does this mean for web developers?

He has already written 3000 lines of javascript code so you dont have to. All you have to do is add this one snippet of code to your html (approx. 14 kB) and now your webpages can bypass the complex javascript libraries that ceaselessly render and hijack hardware memory and your system's energy (an actual state improvement when we consider environment-writ-large):

<script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>

Not so fast! For the past two decades of front-end web development, roles have been separated so that front-end cannot mess or touch the server components. For good reasons because you dont want that one button guy to accidentally take down your website because he/she introduced an infinite for loop animation. In order for HTMX to work, web devs have to have full access to server components which means having to write the logic of balancing server load of a webpage, which ultimately amounts to Jedi-powers.

In many ways, htmx has become a sort of silent revolution on its own amassing a cult following in reddit sharing tips and tricks of implementing server call functions and taking webpages away from SPA frameworks, single-page-applications and back to statically rendered pages with clever modernized features such as serving partial html without embeddings, iframes limitations, and page reloads. This leaves a web designer with more capabilities of rendering the website without having to make compromises to the UX of shifting through full-reloads making an html library of files work seamlessly like one single page application without having to deal with any javascript.

One of the biggest issues of introducing htmx to newbies is that it is virtually impossible to share an example via a plain blogging or article format because none of today's modern web architecture allows server side calls placed directly on HTML due to the distrustful nature of the two-ends. Which is why HATEOS, hypermedia as the engine of state, is a breath of fresh air as an old-new web design philosophy.

Web Design and AI Apex

In many ways, this undercurrent of htmx bubbling to the surface is a godsend moment in web development because the camps of programming language have been divided for a decade. A lot of the front-end has been in javascript while other programming languages like python haven't had much time in the sun when the competitive nature of attention has been more about dynamically rendered pages. But at the same time, python has become a language of choice for data science and machine learning. Extensive libraries are written in python so a clever designer has a treasure trove of content to dig and highlight from that are categorically different from more javascript UI/UX focused libraries and functions offering a paradigmatic dialectic Jihad in web development today.

There is an opportunity with explosive potential of combining the feel of modern web apps infused with AI powered content to really shine and lead this new era. Javascript has never really been allowed to handle server components until recently. This means databases and backend architecture that are known for speed and performance like the search engine Google can now be democratized so long as the right policies are enabled like filtering fact from fiction. Everything is now up for grabs.

Jedi Power #1: Queries per second

If you sign up for a Google Gemini Developer API key, you will see that your super power is listed as 60 queries per second. How do you maximize the use of this feature to your users? With traditional chat bots, it might take a few seconds for the user to type in a question. But what if for each key stroke, you have an auto-fill populate several 'hypothetical prompts' and generate answers and displaying those to the user even before they can click send? It seems like magic but it's not. A very basic implementation of this leads to a very buttery UX that makes chat-modules seem antiquated.

Minimalistic Demo of Chat App using Python:Flask:HTMX

This is one of those privacy, security paradigms that can be flipped now that we are dealing with synthetic data. In the current perspective of looking at data privacy, a consumer doesn't want trackers and data stored in websites because it is intrusive and terrifying at a future time after the engagement with the webpages are over. But what if all user inputs are default anonymized and all AI outputs are displayed for seamless collaborative work? Databases cleverly have this as a default mode, but it is perhaps our paradigm to blame for authentication, login pages, the password manager privacy industrial complex that sells you VPNs. Corporations, in my opinion, have collectively ignored or misinterpreted what consumers want when they say they want customization and privacy. They read that the need to make very data-rich tagged profiles with extensive security and multi-factor authentication apps. The Ockham's razor is anonymize and give users the dashboard controls for the customization.

Jedi Power #3: Offline AI

This strays away from web development but is a massive hot topic. One reason not to use online web chat AIs could be that the user inputs can be used to train future models and might have key private information or proprietary stuff that companies don't want to share. This means no ChatGPT in the work place. But can you imagine if a company says no google? The incessant need to protect proprietary stuff while also requiring the speed and flexibility of new tools offers designers a platform to create and build offline AIs. A simple one to get started like Ollama can help get you started. Furthermore, you can add vector embeddings to the offline model so that you can ask questions about your schedules and appointments and files on your folder without it being shared. It is up to the designer to make choices about the amount of interactivity it has with other online AI models but that will be probably a more advanced topic.

Engineering the Ocean

No one ever designs the ocean.

The ocean is there and it moves and is governed by Navier-Stokes.

But the ocean does collect plastic garbage islands.

You probably need to design boats and tools to collect those. You don't need to micro-manage the fishes. Everything is just part of that vast ocean.

I want to wrap this long article up with a simple and optimistic message to meditate on. Clearly, there's a lot of fear-mongering in every industry and communities about the threat of AI taking designer jobs. But this brief intro to this interesting play in web design trends hopefully garners some curiosity and insights to how designers can think and do jobs better than the employers by using new tools and abstractions. Basically, a few key tech stacks are needed and you are off to the races ready to conquer the multi-trillion dollar industries of big tech AI. Designers are planeswalkers and timetravelers in the market system environement and with the right mindset, the universe is yours to conquer.

Written by Matt Ji.

About the author
Born in Shanghai, China. Grew up in Texas.
Studied Petroleum Engineering in Colorado. Worked as a Frack Engineer.
Studied Renewable Energy in Germany. Worked as an Asset Manager.
Traded Stocks during made a lot then and lost everything.
Built web apps to become an full-stack engineer tinkering with AI tools, htmx, and 'Excel'...
Opposites, dialectic, lived and breathed.

Links