Google IO 2017 – Web Development Notes

Lighthouse is being integrated directly into dev tools

Firebase now gives a real time analytics. Cloud functions for Firebase sounds like Akamai for small node functions, like resizing images. But being able to handle these tasks in a global, cached environment.

Google IO: state of the mobile web

Chrome’s mission: move the web platform forward

Real world javascript language performance: key focus for this past year. How does V8 perform in real world scenarios, not just perfect testing spaces.  35% increase in performance since last year on Android

scroll anchoring: page jumps after content loads after page renders, such as a banner ad. This locks the screen, even when content loads at the top. Scroll anchoring can reduce 3 page jumps per load on average.

AMP: Accelerated Mobile Pages. improve mobile experience.

  • On average, AMP pages load in less than a second and use 10x less data
  • LinkedIN found people were 10% more likely to read an article when it is AMP .
  • amp-bind: merchants can build e-commerce experiences
  • Progressive web apps: app focused experiences, reliable, fast, engaging.

Mobile Twitter just relaunched as a PWA

  • Fast loading on slow networks, less data, works well on smart phones.
  • Data saver mode can reduce data downloads by 70%
  • Introducing Twitter Lite | Twitter Blogs

Twitter Lite is a more accessible, faster and more affordable way for people to use Twitter when they are on slow mobile networks, have expensive data plans and with limited storage on their mobile device.

PWAs can be added to the home screen. Developers can soon control the home page button prompt. They can be displayed in app launcher, android settings, android intents, notifications, and launch as a full-screen immersive view

Mobile payments

  • 123B in US alone
  • paymentRequest – simple web payments within Chrome
  • paymentRequest can now use more forms of payment. paypal, alipay, samsung pay… could this integrate quickbooks payments?

Media

  • 70% of internet traffic is video.
  • Biograf: This is a sample video-rich PWA app
  • Notice this has an airplane mode and allows video download
  • Workbox is a tool to better manage service workers

Polymer 2.0 launches today. 10% faster and 80% smaller

Ola Cabs

India’s largest ride sharing app. They are using PWA. over 1m daily rides. 110 cities and 600k drivers. They needed to work with customers that use low cost phones, minimal data plans, and bad connections to reach the entire customer base.

Off line and caching provides faster performance with low data loads. They used polymer for fast web components, Shadow DOM, and HTML import.

  • They rely heavily on cache, but also have an initial load of 1.3 seconds.
  • They strategically load components to only get critical elements first.
  • They are using workbox, they cache these elements for repeated use.
  • Now, they are only requesting new data, such as transaction information.
  • They have a 100 score in lighthouse
  • 20% of their PWA bookings come from users that previously uninstalled their Android app

AMP to PWA

<amp-install-serviceworker>. This takes an AMP page and allows it to install a service worker so a user shifts to a PWA when they click. This gives the fast initial page load of an AMP page and prepares the browser to make the second page load just as fast.

Let’s say someone shares a PWA page with a friend. We’d want the friend to have a fast page load, but if they go to a PWA page as the first experience, they won’t get the acceleration via the service worker. So we could do some detection at the page load to see if the service worker is available, if not, move to the AMP experience of that page.

Shadow DOM and iFrames

Use shadowDOM to update an AMP page with new content to create a fast, progressive web app

This is good for a site that has a lot of static content, such as our marketing site. it wouldn’t be logical for an application, such as QBO

Mobile Vaani, get feedback on your product design via this network for rural India.

Web4All Conference Notes – Day 3

Crowd sourcing accessibility evaluations

2013-6: 350 government web sites and 2,000 non-government sites have been evaluated for accessibly in China

conformance testing included

  • Automatic Evaluation
  • Manual Assessment

Crowd sourcing can integrate the power of crowds to solve the manual assessment bottleneck

It was proposed in 2006 and has been used in reCaptcha, spoken wikipedia, labeling.

the current crowd sourcing is not suitable for web accessibility because the assessment tasks require a high level of expertise and experience.

There was an assignment of tasks. The results were compared to

  • total work
  • time out
  • give up
  • errors detected.

An algorithm was developed to compare these values to determine a cost model. This allows them to look at historical data to find that a person is more efficient at one of the rulesets. For instance a completely blind person may be great at form labels but not at color contrast.

Assessment of semantic taxonomies for blind indoor navigation based on a shopping center use case

Location-based services (LBS)
Untitled

  • many LBS are available  thanks to smart phones
  • provide turn by turn navigation support using vocal instructions
  • we know little about what environmental elements an features are useful, such as tactile paving or braille buttons

The did a survey of taxonomies

Looking at these data sets, they created a simplified taxonomy based on their similarities

  • Pathways
  • doorways
  • elevators
  • venues
  • obstacles (not included in the previous taxonomies)

These elements defined by their fixed positions within floor map. Vocal instructions use this information to generate vocal instructions. Locate tactile paving:

  • “proceed 9 meters on braille blocks, and turn right”
  • “proceed 20 meters, there are obstacles on both sides”

Announcements of obstacles and tactile paving was confusing and unnecessary for one guide dog user.

Do web users with autism experience barriers when searching for information within web pages

The study looked at eye gazing to see if there was a difference between two groups: with and without autism.

With a series of search tasks, the group with autism had less success than the control group for completing the tasks.

tracking the eye gaze. Five elements: a, b, c, d, e. Their eye map could be a-b-c-e-d

Check the variance between the two groups.

DysMusic

The #DysMusic study is creating a language independent test for detecting #dyslexia in children. #w4a2017 @luzrello

Most dyslexia detection tools are still linguistics based, which isn’t appropriate until the child is already 7-12 years old. This study tries to find a detection method that is non-language based, this would allow detection at a much younger age.

There is a memory game with music elements.

Tasks

  • Find the matching sounds
  • distinguish between sounds
  • short time interval perception

Raw sound is modified via frequency, length, rise time, rhythm.  Only one property is modified at a time. People with dyslexia tend to have trouble detecting rise time changes.

Accessibility Challenge

Producing Accessible Statistics Diagrams in R

Data visualization is increasingly important. R is an existing language for statistics. Jonathan (co-writer) had been using R to output printed diagrams of statistics. They worked together to convert R into an accessible SVG format

Histograms and Boxplots were discrete data presentations  targeted layout for the initial project. Time series and scatter plots are continuous data graphs

Extract the important data points, convert it to an xml document, and attach this to the SVG. The final experience provide easy navigation (arrow keys), supports screen readers via aria live regions.

GazeTheWeb

GazeTheWeb is a simplified browser designed for eye tracking navigation. #w4a2017 #a11y

Math Melodies

Math Melodies makes math easier to learn for children that are blind or low-vision. Math exercises as puzzles, audio icon maps, different exercises. It was funded via crowdfunding and has been downloaded 1400 times

NavCog

NavCog is a navigation project from CMU for blind individuals. It uses low energy blue tooth beacons.

Installation of the beacons is not scalable across large areas. To crowd source the task, they created a set of instructions to walk through the process of configuring and installing the beacons.

LuzDeploy

LuzDeploy is a Facebook messenger bot: easy to use.

VizLens:

VizLens is a crowd sourced interpretation of interfaces, such as microwave oven. Multiple volunteers are recruited to generate labels for the interface. the app then uses augmented reality to virtually overlay the labels.

Chatty Books

Chatty Books is an html5 + Daisy reader that creates an audio version of documents. It can now convert from pdf to multimedia Daisy.

  1. PDF – NiftyReader (text)
  2. export to multimedia daisy or epub3
  3. drag and drop to chatty books, the daisy player and library
  4. upload daisy content to chatty books service (cloud) and use chatty books app on iPad

Able to read my mail

Simplified email program for people with learning and intellectual disabilities. Gmail plugin that converts to simplified text or pictograms.

Closed ASL Interpreting for online videos

Created a framework for incorporating an interpreter. Closed Interpreting, instead of Closed captioning.

the interpreter window needs to be flexible to allow the user to move it around and change size to reduce distractions. IT’s closed, so i can be turned on/off

Moving the eyes back and forth for long periods of time can be exhausting. so the window can be moved to be closer to the screen’s content.

eye-gaze tracking to pause the video when looking away from the video.

Closed Interpreting [CI]

Provide a video interface that allows closed interpreting, like closed captioning. The interface provides a second screen that includes an ASL interpreter

The users appreciated the ability to customize the interpreter’s location. They also liked the ability to pause the interpreter as the gaze moved from content to the interpreter

Security Notes WWW Conference 2017

Who controls the internet?

“The Internet is built on top of intertwined network services, e.g., email, DNS, and content distribution networks operated by private or governmental organizations. Recent events have shown that these organizations may, knowingly or unknowingly, be part of global-scale security incidents including state-sponsored mass surveillance programs and large-scale DDoS attacks.

For example, in March 2015 the Great Cannon attack has shown that an Internet service provider can weaponize millions of Web browsers and turn them into DDoS bots by injecting malicious JavaScript code into transiting TCP connections. While attack techniques and root cause vulnerabilities are routinely studied, we still lack models and algorithms to study the intricate dependencies between services and providers, reason on their abuse, and assess the attack impact.

To close this gap, we present a technique that models services, providers, and dependencies as a property graph. Moreover, we present a taint-style propagation-based technique to query the model, and present an evaluation of our framework on the top 100k Alexa domains.” – WWW Conference Session Description

Continue Reading Security Notes WWW Conference 2017

Spatial Data on the Web notes from WWW conference 2017

From simple visualizations to sophisticated interactive tools, there is a growing reliance on data. Location information, or spatial data, is often a common thread running through such data; describing how things are positioned relative to the Earth in terms of coordinates and/or topology.- Spatial Data on the Web (WWW2017)

Continue Reading Spatial Data on the Web notes from WWW conference 2017

Notes from WWW 2017: Privacy

Privacy concerns are raised more often as applications built on the Web platform have access to more sensitive data — including location, health and social network information — and users’ activity on the Web is ubiquitously tracked. – Web Privacy (WWW2017)
Continue Reading Notes from WWW 2017: Privacy