gaearon

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

mscoutermarsh

workflow "Deploy master" {
  on = "push"
  resolves = [
    "alias",
  ]
}

action "install" {
  uses = "actions/npm@94e6933"
  args = "install"

achimnol

import asyncio
import base64
import enum
import secrets
from pprint import pprint

import graphene
from graphql.execution.executors.asyncio import AsyncioExecutor

redism

#!/bin/bash
if [ -f ~/Library/KeyBindings/DefaultkeyBinding.dict ]; then
	echo "~/Library/KeyBindings/DefaultkeyBinding.dict already exists"
	exit -1
fi

mkdir -p ~/Library/KeyBindings
cat << EOF > ~/Library/KeyBindings/DefaultkeyBinding.dict 
{
    "₩" = ("insertText:", "\`");

rauchg

Minimum Viable Async with Node 6

With the release of Node 6.0.0, the surface of code that needs transpilation to use ES6 features has been reduced very dramatically.

This is what my current workflow looks like to set up a minimalistic and fast microservice using micro and async + await.

The promise

paulrouget

Document moved to: https://github.com/servo/servo/blob/master/HACKING_QUICKSTART.md

gaearon

function mapValues(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    result[key] = fn(obj[key], key);
    return result;
  }, {});
}

function pick(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    if (fn(obj[key])) {

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

brycebaril

@mafintosh asks: "Does anyone have a good code example of when to use setImmediate instead of nextTick?"

https://twitter.com/mafintosh/status/624590818125352960

The answer is "generally anywhere outside of core".

process.nextTick is barely asynchronous. Flow-wise it is asynchronous, but it will trigger before any other asynchronous events can (timers, io, etc.) and thus can starve the event loop.

In this script I show a starved event loop where I just synchronously block, use nextTick and setImmediate

akkartik

#!/bin/sh
#
# Github won't permit files larger than 100MB (https://help.github.com/articles/working-with-large-files);
# don't wait to realize this until you try to push a bunch of commits.

git diff --cached --name-only |
  while read file
  do
    if [ $(du -m $file |cut -f 1) -ge 100 ]
    then