• 最近正在用 React 开发新版划词翻译,在调试上遇到了不小的麻烦。

    普通的网站项目可以直接安装 React Devtools 提供的浏览器扩展进行调试,但是划词翻译本身就是一个扩展程序,而扩展程序相互之间是访问不到执行环境的,所以我自然也没法用 React Devtools 扩展程序调试划词翻译里的 React 代码。

    我本来以为这是没办法解决的,所以只好用 Chrome 开发者工具调试代码,但随着代码逻辑越来越复杂,这样的调试方式就越来越痛苦了——

    直到我无意中发现,CodeSandbox 这个网站把 React Devtools 嵌入到网页中去了(见 https://codesandb

  • 今天用 Node.js 写了一段代码,但是却遇到了一个问题。

    这段代码本身很简单,就是从网络上下载一个 zip 文件,然后读取 zip 中一个文件的内容,代码一共就 20 行:

    const fetch = require('node-fetch')
    const unzipper = require('unzipper')
    
    ;(async () => {
      const response = await fetch('http://a.domain/some.zip')
      if (response.ok) {
        response.body.pipe(unzipper.Parse(
  • JavaScript 月刊2020年7月期发布,更多请移步全文阅读 ➡️ GitHub | 知乎专栏 | 公众号

    本期主角为 React。从 Facebook 在2010年推出 XHP 开始,而后 Jordan Walke 创建了 FaxJS,直到后来 Facebook 开源 React,再到今天的 React v16.x,从初兴起到如今占据前端框架一席之地,React 的发展中涵盖有太多故事。本期清单第一篇文章便详细讲述那些夹杂在发展中的故事,欢迎移步阅读。

    本期话题包含 React、JavaScript 教程、JavaScript 问题集锦、包管理器、Express、moment、RES

  • 场景

    有时候期望只获取部分流数据,以此来断定文件类型或者处理其他逻辑,而不是直接把整个文件下载下来。

    方法 (node.js)

    const getFromStream = async (stream, maxSize) => {
      return new Promise((resolve, reject) => {
        let size = 0;
        let bufs = [];
    
        stream.on('data', (chunk) => {
          if (size > maxSize) {
            stream.destroy();
      
  • 背景

    各种规格的屏幕实在太多了,几乎不可能为所有的屏幕尺寸设计专门的图片展示尺寸。
    同时生成太多尺寸的缩放图片也极大的浪费资源。
    以下尺寸基本满足大多数屏幕下的预览图显示,欢迎参考

    图片尺寸 (宽度)

    1. 100 pixels
    2. 300 pixels
    3. 500 pixels
    4. 750 pixels
    5. 1000 pixels
    6. 1500 pixels
    7. 2500 pixels