Skip to content

Instantly share code, notes, and snippets.

François Bonnefont happypoulp

  • MolotovTV
  • Paris, France
Block or report user

Report or block happypoulp

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
@Rich-Harris
Rich-Harris / service-workers.md
Last active Oct 17, 2019
Stuff I wish I'd known sooner about service workers
View service-workers.md

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

@yang-wei
yang-wei / destructuring.md
Last active Sep 2, 2019
Elm Destructuring (or Pattern Matching) cheatsheet
View destructuring.md

Should be work with 0.18

Destructuring(or pattern matching) is a way used to extract data from a data structure(tuple, list, record) that mirros the construction. Compare to other languages, Elm support much less destructuring but let's see what it got !

Tuple

myTuple = ("A", "B", "C")
myNestedTuple = ("A", "B", "C", ("X", "Y", "Z"))
@mauvm
mauvm / Jasmine-and-Babel6.md
Created Nov 12, 2015
Jasmine ES6 run script for use with Babel 6
View Jasmine-and-Babel6.md
$ npm install --save babel-cli babel-preset-es2015
$ npm install --save-dev jasmine

.babelrc:

{
  "presets": ["es2015"]
@gaearon
gaearon / slim-redux.js
Last active Oct 19, 2019
Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)
View slim-redux.js
function mapValues(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
result[key] = fn(obj[key], key);
return result;
}, {});
}
function pick(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
if (fn(obj[key])) {
@paulirish
paulirish / what-forces-layout.md
Last active Oct 23, 2019
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
@gaearon
gaearon / combining.js
Created Jun 3, 2015
Combining Stateless Stores
View combining.js
// ------------
// counterStore.js
// ------------
import {
INCREMENT_COUNTER,
DECREMENT_COUNTER
} from '../constants/ActionTypes';
const initialState = { counter: 0 };
View gist:598fa75e22bdfa44cf47

2015-01-29 Unofficial Relay FAQ

Compilation of questions and answers about Relay from React.js Conf.

Disclaimer: I work on Relay at Facebook. Relay is a complex system on which we're iterating aggressively. I'll do my best here to provide accurate, useful answers, but the details are subject to change. I may also be wrong. Feedback and additional questions are welcome.

What is Relay?

Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).

@ericelliott
ericelliott / fp-lingo.md
Last active Oct 12, 2019
A Guide to Functional Programming Lingo for JavaScripters
View fp-lingo.md

A Guide to Functional Programming Lingo for JavaScripters

Functional programming gets a bad wrap about being too hard for mere mortals to comprehend. This is nonsense. The concepts are actually quite simple to grasp.

The jargon is the hardest part. A lot of that vocabulary comes from a specialized field of mathematical study called category theory (with a liberal sprinkling of type theory and abstract algebra). This sounds a lot scarier than it is. You can do this!

All examples using ES6 syntax. wrap (foo) => bar means:

function wrap (foo) {
@staltz
staltz / introrx.md
Last active Oct 22, 2019
The introduction to Reactive Programming you've been missing
View introrx.md
@mitchwongho
mitchwongho / Docker
Last active Oct 22, 2019
Docker 'run' command to start an interactive BaSH session
View Docker
# Assuming an Ubuntu Docker image
$ docker run -it <image> /bin/bash
You can’t perform that action at this time.