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

Posts tagged ‘self-developed’

My new Fitbit Ionic watchface

When Fitbit purchased Pebble in early 2017, I had a feeling it was to woo pebble developers to a potentially new Fitbit smartwatch. I worked with me. I bought the new smartwatch, Fitbit Ionic, on the first day of its retail release.

In my spare time, I play around with the Fitbit SDK to create apps and watchfaces for the Ionic. The Fitbit SDK is based on Javascript and SVG. Although there are some limitations to the hardware and SDK, it’s been fun to play around with creating new watchfaces. Above is one of the watchfaces I created.

Advertisement

Category:

CSS, Graphics, Javascript, smartwatch, SVG

Tagged with:

A Webscraping WordPress Plugin

I wanted to create a sports-related website with a custom-made WordPress plugin and show game schedules for my timezone.  So, I created Gamewinner.tv .  It is a fully automated sports streaming website showing live streaming games ranging from football games to soccer games to even Ultimate Frisbee games.

I coded the WordPress plugin used in the website to automatically scrape other websites for streaming links and game schedules. I also added Javascript code to dynamically display the correct game start times based on the end user’s timezone. 

What helps is there are niche sport leagues hoping to get more exposure through streaming their games live for free.  If you’re looking to watch athletes dive for a frisbee, this website is your you!

UPDATE (2017): planning to sell this site

Category:

Content Management System, CSS, Graphics, Javascript, PHP, Wordpress

Tagged with:

Drupal CMS Websites

I have experience in WordPress and thought I add some experience in another Content Management System – Drupal.

Drupal doesn’t have as many plugins as WordPress, but Drupal was easier to port to other web accounts.  And the Drupal admin dashboard was also a bit more intuitive.

I created several Drupal websites for my own personal knowledge.  With my love of sports, I created a website of an NFL quarterback,  http://www.MarcusMariotaMania.com

 
UPDATE(2016): I have stopped renewing the MarcusMariotaMania.com domain name.

Category:

Content Management System, Drupal

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:

Facebook login integration, Paypal transactions, Google language translations, Javascript snippets, Memberships

Have you ever wanted to learn how to invest in stocks? If yes, you’ll need to learn chinese 🙂

So a couple months ago, a former work colleague and friend asked me to start the development of a website for him. He’s taken a successful English-based website and created a website for Chinese-speaking investors. His website is now live at www.5168options.com

His website is basically a free and paid membership-based content management system. Users who pay for the membership are given access to highly informative and frequently updated content. He needed a quick, yet working mock-up of the site to present to his inner circle.

I created his website using Dreamweaver as the developer environment. I included the Facebook login integration into the site for a more user-friendly experience. The paid transactions are done with Paypal’s e-commerce Merchant Services. The language translation between Chinese Simplified to Chinese Traditional was done with Google’s Website Translator. ASP and Access database stores the user login data and memberships. And the stock ticker is simply a javascript snippet.

update: due to time contraints I have relieved myself from the day-to-day maintenance of the site.

This is a test

Category:

ASP Classic, Database, Javascript

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 web-based customer support portal!

web-based customer portal

The Realization technical support team needed a way to streamline their processes with customers using a web-based application. They occasionally conduct workshops and learning sessions and needed a way for our clients to register for these classes. The IT team also needed a way for certain clients to be allowed to download files and software releases. It was my responsibility to come up with a design and take it to completion.

I created this web application using ASP.Net with SQL Server as the database. The application administrator section allows the admin to add/remove workshops, upload files for users to download, and set the user’s permissions.

Realization Customer Support Portal

Category:

ASP.Net, Database

Tagged with:

ChartFX can’t do it? Don’t worry, I can.

The chart is an image, the data grid is html

SoftwareFX’s ChartFX component is very useful in displaying so many different charts and in so many different ways. However, the current version of ChartFX lacks the ability to display a grid of data alongside with the bars in the chart. Instead of whining and crying about it, I came up with a solution.

Using HTML, I overlayed a grid on top of a chart and I was able to display the  grid of data, coinciding with the chart’s bars. With some improvisation and hard work, this idea worked like a charm.

*update: The newer version of ChartFX, ChartFX.Net, now comes with a grid data, but doesn’t work very smoothly. I created another version of this chart data grid for the .net version with scrolling data.

Category:

ASP Classic, HTML, Javascript

Tagged with:

A web-based chart made only with HTML? No way?

This chart was made with only HTML!

What do you do when you need to make a report with bar charts, columns of data, panning dates, expandable sub-rows, and absolutely with no plugins are allowed? You do it in HTML, of course. This… was my task.

Because we have clients who are part of the US government and have very strict rules on what is allowed to be installed on government computers, I had to come up with a way to fulfilled specs without the use of any plugins. I was able to accomplish this feat with alot of DHTML and Javascript. I don’t believe there is any other report on the planet that looks like this.

Category:

ASP Classic, HTML, Javascript

Tagged with:

Tree navigation done with javascript

Tree structure

Realization’s Concerto application is a web-base project management software that is packed  full of configurable options, so much so it’s impossible for a normal human being to remember them all. There are configurations to change every text, to set the default sorting criteria, the columns to show on a particular report, the columns to show on a print preview screen, the default filter selections, and so on. You get the point.

To navigate through all these different configurations for each and every report, I created a tree navigation system using Javascript. The tree navigation allows users to easily access a report’s configuration based on the user’s knowledge of the report’s location in the web-app. The display and saving of the configurations was done with ASP.

Category:

ASP Classic, Javascript

Tagged with:

Baseball.net 2K2, multi-player online game, coded in Java!

Baseball.net 2K2

My love of sports motivated me to make the first multi-player online baseball game. It was an ambitious dream but a good way to learn and master Java. Although the user had to install a Java Applet Player, this game – in theory – could be played on any platform.

This game is a multi-threaded game with several panels on the main screen. The main screen has the game action; the pitcher vs batter. The game uses real MLB player names and statistics. The other panels includes real-time, play-by-play, current game stats of batters and pitchers. An additional panel for the chat session is available when playing online against another player.

A user has the option to play with game with the mouse or the keyboard. Two players can play at the same time using the same keyboard. However, playing against another player online was deemed difficult as the latency time to transfer the actions of one player to another player over an internet connection was too slow for a fast-paced action game. The most difficult aspect of coding this game was displaying the baseball’s projection (curves and bounces). A lot of math equations were used. 😉

Category:

Game, Graphics, Java

Tagged with:

My first e-Commerce site! Buy your Metabolife now!

my first e-Commerce and ASP site!

A high school buddy and I decided to dabble in eCommerce. He is somewhat a medical expert and I am somewhat a technical expert so I took on the task of creating an eCommerce website for us. Our website allows consumers to buy Metabolife and other supplements through an online store.

This was my first time using ASP to create an entire website. With ASP I was able to construct a shopping cart feature and use SQL to store our orders in a database. The orders are processed through a 3rd party merchant. 

We launched the website a couple weeks after my college graduation and called it SynergyCommerce.

*update: SynergyCommerce was short-lived but was great for my continuing self-education.

Category:

ASP Classic, Database, eCommerce, Graphics

Tagged with:

VSA@UCI First Website

Vietnamese Student Assocation website

The Vietnamese Student Association’s president asked members if any of us would like to volunteer to create a website for the club. Excited to show off my new HTML skills, I quickly volunteered.  I wanted to make the first ever VSA website at the University of California at Irvine! The specs were quite simple – make a website to let viewers see the calendar of events, the name list of club officers, and the club’s mission statement.

I created the website using HTML. Javascript was used for the awesome mouse-over effects on the links (edit: hey, it was very cool at the time). And I crafted the graphics using Adobe Photoshop.

VSAUCI.com
*update: The VSA-UCI website has seen many new students and changes since it’s original creation.

Category:

Graphics, HTML, Javascript

Tagged with: