btopro

javascript:(function()%7Bwindow.__appCDN%3D%22https%3A%2F%2Fcdn.webcomponents.psu.edu%2Fcdn%2F%22%3Bvar%20tag%20%3D%20document.createElement('script')%3Btag.src%3D%22https%3A%2F%2Fcdn.webcomponents.psu.edu%2Fcdn%2Fbuild.js%22%3Bdocument.head.appendChild(tag)%3Bfunction%20tokenHack(e)%20%7BsetTimeout(function()%20%7Bif%20(document.getElementById('content'))%20%7Bvar%20pageContents%20%3D%20document.getElementById('content').innerHTML%3Bvar%20myRegexp%20%3D%20%2F%5C%5Bwc%3A(.*%3F)%5Cs(.*%3F)%5C%2F%5C%5D%2Figm%3Bvar%20match%20%3D%20myRegexp.exec(pageContents)%3Bvar%20replacement%3Bwhile%20(match%20!%3D%20null)%20%7Breplacement%20%3D%20'%3C'%20%2B%20match%5B1%5D%20%2B%20'%20'%20%2B%20match%5B2%5D%20%2B%20'%3E%3C%2F'%20%2B%20match%5B1%5D%20%2B%20'%3E'%3BpageContents%20%3D%20pageContents.replace(match%5B0%5D%2C%20replacement)%3Bmatch%20%3D%20myRegexp.exec(pageContents)%3B%7Ddocument.getElementById('content').innerHTML%20%3D%20pageContents%3Bwindow.WCAutoload.process()%3B%7D%7D%2C%200)%3B%7Dwindow.addEventListener(%2

btopro

    if ('serviceWorker' in navigator) {
      var sitePath = '/';
      // discover this path downstream of the root of the domain
      var swScope = window.location.pathname.substring(0, window.location.pathname.indexOf(sitePath)) + sitePath;
      if (swScope != document.head.getElementsByTagName('base')[0].href) {
        document.head.getElementsByTagName('base')[0].href = swScope;
      }
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('service-worker.js', {
          scope: swScope

btopro

cd ~/HAXcms
ln -s ~/lrnwebcomponents/node_modules node_modules

btopro

Abstract

I am the EdTechJoker and I'd like you to take my red pill and explore a world where ANY platform is a learning platform. A world where the production of accessible and sustainable OER is possible by anyone on any platform. A world where educator, learner and instructional designer creativity flow like water.

In this session we'll explore that world through the open source editor called HAX being developed by Penn State, the US National Archives and others! We'll look at multiple Penn State courses taught using HAX, see student produced OERs using HAXcms, learn about my digital activism approach to pedagogy and get a chance to play with the HAX editor and see the future of web production.

Submission

I am the EdTechJoker and I'd like you to explore a world where ANY platform is a learning platform. A world where the production of accessible and sustainable OER is possible by anyone on any platform. A world where educator, learner and instructional designer creativity flow like water. Welcome

btopro

Me (4 min)

• Show what web components
• supported everywhere
• why web components over other things (building 1 brick at a time, progressive decoupling, no framework lock in)
• describe how a tag went from PolymerElement to LitElement to HTMLElement in production bc of same integraiton "api"
• element forms an api / contract for how it should work via its slot, css variables and properties / attributes
• show what integration looks like
• talk about toolng and our element repo if people want to learn more about our work
• talk about open-wc and starting with that

btopro

openapi: 3.0.0
info:
  title: 'HAXcms API'
  description: 'API for interfacing with HAXcms end points'
  termsOfService: 'https://haxtheweb.org'
  contact:
    email: hax@psu.edu
  license:
    name: 'Apache 2.0'
    url: 'http://www.apache.org/licenses/LICENSE-2.0.html'

btopro

javascript:(function(){window.__haxClickEvent=(e)=>{if(e.target.tagName!=='TO-ELEMENT'){e.preventDefault();e.stopPropagation();e.stopImmediatePropagation();if(!window.__first){alert('You\'ll now be asked to name this element. Make sure the element name has a hypthen in it like "cool-new-things".');window.__first=true;}let name=prompt('Name for this element:','cool-new-thing');if(name){e.target.classList.remove('hax-injected-highlighter');document.getElementById('haxallthethings').downloadNewComponent(e.target,name);}else{document.body.removeEventListener('click',window.__haxClickEvent);document.body.removeEventListener('mouseover',function(e){e.target.classList.add('hax-injected-highlighter');});document.body.removeEventListener('mouseout',function(e){e.target.classList.remove('hax-injected-highlighter');});}}};let link=document.createElement('script');link.type="module";link.src="https://cdn.waxam.io/build/es6/node_modules/@lrnwebcomponents/to-element/to-element.js";document.body.appendChild(link);let toE=do

btopro

javascript:(function()%7Bdocument.getElementsByClassName(%27logo-img%27)%5B0%5D.innerHTML%3D"<a href%3D%27/%27 rel%3D%27home%27 title%3D%27Penn State University%27 class%3D%27active%27><img src%3D%27http://www.psu.edu/profiles/psu_profile/themes/psu_main/logo.png%27 alt%3D%27Penn State University%27 id%3D%27logo%27></a>"%3Bdocument.getElementsByClassName(%27footer-logo%27)%5B0%5D.innerHTML%3D"<a href%3D%27http://www.psu.edu%27 title%3D%27Penn State%27 alt%3D%27Penn State%27><img src%3D%27/profiles/psu_profile/themes/psu/images/footer_logo.png%27 alt%3D%27Penn State%27></a>"%3B%7D)()%3B

btopro

import { dom } from "@polymer/polymer/lib/legacy/polymer.dom.js";
/**
 * A collection of utility functions exported for convenience
 */

function encapScript(html) {
  // ensure this is a string to then do replacements on, rare but possible w/ null
  if (html && typeof html.replace === "function") {
    html = html.replace(/<script[\s\S]*?>/gi, "&lt;script&gt;");
    html = html.replace(/<\/script>/gi, "&lt;/script&gt;");

btopro

• 5 minute overview of what webcomponents are / considerations
  • 96.4% of USA government web traffic can handle web components (probably closer to 98% in reality)
  • 85% with no polyfills
  • "Trouble" areas:
    • IE 10 and below
    • Safari 9 and below
    • Weird unknown browsers
  • Ways around this
    • progressive enhancement from "Light DOM" content (PatternFly / Redhat do this)
• limiting use of property / attribute / javascript