Thursday, 30 October 2014

The Web Is... Day One

Another excellent conference from Craig Lockwood — and this is only the first day.

I’m always impressed by the groundedness and open-hearted feeling I get when I attend Craig’s conferences. He curates the speakers not just for their intellectual knowledge and not just for inspiration, but also for their ability to connect to and understand the world and the people in it.

I’m looking forward to tomorrow!

The Web is… Knowledge

Christopher Murphy @fehler, Teaches MFA at Belfast School of Art

  • recommended reading
  • interaction design course (part of Master in Fine Arts)
    • get started with a github profile
  • teaching to see:
    • bauhaus model & visual grammar
    • point > line > plane
  • charlie munger
    • warren buffet’s business partner at Berkshire Hathaway
    • latticework of mental models
    • learning new models in related fields
    • all useful fields to understand interaction design…
  • lollapalooza effect
    • power of ideas together is greater than each by themselves
    • e.g. put a designer & developer together and get more than you would get by themselves
  • nuance and human interaction easier to learn from humans
  • master and apprentice
    • not just a one way relationship
    • master learns to see the world in a new way with fresh eyes
  • apprentice moves on then becomes a journeyman
    • going to different masters
    • gradually starting to teach others
  • ken robinson: have to move to an organic process of education
  • teach a whole mind:
    • need self-belief, manners, confidence, politeness
    • as well as skills in business, design, technology, etc
  • universities move at a glacial pace
    • takes 5 years to change a curriculum…
  • short form courses
    • patterns: josh long
    • general assembly
  • those who can, do; those who care teach

The Web is… Constant

How do we design for constant change… and not go mad

Nathan Ford, Monotype,

  • web design not yet nailed down as a discipline
  • creating repeated success in a volatile environment
  • previously worked as Creative Director at Mark Boulton Design
    • these ideas come from that time
  • team
    • bring the client into the team
    • or bring your team into the client
    • embedding
    • learn empathy…
  • look for a champion on the client side
    • someone who trudges through all the muck
    • make sure they can involve all the stakeholders
    • get the problem stakeholders involved as early as possible
  • no big reveal — eliminate surprises & blame
  • wicked problems
    • term from sociology: massive problems that are hard to define and difficult to resolve
    • web sites are a simpler thing, but their implications often make them behave like a wicked problem
  • measure goals by improvement, not completion
  • when you don’t know, try a lot of things
    • don’t be afraid to throw stuff away
    • failure is ok, but you must keep learning
  • ensure the client writes the user stories
    • can help with a workshop to elucidate
  • work in iterations
    • each iteration should include research, design & building
    • then evaluate and repeat
    • don’t forget to evaluate…
  • always have an available prototype
    • brings the pain of the project earlier
    • lets them show the working consensus to others
  • start with real content
    • if you don’t have any, make it up (NOT lauren ipsum…)
    • motivates client to actually make their own
  • build out grids from content
    • grids within grids
    • content-based items
    • no high-level overarching
  • choose the right css units
    • percent for scaling
    • vw & vh for headlines & page framing — relative to the viewport
    • pixels for media queries — one to one, easier to understand
    • ems and exes for typography
      • exes work better with newer web fonts
      • work on x-height
  • let things get big: but limit on content items
  • example: typekit blog — building out a design based on the Chapparal typeface
  • also leads to simpler testing
    • but still need to test on devices
    • especially type sizes — can be surprising on actual hardware…

The Web is… Everywhere

What we can learn from console browsers

Anna Debenham,

  • new style of inputs: gestures & voice
  • think about small screen and a very big screen
  • everywhere you can stick a screen, eventually there will be a browser
  • “don’t fall prey to convenience of device silos” cameron moll
  • console browser users are (currently) likely to be younger and lower income
  • consoles and web TVs have low memory
  • performance is crucial
  • the xbox browser can pretend to be a windows mobile device
    • probably added to allow simpler interfaces
  • large screen doesn’t always mean more pixels…
  • handheld consoles often have very wide screens
    • often misidentified to show full fat design
    • should probably have a simpler design
  • the PS Vita includes Amazon’s Kindle Fire Silk UA in its agent string…
  • dual screens often have odd behaviour
    • Nintendo 3DS has two screens with different widths…
  • Wii U aiming to be a full entertainment system
    • four different ways to zoom
    • really important for viewing web on TV when text is often too small
    • supports various presentation modes
      • turning mirroring on and off
      • draw curtains, prepare then reveal
      • play video on main screen, while continue to browse
    • can use multiple wiimotes as pointers
  • similar for xbox one
    • using xbox smartglass app
    • supports split screen: game/tv + browser
    • voice and gesture works really well
  • vimeo couch mode:
    • user choice for big screen support
  • microsoft’s design for xbox and windows phone is truly scalable
  • x-webkit-speech — for speech synthesis
    • currently Google Chome only…
  • microsoft has a design guide for kinect
    • really good read to understand gesture design
  • 30% of people this year used a smart TV to browse the web

The Web Is… Playful

See Lee-Delisle @seb_ly

    • used microphones to detect nerf bullets hitting a screen
  • smashingconf opening animation
    • laser light show mapped onto a dome & pipe organ…
    • definitely worth watching the video
  • lunar trails
    • records its trails into
    • then built a physical arcade machine
    • full screen browser, controlled by an arduino pretending to be a keyboard
    • all linked up to a giant wall-hanging plotter
    • based on polar plotter, but using DC servos rather than stepper motors
  • playfulness on the web has died a little bit
    • the little flash games got taken over by the marketing agencies
    • became viral campaigns that nobody wanted
  • internet of things — nobody knows what it’s for yet
    • much more space for being playful :-)

The Web Is… In The Hands of the 97ers

Emma Mulqueeny, Founder of Rewired State and Young Rewired State @hubmum

  • people born in 1997 and later, grew up with social media
  • those born at the beginning have no leadership
  • Ivan Illich: deschooling society
    • “educational webs … transform each moment … into learning, sharing & caring”
  • the 97ers are already doing peer-to-peer learning
  • the discussion about teaching how to code is almost irrelevant
    • the teachers won’t be teaching how to learn line by line
    • role of all-knowing teacher will become irrelevant
    • much about flipping the classroom and enabling the teacher as guide
  • refugees united: dealing with families split up as they crossed the Somali > Kenya border
    • refugees would have similar names, might lie as they’re scared etc
    • YRSer Kevin figured out that storytelling was important
    • designed service to speak a local story into the phone
    • then find stories that roughly match
    • reunited families went from 3% to over 79%
  • identity is crucial to 97ers
    • their stories (not their names) are their identifier
    • tagged photos
    • peer verification
  • try not to police community as that affects identity
  • have a very early understanding of how to influence community
    • they get immediate feedback from youtube/facebook/etc
    • have figured out how to tweak and skew their message until it works
    • can be quite an arrogant generation — they know how to get those likes…
  • going into the world
    • the most unsafe thing they could do would be to work for a big organisation
    • self-employment is much more attractive — feels safer
    • not about making lots of money — more about long-term employment
  • the Wi-Fi is the bedrock of their needs
    • it’s the gateway to their community and therefore their support network
  • they can’t engage with politics until 18 — it’s too late…
    • they engage with policies rather than parties

The Web Is… All Consuming

Keir Whitaker

Best to watch this when the video comes out — I couldn’t do it justice with notes.

  • daily todo: 1 big thing, 3 medium things, some small things

Phil Hawksworth, R/GA @philhawksworth

  • Paul Downey’s 2008 “uberdoodle”: The URL is the Thing
  • Ted Nelson: coined the terms hypertext, hypermedia & transclusion (and teledildonics…)
  • you can link to anything from anywhere — the whole becomes more than the sum of its parts
  • :// => “double-meh”
  • Paul Downey: The Web is Agreement
  • browsers are very liberal in what they accept
  • browsers starting to obscure URLs
    • mobile Safari already hides everything but the host
    • Chrome Canary doing similar thing
    • Jake Archibald: the URL is the share button of the web
  • taco bell #onlyintheapp — no longer have any content on their website
    • and only with access to lots of permissions on your phone
  • google experimented with different shades of blue for links (#41shades)
    • apparently the change made about $200m difference
    • but they lost a designer who said he couldn’t argue for all his design decisions
  • this is for everyone (with javascript enabled) — Dan Williams
  • more than 60% of population of India & China is still offline
    • we will need to support them…

Monday, 29 September 2014

BarCampLondon X

So that was a pretty busy weekend! Thank you to all the organisers and the sponsors for yet another amazing BarCamp London.

If you don’t know what a BarCamp is, go read about how it works, and then come back to read my notes on some of the sessions I attended.

Here’s a picture of all the sessions that the attendees ran over the weekend (that’s a lot!) and it doesn’t list all the random conversations, games and general meeting people that happened outside of the posted schedule.


Dan Hardiker @dhardiker

  • one day workshop
  • aimed at age 8-16
    • 8-9 year olds treated a bit differently — they need a bit more guidance
  • with specific goals
    • make a robot
    • iOS game development
  • want to say “I made that”
  • one child been building iOS apps since age 6:
  • worldwide
  • dominican republic had > 1000 kids over 2 days
  • > 30% people who come are girls/women
  • generally 5 or 6 tracks selected from:
    • minecraft modding
    • scratch
    • python
    • lego mindstorms
    • raspberry pi
    • arduino
    • greenfoot
    • alice
    • kojo
    • iOS
    • mathbreakers
    • NAO robot
  • 4 sessions in a day
  • also go to big conferences and run devoxx4kids for the adults
  • first London event in June
    • got 95% attendance from people who signed up!!
    • 4 x 1hr sessions
    • 40 volunteers
    • had an 11 year-old fly over on his own (met his dad at airport) to run a group of 20 x 11-15 year-olds how to do minecraft modding
    • he also did a closing keynote
  • had the creator of greenfoot teaching how to build a minesweeper game
  • have a load of volunteers available to help children build stuff
  • have a show and tell at the end of the day
  • mindstorms:
    • build the main wheelbase
    • children add grab arms to grab a ball
    • get children to control by hand first
    • program the same steps (5 steps forward etc)
    • add touch & distance sensors
    • program to grab without hard-wiring distance

how to start a hackerspace

Matt Copperwaite @mattcopp

  • start a company - level of protection
    • limited company - need 3 people, can then state not for profit
    • community interest - lots of paperwork
  • business bank account
    • barclays have APIs, £50 cashback at the time…
  • insurance: paid £300/year
    • recommendation from London Hackspace
    • BIS will issue advice on this shortly
  • keep trustees involved
    • raise issues that split them: colour of the logo…!
  • system designed so you can cancel the membership at any point
  • get people signed up with open days
  • people really like laser cutters!

See current UK Hackspaces at:

kinect v2

Mike Taulty @mtaulty

  • v2 is £159 (cheaper than v1 at £199!)
  • HD video
  • infrared
  • depth sensor
  • can track up to 6 bodies (25 skeletal joints)
  • tracks depth from 0.5m to about 8m
  • infrared & depth is much lower res: 512 x 424 pixels
  • body index separates pixels of different bodies
    • lets you do green screen really easily
  • MS’s SDK is Windows only (doesn’t work with Windows VMs since it needs USB 3 & DirectX 11)
  • but libfreenect2 is an alternative open source driver for Mac/Linux

mobile network in a field

Sam Machin @sammachin and Kevin Prince @kevinprince at EMF Camp 2014

  • EMF Camp was c.1200 people
  • runs every two years
  • “a very british burning man” or “glastonbury for nerds”
  • aiming for phone calls but not data
    • mainly because of there was already fast wifi
  • just three base stations, so could simply architecture a fair bit…
  • using OpenBTS, Asterisk + Twilio & Heroku
  • Asterisk server sat in the on-site hosting centre
    • a refrigerated shipping container with servers on pallets
  • recreated phone supply chain by using Amazon & a tent
    • bought some Amazon burner phones on 30 day return…
  • SIMs were the hardest things to sort
    • wanted to play nicely with other networks
    • didn’t want people on real networks to connect to camp network
    • SIMs are pretty expensive: 50p to £1 each
    • hard to order in low quantities
  • bought OpenBTS boxes from RangeNetworks
    • startup in SF
    • mostly selling to small Pacific islands
    • massively cheaper than normal kit (c.$5K)
    • also put one in a search & rescue helicopter in Iceland
    • connects to someone’s phone as it flies over
    • locates to area of a football field
    • allows helicopter to call phone!
  • need spectrum to run in the UK…
    • O2 had some they had forgotten about ;-)
    • concurrent spectrum license: shared by 15 companies
    • better in other countries:
      • Netherlands: just need landowner permission
      • Germany: just need 30 days notice
      • Burning Man: use DARPA military spectrum not in use in the middle of the Nevada desert
  • antennas make a big difference
    • need a proper site survey
  • EMF Camp provide about 40 routers around the site
    • set up in locked portaloos! Datenklos (term from CCC)
  • created everybody’s accounts ahead of time
    • needed to map phone numbers to IMSIs
    • got people to type in last 4 digits of SIM
  • set up voicemail using twilio to record and forward via email
  • SMSs are harder if you need to store & forward
  • dealt with inbound calls by having a single central public number
    • call it and then dial 5 digit account number
  • added outgoing calls as well (via Twilio)
    • limited to c.3 minutes
    • but even so fairly cheap
  • also set up a few group rooms to see if people used them
  • stats:
    • ~200 SIMs handed out
    • ~100 attached users at any time
    • close to 100% coverage
    • about 1800 minutes of twilio
  • ideas for next time:
    • phone boxes
    • POTS to tent: turn up and plug in a BT phone!

managing CSS

Ben Scott @BPScott

  • people keep on writing new CSS
  • not obvious how and where things are used
  • no confidence in what you can change and if it will break anything
  • build smaller isolated things
    • single responsibilities


  • components
    • domain-specific objects
    • text next to image in a particular way
  • macro layout
    • grid system
    • layout of components within a page
  • theming
    • colouring of components

resulting composition

  • this thing, here on the page, in this colour
  • mobile first & extend from core functionality
    • much easier to reason about adding in CSS
    • harder to take things out
  • use additional classes to toggle additional behaviour
  • Brad Frost: atomic design
    • pages are accidents — what happens when you put components in a particular order
  • create a styleguide page
    • component, layout variations
    • automatically generated from HTML partials in application
    • HTML partials are essentially custom tags


  • avoid using IDs in CSS selectors
  • try to keep selectors to max 3 levels
  • naming convention: BEM
    • double underscore = within
    • double hyphen = modifier

problems & breaking up

  • mobile first, but oldIE needs to be desktop first as it doesn’t understand media queries
  • could use respond.js but takes a lot longer to load
  • created Breakup
    • SASS/Compass plugin
    • generates different CSS files from the same SASS input
    • according to directives in top-level
    • lets you avoid wrapping specific elements in media queries

real life brain training


  • split activity into different frequency bands = EEG
  • delta < 4 KHz
    • babies have this all the time
  • theta 4 - 7 KHz
  • alpha 7 - 14 KHz
  • beta 15 - 30 KHz
    • focused
  • gamma 30 - 100 KHz
    • complex active stuff
  • other stuff:
    • Mu (8 - 12 KHz)
    • SMR (13 - 15 KHz)
  • neurofeedback
    • constant feedback, close to realtime (~200ms)
    • useful to use more than one sense to enable different people to relate to it better
  • current system has five measurement points
  • Chief Science Office is Leslie Sherlin


  • focus:
    • augment low beta
    • inhibit theta & alpha
  • can train stress response too
  • sports consistency
  • exam preparation


  • QA engineer was overusing focus training
  • had problems sleeping…

uses (not scientifically proven)

  • worked with Felix Baumgartner
  • tennis players
  • reported to alleviate long term ADHD…
  • improved sleep patterns amongst developers…

available systems

  • medical
    • existing $10K for bare minimum
    • require expensive software, only run on Windows XP
  • kickstarter systems
    • cool, but not much neuroscientist input
    • not so accurate or useful
  • versus
    • looks like headphones
    • rebaseline every time you put it on
    • connects over bluetooth to iPad
    • uses dry spikes sensors that contact scalp
    • first consumer product $750, aiming for $500

toys & gadgets

  • thalmic myo
    • bluetooth armband picking up arm and hand actions
  • oculus rift
  • NFC ring
    • lower range than usual
    • internal and external tags (private & public?)
  • Google Glass
  • estimote beacons
    • use at least three to get indoor location fixes
    • google have set up mountain view…
  • chromecast
    • don’t bother with a digital picture frame — just get a cheap TV and one of these
    • great for broadcasting any media around the house
  • almond+ touchscreen router & home security
  • 3D printer
    • check out 3d printer subreddit
    • solidoodle
    • arduino will be launching one v. soon
  • MIOPS camera trigger
    • plugs in to flash hotshoe
    • light sensor
    • laser sensor

scaling agile

Matt Walton, Head of Product @ FutureLearn @matt_walton


  • have documented a lot of their processes
  • think it, build it, ship it, tweak it
  • now about 2000 people
  • squads consist of engineers, designers & agile coaches
  • autonomous teams with long running missions
  • spotify engineering culture
  • “agile at scale requires trust at scale”


  • lots of information radiators
  • product roadmap split into team “swimlanes”
  • have a scrum of scrums


  • similar teams
  • each team needs:
    • product management
    • design lead
    • tech lead
  • how to organise a roadmap
    • KIPs broken into themes
    • time box themes
    • agree measurements
    • form autonomous team
  • lean analytics (book)
    • ratio or rate, not a total number
  • business focussed aims:
    • if … then … because
    • based on lean analytics experiments
  • two backlogs: separate “hygiene”
    • then add 70% valid features, 30% bugs, tech support to each iteration


  • product strategy themed by vision areas
  • each sprint split by % of work for BAU, products, etc
  • standups and retrospectives still whole team to encourage community
  • though work done in smaller project teams


  • share vision, mission & values
  • give autonomy and create community
  • rhythm & reflection

MomoLondon: Demo Night 2014

Amazingly enough this demo night finished on time and even a little bit early. Thanks to Julia Shalet for keeping things running smoothly on the night and Jo Rabin too for the varied selection of demos — lots of great ideas.

Pictures and more commentary on the Mobile Monday Blog.

5 Tiles

Android keyboard app

Previous demo night success

  • Christian Lindholm now an advisor & investor
  • available on Android Wear (Samsung Gear)
  • soon available on iOS


Benjamin Bourdin,

  • realtime video sharing
  • get any IP feed, apply title, edit
  • save & share using twitter, facebook, ooyala, brightcove etc
  • monetize through in-stream ads
  • initial customers are broadcasters
  • done deals with ITV & Sky Sports
  • also did wimbledon & big brother
  • also have a consumer platform: if a broadcaster wants to get people involved in sharing content

Good Food Talks

Matt Wadsworth,

  • web app to let visually impaired people read restaurant menus
  • a very few menus offer braille but only 1% of visually impaired people can read braille
  • surveyed 5000 people — main complaint was difficult navigation
  • web app has simple navigation
    • search/near me > restaurant name > menu
  • free for users
  • various ways of getting data in
    • restaurants pay for input
    • API ingest, full service, etc
  • commercial for just over a year
  • 400 venues
  • biggest so far is Carluccio’s, then Pret


Chris Michael, CEO,

  • additional mobile numbers on your phone
  • just closing alpha tester list
  • free credits to alpha testers
  • only service that allows you to have multiple UK mobile numbers on your phone
  • aiming for worldwide too


Ian Masters & Albert Marshall,

  • mobile quiz games
  • opt-in adverts for rewards
  • all four versions are available on iOS, Google & Amazon
    • movies, pop, world football, video games
  • targeting around existing passions
  • also want to target venues with seats


Martin Sandstrom & Mark Lee,

  • split your bill when you live in a house share
  • direct connection to various providers
    • energy, TV, phone, etc
  • push notifications to other housemates
  • settle bill with paypal (peer to peer is free)
  • no business model at moment
    • aiming for future paid features
  • aiming to attract lots of users first…
  • app available for iOS and Android


Douglas Robb,

  • location-enabled augmented reality
  • Android & iOS apps, CMS for template-based content
  • content discovery & engagement
  • can control timing of content as well
  • also support image-recognition-based AR
  • first commercial partner is Jockey Club
  • prototype app for Sandown Race Course
  • involving novice race-goers in the racing
  • planning to roll out to other Jockey Club venues


James Roy Poulter,

  • food to wherever you are
  • don’t need an address
  • only get a choice of four options (different each day)
  • authenticate through nexmo API by voice call
  • credit card payments only
  • launched 100 days ago in Trento, Italy
  • initially iOS only, then Android, + Windows coming next week
  • launching next week in London (now available in the City)
  • won an accelerator in Italy
  • worked with restaurants in Italy, but difficult for food in 10 minutes
  • aiming to get own centralized kitchen as margins are incredible
  • also get drivers — performance based pay
  • but made easier with centralized kitchen with limited delivery range


Frederick Tubiermont,

  • create mobile web apps on mobile for mobile
  • can now create apps on desktop too
  • web apps are square shaped
  • magic touch swipe to choose link destination
    • includes email, telephone
  • can embed videos, twitter feeds, etc
  • can embed adsy apps in web pages or just view on mobile
  • use case:
    • kids & teens making a web app about a concert during a concert
    • then sharing the evolving content
  • meant to create snackable content
  • will announce a product based on the platform in 2-3 weeks


Matthew Bridge,

  • business critical messages to smart watches
  • useful feature: view on device — opens up more detail on the phone through quick selection on watch
  • driven from enterprise resource planning
  • staff can subscribe to specific notifications


Mark Hill and Damon Hart-Davis,

  • 60% of your energy and 20% of UK emissions flow through TRVs
  • 50% of that energy is wasted
  • one thermostat usually controls whole house
  • target price £10 per radiator: save £300 in the first year
  • production samples coming mid-November
  • hotels losing £50 per room per year on heating bills