davidbgk

<script>
  window.Promise || document.write('<script src="https://unpkg.com/es6-promise@3.2.1/dist/es6-promise.min.js"><\/script>');
  window.fetch || document.write('<script src="https://unpkg.com/whatwg-fetch@1.0.0/fetch.js"><\/script>');
</script>

davidbgk

// ( T1 => Promise<T2> ) => Array<T1> => Promise<Array<T2>>

export const concurrent = foo => vals =>
  Promise.all(vals.map(foo))

export const series = foo => vals =>
  vals.reduce((p, val) => p.then(rs => foo(val).then(r => rs.concat([val]))), Promise.resolve([]))

// Usage: promiseOfValues.then(promiseAll.concurrent(functionReturningAPromiseFromAValue))

davidbgk

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.

davidbgk

import os
import shlex
import subprocess


def spawn(cmd):
    os.mkfifo("toto")
    with open("toto", "w") as f:
        process = subprocess.Popen(shlex.split(cmd), stdout=f)
    process.wait()

davidbgk

Woof is an amazingly simple and effective file exchange tool:
http://www.home.unix-ag.org/simon/woof.html
This distribution doesn't include simon Budig's original woof
(that started breaking for me), but Edward Samson's fork:
https://bitbucket.org/edu/woof

Desktop helper scripts:
filewoof and folderwoof "open with" actions for nautilus etc.
and woofget that runs "woof -U" in a terminal window in /tmp
(e.g. for a launcher button)

davidbgk

"use strict";

function remember(...args){
    const [key, value] = args;
    
    if(args.length === 1){ // recall
        return new Promise(resolve => {
            setTimeout(() => {
                const val = localStorage.getItem(key);
                

davidbgk

const store = createStore((state = { counter: 0 }, action) => {
  switch(action.type) {
    case "INCREMENT":
      return { counter: state.counter + 1 }
    case "DECREMENT":
      return { counter: state.counter - 1 }
    default:
      return state
  }
})

davidbgk

The issue:

..mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

(from a new defunct https://developers.google.com/mobile/articles/fast_buttons article)

touch-action CSS property can be used to disable this behaviour.

touch-action: manipulation The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.

davidbgk

I feel the need to have a little rant about MooTools and ES7 and the whole 'Array.contains' hoo-hah.

When MooTools came out in 2006, the most popular framework was Prototype. As the name suggests, it extended prototypes, as did MooTools. People still referred to making websites with JavaScript as 'DHTML', there was no trim method on strings, there wasn't even a forEach method on arrays. JavaScript was a crippled language. IE6 ruled the waves.

MooTools, Prototype, Dojo, Base2 - they made the language usable, even fun, to work with. By using an incredible feature of JavaScript, prototypical inheritance, we were able to add features to the language that made it palatable.

Be it simple methods like number.toInt, string.trim, array.forEach, or familiar programming constructs such as Class, MooTools and its ilk took JavaScript from something impossible to work with to something that you could properly use to build awesome sites, and even apps - Microsoft, IE and desktop ruled everything, and the concept of a 'we

davidbgk

import React from 'react'
import ReactDOM from 'react-dom'

const Hello = ({name}) => <h1>Hello {name}!</h1>

ReactDOM.render(
  <Hello name={"vjeux"}/>,
  document.body.appendChild(document.createElement("div"))
)