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 ‘Javascript’ Category

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

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).


Redesigning a website for better conversion rates

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.


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.

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

SVG Charts in Angular 2

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.


The Dolan Law Firm and WordPress Plugins

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.


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.