Visualgui 2021 Iteration 2: NewsReader

For the second iteration of this blog, I am switching up the typefaces. The body text is now set in NewsReader, a beautiful serif typeface by Production Type. NewsReader comes equipped with legible Vietnamese diacritics. Big headers are now set in Name Sans, by Arrow Type. Name Sans supports Vietnamese, in which I had a small role in it. I am keeping Recursive Mono, also by Arrow Type, for coding samples.

For the design, I am stripping down the layout a bit and going for all black and white with red only on the hover state. I also keep the dark theme, which is pretty much the opposite of the light theme. The accented color is still red.

I also brought back the navigation, which I had avoided using for so long. I moved all the information related to the site to an info page, but I filled out the navigation with links to various sections as well as to my professional website.

I keep tinkering around this blog. It’s my personal site.

Scalia Law School Redesigned

Last Friday, we rolled out yet another redesign for Scalia Law School website. This is our third redesign in the past couple of months. Our new dean did not like the previous turquoise color as an overall theme; therefore, we added a gray background to our top head just so we can use white and a bit of gold on our logo.

We made the homepage banners bigger and their new purpose is to attract prospective students. We went a bit crazy with the banners in the previous design. We kept getting requests for new banners for stories that didn’t even warrant to be on our homepage.

We switched from Myriad Pro to Minion 3, both designed by Robert Slimbach, for our headers. Minion 3 Display provides a more contrast to Pelago, also designed by Slimbach.

We brought back the action buttons: visit, request information, and apply. We highlighted our programs: Flex JD, JD, LLM, JM. We expanded our spotlights to showcase our diverse community. We made news and events less dominating.

Basically, we had gone back to where we were before we hired a consultant to change up our homepage. The consultant and our director of communications wanted banners and news on our homepage to take our visitors directly to somewhere else instead of drawing them into our site. These links often take visitors to news outlets that hit the paywalls. As a result, our readers couldn’t read the content. I am glad we’re making the news less prominent on our homepage.

The work hasn’t been done. We still have some tweakings to do. The site has grown so much since I took the reins almost a decade ago. The design had stood the time. I still maintain the main CSS, but we sprinkled inline styles here and there over the years. It is still manageable. I just need to go through and see if they are visually compatible with the new theme. Our next step is to bring more colors to the pages. We’ve gone from too-much colors to neutral gray to back to colors again. I am not complaining as long as I get pay to do.

New Work: Educational Partnerships for Success

Dr. Joy Garcia Tiên is my life-long mentor. I got to know Dr. Tiên through the Upward Bound program way back when I was in seventh or eighth grade. Upward Bound was the pre-college program that gave kids from low-income families an opportunity to pursue a higher education. By providing summer college courses, campus visitations, and job shadows with professionals in different fields, the Upward Bound program prepared children with limited access to educational resources a path to a better future. Through her kindness, compassion, and mentorship, Dr. Tiên had played an essential role in getting many of us, particularly Vietnamese-American children of immigrants, to where we are today.

Two weeks ago, I met up with Dr. Tiên for the first time in over twenty years. Even though we haven’t met face to face, Dr. Tiên has always been in contact to see how I was doing. She understood what it was like losing a mother and offered advice to help me pull through the darkest days of my life. When we were catching up about the good old time, in a windy evening at my mother’s resting place, Dr. Tiên mentioned that she is working on her own coaching and consulting endeavor called Educational Partnerships for Success. Helping kids to success has always been her passion for over 30 years; therefore, this project is near and dear to her heart. I offered to help with her website. Dr. Tiên only had two requirements: the ability to update the content herself and a blog component to share her writing. To meet her needs, WordPress is the obvious solution.

Since Dr. Tiên already purchased the domain name, we just needed to get the hosting through the same company.’s hosting package offers SSL certificate and WordPress installation with a click of a button. I hope these features become standards for many hosting companies if they don’t have them already. Once WordPress was installed, I activated its Twenty Ninety theme. This theme offered a clean, simple design that would work well for Dr. Tiên’s website. To make it personal, I created a child theme to add the logo at the top, change the colors to match the branding, and reset the typography. For headings, I chose Fraunces, designed by Phaedra Charles and Flavia Zimbardi, for its playfulness. For body text, I chose Rosario, designed by Héctor Gatti, for its academic friendliness. The two typefaces complement each other.

With the new Gutenberg editor inside WordPress, this theme gave me the flexibility to create different editorial elements through UI components as well as typographical hierarchies. It seemed to be the way to take advantage of WordPress’s Gutenberg. The days of creating a WordPress theme from scratch are long gone for me. I just needed to create the shell and rely on Gutenberg’s blocks to do the rest.

With the website up and running, I hope it will play a small role in getting Dr. Tiên started. She had already put together some wonderful STEM programs for the kids. I can’t wait to get my boys to enroll once the pandemic is under control. With her PhD in math, Dr. Tiên is also passionate about helping students who struggled with math to build more confidence in themselves.

I believe in Educational Partnerships for Success because Dr. Tiên had tutored, mentored, and guided me into the right direction. I am grateful for her support and her continuous work to help underserved kids, like myself and my friends were, to expand their potentials, reach their goals, and pursue their dreams.

Visualgui 2021 Iteration 1: Recursive

I am proud to introduce the first redesign of this blog for 2021. The layout is still simple. The color is still red, but much more dominating. The focus is still on readability. The typeface is all new. In this redesign, I wanted to have just one typeface—one font file—to rule it all. From large display typography to bold headings to readable body copy to legible user interface to coding samples to small texts, Recursive, designed by Stephen Nixon, takes care of everything thanks to the flexibility of its variable font.

I had the opportunity to work with Stephen on adding Vietnamese diacritics to Recursive in September, 2019. Although I always had the typeface in mind, I didn’t know which project to use it with until Stephen sent me a copy of his book on Recursive in December of last year. The book is filled with typographic beauties and versatilities. It shows all the possibilities of using a variable font. The best part is where Stephen shared his original concept and the meticulous process. I was inspired.

With five different axes to play with, I had a lot of fun redesigning the site live in the browser. Wakamai Fondue was incredibly helpful in testing out different combinations as well as copying and pasting the CSS properties. Even though I don’t blog about coding much, I still love how the coding font matches up exactly with the text font.

I hope you enjoy the new design and thank you for reading.

Trang web tưởng nhớ Mẹ

Trong những chuỗi ngày sống lo lắng, sợ hãi, và đau buồn, tôi nằm trong căn phòng xưa của mẹ mòn mỏi đợi chờ tiếng reo điện thoại của bác sĩ để báo niềm hy vọng. Ngược lại, tôi chỉ nhận được những tin đầy tuyệt vọng. Vì không biết gì về lĩnh vực y học nên tôi không thể làm gì được cho mẹ. Dưới tâm trạng bất lực, việc tôi có thể làm là thiết kế trang nhà riêng cho mẹ.

Thế là tôi bắt tay vào làm. Công việc đầu tiên là chọn lọc những hình ảnh cho mẹ. Xem lại những tấm ảnh mẹ đi nghỉ mát bên Mexico với cu Đạo và vợ chồng tôi, mẹ ôm mấy đứa cháu nội vào lòng, mẹ cảm động trong ngày mừng sinh nhật 80 tuổi, mẹ lúc còn trẻ, bao nhiêu ký ức tràn về. Tôi cười mà giọt lệ tuôn rơi. “Mẹ của tôi có một nụ cười, đẹp như đóa hoa đời rực tươi” (Ngọc Tú Anh).

Tôi kết hợp những tấm ảnh của mẹ được chọn lọc với những câu thơ nói lên tấm lòng của mẹ. Và như thế tôi đã tạo ra 12 tấm băng rôn đủ để làm ra một cuốn lịch 2021 với chủ đề mẹ và đặc biệt là mẹ của tôi. Tôi đã in 3 quyển cho gia đình tôi và hai chị.

Khi tạo trang nhà riêng cho mẹ thì phải viết tiểu sử của mẹ. Tôi viết rất tổng quát về mẹ, như nơi mẹ sinh ra hoặc mẹ thích làm gì trong cuộc sống. Không ngờ bài tiểu sử đó phải sửa lại thành bài cáo phó. Trong đó tôi rất thích câu chuyện người chị họ đã kể cho tôi nghe mấy hôm trước. Tuy câu chuyện rất đơn giản nhưng nó vẫn nằm trong trí nhớ của chị 50 năm qua.

Khi chọn lựa kiểu chữ, tôi nghĩ ngay đến Queens của nhà thiết kế Sebastian Losch. Anh đã tặng cho tôi bộ phông này khi chúng tôi trao đổi thiết kế về những dấu phụ cho ngôn ngữ Việt. Tại sao tôi lại quyết định chọn Queens? Đơn giản là vì trong tôi mẹ luôn luôn là một nữ hoàng, đặc biệt là một nữ hoàng nấu ăn những món miền nam Việt Nam.

Nhắc đến món ăn thì tôi là một trong những người được may mắn thưởng thức rất nhiều món ăn ngon và đảm bảo rất sạch sẽ do chính tay mẹ nấu. Lúc trước có một thời gian tôi viết rất nhiều về những món ăn Việt trên trang blog cá nhân của mình. Vì thế tôi đã chụp được một số hình ảnh của những món mẹ đã nấu. Khi ôn lại hình ảnh những món ăn khiến tôi nghĩ ngay đến kiểu chữ Patrona của nhà thiết kế Ringo R. Seeber. Patrona được thiết kế hướng về ẩm thực. Thế là tôi phối hợp giữa Queens và Patrona để tạo ra một trang nhà cho nữ hoàng ẩm thực.

Sau cùng tôi chọn phông kiểu chữ Saira Extra Condensed của Omnibus-Type để dùng cho những phần cần chữ nhỏ như dẫn đường (navigation) hoặc bản quyền (copyright).

Mời các bạn và người thân viếng thăm trang nhà riêng của Mẹ.

Moved to the MODX Cloud

After the disastrous failure of trying to upgrade MODX, which brought down the Scalia Law website for almost an entire day, I needed to make a move. It was an embarrassment and my reputation was on the line.

I looked into the possibility of moving the site to WordPress or Drupal. The development would be expensive and the migrating process would be long, but we needed to get off MODX or move off a dedicated server I managed.

I presented the options and explained the pros and cons to my supervisor, but she had another idea in mind. She was neither impressed with WordPress or Drupal. Moving almost 1,200 pages to another platform seemed scary and daunting. She suggested that we should look into MODX Cloud. My worries turned into excitement when she made that suggestion. I didn’t think it would be an option because I strongly advised that we move to MODX Cloud a few years ago, but it didn’t work out.

I immediately reached out to the MODX Cloud team and they offered to take care of the migration for us at no charge. In the past few weeks, they worked closely with me to make sure the migration went smoothly. They explained everything I needed to know. They moved and tested our site on their Cloud platform. They made suggestions to improve our site. I was amazed with the level of support they had provided us at no cost. We were more than happy to pay for the business package and a few extra options they offered.

For the first time in almost 10 years at Scalia Law, I feel so good about handing over this part of my job. A huge rock has been lifted off my chest. Server administration was never my strong suit. I rather have the experts taking care of the server and I take care of the design and the development parts of the site. The most stressful part of my job has migrated. I now can enjoy and focus on what I do best for the law school.

The Scalia Law website is now in a good home. Who can take better care of MODX than the creators themselves? The team was a pleasure to work with. Special thanks to Jay Gilmore and Veljko Mirkovic for their patience and expertise. I am so glad that we’ve made the move. Although MODX is small and its adoption is not as popular as WordPress or Drupal, it is still a powerful and flexible content management system. The people behind it are just phenomenal.

A Tribute to My Father

Last night, I put together a webpage in memory of my father. It features photos, a couple of blog posts I have written here, and a video of his funeral. I hope my brother, sisters, and extended family members will send me their photos and written memories of him.

The typeface is the variable version of Piazzolla, designed by Juan Pablo del Peral for Huerta Tipográfica. Piazzolla is a versatile type system with great Vietnamese support.

This is my way of paying a tribute to him. I can always visit him here. He’s not just in my heart and mind, but also in my virtual home. I love you, dad!

Visualgui 2020 Iteration 7: Roslindale

For the seventh iteration of my blog, I reset the typeface using the demo variable font of Roslindale, designed by David Jonathan Ross. Although this version of Roslindale is still a work-in-progress, David would send it to any member of his Font of the Month Club to try out. Of course, I jumped on the opportunity to test it out.

For big headlines, I wanted the ultra style to grab readers’ attention. For smaller headings, I used the bold display style. On mobile devices, body text set in text regular and text italic at 100% (16px). For large screens, I wanted to increase the size to 125% (20px). At this size, the text weights looked clunky and bulky; therefore, I changed to deck narrow regular and deck narrow italic. The deck style reveals less details at larger size. As a result, I am using six different fonts, but only needed one file. That’s the power of the variable font technology.

For code samples, I needed a mono font, but I hardly write about coding. It would be a waste if I had to include a font in my CSS, but would not using it much; therefore, I used Input Mono, also by DJR, for small details such as category, date, and pagination.

New Dean New Vibe

The Scalia Law School has a new dean who comes from business background. His first order of business is to get rid of Mason’s Green, Gold, and Orange. The only color from the Mason guideline that he approves is Bright Blue (#007dc5). Thanks to SASS, updating the color scheme for the entire website was effortless. Replacing one CSS file and voila!

Yesterday, we rolled out an updated logo with Mason’s Bright Blue. All the links and highlighted items are also blue. Our new color palette consists of blue, gray, and white. Maybe I getting wearied of Mason’s Green, Gold, and Orange, but I find the Bright Blue to be refreshing. I also appreciate the limitation of just using a few colors.

I am sure there will be more changes to come, but just changing the color alone makes a difference.

Visualgui 2020 Iteration 6: Bookerly

I changed the typefaces again. For body text, I switched to Bookerly, designed by Dalton Maag for Amazon Kindle. I love how legible Bookerly appears on e-books. I also changed the background from pure white to light grain-like paper quality. I am a lover of physical books.

For the headers, I went with Ballinger, by Signal Type. I had the opportunity to work with Max Phillips on supporting Vietnamese. I really love the black weight for headers. I wanted to use Ballinger’s text weight, but I still hesitated to use sans serif for body copy. Maybe some time in the future.

In the previous iteration, I said that it would be a while before I made the change again and yet it only lasted 4 days. That’s the beauty of having my own site. I can change it up whenever I want to. I love the freedom to write as well as the freedom to design.

The homepage is featuring a lovely illustration of a diverse group of people supporting Joe Biden. I lifted that artwork right off, which is being displayed way too far down on the official website. I wanted to give it more prominent space on my site until Election Day. Go vote for Sleepy Joe so you can sleep better at night knowing a competent, compassionate president taking care of America.