Mozfest 2016: Privacy, Vanity, Beacons, Painting, Dilemmas and Tents.

I had the pleasure of being involved in a bunch of different activities at Mozfest this year. What is Mozfest? From the website:
MozFest is an annual celebration of the open Internet movement. It’s where passionate technologists, educators, and makers come together to explore the future of the open Web.
Sounds pretty cool… but what does an “annual celebration” of web exploration actually look like? Well, here’s something a bit more of a visual:
Imagine an nine-floor open-plan art school in London, completely taken over for a weekend by over 400 artists, designers, activists, teachers, hackers and makers, putting on hundreds of workshops, talks and building and showing interactive art, games and various other exhibits of thrilling wonder.
It’s truly spectacular and an overwhelming thing to experience.
My biggest wish for Mozfest is for it to leave London – to transform into a regional distributed series of festivals that bring these wonders to the world outside of London (I hear it exists!). Hopefully that will happen someday.
But for now, read on to learn about some of the spaces, projects and exhibits I participated in this year.

Dilemmas in Connected Spaces

dwygzeg
Mozfest is composed of a number of “spaces”, most of which are housed on specific floors: Journalism, Science, Arts, Youth, etc. This year I was one of the curators and coordinators of the Dilemmas in Connected Spaces… space.
There are a zillion websites, tutorials, workshops and classes that provide how-to knowledge of IoT, so we decided to not use our space to duplicate those efforts.
Instead, we designed our space to explore the challenges that arise from the ubiquity of connected physical computing devices in our lives. and then built it with 500 cardboard boxes!
 cf3sf0r
We divided the space into different zones: The Open IoT Studio, Home, Garden and the Nomad Tent Camp. I decided to explore the dilemma of over-stimulation in our digital lives by running the Nomad Tent Camp, a chill zone where almost nothing was scheduled – a place for weary Mozfest travelers to rest their weary feat, chill out and talk with other explorers. I set up a couple of large spray shelters as tents, and filled the area with comfy chairs. Sure enough, all weekend long we had people coming through and doing naught be relaxing and chatting with strangers they met at this quiet oasis amongst the chaos.
(Somehow I have no pictures of my own zone! Please use this placeholder to imagine it.)

If you’d like to learn about the rest of the Dilemmas in Connected Spaces activities, you can follow Jon Rogers and Michelle Thorne’s Open IoT Studio, read about Ian Forrester’s Home space and hear what Michael Saunby did in the Garden on this radio interview.

Mozfestation…. GET INFECTED… WITH IDEAS!

Katie Caldwell, Liz Hunt and I worked on a project that came out of their work in the Connected Devices group on Project Magnet and some of my Bluetooth experiments called Mozfestation. We wanted a way to encourage people to explore more of the festival than they would’ve otherwise – and to get exposed to as many ideas as possible during the weekend. And I had a 100 beacons…
egfpmlb
So we made iOS and Android apps for discovering, accessing and saving beacons (a hacked version of Magnet’s React Native app, made web pages for 100 curated things at Mozfest, made a leaderboard for showing top-visited beacons and the users who’d seen the most beacons, and then put posters and flyers all over the festival to let people know about it.
hkhbgrk
In the end, it was a ton of work and a ton of fun. We learned a ton about large-scale beacon deployments, minimum-viable-gamification, mobile app uptake tactics and loads more. It was a huge experiment and it was FASCINATING. There’s a lot involved in the design, implementation, festival execution, and the analysis of the data collected, so I’ll go over all of that in a separate post.

A-Painter: 3D Painting in Virtual Reality!

apainter_painting
One addition to the space was Mozilla’s A-Painter, a purely web-based virtual reality 3D painting experience. It’s a web app written using A-Frame, the web toolkit for building 3D and VR experiences in the browser. A-Frame is both incredibly powerful and incredibly easy to use, and it was showing up all over the festival, almost anywhere that someone was doing a session or exhibit about VR.
We set up the A-Painter space next to the nomad tent camp, which is on the 6th floor of the school, where the fashion classes are taught. The whole space is littered with mannequins that have paper-prototypes of clothing concepts on them. We clustered a bunch of these around the space and even used two of them to hold the HTC Vive’s positional sensors.

Vanity Trumps Privacy Trumps Vanity

Since the demise of Firefox OS, I’ve been collecting all of the old Flame developer devices that I can get my hands on. These are smartphones, no… *computers*, packed with sensors, and with screens built-in, and with the ability to run applications built using the web stack but with access to WAY more functionality than traditional web pages. I’ve been using them as IoT devices, art pieces, privacy tools and more. I’ve been playing around with using them as camera arrays, and have a few side-projects (as yet unfinished) doing things like turning them into piecemeal mega-screens, chandeliers, etc.
So when Kevin Fann started talking about his idea for an exhibit at Mozfest that explored the tension between vanity and privacy, all I could think about was how the selfie is a fantastic expression of that tension, and I’ve got all these smartphones… no, *cameras* lying around.
Kevin, Jordan Gushwa and I designed a walk-through experience with loads of phones on selfie-mode and even a secret hidden camera that records live video and displays out *outside* the exhibit… so you don’t know you’re being recorded until *after* you exit.
Kevin created eye-catching frames and placements for all the phones, and selected a few relevant video clips to have repeating on some of the phones. I wrote some code that streamed the live video from the hidden phone over Web-RTC to a Raspberry Pi hooked up to a screen outside the exhibit.
Kevin packed everything up into suitcase, which could not have looked more bomb-like:
2foz1de
Here’s a video tour of the wall in all its glory:

The end-result was epic: People were *mesmerized* by so many phones showing them the live camera view of themselves.
kt2nlyt
Mozfest 2016. It’s over. I’m exhausted. It was a parade of wonders. I hope someday it will come your way.
Cheers.
obnvpnv

Harvesting Air Quality Data with a NodeMCU, SensorWeb and IFTTT

Project SensorWeb is an experiment from the Connected Devices group at Mozilla in open publishing of environmental data. I am excited about this experiment because we’ve had some serious air quality discoveries in Portland recently – our air is possibly the worst in the USA, and bad enough that mega-activists like Erin Brockovich are getting involved.

Screen Shot 2016-07-13 at 5.21.01 PM

A couple of weeks ago, Eddie and Evan from Project SensorWeb helped me put together a NodeMCU board and a PM2.5 sensor so I could set up an air quality sensor in Portland to report to their network. They’re still setting up the project so I haven’t gotten the configuration info from them yet…

But you don’t need the SensorWeb server to get your sensor up and running and pushing data to your own server! I want a copy of the data for myself anyway, to be able to do my own visualizations and notifications. I can then forward the data on to SensorWeb.

So I started by flashing the current version of the SensorWeb code to the device, which is a Nodemcu 0.9 board with an ESP8266 wifi chip on board, and a PM2.5 sensor attached to it.

2016-07-13 17.05.59

I used Kumar Rishav’s excellent step-by-step post to get through the process.

Some things I learned along the way:

  • On Mac OS X you need a serial port driver in order for the Arduino IDE to detect the board.
  • After much gnashing of teeth, I discovered that you can’t have the PM2.5 sensor plugged into the board when you flash it.

After getting the regular version flashed correctly, I tested with Kumar’s API key and device id, and confirmed it was reporting the data correctly to the SensorWeb server.

Now for the changes.

I flashed the device and viola, it is publishing data to my spreadsheet.

 

Screen Shot 2016-07-13 at 4.48.28 PM

And now once SensorWeb is ready to take new devices, I can set up a new IFTTT recipe to forward the posts to them, allowing me to own my own data and also publish to the project!


Bubble and Tweak – IoT at the Ends of the Earth

Screen Shot 2016-07-12 at 3.19.07 PM

Last month I spent a week working on IoT projects with a group of 40 researchers, designers and coders… in Anstruther, a small fishing village in Scotland. Not a high-tech hub, but that was the point. We immersed ourselves in a small community with limited connectivity and interesting weather (and fantastic F&C) in order to explore how they use technology and how ubiquitous physical computing might be woven into their lives.

The ideamonsters behind this event were Michelle Thorne and Jon Rogers, who are putting on a series of these exploratory events around the world this year as part of the Mozilla Foundation’s Open IoT Studio. The two previous editions of this event were a train caravan in India and a fablab sprint in Berlin (which I also attended, and will write up as well. I SWEAR.).

Michelle and Jon will be writing a proper summary of the week as a whole, so I’m going to focus on the project my group built: Bubble.

Screen Shot 2016-07-12 at 3.18.39 PM

Context

From research conducted with local fishing folk, farmers from a bit inland, and a group of teenagers from the local school, we figured out a few things:

  • Mobile connectivity is sparse and unreliable throughout the whole region. In this particular town, only about half the town had any service.
  • The important information, places and things aren’t immediately obvious unless you know a local.
  • Just like I was, growing up in a small town: The kids are just looking for something to do.

Initially we focused on the teens… fun things like virtual secret messaging at the red telephone boxes. Imagine you connect to the wifi at the phone box, and the captive portal is a web UI for leaving and receiving secret messages. Perhaps they’re only read once before dying, like a hyperlocal Snapchat. Perhaps the system is user-less, mediated only by secret combinations of emojis as keys. The street corner becomes the hangout, physically and digitally.

We meandered to public messaging from there, thinking about how there’s so much to learn and share about the physical space. What’s the story behind the messages to fairies that are being left in that phone box? I can see the island off the coast from here – what’s it called and what’s out there? Who the hell is Urquardt and what’s a “wynd”? Maybe we make a public message board as well – disconnected from the internet but connected to anything within view.

We kept going back to the physical space. We talked about a virtual graffiti wall, and then started exploring AR and ways of marking up the surroundings – the people, the history, the local pro-tip on which fish and chips shop is the best. But all of this available only to people in close physical proximity.

Screen Shot 2016-07-12 at 3.40.49 PM

Implementation

Given the context and the constraints, as well as watching direction some of the other groups were going in, we started designing a general approach to bringing digital interactivity to disconnected spaces.

The first cut is Bubble: A wi-fi access point with a captive portal that opens a web page that displays an augmented reality view of your immediate surroundings, with messages overlaid on what you’re seeing:

Screen Shot 2016-07-12 at 2.36.26 PM

A few implementation notes:

  • We used a Raspberry Pi 3, running as a wi-fi access point.
  • It ran a node.js script that served up the captive portal web UI.
  • The web UI used getUserMedia to access the device camera awe.js for the AR bits and A-Frame for a VR backup view on iOS.
  • We designed a logo and descriptive text and then lasercut some plaques to put up where hotspots are.

Designs, board, battery and boxes:

Screen Shot 2016-07-12 at 3.58.10 PM

Connected to the front-end:
Screen Shot 2016-07-12 at 3.57.57 PM
In the final box:
Screen Shot 2016-07-12 at 3.58.33 PM

Challenges:

  • Captive portals are hobbled web pages. You can’t do things like use getUserMedia to get access to the camera.
  • iOS doesn’t have *any* way to let web pages access the camera.
  • Power can be hard. We talked about solar and other ways of powering these.
  • Gotta hope they don’t get nicked.

Bubble was an experimental prototype. There are no plans to work further on it at this time. If you’re interested, everything is on Github here. You can read more about the design here (PDF).

Thanks to fellow team members Julia Gratsova, Katie Caldwell, Vladan Joler. (Sadly, no Julia in the phonebox!)

Screen Shot 2016-07-12 at 3.19.51 PM

Fixing a papercut in Firefox’s WebIDE

Web IDE has gone though some twists and turns as a feature in Firefox, but one thing has remained constant for me: When I launch an app, I *always* want to debug it. Having to repeatedly wait and hit the wrench button has always bothered me. During a development session I may do this hundreds of times.

So I wrote a small Firefox add-on that changes the functionality of the “play” button in Web IDE to also open the Developer Tools once the app has launched.

Warning: It’s not pretty. There’s probably a better way to do it. Take a look at the source here and let me know if you have ideas.

INSTALL

A couple of other things I want to add:

  • First force-stop app when you hit Play. Currently the new app source doesn’t get reloaded because the old app instance is running, which is wrong and maddening.
  • Always show dev tools. The way the pop in and out is very heavy feeling. Just keep them open all the time.

Doublestitch – A Simpler and Cleaner Pocket for Firefox

I love Pocket and I love Firefox.

But two things were driving me batty about the Pocket feature built into Firefox:

1. The design of the popup experience when you save a page to Pocket is… unfortunate. It stays up far too long, and it doesn’t go away when you switch tabs. Yeah, it stays open for a given URL even when you’re on a tab with a completely different URL! But regardless of whether you think that’s as crazy as I do, I never want to add tags so just don’t need it at all.

Screen Shot 2016-02-19 at 11.17.56 AM

2. The Pocket toolbar button doesn’t indicate whether you’ve already saved the page or not. You have to click the button to figure it out. Now this might not be a problem for everyone. But the way I use my browser can best be described as “tabsplosion”. I don’t know when or where these tabs come from, or how they get there, or whether I saved it already or not. So this tiny piece of ambient visual signal would be useful for me.

So I took a couple of hours over the last few evenings and scratched the itch. I made a Firefox add-on which does the following:

* Adds a new Pocket button to the toolbar. (You can remove the old one by right-clicking it and choosing “Remove from Toolbar”). Mine is red. I want to make one that has nice gold double-stitching on it…

* The new button shows a check mark badge when the page is already saved.

* You can click the button to either add or remove the page from Pocket.

* No popup.

That’s it. Simple, clear and out of your way.

INSTALL HERE (WARNING: Experimental side-project software. You’ve been warned.)

Source code: https://github.com/autonome/doublestitch

If you try it out, let me know if you find any bugs or have any ideas for improvements!


Remixable Quilts for the Web

Atul Varma set up a quilt for MozCamp Asia 2012 which I thought was a fantastic tool for that type of event. It provided an engaging visualization, was collaboratively created, and allowed a quick and easy way to dive further into the details about the participating groups.

Screenshot 2014-12-18 15.23.19I wanted to use it for a couple of projects, but the code was tied pretty closely to that specific content and layout.

This week I finally got around to moving the code over to Mozilla Webmaker, so it could be easily copied and remixed. I made a couple of changes:

  • Update font to Open Sans
  • Make it easy and clear how to re-theme the colors
  • Allow arbitrary content in squares

The JS code is still a bit too complex for what’s needed, but it works on Webmaker now!

Screenshot 2014-12-18 15.09.42

View my demo quilt. Hit the “remix” button to clone it and make your own.

The source for the core JS and CSS is at https://github.com/autonome/quilt.


Mozlandia – A Portland mini-guide for Mozillians

Around 1,100 Mozillians will be in Portland next week. WELCOME!

Here is a list of things I recommend that you see, do, eat and drink and some handy tips. I’ve focused on places that are in or near downtown, though included some spots worth going out of your way for.

That said, downtown is not Portland. Well, obviously it’s part of it, duh. But it’s not overly representative of the Portland you’ve heard so much about. Get out of downtown for an evening or afternoon – and check out one of the neighborhoods. Nothing listed here is very far from downtown – Portland is pretty small.

I’ve left a LOT out. And forgot the rest. If you have recommendations, leave them in the comments.

UPDATE: Blue Star donuts, which are far more delicious but far less penis-shaped than Voodoo donuts, will be giving away free beignets on Friday Dec 5.

GENERAL TIPS

  • Portland has no Uber or Uber-like services. If you have Car2Go in your city you can use that here too. Curb is the app for local taxi service through a couple of providers. You can get a bus to pretty much anywhere without too much of a wait. Ride the MAX and streetcar if you’re headed to areas that they service.
  • Oregon has no sales tax. Do your Christmas shopping while you’re here.
  • It gets dark around 16:30 – 17:00, so factor that into any plans for hikes, etc.
  • If you go into the mountains, check the road conditions to see if you need chains for the car, or if the area is accessible at all.
  • Go to Powell’s books. Go a few times. Then go back again. Check out the Science Fiction pillar there – how many have you read?
  • Get high… for a good view of the city: Have a drink at Departures, dinner at Portland City Grill or visit Pittock Mansion for great views of the city. Even driving over the Fremont bridge (Highway 405) provides a spectacular view of downtown, the Willamette River and our many bridges.
  • There aren’t a ton of restaurants/bars/coffeehouses that can hold large numbers of people. If you break up into groups of four (max), you’ll have a much better time and the servers, chefs, baristas and bartenders will like you for it.
  • Be patient. Oregon is home to the slow-food movement in America. Regardless if this explains why your coffee took 20 f***ing minutes to make, it’ll make you feel better to think about that. See also the above note about small group sizes to mitigate the waits.
  • Tipping: I tip a dollar for a good coffee. I generally tip ~20% for any kind of sit-down meal. But I also worked as a barista, server and chef before getting into tech, so I’m biased towards tipping😉

CARTS – Just the 9th & Alder pod for the purposes of this post. If you’re from California – up here they are not “food trucks”, they are “food carts”… even when they are trucks.

  • Hoang’s – Get soup #17.
  • Nong’s khao man gai – Simple and good and oddly famous.
  • Wolf & Bear – Israeli street food that is amazing. And vegan.
  • Güero – Excellent tortas. Add an egg.
  • La Jarochita 2 – Great Mexican cart. The only Mexican cart (aside from Güero) worth going to at the 9th and Alder cart pod.
  • Brunch Box – A cart that graduated to a proper storefront, but is right by the 9th and Alder carts. Great egg sandwiches for breakfast (try the Black and Blue) and terribly good burgers the rest of time. Very fast.
  • Kargi Gogo – Georgian food. The country, not the American state. Irakli says it’s legit too.

DRINK

  • Multnomah Whiskey Library
  • Clyde Common
  • Pepe le Moko
  • Teardrop
  • Bailey’s Taproom

COFFEE

  • Courier – They also make fresh canneles daily.
  • Heart – Excellent coffee.
  • Barista
  • Coffeehouse Northwest
  • Stumptown
  • Case Study
  • Coava – Not downtown but my favorite coffee roaster in town.
  • Ristretto – Not downtown, but fantastic coffee in beautiful spaces. The Nicolai location is especially great – check out the custom metalwork and crazy woodwork, and visit Schoolhouse Electric in the same space.

EAT – I’ve only noted a few of my go-to places, or those that are near where Mozillians are staying, or open late, etc. I’ve got a somewhat-up-to-date list here with more recommendations, but there’s just really too much to cover. Go out and explore.

  • Clyde Common – Always interesting menu, good whiskey selection, great cocktails. Fries + harissa and a cocktail is a great way to end your day and start your evening.
  • Tasty and Alder (downtown) – Shared plates, everything is good.
  • Luc Lac – Vietnamese + cocktails, serves food VERY late, and closest place worth going to that’s also near the Waterfront Marriot.
  • Bunk – Excellent sandwiches.
  • Lardo – Excellent sandwiches as well.
  • Racion – Amazing cocktails and fun Spanish-tinged molecular gastronomy.
  • Little Big Burger – Fast and good late night burger.
  • Not downtown, but places I always want to go back to…
    • Biwa – Izakaya, open late, always amazing. Burger served only after 11pm.
    • Tarad – Northern Thai food, open late. Pok Pok gets all the attention but after living in northern Thailand, this is where we go for the real thing.
    • Mee Sen – Another good Northern Thai food spot we go to.
    • Podnah’s BBQ – Worth heading up into NE Portland for.
    • La Taq – Next door to Podnah’s, fantastic Mexican bar food.
    • Sweedeedee – Most likely to feel like you’re in Portlandia at this spot. Amazing house-baked breads. Tiny. Expect a long wait but good people watching and excellent food.
    • Por Que No (Mississippi location) – Great tacos.
    • Ha & VL – Get the special soup of the day, whatever it is.

NEIGHBORHOODS – Places to walk, eat, drink, shop and experience parts of Portland that are far more interesting than downtown.

EXCURSIONS

  • Columbia Gorge – See Multnomah Falls, the view from Vista House, climb Beacon Rock, stop at the Bonneville Dam and see Herman the Sturgeon, drive across the Bridge of the Gods (and back), then go for lunch at one of the Hood River breweries. Some easy/moderate 1-2 hour hikes I like: Angel’s Rest, the Multnomah/Wahkeena Falls loop, Triple Falls,  Horsetail Falls, Punchbowl Falls, all listed here.
  • Mount Hood – Drive out Highway 26 to the historic Timberline Lodge with amazing views of Mt Hood (if it’s clear), then down to Hood River and head home through the Columbia Gorge on Hwy 84.
  • Mount St Helens – A couple of hours north, but the view of the blast zone and crater from the visitor center on the NW side is well worth it if the view is clear. On the SE side you can hike one mile underground through Ape Cave, and check out the amazing rock formations and brave the cable bridge at Lava Canyon.
  • Oregon Coast – About two hours drive. Walk the promenade at Seaside, get ice cream at Tillamook, watch storms from the tip of Oregon at the mouth of the Columbia river.