Google Tech Talk Night vol.6

2013-10-29-google_tech_night.md

Polymer

Web Components

• add custom tags
• add function to native tag
• hard to maintain
• shadow DOM

Parts

• HTML Templates
• Custom Elements
• HTML Imports
• Data-binding

Polymer

• based on Web Components

philosopy

1. Utilize the modern web platform
2. Embrance DOM, Everythin as an element
3. Boilerplate

Polymer elements

• layout
• view
• service / libs
• data
• behavior

Polymer core

• call api
• publishing properties & Data-binding
• use HTML attribute & js
• template binding
  • loop
  • expression
  • conditional attributes ?=
• Foundation part is move in the future.

conclusion

• Developer productiviti
• Re-usabillity
• good software engineering on the web

Polymer/vulcanize
ARIA

Mobile UX

Getting the basic correct

• ViewPort config
  • Always use a viewport
• Clickable Links
  • Aim for 7mm
  • Padding is the biggest issue(5mm)
• Legible Text
  • fontsize
  • Contrast
  • Limit use of web fonts
• Use semantic input types
  • <input type="tel">
• Minimal typing required
  • requestAutoComplete
• Remove Flash + other objects
• App interstitials
• [wtfmobileiste.com]

Perception of Performance

• In airport
  • Long walk to collect baggage, makes you think bags arrive quickly.
• Responsiveness
  • Aim for 100ms
  • Remove 300ms click delay
    • Fast Click or wait for browsers to fix it
• Get ocntent on to the screen in a 1s
  • onload time between 1 to 3 site % total is 15%(250000 sites)
• Above the Fold(ATF)
  • first view
  • inline critical css(ex: Gmail)
• DNS problem
  • avarage of 17 domains per page
  • DNS prefetch
    • <link ref="dns-prefetch" href="//example.com"></link>

Jank Busters

• Monitors are usually 50-60fps
• use requestAnimationFrame
• Understanding CSS Filter Effects - HTML5 Rocks

Jank-busting 101

• Paint fast
  • Blinking curosors
  • Scrolling

Let's Make the Web Jank-free!