Skip to content

Instantly share code, notes, and snippets.

View kevinpschaaf's full-sized avatar

Kevin Schaaf kevinpschaaf

213 followers · 3 following
View GitHub Profile
@kevinpschaaf
kevinpschaaf / input.scss
Created October 22, 2021 01:26
Generated by SassMeister.com.
/* shared-stuff.sass */
@mixin sharedStuff {
:host {
color: red;
}
.mdc-density-5 {
padding: 5px;
}
}
@kevinpschaaf
kevinpschaaf / input.scss
Created October 22, 2021 01:15
Generated by SassMeister.com.
/* shared-stuff.sass */
@mixin sharedStuff {
:host {
color: red;
}
.mdc-density-5 {
padding: 5px;
}
}
@kevinpschaaf
kevinpschaaf / input.scss
Created October 22, 2021 01:11
Generated by SassMeister.com.
@mixin sharedStuff {
:host {
color: red;
}
.mdc-density-5 {
padding: 5px;
}
}
/* ---- */
@kevinpschaaf
kevinpschaaf / README.md
Last active September 24, 2020 07:33
[OLD] Scoped CustomElementRegistry polyfill

[OLD] Scoped CustomElementRegistry polyfill prototype

🚨 This code has been moved to webcomponents/polyfills.

Scoped CustomElementRegistry polyfill based on proposal: https://github.com/justinfagnani/scoped-custom-elements

Technique: uses native CustomElements to register stand-in classes that delegate to the constructor in the registry for the element's scope; this avoids any manual treewalks to identify custom elements that need upgrading. Constructor delegation is achieved by constructing a bare HTMLElement, inspecting its tree scope (or the tree scope of the node it was created via) to determine its registry, and then applying the "constructor call trick" to upgrade it.

@kevinpschaaf
kevinpschaaf / index.html
Created May 4, 2018 19:10
Polymer 3.0 example
<html>
<head>
<!-- Polyfills only needed for Firefox and Edge. -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
</head>
<body>
<!-- Loads natively on browsers that support Javascript modules like
Chrome, Safari, Firefox 60, Edge 16. For all others, use a
module-compatible toolchain like Polymer CLI, WebPack, or Rollup -->
<script type="module">
@kevinpschaaf
kevinpschaaf / 0. Custom Elements + Redux toolbox & examples.md
Last active July 21, 2020 06:48
Custom Elements + Redux toolbox & examples

An approach to binding Redux to custom elements

The code here captures some of the patterns I used in the "real estate" demo app discussed in my talk End to End Apps with Polymer from Polymer Summit 2017.

There are many ways to connect Redux to custom elements, and this demonstrates just one pattern. The most important aspects are to try and lazily-load as much of the otherwise global state management logic along with the components that need them (as shown via the lazyReducerEnhancer and addReducers calls in the connected components), and to consider the tradeoffs you make in terms of coupling components to the store.

The pattern shown here of creating a stateless component and then a subclass that connects it to the store addresses a potential desire to reuse app-level stateless components between more than one application context, so the subclass provides a degree of decoupling from the concrete store, at the expense of more boilerplate. If app com

@kevinpschaaf
kevinpschaaf / bower.json
Created September 25, 2014 02:22
observe-test
{
"name": "observe-test",
"dependencies": {
"polymer": "Polymer/polymer#master",
"core-ajax": "Polymer/core-ajax#master",
"core-icon": "Polymer/core-icon#master",
"core-icon-button": "Polymer/core-icon-button#master",
"core-icons": "Polymer/core-icons#master",
"core-toolbar": "Polymer/core-toolbar#master",
"paper-shadow": "Polymer/paper-shadow#master",
@kevinpschaaf
kevinpschaaf / demo-data-short.json
Last active August 29, 2015 14:06
IScroll + Polymer
[
{
"index": 0,
"name": "Addie Travis",
"image": "http://placehold.it/50x50/dc35b0/ffffff&text=Index 0",
"checked": false,
"selectValue": 0,
"text": "Cillum irure eiusmod excepteur irure veniam eiusmod aliqua.",
"color": "rgb(199,87,94)"
},
@kevinpschaaf
kevinpschaaf / designer.html
Created August 28, 2014 22:32
designer
<link href="../topeka-elements/category-icons.html" rel="import">
<link href="../core-icon/core-icon.html" rel="import">
<polymer-element name="my-element">
<template>
<style>
#design_host {
width: 100%;
height: 100%;
@kevinpschaaf
kevinpschaaf / designer.html
Created August 28, 2014 22:25
designer
<link rel="import" href="../core-menu/core-submenu.html">
<link rel="import" href="../core-item/core-item.html">
<polymer-element name="my-element">
<template>
<style>
:host {
position: absolute;
width: 100%;