Skip to content

Instantly share code, notes, and snippets.

@JohnRiv
Last active October 5, 2017 22:38
Show Gist options
  • Save JohnRiv/4173976b4233de10905cb020a9d08141 to your computer and use it in GitHub Desktop.
Save JohnRiv/4173976b4233de10905cb020a9d08141 to your computer and use it in GitHub Desktop.
Introduction to Web Components & Polymer Workshop

Introduction to Web Components & Polymer Workshop

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:

  1. Install Git
  2. Install Node and npm (If you'd like to manage multiple version of Node, we recommend nvm)
  3. Install Bower & the Polymer CLI globally: $ npm install -g bower polymer-cli
  4. Clone the Polymer Google Maps Codelab ($ git clone https://github.com/ComcastSamples/polymer-maps.git)
  5. Install the dependencies for that project by running $ bower install from the directory you cloned polymer-maps into
  6. Clone the Build a Polymer 2.0 App From Scratch Codelab ($ git clone https://github.com/ComcastSamples/polymer-whose-flag.git)
  7. Install the dependencies for that project by running $ bower install from the directory you cloned polymer-whose-flag into
  8. 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

<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment