crowdhailer/lob

Demonstrating realtime connection between web browsers. Powered by ably.io. Created by Workshop14.io

lob

Demonstrating realtime connection between web browsers. Powered by ably.io

Installation

Requires Ruby, RubyGems, Node.js and Npm to be installed.

Clone source from github

git clone [email protected]:CrowdHailer/lob.git
cd lob

Fetch dependencies

bundle
npm install

Create database, requires postgres to be set up and user and passwords to be set.

createdb lob_development
rake db:migrate:up

Usage

Run all the tests through rake and npm.

rake test && npm test

Run the local version by executing heroku local. The application will the be available on port 5000

Notes

• Use Level Project as demo for accessing acceleration data.
• Use Chart JS to plot the output data.
  • Fiddle on updating points on chart-js
  • Fiddle on appending points to a chart-js line graph

lob's Issues

Styling for IE mobile

There are issues with the use of position:relative + min-height in IE. A style that creates a footer in the document context rather than a main element is needed to fix this.

Link to list of IE issues and some solutions
http://code.tutsplus.com/tutorials/9-most-common-ie-bugs-and-how-to-fix-them--net-7764

Landing page content.

The current landing page makes some effort to explain everything that is happing.

There seam to be two possible alternatives.
Leave it to there curiosity

Watch your phone take off.
Ready? Click 'Start Flight' to get started
Start flight button
Already have a flight? Enter the channel
Watch flight button

This option has less stuff an for anyone not in the know clicking start flight is the only sensible option.

Third option is to do something clever by showing content dependant on the detection of an accelerometer.
This may have some complications if people want to watch their flight on another phone.

Flyer page details

This page has been complicated by the addition of a submit button and changeable identity. We should revew the layout here.

Options

• Hide reset button (not sure it is really necessary)
• Show only the height of the flight not flight time. As they have a 1 to 1 relationship and the height is what makes it onto the leaderboard

bug tracking/mobile debugging

I had issues combining browsersync with the harp server (as used by surge) It would be worth investigating further how best to streamline this process.

There is also a styling issue on windows phones that is far from critical but should be diagnosable with this functionalitty

redirect from modals

If we detect no accelerometer redirect to homepage

Images for social media

Richard has created an image suitable to use as the share image. I need to collect the SVG original.

The podium image could also be added to the leaderboard page. possibly at foot of page or in background

Ably Launch considerations

• page title
• favicon #14
• domain
• home page content #8
• about page content
• standardise names without (.io) suffix
• disclaimer #15
• improve sharing flight experience #10 #9
• Ably testimonial
• Workshop 14 blog article

presence feature

Hooks in client applications are available but think Ably docs are outdated/misleading on implementing this feature.

animated logo

open out phone and then animated woossh

Trigger stop event when recording reaches max time

disclaimer

link form home page.
not our fault if you drop it.

favicon

take phone-bird and make favicon

Source maps

in test bundle for debugging

submitted records filtering

check names times before submission

highest per day, per week

limit on page

Upgrade server

Limit data sent and not data read.

At the moment the channels are flooded if flyers stay on the page. We should limit the time that data will be sent. I think a window of 20 seconds should be enough

durable history

channel creation uses tokens

correct token usage from ruby gem.

how to pass capabilities through ruby gem.