vitobotta

// This code is to be used with https://turbo.hotwire.dev. By default Turbo keeps visited pages in its cache 
// so that when you visit one of those pages again, Turbo will fetch the copy from cache first and present that to the user, then 
// it will fetch the updated page from the server and replace the preview. This makes for a much more responsive navigation 
// between pages. We can improve this further with the code in this file. It enables automatic prefetching of a page when you
// hover with the mouse on a link or touch it on a mobile device. There is a delay between the mouseover event and the click
// event, so with this trick the page is already being fetched before the click happens, speeding up also the first 
// view of a page not yet in cache. When the page has been prefetched it is then added to Turbo's cache so it's available for
// the next visit during the same session. Turbo's default behavior plus this trick make for much more responsive UIs (non SPA).

tmcw

Here's a sort of unsolved logic/programming problem.

I made this site, Old Fashioned, for cocktail recipes. It has structured data for ingredients and recipes for cocktails. And one of its neat features is that, given certain ingredients, it shows you what's possible or what's nearly possible.

I've been thinking about the opposite angle: from which set of 5 ingredients can you make the highest number of different cocktails? How does one correctly solve this problem.

If formal descriptions are your jam: let's say:

• You have 100 different ingredients
• You have 20 cocktails, each of which use 2-6 ingredients

pedroborges

<?php

class LocalValetDriver extends ValetDriver
{
    /**
     * Determine if the driver serves the request.
     *
     * @param  string  $sitePath
     * @param  string  $siteName
     * @param  string  $uri

thundernixon

Spacing Tests!

Some useful strings and tools to use in spacing and kerning type.

Paul Barnes: "There should be the international standard of spacing tests," and recommended this:

(Text wasn't directly given, so this is what I remember).

Useful to adapt slightly as needed, but it's helpful that it's a simple, brief set of tests.

jongacnik

module.exports = function (state, emitter, app) {
  state.component = require('component-box')
  app.component = function (key, Component) {
    if (!key || !Component) return
    var obj = {}
    obj[key] = function () {
      return new Component()
    }
    state.component.use(obj)
  }

cramforce

/**
 * Delays calling the given function until the browser is notifying us
 * about a certain minimum budget or the timeout is reached.
 * @param {!Window} win
 * @param {number} startTime When we started waiting for idle.
 * @param {number} minimumTimeRemaining Minimum number of millis idle
 *     budget for callback to fire.
 * @param {number} timeout in millis for callback to fire.
 * @param {function()} fn Callback.
 */

paulirish

A few conversations have circled around user-side structural profiling. For context, see React PR #7549: Show React events in the timeline when ReactPerf is active

One particular concern is the measurement overhead. This gist has a benchmarking script (measure.js) for evaluating overhead and initial results.

Results: performance.mark()

Runs about 0.65µs per mark() call. Naturally, that's ~= an overhead of 1ms for 1500 mark()s.

ashfurrow

Apps to install from macOS App Store:

• Pastebot
• GIF Brewery
• Slack
• Keynote/Pages/Numbers
• 1Password
• OmniFocus 3
• Airmail 3
• iA Writer

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.

celoyd

Himawari-8 animation tutorial

Here’s how to make animations like this one. It requires intermediate Unix command-line knowledge, to install some tools and to debug if they don’t work. You’ll need these utilities:

• curl (or you can translate to wget)
• convert and montage, part of ImageMagick
• ffmpeg, plus whatever codecs
• parallel, for iteration that’s nicer than shell for loops or xargs
• run everything in zsh for leading 0s in numerical ranges to work