tamlyn

Execution order of Jest/Jasmine test code

While tests run in source order, surrounding code does not which can lead to hard to debug issues.

Compare the test file below with the sample output below that and note the order of the log messages.

Key points

• Any code not inside of it, beforeAll, afterAll, beforeEach or afterEach runs immediately on initialisation.
• This means code at the end of your file runs before even your before hooks.

ryanflorence

import React from 'react'
import Router from 'react-router/BrowserRouter'
import Match from 'react-router/Match'
import Link from 'react-router/Link'
import Redirect from 'react-router/Redirect'

function elementInViewport(el) {
  var top = el.offsetTop
  var left = el.offsetLeft
  var width = el.offsetWidth

developit

/** Async version of Array.prototype.reduce()
 *  await reduce(['/foo', '/bar', '/baz'], async (acc, v) => {
 *    acc[v] = await (await fetch(v)).json();
 *    return acc;
 *  }, {});
 */
export async function reduce(arr, fn, val, pure) {
  for (let i=0; i<arr.length; i++) {
    let v = await fn(val, arr[i], i, arr);
    if (pure!==false) val = v;

fab1an

export default class GeoJsonMapLayer extends React.Component {
  render() {
    return (
      <div>
      </div>
    );
  }

  componentWillUnmount() {
    if (this.layer) {

bendc

:root {
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);

  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);

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

stefanmaric

Copy-to-clipboard Bookmarklet

Create Bookmarklet (browser bookmark that executes Javsacript) to copy a given text to Clipboard.

This is the base javascript:

(function (text) {
  var node = document.createElement('textarea')
  var selection = document.getSelection()

melihmucuk

import React, { Component } from 'react';
import {
 StyleSheet,
 View,
 Text,
 ListView
} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';
import * as Animatable from 'react-native-animatable';

rauchg

require-from-twitter

Since Twitter doesn't have an edit button, it's a suitable host for JavaScript modules.

How to use

Source tweet: https://twitter.com/rauchg/status/712799807073419264

const leftPad = await requireFromTwitter('712799807073419264');

mrdoob

/**
 * @author mrdoob / http://mrdoob.com/
 */

function html2canvas( element ) {

	var range = document.createRange();

	function getRect( rect ) {