visualgui

Digital Longevity

Zach Leatherman:

Digital content longevity will continue to be highly variable, depending only in part on the file format used. HTML has existed for about 27 years and I wouldn’t venture a guess to say how much longer it’ll go. I can say that a reduction in ceremony around opening and reading a file is better for that file’s longevity. Relatedly, the ubiquity of software necessary to read a file lends to its future proofing as well. And what software has been historically and continues to be more ubiquitous than the lowly web browser? I’m not sure such software exists.

So feel free to keep creating your content in Microsoft Word or in Markdown or using JSX or Mustache templates or in your WordPress database. But if you want the content to live a full and happy life, publish it in HTML on the web.

HTML rocks!

How to Convert OpenType Font to Web Font

I needed to convert OpenType Font (OTF) to Web Font (WOFF2) and Roel Nieskens kindly showed me how using Bram Stein’s Homebrew web font tools. I want to write this down so I can remember how to do it later.

First, I needed to install Homebrew, which I pasted the following command at my Terminal prompt:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Then I ran these two commands

brew tap bramstein/webfonttools
brew install woff2

Then convert:

woff2_compress /directory/to/fontfile.otf

Magic!

Centering Text

I am fed up with people telling me to center all the text. No matter how many times I explained to them that centered text is hard to scan and not easy to read, they always came back with “the committee wanted the text centered.” Well, fuck the committee. I don’t design for the committee. I design for the intended audience. If the committee wants to make all the text centered, it should design it itself.

Sometimes I just want to give in and get the damn job over with, but it irritates the fuck out of me. I don’t want to be an asshole, but I hate seeing a piece of crap. There, I just need to get it out of my system.

Be Your Own Boss

I started to listen to WorkLife with Adam Grant last week and the episode on “A World Without Bosses” struck a chore. To be your own boss, you need to work for yourself. With a family to feed and my sans-savvy business skills, working for myself is not an option. Fortunately, I have built a responsible, reliable reputation for myself that I can be my own boss in an institution.

My boss has given me the complete freedom to do my job. I have earned her trust to make my own design and technical decisions. I still run them by her, but she lets me make the call. I work directly with members of the law school community as well as the people outside. The freedom allows me to balance my work and life. I take complete ownership of all my responsibilities. For example, I don’t mind making an update to MODX in the middle of the night when no one is using the system. Likewise, I can take time off when one of my kids got sick.

Flexibility is the key to employee retention. With three kids and one more on the way, flexibility is crucial to me and my family. I cannot work in an environment that lock me in from 9 to 5. I had been there before and I was miserable and depressed. I do not want to go back to that.

Before I was promoted to Director of Design and Web Services, I was interviewed for another position. When I asked about flexibility, the new supervisor told me that she can be very flexible but I have to earn it. That’s fair and I understood her perspective, but I didn’t have a year to build up the trust. One of my kids would probably needed me the second day on the job. How am I going to earn her trust? When she made the offer, the salary was good, the people seemed nice, the job was not bad, but the flexibility had me worried.

I thought about it some more and decided to talk to my current boss. I was honest with her about the whole situation. She understood and valued our working relationship. She not only promoted me, but also matched my new salary with 10 percent more. I decided to stay and turned down the new job. I am glad that I talked to her. My wife and I were pleased that I stayed.

My boss also promised to get me a part-time web developer and she did. He has been helpful in taking care of daily requests, which allows me to focus on bigger projects. I want to get him to the point where I don’t have to send him tasks. I would like him to take ownership of his responsibility just like what my boss has done for me. My goal is to improve our web experience by making pages load faster and more attractive. When requests are low, he can find issues to work on such as cleaning up pages with spaghetti markups or creating new banners. I would also love to see him initiates projects that are beneficial to our sites. We are not quite there yet, but I really appreciate his contribution so far.

Susan Kare Who Gave the Mac a Smile

Alexandra Lange writes about Susan Kare in The New Yorker:

What Kare lacked in computer experience she made up for in visual knowledge… She also designed a number of the original Mac fonts, including Geneva, Chicago, and the picture-heavy Cairo, using only a nine-by-seven grid.

Kare is a legend.

Computers in Libraries 2018: Day 1

I always have a mixed feeling about the annual Computers in Libraries conference. In past years, I hardly found the presentations inspiring. Many of my colleagues probably felt the same; therefore, most skipped this year. I was not planning on going either, but I changed my mind at the last minute before the discount ended. With the group rate and membership discount, the admission is quite cheap; therefore, I don’t feel so bad. Although the venue is in Arlington, Virginia, I get to get away from the office for a few days.

For the first day, I sat in most of the presentations on UX and digital presence. In the first presentation, “Creating Engaging Content Strategies for Maximum Impact,” I had no clue what the speaker what talking about. Followed by “Custom Data Rich Websites Using Information Architecture,” which is another boring talk on Drupal. After lunch, I was half zoned out on “Iterative Design: Users in Learning Object Development.” Worse was “Website Design Winners & Losers!” The title alone made me cringe.

After being fed up with boring web talks, I switched to a different track. Learning about Dash and Dot robotics for the first time excited me. It seems like an excellent way for kids to learn to code. Đạo’s birthday is coming up. I am thinking of dropping $280 on Wonder Workshop Dash & Dot Robot Wonder Pack for his present. It’s not cheap, but it is more useful than buying him Lego. With Lego, he would spend an hour or two building, but Đán and Xuân could just break it in a second.

For tomorrow, I will try to attend presentations that I don’t know anything about.

Gutted Google Analytics

After many months contemplating, I pulled the plug on Google Analytics last night. Although GA is not as intrusive as other trackers, I no longer want to keep track of my visitors. I don’t know how many of you are reading this site, but I respect your privacy. I have done nothing with the data GA collected and I have not checked my traffic for a long time.

I would love to know my readers (you can contact me any time), but I am also fine not knowing. It’s a personal blog after all. I write what I want to write and you read what you want to read. We can keep our relationship that way. It’s all good.

With all the in-your-face ads and snooping scripts all over the internet, I would like to provide you a place to escape. When you come to my site, you can read and leave. If you enjoy what I write, you can come back. That’s it. I want to help make the web a friendly place to visit again. I also want to comply with the General Data Protection Regulation (GDPR).

In addition to this blog, I gutted GA on my portfolio site, Vietnamese Typography, and Professional Web Typography. Now you can read and browse these sites without being tracked.

Build a Static Blog with Mavo.io

In a three-part video series, Brian Haferkamp walks through the process of building a static blog using Mavo.io. Part three is particularly helpful to see how Mavo.io works. I need to learn this new tool to build websites that will allow clients to update their own content with ease.

Grid-Gap Issue

I had an issue with the grid-gap CSS property when I redesigned this blog last year using CSS Grid. The gaps don’t work as I had expected. Take a look at the demo on CodePen.

Four equal columns:
grid-template-columns: 1fr 1fr 1fr 1fr;

Three columns where the middle column is doubled:
grid-template-columns: 1fr 2fr 1fr;

In a grid layout, I expect the columns and the gutters to line up correctly. The middle column (B&C) on the second example should match up with column B and column C in the first example, but they don’t. They are a bit off. I don’t think this is bug. Browsers just interpret grid-gap as gap in between the columns; therefore, they don’t know that column B&C, which has 2fr, should include a gap just like column B and column C in the first example. Am I missing something? If you understand the issue, please let me know.

Update: Ngô Thiên Bảo tweeted the solution. This is all I need:

grid-column: span 2;

I can’t believe I did not know that. Now I know.

Simple Content Management Solution

After writing “Web Design Doesn’t Have to be Complicated,” I had one designer asked me what CMS solution I offer to clients. Here is my somewhat long answer.

I use MODX and WordPress everyday at work. As much as I appreciate the “creative freedom” of MODX, it is way too complicated for a simple website. Standing up MODX is not quick and easy. Creating templates and user roles can be daunting. Updating MODX is not straightforward either. For a higher education website like Scalia Law School, MODX is perfect. For a small, brochure site, it is way overkilled.
MODX is

WordPress is simpler and its automatic update is still unmatchable in any CMS. Installing WordPress is not too difficult even though a database is needed. WordPress has increasing becoming complex over the years. Creating a theme is no longer quick and easy. WordPress is still great for blogging (like this blog), but it is still too heavy for a simple website.

My ideal solution is a dead-simple CMS that allows my clients the ability to update the text and nothing else. They can’t mess with the design, fonts, and inline CSS. They don’t even need to add a new page or new image. I can take care of those for them. If I can create static pages (using PHP includes and simple functions) and only have the main text area editable, that would fantastic. If you know a CMS that does only that, I would love to learn more.

I have been keeping an eye on Mavo developed by Lea Verou. It seems like the solution have been looking for. Unfortunately, Mavo is still in beta; therefore, I am not sure if it can be used on live site. I read the documentations, but I don’t quite understand how storage works. I tried to reach to to Ms. Verou, but her email isn’t working. I also hesitated to bother her.

With a recent project, America: The Unknown Country, I created a static website for my client. At first I thought it was a launch and done deal, but the client had requested many text updates. While I don’t mind doing it, I don’t want to keep charging him for something he could do himself. He asked me to teach him to do the updates himself. I don’t mind teaching him HTML and FTP, but I don’t think it is a simple solution either.

I finally decided on Kirby. I have used Kirby in a previous project and what Kirby offers is very closed to what I have in mind. Setting up Kirby on my local machine is simple. I just drop Kirby into my MAMP environment. If you have PHP 5.4 and above, you are ready to go. You don’t need to mess around with setting up the database. The documents are well-written and easy to follow. For example, setting up a simple contact form takes 10 minutes.

With Kirby, I can still design just like the way have done with my static site. Kirby works with my design rather than me trying to my way around Kirby. The magic of Kirby is moving your final site from your local machine to the client server is as simple as uploading the entire project directory. The key attraction of Kirby is the Panel, which allows clients the ability to update the content without messing up my design. Updating Kirby is fairly simple. You just need to replace two directories: kirby and panel. Automatic update (for minor releases) would be fantastic for Kirby.

Kirby is not free, but affordable. As of this writing, a personal license costs $17 and pro license costs $89. I have no problem covering the cost of the license for the clients. What I like about Kirby’s model is that I don’t need to pay until your site goes live. I can download the full version to develop offline and I can pay when the site is ready to launch. So far I have developed two sites using Kirby and I will definitely offer it to future clients.