Final Project

Your final project will be the culmination of everything you've learned throughout the course.

A nice way to conceptualize / visualize the expectations and requirements for this project is to imagine Assignment 2, inside of Assignment 1, with a few more features.

You will have 6 weeks to work on your final project, so expectations are reasonably high.

INCOMPLETE (MORE ANSWERS WHEN QUESTIONS COME IN)

What does my app have to be able to run on?

Your app should be live on a gh-pages branch of a github repo. Salehen and myself will be using Google Chrome for Android (same as iOS) on a Nexus 5 and One Plus One.

How do I support a mobile layout and properly size my CSS pixels?

Read This and then test on a phone or use Chrome developer tools (see below).

How can I test my app?

You can use Google Chrome's developer tools to emulate mobile devices and even network speeds. Click the little phone icon in the top left to start emulation.

Do I have to support touch gestures?

Yes, use a library like Hammer.js

Do I have to worry about my app running on other browsers? Tablets? Desktop?

No.

What do you mean single page app?

Your app should never leave the original index.html. Read up on this.

Do I have to compress, gzip, uglify etc...

Only if you are running a pre-processor on less, sass, jsx, etc... You app should run live on gh-pages, i.e. only js, css, html are supported.

Application Choices

  • Productivity
  • Utility
  • Game
  • ...

Basically you can build any application you like but you must meet the requirements

Design (NON NEGOTIABLE)

The following must be included in your application.

  • The user should not get stuck (games: within reason)
  • Feedback (not just errors: buttons, etc...)
  • Motion / Animations / Transitions
  • PERFORMANCE (smooth animations if you use them, smooth scrolling, no junky / janky code)

Design (FLEXIBLE)

Example: a game does not need to stress a "modern look and feel" or "proper navigation flow" if it has developed an orginial UX and navigation experience.

Be Careful: you app's implementation must still demonstrate proper UX and design thinking.

  • Modern look and feel
  • Modern UX afforances
  • Modern use of icons and typography
  • Proper navigation flow
  • Original UX

Technical (NEW)

  • Persistent User Data using IndexedDB (sklad) / Drive SDK / Realtime Drive API
  • Incorporate a Web Service API

Technical

You must use a framework to manage your views, even if it is a game and the framework simply handles a splash page, instructions and the main game screen.

  • Use a web framework (Angular, React, Ember, Backbone, etc...)
  • Use a routing module provided by or added to your framework
  • Single Page App (all resources delivered in one request)
  • Multiple views + navigation (i.e. home, view1, view2, settings, ...)
  • Navbar / toolbar / menu
  • User input
  • SVG, CSS, Canvas or WebGL (USE A LIBRARY)
  • CUSTOM APPLICATION LOGIC (code you wrote)

UX is many things

  • User Input
    • Gestures
    • Voice
    • Device APIs
  • Feedback
    • Color
    • Shape
    • Motion
    • Sound
  • Design of Information
    • Color
    • Type
    • Structure
    • Organization

Brainstorm

How can you make your app unique, fun, playful.

Write down all your ideas! No idea is a bad idea! Get wild! Get crazy!

Shortlist your ideas by discussing them with your partner and come up with 3-4 unique user interactions you can develop and test in your application.

Polish the interactions that work, drop the ones that don't.

Great sites for inspiration

  • Chrome Experiments (mobile)
  • Creative JS
  • Code Pen
  • CSS Deck

Some more lists of cool Javascript sites / experiments

  • Creative Bloq
  • Design Crazed
  • JQuery Rain
  • Smashing Magazine
  • 50 Website Examples (grouped by style)
  • 15 Awesome JS Experiments
  • Canvas Demos

Tutorials

Reminder: you may want to stay away from W3Schools and instead google with MDN and follow their documentation. It is often more up to date, explained better and accurate.

Example Search: MDN javascript arrays

Frameworks

Angular

  • Single Page App Tutorial with Routing and Templates (good!)
  • Code School Interactive Course
  • Angular JS Tutorial

React

CAREFUL: you're not building server-side applications with Node.js! Try searching using '-node.js' in google searches.

  • What is React (links and resources)
  • Overview
  • React Tutorial

Recap from Lecture 1: JavaScript

Beginner and Refresher

  • Codecademy Beginner JS
  • MDN Learn JS Links
  • Douglas Crockford Videos

Intermediate and Books

  • JS the Right Way (great)
  • Eloquent JS (great)
  • JS Books
  • JS Garden
  • JS Classes and Inheritence (prototypal)

SVG

DISCLAMER: SVG is slow on mobile when you have to animate many objects

I also don't know many libraries that make working with SVG easy, but this doesn't mean you can't use SVG in your projects. Make an educated choice.

About

Libraries

  • D3.js

CSS Transforms

About

Libraries

Note these libraries are about animating HTML elements using CSS or JS animations that take advantage of CSS transforms. You can style your elements with plain CSS.

  • List, Cheat Sheet, Animate.css, Greensock GSAP, Velocity.js (jquery anim. replacement)

Canvas

About

Libraries

  • Kinetic.js, Easel.js, Fabric.js, Paper.js

WebGL

About

Libraries

  • Pixi.js (2d), Three.js (3d)

Extra Animation Libraries

  • (SOLE) Tween.js (good paired with pixi/three), Tween.js Part of Easel / Create JS, Greensock GSAP (can use with pixi/three)

USE LIBRARIES

I assume you will build on top of example code and cool ideas you find on the web.

That's fine! Make sure you reference what you use and where in your project you use it.

Note: the final lab challenges will be made up via the proposal and milestones

Breakdown

  • Proposal: 1%
  • Milestone: 3%
  • Presentation / Design Rationale: 10%
  • Design Requirements: 10%
  • Technical Requirements: 10%
  • Report: 5%

General Expectations

  • A fully functional, modern, unique application
  • Well reasoned and presented in terms of design and technical decisions
  • Complete, running application with no bugs, design or technical flaws

Group Size Expectations

  • 1 Person 75%
  • 2 People 100%
  • 3 People 125%

Suggested Milestones

  • Week 1: Find a partner(s) and idea for app
  • Week 2: Choose your library, sketch out how it will work, divide the work
  • Week 3: Get the basic functionality working, present
  • Week 4: Finalize the application, create a README