One Web For All hackathon #owfa

I joined One Web For All hackathon this weekend.

Unlike the normal hackathons, One Web For All hackathon's activity is not just to code, but to put together a series of resources that address and counter many systemic issues people are facing every day, such as exclusive work cultures, hostile online communities, and more. These resources will support anyone interested in working towards a better, more inclusive world.

One Web For All is a new grassroots, non-profit organization helping businesses and individuals learn more about creating welcoming, inclusive cultures.



Projects that attendees worked on are as follows:

Callback Women

Twitter, website, gittip

Callback women is an initiative to increase diversity at tech conferences, and inspiring women to speak. During this hackathon, they analyzed data of call for proposals at tech conferences.

They were only able to collect from 38 conferences since gathering those information was hard, but findings from those data includes:

-39% had code of conduct. They realized Ada Initiative's code of conduct was used as a template and 67% was using it. Some are using their own original ones, but probably better to use the one that already works.



-Not only speaking opportunities, but workshops and tutorials might pay you as well.



-Anonymizing 1st round of evaluation is very crucial in making diversity in speakers.
-In some of the conferences, proposers of sessions get discounts, even if you don't get to be the speaker, so start posting proposals to speak!
-Some of the things for organizers to think about - who books/pays for travel? Booking is burden for speakers.. Speaker support- organizers should make sure that you support the speakers, especially for first time speakers.
-Conferences that provide child care is rare.
-Some conference offer diversity scholarship.



A Guide to Class Mobility

Everyone knows the value of learning how to code, but there is a huge gap between not knowing how to program at all, to going over Python the Hard Way, to being paid for building apps. Especially for people coming from low income and don’t have resources to devote to starting a new career, it is hard. A guide to class mobility is a comprehensive guide for getting people from “just learned high school math” to “paid programmer”. 

Website: http://lynnco.github.io/AGuideToClassMobility/

The topic covers how to get internship, why you should learn Python, etc.





Publisher Ethics Guidelines

Publisher Ethics Guidelines is a set of guidelines for publishers and writers. It includes tips for the writers to write about diversity, ethics guidelines, style guidelines, social justice101, making web apps accessible, etc. It is on Google Docs now... will probably land on a website in the future.



Flaminga

Website: flamin.ga

Have you ever been annoyed by trolls, spams or stalkers? Flaminga is a troll-proof Twitter client for Twitter users that combats harassment and known hostile behaviors.

You can filter out new accounts based on when this account was created, since there are lots of spam accounts that is mass-produced by spammers.



Yay! Filtered mentions with less spams :)

Solidarity Mark

Website: biscuitsandcode.com/mark

This is a project to raise awareness of a cause by changing avatar of social media, doing Avatar Activism. 

Ex) Do you think gender is binary? When you see that question on Solidarity Mark, the reply is not binary, and there is a slider that users can shift, so that the users can start thinking about this problem. Then, they will get Facebook avatars geared to specific cause.





Moving GeekFeminism website to Wordpress

Website: http://geekfeminism.org/
Moved to Wordpress, with better UI, design, etc.



Gather Ye Links - is a link app for the geek feminism blog.



Refuge Restrooms

Website: http://www.refugerestrooms.org/

There is a website that points to gender neutral restrooms, such as Safe2pee.org. However, you could not search, you could not see them on a map, etc. The presenter worked on something similar during other hackathon, but it was with Javascript and Python which she is not familiar with, so she created this new Refuge Restroom site on Ruby on Rails during this hackathon. You can search by address, you can see them on map, you can filter them, etc.







onewebforall.meteor.com

A service for communities to share, aggregate and vote on links amongst their community effectively.

Website: http://onewebforall.meteor.com/





Anita's Quilt

Anita's Quilt is a site that is a collection of stories from the Anita Borg Institute Community to inspire people.





Webrates.org

Website: http://zaach.github.io/webrates/

One of the things that makes freelancers' life difficult is lack of transparency in rates of the services. Webrates is a website that enables freelancers to share their hourly rate, so that they can find out appropriate rates, and help making freelancer rates more transparent.







Project list can be seen here:

Flaminga, a Troll-Proof Twitter Client
A Guide to Class Mobility
Publisher Ethics Guidelines
Avatar Activism: Solidarity Mark
Data-Vis/Infographics
Surveys for Social Change
Setting The Record Straight
Always Crashing: Debunking Faulty Arguments
A Glossary for Diversity
Citation Needed Provided
Video Interviews
Gathering resources for diversity in tech
Books people should read
Lists of videos for employees to watch

Registration

This was at the registration. Since not everyone is physically born with the gender that they prefer to be referred to (him or her), at this hackathon you write your preferred pronoun (how you want to be referred as) on the name tag. This was the first time I saw this at tech conferences or hackathon.



Photos:

Venue was at New Relic office- very spacey and colorful.





Lots of colorful post-its :)



Thanks to the organizers of this event!





Some tweets:

It was interesting to hear the inspiration for this hackathon was from another hackathon that one of the organizers joined- it was very competitive and stressful for her. This hackathon was really different from ordinary hackathons in many aspects, and I learned a lot!

#owfa is a COLLAB-athon not a COMPETE-athon @allisonmcooper is so much more tweetable than me, lol
— cori (@iroc) February 3, 2014

“I don’t go to hackathons to win prizes…I go for the joy of building smthng I’m passionate about.” https://t.co/eHpA4KxrXe #OWFA v:@nickelmu
— One Web For All (@OneWebForAll) February 2, 2014

Most of the amazing projects at the #owfa hackathon today would never appeal to VCs and that is why this type of event is so necessary.
— cori (@iroc) February 2, 2014

Disclaimer: The opinions expressed here are my own, and do not reflect those of my employer. -Fumi Yamazaki

Hack for Peace in the Middle East #hackforpeace

Today, I came to join a hackathon called Hack for Peace in the Middle East.



Opening Talk

Quotes from the talk:

"Let's make peace through technology from bottom-up, if we can't make peace through politics." "Middle East needs more communication."

======================================================

Talks from entrepreneurs from Middle East

This was an opportunity for us to learn how business cultures and environments are different.



Presella.com from Lebanon

Users create an unconfirmed event (like concerts), set the target number of tickets they'd like to sell, and run the event only if the target is reached. The other ways is to presell regular confirmed events by offering perks and discounts on early bird tickets. They defined themselves as "KickStarter for ticket sales".

They also talked about how different the payment environment is- credit card is not norm, and when they started, more than 85% of payment was offline, but now only few people prefer to pay offline. However, people in Middle East still are not willing to use credit card online, so they need to adjust to that. They are thinking of using Bitcoin, and if that happens, they will be first company in Middle East to use Bitcoin ;) They have no competitor, because nobody else in Middle East is selling event tickets online. (Wow!)

Mena360.com from Dubai, UAE

They resell products and contents from non-Arabic countries to Arabic countries, defined themselves as a "gateway for e-commerce in Arab". There are lots of barriers for non-Arab companies to enter the market, including language translation, business custom difference, cultural difference, etc. FedEx's service is not sufficient to run logistics in Arab, financial culture is different, and it is too much work for customers to return products- so Mena360 is a service that resolves all those issues specific to Arab world.

Trochet from Saudi Arabia

Trochet is a word that mixed "trash" and "crochet", the project gathers recycled plastic bags and sends them to women in need to knit or crochet them to produce bean-bags etc. Trochet then sells the products and uses the money to support the women.





Disrupt CK from Tunisia

They defined themselves as "Shazam for TV"- and that they enable users to use e-commerce via TV screens.

Qordoba.com from Dubai, UAE

Qordoba is a translation service, using human translation and machine translation. They actually have 1,200 certified linguists to translate, in 25 languages. Their clients are government agencies and airlines, basically customers that have enough budget and wants high quality translation. They are also creating E-reader which is cheap and high quality- he said it is less than1mm.

Crowdsway from Cairo, Egypt

Crowdsway is a service that helps to connect filmmakers to small businesses that wants to get videos created, although they are going to pivot to a service to engage customers.

======================================================

Presentation by Stanford Peace Innovation Lab

There is a new concept "Peace for profit".  The question is, how good can humans be to each other?

Human trends- urban, dense, coastal, networked. There will be 3-5 billion people living in cities. There will be censors, things will be ubiquitous, social & interpersonal. Measuring, modeling and predicting will be enabled by those data.

In the past, we only had human to human direct interactions, but now how people engage with others have changed. People can publish episodes of stories, and those episodes will be shared without human interactions.



Peace building stack. How can humans be nicer to each other? Past efforts for peace was focused on how to reduce bad things to happen (like conflicts). How can we increase awareness, attention, communication, coordination, cooperation, collaboration and collective intelligence to lead to sustainable peace? There's no perfect solution for peace, but we can improve.



Design Principles for Peace Tech:

Share what doesn't work.
Start with TINY behaviors. Don't start shooting for making big changes when working for peace.



Peace Innovation Design Loop.

"The real threat is behavior, not the person."
Design behavior. Trigger behavior.
Staying in other people's house is scary, especially if you don't know who that person is. But if we think about AirBnB, it changed the game by data, information, and social aspect.

More talk about Behavior Design.

How do we drive people to do something? What is the trigger, motivation, ability to make someone do something?
- It needs to be simple and clear. Usually commitment to repeat is hard, so temporal aspect is important too.



"Core loop" 

Understanding what is the sequence for your service.
ex)  Angrybirds
Play the game, satisfaction, and repeat.

How do we have users repeat with more complicated service?
ex) Amazon
Search, purchase, pay.
Amazon provides things like recommendation and local deals to make you repeat.

"If you can't measure, you can't impact."
In the past, non-profits were bad at measuring- and the outcomes were merely you "feel good". Measuring is important.

Behavior design for health: Nike



Behavior design for civility: Lyft Rideshare

Car-sharing existed before Lyft, but it was hard! You didn't know who the driver was, if he or she is a nice person, etc. With data, users are much more comfortable doing car sharing, and people's behavior changed, because it will all be visible by data. People try to do good actions, incentivized to be good.



Behavior Design for Community Cohesion: NextDoor

NextDoor is a hyper local network. The speaker lives in Palo Alto, but since she needs to work during the day, she has not had opportunities to know her neighbors, and talk with her neighbors until she used NextDoor. She knows who has small children like her, what they like, and feels more comfortable talking with them when she sees them on the street. "NextDoor enable us to be sociable."



Lastly some comments:

Start by gaining empathy
Reframe the problem
Precisely define behavior

Ideate: generate alternatives to test

Iterate based on feedback and data

Build and test again

======================================================

Attendees idea pitch for the hackathon

Fisking
Building a fact-checking platform. This participant went to Iraq for military, which he regrets but he lacked information to make conscious decision. So, he started to build an online platform that can take news articles, and crowdsource commenting and fact-checking those articles to point out what is false information, what is biased article, what is propaganda, etc.

Platform to monetize videos

Online platform to tackle weight loss in group

An app to inform the police officer if the person is good or not

Power partners
A platform for users to share their skills, connect and create teams

A service for women to share and sell their food
In some countries in Middle East, women's work is to cook for the family. If we made a service for them to create extra few plates and sell, and contribute to the family income, it will empower women's status. Targeting tourists as well.

Solving the unemployment problem in Tunisia
Unemployment is a huge problem in Tunisia, especially after the revolution, Tunisia is seen as a country that is not safe, so tourists won't come, and 7,000 people lost their jobs.

Make a business model for Time banks

Disaster Information Platform
During disaster, people needs to localize information, find people, donate money, etc.

Foodies without borders
Create empathy through food photos. foodunites.us

Communication tool for disaster

Service to share knowledge and information for Peeks (Palestine geeks)

A service to combine Groupon and Meetup and make it better
Better function to meetup.com so that participants can communicate within the community. For example, if they went rockclimbing together, they can also get discounts and go to bar together after that.

Something like Coca-Cola "Small World Machines" campaign
This campaign brought people in Pakistan and India together. Also, it is notable that Coca-Cola was not using their philanthropy budget but ad budget, and making this campaign business sense.



Other things to think about- governments can shut down your service. In MiddleEast, we already saw that happen in the past. Force can't fix things!

Some more pictures from hackathon:







Disclaimer: The opinions expressed here are my own, and do not reflect those of my employer. -Fumi Yamazaki

All About WebGL #sfhtml5

I joined SFHTML5 event on "All about WebGL" last week.

If you've missed it, the video archive is here!



Peter Lubbers opening the event.



Talk #1: Introduction to WebGL with Tony Parisi 

What started as a brave experiment four years ago is now a full-fledged part of the HTML5 application platform. WebGL provides real-time, hardware-accelerated 3D graphics to anyone with a browser. To create these experiences, all you need is a text editor and a little imagination. WebGL is being used worldwide to create games, virtual environments, page graphics and data visualization, and it now runs on all desktop browsers and nearly all mobile devices. Tony will give a brief, somewhat technical introduction to WebGL, provide a quick survey of what’s hot and what’s hype, and share his thoughts about where this exciting new technology is headed.

WebGL support by browsers as of 2014/1/26:
http://caniuse.com/#search=webgl%20

Tony showed lots of awesome WebGL examples.

100,000 Stars Google Experiment







His slides are up here:

An Introduction to WebGL - SFHTML5 Talk January 2014 from Tony Parisi

Talk #2: Optimizing WebGL Applications with +Don Olmstead 

WebGL allows developers to create fully 3D worlds within the context of the browser. However the API itself is very low level, and if used improperly can cause a performance bottleneck within the application. To effectively use the API its necessary to understand both how WebGL works and how an application uses the interface. To illustrate this the optimization of the PlayStation 4 UX, the largest site built completely on top of WebGL, will be discussed.

Did you know that PlayStation 4 UX was built on WebGL? That is totally awesome!



His slides are up here:




Talk #3: WebGL and real-time web communication with Victor Sand

You can sign up for Goo Engine here> http://www.gootechnologies.com/products/engine/

As we have seen, WebGL is a very powerful tool for enriching the Web with graphics, but how do we get it into the hands of the creators? How do we provide the myriad Web developers with powerful and sharpened mechanisms that take away the hassle of specialized and redundant ground work? Victor will highlight some aspects in building years of experience into a smooth pipeline, providing coders and artists alike with a sturdy and powerful web graphics tool. Then, Victorwill demonstrate how WebGL experiences created with Goo Engine can be elevated to the next level by making them even more immersive and engaging. They will show how you can use any smartphone connected to the public Internet to remotely control WebGL applications and games. Last, Victor will demonstrate how this communication pattern can be applied to control Web connected physical objects from continents away.

Slides

SFHTML5 WebGL Meetup - Jan 23, 2014 from pmoskovi

Talk #4: Finding (and Making) your Happy Place with Isaac Cohen 

Inspiring talk!

We as coders are by definition creators, our tools are html5 and our canvas the internet itself. Because of the power of the tools we possess, we are able to ask emotional questions through code. By spending time creating exactly what we want to create, we not only manifest a space that we can go to as an escape, but additionally provide an free oasis for the rest of humanity to explore. In this talk we will look at a few of these digital playgrounds, and additionally actualize a project of our own using WebRTC , the Web Audio API , and Three.js

Isaac's slides
Isaac's talk

The room was packed- actually they had 500 people in the waiting list so opened the cafe to accommodate more people!



Great view



Lots of food and wine



Thanks to Peter, Vanessa and all the staffs that made this event happen!

Disclaimer: The opinions expressed here are my own, and do not reflect those of my employer. -Fumi Yamazaki

Trying out Google Now

I tried using a sample app that Devnook created that enables you to send emails with embedded structured data in gmail. Those embedded structured data are used in Google Now too.

Source code: https://github.com/devnook/google-now
Deployed environment: gmail-actions.appspot.com

Several sample tests:

1. One click action test

<html>
  <head>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "EmailMessage",
      "description": "Approval request for John's $10.13 expense for office supplies",
      "action": {
        "@type": "ConfirmAction",
        "name": "Approve Expense",
        "handler": {
          "@type": "HttpActionHandler",
          "url": "http://gmail-actions.appspot.com/success/AHRlWrqkhM0P6ZxW3u-P4nBk1eip-mh650NKMzdMXuUNlLJitOhhrDYTv8zpac5OpEELdjeTht5zBqYD1sVSIOvnl2vEQCLI8ur4wsSThoixnHJrH50a6m5mfuQGmcGsS-U7QMSszwiR"
        }
      }
    }
    </script>
  </head>
  <body>

      This a test for a One-click action in Gmail.

  </body>
</html>

And you get email with one click action.

2. Rate Action test

<html>
  <head>
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "EmailMessage",
        "description": "We hope you enjoyed your meal at Joe's Diner. Please rate your experience.",
        "action": {
          "@type": "ReviewAction",
          "review": {
            "@type": "Review",
            "itemReviewed": {
              "@type": "FoodEstablishment",
              "name": "Joe's Diner"
            },
            "reviewRating": {
              "@type": "Rating",
              "bestRating": "5",
              "worstRating": "1"
            }
          },
          "handler": {
            "@type": "HttpActionHandler",
            "url": "http://gmail-actions.appspot.com/success/AHRlWrqkhM0P6ZxW3u-P4nBk1eip-mh650NKMzdMXuUNlLJitOhhrDYTv8zpac5OpEELdjeTht5zBqYD1sVSIOvnl2vEQCLI8ur4wsSThoixnHJrH50a6m5mfuQGmcGsS-U7QMSszwiR",
            "requiredProperty": {
              "@type": "Property",
              "name": "review.reviewRating.ratingValue"
            },
            "method": "http://schema.org/HttpRequestMethod/POST"
          }
        }
      }
    </script>
  </head>
  <body>
    <p>
      This a test for a Rate action in Gmail.
    </p>
  </body>
</html>

And you get email with rate action.

3.Restaurant reservation

<html>
  <head>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "FoodEstablishmentReservation",
      "reservationNumber": "OT12345",
      "underName": {
        "@type": "Person",
        "name": "John Smith"
      },
      "reservationFor": {
        "@type": "FoodEstablishment",
        "name": "Wagamama",
        "telephone": "044755755755",
        "address": {
          "@type": "PostalAddress",
          "streetAddress": "1 Tavistock Street",
          "addressLocality": "London",
          "addressRegion": "Greater London",
          "postalCode": "WC2E 7PG",
          "addressCountry": "United Kingdom"
        }
      },
      "startTime": "",
      "partySize": "2",
    "reservationStatus": "confirmed",
    "modifiedTime": "2013-11-03T21:00:00+01:00",
    "modifyReservationUrl": "http://gmail-actions.appspot.com/success/AHRlWrqkhM0P6ZxW3u-P4nBk1eip-mh650NKMzdMXuUNlLJitOhhrDYTv8zpac5OpEELdjeTht5zBqYD1sVSIOvnl2vEQCLI8ur4wsSThoixnHJrH50a6m5mfuQGmcGsS-U7QMSszwiR"
    }
    </script>
  </head>
  <body>
    <p>
      This a test for a Restaurant reservation Google Now card in Gmail.
    </p>
  </body>
</html>

And you get email with the action to change your reservation.

Actions you can use: https://developers.google.com/gmail/actions/actions/actions-overview

Google Now Card schemas: https://developers.google.com/schemas/now/cards

Disclaimer: The opinions expressed here are my own, and do not reflect those of my employer. -Fumi Yamazaki