Skip to content

Instantly share code, notes, and snippets.

Verifying my Blockstack ID is secured with the address 1Jv9Ly8VeMMcxYfGNWgMvwwGhrhEqw78U3 https://explorer.blockstack.org/address/1Jv9Ly8VeMMcxYfGNWgMvwwGhrhEqw78U3
// @flow
function getOptions() {
return { num: 42, str: "val" };
// ^ Type of this return is inferred without type annotation.
}
/*::
// ^ Comments like this are part of Flow's Comment Syntax.
// They allow you to include any additional syntax and Flow will parse it
@swennemans
swennemans / cloudSettings
Last active July 3, 2018 05:36
Visual Studio Code Sync Settings Gist
{"lastUpload":"2018-07-03T05:36:32.843Z","extensionVersion":"v2.9.2"}
@swennemans
swennemans / index.js
Created February 9, 2017 18:23 — forked from TylerK/index.js
React Router 4, React -> Preact for production, Async route-based code-splitting.
import React from 'react'
import { render } from 'react-dom';
import { Router, Route } from 'react-router-dom';
import LazyRoute from 'lazy-route';
const App = () => {
render() {
return (
<Router>
<Route
@swennemans
swennemans / PinchZoomPan.js
Created November 5, 2016 21:21 — forked from iammerrick/PinchZoomPan.js
React Pinch + Zoom + Pan
import React from 'react';
const MIN_SCALE = 1;
const MAX_SCALE = 4;
const SETTLE_RANGE = 0.001;
const ADDITIONAL_LIMIT = 0.2;
const DOUBLE_TAP_THRESHOLD = 300;
const ANIMATION_SPEED = 0.04;
const RESET_ANIMATION_SPEED = 0.08;
const INITIAL_X = 0;

Performance Conditionally Rendered Content in React

First, this is not about if in JSX. It's just the simplest example to talk about (and a lot of people tried to do it at first a long time ago).

Some react components conditionally render content. When React first went public, a lot of us coming from handlebars really wanted "if" syntax. This gist isn't just about If components though, it's about

@swennemans
swennemans / app.js
Created September 14, 2016 18:02 — forked from acdlite/app.js
Quick and dirty code splitting with React Router v4
// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
return class AsyncComponent extends React.Component {
static Component = null;
state = { Component: AsyncComponent.Component };
componentWillMount() {
if (!this.state.Component) {
getComponent().then(Component => {

#GPU & Composting in Blink and Chrome

summaried from Chromium documents and other resources

##Background

###Stacking Contexts Positioned elements(relative, absolute, fixed) with a z-index group of layers into a isolated layer

@swennemans
swennemans / latency.markdown
Created January 19, 2016 10:08 — forked from hellerbarde/latency.markdown
Latency numbers every programmer should know

Latency numbers every programmer should know

L1 cache reference ......................... 0.5 ns
Branch mispredict ............................ 5 ns
L2 cache reference ........................... 7 ns
Mutex lock/unlock ........................... 25 ns
Main memory reference ...................... 100 ns             
Compress 1K bytes with Zippy ............. 3,000 ns  =   3 µs
Send 2K bytes over 1 Gbps network ....... 20,000 ns  =  20 µs
SSD random read ........................ 150,000 ns  = 150 µs

Read 1 MB sequentially from memory ..... 250,000 ns = 250 µs

@swennemans
swennemans / HowToAddWebpackToPhoenix.md
Created December 11, 2015 10:49 — forked from hzamani/HowToAddWebpackToPhoenix.md
Configure phoenix framework to use webpack as assets manager
  1. For new projects run mix phoenix.new with --no-brunch option and for existing projects remove brunch related things.

  2. create package.json file:

echo '{"private": true}' > package.json
  1. install webpack and loaders you want to use: