The MODX Disaster

After watching the final U.S. presidential debate on Thursday, I checked my RSS reader instead of going straight to bed. I saw a notification from MODX releasing 2.8.1. I was a bit surprised because I just upgraded to 2.8.0 only a few weeks ago. MODX usually takes at least 6 months to put out a minor release. It must be some security issue that they needed to patch.

MODX is the content management system that powered the Scalia Law website. Since it was midnight so no one would be logging into the CMS to make any updates; therefore, it was a good time to do the upgrade. It would only take me about 15 minutes to complete. I followed the procedure like I had always done in the past. Something didn’t go right when the files which were supposed to be merged had prompted me to replace. When I allowed the files to be replaced, the website went down. The files that used to take 15 minutes to merge were now estimated about 55 minutes.

I started to panic, stopped the upload, and tried to figure out what went wrong. I went into our daily backups and re-uploaded the directories I had made the upgrade. The process alone took about half an hour. The website was still down. At this point, I re-upload the entire site as well as the database from two days before. This process took a couple of hours. It was already three in the morning and nothing worked. I called GoDaddy, our hosting provider, to see if there’s anything they could do. The first time I called, the technician recommended that I try to re-upload the site from a week old. If that would also fail, I could request a disaster recovery.

I went on Twitter and tweeted for help from the MODX community. I received no response. Its community is way too small. Around six in the morning I started to get messages from colleagues telling me that the site had been down. I explained the situation to my supervisor and her supervisor. They completely understood. Since I could not get any help the last resort was to ask GoDaddy to perform a disaster recovery. The site remained down until around 4:45 pm on Friday. The site went down for 16 hours and I feel horrible. It was all my responsibility alone to bear. I did not sleep that night and kept checking my phone for a miracle to happen.

Although the website is now backed up working, we are set back 3 weeks. GoDaddy only keeps a snapshot every two to three weeks. Now I have to restore what was missing and it is a pain. I am also causing other people to redo some of their work as well.

After this incident, I now determine that we will need to get off MODX. This CMS is dying. It could never get beyond a couple of thousand enthusiasts. I should have called the shot a long time ago, but I held on the hope for it. Now it has become cleared that I need to make an exit strategy. It’s time to migrate to WordPress.

Loving The Details Element

I only recently discovered the HTML Details element and I am loving it. I immediately applied it on the footer of this blog to hide and show additional information such as about, contact, feeds, privacy, and so on.

In the previous version of my blog, I had everything listed on the footer, which got tedious to scroll, especially on mobile devices. Then I moved everything to an info page. That worked out OK, but I was not too crazy about the extra click. In addition, I don’t want to make an extra page for this blog. I wanted to keep only posts and no pages. Because I redesign this blog so often, I wanted to keep it as simple as possible so I can quickly go and give it a redesign without having to worry about a page format.

As a result, I brought all the additional information back to the footer, but put everything into a disclosure widget using the details and summary elements. To my amazement, they worked as expected without using any CSS or JavaScript. Take a look.

Chữ Việt cho người Việt

Nhờ quyển sách Vietnamese Typography (Nghệ thuật chữ Việt) mà tôi được cơ hội làm việc với những nhà thiết kế chữ từ Á Châu đến Âu Châu từ Nam Mỹ đến Bắc Mỹ. Tôi được họ tin tưởng trong việc nhật xét và góp ý để chữ của họ được rõ ràng và dễ dàng cho người Việt đọc. Được đóng góp một phần nho nhỏ trong công việc đưa nghệ thuật chữ Việt được dồi dào hơn là một sự vui sướng cho những con tim yêu thương chữ Việt như tôi.

Gần đây nhất, tôi được làm việc với Stephen Nixon qua bộ chữ mới Name Sans của anh được thiết kế dựa theo những bảng tên mặc khảm của NYC Subway. Name Sans đã được văn phòng Thống Kê Dân Số của tiểu bang New York chọn làm phông chữ nên họ yêu cầu anh Stephen làm bộ chữ với tiếng Việt và anh Stephen đã tìm đến tôi.

Tuy Name Sans vẫn chưa hoàn tất nhưng tôi tin chắc sẽ là một bộ phông rất hữu dụng, đặc biệt là Name Sans có tiếng nói Việt cho người Việt.

One Variable Font Rules Everything

Back in April, David Jonathan Ross sent me a demo version of Roslindale variable font upon my request. I hadn’t a chance to try it out until a couple of days ago when I had the idea of redesigning Trịnh Công Sơn’s lyrics sample page, which I had created to show off Vietnamese typography. In the previous version, I set each quote using various fonts from Font of the Month Club, which I am still a member. It was playful but distracting reading experience. Furthermore, the performance was terrible because of the amount of fonts. In this redesign, I wanted to take the opposite approach.

Although this version of Roslindale is still a work-in-progress, it demonstrates the power of the variable font technology. With just one file, I can use Roslindale for large display, body text, and everything in between. The level of control the designer placed in the typographer’s hand for setting text with variable fonts is unprecedented. As you can see on the page, the author’s name is set in ultra weight. Each song’s title is set in bold display. Each song’s lyric is set in text. Each song has highlighted quotes setting in thin italic display.

I am not sure who reads this page, but I read it all the time. Trịnh Công Sơn’s lyrics are filled with poetic prose. I love to read them when I have nothing else to read or if I need to kill time. It’s a great way to learn Vietnamese and to figure out Trịnh Công Sơn’s spellbinding lyrics. I have been using this page more than I had originally thought.

Many thanks to David for letting me experimenting with demo. I can’t wait to see the final release of Roslinsdale. I know it will be amazing.

More Thoughts on Selling Ads On My Blog

My experimentation with advertisement on this blog is so far so good. Even though I haven’t had any clients coming to me to book a spot, I have ads in the lineup in the next couple of weeks. These ads are the result of cold emails. It felt kind of awkward reaching out to potential advertisers who I have known asking to advertise on my site.

The first email I sent out, I felt immediate regret. Would the potential advertiser think I am being greedy? Would the potential advertiser think selling ads on my blog is silly? I kept checking my email to see if the advertiser had responded. To my surprise, the advertiser gave a positive response and was willing to schedule for two to three weeks. That reply gave me confidence to reach out to another one, and another one, and one more. So far, they have been supportive of my advertisement plan.

Why am I selling ads anyway? Obviously, it is not about the money because the price is quite low. I like ads when they are done well, especially high-quality ads in print magazines. The web has a bad rep for advertisement from the start and it is just getting worse. Advertisement on the web has been intrusive, annoying, and just creepy. Ads on the web interrupt the reading experience, slow down the website performance to a crawl, and invade users’ privacy. I don’t want any of that and I want to change all of that. I do not use any tracking. I have no Google Analytics. The only analytic I can see is through CloudFlare’s web traffic. I want to bring high-quality ads to the web. I am glad someone gets it. Sophia Lucero tweeted about this week’s ad:

as one who has a site with a sorta similar split layout / image sidebar, this is a refreshing & honest take on promoting

Before I decided to sell my own ads directly, I wanted to join Carbon Ads. Based on my monthly pageviews, I seemed to qualify. Unfortunately, I have not heard back from them about my application. It could be that my blog is not specific to design or development. I blog about anything under the sun. My experiment with sell ads directly is inspired by John Gruber’s Daring Fireball’s weekly sponsorships. He’s pulling $7,500 a week and he has consistently done week after week for many years. I am obviously not shooting for the moon here. If I can make a third of what he is making, I would quit my full-time job in a heartbeat. I don’t think I can make more than 50 bucks a week, but that’s good enough for me to cover the hosting and domain renewal expenses. That’s all I am aiming for.

Realigned Vietnamese Typography

Spent the last few late nights tightened up Vietnamese Typography. Every page had been updated, but the recommendation page got the most attention. I wanted to make the Vietnamese specimen for each typeface more prominent. I also added a list of information for each typeface. I got rid of the rating. It doesn’t seem necessary. I also featured two new typefaces from Okay Type. Harriet and Alright came highly recommended to me by a Vietnamese type enthusiast. I really love Harriet. I might license it for the future design of this blog.

Separate RSS Feeds for Vietnamese and English

Nowadays I write more in Vietnamese than English. To spare my English readers from receiving my Vietnamese posts in their RSS reader, I decided to make two separate feeds.

I had thought about this for quite a while, but hadn’t come up with a simple, streamline solution until this morning. It just occurred to me that the simplest solution is using tags, which built into WordPress and RSS. I just need to tag my Vietnamese posts with “vi” and English posts with “en.” To subscribe to my RSS feed, you can now choose English only or Vietnamese only. If you can read both languages and want to get everything, you don’t need to do anything. The default feed still works.

I wish I can go back and tag every post with either English or Vietnamese, but sorting through 7,267 (as of this writing) is just not a good use of time. Fortunately, I can filter out my Vietnamese posts by searching for letters with diacritics such as “ô” or “đ,” which narrowed down to 690 posts. Using bulk actions, I can quickly tags my Vietnamese posts. Now that I have most of my Vietnamese posts tagged, I can add a CSS class and design something specifically for Vietnamese and English in the future. That should be fun.

Converting latin1 to utf8

If you want to find the quick tutorial, scroll down to the bottom of the article. Here’s some background of the issue I faced.

Last night before going to bed around 10:30 pm, I made a tiny mistake that kept me up until three something in the morning. I logged into’s WordPress Admin to post an article. Instead of doing what I intended to do, I changed the encoding for pages and feeds from iso-8859-1 to utf-8. I also set the template header to <meta charset="utf-8">. Vietnamese text still rendered fine until I made a new post. Every word contained question marks. When I edited an existing article, it also turned into question marks.

I freaked out a bit and went back to change back the encoding for pages and feeds. I freaked out a bit more when the option had disappeared in the Settings Reading Screen. It turned out that WordPress has removed that option in version 3.5.0. I suspect that the option was still there because it was set to iso-8859-1 instead of the default utf-8. I edited wp-config.php to change the encoding back to define('DB_CHARSET', 'latin1');. To my dismay, all the Vietnamese texts displayed black diamonds with question marks. It appeared that going back was not possible; therefore, I googled to find out how to convert latin1 to utf8, something I should have done a long time ago.

In my search, I came across Varun Shrivastava’s “How to Fix Weird Characters Seen on WordPress Blog?”, which seems to be straightforward. I follow his instructions using phpMyAdmin. I exported the existing database into UTF-8 encoding. I created a new database with UTF-8 Collation. Then I imported the data back into the new database. Unfortunately, that didn’t solve the issue. The question marks still showed up on new posts, edited articles, and new comments.

Then I followed WordPress’s documentation on “Converting Database Character Sets” using the new database I just created. I ran the following SQL command in phpMyAdmin to change the default charset of the database:


It worked, so I ran the following SQL command to change the default charset of individual tables:


Then I ran the following SQL command to run individual columns:

alter table wp_posts change post_content post_content LONGTEXT CHARACTER SET utf8;

Unfortunately, I have to run TEXT, LONGTEXT, TINYTEXT, VARCHAR, ENUM for each individual column for each individual table. It would be a lot of work to do manually and when I got to TINYTEXT, it wiped out all the body text from the article. I gave up and went to bed around 3 something in the morning.

I woke up again around 7 am and tried to figured out what I else I could do. I opened up the SQL file I exported a few hours earlier and performed a find-and-replace to convert latin1 into utf8. 19 instances were found and replaced. I created a new database in phpMyAdmin and imported the new search-and-replaced file. To my surprise, it worked as expected. Take a look at I created new posts, edited old posts, added new comments, and the text came up normal, no more question marks and no more black diamonds.

Essentially, to convert latin1 to utf8, this is all you need to do in phpMyAdmin:

  1. Export your existing database to your local machine
  2. Find latin1 and replace with utf8 on your local machine
  3. Create a new database in phpMyAdmin with UTF-8 Collation
  4. Import the SQL file from your local machine to the new database in phpMyAdmin
  5. Run this SQL command in phpMyAdmin: ALTER DATABASE MyDatabaseName CHARACTER SET utf8;
  6. Edit your wp-config.php to point to the new database and edit define('DB_CHARSET', 'utf8');
  7. Update the meta tag in your theme’s header: <meta charset="utf-8">

That’s it. I don’t know why this method isn’t available already. I wonder if there’s any drawback of using this method, but it seems to work for me. I am not a MySQL expert. In fact, I don’t have much confidence in messing around with it. I lost several hours of sleep, but the learning experience is worth it.

No JavaScript No Content

On my iPhone, I continue to use Safari without JavaScript to browse the web. In addition to hamburger menus not working, I have come across a bigger issue. Some of the sites I visited are completely blank with JavaScript turned off. What even more shocking is that sites with typography are completely empty.

I started off with Frere-Jones Type and it is completely blank. Then I headed over to Kilotype, which designed by the same company that created Frere-Jones Type, and it is also completely blank. H&Co is completely blank. Future Fonts is completely blank. Even Google Fonts is completely blank.

I don’t have the courage to go on. As CSS fonts continue to advance and mature, I wonder why these sites rely solely on JavaScript to deliver their content. I will continue to use Safari on my iPhone to browse sites and read news. I won’t turn on JavaScript unless I absolutely have to.

Typesetting for Dark Mode

Designing for the dark mode had been an afterthought for me. I simply changed the text and background colors and leave everything else intact—even typography. Because I still preferred reading dark text on light background over light text on dark background, I spent most of my time designing for light mode and I had always loved serif text faces. If I have to read text on dark background, however, I prefer sans serif over serif. As a result, I thought why not changing up the typography as well for dark mode.

If you are reading this site with dark mode, the main text is set in Amica Pro, by Dave Rowland. Last year, I had the opportunity to advise Dave on Vietnamese for Amica Pro. I am not sure if he had a chance to implement my recommendations. The version I am using has not been updated. Although some minor tweaks would be better, but the diacritic design over all is pretty solid. For display text, I am using David Jonathan Ross’s Dattilo DJR Banner, which has a variable font.

If you read this site on dark mode, please let me know your feedback.

Word of the Day