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 iLoveNgocLan.com’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:

ALTER DATABASE MyDatabaseName CHARACTER SET utf8;

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

ALTER TABLE wp_posts CHARACTER SET utf8;

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 iLoveNgocLan.com. 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.

Mavo-Less

I am working on a small website for a freelance project. While all the pages are static, I would like to give my client an easy way to update the news section of the site. Implementing a content management system, such as WordPress or Kirby, just to do that is unnecessary.

Over the weekend, I spent an hour revisiting Mavo, which seems like a perfect solution for what I wanted to accomplish. Developed in the Haystack Group at MIT CSAIL and led by Lea Verou, Mavo allows an easy way to update website content with no backend database and without a single line of JavaScript. I gave it a try a few years ago, but got hung up on creating the JSON file in Github. This time, I set up the JSON file in Dropbox and it worked. I was able to make part of the web page editable. Furthermore, I added TinyMCE to give my client an easy way to update the content.

I was thrilled to see how friendly and intuitive it is to update website content with Mavo. This is something I have wanted for many years to offer to my freelance clients, but I don’t have the skill to develop myself. Unfortunately, the huge disappointment came when I viewed the source code. The content section was blank. When I turned off JavaScript, the content also disappeared on the page. I realized that the content was being injected using JavaScript.

If the main content of the page doesn’t show up when JavaScript is turned off, that is a major accessibility issue. Who has JavaScript turned off these days? I have been trying Safari on my iPhone without JavaScript and the experience has been so good that I am continuing to do so. For the website project, I am back to square one again. I should have known that Mavo is a JavaScript library; therefore, it depends on JavaScript to work. Although I can’t implement Mavo, my time spent was not wasted. It was a good learning experience.

Info