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 ‘HTML’ 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.

 

Advertisement

Category:

Content Management System, HTML, HTML5, Javascript, jQuery

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:

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

.

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

Tagged with:

Web-based Compare/Copy tool


(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

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 UI design has been given a patent!

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

Tagged with:

I have a patent!

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

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:

Buy your handbags from Adelyn!

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

Tagged with:

Abovelearning Learning Center web application

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

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: