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

Posts tagged ‘json’

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

Advertisement

Category:

Angular, CSS, Javascript, jQuery, Typescript, Video

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:

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

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

Tagged with: