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

An Angular 4 (+Boostrap) web application I coded myself

Jan 2018

See AnthonyPlaysFrisbee.com

This is a fun website I created for myself and my frisbee teammates to consolidate all our video highlights and stats onto one web app. This web application was coded by myself using Angular 4 and the css framework, Bootstrap. The skills I used for this website includes: Typescript, Javascript, jQuery, CSS, Photoshop, JSON API Rest Calls.

The AnthonyPlaysFrisbee.com website shows the power and speed of Angular. On the left side bar is a list of dropdown select boxes, when a dropdown item is selected, the filtered data is shared across all the other webpages(components) as well. (ie, the filter selections do not have to be reselected if you were to leave the home page)

Some of the Angular-specific terminology I used in this app: Observables, Pipes, Components, Routers, ChartJS, Behavior Subject (to pass data between components).

Advertisement

Category:

Angular, CSS, Javascript, jQuery, Typescript, Video

Comments Off on An Angular 4 (+Boostrap) web application I coded myself

Tagged with:

Redesigning a website for better conversion rates

Nov 2017

Sometimes less is better for increasing the conversion rates of a website.   At Findlaw, we redesigned the Lawyers.FindLaw.com website to a more modern and more mobile-friendly website.   In our user tests (we sent half the users to the newly redesign and the other half to the old website), we found the new website were generating better conversions.

I was one of the Front End developers who worked on the redesign of the Lawyers.Findlaw.com website. My task role involve the creating the main search box on the main page of all the websites involved. This javascript-heavy component used ajax techniques to dynamically populate the acceptable search terms and locations (from Google Maps).  In this project, the website was based on JSP and XSL templates and we used the Zurb Foundation as the base of the CSS classes.

 

Category:

CSS, Javascript, JSP, Responsive Web Design

Comments Off on Redesigning a website for better conversion rates

Tagged with:

My new Fitbit Ionic watchface

Oct 2017

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.

Category:

CSS, Graphics, Javascript, smartwatch, SVG

Comments Off on My new Fitbit Ionic watchface

Tagged with:

A Webscraping WordPress Plugin

Apr 2017

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

Comments Off on A Webscraping WordPress Plugin

Tagged with:

SVG Charts in Angular 2

Nov 2016

VIEW DEMO (source code – d3 and svg prototype used for Angular 2 app; source code – dynamically load d3 chart with json data)

I have created more charts than the number of fingers I have.  I have also created various charts using different technologies and libraries. This time, I get to dabble in Angular 2 and create charts using SVG and Javascript.   It’s more time consuming to create SVG charts, but you do get more flexibility to make charts that don’t exist in any of the other charting frameworks.

 

Category:

Angular, Javascript, SVG, Typescript

Comments Off on SVG Charts in Angular 2

Tagged with:

Cal Ranch Foods and their Walnuts

Aug 2016

I created the CalRanchFood.com website.  I took the mockup from a design firm in Southern California and created the website in WordPress.  I then edited the images, PHP, and CSS to mimic the mock up.

One of the perks of this project was getting a box full of nuts and fruits.  They really do make the best walnuts you can eat.

 

Category:

CSS, Graphics, PHP, Wordpress

Comments Off on Cal Ranch Foods and their Walnuts

Tagged with:

The Dolan Law Firm and WordPress Plugins

Aug 2016

If you ever listen to the local SF Bay Area sports radio station, KNBR 680, you may often hear a commercial bit with the slogan, “The best lawyers you hope to never need” and their website, http://DolanLawFirm.com. Well, it is me who created the Dolan Law Firm website!

The law firm had requested to move their html-based website from the Firmsite Publisher platform to the WordPress platform.  This was a monumental task because this Law firm had over 10K articles and 200+ categories to migrate over to WordPress.

I was the main developer for this project and with the help of an intern, we were able to complete this project in 3 months.   Using my prior WordPress experience, I found ways to reduce the development time by creating scripts to automate certain tasks.

In addition to migrating the articles and categories, I was also responsible styling the layout, photoshopping all graphics and icons, as well as code additional WordPress plugins.

 

Category:

Content Management System, CSS, Javascript, PHP, Wordpress

Comments Off on The Dolan Law Firm and WordPress Plugins

Tagged with:

Drupal CMS Websites

Sep 2015

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

Comments Off on Drupal CMS Websites

Tagged with:

Moving a website with 500K views a month to another CMS

May 2015

When you have to completely redesign a successful website with 500K+ views a month, what do you have to think about?

The most important factor is to keep the website successful.  In many high-traffic websites, this often times require all SEO factors of a website to remain intact.

There was a requirement to move the jsp-based Findlaw.co.uk website into a WordPress website.   I was the sole developer task with porting this website (along with all 3,000+ pages) into the WordPress CMS.

I had to come up with a plan to programmatically copy all the pages and articles from the old website into a format that can be easily imported into WordPress.   I also had to retain all URLs and SEO tags are identical to the old website.

I was able to successfully complete this huge project in 2 months and keep the traffic steady.

UPDATE(2017): The FindlawUK division is no longer being maintained. 

 

Category:

Content Management System, PHP, Wordpress

Comments Off on Moving a website with 500K views a month to another CMS

Tagged with:

Drag-and-Drop Functionality for Content Management System

Oct 2014

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

Comments Off on Drag-and-Drop Functionality for Content Management System

Tagged with:

Animated Live Wallpaper for your Android phone

Aug 2013

Here’s a Live Wallpaper for your Android smartphone. It’s an animated video of the Bellagio water fountains in Las Vegas. The video runs in the background on your phone’s home screen.

The video used for the live wallpaper was taken by myself with my Canon DSLR. Then edited in Apple’s iMovie.

Get the wallpaper here,
https://play.google.com/store/apps/details?id=com.anthonyhoang.bellagiohotellasvegaslwp

Category:

Graphics, mobile/smartphone app, Video

Comments Off on Animated Live Wallpaper for your Android phone

Tagged with:

Responsive Web Design for a dashboard

Mar 2013

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

Comments Off on Responsive Web Design for a dashboard

Tagged with:

UI/UX Design of a Content Management System

Feb 2013

GBIHelpScreen

In this month-long project, it was my task to come up with a new design to an existing website. The goal was the make the User Interface clear for users and the User Experience easier to use.

I conducted interviews of End Users to gather their pain points and requirements. The information from the interviews helped me to design a new UI for the website which I displayed in a comprehensive wireframe. I’m proud to say, my UI/UX designs were very well received by the end users.

Category:

Graphics

Comments Off on UI/UX Design of a Content Management System

Tagged with:

My Toddler Can Learn Names

Jan 2013

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

Comments Off on My Toddler Can Learn Names

Tagged with:

Trees! Trees! Trees! But not the kind of forest you’re thinking of

Nov 2012

.

VIEW DEMO (source code – display of tree nodes and child node expansion)

Normal people think of trees as those green living things with branches and leaves. Computer Programmers think of trees as something completely different. (although computer programmers should be considered normal people too).

I made this mult-tree webpage for using jQuery and the plugin treeTable. Using JSON data from a webservice, I generate a table using the old <table><tr><td> tags with their corresponding parent ids. Then I plug in the treeTable — and POOOOOF — the tree appears. It’s that easy.

Category:

HTML, Javascript, jQuery

Comments Off on Trees! Trees! Trees! But not the kind of forest you’re thinking of

Tagged with:

Web-based Compare/Copy tool

Aug 2012


(actual data has been removed and replaced with fake data)

VIEW DEMO (source code – duplicating form field values and DOM contents)
This is one of the many projects I worked on at Apple. I made this web app for Apple using Javascript and jQuery.

If you’re familiar with programming and doing a code-difference on the changes you’ve made to your code, you’ll probably notice some similarities to this web-based tool. This tool basically shows the difference between two sets of data and allows you to copy one set of data to the other. There’s more to it, but let’s not bore you too much.

And oh! If you resize your browser, the web app will resize itself to use the most space as possible… because I just hate white empty space.

Category:

HTML, Javascript, jQuery

Comments Off on Web-based Compare/Copy tool

Tagged with:

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

Jul 2012


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

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

Tagged with:

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

Jul 2012

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

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

Tagged with:

My Phở app is now available for all mobile devices

Apr 2012

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

Comments Off on My Phở app is now available for all mobile devices

Tagged with:

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

Jan 2012

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

Leave a comment

Tagged with:

A dashboard full of charts and reports.

Nov 2011

Our new dashboard feature was presented at our annual conference, Project Flow 2011, to rave reviews! Project managers and executives who use our web-based software once had to scour through several charts and reports to see the information they need for the day. However, with the new dashboard design, most of the essential information can be seen on one screen.

The charts are generated using a 3rd Party add-on called ChartFX.Net from SoftwareFX. I used jQuery to populate the widgets with data. jQuery was also used to display enlarged widgets in a modal dialog box. All the widgets were generated with ASP.Net code.

*update: The dashboard feature was officially released to clients on Dec 13, 2012.

Category:

ASP.Net, jQuery

Comments Off on A dashboard full of charts and reports.

Tagged with:

My app game works on my Android and iPad!!!

Sep 2011

Find the Differences game for smartphone devices

I’m ecstatic to announce my mobile app game works on both my Android and my iPad!!! It’s a somewhat educational “Find the Differences” game.  Spot all the differences between the two photos before time runs out, in this case – before the crab bites the mermaid, and you’ll get a brief summary, fun facts and tourist information about the beach displayed.  This is the “Beaches” edition with photographs of various beaches over the United States.

I developed my game using Flash with Actionscript code. Using the exact same code, I’m able to make the same app work on both Google Android devices and iOS devices. To do this, there were some changes required to the dimension of the app and images but the Actionscript code remains the same. I snapped all the beach photos myself with a Canon t2i camera and used photoshop to created the differences in the images.

Free Download: https://play.google.com/store/apps/details?id=air.FindDifferencesBeaches

*update: As of Jul 2013, there has been 70,000+ downloads of my game from the Android Market.

Category:

Flash/actionscript, Game, Graphics, mobile/smartphone app

Comments Off on My app game works on my Android and iPad!!!

Tagged with:

My first smartphone app!

Apr 2011

Android app using flash

Creating a smartphone app is exciting and rewarding. Not only do I get to be creative, I can also share it with people around the globe; put it right in their hands! Umm, if they own a smartphone, that is. haha  Anyway, I decided my first foray into the mobile app world would be an app with which I could display my photography.

This app was developed using the latest version Adobe Flash Professional v5.5. This version comes with the Android app packager as well as the iOS packager. Essentially, this means the same Flash app can be packaged as a native application for either the Google Android Market AND Apple’s AppStore. For my app, I implemented all the cool things a phone can do… swiping through each photo in the gallery, two-finger zoom in and out, saving the photos directly to your phone, watching videos, and using your phone’s email client to contact me.

Link to my app on the Android Market – (link to my app on the Apple AppStore coming soon)

*update: As of Dec 2011, there has been 5000+ downloads of my app! (without ever marketing it).

Category:

Flash/actionscript, Graphics, mobile/smartphone app

Leave a comment

Tagged with:

Watch out! I can turn you into a cartoon character!

Dec 2010

Creating cartoon characters isn’t as simple as some may think. I’ve recently been interested and picked up some skills in creating a cartoon image from a real photograph.  Let me tell you, it is very involved and time-consuming.  This is a cartoon image is one that involved a 25-step process which took 3 hours to complete. I crafted the image using Adobe Photoshop – shows how powerful Photoshop can be.

Category:

Graphics

Leave a comment

Tagged with:

My UI design has been given a patent!

Aug 2010

Patent

The most commonly used feature of our web-based software is officially granted a patent today. I was one of three developers who worked on this feature. My responsibility was to come up with the UI design and develop it. The summary on the patent says,

A method on a computer for providing critical chain-based project management is disclosed. The method includes receiving at least one project plan for a project comprising a plurality of task and calculating a task priority for each...

The summary goes on and on… in other words, I created something very complex and we don’t want anyone else stealing our ideas.

My patents,

*update: If you want to read the entire summary, I now have a framed plaque with the patent to show you! Yay!

Category:

ASP Classic, Database, HTML, Javascript

Leave a comment

Tagged with:

Photography and Grahics Design

Apr 2010

So I’m not all about just charts, reports and data. Those things make-up the my useful side but do little for my creative streak… and new creative tools.  My new Canon t2i DSLR has allowed me to explore the world of photography and image editing.  After many hours spent editing and reworking photos, I now have a much better understanding of Adobe Photoshop and feel any image is possible.

I’ve acquired skills and techniques that are usually restricted to professional photographers.  For example. I’ve taken photos in HDR(High Dynamic Range) – where the colors are so vibrant it seems like a scene out of an animated movie;  Infrared – where trees and grass appear like snow; and even used Chroma Key Compositing (aka Greenscreen) – where a picture of you can be layered with another pic and make it seem like you are in a variety of  other settings and locations.  To visit some of my work, see slide show below.

This slideshow requires JavaScript.

Category:

Graphics

Leave a comment

Tagged with:

My web-based customer support portal!

Dec 2009

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

Leave a comment

Tagged with:

Migrate from ASP to ASP.Net and our charts get an upgrade!

Jun 2009

ChartFX.Net

In addition to migrating Realization’s web-based project management software from ASP to ASP.Net, we also upgraded our charts from ChartFX to ChartFX.Net. ChartFX.Net gave me the ability to put in gradient colors and shadow borders. However, it lacked a smooth scrolling data grid. Once again, I improvised by using HTML to overlay the chart with my custom-made, smooth scrolling data grid.

Category:

ASP.Net

Leave a comment

Tagged with:

I have a patent!

Sep 2007

Portfolio Status

What happens when you create a chart that’s unique and uncommon yet gives you very useful information? You patent it, of course. Realization got a patent for this chart with my name on the list of patent holders!

This is a very unique area chart with scattered points. The points indicate a project’s due date completion status. If the project is in the red area, the project is in danger of not completing before the target due date. If the project is in the green area, then you’re safe.

I made this chart using the ChartFX component. It comes with configuration options such as zoom, project labels, label locations, red/green/yellow area settings.

Category:

ASP Classic, HTML

Leave a comment

Tagged with:

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

Sep 2006

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

Leave a comment

Tagged with:

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

Feb 2005

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

Leave a comment

Tagged with:

Buy your handbags from Adelyn!

Nov 2004

Adelyn's website

Looking for a beautiful hand-made handbag? Get it from Adelyn Designs! Choose from a variety of different designs and sizes and Adelyn will make your bag upon completion of your order.

This is a low-traffic, limited budget shopping website. It is limited to a webserver with no ASP hosting. The website was created using solely HTML. Paypal was the online payment transaction of choice.

Category:

eCommerce, Graphics, HTML, Javascript

Comments Off on Buy your handbags from Adelyn!

Tagged with:

Tree navigation done with javascript

May 2004

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

Comments Off on Tree navigation done with javascript

Tagged with:

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

Apr 2002

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

Leave a comment

Tagged with:

Abovelearning Learning Center web application

Mar 2001

Agilent's Learning center app

Abovelearning’s Learning Center web application is a learning management system for large companies who wish to train their employees with new skills. The Learning Center makes it possible for an employee to search and register for training classes. Administrators can monitor training requirements for employees.

I was part of the team who worked on Learning Center. I was the developer responsible for front end changes. While most of the backend work was done in VB code, I coded the front end using mainly JavaScript, HTML and ASP.

*update: Unfortunately, the dot.com bust of 2001 was too strong for Abovelearning.

Category:

ASP Classic, HTML, Javascript

Comments Off on Abovelearning Learning Center web application

Tagged with:

Not your ordinary Tic-Tac-Toe…

Aug 2000

-splash screen only-

When I was a child, my dad would draw a grid with many squares and tell me to write an “X” in one of the squares. He taught me to play Tic-Tac-Toe for “advanced players”. Instead of having to get 3-in-a-row to win, I had to get 5-in-a-row to take the game. I enjoyed this version of 5-in-a-row Tic-Tac-Toe so much, I decided to make an online version for multi-player gaming.

The game is built on the Adobe Flash technology, specifically with the Lingo programming language. My online version supports two-player modes with a chat feature for players to converse while playing. The game requires a dedicated web server to handle incoming and outgoing requests for online gaming between two players.

*update: My dedicated Shockwave Flash game server has been taken offline.  I moved and no longer use a static ip address for my home web server.  Someday, I will reboot this game in a more modern platform… maybe Facebook?

Category:

Flash/actionscript, Game

Comments Off on Not your ordinary Tic-Tac-Toe…

Tagged with:

Keypoint’s e-Project made with ASP!

Mar 2000

Aside from being a web consultant for Keypoint – traveling to bay area companies to help clients with their websites – I am also one of two web application developers for Keypoint’s in-house software, e-Project.

The Keypoint team and I use e-Project to track the number of hours we spend programming (or graphics designing for the graphics guys) for a certain client. When it is time to bill our clients, e-Project calculates our rates and the time we spend so it can prepare an invoice for the client.

*update: Our e-project is now available to other companies who wish to use a web-based Time and Resource Billing application.

KeyPoint.com

Category:

ASP Classic, Database

Leave a comment

Tagged with:

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

Jun 1999

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

Leave a comment

Tagged with:

VSA@UCI First Website

Oct 1997

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

Leave a comment

Tagged with: