diff --git a/bin/serve.sh b/bin/serve.sh index 1eb37cb..6f4395b 100755 --- a/bin/serve.sh +++ b/bin/serve.sh @@ -21,4 +21,4 @@ else fi (sleep 2; $open http://localhost:$port/slides.html) & -harp server -p $port +./node_modules/.bin/harp server -p $port diff --git a/examples/.gitignore b/examples/.gitignore new file mode 100644 index 0000000..8d4ae25 --- /dev/null +++ b/examples/.gitignore @@ -0,0 +1 @@ +bower_components diff --git a/examples/1/index.jade b/examples/1/index.jade new file mode 100644 index 0000000..74f1cb6 --- /dev/null +++ b/examples/1/index.jade @@ -0,0 +1,12 @@ +doctype html +html(lang="en") + + head + // load platform polyfills + script(src="../bower_components/platform/platform.js") + // import custom elements + link(rel="import", href="../bower_components/polymer/polymer.html") + link(rel="import", href="my-element.html") + + body(unresolved) + my-element diff --git a/examples/1/my-element.jade b/examples/1/my-element.jade new file mode 100644 index 0000000..1e3a86a --- /dev/null +++ b/examples/1/my-element.jade @@ -0,0 +1,6 @@ +link(rel="import", href="../polymer/polymer.html") + +polymer-element(name="my-element" noscript) + template + h2 Hi, I'm a custom element! + diff --git a/examples/1b/index.jade b/examples/1b/index.jade new file mode 100644 index 0000000..85896e6 --- /dev/null +++ b/examples/1b/index.jade @@ -0,0 +1,12 @@ +doctype html +html(lang="en") + + head + // load platform polyfills + script(src="../bower_components/platform/platform.js") + // import custom elements + link(rel="import", href="../bower_components/polymer/polymer.html") + link(rel="import", href="my-element.html") + + body(unresolved) + my-element Light DOM diff --git a/examples/1b/my-element.jade b/examples/1b/my-element.jade new file mode 100644 index 0000000..65ca58a --- /dev/null +++ b/examples/1b/my-element.jade @@ -0,0 +1,6 @@ +link(rel="import", href="../polymer/polymer.html") + +polymer-element(name="my-element" noscript) + template + h2 Hi, I'm + diff --git a/examples/2/index.jade b/examples/2/index.jade new file mode 100644 index 0000000..74f1cb6 --- /dev/null +++ b/examples/2/index.jade @@ -0,0 +1,12 @@ +doctype html +html(lang="en") + + head + // load platform polyfills + script(src="../bower_components/platform/platform.js") + // import custom elements + link(rel="import", href="../bower_components/polymer/polymer.html") + link(rel="import", href="my-element.html") + + body(unresolved) + my-element diff --git a/examples/2/my-element.coffee b/examples/2/my-element.coffee new file mode 100644 index 0000000..dcb7343 --- /dev/null +++ b/examples/2/my-element.coffee @@ -0,0 +1,3 @@ +Polymer "my-element", + greeting: "Hi, I'm a custom element!" + diff --git a/examples/2/my-element.jade b/examples/2/my-element.jade new file mode 100644 index 0000000..ee3cb14 --- /dev/null +++ b/examples/2/my-element.jade @@ -0,0 +1,7 @@ +link(rel="import", href="../polymer/polymer.html") + +polymer-element(name="my-element") + template + h2 {{greeting}} + + script(src="my-element.js") diff --git a/examples/3/index.jade b/examples/3/index.jade new file mode 100644 index 0000000..74f1cb6 --- /dev/null +++ b/examples/3/index.jade @@ -0,0 +1,12 @@ +doctype html +html(lang="en") + + head + // load platform polyfills + script(src="../bower_components/platform/platform.js") + // import custom elements + link(rel="import", href="../bower_components/polymer/polymer.html") + link(rel="import", href="my-element.html") + + body(unresolved) + my-element diff --git a/examples/3/my-element.coffee b/examples/3/my-element.coffee new file mode 100644 index 0000000..b0ab300 --- /dev/null +++ b/examples/3/my-element.coffee @@ -0,0 +1,4 @@ +Polymer "my-element", + greeting: "Click me!" + clickHandler: -> @greeting = "Hello, " + prompt("What is your name?") + "!" + diff --git a/examples/3/my-element.jade b/examples/3/my-element.jade new file mode 100644 index 0000000..100ffec --- /dev/null +++ b/examples/3/my-element.jade @@ -0,0 +1,7 @@ +link(rel="import", href="../polymer/polymer.html") + +polymer-element(name="my-element" on-click="{{clickHandler}}") + template + h2 {{greeting}} + + script(src="my-element.js") diff --git a/examples/_layout.jade b/examples/_layout.jade new file mode 100644 index 0000000..9c5bb5f --- /dev/null +++ b/examples/_layout.jade @@ -0,0 +1 @@ +!= yield diff --git a/examples/flexbox/index.styl b/examples/flexbox/index.styl new file mode 100644 index 0000000..fcb30b9 --- /dev/null +++ b/examples/flexbox/index.styl @@ -0,0 +1,9 @@ +.container + background-color #aaa + font-family 'Open Sans', Arial, sans-serif + padding 4px + +.container div + background-color white + padding 12px + margin 4px diff --git a/examples/flexbox/index1.jade b/examples/flexbox/index1.jade new file mode 100644 index 0000000..e28abbf --- /dev/null +++ b/examples/flexbox/index1.jade @@ -0,0 +1,15 @@ +doctype html +html(lang="en") + + head + // load platform polyfills + script(src="../bower_components/platform/platform.js") + // import custom elements + link(rel="import", href="../bower_components/polymer/polymer.html") + link(rel="stylesheet", href="index.css") + + body(unresolved) + div.container(layout horizontal) + div One + div Two + div Three diff --git a/examples/flexbox/index2.jade b/examples/flexbox/index2.jade new file mode 100644 index 0000000..772cc2e --- /dev/null +++ b/examples/flexbox/index2.jade @@ -0,0 +1,15 @@ +doctype html +html(lang="en") + + head + // load platform polyfills + script(src="../bower_components/platform/platform.js") + // import custom elements + link(rel="import", href="../bower_components/polymer/polymer.html") + link(rel="stylesheet", href="index.css") + + body(unresolved) + div.container(layout horizontal) + div One + div(flex) Two + div Three diff --git a/examples/flexbox/index3.jade b/examples/flexbox/index3.jade new file mode 100644 index 0000000..070684a --- /dev/null +++ b/examples/flexbox/index3.jade @@ -0,0 +1,15 @@ +doctype html +html(lang="en") + + head + // load platform polyfills + script(src="../bower_components/platform/platform.js") + // import custom elements + link(rel="import", href="../bower_components/polymer/polymer.html") + link(rel="stylesheet", href="index.css") + + body(unresolved) + div.container(layout horizontal) + div(flex) One + div(flex two) Two + div(flex three) Three diff --git a/images/declare_all_the_things.jpg b/images/declare_all_the_things.jpg new file mode 100644 index 0000000..8112838 Binary files /dev/null and b/images/declare_all_the_things.jpg differ diff --git a/images/yo_dawg.jpg b/images/yo_dawg.jpg new file mode 100644 index 0000000..34ffd6a Binary files /dev/null and b/images/yo_dawg.jpg differ diff --git a/slide_config.js b/slide_config.js index 9a8f31f..f8fde19 100644 --- a/slide_config.js +++ b/slide_config.js @@ -1,8 +1,8 @@ var SLIDE_CONFIG = { // Slide settings settings: { - title: 'The Panda Way
to great presentations', - subtitle: 'A guide to Enlightenment', + title: 'Cultural Learnings of Polymer
for Make Benefit Great Progress of Web Developers', + // subtitle: 'A guide to Enlightenment', //eventInfo: { // title: 'Google I/O', // date: '6/x/2013' @@ -22,10 +22,10 @@ var SLIDE_CONFIG = { // Author information presenters: [{ - name: 'A Dashing Panda', - company: 'Bamboo Eater
Panda Strike', - gplus: 'http://plus.google.com/1234567890', - twitter: '@deliciousbamboo', + name: 'Christoph Wagner', + company: 'Panda Strike', + // gplus: 'http://plus.google.com/1234567890', + twitter: '@Panda_Whisperer', www: 'http://www.pandastrike.com', github: 'http://github.com/pandastrike' }/*, { diff --git a/slides.jade b/slides.jade index aa13923..fddc594 100644 --- a/slides.jade +++ b/slides.jade @@ -21,335 +21,295 @@ slide.title-slide.segue.nobackground slide hgroup - h2 Features + h2 Outline article :markdown - * Based on [Google I/O 2012 slides](https://code.google.com/p/io-2012-slides) - * But "Panda-fied" using Harp and Jade (⇒ built-in Markdown support!) - * Write slides in your `$EDITOR`, not PowerPoint - * Built-in support for code snippets with pretty syntax highlighting - * Support for speaker notes and presentation mode - * Works in any modern browser - * Yes, I promise I'll get rid of the annoying popups as soon as I can find out what triggers them! + * Why Yet Another Framework? + * Polymer architecture + * Case Study: Glideroom slide hgroup - h2 Slide with Bullets - article - ul - li Titles are formatted as Open Sans with bold applied and font size is set at 45 - li Title capitalization is title case - ul - li Subtitle capitalization is title case - li Subtitle capitalization is title case - li Titles and subtitles should never have a period at the end + h2 Why Yet Another Framework? + article.flexbox.vcenter + ul.build + li Polyfills for old browsers + li Declarative element creation (No more document.registerElement) + li Declarative event mapping + li Declarative layout using attributes + + li But wait, there's more! + ul + li Component library + li UI designer + + aside.note + img.reflect(src="images/declare_all_the_things.jpg") slide hgroup - h2 Slide with Bullets that Build - h3 Subtitle Placeholder + h2 Declarative Syntax article - p A list where items build: + pre.prettyprint(data-lang="html"). + <!-- import Polymer --> + <link rel="import" href="polymer/polymer.html"> + <!-- define custom element --> + <polymer-element name="my-element" noscript> + <template> + <h2>Hi, I'm a custom element!</h2> + </template> + </polymer-element> + ul.build - li Pressing 'h' highlights code snippets - li Pressing 'p' toggles speaker notes (if they're on the current slide) - li Pressing 'f' toggles fullscreen viewing - li Pressing 'w' toggles widescreen - li Pressing 'o' toggles overview mode - li Pressing 'ESC' toggles off these goodies - p Another list, but items fade as they build: - ul.build.fade - li Hover over me! - li Hover over me! - li Hover over me! + li Polymer uses custom elements to define custom elements + li <template> defines the contents of the Shadow DOM + li noscript attribute lets us define element without JavaScript + + aside.note + img(src="images/yo_dawg.jpg") slide hgroup - h2 Slide with (Smaller Font) - article.smaller - ul - li All links open in new tabs. - li To change that this, add target="_self" to the link. + h2 Let's use it! + article + pre.prettyprint(data-lang="html"). + <head> + <!-- load platform polyfills --> + <script src="platform/platform.js"></script> + <!-- import custom elements --> + <link rel="import" href="polymer/polymer.html"> + <link rel="import" href="my-element.html"> + </head> + + <body> + <my-element></my-element> + </body> -slide(hidden='') - | Hidden slides are left out of the presentation. + h3 Result + iframe#example1(data-src="/examples/1/index.html" style="height: 70px") -slide +slide(hidden) hgroup - h2 Code Slide (with Subtitle Placeholder) - h3 Subtitle Placeholder + h2 Light & Shadow article - p Press 'h' to highlight important sections of code (wrapped in <b>). - pre.prettyprint(data-lang='javascript'). - // Say hello world until the user starts questioning - // the meaningfulness of their existence. - function helloWorld(world) { - for (var i = 42; --i >= 0;) { - alert('Hello ' + String(world)); - } - } + p <content> defines an insertion point + p It will contain the contents of the custom tag (a.k.a Light DOM) + + pre.prettyprint(data-lang="html"). + <polymer-element name="my-element" noscript> + <template> + <h2>Hi, I'm <content></content></h2> + </template> + </polymer-element> + + pre.prettyprint(data-lang="html"). + <my-element>Light DOM</my-element> + + h3 Result + iframe#example1(data-src="/examples/1b/index.html" style="height: 70px") slide hgroup - h2 Code Slide (Smaller Font) - article.smaller - pre.prettyprint(data-lang='javascript'). - // Say hello world until the user starts questioning - // the meaningfulness of their existence. - function helloWorld(world) { - for (var i = 42; --i >= 0;) { - alert('Hello ' + String(world)); - } - } - - pre.prettyprint(data-lang='css'). - <style> - p { color: pink } - b { color: blue } - </style> - - pre.prettyprint(data-lang='html'). - <!DOCTYPE html> - <html> - <head> - <title>My Awesome Page</title> - </head> - <body> - <p>Hello world</p> - <body> - </html> + h2 Data Binding + article + pre.prettyprint(data-lang="html"). + <polymer-element name="my-element"> + <template> + <h2>{{greeting}}</h2> + </template> + <script src="my-element.js"></script> + </polymer-element> + + pre.prettyprint(data-lang="javascript"). + Polymer("my-element", { + greeting: "Hi, I'm a custom element!" + }); + + h3 Result + iframe#example2(data-src="/examples/2/index.html" style="height: 70px") -slide aside.note section ul - li Point I wanted to make #1 - li Point I wanted to make #2 - li Point I wanted to make #3 - li Example link in notes. - p - b Remember to say this tag line! + li Use web console to manipulate the greeting attribute + li Mention that bindings are TWO-WAY (for elements that support it) + +slide hgroup - h2 Slide with Speaker Notes + h2 Declarative Event Mapping article - p Press 'p' to toggle speaker notes. + pre.prettyprint(data-lang="html"). + <polymer-element name="my-element" on-click="{{clickHandler}}"> + <template> + <h2>{{greeting}}</h2> + </template> + <script src="my-element.js"></script> + </polymer-element> + + pre.prettyprint(data-lang="javascript"). + Polymer("my-element", { + greeting: "Click me!", + clickHandler: function() { + this.greeting = "Hello, " + prompt("What is your name?") + "!"; + } + }); + + iframe#example3(data-src="/examples/3/index.html" style="height: 70px") slide - aside.note - section - ul - li See this amazing link: link. - p - b Remember to say this tag line! hgroup - h2 Presenter Mode + h2 Declarative Layout + h3 Flexbox made simple article - p - | Add - code - a(href='?presentme=true', target='_self') ?presentme=true - | to the URL to enabled presenter mode. - | This setting is sticky, meaning refreshing the page will persist presenter mode. - p - | Hit - code - a(href='?presentme=false', target='_self') ?presentme=false - | to disable presenter mode. + p Use attributes, not CSS! + pre.prettyprint(data-lang="html"). + <div horizontal layout> + <div>One</div> + <div>Two</div> + <div>Three</div> + </div> + + p Result + iframe(data-src="/examples/flexbox/index1.html" style="height: 80px") slide hgroup - h2 Slide with Image + h2 Declarative Layout + h3 Flexbox made simple article - img.reflect(src='images/chart.png', alt='Description', title='Description') - footer.source source: place source info here + p Flex it! + pre.prettyprint(data-lang="html"). + <div horizontal layout> + <div>One</div> + <div flex>Two</div> + <div>Three</div> + </div> + + p Result + iframe(data-src="/examples/flexbox/index2.html" style="height: 80px") slide hgroup - h2 Slide with Image (Centered horz/vert) - article.flexbox.vcenter - img(src='images/barchart.png', alt='Description', title='Description') - footer.source source: place source info here + h2 Declarative Layout + h3 Flexbox made simple + article + p Flex with proportions + pre.prettyprint(data-lang="html"). + <div horizontal layout> + <div flex>One</div> + <div flex two>Two</div> + <div flex three>Three</div> + </div> + + p Result + iframe(data-src="/examples/flexbox/index3.html" style="height: 80px") + +slide.segue.dark.nobackground + aside.gdbar.right.bottom + img(src='images/pandastrike-logo-256.png') + hgroup.auto-fadein + h2 Case Study + h3 Glideroom.com slide hgroup - h2 Table Option A - h3 Subtitle Placeholder + h2 Overview + h3 What is Glideroom? article - table - tr - th - th Column 1 - th Column 2 - th Column 3 - th Column 4 - tr - td Row 1 - td placeholder - td.highlight placeholder - td placeholder - td placeholder - tr - td Row 2 - td placeholder - td placeholder - td placeholder - td placeholder - tr - td Row 3 - td placeholder - td placeholder - td placeholder - td placeholder - tr - td Row 4 - td placeholder - td placeholder - td placeholder - td placeholder - tr - td Row 5 - td placeholder - td placeholder - td placeholder - td placeholder + ul + li Video conferencing in your browser + li Built on WebRTC + li NO registration necessary + li Get a room with a single click + li We call it: "Hangouts without the Hangups" slide hgroup - h2 Table Option A (Smaller Text) - h3 Subtitle Placeholder - article.smaller - table - tr - th - th Column 1 - th Column 2 - th Column 3 - th Column 4 - tr - td Row 1 - td placeholder - td.highlight placeholder - td placeholder - td placeholder - tr - td Row 2 - td placeholder - td placeholder - td placeholder - td placeholder - tr - td Row 3 - td placeholder - td placeholder - td placeholder - td placeholder - tr - td Row 4 - td placeholder - td placeholder - td placeholder - td placeholder - tr - td Row 5 - td placeholder - td placeholder - td placeholder - td placeholder + h2 Architecture + article + ul + li Front-end built entirely with Polymer + li Component-based architecture + li Everything is a custom element + li Emphasis on small, focused, reusable components + li Components interact via well-defined public API + li Asynchronous communication via events slide hgroup - h2 Table Option B - h3 Subtitle Placeholder + h2 Show me the Code! + h3 room.html article - table.rows - tr - th Header 1 - td placeholder - td.highlight placeholder - td placeholder - tr - th Header 2 - td placeholder - td placeholder - td placeholder - tr - th Header 3 - td placeholder - td placeholder - td placeholder - tr - th Header 4 - td placeholder - td placeholder - td placeholder - tr - th Header 5 - td placeholder - td placeholder - td placeholder + pre.prettyprint(data-lang="html"). + <body> + <glideroom-backend configuration="/configuration.json"></glideroom-backend> + <div vertical layout fit> + <glideroom-toolbar></glideroom-toolbar> + <div horizontal layout flex> + <glideroom-conference flex></glideroom-conference> + <core-splitter direction="right" touch-action="none"></core-splitter> + <glideroom-chat></glideroom-chat> + </div> + <footer-element></footer-element> + </div> + <glideroom-dialog-entry id="entry"></glideroom-dialog-entry> + <glideroom-dialog-settings id="settings"></glideroom-dialog-settings> + <script src="js/room.s"></script> + </body> slide hgroup - h2 Slide Styles - article.smaller - .columns-2 - ul - li.red class="red" - li.red2 class="red2" - li.red3 class="red3" - li.blue class="blue" - li.blue2 class="blue2" - li.blue3 class="blue3" - li.green class="green" - li.green2 class="green2" - ul - li.green3 class="green3" - li.yellow class="yellow" - li.yellow2 class="yellow2" - li.yellow3 class="yellow3" - li.gray class="gray" - li.gray2 class="gray2" - li.gray3 class="gray3" - li.gray4 class="gray4" - .centered(style='margin-top:2em') - | I am centered text with a - | and button. - -slide.segue.dark.nobackground - aside.gdbar - img(src='images/pandastrike-logo-256.png') - hgroup.auto-fadein - h2 Segue Slide - h3 Subtitle Placeholder + h2 Show me the Code! + h3 room.js + article + pre.prettyprint(data-lang="javascript"). + var backend = document.querySelector("glideroom-backend"); + var chat = document.querySelector("glideroom-chat"); -slide.fill.nobackground(style='background-image: url(images/sky.jpg)') - hgroup - h2.white Full Image (with Optional Header) - footer.source.white www.flickr.com/photos/25797459@N06/5438799763/ + window.addEventListener("polymer-ready", function() { + chat.addEventListener("chat-message", function(event) { + backend.sendMessage(event.detail); + }); + backend.addEventListener("room-event", function(event) { + chat.addMessage(event.detail); + conference.processEvent(event.detail); + }); + backend.addEventListener("room-ready", function(event) { + conference.start(event.detail); + }); + }); -slide.segue.dark.quote.nobackground +slide.segue.dark.nobackground aside.gdbar.right.bottom img(src='images/pandastrike-logo-256.png') - article.flexbox.vleft.auto-fadein - q This is an example of quote text. - .author Name
Company + hgroup.auto-fadein + h2 Resources slide hgroup - h2 Slide with Iframe - article - iframe(data-src='http://www.pandastrike.com/#about-us') - -slide + h2 RTFM article - iframe(data-src='http://www.pandastrike.com/#about-us') + :markdown + * Polymer + - Polymer Project: [polymer-project.org](https://www.polymer-project.org) + - Polymer API docs: [bit.ly/polymer-api](http://bit.ly/polymer-api) + - Polymer Databinding: [bit.ly/polymer-databinding](http://bit.ly/polymer-databinding) + - Polymer Layout Reference: [bit.ly/polymer-layout](http://bit.ly/polymer-layout) + * Components + - Core Elements: [bit.ly/core-elements](http://bit.ly/core-elements) + - Core Elements Demo: [bit.ly/core-elements-demo](http://bit.ly/core-elements-demo) + - Paper Elements: [bit.ly/paper-elements](http://bit.ly/paper-elements-demo) + - Paper Elements Demo: [bit.ly/paper-elements-demo](http://bit.ly/paper-elements-demo) + * Other Resources + - Built with Polymer: [builtwithpolymer.org](http://builtwithpolymer.org) + - Polymer Themes: [polymerthemes.com](https://polymerthemes.com) slide.thank-you-slide.segue.nobackground aside.gdbar.right img(src='images/pandastrike-logo-256.png') article.flexbox.vleft.auto-fadein h2 <Thank You!> - p Important contact information goes here. + // p Important contact information goes here. p.auto-fadein(data-config-contact='') // populated from slide_config.json @@ -360,3 +320,9 @@ slide.logoslide.dark.nobackground slide.backdrop +script(type="text/javascript"). + // find all iframes and define shortcut variables according to their IDs + [].slice.apply(document.querySelectorAll("iframe")).forEach(function(example) { + window[example.id] = example; + }); +