For the law school’s class of 2020, we wanted to do something special on graduation. The Senior Associate Dean wanted to put together a banner on our homepage looping all the graduate names. When I received the request, I was not sure how to include over 230 graduates on a small banner. After doing some research, I came up with the scrolling solution, which is similar to the credit at the end of a film. I came across this simple CSS scrolling text technique by Syed Murtaza and adapted for our own use. The scrolling banner is only featured for today so take a look before the day is over.

In a typical graduation year, we would have a print booklet about 40 pages. Since the event is online this year, we wanted to create a short program page recognizing all the graduates. I put together the program page using CSS multi-columns. I really love this CSS feature. It makes typesetting for something like this painless.

We also created a page for the faculty and staff to leave personal notes for the graduates.

I was flipping through the recent issue of Time magazine and came across a layout that caught my eyes. I love the photo treatment. The layout is simple yet striking. As a result, I wanted to adapt it for this blog.

Using CSS Grid, I played round with combining text and photo. I can divide the layout in half or make the image takes up two third. I can use grid template areas to switch the placement of the image. I really like the flexility CSS Grid provide. The best part is that the photo only shows up on large screens via media query. Small screens only get text layout. The photo does not download on mobile devices. I do not want to waste reader’s data.

I haven’t used photography on my blog for a while and I have been wanted to bring it back. I am pleased with this direction. It took me about half an hour to accomplish this. I really love CSS Grid.

For iteration 3 of this blog, I changed the big display text to Gimlet Sans, May’s Font of the Month that David had just sent out earlier today. Because of the lovely “a” in Gimlet Sans, I switched the text face back to Fragen, by Lucas Descroix. I love the way the “a” in each typeface has similar features, and yet they are different.

I also brought back the dark mode after reading Kilian Valkhof’s “Your dark mode toggle is broken.” I didn’t implement the toggle button. The only way you would see the dark mode is when you switch your operating system to dark mode. I also added a bit three red stars as end marks for a bit of decoration. Why not?

One of the best things of having a personal website is that I get to experiment and change the design whenever I feel like it. It gives a bit of a joy during this difficult time.

Since becoming president, Trump has brought his brand of corruption to every federal government agency and it is hard for us to keep track of it all. In the cover story of the March/April 2020 issue of The American Prospect, Jim Lardner unlocks extensive dossiers of the activities happening inside 15 federal departments.

Last week, the magazine contracted me to create an online version of the story. After discussing with its creative director who was my advisor for my final thesis on Vietnamese Typography, I developed an interactive page based on a map illustrated by Peter and Maria Hoey. My initial impression was that I might have to create an image map, which I used to despise and hadn’t have to create one in years. Thankfully, I was able to export the illustration into an SVG, which allowed me access individual shapes of the building to create links and hover state. When users hover each department, the building moves a bit and turns dark. Another requirement was to have the dollar signs flying across the map to show corruptions.

The project turned out well. The illustration is beautiful and the dossiers are informative. I invite you to check out “Mapping Corruption: The Interactive Exhibit.”

For the second iteration of Visual 2020 theme, I reset the typefaces. Main text is anchored in Exchange, by Tobias Frere-Jones. I played a small role in providing Frere-Jones my feedback on Vietnamese diacritics before this typeface released. Headings are set in Bild, by David Jonathan Ross. Bild’s variable font comes in handy for setting various level of headings. For the title of each article, I am making it big. Code excerpt and category are set in Input Mono, also by DJR. I also changed the background color. I went down the rabbit hole a bit on COLOURlovers and I needed to stop. This iteration is not a big departure, but a change to keep the site fresh. These days I don’t do a whole redesign, but small changes here and there. I hope you enjoy this little update until iteration 3. I am not sure when that will be, but pretty sure in three to six months depending on what typefaces I wanted to try out next.

In 2012, my wife asked me to create a tribute website for her father after he passed away. I stood up WordPress and created a child theme based on Twenty Twelve, which was WordPress’s default theme at the time. WordPress was quick for me to set up and easy for her to add content. Except for his biography, she put together photos, videos, and letters from family members and friends.

Since then she hadn’t updated the site. She doesn’t need to. It is a special little site to keep all the wonderful memories of him. I could have left the site as it was, but I felt WordPress was not necessary. Even though I had automatic upgrade turned on, maintaining WordPress was not ideal. In addition, the Twenty Twelve theme seemed outdated.

I had wanted to redesign the site from scratch and to remove WordPress for a while. I finally found the motivation and the time last week to do it. I recreated the pages using HTML, CSS, and a bit of PHP. The new design is fresh and no longer driven by templates. It felt great getting rid of WordPress altogether.

Redesigning the site feels as if I have paid proper tribute to my father-in-law. I wish I could share the website, but I respect my wife and her family’s privacy.

Rest In Peace, Bố.

A few months ago, I met up with one of the founder of Đẹp Designs over coffee. I casually pointed out to him that the images were heavy (about 2.5 mb a photo) and the dimensions were off. He told me that after I handed over the key and trained one of his employees to update the website, the employee had moved on.

When I relaunched Đẹp Designs two years ago, I gave specific instructions on the dimensions and optimizations in Photoshop. All that they needed to do was creating the images and upload them to the server. Kirby CMS will handle the rest. Unfortunately the images were huge and the sizes varied.

I made the suggestion that I can handle the update for them since they don’t seem to add new content too often. Because I would be doing the updating, Kirby is no longer needed. They would not have to worry about upgrading Kirby CMS. In my proposal, I offered to move the site off Kirby and rebuild it using PHP, audit the entire website, perform house cleaning to fix bugs, bring the codes (HTML, CSS, JavaScript) up to date, add an SSL Certificate, and updated from PHP 5.4 to PHP 7.3.

After they agreed, I spent some of my Thanksgiving break reworking the site. Take a look.

Visualgui 2020 is not a new departure, but more of a fine-tuning from Visualgui 2019 Iteration 6. I am still obsessed with the book-reading experience with just one-column text on muted background color.

The biggest change is the typeface. The main text is now set in Fragen, by Lucas Descroix. I really love this new slab text face. Furthermore, I had the opportunity to work with Descroix on Fragen’s Vietnamese diacritics. I am mot using a sans-serif complementary in this version.

I am also bringing back the huge display text on the homepage. Currently I am using Roslindale Ultra by DJR. It’s pretty much it.

As a voracious reader of physical books, I wanted to turn this blog into a book reading experience. The background color was chosen to mimic the paper. I also limited the color to mute. No more red links. Even the logo is more subtle.

For the typeface, I am setting the main text in Schotis, designed by Juanjo López and inspired by Scotch Romans. López writes, “The Scotch Romans are a strange case in the history of typography. Although they were one of the most used letters during the 19^th and early 20^th century, they don’t have their own place in the main typographical classifications.”

For small text, I turned to Adelle Sans, designed by Veronika Burian and José Scaglione. I like the way Schotis and Adelle Sans complements each other. For code excerpt, I am sticking with Input Mono, by DJR.

After using big text in the previous iteration, which did not even last a month, I kind of like the quietness of this version. Hopefully, it will last until next year before I switch it up again. It always nice to have a personal website to experiment with typography and to hone my development skills.

Iteration 5 of this blog returns to one-column layout. The three-column grid in the previous iteration was getting too busy for me. Too many sidebars; therefore, I wanted to strip back to just the blog posts. All additional information is pushed to the bottom.

This iteration also returns to open-source typefaces: Crimson Pro and Livvic. Both designed by Jacques Le Bailly.

The hero text on the homepage feeds in from Merriam-Webster’s Word of the Day and typeset in Font of the Month Club. I have been visiting my own site and learn a new word a day. A little narcissistic, I guess.