{"id":2744,"date":"2012-06-05T09:23:11","date_gmt":"2012-06-05T17:23:11","guid":{"rendered":"http:\/\/blog.mozilla.org\/webdev\/?p=2744"},"modified":"2012-06-05T09:23:11","modified_gmt":"2012-06-05T17:23:11","slug":"hacking-on-open-web-apps","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/","title":{"rendered":"Hacking on open web apps"},"content":{"rendered":"

At Mozilla, we believe the web is the platform<\/a>. It’s the one place where we can share apps across many devices using ubiquitous, open technologies: HTML5 and JavaScript. Today, where we have many devices running proprietary platforms at our fingertips, the web is quickly fading into a second class citizen. Let’s change that. Mozilla’s Open Web App<\/a> initiative aims to make web based applications feel as native as possible on as many devices as possible<\/a>. For existing operating systems, you too can run web apps<\/a>. To kickstart an apps ecosystem and facilitate app commerce, we’re launching the Mozilla Marketplace<\/a>.<\/p>\n

The Webdev group at Mozilla–a group from all corners of the globe who are working with web technologies–met recently by the beach at Santa Cruz, CA. Besides syncing up on all our various projects (it was like an unconference) we decided the Open Web Apps projects needs, well, it needs apps!<\/p>\n

We spent half a day hacking on apps and \/ or developer tools to help people build apps easier. Here are the results. These were literally built in the span of 4 hours so most are still just experimental prototypes. There are links to the source so if an app looks interesting and you want to make it better, don’t hesitate to submit a pull request. It was a lot of fun; we learned about what the web can already do as an apps platform and also what gaps still need to be filled for web developers who want to create apps. You’ll notice that a lot of these screenshots are done with a web browser because that is the SDK of an open web app platform \ud83d\ude42<\/p>\n

Open Maps<\/h2>\n

by Arron Schaar<\/a>, Sean McArthur<\/a>, Piotr Zalewa<\/a><\/p>\n

A map made with Leaflet and Open Street Maps. Try it out<\/a> (source code<\/a>)<\/p>\n

\"\"<\/p>\n

Rock Paper Scissors<\/h2>\n

by Peter Bengtsson<\/a> and Schalk Neethling<\/a><\/p>\n

The game, the legend (source code<\/a>). The app is played best with a friend!<\/p>\n

\"\"<\/p>\n

Mash Water<\/h2>\n

by Luke Crouch<\/a><\/p>\n

Brewer’s tool to help understand mash water formula. Try it out<\/a> (source code<\/a>).<\/p>\n

\"\"<\/p>\n

Herbie<\/h2>\n

by ednapiranha<\/a> and Kumar McMillan<\/a><\/p>\n

An HTML5 music player with an S3 backend to sync your music (source code<\/a>).<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Magic 10-Ball<\/h2>\n

by Ricky Rosario<\/a> and Will Kahn-Greene<\/a><\/p>\n

Magic 10-ball app to help people make critical<\/strong> decisions (source code<\/a>). Early on in development, the app itself was used to decide what to build next for the app.<\/p>\n

\"\"<\/a><\/p>\n

Linecutting with flexbox<\/h2>\n

by James Long<\/a><\/p>\n

An experiment in creating some UI components. Try it out<\/a> (source code<\/a>).<\/p>\n

\"\"<\/p>\n

Receipt Verifier<\/h2>\n

by Andy McKay<\/a><\/p>\n

Paid apps will need to verify the user’s receipt on their app server. This is a Python library<\/a> to facilitate that. Here’s a live demo<\/a>.<\/p>\n

in-app console<\/h2>\n

by Matt Claypotch<\/a><\/p>\n

An embeddable debug tool for apps (source code<\/a>).<\/p>\n

Draw Nothing<\/h2>\n

by Kevin Ngo<\/a><\/p>\n

An HTML5 experiment to make a color palette and drawing surface like Draw Something. Use the app here<\/a> (source code<\/a>).<\/p>\n

Goutte Goutte puzzle game<\/h2>\n

by Mike Kelly<\/a>, Craig Cook<\/a>, and Adrian Gaudebert<\/a><\/p>\n

Falling bubble things. Play it here<\/a> (source code<\/a>).<\/p>\n

Hipstergram<\/h2>\n

by tofumatt<\/a> and Fred Wenzel<\/a><\/p>\n

An HTML5 Instagram clone. Try it out<\/a> (source code<\/a>).<\/p>\n

Fotofilter<\/h2>\n

by David Walsh<\/a><\/p>\n

Another HTML5 Hipstergram clone, but faster and with moar css seckc (source code<\/a>).<\/p>\n

S3 iframe proxy<\/h2>\n

by Les Orchard<\/a><\/p>\n

Save content to Amazon S3 from an open web app (source code<\/a>)<\/p>\n

Near Beer<\/h2>\n

by Paul McLanahan<\/a> and Rob Hudson<\/a><\/p>\n

A mash up of untappd and foursquare that helps thirsty people get unthirsty. Try it out<\/a> (source code<\/a>).<\/p>\n

Fileabug<\/h2>\n

by Anthony “Rik” Ricaud<\/a><\/p>\n

See it in action<\/a> (source code<\/a>)<\/p>\n

FFFUnit<\/h2>\n

by James Bennett<\/a><\/p>\n

Unit Calculator that converts to FFF scale (source code<\/a>).<\/p>\n

Webcalc<\/h2>\n

by James Socol<\/a><\/p>\n

A graphing calculator webapp (source code<\/a>).<\/p>\n","protected":false},"excerpt":{"rendered":"

At Mozilla, we believe the web is the platform. It’s the one place where we can share apps across many devices using ubiquitous, open technologies: HTML5 and JavaScript. Today, where we have many devices running proprietary platforms at our fingertips, … Continue reading<\/a><\/p>\n","protected":false},"author":293,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4714,4713,124,19291,288],"tags":[],"coauthors":[],"yoast_head":"\nHacking on open web apps - Mozilla Web Development<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"kumar303\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/\",\"name\":\"Hacking on open web apps - Mozilla Web Development\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2012\/06\/Screen-Shot-2012-06-01-at-6.27.12-PM.png\",\"datePublished\":\"2012-06-05T17:23:11+00:00\",\"dateModified\":\"2012-06-05T17:23:11+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/aa2b14e555e8a5fec38a51659b15e3c4\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/#primaryimage\",\"url\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2012\/06\/Screen-Shot-2012-06-01-at-6.27.12-PM.png\",\"contentUrl\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2012\/06\/Screen-Shot-2012-06-01-at-6.27.12-PM.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/webdev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hacking on open web apps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/\",\"name\":\"Mozilla Web Development\",\"description\":\"For make benefit of glorious tubes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/aa2b14e555e8a5fec38a51659b15e3c4\",\"name\":\"kumar303\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/a707ad1bf04083698e2b4a775a7492b7\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/059920b9daee1ece045f4031037ffb79?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/059920b9daee1ece045f4031037ffb79?s=96&d=mm&r=g\",\"caption\":\"kumar303\"},\"description\":\"Kumar hacks on Mozilla web services and tools for various projects, such as those supporting Firefox Add-ons. He hacks on lots of random open source projects too.\",\"sameAs\":[\"http:\/\/farmdev.com\/\",\"https:\/\/www.facebook.com\/kumar303\",\"https:\/\/x.com\/kumar303\"],\"url\":\"https:\/\/blog.mozilla.org\/webdev\/author\/kmcmillanmozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hacking on open web apps - Mozilla Web Development","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/","twitter_misc":{"Written by":"kumar303","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/","url":"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/","name":"Hacking on open web apps - Mozilla Web Development","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/#primaryimage"},"thumbnailUrl":"http:\/\/blog.mozilla.org\/webdev\/files\/2012\/06\/Screen-Shot-2012-06-01-at-6.27.12-PM.png","datePublished":"2012-06-05T17:23:11+00:00","dateModified":"2012-06-05T17:23:11+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/aa2b14e555e8a5fec38a51659b15e3c4"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/#primaryimage","url":"http:\/\/blog.mozilla.org\/webdev\/files\/2012\/06\/Screen-Shot-2012-06-01-at-6.27.12-PM.png","contentUrl":"http:\/\/blog.mozilla.org\/webdev\/files\/2012\/06\/Screen-Shot-2012-06-01-at-6.27.12-PM.png"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/webdev\/2012\/06\/05\/hacking-on-open-web-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/webdev\/"},{"@type":"ListItem","position":2,"name":"Hacking on open web apps"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/webdev\/#website","url":"https:\/\/blog.mozilla.org\/webdev\/","name":"Mozilla Web Development","description":"For make benefit of glorious tubes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/aa2b14e555e8a5fec38a51659b15e3c4","name":"kumar303","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/a707ad1bf04083698e2b4a775a7492b7","url":"https:\/\/secure.gravatar.com\/avatar\/059920b9daee1ece045f4031037ffb79?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/059920b9daee1ece045f4031037ffb79?s=96&d=mm&r=g","caption":"kumar303"},"description":"Kumar hacks on Mozilla web services and tools for various projects, such as those supporting Firefox Add-ons. He hacks on lots of random open source projects too.","sameAs":["http:\/\/farmdev.com\/","https:\/\/www.facebook.com\/kumar303","https:\/\/x.com\/kumar303"],"url":"https:\/\/blog.mozilla.org\/webdev\/author\/kmcmillanmozilla-com\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/2744"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/users\/293"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/comments?post=2744"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/2744\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/media?parent=2744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/categories?post=2744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/tags?post=2744"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/coauthors?post=2744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}