Skip to content

Instantly share code, notes, and snippets.

Nicolas Gryman ngryman

Block or report user

Report or block ngryman

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
@ngryman
ngryman / example.ts
Created Jun 29, 2019
Updating cached data from multiple parameterized queries after a mutation (hacky solution)
View example.ts
addTask({
variables: { input },
optimisticResponse: {
addTask: {
__typename: 'Task',
id,
...input
}
},
update: (proxy: any, { data: { addTask } }: any) => {
@ngryman
ngryman / create-gif.js
Created Jun 24, 2018
Keep the aspect ratio of your images using GIFs
View create-gif.js
function createGif(width, height) {
const b64wh = btoa(
String.fromCharCode(width & 0xFF) +
String.fromCharCode(width >> 8 & 0xFF) +
String.fromCharCode(height & 0xFF) +
String.fromCharCode(height >> 8 & 0xFF) +
String.fromCharCode(0) +
String.fromCharCode(0)
)
return `R0lGODlh${b64wh}ACwAAAAAAQABAAAC`
@ngryman
ngryman / create-gif.js
Created Jun 24, 2018
Keep the aspect ratio of your images using GIFs
View create-gif.js
function createGif(width, height) {
const buffer = new ArrayBuffer(24)
const byteView = new Uint8Array(buffer)
// signature
byteView.set([ 71, 73, 70, 56, 57, 97 ], 0)
// size
byteView.set([width, width >> 8], 6)
byteView.set([height, height >> 8], 8)
@ngryman
ngryman / dropdown-menu.js
Last active Jan 31, 2018
Gradual usages
View dropdown-menu.js
class DropdownMenu {
state = {
isMenuOpened: this.props.isMenuOpened
}
static defaultProps = {
togglerLabel: 'Show menu'
}
componentDidMount() {
View editor.js
const Editor = () => {
const update = (e, actions) => {
// strip html and get the text only
const source = e.target.innerText
// parse text into tokens stored in `state.tokens`
actions.parse(source)
}
// render tokens to vnodes
@ngryman
ngryman / example.js
Created Jul 9, 2017
Router extensions
View example.js
import { Route, RouterEvents } from './router-exts'
const TrackScreen = html`
<section class="track-screen'
onenter=${() => console.log('enter track screen')}
onleave=${() => console.log('leave track screen')}
></section>
`
const HomeScreen = html`
View readme.md

The aim of hydratation is to avoid trashing out of existing DOM rendered by SSR, but use them and attach eventual event listeners (like a regular patch pass).

Hydratation would happen at the app level and at the first render. Basically it needs a way to know that some part of the DOM tree is something to patch so it does not have to mount.

Before going on, some terminology:

  • The root is the root DOM node generated by HyperApp, the toplevel DOM element.
  • The host is the DOM node that will hold the root, it's currently defined as app.root.
View recyling.js
/**
* Having a constructor tells the VM that this object as a given "shape".
* If this shape is constant, all the code manipulating it will eventually
* be optimized into specialized stubs. This has a HUGE performance impact
* and that's why sometimes JavaScript can be so close to the metal.
*/
function VNode(tag, data, children) {
this.tag = tag
this.data = data
this.children = children || []
@ngryman
ngryman / type-feedback-leak.js
Created Jun 20, 2017
Prevent type feedback leakage.
View type-feedback-leak.js
// Need to generate core of the benchmark dynamically to ensure
// that type feedback does not leak between individual sample runs.
var code = " /* " + (UID++) + " */ " + " for (var i = 0; i < N; i++) {" +
" var obj = arr[i];" +
" result += obj.x + obj.y + i;" +
"}" +
"return result";
View output.txt
v6.5.0
3.10.3
/Users/ngryman/Projects/arbre
├─┬ babel-plugin-istanbul@2.0.1
│ ├─┬ find-up@1.1.2
│ │ └─┬ pinkie-promise@2.0.1
│ │ └── pinkie@2.0.4
│ ├─┬ istanbul-lib-instrument@1.1.1
│ │ ├─┬ babel-generator@6.14.0
│ │ │ └─┬ detect-indent@3.0.1
You can’t perform that action at this time.