OliverJAsh

// @ts-check

const treeify = require('treeify');

/**
 * @param {import('webpack').StatsCompilation} stats
 * @param {string | number} id
 */
const getModuleById = (stats, id) => stats.modules.find((module) => module.id === id);

OliverJAsh

// https://gist.github.com/OliverJAsh/5de515ad1f81b88409c13cd548c20893
// https://twitter.com/OliverJAsh/status/1334537098469265413

const { Project } = require('ts-morph');

const project = new Project({
  tsConfigFilePath: 'tsconfig.app.no-references.json',
});

const PATH_TO_MATCH = '/Users/oliverash/Development/unsplash-web/shared/helpers/booleans.ts';

OliverJAsh

/*

In JavaScript, objects can be used to serve various purposes.

To maximise our usage of the type system, we should assign different types to our objects depending
on the desired purpose.

In this blog post I will clarify two common purposes for objects known as records and dictionaries
(aka maps), and how they can both be used with regards to the type system.

bahmutov

// following along https://medium.com/@luijar/kliesli-compositions-in-javascript-7e1a7218f0c4
const R = require('ramda')
const Maybe = require('ramda-fantasy').Maybe

// parse JSON string into object
// parse :: String -> Object | Null
function parse(s) {
  try {
    return JSON.parse(s)
  } catch (e) {

mwickett

import React from 'react'
import { withRouter, Link } from 'react-router-dom'
import { graphql, compose } from 'react-apollo'
import { Formik } from 'formik'
import Yup from 'yup'

import FormWideError from '../elements/form/FormWideError'
import TextInput from '../elements/form/TextInput'
import Button from '../elements/form/Button'
import { H2 } from '../elements/text/Headings'

paularmstrong

import hoistStatics from 'hoist-non-react-statics';
import React from 'react';

/**
 * Allows two animation frames to complete to allow other components to update
 * and re-render before mounting and rendering an expensive `WrappedComponent`.
 */
export default function deferComponentRender(WrappedComponent) {
  class DeferredRenderWrapper extends React.Component {
    constructor(props, context) {

acdlite

// 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 => {

MarkTiedemann

An Easier Way to Enforce Required Parameters in ES6

Expands on Handling required parameters in ECMAScript 6 by Axel Rauschmayer.

The idea (which is credited to Allen Wirfs-Brock) is, in essence, to use default parameter values to call a function which throws an Error if the parameter is missing:

const throwIfMissing () => { throw new Error('Missing parameter') }

paulirish

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.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent