When I came across Nguyễn Đăng Liêm’s “Four-Syllable Idiomatic Expressions In Vietnamese,” I knew I wanted to create a Vietnamese typographic sample out of it. The study was published 56 years ago—8 years before I was even born. The copy was 66 pages in a non-selectable-text PDF. Mr. Nguyễn selected 825 four-syllable idiomatic expressions and each word with Vietnamese diacritics was marked with a black pen by hand.

Turning a PDF into HTML without any automation would be too time consuming; therefore, I turned to AI for help. I have been resistant to using AI, but I wanted to experiment with large language models for this project.

Fortunately George Mason University has an enterprise AI platform with 6 different agents: 2 from OpenAI, 2 from Anthropic, and 2 from Meta. My first attempt was using GPT-5.4 to convert the PDF file into semantic HTML. I let it run in the background. Maybe an hour or so later, GPT-5.4 gave up. It exceeded its limits. I switched to Claude Sonnet 4.6, and it hit the same limit.

I went back to GPT-5.4 and asked it to convert PDF to text instead. GPT-5.4 was able to give me the text file, but all the Vietnamese words were mixing with unicodes. It was just a mess. I asked Claude Sonnet 4.6 to do the same and it gave me clean text without Vietnamese diacritics. We were getting somewhere. I then asked Claude Sonnet 4.6 to turn text into semantic HTML and convert dumb quotes into smart quotes. Claude Sonnet 4.6 gave me back a page in HTML and CSS with smart quotes.

The HTML markups looked pretty clean too. Though I had to do some find and replace to create the HTML markups I wanted. I removed all of its CSS and wrote my own to design the page that I wanted. After choosing the typefaces, selecting the colors, and designing the layout, I went back to the HTML file to retype Vietnamese diacritics for each word. Even though I had learned so much about spelling and grammar doing that, I got tired after about 50 expressions. I still had about 775 lines to retype.

I uploaded the HTML file I was working on and asked Claude Sonnet 4.6 to put the diacritics on Vietnamese words. To my surprise, it did a decent job. I went back to check every line and 95% of the diacritics were correct. I was impressed.

Even though I don’t want to use AI in my web design process, I have to admit that AI can be helpful with automated tasks. I still do the design myself. Check out “Tứ Tuyệt.”

As soon as my supervisor left, I made some small but significant changes on the Law School website that I had been itching to execute. The most notable one is changing out the footer navigation.

For the latest redesign, my supervisor contracted out to an agency to develop the front-end part of the site. Somehow the developer created three duplicates of the main navigation: one for mobile, one for desktop, and one in the footer. When I looked the codes, I was horrid. Ideally, it should have been one set of navigation that would serve for all three different places. When we had to update the global navigation, we have to do both in the header and footer instead of just one place.

Of course, I brought up this issue during the development phase and the agency wanted to charge more if we wanted to make the change. For me it was crucial since every page would need to carry three massive sets of navigation, but my supervisor didn’t want to spend anymore money since we already went over budget.

Since we already had a super navigation on the header, repeating the same set in the footer was a huge waste of space. We could use the footer for other items such as jobs, shop, accessibility, privacy statements, and Consumer Information (Required Disclosures). I quietly pulled the plug over the weekend and I haven’t heard any complaints. It feels great just to make that one small change.

My supervisor spent hundreds of thousands of dollars to completely revamped the site, switched the CMS, and left the mess for us to clean up.

Last week, I attended the annual Computers in Libraries 2026 conference in Crystal City. This year, they should have renamed the conference to AIs in Libraries 2026. Out of 4 keynotes and 70 tracks, the focus was primarily on AI. There used to be a track dedicated to website and UX, but this year there were only two presentations on website and UX. I attended both. For the rest, my brain was about to explode with AI lectures. Then again, I learned something about Vibe Coding.

As a web designer and developer, I had always been skeptical of using AI to create webpages. After hearing and seeing some demo about Vibe Coding at the conference, I decided to give it a try. One of my passion projects has been creating typographic sample pages for my Vietnamese Typography web book. Whenever I read something interesting in Vietnamese, I would create a sample of it—of course with proper credits. For instance, if I read a book, I would sample my favorite chapter and provide an English translation if I could. If I read from a printed book, I would take photos of the pages, copy, and paste the text. After that I would write the HTML markups for the text. The process beat typing up the text manually, but it was still tedious because I had to change dumb quotes to smart quotes, markup italic words, and make sure hyphens, en dashes, and em dashes were applied correctly.

With the latest sample page showcasing Bảo Ninh’s short stories, I tested out Google Gemini. I uploaded 10 images since the free version only allows 10 images at a time. I put in the prompt: “Convert images into one HTML page. Markup <em> tags for italic text. I changed the option from “Fast” to “Thinking.” Within 15-30 seconds, Gemini showed me the HTML page it had created. I copied and pasted into my HTML editor, removed everything else except for the main content. I was amazed how clean the HTML page was. All the smart quotes, hyphens, and dashes were correct. Italic words were marked up in <em> tags. Furthermore, it places all the footnotes correctly at the bottom of the pages. It was definitely a time-saver for me not having to do these tasks manually. I still do not trust AI to do the design for me because I still want to write my CSS and the way I structure my HTML document, but I can let it help me with speeding up the manual, repetitive labor.

I had a mixed vibe about Computers in Libraries, but I always ended up attending. While not all of the presentations fit my interests, a few did. If nothing else, I had a chance to get away from my regular work for a couple of days.

Some useful directives for .htaccess

Turn on Rewrite:
RewriteEngine On

Configure the base path
RewriteBase /

Forces HTTPS and without WWW
RewriteCond %{HTTP_HOST} ^visualgui.com
RewriteRule (.*) https://visualgui.com/$1 [R=301,L]

Redirect everything file in a directory
RewriteRule ^old-dir/(.+)$ /new-dir/$1 [R=301,L]

Redirect old URL to new URL
Redirect /old-file/ /new-file/

Custom 404
ErrorDocument 404 /404.php

Prevent directory listing when index file is not present
Options -Indexes

WordPress’s Site Health recommended that I should upgrade to PHP 8.3. I didn’t even realize that I was running on PHP 8.2. I googled for tutorials on how to update PHP on my DigitalOcean’s Droplets. Of course, I took a snapshots of my Droplets. Unfortunately, none of the tutorials I found worked. I had to restored my snapshots a couple of times. After about two hours, I almost gave up. Then I came across my own write up how I upgraded to PHP 8.2. All I had to do was replacing 8.2 with 8.4. I skipped 8.3. I also removed all old PHP packages and only leave 8.4. I was so glad that I documented all of the things I did. It definitely came in handy.

At work, I documented as much as I could as well on our Web Design & Services blog.

I am paying DigitalOcean almost $40 a month for my two Droplets. This blog (visualgui.com) is hosted by one Droplet. The other Droplet hosts the following sites: donnytruong.com, hiepkieuky.com, prowebtype.com, simplexpression.com, and vietnamesetypography.com.

In my initial setup, I wanted my blog to have its own Droplet because it is powered by WordPress. All sites on the other Droplet are static, except for with a bit of PHP includes and a few minor PHP functions. Both Droplets are performing well. They have enough resources to power all sites. The only downside is that I have to update and upgrade both Droplets. I have been thinking of putting all sites into one Droplet.

If I could put all of my sites in one Droplet, I could potentially cut the month fee in half. I am not sure if the server has enough resources to power all these site as one. As a result, I have been thinking about it, but I have not consolidate all sites into one Droplet.

Anyone has experience with DigitalOcean, please let me know if I can drop all my sites into one Droplet.

At the last minute, I decided to attend the Computers in Libraries 2025 in Crystal City, Virginia. In the previous years, I came away disappointed and this year was even more. The web presence talks from previous years have been replaced with AI presentations.

I hadn’t followed up on AI as much as I should so I figured I would learn something. Unfortunately I didn’t find the IA talks to be useful. The speakers went through lists of AI tools for web design, marketing, social media, and on and on. Out of all the talks, I found one somewhat useful: “AWS & Cloud Computing: Server Management.” I asked the speaker if there’s an automated tool for upgrading the OS. His answer was not really. I am running two cloud instances for my personal sites on DigitalOcean’s Droplet and I am getting tired of having to upgrade them every few months.

Despite not finding these presentations too useful, I still attended to get out of work without taking personal days off. I just needed some escape from my home office as well as my work office for a few days. I am not sure if I will return next year. I wish there are other useful conferences around the Metro area. I don’t want to travel far. I need to start searching.

Last night, I upgraded the Law School website to MODX 3.1.0. With MODX Cloud hosting, making an upgrade was just a click of a button. Of course, I had to make a backup first and that was also a click of a button.

MODX has to be one of the most unappreciated content management systems. After working with other systems, both open source and proprietary, I appreciate MODX even more.

As a designer, I appreciate the freedom and flexibility MODX offers to create a unique experience without any compromise. I don’t need to rely on bloated frameworks or predetermined templates.

As a developer, I appreciate its powerful architecture to deliver a rich experience. Its reusable code keeps the content manageable. I reuse its code plenty of times to create dynamic content.

As a server administrator, I appreciate its cloud hosting service for a peace of mind. Since we switched to the cloud-based subscription, I no longer have to manage the server. From security to backup management to failover strategy, MODX takes care of everything.

The MODX support team is superb. I can reach out to them at any time and they would respond promptly. Obviously no one knows MODX better than the people behind the CMS.

After more than 15 years of using MODX, I still can’t figure out the reasons it is not widely adopted. I hope MODX continues to thrive even if it stays small.

/* Base Rules */

@viewport {width: device-width;}
:root {font-size: 100%;}

html {hanging-punctuation: first last;}

*, *::before, *::after {box-sizing: border-box;}

* {margin: 0; padding: 0;}

body { text-align: left;
font-kerning: normal;
font-variant-ligatures: common-ligatures contextual;
font-feature-settings: "kern", "liga", "clig", "calt","lnum";
}

h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
text-wrap: balance;
}

p {
overflow-wrap: break-word;
text-wrap: pretty;
}

pre {overflow-y: hidden; }

audio, canvas, embed, iframe, img, object, svg, video {
display: block; width: 100%; vertical-align: middle;
}

img {height: auto; }

ul, ol, dd, summary { margin: 0; padding: 0; }

nav ul, nav ol, aside ul { list-style: none; list-style-image: none; }

abbr {font-variant-caps: all-small-caps; text-decoration: none;}

input, button, textarea, select {
font: inherit;
letter-spacing: inherit;
word-spacing: inherit;
color: currentColor;
}


In over 25 years of using computers, I had done countless copy and paste texts. Yet, I got annoyed with formatting every time I performed these two tasks.

Recently, I was helping Đán with his homework and I watched him copied and pasted text in to his assignments without the formatting.

He showed me how:

Win: Ctrl + Shift + V
Mac: Cmd + Shift + V

How in the world have I not known this all these years? Then again, better late than never. Thanks kiddo!