I'm a web-loving, webapp maker kinda guy. Here are a few things I have created for my employers, my freelancing projects and my own personal projects

Archive for the ‘HTML5’ Category

Drag-and-Drop Functionality for Content Management System

VIEW DEMO (prototype source code – jQueryUI to drag and drop elements into placeholders)

Firmsite Publisher is the in-house content management system used by the Thomson Rueters Findlaw division to create websites for law firms and lawyers. Over 10,000 websites are created through this online-based system.

In one of the biggest additions to Firmsite Publisher, my team members and I developed the new feature to add Drag-and-Drop capabilities. This feature is to help our content authors to customize the look of a law firm’s website easily.  I was tasked with all the Front-end development responsibilities.

The core technologies used for this project: Java, JSP, Javascript and jQuery UI’s drag-n-drop library.  My team members and I successfully complete this feature to rave reviews.

 

Category:

Content Management System, HTML, HTML5, Javascript, jQuery

Tagged with:

Responsive Web Design for a dashboard

Screencast shows the same web-dashboard displayed on three different devices – MacBook, iPad, and iPhone

VIEW DEMO (source code – Responsive web design with charts in Sencha EXTJS; source code – A plot chart using HighChart javascript library)

With the increasing popularity of iPads and iPhones, I was asked me to create a web-based dashboard to provide an optimal viewing experience with all their devices – iPads, iPhones, and Macbooks using just a single-code base. I was able to achieve these requirements using responsive web design techniques with HTML5, javascript and CSS3.

The dashboard contains several distinct widgets:
1.) Multiple carousels (swiping of data) responds to both mouse and touch gestures to swipe the card to view additional sets of data.
2.) A slider to select the date and time range. The slider transforms into the standard iPhone time picker when the web-dashboard is viewed on an iPhone.
3.) Sophisticated charts embedded inside of other charts.
4.) Grids to display data
5.) Persistent Web Design techniques to retain user’s viewing settings

In addition to javascript and CSS3. I used the following technologies and plugins:

  • Bryntum Scheduler and Gantt Charts
  • Sencha EXTJS 4.0
  • jQuery
  • jQuery.ContentCarousel plugin
  • Developr theming
  • glDatePicker
  • jQRangeSlider
  • jQuery.blockUI plugin
  • mobiScroll

View the Web Dashboard

Category:

HTML5, Javascript, jQuery, mobile/smartphone app, Responsive Web Design, Sencha ExtJS

Tagged with:

My Toddler Can Learn Names

My Child Can Learn Names

.

VIEW DEMO (source code – Javascript DOM animations and movements)

I have been buying a lot of apps from the AppStore and Google Play Market for my young son. Then I thought, “Hey, why don’t I make my own app?!”

In my spare time, I developed an app to teach my 2-year old son the names of his family members and favorite cartoon characters.

There are apps to teach your toddler animal names, colors, shapes, vehicles… but what about apps to teach your toddler the names of friends and loved ones? This app can teach your toddler the names of his/her family and friends in a fun and easy to play game.

Download the game from Google Play or Play the game online

This educational game was created using HTML5, CSS3, jQuery, Javascript and a plugin to stretch images.

Category:

Game, Graphics, HTML, HTML5, Javascript, jQuery, mobile/smartphone app, Responsive Web Design

Tagged with:

The Jeremy Lin Video Game for your phone, tablet and desktop!


It’s been awhile since I posted something I’ve done. I’ve been doing amazing things at Apple Inc, which has kept me busy. Awhile back, I did begin a project to help me learn all of HTML5 features. I decided to make a Jeremy Lin app that incorporates all of the new and cool HTML5 features. I also wanted this app/website to be responsive. This app should work and look nice on all devices – desktop, smartphone, tablet. Here is my excerpt from the Google Play store,

This is the Jeremy Lin Linsanity Video Game. You decide which play to make and watch your stats increase. Watch hundreds with highlight clips of Jeremy Lin’s NBA career. This app also includes Jeremy Lin’s twitter feed, real-time stats, youtube highlight clips, the Houston Rocket’s schedule, fan photos, news, biography, etc.

Play the Jeremy Lin video game from your desktop, smartphone, or tablet here

Download the Jeremy Lin video game from the Google Play store

List of technologies used in this App
jQuery Mobile – the framework to lay out the pages and dialog box
CSS3 – renders the elements to fit into the various devices
HTML5 Video – no plugins required to view the Jeremy Lin videos and is supported on most platforms with the latest browsers
jPlayerPlaylist – a playlist plugin to watch html 5 videos
Canvas – plots the shots taken by Lin onto the basketball court
Localstorage – keeps track of the player’s stats and saves the stats even after the browser is closed
jQueryTweet plugin – displays the twitter feed from Jeremy Lin’s twitter page
Google News – rss feed of the latest news on Jeremy Lin
jQueryWowSlider – plugin to display the sliding images of JLin fans.
Youtube – video site to watch JLin videos

Category:

Game, HTML, HTML5, Javascript, jQuery, jQueryMobile, mobile/smartphone app

Tagged with:

My Phở app is now available for all mobile devices

Everything you need for the delicious Vietnamese noodle soup, Phở, is in this app.   Quickly get a list of all the Pho restaurants near you and plot them all on a map. Or enter in a city name to get all the Pho places in that city. Also included is a recipe to make your own Pho. View the photo gallery of all the Pho toppings you usually get in a restaurant – brisket, steak, fatty brisket, tai, chin, gau, pho ga, etc.  Finally, an app my parents would use.

For Google Android users, download the app in the Google Play store here and install for free,

https://play.google.com/store/apps/details?id=com.anthonyhoang.phoapp

For Apple iPhone users, use the Safari browser to access the web app here,

http://ahhdesig.w01.wh-2.com/PhoApp/

This app was developed using Sencha Touch 2.0.   Sencha Touch 2.0 is a javascript framework using HTML5/javascript technologies.  The data is taken from Yelp’s Webservice API.  I added Google’s geolocation APIs to plot the restaurants on the map.  The images for the Pho toppings were taken with my Canon t2i and photoshopped by me.

update: There are some pros and cons to using Sencha Touch over other mobile-specific frameworks like jQueryMobile.  I’m currently working on another smartphone app using jQuery Mobile and will have it available soon.

Category:

Graphics, HTML5, Javascript, mobile/smartphone app, Sencha Touch

Tagged with:

My mobile app on the iPhone, iPad, Chrome, Android, Safari.

Task list mobile app on the iPhone, iPad, Safari, Chrome.

Realization is ready to enter the smart phone app world.  Luckily, I’ve been experimenting with it for a while already.  The company now needs to put the task list module of our web-based project management application on the all smartphone devices; iPhones, iPads, Androids, Blackberries, etc.

To get this started, I created a working prototype of our task list with Sencha Touch. Sencha Touch is an HTML5 framework, which makes it possible to use the same code to work on all mobile devices with a webkit browser. This prototype works on the iPhone, iPad, Google Chrome, Android and Safari. The app looks and feels more like a native app than a mobile website.

This app accesses a webservice API.  I created the webservice API with ASP.Net (asmx file). The webservice returns data in json format and then takes this json data and puts the it in a store to display the list.

*update: I see great potential using Sencha Touch as the programming framework of choice when creating mobile apps for all the mobile devices.

Category:

ASP.Net, HTML5, Javascript, mobile/smartphone app, Sencha Touch

Tagged with: