早报@2019-02-13

[whatwewant]

x-spreadsheet: A web-based JavaScript（canvas） spreadsheet - Myliang

• tags: Spreadsheet,Excel,Web Excel,Web Spreadsheet,Canvas

transloadit/uppy: The next open source file uploader for web browsers

• tags: 库,上传,文件上传,图片上传,Uploader,FileUploader

qoa，用于命令行交互，只有 8K，比 prompt 轻量 - Klaussinani

• tags: 类库,prompt,qoa,inquire,命令行交互

vditor: ♏ 一款浏览器端的 Markdown 编辑器，使用 TypeScript 实现。- B3log

• 功能
  • 插入原生 Emoji、设置常用表情列表
  • 自定义工具栏按钮、提示、插入文案及快捷键
  • 可使用拖拽、剪切板粘贴上传，显示实时上传进度
  • 支持 CORS 跨域上传
  • 内容保存本地存储，防止意外丢失
  • 录音支持，用户可直接发布语音
  • 粘贴 HTML 自动转换为 Markdown
  • 提供实时预览、滚动同步定位
  • 支持主窗口大小拖拽、字符计数
  • 多主题支持、内置黑白两套
  • 多语言支持、内置中英文
  • 支持主流浏览器和移动端
• tags: 类库,Markdown,Editor,TypeScript,Markdown Editor

给2019前端的5个建议 - 知乎

• 1 基于Redux的状态管理 (个人建议: dva，没有为什么)
• 2 全面拥抱 TypeScript
• 3 回归Sass/Less
• 4 开发工具覆盖全链路
• 5 严格彻底的 Code Review
• tags: 前端2019,Roadmap,TypeScript,Redux,Dva,Umi,Angular,Vue,Code Review,开发流程,Sass

前端开发Cheatsheets - FreeCodeCamp

• tags: CheatSheet,FE

Web 页面录屏实现 - 前端大全

• 非常棒的文章，非常值得一看
• 1 需求:
  • 录屏重新错误场景
• 2 实现思路
  • 思路一: 利用Canvas截图 - html2canvas
  • 思路二: 记录所有操作重现 (墙裂推荐)
    • 1 鼠标变化 - Virtual Mouse
      • clientX|Y + 画鼠标图标
    • 2 DOM变化 - Virtual DOM
      • 这是重点，下面展开
• 3 DOM 变化
  • 3.1 首次页面全量快照 - document.documentElement.outerHTML
  • 3.2 DOM 转化为 Virtual DOM - Node.TEXT_NODE, Node.ELEMENT_NODE, SVG的createElementNS
  • 3.3 DOM 结构变化监控 - MutationObserver
  • 3.4 表单元素监控
    • 3.4.1 oninput事件监听 - select、input、textarea
    • 3.4.2 onchange事件监听 - input的type为checkbox、radio
    • 3.4.3 onfocus事件监听
    • 3.4.4 onblur事件监听
    • 3.4.5 媒体元素变化监听 - audio/video - onplay、onpause、ontimeupdate、onvolumechange等等
    • 3.4.6 Canvas画布变化监听 - 搜集canvas元素，定时更新实时内容; hack画画的API，来抛出事件 @todo
• tags: 录屏,页面录屏,Screenshot,Canvas,html2canvas,全量快照,VirtialDOM,TEXT_NODE,ELEMENT_NODE,createElementNS,MutationObserver,oninput,onchange,onfocus,onblur,audio,video,onplay,onpause,ontimeupdate,onvolumechange,setTimeout,doctype,屏幕分辨率

NodeJs服务注册与服务发现实现 - 掘金

• 注册中心: ZooKeeper - 服务中心(注册)
• 服务提供者: Nodejs 应用服务 - 服务本身
• 服务消费者: Nodejs API Gateway - 服务发现
• tags: 服务注册,服务发现,ZooKeeper,Nodejs,分布式,API Gateway