Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

早报汇总 @ 2017.9 #1

Open
sorrycc opened this issue Nov 30, 2017 · 0 comments
Open

早报汇总 @ 2017.9 #1

sorrycc opened this issue Nov 30, 2017 · 0 comments

Comments

@sorrycc
Copy link
Owner

sorrycc commented Nov 30, 2017

早报 @ 2017.9.30

  1. React@16 改进了 React DevTools 里 Highlight Updated 的功能。https://twitter.com/dan_abramov/status/913730763169914882
  2. 可取消的 fetch 终于来了，目前只有 Firefox 57 支持，但 Chrome、Edge、Safari 都快了。https://developers.google.com/web/updates/2017/09/
  3. [email protected] 支持 Object Spread，https://twitter.com/wesbos/status/913421431609991168
  4. [email protected]，支持 React 16。https://github.com/zeit/next.js/releases/tag/4.0.0-beta.1abortable-fetch，https://fetch-svg-abort.glitch.me/
  5. 基于 React 组件的可视化编程，付费的，目前功能不够完善，先不要买。https://twitter.com/getcompositor/status/913348539584995330，https://compositor.io/lab/
  6. 一组 State Container，挺实用的。https://github.com/renatorib/react-powerplug
  7. npm as cdn，一种简化的开发方式。但有个显而易见的问题，重复的依赖怎么处理？https://medium.com/@mikeal/ive-seen-the-future-it-s-full-of-html-2577246f2210

早报 @ 2017.9.29

早报 @ 2017.9.28

  1. React@16 特性视频，讲地很仔细，https://egghead.io/courses/leverage-new-features-of-react-16
  2. Podcast：关于命令行的。https://syntax.fm/show/013/the-command-line-for-web-developers
  3. componentDidCatch 的一个使用场景，捕获出错并打点到服务器。https://blog.bugsnag.com/react-16-error-handling/
  4. 学下设计模式、反模式、重构和 UML，这网站的切换体验很好。https://sourcemaking.com/
  5. 如何评价 React@16，总结的挺好，但不够细。https://www.zhihu.com/question/65920482/answer/236159084

早报 @ 2017.9.27

  1. React@16 发布，包含 fiber、ReactDOM.createPortal、componentDidCatch、SSR 性能提升、render 支持返回 fragment 和 string、尺寸减少等，推荐升级。https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html
  2. Chrome 支持 import()，用于按需加载 es 模块。https://twitter.com/addyosmani/status/912556308649304064
  3. 自动分离出首屏样式。https://github.com/pocketjoso/penthouse

早报 @ 2017.9.26

  1. 输入 google.com 按回车后发生了什么？面试时常见问题。https://github.com/alex/what-happens-when
  2. Paul Irish 的 Debugging in 2017 with Node.js。https://www.youtube.com/watch?v=Xb_0awoShR8，https://docs.google.com/presentation/d/1i5JREE3hhtG4FDip97zFJpMG_qb8k6fb5BRF09eyYTM/view#slide=id.p (Slide)
  3. Electron the bad part，包括尺寸、更新、安全、代码保护等。https://hackernoon.com/electron-the-bad-parts-2b710c491547
  4. web developer roadhog，挺全的，图不错，用 Balsamiq Mockups 画的。https://github.com/kamranahmedse/developer-roadmap，https://balsamiq.com/products/mockups/
  5. 脚手架工具，简版的 yeoman，名字好记。https://github.com/saojs/sao
  6. 检测新的 DOM 节点。https://github.com/muicss/sentineljs

早报 @ 2017.9.25

  1. Dan 在 ZEIT Day 的演讲，https://www.youtube.com/watch?v=nl30vWYKs9A&feature=youtu.be&t=16300
  2. 部署 es2015 的代码到生产环境，省掉很多 polyfill 代码，Chrome 客户多的或者内部系统可以玩玩看，结合前几天分享的如何同时分发两个版本使用。https://philipwalton.com/articles/deploying-es2015-code-in-production-today/
  3. Compilers are the New Frameworks，深有同感，最近在做的一套多页 h5 方案，工具和框架紧密结合。https://tomdale.net/2017/09/compilers-are-the-new-frameworks/
  4. 为啥大家都开始转 VSCode 了？https://syntax.fm/show/012/why-is-everyone-switching-to-vs-code
  5. React 换许可证。https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/
  6. Hyper 2.0 发布。https://twitter.com/zeithq/status/911511043763040258
  7. 以全局命令的方式运行 node_modules/.bin 下的命令，很实用的功能。https://www.youtube.com/watch?v=2WZ5iS_3Jgs&feature=youtu.be

在 ~/.bashrc 或者 ~/.bash_profile 里配：

PATH=$PATH:./node_modules/.bin

早报 @ 2017.9.20

早报 @ 2017.9.19

  1. Desprited babel-preset-es2015，推荐用 babel-preset-env。https://twitter.com/piq9117/status/909492740768940032
  2. 《ECMAScript 6 入门》第三版，新增 decorator 章节。http://es6.ruanyifeng.com/
  3. 如何向用户同时分发 ES6 Modules 版本和普通版。https://www.youtube.com/watch?v=GWmO88hBbKY
<script nomodules ...>
<script type="modules" ...>
  1. IDE 的自动添加 import 的功能，相见恨晚，但 Intellij IDEA 只处理了 ES6 Module 的自动 import，最近有时间我会写个处理 node_modules 依赖的通用 auto-import。https://www.jetbrains.com/help/idea/auto-import.html，https://github.com/Galooshi/import-js
  2. 未来的 devtool 应该涨啥样，我们需要这样的脑洞。https://medium.freecodecamp.org/prototyping-the-future-of-devtools-f54ba4d51891
  3. 我不知道浏览器居然还能做这些，Speech API、Speech Recognition API、Geolocation API、Notification API、Push API、Battery Manager API、Media Recorder API、Web-audio API、Vibration API、Device orientation。https://www.youtube.com/watch?v=ZrRxdzAVXts，https://meow.sambego.be/

早报 @ 2017.9.18

  1. ES modules 详解。http://2ality.com/2017/09/native-esm-node.html
  2. 页面整体布局优先用 CSS Grid。http://gedd.ski/post/grid-beats-flexbox-for-full-page-layout/
  3. 为每个 PR 自动发 npm 包用于测试，这个思路不错，适合命令行工具。update jest to 22 and support watchPathIgnorePatterns configuration facebook/create-react-app#3124 (comment)
  4. 为函数内的赋值语句和 return 语句自动加 console 的 babel 插件，思路很新颖。https://github.com/tkh44/babel-plugin-sitrep
  5. GoogleChrome 官方的浏览器自动化库，可用于 UI 测试、爬虫等。https://github.com/GoogleChrome/puppeteer
  6. 布局管理的库，可用于 React，但需要额外引入 jQuery 。https://github.com/deepstreamIO/golden-layout/

早报 @ 2017.9.15

  1. React 16 RC 3，最后一个 RC 了，比较感兴趣的是其中任何不打包多个 Object.assign polyfill，polifill 重复是很常见的尺寸问题之一。React 16 RC facebook/react#10294 (comment)
  2. 记不住 React 的事件？可以查这份 Live CheetSheet 。https://reactarmory.com/guides/react-events-cheatsheet
  3. 如何让 import 输入更快，先写 from 再写接口就能有智能提示。作者给出了 VSCode 的配置方法，评论里有 ATOM 以及 WebStorm 的方法。http://2ality.com/2017/08/typing-import-statements.html
  4. Gif 格式的 devtool tips，你会发现居然有这么多功能都没用过。https://umaar.com/dev-tips/ ，还有视频分享资料，https://umaar.github.io/devtools-optimise-your-web-development-workflow-2016/，https://www.youtube.com/watch?v=Dyynkefld8o
  5. react-cosmos 发了 2.0 rc，一个用来写 React 组件的工具，https://github.com/react-cosmos/react-cosmos

早报 @ 2017.9.14

  1. Chrome 61 支持 ES Module，通过 <script type=module> 引入。隐隐感觉这功能会带来调试和打包工具的革新。https://www.chromestatus.com/feature/5365692190687232，https://paulirish.github.io/es-modules-todomvc/
  2. Babel 7.0@beta，支持通过 .babrlrc.js 配置、移除 babel 自身的 babel-runtime 依赖以减少安装尺寸、Deprecate ES20xx presets，推荐用 babel-preset-env 等等。https://babeljs.io/blog/2017/09/12/planning-for-7.0
  3. Node v8.5.0，fs.copyFile、console.group()、正式支持 ES Module 等。https://nodejs.org/en/blog/release/v8.5.0/
  4. 编码界面的正则工具，Cool！https://regexly.chipto.io/ ，我之前用的是 http://refiddle.com/
  5. React FAQ，还是比较全的。https://reactfaq.site/，https://github.com/timarney/react-faq

早报 @ 2017.9.13

  1. coding webIDE 支持小程序，功能上只能说部分支持吧。通过多页实现，和单脚本内存共享数据肯定不是一回事，API 模拟不全，生命周期好像也不全。https://ide.coding.net/
  2. React-Router@4 和 @3 支持 React@16，remix-run/react-router@b0a9c75
  3. AtomIDE，其实是 atom 捆绑一些 packages 以适应各种语言的编码、定义跳转、自动提示、引用查找等，适合新人上手。http://blog.atom.io/2017/09/12/announcing-atom-ide.html
  4. 新的信息源，用于订阅新闻。https://www.google.com/alerts
  5. react for aria，如何把更新的组件通知读屏软件。http://almerosteyn.com/2017/09/aria-live-regions-in-react
  6. HTML 语法解析器，带插件机制，可以理解为 HTML 界的 Babel。https://github.com/reshape/reshape

早报 @ 2017.9.12

  1. 把 React Component 转成 Word 文档，样式没了。https://github.com/nitin42/redocx
  2. 关于如何避免“写一个 Module 感觉像写了一张无法支付的未来支票”，比如用脚本 commit、自动 publish、100% test coverage 等。https://medium.com/@mikeal/modern-modules-d99b6867b8f1，https://github.com/mikeal/r2/blob/master/package.json#L6
  3. dat 协议的 p2p 应用例子，基于 BreakerBrowser。https://github.com/taravancil/paste-dat，https://beakerbrowser.com/
  4. React@16 不再忽略 unknown 的 DOM 属性，https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html
  5. webpack + babel 让 JS 打包越来越慢，但如何让调试快点呢？babel-standalone、systemjs、unpkg 等都是一些尝试。印象中 stackblitz.com 也是基于 systemjs + unpkg。http://2ality.com/2017/08/less-building-in-web-dev.html，https://github.com/unpkg/unpkg-demos

早报 @ 2017.9.8

  1. Yarn 1.0 发布，新功能很实用，比如适用于 monorepo 的 Workspaces，解决依赖的依赖更新问题的 Selective version resolutions 等，https://code.facebook.com/posts/274518539716230
  2. state-machine-component by preact 作者，通过 reducer + action 的方式组织 React Component 的内部 state。https://twitter.com/_developit/status/905250269306474497
  3. 管道操作符 |> 的 JavaScript 提案，适用于 lodash、rxjs 这种库，想尝鲜的可以配 babel 插件实现。https://github.com/tc39/proposal-pipeline-operator，https://www.npmjs.com/package/babel-plugin-transform-pipeline
  4. Web Payments 支付接口快要来了，Chrome Canary 可用，Webkit 也是 In Development 状态，https://twitter.com/wesbos/status/905815017819385857，https://webkit.org/status/#feature-payment-request
  5. React Native EU 2017，https://medium.com/@dschmidt1992/react-native-eu-2017-b091adc9aa9f

早报 @ 2017.9.7

  1. 利用 @std/esm 让 node 无需 .mjs 后缀就使用 ES6 modules。https://twitter.com/zachcodes/status/903251125520007168
  2. 新发布的一个 JavaScript runtime error tracker 服务，支持 AST 回溯到源码。https://javascript.studio/，https://medium.com/javascript-studio/javascript-studio-publicly-available-28522e325037
  3. Why CSS, not CSS-in-JS，同意，个人也不喜欢 CSS-in-JS，https://svelte.technology/blog/the-zen-of-just-writing-css
  4. react-idle，在 react 空闲时做点啥，比如加载脚本、问问用户是否还在、做一些耗 CPU 的事等，by React-Router 作者，https://reacttraining.com/react-idle/，https://cdb.reacttraining.com/announcing-react-idle-8fc0b9e2d33e
  5. React.ReducerComponent，在 React Component 里用 reducer 来更新 react 的 state，看看就好，另一种思路。https://twitter.com/jaredpalmer/status/905170062679662594
@sorrycc sorrycc changed the title 早报汇总 @ 2017.9 早报汇总 @ 2017.09 Nov 30, 2017
@sorrycc sorrycc changed the title 早报汇总 @ 2017.09 早报汇总 @ 2017.9 Nov 30, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@sorrycc