早报@2019-02-16

[whatwewant]

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