Skip to content

Instantly share code, notes, and snippets.

View chuckh's full-sized avatar

Chuck Horton chuckh

75 followers · 24 following
View GitHub Profile
@Dabolus
Dabolus / Deploying PWA Starter Kit to Firebase.md
Last active June 26, 2020 01:39
A simple guide that explains how to deploy PWA Starter Kit to Firebase

Note: this guide explains step by step how to add Firebase to PWA Starter Kit.

If you already have some Firebase knowledge and you just want to get everything ready out of the box, you might want to checkout the Firebase branch on the PWA Starter Kit repo, that already contains all the needed files.

Deploying prpl-server to Firebase

Firebase Hosting alone is not sufficient for hosting the prpl-server build since it requires some server-side processing of the user agent string. Instead, you will have to use Firebase Functions for that.

  1. Sign up for a Firebase account
@ChadKillingsworth
ChadKillingsworth / e2e-shadowdom.md
Last active July 6, 2023 06:54
Selenium Testing with Shadow DOM

End-to-end Testing with Shadow DOM

As the web component specs continue to be developed, there has been little information on how to test them. In particular the /deep/ combinator has been deprecated in Shadow DOM 1.0. This is particularly painful since most end-to-end testing frameworks rely on elements being discoverable by XPath or calls to querySelector. Elements in Shadow DOM are selectable by neither.

WebDriver.io

Webdriver.io has the standard actions by selectors, but also allows browser executable scripts to return an element

@robdodson
robdodson / my-app.html
Last active May 17, 2018 12:05
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
@ebidel
ebidel / wcr_lazyload.html
Created January 21, 2016 18:56
How to use the WebComponentsReady when lazy loading the webcomponents.js polyfills (http://jsbin.com/dihasa/edit?html,output)
<!doctype html>
<html>
<head>
<base href="https://polygit.org/components/">
<!-- <script src="webcomponentsjs/webcomponents-lite.min.js"></script> -->
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body>
@ebidel
ebidel / polymer-perf-bookmarklet.js
Last active May 1, 2021 15:42
Polymer performance numbers bookmarklet
javascript:(function(){(function printStats(){var loadTimes=window.chrome.loadTimes();firstPaint=loadTimes.firstPaintTime*1000;firstPaintTime=firstPaint-(loadTimes.startLoadTime*1000);console.info('First paint took',firstPaintTime,'ms');console.info('Load took',performance.timing.loadEventStart-performance.timing.navigationStart,'ms');var instances=0;if(parseFloat(Polymer.version)<1){instances=[].slice.call(document.querySelectorAll('html /deep/ *')).filter(function(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}).length;}else{instances=Polymer.telemetry.instanceCount;}console.info('Custom element instances:',instances);var reflectCount=0;if(Polymer.telemetry){console.info('=== Properties set to reflectToAttribute ===');Polymer.telemetry.registrations.forEach(function(el){for(var prop in el.properties){if(el.properties[prop].reflectToAttribute){console.log(el.is+'.'+prop);reflectCount++;}}});}else{console.info('=== Properties set to reflect ===');Polymer.elements.forEach(function(el){for(var
@thomasofdenmark
thomasofdenmark / gist:74080416bd9f5eb7fdd4
Created August 26, 2015 06:51
<firebase-collection id="firebaseCollection"
data="{{videos}}"
location="https://deejay.firebaseio.com/playqueues/hansenbar"
order-by-child="score"
on-firebase-value="firebaseValue"
log="true">
</firebase-collection>
<template is="dom-repeat" items="[[videos]]">
<song-card playing="[[item.playing]]">
@ebidel
ebidel / app.html
Last active May 1, 2021 15:42
Fast Polymer app loading - optimized for first render, progressively enhanced lazy loading
<!DOCTYPE html>
<html>
<head>
<style>
body.loading #splash {
opacity: 1;
}
#splash {
position: absolute;
top: 0;
@justinribeiro
justinribeiro / edit-name.html
Last active March 15, 2016 12:38
Basic updating with custom Polymer element, firebase-collection, and firebase-document
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/firebase-element/firebase-document.html">
<dom-element id="edit-name">
<template>
<style>
:host {
display: block;
padding: 1em;
}
@domenic
domenic / 0-github-actions.md
Last active May 26, 2024 07:43
Auto-deploying built products to gh-pages with Travis

Auto-deploying built products to gh-pages with GitHub Actions

This is a set up for projects which want to check in only their source files, but have their gh-pages branch automatically updated with some compiled output every time they push.

A file below this one contains the steps for doing this with Travis CI. However, these days I recommend GitHub Actions, for the following reasons:

  • It is much easier and requires less steps, because you are already authenticated with GitHub, so you don't need to share secret keys across services like you do when coordinate Travis CI and GitHub.
  • It is free, with no quotas.
  • Anecdotally, builds are much faster with GitHub Actions than with Travis CI, especially in terms of time spent waiting for a builder.
@chuckh
chuckh / designer.html
Last active August 29, 2015 14:06
designer
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../core-icons/av-icons.html">
<link rel="import" href="../paper-fab/paper-fab.html">