David Klassen

Angular - Responsive ES6 Apps

Angular is Awesome Multiversial Developments Group

These web apps were an experiment in using AngularJS. I started with Angular1 and jumped to using Angular4 in future projects. Angular4 adds so many new things including TypeScript and ES6 related syntax. While I am just starting into Angular my experience with ES6 for ReactJS, tells me there is so much more to uncover here. I also tried to create some interesting pure Javascript code, since when I experimented with this with an AJAX Hockey App, I was amazed at what is possible. In the emailApp I creatd my own editable dropdown input field (so neat).

Paradise Compared - Responsive Design

Responsive Design CSS3 BCIT

This website was created to provide responsive design in a layout using HTML5 and experimental CSS3 related features. The page content describes a few vacations I have been able to take over the years (and was the baseline for this site). The content expands horizonatally as the browser widens. The menu and navigation stays-on-top if the browser(view port) is significantly large, otherwise (ie. for mobile devices) it is simply a part of the page. The bottom footer is sticky and will stick firmly to the bottom section of the browser as long as the content does not exceed the browser page height.

Its Your City - Cultural Content

It's Your City! Center for Digital Media

This Drupal website was created by a team of six people (Project Manager, Writer, Director, Artists, and Programmer), as a part of the Masters of Digital Media(MDM) Program at the Center for Digital Media. I helped create this Drupal website in order to share video information and content focused on informing people about issues of Locality within different geographic areas. We had a few user stories we wanted to communicate to viewers. The goal was to allow people to post YouTube/Vimeo videos on the site using pre-made Drupal modules. What follows are the videos and information we collected to describe Vancouver.

WebUI Features - JQuery

uContact Address Book App BCIT

This is a set of JQuery/Javascript features I have created to illustrate how JQuery is mandatory for any Web UI toolkit: click on a small picture to see it displayed in frame, mouse over links and pop-up window animations appear, simple to use UI for selected depature and return dates, give a user instant feed back concerning invalid input, movable tabs that allow for structured graphical page features, an example of how to offer multiple styles for viewing an interface, an AJAX example of how retrieve and process XML, and supply dynamic input hints, Javascript example describing the dangers behind unvalidated redirects, a Javascript example showing how using Cookie flags prevents Javascript access

uEmploy - WebManager - REST Service xsd

It's Your City! BCIT

This Java web application uses the the Java displaytag library to easily display SessionBean object Lists in a configurable table. A user can Add, Delete, or Search for employees. This web app makes no database calls directly, instead it uses a JAX-RS REST service provided by a Java Application server. This four tier web application makes use of an Apache Webserver, a Tomcat Java Application Server, a JBoss Application server, and a MYSQL database. A combination of HTML, CSS, JSP, JSTL, EL, displaytag.org, and JAX-RS provide a simple yet powerful interface.

Micro Loans - Responsive/Mobile Form

Flexfi FS Financial

This website was an experiment in using Responsive Web Design to allow for any device to follow through a number of screens to complete the application process for a simple small loan. Depending on the size of the device screen a different number of fields are presented, so that the user never needs to scroll through a page to see all the fields. Numerous cross/browser/platform issues were addressed, in order to ensure the user could view some help text and also enter data without having to do anything other than tap a field, enter data, and click a button to proceed to the next screen.