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

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

 

Advertisements

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


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

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.

 

Responsive Web Design for a dashboard

Screencast shows the same web-dashboard displayed on three different devices – MacBook, iPad, and iPhone See in Action

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