一周看点@2019-02-11 ~ 2019-02-17 (50) #62

whatwewant · 2019-02-17T23:01:13Z

关于CRM体系的高阶模型&基础系统设计方法论 | 人人都是产品经理

tags: CRM,CMS

React v16.8发布，支持hooks* `useState`

useEffect
useReducer
useMemo
useCallback
useImperativeHandle
tags: React 16.8,发布,Redux,React.Context

useHooks - Easy to understand React Hook recipes* 社区useHooks项目和案例，非常不错，考虑自己维护一个useHooks库

tags: React,Hooks

Building Your Own Hooks – React

tags: React,Hooks

Hooks API Reference – React* Basic

useState
useEffect
useContext
Enhance
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
tags: Hooks API,React,Hooks,API

Quasar 1.0 — Reaching for the Stars – Quasar Framework – Medium* Quasar 发布 1.0-beta，SSR、Web、Mobile 和 Electron 用一套代码，基于 vue

tags: Quasar 1.0-beta,SSR,Electron,Mobile,Vue,React

swc 1.0，目标是代替babel，用Rust编写 - swc* 阮一峰: 如果你觉得 Babel 太慢太复杂，可以试试 SWC。它是 Rust 写的，目标就是取代 Babel，一个命令就可以将 ES2019/TS/JSX 转码.

tags: SWC 1.0,阮一峰,Rust,TypeScript,JSX,React

Building a Personal Site with Gatsby | Denny Tek* 1 Intruduction and Setup

2 Styling with SASS/SCSS
3 Generating Blog Posts with Markdown Files
4 Creating a List of Blog Posts
5 Adding Thumbnail Image to a Blog List
6 Adding Multiple Responsive Images to a Markdown Blog Post
7 Adding Tags to Blog Posts
8 Creating a Project Page from JSON data
9 Pagination, SEO, and Deploying to Netlify
tags: React,Gatsby,教程

一起来理解正则表达式 - 掘金* 正则看Markdown Parser，发现Parser的实现少不了正则表达式，看看这篇文章不错，但是案例不是很多

tags: 正则表达式,Parser,Markdown Parser

正则表达式中?=和?:和?!的理解 - CSDN博客* (?:): 非捕获分组，匹配的值不会保存

tags: 正则表达式,非捕获,?:,?=,?!

正则表达式中的?:是什么意思？ - SegmentFault 思否* (?:): 非捕获分组，匹配的值不会保存

(?:): 作用只是为了分组，不捕获

// 案例
/aacd|bbcd/ === /(?:aa|bb)cd/

tags: 正则表达式,非捕获,?:

markdown 编译原理 - 知乎* 1 基础: 正则 + exec

2 基本正则

regexObject: {
  headline: /^(\#{1,6})([^\#\n]+)$/m,
  code: /\s\`\`\`\n?([^`]+)\`\`\`/g,
  hr: /^(?:([\*\-_] ?)+)\1\1$/gm,
  lists: /^((\s*((\*|\-)|\d(\.|\))) [^\n]+)\n)+/,
  bolditalic: /(?:([\*_~]{1,3}))([^\*_~\n]+[^\*_~\s]\1)/g,
  links: /!?\[([^\]<>]+)\]\((^ \)<>]+)( "[^\(\)\"+")?\)/g,
  reflinks: /\[([^\]]+)\]\[([^\]]+)\]/g,
  smlinks: /\@([a-z0-9]{3,})\@(t|gh|fb|gp|adn)/gi,
  mail: /<(([a-z0-9_\-\.])+\@([a-z0-9_\-\.])+\.([a-z]{2,7}))>/gmi,
    tables: /\n(([^|\n]+ *\| *)+([^|\n]+\n))((:?\-+:?\|)+(:?\-+:?)*\n)((([^|\n]+ *\| *)+([^|\n]+)\n)+)/g,
    include: /[\[<]include (\S+) from (https?:\/\/[a-z0-9\.\-]+\.[a-z]{2,9}[a-z0-9\.\-\?\&\/]+)[\]>]/gi,
    url: /<([a-zA-Z0-9@:%_\+.~#?&\/=]{2,256}\.[a-z]{2,4}\b(\/[\-a-zA-Z0-9@:%_\+.~#?&\/\/=]*)?)>/g,
}

tags: Parser,Markdown,Markdown Parser,Remark,GFM

How to Set Up a Mac for Web Development* 看到这篇文章，不禁想起我几年前写的一堆Shell脚本，再结合Electron，可以写个IDE快速配置Mac，并且结合云端配置岂不是更好，棒呆

tags: Mac

git-history，可视化的方式查看一个文件的历史改动

tags: 类库,Git

alfy: 用于创建 alfred workflow

tags: 类库,Alfred,Workflow

alfred-douban，快速查询豆瓣电影的 workflow，基于 alfy

tags: 类库,Alfred,Alfy

capture-website，基于 puppeteer 封的截图工具

tags: 类库,Puppeteer,Screenshot

Notion: The Hassle-Free JavaScript Toolchain Manager* 看起来像是"跨平台"，怎么说，也就是接管了两个东西: 其一是node版本安装；其二是包管理，底层还是npm/yarn，有一定的进步性

tags: Notion,类库,包管理,NPM,YARN

Rendering on the web: https://t.co/nwWSoFdHjP ⚡️ - Chrome Dev* @addy Osmani: a performance-focused look at:

📡 Server rendering
📄 Static rendering
🖥 Client-side rendering
🛀 (Re)hydration
🚿 Partial rehydration
& more ways to render pages 👩‍🎨
tags: Google,Chrome,Chrome Dev

前端和设计模式 - 知乎* 六条设计原则：

高层模块不依赖底层模块，即为依赖倒转原则。
内部修改关闭，外部扩展开放，即开闭原则。
聚合单一功能，即为单一职责原则。
低知识要求，对外接口简单，即迪米特法则。
耦合多个接口，不如独立拆分，即接口隔离原则。
合成复用，尽量不使用继承，即合成复用原则。
tags: 设计模式,SOLID,软件设计

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

初尝Deno - 前端之巅* 个人关心的有两大突破

1 TypeScript运行时，而不是JavaScript运行时;
2 模块系统(import)，支持import remote, 看到go的影子;
存在的缺陷
- 1 manifest / lock: package版本问题
tags: Deno,Nodejs,require,import,CMD,CommonJS,TypeScript,Rust,ESM,JavaScript,模块系统,类库,运行时,Runtime

关于面试、离职、工作 - web前端开发* 写的不错，值得看看

在新的一年里，我想把这些话献给那些动不动就喊辞职、想辞职的人或周期性喊辞职、想辞职的人！
第一，不要轻易离开你的团队，否则你要从零做起 。
第二，不要老想着做不顺就放弃，哪个团队都有问题，哪个团队都有优点。
第三，跟对领导很重要，愿意教你的，放手让你做的领导，绝对要珍惜。
第四，团队的问题就是你脱颖而出的机会，抱怨和埋怨团队就是打自己耳光，说自己无能，更是在放弃机会 ！
第五，心怀感恩之心，感谢平台给你机会，感谢伙伴跟你配合。
第六，创造利润是你存在的核心价值，企业不是慈善机构 。
第七，遇到问题请先思考，只反映问题是初级水平，思考并解决问题才是高级水平。
第八，要学着始终跟着团队一起成长，为了团队新的目标不断学习新东西。
另外，2019年，不管你在哪里上班，请记住下面这几条规则：
第一，工作不养闲人，团队不养懒人。
第二，入一行， 先别惦记着能赚钱， 先学着让自己值钱。
第三，没有哪个行业的钱是好赚的。
第四，干工作，没有哪个是顺利的，受点气是正常的。
第五，赚不到钱，赚知识；赚不到知识，赚经历；赚不到经历，赚阅历，如果都赚不到了，那就不可能赚到钱。这个时候，你可以考虑换个工作了。
第六，先改变自己的态度，才能改变人生的高度。只有先改变自己的工作态度，才能有职业高度。
第七，让人迷茫的原因只有一个；那就是本该拼搏的年纪，却想得太多，做得太少！
最后，送给看完这篇文章的你，一个字：干！

tags: 面试,离职,工作

页面可视化搭建工具前生今世 - 前端早读课 | 陈韩杰* 非常棒的文章，值得细细体味

背景: 运营工具，快速生成和发布页面，提升上线效率；无需开发人员介入，节省开发人力;
主要内容
- 1 活动页面重复开发的痛点
- 2 开发可视化搭建工具的技术要点
- 3 理想的运营页面可视化搭建工具
- 4 开源页面搭建框架 pipeline 介绍
1 活动页面开发之痛
- 产品介绍页、营销页、活动页、图片展示页等特点
  - 页面类似: 页面布局和业务逻辑较固定;
  - 需求高频: 每周甚至每天有多个这种需求;
  - 迭代快速: 开发时间短，上线时间紧;
  - 开发性价比低: 开发任务重复，消耗各方的沟通时间和人力;
- 活动页面常规开发流程
  - 流程
    - 1 运营/产品提出页面需求
    - 2 走项目流程进入开发环节
    - 3 开发根据设计稿完成页面开发
    - 4 测试进行页面测试
    - 5 运维进行页面上线
    - 6 运营/产品进行页面验收
  - 痛点
    - 1 多方参与，反复沟通，串行流程;
    - 2 页面上线周期长，无法快速响应活动需求;
    - 3 人力陷入重复工作泥潭，忙碌而低效;
- 更优的流程
  - 思想: 针对特点和痛点，应当页面配置化，配种工作从开发人员交给产品/运营等需求方; 开发和设计人员只需要提供配置化页面支持; 更优的活动流程依靠页面可视化搭建系统来实现;
  - 流程
    - 1 运营/产品提出页面需求;
    - 2 运营/产品在页面可视化搭建系统中选取合适的页面模板进行页面搭建;
    - 3 页面自动化发布上线，页面需求完成，流程结束;
    - 4 如果没有找到合适的模板，设计进行页面模板设计;
    - 5 开发进行模板开发，并将页面模板添加到页面可视化搭建系统中;
    - 6 运营/产品继续流程2;
2 页面可视化搭建工具的技术要点
- 技术要点:
  - 1 页面组件化
  - 2 页面模板
  - 3 页面可视化编辑
  - 4 组件层级关系
  - 5 页面打包
  - 6 实时预览
  - 7 页面组件开发
- 页面组件化
  - 组件化的优点: 相对直白的HTML元素
    - 1 提供可控可预测的组件接口(Interface/Props)，基本UI可控，并且抽象后有机会跨端;
    - 2 简化操作，组件树组合，组件配置编辑(Props);
  - 页面前端框架:
    - 1 框架解耦: 图例
- 页面模板
  - 页面模板包含完整的业务逻辑，有助于快速生成业务页面; 不同的页面模板适用于不同的业务功能; 从模板库中选择合适的页面模板，并派生出默认业务页面，再对默认页面进行可视化编辑，从而生成目标业务页面.
- 页面编辑 - 页面由页面组件组合而成
  - 1 编辑页面组件 - 动态组件，动态页面
  - 2 编辑页面内容 - 根据组件的属性/接口(Interface/Props)进行配置
  - 3 编辑配置数据 - 组件属性(Props) + 组件状态(State) + 组件HTML模板(Template) + 组件业务逻辑(JavaScript) + 组件样式布局(Style/Layout)等
  - 4 组件差异化
- 组件层级关系
  - 组件树定义了组件间父子兄弟的层级关系, 父子组件通过数据流和事件进行关联: 数据从父组件的 State 传递到子组件的 Props; 子组件的变更触发 Event 通知父组件.
  - 层级关系对数据流和布局的影响
    - 设计页面可视化搭建工具的组件编辑功能时，需要重点关注组件树的层级关系，解决组件间数据依赖和组件间布局适配问题.
    - 页面可视化搭建工具需要制定组件嵌套的规则和约束，通过组件嵌套规则来确保可视化编辑后的组件树正常渲染.
  - 不嵌套的前端框架组件
    - 移动端 - 布局策略: 宽度铺满，高度滚动; 交互逻辑: 组件自上而下顺序平铺，互为兄弟.
    - 案例 - 阿里云凤蝶
    - 案例 - 飞冰
- 页面预览
  - 页面预览示例
  - 实现页面预览方式(两种): 1.页面挂载 2.后台渲染
  - 1 页面挂载
    - 也就是前端渲染 - 需要提供组件库渲染runtime（组件库前端框架）; 为了实现前端渲染，编辑器前端源码需要引入组件库源码，后续组件更新，编辑器需要同步更新.
    - 特点:
      - 实现页面预览技术方案可行，实时渲染速度快;
      - 为了实现渲染，编辑器的技术选型需要和组件库前端一致;
      - 编辑器源码和组件库源码耦合 (一定耦合吗？可以独立发布吗？);
      - 组件库组件渲染后的代码逻辑和样式布局，可能会污染编辑器（样式约定? style ?）;
  - 2 后台渲染
    - 可以只是iframe渲染，也可以是服务端/后端渲染，或者说SSR - 在后端进行用户编辑结果页面的渲染和生成，通过iframe加载和展示结果页面.
    - 特点:
      - 可以实现编辑器和组件库前端框架的分离;
      - 可以实现编辑器和组件库各组件的分离;
      - 可以避免预览页面的逻辑和样式污染编辑器环境;
      - 要求后台和组件库提供页面后台渲染能力, 并要求后台渲染速度快，用户需要实时预览;
- 页面构建
  - 是组件化前端源码生成页面资源的必要环节:
    - 开发调试: 在开发时需要进行页面构建开发构建来进行页面调试;
    - 发布上线: 在发布前需要进行生产构建;
    在可视化搭建页面时需要"实时"预览，要求页面构建效率高，实现快速的构建和打包. 更进一步, 后台渲染其实和服务端渲染很像，能否借鉴服务端渲染(SSR)的技术思路.
- 自定义模板和组件开发
  - 页面可视化工具搭建在业务中的落地，需要根据不同的业务场景进行业务组件和页面模板的自定义开发，最好有独立开发工具或者IDE。
  - 对页面可视化工具要求有三:
    - 页面可视化搭建工具要支持现有的前端框架
      - 为了避免后续组件和模板自定义开发时的工作量和割裂感，我们希望复用现有的前端框架组件，而不是用另一个前端框架重写一遍;
    - 组件和模板的编写方式须遵循较简单的编写约定，避免开发人员难上手和写起来不舒服;
    - 自定义模板和组件在开发模式下进行开发和调试.
3 理想的活动页面可视化搭建工具

页面可视化搭建工具，需要对页面做一些约定和约束，在可视化搭建时遵循工具约定和约束来编辑页面.从页面可视化搭建工具的技术要点中，可以归纳出活动页面可视化搭建工具的理想状态.
- 概述、理想状态
  - 运营页面搭建工具，实现基于模板的页面生成;
  - 将页面的逻辑功能封装在组件内部，声明页面配置数据并提供配置表单，通过对配置表单的数据填充，进行少量的页面编辑就可以完成业务页面的搭建.
- 不嵌套的组件
  - 在编辑自由度的选择上, 选用不嵌套的组件. 各组件铺满页面宽度, 在页面高度方向顺序排列, 解决组件嵌套带来的数据流问题.
- 配置表单生成
  - 配置表单的作用是生成和约束 JSON 配置数据，业界已有对 JSON 进行描述和自动生成表单的方案 -- JSON Schema. 按照 JSON Schema 规范对 JSON 数据进行描述，可以动态渲染出配置表单; 且 JSON Schema 可以对编辑后的数据做格式校验，避免编辑错误. 这比编写一个表单页面更简单和高效.
  - JOSON Schema 的语法并不是很精简，云凤蝶的 Schema 语法等方案更加简洁，但是云凤蝶的语法没有开源的表单生成库支持，在开源实践上还是 JSON Schema 最佳.
- 理想活动页面搭建工具特点
  - 采用组件化和页面模板实现页面生成效率的提升;
  - 采用不嵌套的组件层级简化数据流和样式布局;
  - 采用 JSON Schema 声明配置数据, 自动生成配置表单;
  - 采用后台渲染，使编辑系统和组件前端框架解耦;
  - 在遵循编辑系统约定下, 组件可以自由拓展, 前端框架可以自由选择.
4 页面可视化搭建框架 Pipeline
- 简介
  - 类型: 开源的页面可视化搭建框架
  - 核心: 实现了页面可视化搭建的基本功能, 解决了页面可视化搭建的基本难点, 可以让开发者快速拥有页面搭建的能力, 并支持私有部署和二次开发.
  - 项目地址: https://github.com/page-pipepline
  - 体验地址: https://page-pipepline.github.io/pipeline-editor/dist/#/
  - 项目文档: https://github.com/page-pipepline/pipeline-document
- 功能 Demo
  - 可视化编辑(能力)
    - 可视化修改页面全局配置, 如修改页面主题色;
    - 可视化修改页面组件内容, 如修改组件的图片和替换组件文本;
    - 实时预览页面编辑效果, 即刻获得搭建后的页面;
    - 页面支持用户交互.
  - 组件编辑(能力)
    - 动态增删页面组件;
    - 可视化的组件拖拽, 拖拽组件库插入到页面组件列表中;
    - 组件可以包含业务逻辑(网络请求和用户交互);
- 支持的前端框架
  - 支持不同的前端框架，得益于后台渲染, 理论上支持所有前端框架;
  - 目前已支持Vue, React 和 Omi.
- 框架特点
  - 开原页面可视化搭建框架;
  - 自定义页面可配置字段;
  - 组件动态删减, 组件拖拽;
  - 从页面模板快速生成业务页面;
  - 模板工程前端框架无关: 支持 Vue 和 React ;
  - 支持自由拓展页面组件, 不限制组件样式布局, 接口调用等;
  - 前端工程约束少，不限制使用其他技术 (Redux, SSR, UI库等);
- 与云凤蝶的对比
  - 优秀，具体查看原文
- 下一步工作
  - 完善技术实现文档，使用文档，系统部署文档和模板开发文档;
  - 提供对更多前端框架的支持;
  - 提供更加丰富的可视化交互方式;
总结
- 讨论了活动页面开发的痛点, 总结出页面可视化搭建工具的7个技术要点和4个技术难点, 并整理出理想的运营页面可视化搭建工具的工作内容, 最后结合Pipepline实现验证可行性.
参考
- pipeline:https://github.com/page-pipepline
- 页面可视化搭建工具前生今世:https://github.com/CntChen/cntchen.github.io/issues /15
- Vue2.0学习笔记：组件数据传递:https://www.w3cplus.com/vue/component-data-and-props-part1.html
- 阿里云凤蝶:https://i.yunfengdie.com/
tags: 页面可视化搭建,可视化,可视化编辑,拖拽,Drag/Drop,JSON Schema,React,Vue,Pipeline,云凤蝶,发布流程,上线流程,开发流程,运营,产品,活动页

New Component Skeleton · Issue #10308 · ant-design/ant-design

tags: Skeleton,骨架屏,Ant Design

写给自己看的display: grid布局教程 - 张鑫旭* 1 前言 & 索引

1.1 在Grid布局中，所有相关CSS属性正好分为两拨，一拨作用在grid容器上，一拨作用在grid子项上. 快速索引请查看文章.
1.2 相对于Flex是一维布局方法，在移动端上一般够用，但是PC端复杂场景就更需要Grid, Grid是一个二维的布局方法，纵横两个方向总是同时存在.
2 作用在grid容器上的CSS属性
- 2.1 grid-template-columns 和 grid-template-rows
- 2.2 grid-template-areas - 网格划分区域, 可视化布局必备
- 2.3 grid-template - 是 grid-template-rows, grid-template-columns 和 grid-template-areas 属性的缩写
- 2.4 grid-column-gap 和 grid-row-gap
- 2.5 grid-gap - 块间距，"横竖都是死"
- 2.6 justify-items - 水平伸缩, 类似flex的justify-content，只是值更加简洁
- 2.7 align-items - 垂直伸缩, 类似flex的align-items，只是值更简洁
- 2.8 place-items - align-items和 justify-items的缩写, 语法 place-itemns: <align-items> / <justify-items>
- 2.9 justify-content - 仅在网格总宽度小于grid容器宽度的时候有效.
- 2.10 align-content - 与 justify-content对立
- 2.11 place-content
- 2.12 grid-auto-columns 和 grid-auto-rows - 自定任何自动生成的网格轨道(也称为隐示网格轨道)的大小
- 2.13 grid-auto-flow - 控制没有明确指定位置的grid子项的放置方式
- 2.14 grid - 是 grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns 和 grid-auto-flow 的缩写
3 作用在grid子项上的CSS属性
- 3.1 grid-column-start, grid-column-end, grid-row-start 和 grid-row-end - 表示gird子项所占据的区域的起始和终止位置，包括水平方向和垂直方向
- 3.2 grid-column 和 grid-row - 缩写，前者 = grid-column-start + grid-column-end, 后者 = grid-row-start + grid-row-end
- 3.3 grid-area - 表示单签网格所占用的区域
- 3.4 justify-self - 设置单个网格元素的水平对齐方式
- 3.5 align-self - 设置当个网格元素的垂直对齐方向
- 3.6 place-self - 以上两个属性缩写
4 其他Grid知识点
tags: 大神,张鑫旭,grid,layout,CSS,flex,布局,Grid布局,Flex布局,布局方案

Github 支持 PR 草稿，不用再在 title 上写 WIP 了 - Github

tags: 新闻,Github,PR,Pull Request,WIP

下一代 react 开发者工具？ - React DevTools

tags: 新闻,React,DevTools

npm 发布 6.8.0，通过 repository.directory 支持 monorepo - NPM

tags: 发布,NPM 6.8,NPM,monorepo

How to Use TypeScript in React - Ionic

tags: 文章,TypeScript,React

Should I useState or useReducer? - Kentcdodds

tags: Hooks,React,useState,useReducer

egg/loader: 生命周期设计与开发 - eggjs

tags: eggjs,生命周期,Lifecycle,Loader,加载器设计,框架设计,Framework

Git 常见错误解决办法 - CSS-Tricks* 1 修改最后一次commit

git commit --amend -m 'NEW COMMENT'
2 撤销本地变化
- git checkout HEAD about.html imprint.html
- git reset --hard HEAD
- git reset 2b504bee
3 撤销和反转(revert)旧的提交
- git reset 2b504bee
4 恢复项目之前版本
- git reset --hard 2b504bee
5 删除Commits, 恢复删除的分支，处理Conflict
tags: Git,Commit,Revert,Reset,git reset,git revert

Replacing a hot path in your app's JavaScript with WebAssembly，文章对比了 c、rust 和 AssemblyScript - Google Developers

tags: 文章,Rust,WebAssembly

speed-measure-webpack-plugin，探测 webpack 各阶段的耗时 - Stephencookdev

tags: 类库,Webpack,webpack plugin

fastmod，基于 rust，极速版本的 codemod - Facebook Incubator

tags: 类库,Codemod,Rust,Facebook

查 node 的 es (es2015 - ) 兼容表 - Node

tags: 网站,Node,ESM,兼容表

提取一个 url 的所有样式 - Now

tags: 网站,Now

查询 npm 包的尺寸和下载时间 - BundlePhobia

tags: NPM,Bundle,npm-cost,网站

尤雨溪回应：Vue与TypeScript为什么相性特别差？- 前端之巅* 现有的 API 和类型系统的结合存在缺陷，属于历史遗留；改新的 API 有个时机问题，请耐心等待 Vue 3；

TSX 类型支持好是因为 TS 专门开了后门给做了支持；模版只要工具链到位一样可以做到；
Vue 2 一开始内部实现就有类型系统，但是没想到 Flow 烂尾了，而 TS 整个生态越做越好。
tags: Vue,TypeScript,Flow

JavaScript ES2019中的8个新功能 - 前端之巅* 1 TC39 提案5个阶段: (具体案例看全文)

1.1 第 0 阶段 (stage-0): 稻草人
1.2 第 1 阶段 (stage-1): 提案
1.3 第 2 阶段 (stage-2): 草案
1.4 第 3 阶段 (stage-3): 候选
1.5 第 4 阶段 (stage-4): 已完成 / 已批准
2 ES2019
- 2.1 可选的catch绑定
- 2.2 JSON 超集 - "SyntaxError: Invalid or unexpected token"
- 2.3 符号描述 - Symbol => mySymbol.description
- 2.4 修订版的 Functiuon.prototype.toString
- 2.5 Object.fromEntries - 是 Object.entries 方法的反向操作，可用于克隆对象
- 2.6 格式化的 JSON.stringify
- 2.7 String.prototype 的 trimStart 和 trimEnd
- 2.8 Array.prototype 的 flat 和 flatMap

umi 2.5 已发布, 支持 umi-serve - umiumi 2.5 已发布 @ 2019.2.15，[email protected]、[email protected]、umi-serve、@babel/runtime 锁定版本等

tags: 发布,umi,umi 2.5

用甘特图做项目管理，让你的规划更清晰 - 少数派* 1 什么是甘特图以及为什么需要甘特图

1.1 信息完美可视
- 1.1.1 今天谁应该做什么任务
- 1.1.2 这个任务从什么时候开始，到什么时候结束
- 1.1.3 一个人在一段时间内有哪些任务
- 1.1.4 应该先做哪些任务再做哪些任务
- 1.1.5 哪些任务可以同时做
- 1.1.6 这个任务是否被其他任务以来，如果是，那么这个任务就不能推迟，必须按时完成或者提前完成，否则会影响后面的任务
- 1.1.7 每个任务已经完成了多少还剩多少
- 1.1.8 大任务已经完成多少还剩多少
- 1.1.9 任务的里程碑是什么时候
1.2 甘特图必须完成:
- 1.2.1 确定每个任务的开始时间和结束时间
- 1.2.2 确定任务的依赖关系
- 1.2.3 分离可以同时运行的任务
- 1.2.4 确定不同人的任务间的时间关系
2 甘特图解决了Teambition等工具的缺陷
- 2.1 确定每个任务的开始时间和结束时间
- 2.2 确定任务的依赖关系
- 2.3 分离可以同时运行的任务
- 2.4 确定不同人的任务间的关系
3 怎么做甘特图
- 3.1 Excel
- 3.2 OmniPlan | MS Project (付费)
- 3.3 GanttProject - 本文重点
tags: 甘特图,GattProject,Excel,任务管理工具,Trello,Teambition

The text was updated successfully, but these errors were encountered:

whatwewant added the weekly label Feb 17, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

一周看点@2019-02-11 ~ 2019-02-17 (50) #62

一周看点@2019-02-11 ~ 2019-02-17 (50) #62

whatwewant commented Feb 17, 2019

一周看点@2019-02-11 ~ 2019-02-17 (50) #62

一周看点@2019-02-11 ~ 2019-02-17 (50) #62

Comments

whatwewant commented Feb 17, 2019

React v16.8发布，支持hooks* useState

useHooks - Easy to understand React Hook recipes* 社区useHooks项目和案例，非常不错，考虑自己维护一个useHooks库

Hooks API Reference – React* Basic

Quasar 1.0 — Reaching for the Stars – Quasar Framework – Medium* Quasar 发布 1.0-beta，SSR、Web、Mobile 和 Electron 用一套代码，基于 vue

swc 1.0，目标是代替babel，用Rust编写 - swc* 阮一峰: 如果你觉得 Babel 太慢太复杂，可以试试 SWC。它是 Rust 写的，目标就是取代 Babel，一个命令就可以将 ES2019/TS/JSX 转码.

Building a Personal Site with Gatsby | Denny Tek* 1 Intruduction and Setup

一起来理解正则表达式 - 掘金* 正则看Markdown Parser，发现Parser的实现少不了正则表达式，看看这篇文章不错，但是案例不是很多

正则表达式中?=和?:和?!的理解 - CSDN博客* (?:): 非捕获分组，匹配的值不会保存

正则表达式中的?:是什么意思？ - SegmentFault 思否* (?:): 非捕获分组，匹配的值不会保存

markdown 编译原理 - 知乎* 1 基础: 正则 + exec

How to Set Up a Mac for Web Development* 看到这篇文章，不禁想起我几年前写的一堆Shell脚本，再结合Electron，可以写个IDE快速配置Mac，并且结合云端配置岂不是更好，棒呆

Notion: The Hassle-Free JavaScript Toolchain Manager* 看起来像是"跨平台"，怎么说，也就是接管了两个东西: 其一是node版本安装；其二是包管理，底层还是npm/yarn，有一定的进步性

Rendering on the web: https://t.co/nwWSoFdHjP ⚡️ - Chrome Dev* @addy Osmani: a performance-focused look at:

前端和设计模式 - 知乎* 六条设计原则：

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

给2019前端的5个建议 - 知乎* 1 基于Redux的状态管理 (个人建议: dva，没有为什么)

Web 页面录屏实现 - 前端大全* 非常棒的文章，非常值得一看

NodeJs服务注册与服务发现实现 - 掘金* 注册中心: ZooKeeper - 服务中心(注册)

初尝Deno - 前端之巅* 个人关心的有两大突破

关于面试、离职、工作 - web前端开发* 写的不错，值得看看

页面可视化搭建工具前生今世 - 前端早读课 | 陈韩杰* 非常棒的文章，值得细细体味

写给自己看的display: grid布局教程 - 张鑫旭* 1 前言 & 索引

Git 常见错误解决办法 - CSS-Tricks* 1 修改最后一次commit

尤雨溪回应：Vue与TypeScript为什么相性特别差？- 前端之巅* 现有的 API 和类型系统的结合存在缺陷，属于历史遗留；改新的 API 有个时机问题，请耐心等待 Vue 3；

JavaScript ES2019中的8个新功能 - 前端之巅* 1 TC39 提案5个阶段: (具体案例看全文)

umi 2.5 已发布, 支持 umi-serve - umiumi 2.5 已发布 @ 2019.2.15，[email protected]、[email protected]、umi-serve、@babel/runtime 锁定版本等

用甘特图做项目管理，让你的规划更清晰 - 少数派* 1 什么是甘特图 以及 为什么需要甘特图

React v16.8发布，支持hooks* `useState`

用甘特图做项目管理，让你的规划更清晰 - 少数派* 1 什么是甘特图以及为什么需要甘特图