Mason Law Updates

Just rolled out a few updates on Mason Law. Brought back the image slider one the homepage, added more links, tightened up the typography and jazzed up the footer a bit.

While the visual only gets some minor changes, the entire CSS structure is completely rewritten using Sass. I went through line by line of CSS and convert everything into SCSS. Managing CSS with Sass is much easier and much more pleasurable. The more I use Sass the more I appreciate its maintainability. I also reduced to fewer media queries and put more focus on the mobile version.

Hitting and Standing

Dad: Were you being a good boy at school today?
Dao: Yes, I was a good boy. I didn’t hit anyone.
Dad: You’re not supposed to hit anyone.

Dao said to his mom: “Daddy pee pee standing up. Dao pee pee standing up. Can you pee pee standing up mommy?

Our lil Dan is starting to show his effection for others. Every morning I dropped him off at my sister-in-law’s house, he would give his cousin Khoi and hug and a kiss and sometimes a few slaps on the head as well. If I ask him for a kiss, he would do it as well. He’s also starting to copy his brother. He wants the same food Dao eats and the same toys Dao plays.

Launch Nav

In the past couple of months, I have been thinking about redesigning the Mason Law web site. One of the things I would like to accomplish is to clean up all of the menu items. One of the approaches I wanted to explore is having one menu button that would launch the entire navigation system. As I started to look around, Disney is doing it. The problem is that the menu system is not implemented across all of Disney sites. The bigger issue, though, is that the launch nav disappeared with JavaScript turned off.

The new Teehan+Lax site also taking the same approach and having the same no JS issue. Even with the JavaScript turned on, I started to get annoyed rather quickly that I have to make that extra click every time I want to go to another section of the site.

Accessibility wise, the JavaScript dependency is not going to work for a higher educational web site. Design wise, it is not going to get pass my superior. I am actually reworking the homepage to include more links. It is getting way overwhelming. So now I am going to need to figure out a different solution.

Catching Up

Thank goodness for the spring break this week even though I still have to go to work. Things are calming down a bit. I am catching up with most of my school projects. The jazz board game for my seminar class is coming together nicely. I cam’t wait to play it in class. My group project for the Advanced Web Design class is still sketchy, but I have all the core requirements finished. I am in the development stage for the second project. I also whipped up 900-word essay for the class.

As for work, I am concentrating on realigning the Law homepage. We’re bringing back the carousel that is featured on almost every university web site. I was so glad we were done with in, but now it’s coming back.

On the freelance side, I launched two WordPress sites. Still working on a third one. Designed a simple business card for a client. In the process of working on a mockup for another client. Every time I say that I am not taking anymore client work, I get more requests and I hate to turn them down.

Boy, I really need a break. I am exhausted. Oh shit! Google is shutting down Reader. This is probably a good reason for me to stop checking the blogs’ updates.

The Anatomy of Type

Stephen Coles’s The Anatomy of Type:

Just like the human body, the Latin alphabet can take on a surprising range of shapes and proportions. These varieties can come from diverging historical paths, differences in language or culture, or simply the tool used to make the letters—whether it’s a pen, a chisel, or a compass.

This is an outstanding coffee book for type nerds.

PR Whiteboard Launched

Just rolled out PR Whiteboard blog for Matter Communications. I was brought in mainly for WordPress development. I was not responsible for any design aspect of the site. Nevertheless, the design is very nice.

Tùng Dương Hát Tình Ca

What? Tùng Dương sings ballad? Get the fuck outta here. That’s not his style. He’s going to butcher those beautiful standards. Fortunately, his new release turns out to be a wonderful surprise. He can handle ballad like a motherfucking crooner.

Tùng Dương Hát Tình Ca sets off with a slow jazz rendition of “Nhìn Những Mùa Thu Đi” (Trịnh Công Sơn). Half way through, the tempo kicks up a notch for a savory swing. As always, Tùng Dương pours out his heart and soul into the song. His approach, however, has changed. He completely left out his whimsicality. I kept expecting him to freak up the melodies, but he never did. Perhaps he took some clues from Thanh Lam whose ballad singing style was being condemned for over exaggeration.

Tùng Dương is smartened up to know when to refrain himself. His version of “Ngậm Ngùi” (Phạm Duy) is soulful without being theatrical. His use of falsetto is quite good. The technique is similar to what Bằng Kiều loves to apply in most of his performance. The different is that Tùng Dương doesn’t come across like a bitch. Too bad Phạm Duy didn’t get to hear this version before he passed away. He would have loved it.

From “Dư Âm” (Nguyên Văn Tý) to “Rồi Mai Tôi Đưa Em” (Trường Sa) to “Mùa Thu Cho Em” (Ngô Thụy Miên) to “Gửi Người Em Gái ” (Đoạn Chuẩn & Từ Linh) to “Thiên Thai” (Văn Cao), Tùng Dương cuts straight to the emotional core of the lyrics with the support of intimate acoustic accompaniment. While Hát Tình Ca showcases the soother side of Tùng Dương, the album is also a welcoming detour to keep his fans satisfied until his next gig. Word is out that he’ll be in France in May to record an album with Nguyên Lê. That collaboration is going to be a motherfucker of a match.

SVG Slideshow

This site’s homepage is now sporting a slideshow that uses only scalable vector graphics (SVG). The benefit of SVG is obviously the small file size and scalability. My goal is to focus on color and typography for the slideshow to jazz up the homepage as well as to show off client works. I also would like to play around with SVG because I am loving Adobe Illustrator.

After doing my research on how to best use SVG, I decided to support only modern browsers. That way I don’t have to create a PNG fallback for all the graphics. I am all about doing less work, not more. Since this is an enhancement feature, it is ok if legacy browsers don’t get it. Users can still access the blog. I have a dilemma about this whole approach. I am not sure if users on IE and below are lucky that they don’t have to these big graphics or users on modern browsers are being punished with these rich visual. I don’t know.

On the technical side, the slideshow is based off Nivo Slider, the jQuery version. After testing out many sliders, I find Nivo to be the simplest. I also purchased the WordPress plug-in license for a client, but than he decided not to use it so I implemented on the Lancaster Education Foundation.

The WordPress plug-in is very easy to set up, but my main issue is that the plug-in injects quite a bit of unnecessary JavaScripts and CSS into the page. On the other hand, the jQuery version is highly customizable. I was battling if I should use the WordPress plug-in or jQuery for the client and I decided on the former. The main reason is that the client can update the slider herself. As for my own site, I do the updates manually; therefore, I chose the jQuery version, which is free.

The Lancaster Education Foundation is Powered by WordPress

After more than a decade, one of my longest clients, the Lancaster Education Foundation, is moving into WordPress. That means the staff members can now update the site themselves.

I actually made the proposal to use WordPress to manage their contents a few years ago, but they hesitated to do so. Recently they hired a new, young director and she’s quite web savvy. Not only we migrated the content over, we also integrated the blog so she could use the platform to communicate.

The template is based on Twenty Twelve, which looks almost the same as my original design a few years ago, with many details polished and modified. Sass is such a useful tool for changing and compressing CSS without touching the default style.

My biggest accomplishment for this project is to finally handing the key over to the owner for updates.

Jazz App Concept

For the second project of my Advanced Web Design class, I am going to build a simple web app that target jazz aficionados, fans or anyone who appreciates jazz music. The concept is to challenge the player to see if he could recognize a tune in ten second.

The functionality is straightforward. A player taps on the clip to play the music than guesses the name of the tune and who played it. Then he could tap on the answer button to check if his guess is correct. To play another tune, he simply taps on the button that would load up another clip. The game could also be played more than one player. Everyone can make his own guess.

Even though the class project only required a prototype, I am going to build out the app using jQuery Mobile framework. To make the app fun and easy to use, I am keep the interface very simple. There will only be three components: the audio clip, an answer button and a reload button. The audio clips will be loaded randomly; therefore; I would need a simple PHP script and text file to store the data. Another approach would be to use WordPress as a backend management, but that might be unnecessary for the purpose of this project. I am, however, considering developing this concept further and making it into an app that could be placed on Apple or Android app store.

As for the name, I am calling it “Jazzapp.”

Contact