treshugart

Generic web component HMR

I'm messing around with a generic way to do hot-module-replacement with generic web components whether they be vanilla, or done in a framework like Polymer or Skate.

The idea is that you call hmr(customElementConstructor) in your module files and it will set up the proper hooks.

The const filename should be inserted at build time so that it can remember the original localName of the component for the module.

WTF is "x-layout", "Layout" and "filename"

surma

function eventTarget(o) {
    const {port1} = new MessageChannel();
    o.dispatchEvent = port1.dispatchEvent.bind(port1);
    o.addEventListener = port1.addEventListener.bind(port1);
}

// Usage:

let myObj = { /* ... */ };
eventTarget(myObj);

zcaceres

How to Eyeball Your ‘This’ Context in Javascript

by zach.dev

The early programmer struggles with the Javascript keyword this. But understanding your this context is easier than it seems.

This is all about where a function is invoked. Often, early programmers worry about where the function was declared. Perhaps the function was declared in a specific file or a particular object. Surely this changes it's this!

Nope.

WaldoJeffers

const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)))

// Usage : compose functions right to left
// compose(minus8, add10, multiply10)(4) === 42
//
// The resulting function can accept as many arguments as the first function does
// compose(add2, multiply)(4, 10) === 42

marcysutton

NOTE: This is no longer an experiment! You can use the accessibility inspector in Chrome Devtools now, including a fantastic color contrast inspection tool. Read more: https://developers.google.com/web/updates/2018/01/devtools#a11y

---

Just like any good element inspector helps you debug styles, accessibility inspection in the browser can help you debug HTML and ARIA exposed for assistive technologies such as screen readers. There's a similar tool in Safari (and reportedly one in Edge) but I like the Chrome one best.

As an internal Chrome experiment, this tool differs from the Accessibility Developer Tools extension in that it has privileged Accessibility API access and reports more information as a result. You can still use the audit feature in the Chrome Accessibility Developer Tools, or you could use the aXe Chrome extension. :)

To enable the accessibility inspector in Chrome stable:

atduskgreg

Interactive Machine Learning

Taught by Brad Knox at the MIT Media Lab in 2014. Course website. Lecture and visiting speaker notes.

• Power to the People: The Role of Humans in Interactive Machine Learning by Knox, Cakmak, Kulesza, Amershi, and Lau
• A Few Useful Things to Know about Machine Learning by Domingos
• Machine Learning that Matters by Wagstaff
• Beyond Concise and Colorful: Learning Intelligible Rules by Pazzani et al.
• [Designing Games with a Purpose] (https://www.cs.cmu.edu/~biglou/GWAP_CACM.pdf) by von Ahn and Dabbish
• [Human Model Evaluation in Interactive Supervised

gaearon

// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
  // It lets us inject component as the last step so people can use it as a decorator.
  // Generally you don't need to worry about it.
  return function (WrappedComponent) {
    // It returns a component
    return class extends React.Component {
      render() {
        return (

fresc81

module.exports = function (hook) {

  // setup:
  //  Route      /(:action)(/:id)
  //  Gist URL   https://gist.github.com/fresc81/fc6a58b3a43f1c5120f8
  //  View       https://gist.github.com/fresc81/fc6a58b3a43f1c5120f8/raw/theme.html
  //  Presenter  https://gist.github.com/fresc81/fc6a58b3a43f1c5120f8/raw/presenter.js
  // create a collection on orchestrate.io:
  // create two env variables:
  //  orchestrate_auth_token

sebmarkbage

var Bar1 = base => class extends base {
  componentWillMount(){
    super.componentWillMount();
    console.log('Bar1');
  }
};

var Bar2 = base => class extends base {
  componentWillMount(){
    super.componentWillMount();

jtangelder

#!/usr/bin/env python

# execute in the folder you want the server to run
# starts at port 80

import os
import urlparse
import SimpleHTTPServer
import SocketServer