OlegLustenko

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()

OlegLustenko

How to think about Monads

Initially, Monads are the biggest, scariest thing about Functional Programming and especially Haskell. I've used monads for quite some time now, but I didn't have a very good model for what they really are. I read Philip Wadler's paper Monads for functional programming and I still didnt quite see the pattern.

It wasn't until I read the blog post You Could Have Invented Monads! (And Maybe You Already Have.) that I started to see things more clearly.

This is a distillation of those works and most likely an oversimplification in an attempt to make things easier to understand. Nuance can come later. What we need when first learning something is a simple, if inaccurate, model.

This document assumes a beginner's knowledge of pure functional programming and Haskell with some brief encounters of Monads, e.g. [Functors, Applicatives, And

OlegLustenko

/**
 * Basic proof of concept.
 * - Hot reloadable
 * - Stateless stores
 * - Stores and action creators interoperable with Redux.
 */

import React, { Component } from 'react';

export default function dispatch(store, atom, action) {

OlegLustenko

• https://github.com/arnarthor/advent-of-code-2017 (Native & BuckleScript)
• https://github.com/rrdelaney/advent-of-code-2017 (Native)
• https://github.com/fazouane-marouane/advent-of-code-2017 (BuckleScript)
• https://github.com/jaredly/advent-2017 (BuckleScript)
• https://github.com/brentbaum/advent-of-code (BuckleScript)
• https://github.com/Lokeh/advent-2017 (BuckleScript)

OlegLustenko

// @flow

// Flow Fundamentals For ReactJS Developers

/*
  Tutorial for ReactJS Developers wanting to get started with FlowType.
  We will go through the basic Flow features to gain a better understanding of how to use FlowType with React.
  You can uncomment the features one by one and work through this tutorial.

  If you want to learn the very FlowType basics, refer to "Flow Fundamentals for JavaScript Developers" (https://gist.github.com/busypeoples/61e83a1becc9ee9d498e0db324fc641b) first.

OlegLustenko

class Nil {}
class Cons { constructor( head,   tail) { Object.assign(this, {  head,   tail }); } };
class Pair { constructor(first, second) { Object.assign(this, { first, second }); } };

const _1 = () => 1;
const _2 = () => 2;
const _3 = () => 3;

const nil = () => new Nil();
const cons = (head, tail) => () => new Cons(head, tail);

OlegLustenko

/* Slaying a UI Anti Pattern in Reason */

type remoteData 'e 'a =
  | Nothing
  | Loading
  | Failure 'e
  | Success 'a;

type item = {
  userId: int,

OlegLustenko

module.exports = {
  config: {
    // default font size in pixels for all tabs
    fontSize: 14,

    // font family with optional fallbacks
    fontFamily: '"Input Mono", Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',

    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
    cursorColor: 'rgba(248,28,229,0.8)',

OlegLustenko

function prefetch(getKey, getValue, getInitialValue, propName) {
  const inFlight = new Set();
  const cache = new Map();
  return ChildComponent => {
    return class extends React.Component {
      state = {value: getInitialValue(this.props)};
      componentWillReceiveProps(nextProps) {
        const key = getKey(nextProps);
        if (cache.has(key)) {
          // Use cached value

OlegLustenko

const axios = require('axios');
const http = require('http');
const https = require('https');

module.exports = axios.create({
  //60 sec timeout
  timeout: 60000,

  //keepAlive pools and reuses TCP connections, so it's faster
  httpAgent: new http.Agent({ keepAlive: true }),