jesstelford

Starving the Event Loop with microtasks

"What's the Event Loop?"

Sparked from this twitter conversation when talking about doing fast async rendering of declarative UIs in Preact

These examples show how it's possible to starve the main event loop with microtasks (because the microtask queue is emptied at the end of every item in the event loop queue). Note that these are contrived examples, but can be reflective of situations where Promises are incorrectly expected to yield to the event loop "because they're async".

• setTimeout-only.js is there to form a baseline

Rich-Harris

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

Bhavdip

###Sketch trial non stop

Open hosts files:

$ open /private/etc/hosts

Edit the file adding:

127.0.0.1 backend.bohemiancoding.com

127.0.0.1 bohemiancoding.sketch.analytics.s3-website-us-east-1.amazonaws.com

magician11

/* eslint-disable no-console */

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

/*
Shopify issues a HTTP POST request.
- https://help.shopify.com/api/tutorials/webhooks#receive-webhook

ryanflorence

// component state
class LedgerContainer extends React.Component {
  state = {
    debits: null,
    credits: null,
    creditsError: null,
    debitsError: null
  }

  componentDidMount() {

simonswiss

const fs = require('fs')
const axios = require('axios')
const cheerio = require('cheerio')

const URLS = require('./urls')
const TARGET_FILE = './data.js'

function scrapeData(url) {

  axios.get(url).then(response => {

dominikwilkowski

Flatten a deep javascript object into single-depth object with ES6

Call it via:

const flat = flatten( realDeepObject );

Test case:

guilhermepontes

// original gist
const shuffleArray = arr => arr.sort(() => Math.random() - 0.5);

// fully random by @BetonMAN
const shuffleArray = arr => arr
  .map(a => [Math.random(), a])
  .sort((a, b) => a[0] - b[0])
  .map(a => a[1]);

shuffleArray([1, 2, 3]) //[3, 1, 2]

slightlyoff

Background

One of the biggest missed opportunities thus far with HTTP/2 ("H/2") is that we are not yet able to sunset WebSockets in favor of H/2. Web Sockets and H/2 both support multiplexing messages bi-directionally and can send both textual and binary data.

Server Sent Events ("SSE"), by contrast, are not bi-directional (they're a "server-push-only" channel) and binary data cannot be sent easily. They are, however, very simple to implement. Adding to the menagerie of options, RTCPeerConnection can also be used to signal data to applications in a low-latency (but potentially lossy) way.

Because H/2 [does not support the handshake (upgrade) that WebSockets use to negotiate a connection](https://daniel.haxx.se/blog/2016/06/15/no-websockets-

m-richo

#!/bin/bash

set -eu
set -o pipefail

API_ENDPOINT=$(cf api |grep "endpoint" |awk -F "https://" '{print $2}')
rm -f $API_ENDPOINT.csv

echo "Running audit for $API_ENDPOINT"
echo "Output is in $API_ENDPOINT.csv"