JohnRiv/lrtf-polymer-workshop.md

## lrtf-polymer-workshop.md

      
    Raw
  

              lrtf-polymer-workshop.md
            
          
    Introduction to Web Components & Polymer Workshop

Little Rock Tech Fest 2017

Hello! 👋

Thanks for coming to our hands-on introduction to Web Components & Polymer! If you stumbled onto this and weren't at the event, hopefully this is still of somewhat use :-)
This is all the materials that were required to get started:

Install Git
Install Node and npm (If you'd like to manage multiple version of Node, we recommend nvm)
Install Bower & the Polymer CLI globally: $ npm install -g bower polymer-cli
Clone the Polymer Google Maps Codelab ($ git clone https://github.com/ComcastSamples/polymer-maps.git)
Install the dependencies for that project by running $ bower install from the directory you cloned polymer-maps into
Clone the Build a Polymer 2.0 App From Scratch Codelab ($ git clone https://github.com/ComcastSamples/polymer-whose-flag.git)
Install the dependencies for that project by running $ bower install from the directory you cloned polymer-whose-flag into
Obtain a Google Maps API key and record that somewhere it will be easy to copy from so you can paste it into your code during the workshop :-)

Cloud9 Users

If you use Cloud9, clone the repo at https://github.com/ComcastSamples/lrtf-polymer and create a workspace from that git fork.
Slides

Slides are available to view & download at https://www.slideshare.net/JohnRiv/workshop-introduction-to-web-components-polymer/JohnRiv/workshop-introduction-to-web-components-polymer
Questions?

Please reach out to us on Twitter, we're happy to help :-)
—John & Chris

  
## wc-demo.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>Web Components Demo</title>

    <style>
      @import url(https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,latin-ext);
      body {
        font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
      }
    </style>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
  </head>
  <body>
    <lrtf-speaker>
    </lrtf-speaker>

    <template id="lrtf-speaker">
      <style>
        :host {
          display: block;
          text-align: center;
          -webkit-font-smoothing: antialiased;
          contain: content; /* see https://developers.google.com/web/updates/2016/06/css-containment */
          /* all: initial; */
          /* Note regading `all: initial`: not going to use it here, but good to know about
             the ability to set it to prevent inheritable styles (background, color, font,
             line-height, etc.) from being inherited in the Shadow DOM. */
        }
        a {
          text-decoration: none;
          color: #63a145;
        }
        .photo-wrapper {
          border-radius: 50%;
          overflow: hidden;
          margin: 0 auto 20px;
          display: inline-block;
          max-width: 100%;
        }
        ::slotted(img) {
          display: block;
          max-width: 100%;
          width: 200px;
          height: auto;
        }
        ::slotted(h3) {
          font-size: 13px;
          font-weight: 700;
          text-transform: uppercase;
          line-height: 14px;
          letter-spacing: 0.3em;
          margin: 0 0 10px;
          padding: 0;
        }
        a:hover ::slotted(h3) {
          text-decoration: underline;
        }
        ::slotted(p) {
          color: #8d93a0;
          margin: 0 0 10px;
          padding: 0;
          line-height: 29px;
          font-size: 14px;
        }
        .speaker-socials {
          margin: 0;
          padding: 0;
          list-style-type: none;
        }
        .speaker-socials > li {
          padding: 0 10px;
          margin: 0;
          display: inline-block;
          text-align: center;
        }
        .fa {
          box-sizing: border-box;
          display: inline-block;
          width: 30px;
          height: 30px;
          line-height: 27px;
          border-radius: 50%;
          border: 2px solid#e9e9e9;
          transition: color 0.2s ease, background 0.2s ease, border 0.2s ease;
          font-family: FontAwesome;
          font-size: inherit;
          text-rendering: auto;
          transform: translate(0, 0);
        }
        a:hover .fa {
          color: #fff;
          background-color: #63a145;
          border-color: #63a145;
        }
        .speaker-socials span {
          /* visually hidden, but read by screen readers */
          position: absolute;
          height: 1px;
          width: 1px;
          overflow: hidden;
          clip: rect(1px, 1px, 1px, 1px);
          clip-path: polygon(1px 1px, 1px 1px, 1px 1px, 1px 1px);
        }
        .twitter:before {
          content: "\f099";
        }
        .website:before {
          content: "\f0ac";
        }
      </style>
    </template>

    <script>
      class LrtfSpeaker extends HTMLElement {
        constructor() {
          super(); // always call super() first in the constructor
        }
      }

      window.customElements.define('lrtf-speaker', LrtfSpeaker);
    </script>
  </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

	<title>Web Components Demo</title>

	<style>
	@import url(https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,latin-ext);
	body {
	font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
	}
	</style>
	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
	</head>
	<body>
	<lrtf-speaker>
	</lrtf-speaker>

	<template id="lrtf-speaker">
	<style>
	:host {
	display: block;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	contain: content; /* see https://developers.google.com/web/updates/2016/06/css-containment */
	/* all: initial; */
	/* Note regading `all: initial`: not going to use it here, but good to know about
	the ability to set it to prevent inheritable styles (background, color, font,
	line-height, etc.) from being inherited in the Shadow DOM. */
	}
	a {
	text-decoration: none;
	color: #63a145;
	}
	.photo-wrapper {
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 20px;
	display: inline-block;
	max-width: 100%;
	}
	::slotted(img) {
	display: block;
	max-width: 100%;
	width: 200px;
	height: auto;
	}
	::slotted(h3) {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 14px;
	letter-spacing: 0.3em;
	margin: 0 0 10px;
	padding: 0;
	}
	a:hover ::slotted(h3) {
	text-decoration: underline;
	}
	::slotted(p) {
	color: #8d93a0;
	margin: 0 0 10px;
	padding: 0;
	line-height: 29px;
	font-size: 14px;
	}
	.speaker-socials {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
	.speaker-socials > li {
	padding: 0 10px;
	margin: 0;
	display: inline-block;
	text-align: center;
	}
	.fa {
	box-sizing: border-box;
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 27px;
	border-radius: 50%;
	border: 2px solid#e9e9e9;
	transition: color 0.2s ease, background 0.2s ease, border 0.2s ease;
	font-family: FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	transform: translate(0, 0);
	}
	a:hover .fa {
	color: #fff;
	background-color: #63a145;
	border-color: #63a145;
	}
	.speaker-socials span {
	/* visually hidden, but read by screen readers */
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: polygon(1px 1px, 1px 1px, 1px 1px, 1px 1px);
	}
	.twitter:before {
	content: "\f099";
	}
	.website:before {
	content: "\f0ac";
	}
	</style>
	</template>

	<script>
	class LrtfSpeaker extends HTMLElement {
	constructor() {
	super(); // always call super() first in the constructor
	}
	}

	window.customElements.define('lrtf-speaker', LrtfSpeaker);
	</script>
	</body>
	</html>