domfarolino

Object.prototype["0"] = "test0";
let obj = {"1": "test1", "2": "test2"};

for (let k in obj) console.log(k); // 1, 2, 0

Object.defineProperty(obj, 'length', {
  value: 3,
  enumerable: false,
  writable: true,
  configurable: false

domfarolino

class CoolButton extends HTMLButtonElement {
  constructor() {
    super(); // must call as usual
  }
  
  connectedCallback() {
    this.addEventListener('click', this._onClick);
    // Woohoo, we've been connected
  }
  

domfarolino

<link rel="stylesheet" href="styles.css"> <!-- For the daring (Chrome 54+) -->
<div class="card">
  <slot name="card-header">Fallback Header</slot>
  <slot name="card-body">Fallback card-body text</slot>
  <p class="card-footer">
    Written by <slot name="card-author"></slot>
  </p>
</div>

domfarolino

:host {
  font-family: sans-serif;
}

div.card {
  width: 100%;
  max-width: 300px;
  display: inline-block;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, .6);
  margin: 10px;

domfarolino

<cool-card>
  <h2 slot="card-header">Card Header</h2>
  
  <p slot="card-body">
    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."
  
  <p slot="card-author">
    <a href="https://twitter.com/domfarolino">By domfarolino</a>
  </p>
</cool-card>

domfarolino

class CoolCard extends HTMLElement {
  constructor() {
    // MUST to allow HTMLElement interface to set
    // itself up so we can take advantage of it
    super();
  }

  connectedCallback() {
    // Every time a cool-card gets inserted into a
    // document this asynchronous callback gets called

domfarolino

const array = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];

function handleArrayValue(v) {
	console.log(`Handling ${v}`);
	for (let i = 0; i < 15000; ++i) {
  	for (let j = 0; j < i; ++j) {
    	// Nothing!
    }
  }
}

domfarolino

function CoolObject() {
  var that = this;

  // Allows us to use lexical this as opposed to .bind or that = this trick
  this.coolPromise = new Promise((resolve, reject) => {
    console.log(this === that);
    setTimeout(() => {
      resolve(10);
    }, 2000);
  });

domfarolino

/**
 * The softBind "polyfill" is kind of like .bind(..) hard binding
 * however it is slightly more flexible in that it can allow for
 * `this` overrides with implicit, explicit, and `new` bindings.
 * The default .bind(..) is less flexible only allows `this` overrides
 * in situations where `new` is used.
 *
 * To use it, you pass in some default value for `this`. This value
 * will only be used if the value of `this` at runtime is the global
 * `window` object, or undefined (possibly strict mode). This means

domfarolino

This gist is deprecated and now exists here

This article is intended to further your knowledge of the various phases a DOM event goes through.

Great resources to refer to:

• W3 Event Flow Spec
• Bubbling and Capturing

TL;DR