innoq/rocair

progressive enhancement demo

ROCAir is a simple demo application demonstrating the benefits of progressive enhancement for both end users and developers

starting from POSH form controls which are augmented by layering CSS and JavaScript on top, browsers provide us with various benefits such as focus handling, keyboard controls and accessibility - without us having to reinvent the wheel by implementing such functionality ourselves (usually in sub-par fashion)

created by innoQ, though based on the collective wisdom of web advocates across the globe

note that there is a more elaborate version at https://github.com/innoq/roca-airways

Getting Started

• npm install downloads third-party components
• ./server launches the application

---

licensed under the Apache License, version 2.0

rocair's Issues

VIP seats confuse plebs

when first loading the page, only the VIP seats appear above the fold (for most viewport sizes)

it's not immediately clear though why those are inaccessible, in part due to the lack of visual distinction

cf. #4, #5

investigate jQuery Seat Charts for inspiration

→ https://github.com/mateuszmarkowski/jQuery-Seat-Charts

might have some ideas worth adopting

display row/seat numbers in augmented version

at the very least they should be visible as tooltips - though something more elegant would be preferable

explain rationale

the application should include a brief "about" section, elaborating on why we built it and (roughly) how

submit button position and styling

currently still very crude, sitting all the way at the bottom (which is somewhat awkward)

highlight selection

when first loading the page, it's not immediately obvious which seat has been (pre-)selected

this is partly due to #4, but @saivlis reports that the blue glow was barely visible

explain keyboard controls

users are not necessarily familiar with how to navigate/select radio buttons via the keyboard, so we probably need to add a brief explanation (since this is one of the primary benefits)

of course we should mention that this is just standard browser functionality

highlight and explain debug menu

it's not particularly obvious right now

(this is tangentially related to #2)

aisle misalignment (iPhone)

via @aheusingfeld

rename to ROCAir?

it's silly and somewhat beside the point (this is primarily about progressive enhancement), but "seat selector" seems far too sober/boring

opinions, @stilkov @rstrangh et al.?

(note that this affects both the repo and the Heroku instance)

add legend

@jannikolai suggested in #11:

What about adding a legend, that describes the different kinds of seat visualizations?

of course that's only relevant for the augmented version, so we'll have to think about how best to handle that in the basic versions

Multiple selection of seats for more than one passenger

it'd be nice to support multiple selection for groups of travelers

in theory, checkboxes should Just Work - though we'd have to handle limitations (max. n seats), both client- and server-side

this might be a nice use case for declarative pub/sub:

<input type="checkbox" data-publish="seat-selected">

<!-- ... -->

<p class="status" data-subscribe="seat-selected">
    You've selected two out of three seats.
</p>

Unicode!

💺 (U+1F4BA) might be used in the basic version - but I suspect five-character Unicode chars are only supported on a few machines right now, so not sure what to do about the rest

reduce cabin size

the plane's graphical representation takes up far too much space right now, pushing all the relevant "content" below the fold

we might consider switching to a horizontal layout, but I'd rather avoid that

use nested lists to represent rows

that could provide a little more structure to the unstyled version and might also make styling easier