VictorTaelin

async/await is just the do-notation of the Promise monad

CertSimple just wrote a blog post arguing ES2017's async/await was the best thing to happen with JavaScript. I wholeheartedly agree.

In short, one of the (few?) good things about JavaScript used to be how well it handled asynchronous requests. This was mostly thanks to its Scheme-inherited implementation of functions and closures. That, though, was also one of its worst faults, because it led to the "callback hell", an seemingly unavoidable pattern that made highly asynchronous JS code almost unreadable. Many solutions attempted to solve that, but most failed. Promises almost did it, but failed too. Finally, async/await is here and, combined with Promises, it solves the problem for good. On this post, I'll explain why that is the case and trace a link between promises, async/await, the do-notation and monads.

First, let's illustrate the 3 styles by implementing

rauschma

Using server-sent events

Why and how?

• Documentation: https://web.dev/articles/eventsource-basics
• Use case: broadcasting data from server to browsers
• Benefits:
  • Easy to understand and implement (only a few lines of code)
  • No library is needed
• Can use same HTTP(S) authentication as elsewhere in the app (which can’t be done with websockets)

baumandm

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime and ffmpeg.

Forked from https://gist.github.com/dergachev/4627207. Updated to use a palette to improve quality and skip gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

ryanflorence

import invariant from "tiny-invariant";

class AmalgoBox extends HTMLElement {
  get input() {
    return this.querySelector("input") as HTMLInputElement;
  }

  get button() {
    return this.querySelector("button") as HTMLButtonElement;
  }

jphaas

#To install:
#
#In your git configuration (for instance, .git/config to do it at the project level), add:
#
#[merge "json_merge"]
#	name = A custom merge driver for json files
#	driver = coffee json_merge.coffee %O %A %B
#	recursive = binary
#
#In your project's .gitattributes file, add something like:

rauschma

This content moved here: https://exploringjs.com/impatient-js/ch_arrays.html#quickref-arrays

tejacques

import * as React from 'react';
import { Component } from 'react';

export default function HOCBaseRender<Props, State,  ComponentState>(
    Comp: new() => Component<Props & State, ComponentState>) {
    return class HOCBase extends Component<Props, State> {
        render() {
            return <Comp {...this.props} {...this.state}/>;
        }
    }

swissmanu

export type Tuple2<A, B> = [A, B];
export type Tuple3<A, B, C> = [A, B, C];
export type Tuple4<A, B, C, D> = [A, B, C, D];
export type Tuple5<A, B, C, D, E> = [A, B, C, D, E];
export type Tuple6<A, B, C, D, E, F> = [A, B, C, D, E, F];
export type Tuple7<A, B, C, D, E, F, G> = [A, B, C, D, E, F, G];
export type Tuple8<A, B, C, D, E, F, G, H> = [A, B, C, D, E, F, G, H];
export type Tuple9<A, B, C, D, E, F, G, H, I> = [A, B, C, D, E, F, G, H, I];
export type Tuple10<A, B, C, D, E, F, G, H, I, J> = [A, B, C, D, E, F, G, H, I, J];

rauschma

const handler = {
  get(target, propKey, receiver) {
    if (/^_[0-9]+$/.test(propKey)) {
      const result = [];
      const first = Number(receiver);
      const last = Number(propKey.slice(1));
      for (let i=first; i<=last; i++) {
        result.push(i);
      }
      return result;

developit

dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	right: auto;
	padding: 30px;
	transform: perspective(500px) translate(-50%, -50%);
	background: linear-gradient(to bottom, #FFF, #F4F4F4) #FFF;
	border: none;
	border-radius: 3px;