I make websites and web applications. I have worked with many Front End technologies, from basic HTML and CSS to complex JavaScript frameworks such as meteor.js. I am a fan of automated workflows - grunt.js and Vagrant have been such powerful tools that significantly improve my productivity, strip away the mundane tasks and allow me to focus on making decisions that are important to the users. On a daily basis, I go from making static site generators using grunt.js, to coding custom themes and functionalities in WordPress, to building JavaScript applications, and everything in between.

What I enjoy the most about making websites is the deep understanding of the clients and their core business strengths. These insights allow me to decide on how to best construct and present information to the users. Long-term relationship with clients is essential in the web industry, and it is one of the most prized facets of my work.


News site redesign prototype

As a developer at Upstatement, I worked on a custom JavaScript application to prototype a redesign for big regional news website. The app features an infinitely scrolling feed that caters to the power users who want to stay updated with all the news of the day. The feed also includes a content filter to help users who come to the site with a specific topic in mind to easily focus on what they care about.

The prototype features a menu navigation that aims to replace the cluttered navigational structure of the current site and provides users with simpler, more intuitive ways to search for content. Together with a touch-friendly carousel, the menu navigation bridges the gap for users accessing the site from touch devices (such as phones or tablets) while upholds the experience of more traditional, desktop-based browsing.

An interesting challenge while working on this prototype was creating a mechanism for editors to customize how advertisements are displayed on the page. The customization includes the type of ads, the frequency of ads and their starting point on the feed. In addition, it was also critical to the success of the redesign to create a layout that let the ads adapt to different screen sizes. Integrating this responsive ad layout with infinite scroll and content filter was a great exercise of front-end architecture, design and implementation.

After weeks working on the prototype, the biggest insight for me happened when we brought the prototype to test with actual Boston.com users. With diverse user profiles that are typical for site, the feedback helped us re-evaluate assumptions we made in building the prototype, reinforced some decisions about sacrificing content (and clutter) for simplicity, while called into question other novel design ideas that impeded recognition for regular, non-tech savvy users.

Long Hoa

This project is a website made for a non-profit organization who is trying to make a difference in the lives of homeless children residing in Long Hoa Orphanage in Ho Chi Minh City, Vietnam.

Stories told through the lens

Long Hoa needed a place to feature the photo trails of the trips and events organized for the children, in part to attract new volunteers and in part to tell the stories of these young individuals. Starting from a place of compassion and respect, Long Hoa wanted to show how these children live, interact, have fun and grow, just like any other children in Vietnam and around the world.

Integration with Facebook

As the Long Hoa volunteer project had been growing its online presence organically through Facebook, the organizer wanted to tap into and integrate with that traffic. The website promotes and reinforces the Facebook page, while the latter channels potential volunteers and engaged audience to the website for more in-depth content.

In search of meaning

As Long Hoa continues to grow, push and explore its path to fulfill its mission, I am honored to be a part of this meaningful journey. As much as I revel in the intricacies of JavaScript functions and CSS selectors, projects like Long Hoa are what keep me coming back to web development - as a tool to bridge the gap of information, understanding and compassion.

MIT Energy Club

This project was done for MIT Energy Club to help relaunch their program with better integration with Energy Folks, a national network of students and professionals passionate about energy.

Integration as the key

The biggest challenge in implementing this WordPress site is integrating content with the EnergyFolks API. This API supplies events calendar, job postings, blog posts and member listings that are specific to the MIT Energy Club branch. To best incorporate the content provided by EnergyFolks into the original look and feel of the site, I maintain regular communication with the API developer throughout the development process. Human collaboration is very much key in this highly computerized industry.

Flex your responsive muscle

When I start the development process, the Photoshop comps are only made for a standard, 1000px desktop design. Not convinced that a new site being built today should only cater to desktop users, I decide to go out of my way and build responsiveness into the final product. This is no easy feat, especially when the original style decisions are made with a fixed width in mind. What proves to be another difficulty is the content coming from EnergyFolks API having styles embeded in them, again with a fixed-width design intent. Building cohesive responsiveness to the site thus involves breaking down and refining design patterns to make them suitable for any screen size before putting them back together.

Back to the future

Working on this project gives me a deeper insight on how an API should be architected and implemented. With more powerful client-side technologies (templating engines, pre-processors, MVC frameworks etc.), the web is now better positioned than ever before to achieve greater separation between the roles of the server and the client. In order to create more scalable systems, we web developers need to learn how to make more efficient yet simpler web services. HTTP was originally designed to allow machines to communicate with each other through resources (data). As user devices get more powerful each day, it is time we leave the application logic and stylist decisions to the clients. While this is not a new concept, the average developer now has sufficient tools within their reach to make such an architecture viable even for small scale projects.