Skip to content

Instantly share code, notes, and snippets.


Dimitri Glazkov dglazkov

View GitHub Profile
dglazkov / CustomElementsF2FWhiteboardScribble.js
Created Jan 25, 2016
Custom Elements F2F Whiteboard Scribble
View CustomElementsF2FWhiteboardScribble.js
class Me {
constructor() {
e1 = new Me;
e2 = new Me;
dglazkov /
Created Oct 6, 2015 — forked from linjunpop/
iOS 7 Safari Notes

CSS font values

View distributions.js
// dev B:
var aBar = document.createElement('a-bar');
var width = someElement.offsetWidth;
dglazkov / core-header-panel.html
Last active Aug 29, 2015
Example of re-distribution
View core-header-panel.html
<div id="outerContainer" vertical layout>
<slot id="headerContent" name="core-toolbar"></slot>
<div id="mainPanel" flex vertical layout>
<div id="mainContainer" flex?="{{mode !== 'cover'}}">
<slot id="mainContent" default></slot>
View date-range-combo-box.html
<!-- instance -->
<input type="date" content-slot="start">
<input type="date" content-slot="end">
<template element="date-combo-box">
<content slot="date"></content>
dglazkov / gist:fee1dcb9690baf73dff0
Last active Apr 13, 2016
Multiple-actor Problem
View gist:fee1dcb9690baf73dff0

Definition of the Multiple-actor Problem

The Multiple-actor Problem (MAP) occurs in a web application that contains multiple bits of code, each assuming that they are the only actor in the document. The problem manifests when these assumptions conflict with each other.

Some examples:

  • A web app is written in framework A, then later an analytics script B is added. A makes assumptions about lifetime of elements and handling of events. B is not aware of these assumptions and subtly violates them, causing jank (example)
  • A web app is written using framework A. Attempting to introduce a widgets built using framework B results in weird errors, because B is violating A's assumptions about control of document state (examples 1, [2](
dglazkov / gist:70b9fc2e0468a0ad23ed
Last active Aug 29, 2015
Widget Building Man's Style Problems
View gist:70b9fc2e0468a0ad23ed

I am a Widget Building Man. I bulid widgets. All my widgets are custom elements. Each of my elements has a shadow tree that contains styles.

Situation 1: My widgets share the same set of styles, which makes them consistent and awesome. I keep this set of styles in awesome.css.

Situation 2: Some of my widgets have styles that are long and boring. I want to split them into a separate file, instead of using the style element.

In both situations:

  1. What's the easy-peasy HTML syntax for doing this?
  2. There's a distinct FOUC moment between instantiating the widget's shadow tree and the styles being available. How do I control that?
dglazkov / gist:b31c66432573693f9607
Last active Sep 27, 2015
Easy Way to Grok Insertion Points
View gist:b31c66432573693f9607

Easy Way to Grok Insertion Points

Suppose you're writing a Polymer app. It's a grocery list app to rule all grocery list apps. In it, you have this <grocery-completion> component:

used as:
<grocery-completion data="{{groceries}}"></grocery-completion>

defined as:
<link rel="import" href="../elements/grocery-ingredient-chooser.html">
View designer.html
<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.html">
<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-menu/core-submenu.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../core-animated-pages/core-animated-pages.html">
dglazkov / gist:ce96f673b0b2ce7b8c55
Last active Aug 29, 2015
Shadow DOM Imperative API Brainstorming
View gist:ce96f673b0b2ce7b8c55

#Shadow DOM Imperative API Brainstorming

##Reduced test case:

  <template shadow> <!-- shadow root -->