Skip to content

Instantly share code, notes, and snippets.

@Layzie
Created October 29, 2013 10:13
Show Gist options
  • Save Layzie/7211991 to your computer and use it in GitHub Desktop.
Save Layzie/7211991 to your computer and use it in GitHub Desktop.
Google Tech Talk Night vol.6

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

Jank-busting 101

  • Paint fast
    • Blinking curosors
    • Scrolling

Let's Make the Web Jank-free!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment