03-18-2013
tinhnguyenlonghoa.org has finally launched this past week.
It is my first work for a non-profit, and I am very proud to do my part and help out a friend. I’ve known Minh, the project director, for a while. We did a community service trip in Vietnam together more than 4 years ago, not too different from Long Hoa. Since then I’ve gained a lot of respect for him and his dedication to community service.
This site features a simple, minimal design with a focus on pictures as a way to tell the story. Here are some nice aspects of the site:
- Simple, minimal and responsive design.
- Responsive image sliders integrated with lightbox – I want the audience to be able to easily browse through the images – the main assets of the site – and at the same time look at them in more details.
- Integration with Facebook, including a Like box and Comments. The project’s Facebook page has been the main driver for social outreach, and it should continue leveraging that strength.
- Friendly content management backend, relying on the powerful WordPress admin, coupled with Advanced Custom Fields and other great plugins.
This is also my first site in Vietnamese, which imposes an interesting restriction on fonts. There are only 3 fonts from Google Web Fonts that fully support the Vietnamese characters. I lucked out as Open Sans, my favorite font, supports the Vietnamese language.
Working with Minh has been a very pleasant experience. He is always on top with his part of the project, providing content and images very early on. This allowed me to have a good grasp on the content and design to maximize their impact. He is also flexible in working with me in developing solutions for various ideas.
There are certain areas of the site that could be further optimized/ revisited for better performance and user experience. Hopefully these will be tackled on soon as the site gains more traffic and has more user testing.
This site is also the first to be hosted with pagodabox (wow! there are many firsts with this project!). I really like the object-oriented approach to hosting and the version control (git) built in from the start. However, I had to jump through a few hoops to get WordPress working correctly on there, such as configuring writable directories, syncing with local development (.htaccess for permalink) or WP Super Cache plugin – these warrant their own post.
Enjoy looking through the site (my apologies in advance for the cryptic and weird Google Translation – Google definitely needs to work on their translation machine for English – Vietnamese) and let me know if you have any suggestions/ comments.
02-18-2013
To make a HTML form easier and friendlier for users to use, HTML5 incorporates quite a few new input types. While url, tel and email types have been quite useful when using a mobile device (special keyboard layouts), I find the biggest pain point is with input date and time. Most of the times you don’t know what format to input the date in (month first or date first), whether you should use dash versus slash, whether you should include the year etc.
Many solutions have been used to solve this problem. jQuery plugins datepicker and timepicker are really helpful on desktop. Mobile browsers have done a good job using native date and time picker (Android and iOS) when the input type is specified.
How do we combine both of these solutions to create a single responsive web form? The answer is really simple.
My first response was to just call the datepicker() method on any and all input[type=date] elements.
jQuery( document ).ready( function( $ ) {
$( 'input[type=date]' ).each( function() {
$( this ).datepicker();
} );
} );
There is a few problems associated with this:
input[type=date] does not work very well with datepicker. That means whatever value you select using the datepicker will not be registered on the input field.datepicker() is not very useful on mobile devices. The pop up window isn’t the most user friendly thing.
In order to solve these two problems, the answer would be to:
- Use
input[type=text] on desktop as well as call datepicker() method.
- Use
input[type=date] on mobile (touch-enabled) devices and not call datepicker().
This can be achieved using Modernizr to detect whether the device is touch-enabled, and JavaScript to swap out the input[type=date] element with one of type text.
This could be done with the following snippet:
if ( !$( 'html' ).hasClass( 'touch' ) ){
$( 'input[type=date]' ).each( function() {
$( this ).clone().attr( 'type', 'text' ).insertAfter( this ).datepicker().prev().remove();
} );
}
This code basically copies the input element, converts it to input[type=text], calls the datepicker() method on it and then removes the previous element.
Admittedly, this method seems like a bit of a hack. At least it will be until jQuery UI datepicker plugin is updated to work with input[type=date]. After that, we can just use Modernizr to selectively call it on desktop browsers without having to do the whole copy and remove business.
Give credit where credit is due: the clone/ remove code is not originally mine. I found it on stackoverflow. I modified it a little bit to make it work with my situation.
Here’s a codepen I set up to demo this.
The example I’ve used is for datepicker(). timepicker() should also work in a similar way.
02-10-2013
That awesome feeling of a 3 day weekend when its only Saturday and it feels like Sunday, aka the most miserable day of the week in my book, and you realized you still have one more day at home.
While most people hate the blizzard and the snow, I actually kinda love it. I’m a little sad now that all the snowing is over. I love waking up in the morning and see everything covered in snow. I guess I’m one of those rare people who genuinely love winter and the snow. And yes, I do a lot of shoveling too today, and more tomorrow, and I actually don’t seem to mind it.
It is now officially Vietnamese new year, aka Tet! Although sometimes I wonder if it counts to wait till Eastern Time, since the lunar calendar is only used in Asia.
At any rate, Happy New Year to everyone! Have a safe, peaceful, prosperous and blessed year of the snake!
01-29-2013
In this video, John Cleese explains how we all can achieve some creativity in our daily life, and does so with a great sense of humor and conviction. This is perhaps one of the best speeches I’ve listened to this year (and considering that January is only closing, there’s not much competition). As one of the commenters said, if this was on TED, it would be one of the most popular one.
Some of the great ideas I gleaned from watching this, although to be honest any sentence said by him in this talk is quote-worthy, including the lightbulb jokes, are that It is easier to do small things we know how to do that are urgent than to do big things that we’re unsure of, like thinking and Some of the most creative people are able to stick with a problem longer and deal with the discomfort, than those who are supposed to be “decisive”. These ideas resonate well with me in my daily life.
P/S: You can’t help but like a guy who has such a cute and cool website www.thejohncleese.com. The best part is that it was made with WordPress too!
