Skip to content

Instantly share code, notes, and snippets.

Edward Irby EdwardIrby

Block or report user

Report or block EdwardIrby

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@gaearon
gaearon / connect.js
Last active Dec 4, 2019
connect.js explained
View connect.js
// 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 (
@zcaceres
zcaceres / Eyeballing-This.md
Last active Dec 2, 2019
Understanding Binding and 'this' in Javascript
View Eyeballing-This.md

How to Eyeball Your ‘This’ Context in Javascript

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.

To understand this, we need to see where it is invoked. Nothing else matters, with one exception which we'll cover in a moment.

View es6mixin.js
var Bar1 = base => class extends base {
componentWillMount(){
super.componentWillMount();
console.log('Bar1');
}
};
var Bar2 = base => class extends base {
componentWillMount(){
super.componentWillMount();
@WaldoJeffers
WaldoJeffers / compose.js
Last active Nov 29, 2019
JavaScript one-line compose (ES6)
View compose.js
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
marcysutton / chrome-a11y-experiment-instructions.md
Last active Nov 19, 2019
Enable Chrome Accessibility Experiment
View chrome-a11y-experiment-instructions.md

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:

@treshugart
treshugart / README.md
Last active Aug 18, 2019
HMR for generic web components
View README.md

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"

View interactive_machine_learning.md

Interactive Machine Learning

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

@jtangelder
jtangelder / server.py
Created Dec 24, 2014
Python SimpleHTTPServer with HTML5 pushState support
View server.py
#!/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
View eventtarget.js
function eventTarget(o) {
const {port1} = new MessageChannel();
o.dispatchEvent = port1.dispatchEvent.bind(port1);
o.addEventListener = port1.addEventListener.bind(port1);
}
// Usage:
let myObj = { /* ... */ };
eventTarget(myObj);
@fresc81
fresc81 / index.js
Last active Aug 7, 2016
simple Todo example of how to use hook.io and orchetrate.io together; use ajax if javascript is available otherwise use html forms; https://hook.io/paul-bottinhook-gmail-com/todo
View index.js
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
You can’t perform that action at this time.