travellingprog

When Static Prototypes Go Wrong - Styling

For my part of the presentation, I will talk about some of the lessons learned around styling.

Short URL for this page: http://git.io/vgO0C

There's a ton of links embedded in this gist. I invited you to click through them to help you follow along.

travellingprog

startMonth = startpieces[1];
startDay = startpieces[2];
endMonth = endpieces[1];
endDay = endpieces[2];

var dateString = startMonth + " " + startDay;

if (startMonth !== endMonth || startDay !== endDay) {
	dateString += " - "
	if (startMonth !== endMonth) {

travellingprog

var locationSorter = function(a, b) {
    // this sorts letters before numbers on the 1st character, and also
    // sorts something like "1C9" before "1C11"
    
    var n = (a.name || "").toLowerCase();
		var m = (b.name || "").toLowerCase();
  
    var l = Math.min(n.length, m.length);
    if (n.substr(0, l) === m.substr(0,l)) {
      return (n.length - m.length);

travellingprog

• Swig templates must be pre-compiled via command-line. The resulting *.js file must be given to the prepackaged app.

• Inline scripting is not allowed.

• The complete security restrictions are here: http://developer.chrome.com/apps/contentSecurityPolicy.html

• You can get images with xhr.responseType='blob', and then assign them a BlobURL which stores the entire blob in a url that looks like this: blob:chrome-extension%3A//dabmgdknkbnloipddgldbcmngnacejkh/530e737b-63cf-4309-b526-74013259c4b2

• You can store images in a sandboxed filesystem with the HTML5 FileSystem API, without needing to get any user permission. Have yet to try using this file as the image source.

travellingprog

  //...
  
  self.updateLocations = function () {
		self.getLocationsByVenue({
			venueURL: App.venueURL,
			perspective: App.perspectives.main  // add this line
		}, function (response) {
			console.log(response);
			App.locations = response;
		});

travellingprog

var empty_list = function(selector) {
    return selector(undefined, undefined, true);
};

var prepend = function(el, list) {
    return function(selector) {
        return selector(el, list, false);
    };
};
var head = function(list) {