zheeeng

import { sample } from 'lodash';
import React from 'react';
import cookie from 'cookie';
import Layout from '../components/layout';
import HomeV1 from '../components/scenes/home/v1';
import HomeV2 from '../components/scenes/home/v2';

const EXPERIMENT_OPTIONS = {
  v1: HomeV1,
  v2: HomeV2,

zheeeng

Fetch: Download progress

The fetch method allows to track download progress.

Please note: there’s currently no way for fetch to track upload progress. For that purpose, please use XMLHttpRequest, we’ll cover it later.

To track download progress, we can use response.body property. It’s ReadableStream – a special object that provides body chunk-by-chunk, as it comes. Readable streams are described in the Streams API specification.

Unlike response.text(), response.json() and other methods, response.body gives full control over the reading process, and we can count how much is consumed at any moment.

zheeeng

import { useEffect, useRef } from 'react'

export const useClickOutside = <T extends HTMLElement>(callback: (event: MouseEvent) => void) => {
  const ref = useRef<T>(null)

  const eventRef = useRef(callback)

  useEffect(
    () => {
      eventRef.current = callback

zheeeng

🌞 Morning   471 commits  █████░░░░░░░░░░░░░░░░  24.2%
🌆 Daytime   610 commits  ██████▌░░░░░░░░░░░░░░  31.4%
🌃 Evening   581 commits  ██████▎░░░░░░░░░░░░░░  29.9%
🌙 Night     281 commits  ███░░░░░░░░░░░░░░░░░░  14.5%

zheeeng

Technical overview

A basic Option type

// Option.ts

// definition
export class None {
  readonly tag: 'None' = 'None'

zheeeng

export function findIndex <T> (items: T[], fn: (item: T, index: number) => boolean) {
  for (let index = 0, len = items.length; index < len; index++) {
    if (fn(items[index], index)) return index
  }

  return -1
}

export function flatMap <T, U> (items: T[], fn: (item: T, index: number) => U[]) {
  return items.reduce((acc, item, index) => acc.concat(fn(item, index)), [] as U[])

zheeeng

let channels = [
  {'name': '红心兆赫', 'channel_id': -3},
  {'name': '我的私人兆赫', 'channel_id': 0},
  {'name': '每日私人歌单', 'channel_id': -2},
  {'name': '豆瓣精选兆赫', 'channel_id': -10},
  // 心情 / 场景
  {'name': '工作学习', 'channel_id': 153},
  {'name': '户外', 'channel_id': 151},
  {'name': '休息', 'channel_id': 152},
  {'name': '亢奋', 'channel_id': 154},

zheeeng

type Config = {
    title: string
    description: string
    rules: Rule[]
}

type Rule = {
    description: string,
    manipulators: Manipulator[]
}

zheeeng

/^(?!.*hello).*$/.test('hello')

/^((?!hello).)*$/.test('hello')

zheeeng

['contextmenu', 'selectstart', 'copy'].forEach(function(ev){
    document.addEventListener(ev, function(event){
        return event.returnValue = false
    })
});