Zheeeng 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.

Technical overview

A basic `Option` type

// Option.ts

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

	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,

	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

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

	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[])

	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},

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

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

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

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

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

Zheeeng zheeeng

Fetch: Download progress

Technical overview

A basic Option type

A basic `Option` type