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).
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.
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.
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.
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
VIEW DEMO (source code – d3 and svg prototype used for Angular 2 app; source code – dynamically load d3 chart with json data)
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.
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.
Screencast shows the same web-dashboard displayed on three different devices – MacBook, iPad, and iPhone
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
- Bryntum Scheduler and Gantt Charts
- Sencha EXTJS 4.0
- jQuery.ContentCarousel plugin
- Developr theming
- jQuery.blockUI plugin
View the Web Dashboard
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
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.
(actual data has been removed and replaced with fake data)
VIEW DEMO (source code – duplicating form field values and DOM contents)
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.
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
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.
update: due to time contraints I have relieved myself from the day-to-day maintenance of the site.
This is a test
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,
For Apple iPhone users, use the Safari browser to access the web app here,
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.
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.
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.
*update: If you want to read the entire summary, I now have a framed plaque with the patent to show you! Yay!
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.
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.
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.
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.
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.
*update: Unfortunately, the dot.com bust of 2001 was too strong for Abovelearning.
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.
*update: The VSA-UCI website has seen many new students and changes since it’s original creation.