Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building the Future with Polymer!

Building the Future with Polymer!

Polymer Hack Event -London 2014

Eric Bidelman

August 06, 2014
Tweet

More Decks by Eric Bidelman

Other Decks in Programming

Transcript

  1. Layers · polyfills · <script src=“platform.js”> · sugaring · polymer.js:

    declarative, data-binding, · property observation, gestures, …) · components · core elements, paper elements
  2. Tools · build scripts & testing · vulcanize —inline —csp

    elements.html · designer · drag n’ drop prototyping app · documentation practices · free element documentation
  3. +

  4. Subtitle bower install GoogleWebComponents/google-map —save Install <google-map latitude="37.779" longitude="-122.3892" disableDefaultUI>

    <google-map-marker latitude="37.779" longitude="-122.3892" title="Go Giants!" draggable="true"> <h2>Info window title!</h2> </google-map-marker> </google-map> Use
  5. Subtitle bower install GoogleWebComponents/google-chart —save Install <google-chart type="pie"height="300px" width="400px" options='{"title":

    "Distribution of days in 2001Q1"}' cols='[{"label":"Month", "type":"string"}, …]’ rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'> </google-chart> Use
  6. Visual <core-ajax> <core-localstorage> <core-range> <core-shared-lib> <core-media-query> <core-iconset> Non-visual And many

    more… Image: http://bit.ly/1kuX889, <core-toolbar> <core-header-panel> <core-drawer-panel> <core-menu> <core-icon> <core-overlay>
  7. <core-toolbar class=“tall”> <core-icon-button icon=“menu”> </core-icon-button> <div>I/O 2014</div> </core-toolbar> <link rel=“import”

    href=“core-toolbar.html”> <core-toolbar> A basic container for controls like tabs or buttons
  8. simple container with a header section and content section <core-header-panel>

    <core-header-panel> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>I/O 2014</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel>
  9. <core-header-panel mode=“scroll”> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>I/O 2014</div> </core-toolbar> <div

    class=“content”>…</div> </core-header-panel> Toolbar will scroll with the page <core-header-panel>
  10. <core-header-panel mode=“waterfall-tall”> <core-toolbar class=“tall” animate> <core-icon-button icon=“menu"> </core-icon-button> <div>I/O 2014</div>

    </core-toolbar> <div class=“content”>…</div> </core-header-panel> Toolbar will shrink on scroll <core-header-panel>
  11. <core-scroll-header-panel condenses> <core-toolbar class=“tall" animate> <core-icon-button icon=“arrow-back"> </core-icon-button> <div class="bottom

    indent title”> Title </div> ... </core-toolbar> </core-scroll-header-panel> Image: http://bit.ly/1b3E67J <core-scroll-header-panel> adds the condenses attribute to create a cross-fade effect
  12. <div class=“card”> <paper-shadow z=“5” animated> </paper-shadow> </div> A dynamic shadow

    for conveying z-depth and spatial relationships <paper-shadow>
  13. Small caption Heading Subheading Body Source Code All text is

    set in Roboto and Roboto Condensed. All code is set in Inconsolata. Download all 3 on google.com/fonts
  14. Chart title 7% 8% 10% 11% 29% 35% April May

    June July August September Chart data source info here
  15. <paper-button id="go" disabled>Go!</paper-button> HTML .paper-button { background-color: red; } CSS

    document.querySelector('.paper-button') .addEventListener('click', function(e) { // your code here }, false); JavaScript For really short code snippets, use this style, with optional indication of filename or language Visit j.mp/iohighlighter in Safari and copy + paste into Keynote
  16. protected void onTryUpdate(int reason) throws RetryException { // Do some

    awesome stuff int foo = 15; publishArtwork(new Artwork.Builder() .title(photo.name) .imageUri(Uri.parse(photo.image_url)) .viewIntent(new Intent(Intent.ACTION_VIEW, Uri.parse("http://500px.com/photo/" + photo.id))) .build()); scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS); } Visit j.mp/iohighlighter in Safari and copy + paste into Keynote MainActivity.java If your code snippet is over 6 lines, use a full-page slide of code in this style
  17. protected void onTryUpdate(int reason) throws RetryException { // Do some

    awesome stuff int foo = 15; publishArtwork(new Artwork.Builder() .title(photo.name) .imageUri(Uri.parse(photo.image_url)) .viewIntent(new Intent(Intent.ACTION_VIEW, Uri.parse("http://500px.com/photo/" + photo.id))) .build()); scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS); } MainActivity.java Use this style to highlight a particular section
  18. // A couple more notes on code slides: // *

    Use the Inconsolata font available at google.com/fonts // * Set line spacing to 1.2 // * Don’t use font sizes below 40pt code_slides.txt
  19. Photos make for excellent segue slides Photo source info here

    Use a semitransparent dark gray or black to ensure text is legible
  20. Avoid using titles • Also try to avoid bullets ·

    Here’s what sub-bullets look like · But you should generally avoid them, too • Think about all the awesome visuals
 you could be showing instead! • A third bullet (by now, no one’s paying
 attention to what you’re actually saying) • DON’T USE 3RD-LEVEL BULLETS! But when you need to use them, sentence case