1,309 Matching Annotations
- Mar 2023
-
www.cloudflare.com www.cloudflare.com
-
alistapart.com alistapart.com
-
jakearchibald.com jakearchibald.com
Tags
Annotators
URL
-
-
www.youtube.com www.youtube.com
Tags
Annotators
URL
-
-
www.youtube.com www.youtube.com
Tags
Annotators
URL
-
-
getquick.link getquick.link
-
-
dbconvert.com dbconvert.com
Tags
Annotators
URL
-
-
Tags
Annotators
URL
-
-
exploringjs.com exploringjs.com
-
-
Consuming web streams
```js import { arrayBuffer, blob, buffer, json, text, } from 'node:stream/consumers';
const data1 = await arrayBuffer(getReadableStreamSomehow());
const data2 = await blob(getReadableStreamSomehow());
const data3 = await buffer(getReadableStreamSomehow());
const data4 = await json(getReadableStreamSomehow());
const data5 = await text(getReadableStreamSomehow()); ```
-
Adapting to the Node.js Streams API
```js /* * For instance, given a ReadableStream object, the stream.Readable.fromWeb() method * will create an return a Node.js stream.Readable object that can be used to consume * the ReadableStream's data: / import { Readable } from 'node:stream';
const readable = new ReadableStream(getSomeSource());
const nodeReadable = Readable.fromWeb(readable);
nodeReadable.on('data', console.log); ```
```js /* * The adaptation can also work the other way -- starting with a Node.js * stream.Readable and acquiring a web streams ReadableStream: / import { Readable } from 'node:stream';
const readable = new Readable({ read(size) { reader.push(Buffer.from('hello')); } });
const readableStream = Readable.toWeb(readable);
await readableStream.read();
```
-
-
Tags
Annotators
URL
-
-
-
blog.mmyoji.com blog.mmyoji.com
-
deno.com deno.com
Tags
Annotators
URL
-
-
blog.k-nut.eu blog.k-nut.eu
Tags
Annotators
URL
-
-
codepen.io codepen.io
Tags
Annotators
URL
-
-
twitter.com twitter.com
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
gist.github.com gist.github.com
Tags
Annotators
URL
-
-
glitch.com glitch.com
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
Async iteration of a stream using for await...ofThis example shows how you can process the fetch() response using a for await...of loop to iterate through the arriving chunks.
```js const response = await fetch("https://www.example.org"); let total = 0;
// Iterate response.body (a ReadableStream) asynchronously for await (const chunk of response.body) { // Do something with each chunk // Here we just accumulate the size of the response. total += chunk.length; }
// Do something with the total console.log(total); ```
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
The body read-only property of the Response interface is a ReadableStream of the body contents.
Tags
Annotators
URL
-
-
www.proposals.es www.proposals.es
-
-
www.w3.org www.w3.org
-
-
www.proposals.es www.proposals.es
-
js match (res) { if (isEmpty(res)) { … } when ({ pages, data }) if (pages > 1) { … } when ({ pages, data }) if (pages === 1) { … } else { … } }
js match (arithmeticStr) { when (/(?<left>\d+) \+ (?<right>\d+)/) as ({ groups: { left, right } }) { process(left, right); } when (/(?<left>\d+) \+ (?<right>\d+)/) { process(left, right); } // maybe? else { ... } }
```js class Name { static Symbol.matcher { const pieces = matchable.split(' '); if (pieces.length === 2) { return { matched: true, value: pieces }; } } }
match ('Tab Atkins-Bittner') { when (^Name with [first, last]) if (last.includes('-')) { … } when (^Name with [first, last]) { … } else { ... } } ```
js const res = await fetch(jsonService) match (res) { when ({ status: 200, headers: { 'Content-Length': s } }) { console.log(`size is ${s}`); } when ({ status: 404 }) { console.log('JSON not found'); } when ({ status }) if (status >= 400) { throw new RequestError(res); } };
```js function todoApp(state = initialState, action) { return match (action) { when ({ type: 'set-visibility-filter', payload: visFilter }) { ({ ...state, visFilter }); } when ({ type: 'add-todo', payload: text }) { ({ ...state, todos: [...state.todos, { text, completed: false }] }); } when ({ type: 'toggle-todo', payload: index }) { const newTodos = state.todos.map((todo, i) => { return i !== index ? todo : { ...todo, completed: !todo.completed }; });
({ ...state, todos: newTodos, }); } else { state } // ignore unknown actions} } ```
jsx <Fetch url={API_URL}> {props => match (props) { when ({ loading }) { <Loading />; } when ({ error }) { <Error error={error} />; } when ({ data }) { <Page data={data} />; } }} </Fetch>
Tags
Annotators
URL
-
-
hackmd.io hackmd.io
Tags
Annotators
URL
-
-
docs.google.com docs.google.com
-
developer.mozilla.org developer.mozilla.org
-
A FinalizationRegistry object lets you request a callback when an object is garbage-collected.
-
-
rob-blackbourn.github.io rob-blackbourn.github.io
-
javascript.plainenglish.io javascript.plainenglish.io
-
gist.github.com gist.github.com
-
addons.mozilla.org addons.mozilla.org
-
-
-
www.youtube.com www.youtube.com
-
frederik-braun.com frederik-braun.com
-
developer.mozilla.org developer.mozilla.org
-
developer.mozilla.org developer.mozilla.orgWeakMap1
-
developer.mozilla.org developer.mozilla.org
-
jayconrod.com jayconrod.com
Tags
Annotators
URL
-
-
javascript.info javascript.info
-
-
javascript.info javascript.info
Tags
Annotators
URL
-
- Feb 2023
-
github.com github.com
-
```js import type { EntryContext } from "@remix-run/cloudflare"; import { RemixServer } from "@remix-run/react"; import isbot from "isbot"; import { renderToReadableStream } from "react-dom/server";
const ABORT_DELAY = 5000;
const handleRequest = async ( request: Request, responseStatusCode: number, responseHeaders: Headers, remixContext: EntryContext ) => { let didError = false;
const stream = await renderToReadableStream( <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />, { onError: (error: unknown) => { didError = true; console.error(error);
// You can also log crash/error report }, signal: AbortSignal.timeout(ABORT_DELAY), });
if (isbot(request.headers.get("user-agent"))) { await stream.allReady; }
responseHeaders.set("Content-Type", "text/html"); return new Response(stream, { headers: responseHeaders, status: didError ? 500 : responseStatusCode, }); };
export default handleRequest; ```
-
-
chromestatus.com chromestatus.com
Tags
Annotators
URL
-
-
github.com github.com
-
js const wss = new WebSocketStream(url); const { readable } = await wss.connection; const reader = readable.getReader(); while (true) { const { value, done } = await reader.read(); if (done) break; await process(value); } done();
js const wss = new WebSocketStream(url); const { writable } = await wss.connection; const writer = writable.getWriter(); for await (const message of messages) { await writer.write(message); }
js const controller = new AbortController(); const wss = new WebSocketStream(url, { signal: controller.signal }); setTimeout(() => controller.abort(), 1000);
-
-
docs.google.com docs.google.com
-
Tags
Annotators
URL
-
-
developer.chrome.com developer.chrome.com
-
```js const supportsRequestStreams = (() => { let duplexAccessed = false;
const hasContentType = new Request('', { body: new ReadableStream(), method: 'POST', get duplex() { duplexAccessed = true; return 'half'; }, }).headers.has('Content-Type');
return duplexAccessed && !hasContentType; })();
if (supportsRequestStreams) { // … } else { // … } ```
Tags
Annotators
URL
-
-
deanhume.com deanhume.com
-
```js /* * Fetch and process the stream / async function process() { // Retrieve NDJSON from the server const response = await fetch('http://localhost:3000/request');
const results = response.body // From bytes to text: .pipeThrough(new TextDecoderStream()) // Buffer until newlines: .pipeThrough(splitStream('\n')) // Parse chunks as JSON: .pipeThrough(parseJSON());
// Loop through the results and write to the DOM writeToDOM(results.getReader()); }
/* * Read through the results and write to the DOM * @param {object} reader / function writeToDOM(reader) { reader.read().then(({ value, done }) => { if (done) { console.log("The stream was already closed!");
} else { // Build up the values let result = document.createElement('div'); result.innerHTML = `<div>ID: ${value.id} - Phone: ${value.phone} - Result: $ {value.result}</div><br>`; // Prepend to the target targetDiv.insertBefore(result, targetDiv.firstChild); // Recursively call writeToDOM(reader); }}, e => console.error("The stream became errored and cannot be read from!", e) ); } ```
Tags
Annotators
URL
-
-
-
Node.js
js import { renderToPipeableStream } from "react-dom/server.node"; import React from "react"; import http from "http"; const App = () => ( <html> <body> <h1>Hello World</h1> <p>This is an example.</p> </body> </html> ); var didError = false; http .createServer(function (req, res) { const stream = renderToPipeableStream(<App />, { onShellReady() { res.statusCode = didError ? 500 : 200; res.setHeader("Content-type", "text/html"); res.setHeader("Cache-Control", "no-transform"); stream.pipe(res); }, onShellError(error) { res.statusCode = 500; res.send( '<!doctype html><p>Loading...</p><script src="clientrender.js"></script>', ); }, onAllReady() { }, onError(err) { didError = true; console.error(err); }, }); }) .listen(3000);Deno
```js import { renderToReadableStream } from "https://esm.run/react-dom/server"; import * as React from "https://esm.run/react";
const App = () => ( <html> <body>
Hello World
This is an example.
</body> </html> );const headers = { headers: { "Content-Type": "text/html", "Cache-Control": "no-transform", }, };
Deno.serve( async (req) => { return new Response(await renderToReadableStream(<App />), headers); }, { port: 3000 }, ); ```
Bun
```js import { renderToReadableStream } from "react-dom/server"; const headers = { headers: { "Content-Type": "text/html", }, };
const App = () => ( <html> <body>
Hello World
This is an example.
</body> </html> );Bun.serve({ port: 3000, async fetch(req) { return new Response(await renderToReadableStream(<App />), headers); }, }); ```
-
-
beta.reactjs.org beta.reactjs.org
-
nodejs.org nodejs.org
-
-
webcontainers.io webcontainers.io
Tags
Annotators
URL
-
-
ogzhanolguncu.com ogzhanolguncu.com
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
javascript.info javascript.info
-
-
-
-
gomakethings.com gomakethings.com
-
bugzilla.mozilla.org bugzilla.mozilla.org
Tags
Annotators
URL
-
-
www.measurethat.net www.measurethat.net
-
dev.to dev.to
-
If you search on the internet about, performances of proxy, some people say that it's a tool for development and should not be used in production
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.orgProxy1
-
sandpack.codesandbox.io sandpack.codesandbox.io
Tags
Annotators
URL
-
-
Tags
Annotators
URL
-
-
codesandbox.io codesandbox.io
Tags
Annotators
URL
-
-
perf.builder.io perf.builder.ioPerflink1
-
-
-
-
developers.cloudflare.com developers.cloudflare.com
-
developers.cloudflare.com developers.cloudflare.com
-
codepen.io codepen.io
Tags
Annotators
URL
-
-
codepen.io codepen.io
-
-
console.re console.re
-
-
Tags
Annotators
URL
-
- Jan 2023
-
dorey.github.io dorey.github.io
Tags
Annotators
URL
-
-
www.w3.org www.w3.org
Tags
Annotators
URL
-
-
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
jakearchibald.com jakearchibald.com
Tags
Annotators
URL
-
-
www.typescriptlang.org www.typescriptlang.org
-
-
developer.mozilla.org developer.mozilla.org
-
www.w3.org www.w3.org
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
gist.github.com gist.github.com
-
indieweb.social indieweb.social
Tags
Annotators
URL
-
-
deno.land deno.land
-
- Dec 2022
-
developers.google.com developers.google.com
Tags
Annotators
URL
-
-
webauthn.guide webauthn.guide
-
-
-
-
-
-
www.w3.org www.w3.org
Tags
Annotators
URL
-
-
html.spec.whatwg.org html.spec.whatwg.org
-
h3poteto.github.io h3poteto.github.io
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
Tags
Annotators
URL
-
-
www.w3.org www.w3.orgPush API1
Tags
Annotators
URL
-
-
blog.nparashuram.com blog.nparashuram.com
-
TL;DR; A custom renderer for ReactJS that uses Web Workers to run the expensive Virtual DOM diffing calculations
-
-
-
为什么要把前端搞的这么复杂，UI 组件不是很好用吗， 难道就是为了推广 nodejs 和 npm 吗?
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
news.ycombinator.com news.ycombinator.com
Tags
Annotators
URL
-
-
datatracker.ietf.org datatracker.ietf.org
-
blog.engelke.com blog.engelke.com
-
blog.engelke.com blog.engelke.com
-
bugs.webkit.org bugs.webkit.org
Tags
Annotators
URL
-
-
codepen.io codepen.io
Tags
Annotators
URL
-
-
www.boxcryptor.com www.boxcryptor.com
-
www.w3.org www.w3.org
Tags
Annotators
URL
-
-
www.zhihu.com www.zhihu.com
-
bootstrap+jq+ES5 真的比react/vue/angular+ES6 low吗?
Tags
Annotators
URL
-
-
blog.engelke.com blog.engelke.com
-
blog.engelke.com blog.engelke.com
-
pomcor.com pomcor.com
Tags
Annotators
URL
-
-
stackoverflow.com stackoverflow.com
-
samnewman.io samnewman.io
Tags
Annotators
URL
-
-
philcalcado.com philcalcado.com
-
github.com github.com
-
www.zhihu.com www.zhihu.com
-
JavaScript中 0==null为何是false？
Tags
Annotators
URL
-
-
www.zhihu.com www.zhihu.com
-
js中string类型和int类型的界限到底怎么回事？
Tags
Annotators
URL
-
-
www.zhihu.com www.zhihu.com
-
有哪些 JS 调试技巧？
Tags
Annotators
URL
-
-
www.zhihu.com www.zhihu.com
-
js浮点数精度问题的前世今生？
Tags
Annotators
URL
-
-
www.zhihu.com www.zhihu.com
-
JavaScript 的正则表达式中的 \b 以及 \B 问题？
Tags
Annotators
URL
-
-
www.zhihu.com www.zhihu.com
-
JavaScript中typeof返回NaN我该怎么理解它？
Tags
Annotators
URL
-
-
www.zhihu.com www.zhihu.com
-
如何理解Javascript中的字面量(literal)？
Tags
Annotators
URL
-
-
www.zhihu.com www.zhihu.com
-
关于javascript作用域链的问题？
-
-
www.zhihu.com www.zhihu.com
-
使用字面量表示法会调用构造函数吗？
-
-
www.zhihu.com www.zhihu.com
-
如何重写浏览器内的console.log？
Tags
Annotators
URL
-
-
www.zhihu.com www.zhihu.com
-
关于JavaScript中加性操作符的疑问？
-
-
www.zhihu.com www.zhihu.com
-
关于typeof检测变量的问题，JavaScript高级程序设计中ajax部分生成xhr对象不明白？
-
-
www.zhihu.com www.zhihu.com
-
函数和数组使用typeof返回结果不一样原因？
Tags
Annotators
URL
-
-
www.zhihu.com www.zhihu.com
-
如何评价javascript中的这些“坑”？
Tags
Annotators
URL
-
-
www.zhihu.com www.zhihu.com
-
为什么JavaScript里面typeof(null)的值是"object"？
-
-
www.zhihu.com www.zhihu.com
-
Winter博文中关于JavaScript原型的练习题解释？
-
-
www.zhihu.com www.zhihu.com
-
为什么很多明知js的OOP是假的，还不厌其烦地实现，而不使用OLOO风格？
Tags
Annotators
URL
-
-
www.zhihu.com www.zhihu.com
-
JS中先有Object还是先有Function？
-
-
www.zhihu.com www.zhihu.com
-
JS模块加载器加载原理是怎么样的？
-
-
www.zhihu.com www.zhihu.com
-
JavaScript 如何获取闭包变量？
-
-
www.zhihu.com www.zhihu.com
-
在JavaScript中，是否存在“同步非阻塞”和“异步阻塞”这两种情况？
-
-
www.zhihu.com www.zhihu.com
-
如何理解和熟练运用 JS 中的 call 及 apply？
Tags
Annotators
URL
-
-
-
为什么nodejs的module.js里用了readFileSync而不用readFile？
-
-
cheatsheetseries.owasp.org cheatsheetseries.owasp.org
-
developer.mozilla.org developer.mozilla.org
-
Modern browsers will reset Window.name to an empty string if a tab loads a page from a different domain, and restore the name if the original page is reloaded (e.g. by selecting the "back" button).
Tags
Annotators
URL
-
-
www.thomasfrank.se www.thomasfrank.se
Tags
Annotators
URL
-
-
blog.ropnop.com blog.ropnop.com
Tags
Annotators
URL
-
-
developer.chrome.com developer.chrome.com
-
wicg.github.io wicg.github.io
Tags
Annotators
URL
-
-
-
想研究 JavaScript 框架的源码，有哪些值得推荐的框架或库？有哪些可以分享的源码阅读和学习的方法？
-
-
www.zhihu.com www.zhihu.com
-
阅读大型 JavaScript 源码时有什么好用的工具？
-
-
www.zhihu.com www.zhihu.com
-
Javascript 如何能简短优雅地实现 sleep 函数？
Tags
Annotators
URL
-
-
jibbering.com jibbering.com
-
-
stackoverflow.com stackoverflow.com
-
security.stackexchange.com security.stackexchange.com
-
javascript.info javascript.infoClosure1
-
-
developer.mozilla.org developer.mozilla.orgClosures1
Tags
Annotators
URL
-
-
itnext.io itnext.io
Tags
Annotators
URL
-
-
gist.github.com gist.github.com
-
stackoverflow.com stackoverflow.com
-
javascript.plainenglish.io javascript.plainenglish.io
-
bradyjoslin.com bradyjoslin.com
Tags
Annotators
URL
-
-
coolaj86.com coolaj86.com
-
Tags
Annotators
URL
-
-
stackoverflow.com stackoverflow.com
-
Generate the keys using WebCrypto and mark them as non exportable Store the key into IndexedDB
-
-
voracious.dev voracious.dev