├── .travis ├── .id_rsa.enc └── ssh_config ├── .travis.yml ├── package.json ├── LICENSE ├── .gitignore ├── deploy.js ├── README.md └── report ├── 201808.md ├── 201810-11.md ├── 201809.md ├── 201906.md ├── 201905.md ├── 201812.md ├── 201902.md ├── 201903.md ├── 201904.md └── 201901.md /.travis/.id_rsa.enc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/txd-team/monthly/HEAD/.travis/.id_rsa.enc -------------------------------------------------------------------------------- /.travis/ssh_config: -------------------------------------------------------------------------------- 1 | Host github.com 2 | User git 3 | StrictHostKeyChecking no 4 | IdentityFile ~/.ssh/id_rsa 5 | IdentitiesOnly yes 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | node_js: 4 | - '8' 5 | branches: 6 | only: 7 | - master 8 | before_install: 9 | - openssl aes-256-cbc -K $encrypted_2cb5fc316fec_key -iv $encrypted_2cb5fc316fec_iv 10 | -in .travis/.id_rsa.enc -out ~/.ssh/id_rsa -d 11 | - chmod 600 ~/.ssh/id_rsa 12 | - eval $(ssh-agent) 13 | - ssh-add ~/.ssh/id_rsa 14 | - cp .travis/ssh_config ~/.ssh/config 15 | - git config --global user.name x-cold 16 | - git config --global user.email lxstart@outlook.com 17 | install: 18 | - npm install 19 | script: 20 | - npm run deploy 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fe-report", 3 | "yuqueConfig": { 4 | "login": "txd-team", 5 | "repo": "fe-report", 6 | "adapter": "markdown", 7 | "baseUrl": "https://www.yuque.com/api/v2", 8 | "postPath": "report", 9 | "mdNameFormat": "slug", 10 | "onlyPublished": true 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/txd-team/monthly.git" 15 | }, 16 | "scripts": { 17 | "sync": "yuque-hexo sync", 18 | "clean": "yuque-hexo clean", 19 | "deploy": "npm run sync && node deploy.js" 20 | }, 21 | "devDependencies": { 22 | "yuque-hexo": "^1.6.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Alibaba TXD 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | package-lock.json 64 | 65 | yarn.lock -------------------------------------------------------------------------------- /deploy.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const chalk = require('chalk'); 5 | const { execSync } = require('child_process'); 6 | 7 | const rootDir = path.join('.'); 8 | const ERROR_CODE = 255; 9 | 10 | /** 11 | * 提交代码到分支 12 | * 13 | * @param {String} branch 分支名 14 | */ 15 | function push(branch) { 16 | const execOptions = { 17 | cwd: rootDir, 18 | }; 19 | console.log('Start to push code to github.'); 20 | try { 21 | execSync(`git pull origin ${branch}`, execOptions); 22 | execSync('git add .', execOptions); 23 | execSync(`git commit -m "yuque auto update"`, execOptions); 24 | execSync(`git push -u git@github.com:txd-team/monthly.git HEAD:${branch}`, execOptions); 25 | } catch(error) { 26 | console.log(chalk.yellow(error.message)); 27 | console.log(chalk.yellow('There are some exceptions during push code to github, please manually check it.')); 28 | if (error.message.startsWith('Command failed: git commit -m')) { 29 | console.log(chalk.yellow('Almost it is caused by that there isn\'t any changes of repository')); 30 | return process.exit(0); 31 | } 32 | process.exit(ERROR_CODE); 33 | } 34 | console.log('Push code to github done!'); 35 | } 36 | 37 | push('master'); 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 阿里云 TXD 前端月刊 2 | --- 3 | 4 | [![build status][travis-image]][travis-url] 5 | 6 | [travis-image]: https://img.shields.io/travis/txd-team/monthly.svg?style=flat-square 7 | [travis-url]: https://travis-ci.org/txd-team/monthly 8 | 9 | ## 概要 10 | 11 | TXD 前端小报，是阿里巴巴「研发效能事业部-技术体验团队 TXD」发起的趣闻点评小项目，汇聚行业最新新闻与动态，聚焦前端及周边领域，每月 (逢大事情) 一更； 12 | 13 | > 仓库的文档全部在[语雀](https://www.yuque.com/txd-team/fe-report)进行编辑，通过 CI 自动更新到 Github。 14 | 15 | ## 目录 16 | 17 | ### 2019 年 18 | 19 | 20 | - [201906 月刊](./report/201906.md) 21 | - [201905 月刊](./report/201905.md) - 五月南来风，前端新风向看过来 22 | - [201904 月刊](./report/201904.md) - 望穿春色满园，四月烟蓑雨笠 23 | - [201903 月刊](./report/201903.md) 24 | - [201902 月刊](./report/201902.md) 25 | - [201901 月刊](./report/201901.md) 26 | 27 | ### 2018 年 28 | 29 | - [201812 月刊](./report/201812.md) 30 | - [201810-11 月刊](./report/201810-11.md) 31 | - [201809 月刊](./report/201809.md) 32 | - [201808 月刊](./report/201808.md) 33 | 34 | ## 运行机制 35 | 36 | 自由投稿和联合编辑制，即所有读者都可以对感兴趣的内容投稿到 [issue](https://github.com/txd-team/monthly/issues) 进行投稿 :)，当期的联合编辑同学将会进行汇总，次月初发布。 37 | 38 | ## 联合编辑 39 | 40 | - [roymellon (绘萌)](https://github.com/roymellon) 41 | - [damujiangr (墨止)](https://github.com/damujiangr) 42 | - [Hkmu (扶容)](https://github.com/Hkmu) 43 | - [x-cold (尹挚)](https://github.com/x-cold) 44 | - [happyliuliu (玙璠)](https://github.com/happyliuliu) 45 | - [Mavericker (佐七)](https://github.com/Mavericker-1996) 46 | 47 | ## 关于我们 48 | 49 | 阿里巴巴 TXD（阿里云智能事业群-研发效能事业部-技术体验团队），以“定义未来体验”为愿景，以“融合设计和技术，创造优质体验，提升产品复合价值”为使命，致力于集团全球数据中心和运维体系的数字化、自动化、智能化场景中的体验设计和前端工程体系化建设，创造高品质运维工具、打造企业级数据可视化产品等，为集团业务快速发展提供稳定、可靠、高效的服务保障。 50 | 51 | - 微信公众号：TXD技术体验设计 52 | - 知乎专栏：[https://zhuanlan.zhihu.com/txd-team](https://zhuanlan.zhihu.com/txd-team) 53 | - 掘金: [https://juejin.im/user/5ad6eec3f265da23a1426da3](https://juejin.im/user/5ad6eec3f265da23a1426da3) 54 | - UI中国：[http://i.ui.cn/ucenter/1171433.html](http://i.ui.cn/ucenter/1171433.html) 55 | - 人人都是产品经理：[http://www.woshipm.com/u/698224](http://www.woshipm.com/u/698224) 56 | - Github：[https://github.com/txd-team](https://github.com/txd-team) 57 | - 团队博客：[http://txd.alibaba-inc.com](http://txd.alibaba-inc.com) 58 | 59 | ## 友情链接 60 | 61 | - [阿里云前端技术周刊](https://github.com/aliyunfe/weekly) 62 | -------------------------------------------------------------------------------- /report/201808.md: -------------------------------------------------------------------------------- 1 | tags: [前端小报] 2 | 3 | --- 4 | 5 | 6 | 前端小报 - 201808 月刊 7 | 8 | > 订阅小报：[https://github.com/txd-team/monthly](https://github.com/txd-team/monthly) 9 | 10 | > 本期小编：[roymellon (绘萌)](https://github.com/roymellon) 11 | 12 | 13 | 14 | ### [Dart 2.0 发布](http://www.infoq.com/cn/news/2018/08/dart2-publish-google) 15 | 16 | [Dart](https://www.dartlang.org/guides/language)是一门由Google出品的语言，目标成为移动与Web开发主流语言(语言排行可以参考[Github语言提交榜](https://madnight.github.io/githut/#/pushes/2018/2))。 17 | 18 | 目前主要应用于Flutter, [Flutter](https://flutterchina.club/)是google推出的移动UI框架(2017.5月推出)，看一看使用场景： 19 | 20 | ![](https://cdn.nlark.com/lark/0/2018/png/2820/1534126451055-91a8d72c-690e-4124-8ede-62aaa2f926b5.png#align=left&display=inline&height=371&originHeight=515&originWidth=1038&status=done&width=747) 21 | 22 | 框架层面PK 会关注哪些方面。 23 | 24 | ![](https://cdn.nlark.com/lark/0/2018/png/2820/1534126091433-2f3c125c-1502-4ce4-8411-ae45883a9573.png#align=left&display=inline&height=539&originHeight=539&originWidth=664&status=done&width=664) 25 | 26 | 27 | ### The Cost of Javascript 28 | 29 | 这个话题自从[Medium](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4) 提出后， 在知乎上也有[对应的专栏](https://zhuanlan.zhihu.com/p/41292532)说这个事
30 | 主要观点是： 31 | 32 | - JavaScript越来越膨胀了，虽然网络情况越来越好了，但依然有很多极端场景 33 | - JavaScript是可交互性的大问题，执行速度和文件大小同样都是问题 34 | - 解决方案 代码分离 + 持续集成（度量与优化、监控） 35 | 36 | 37 | ### 快速新闻 38 | 39 | - 玉伯 [从前端技术进化到体验科技](https://mp.weixin.qq.com/s/IYddaaw2ps1wR2VT1dZWPg) , 我们关注的事和几年前已经不一样了。 40 | - [GraphQL on server](https://www.joyent.com/blog/graphql-on-the-server), GraphQL是个好东西，一旦按约定形成，可以极大的减少前后端接口定义和联调时间。 41 | - [Android 9 Pie新特性](https://android-developers.googleblog.com/2018/08/introducing-android-9-pie.html)，不知道什么时候才能体验到.. 42 | - [拼多多为什么崛起](https://mp.weixin.qq.com/s/8C4aCqFhXjw9yMjUlWGKzQ)，难道又是 农村包围城市， 得**者得天下？ 43 | - [TypeScript 3.0](https://blogs.msdn.microsoft.com/typescript/2018/07/30/announcing-typescript-3-0/)，我只想知道直接用会不会跪 44 | 45 | 46 | ### 相关资料 47 | 48 | - [Dart 官方文档](https://www.dartlang.org/guides/language) 49 | - [Flutter和RN对比](https://juejin.im/post/5b0607c76fb9a07a9b365556) 50 | - [超大型Javascript应用设计哲学](https://hijiangtao.github.io/2018/04/20/Designing-Very-Large-JavaScript-Applications/) 51 | - [如何才能写出好的软件设计文档](https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247488261&idx=1&sn=c3adf142043b16599ed5e6e85eb87689) 52 | -------------------------------------------------------------------------------- /report/201810-11.md: -------------------------------------------------------------------------------- 1 | 前端小报 - 201810-11 月刊（包含部分10月份内容） 2 | 3 | > 订阅小报：[https://github.com/txd-team/monthly](https://github.com/txd-team/monthly) 4 | 5 | > 本期小编：[damujiangr (墨止)](https://github.com/damujiangr) 6 | 7 | 8 | 9 | ### 内容提要 10 | 11 | 1. React Conf概况： 12 | - (React 16.7) React Hook：声称不使用 Class 就可以使用 React 的大部分功能，采用逐步推广的策略 13 | - Suspense(已发布，) 14 | - (已发布) Suspense for Code Splitting，结合 React.lazy 实现 Code-Splitting, 达到动态加载组件的目的，见 React v16.6.0 15 | - 同时 React v16.6.0 新增了一个专门用于性能优化的 API：React.memo, 类似于 PureComponent, React.memo 针对于 function component，执行对 props 的浅比较 16 | - (React 16.9) Suspense for Data Fetching 17 | - (React 16.9) Concurrent Rendering: 并发渲染 18 | > 本期评论员：React近期的趋势是要代码更少、运行更快，来解决日益庞大的应用带来的问题，目前可以入手动态加载组件的功能了，有性能瓶颈的项目可以应用一试了 19 | 20 | 2. Create-React-App 2.0 发布 21 | - 更新到 webpack 4, Babel 7, 支持 React v16的最新版语法 22 | - 支持 SCSS 和 CSS Modules 23 | - v2.1 时, 新增了 TypeScript 支持 24 | > 本期评论员：2.0 加入了很多新的功能，尤其 TypeScript 支持。学习搭建脚手架和链路工具可以算得上一个很好的模版 25 | 26 | 3. React Native发布重构路线图，期望让RN更轻量，更适应 JavaScript 生态圈的发展 27 | - 同期关注 Flutter 28 | > 本期评论员：大前端的概念已经提了很久了，只说终端方向，尤其是RN、Flutter、Electron的出现，甚至包含嵌入式开发，一人精通 Web 和 Native 开发可能是一个越来越强烈的趋势 29 | 30 | 4. Vue 3.0 开发路线 31 | - 最大的部分是渲染函数中使用的 Virtual DOM 格式（美其名曰博众家之长吧） 32 | - 更全面的使用 TypeScript 33 | 5. Angular 7.0 发布 34 | - 跨整个平台的大版本，包括核心框架、Angular Material 和与主版本同步的CLI 35 | 6. Node.js 11发布，Node 10正式进入LTS，alinode-v4.5.0也进行了支持 36 | - v11 支持 V8 新发布的 v7.0 37 | 7. Chrome 70 正式版发布：windows端将支持PWA 38 | > 本期评论员：拥抱 PWA，今天前端应用越来越庞大，离线和性能的要求就日益凸显，PWA 也在得到各大浏览器厂商的支持，有需可入坑 39 | 40 | 41 | 8. Taro 全面支持微信/百度/支付宝小程序 42 | > 本期评论员：小程序现在处于混战阶段，各类小程序层出不穷，业界确实有场景，有痛点，应用角度上有此需求的开发同学可以入手尝试一下，不失为提高人效的一种方案。但是小程序也在不断演进，坑也肯定特别多。从技术角度来讲个人并不看好这样的集成框架 43 | 44 | 45 | 9. top programming languages of 2018 46 | - [https://blog.github.com/2018-11-15-state-of-the-octoverse-top-programming-languages/](https://blog.github.com/2018-11-15-state-of-the-octoverse-top-programming-languages/) 47 | - TypeScript 增长迅速，是一种开发友好，运营也很好的语法集合，值得拥有 48 | - 增长迅速的语言的一些特点 49 | - Type safety 类型安全 50 | - Python 51 | - TypeScript 52 | - Kotlin 53 | - Interoperability 互通 54 | - TypeScript <-> Javascript/ES 55 | - Rust & Kotlin <-> C & java 56 | - Python <-> ... 57 | - Open Source 开源 58 | > 本期评论员：越来越多的成熟的语言特性被引入到前端开发中，从增长趋势来看 TypeScript 势头迅猛，ES超集无缝切换，友好的学习曲线，静态类型检查，类Java 和 C# 的严谨语言结构，受到大批程序员的青睐 59 | 60 | 10. 一篇介绍 TypeScript 开发指南 61 | - [https://www.sitepen.com/blog/2018/10/29/update-the-definitive-typescript-guide/](https://www.sitepen.com/blog/2018/10/29/update-the-definitive-typescript-guide/) 62 | > 本期评论员：TS 风头正劲，赶紧来学习下吧，相信你会爱不释手 63 | 64 | 11. Github 仓库数量破亿了 65 | - [https://blog.github.com/2018-11-08-100M-repos/](https://blog.github.com/2018-11-08-100M-repos/) 66 | 67 | 68 | ### 未来关注 69 | 70 | 1. HTTP 3 71 | - 博文[https://dev.to/grigorkh/what-is-http3--4pib](https://dev.to/grigorkh/what-is-http3--4pib) 72 | - 官宣[https://mailarchive.ietf.org/arch/msg/quic/RLRs4nB1lwFCZ_7k0iuz0ZBa35s](https://mailarchive.ietf.org/arch/msg/quic/RLRs4nB1lwFCZ_7k0iuz0ZBa35s) 73 | 2. Google 推出 Virtual Scroller，拯救web长列表，(研发阶段) 74 | - 掘金[https://juejin.im/entry/5bf495d76fb9a049f23c5eac](https://juejin.im/entry/5bf495d76fb9a049f23c5eac) 75 | 3. Webkit 推出新的图形着色语言 whlsl（初级阶段） 76 | - 对 HLSL（DirectX的高级着色语言） 的拓展 77 | - Github仓库[https://github.com/gpuweb/WHLSL](https://github.com/gpuweb/WHLSL) 78 | -------------------------------------------------------------------------------- /report/201809.md: -------------------------------------------------------------------------------- 1 | 前端小报 - 201809 月刊 2 | 3 | > 订阅小报：[https://github.com/txd-team/monthly](https://github.com/txd-team/monthly) 4 | 5 | > 本期小编：[roymellon (绘萌)](https://github.com/roymellon) 6 | 7 | 8 | 9 | ### 近期新闻： 10 | 11 | - [Babel 7 发布上线](https://babeljs.io/blog/2018/08/27/7.0.0) 12 | - 不再支持官方不维护的Node.js版本（0.10, 0.12, 4, 5） 13 | - 移除了一些低版本preset(比如 `preset-2015` ) 14 | - 移除一些低版本的stage(比如 `@babel/preset-stage-0` ) 15 | - 默认移除 `@babel/polyfill` 16 | - 使用 babel.config.js 替换 .babelrc文件， 17 | - 支持更多草案内容 TC39 18 | - 支持TypeScript 19 | - 构建速度提升 20 | - [React 16.5.0](https://github.com/facebook/react/blob/master/CHANGELOG.md) 已提交主干，暂未发布。都是些bug修复，很多特性都没用过，有兴趣的可以看看。 21 | - [GitHub Release Radar](https://blog.github.com/2018-08-17-release-radar-july-2018/) GitHub 会收集当月发布的一些框架/库，不限于前端，可以长期订阅 22 | - [Uber可视化平台 Maze](https://eng.uber.com/maze/) 定义了很多事件，寻求其中的关系，来优化信息路径 23 | - [音频操作库 Tone.js](https://github.com/Tonejs/Tone.js) 可以用js创作电子音频了：）可以指定乐器、特效 24 | - [首届中国React开发者大会](https://fequan.com/2018/) ppt可以在官网查看 [相关视频](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw) 25 | - [第四届FEDAY](https://fequan.com/2018/) ppt可以在官网查看 26 | - [Google I/O 2018 前端性能解决方案](https://developers.google.com/web/updates/2018/08/web-performance-made-easy) 27 | 28 | ![](https://cdn.nlark.com/lark/0/2018/png/2820/1536568303355-dfcffdd5-3cf4-44e9-bb57-19d21dff0959.png#align=left&display=inline&height=218&originHeight=338&originWidth=800&width=517) 29 | 30 | [Lighthouse (Chrome devTools) ](https://developers.google.com/web/tools/lighthouse/) 用来衡量页面性能，提供基础指标及优化建议
31 | [Guess.js](https://github.com/guess-js/guess) 使用机器学习 + 行为数据来度量用户体验 32 | 33 | - [前端下半场：构建跨框架UI库](https://www.phodal.com/blog/build-cross-framework-ui-library/)
34 | 提出了一个观点，UI框架太多，特性也不一样，技术层面应该可以相关调用。并且给了个例子 React中引入一个Angular组件，和Angular中引入React组件。
35 | 思考：是一个不错的思路，只是现在有些不够成熟（比如文件过大，语义不明确，版本更新等），而且使用场景较小，为啥不用一个技术栈呢... 36 | - [微前端的设计理念和初探](https://zhuanlan.zhihu.com/p/41879781)
37 | 对应的微服务概念，把一个大应用拆分为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合，从而满足业务快速变化及分布式多团队并行开发的需求。
38 | 思考：Emmm, 大应用。貌似我们的应用都比较小，或者天然的都拆分好了... 基于npm的形式去合作，看看就好。 39 | - [Github 宣布移除 jQuery技术栈](https://githubengineering.com/removing-jquery-from-github-frontend/)
40 | 早期用jQuery是因为解决了浏览器兼容性问题，还有方便的ajax，现在都有原生的和替代方案。
41 | 使用eslint规则来追踪jQuery的使用，并且有相应的polyfill来兼容一些写法。
42 | 思考：我们的一些业务也有jQuery的，有很多页面都不会再改了，所以就没理它们。以后会改么? 43 | - [Dropbox 从underscore迁移到lodash](https://blogs.dropbox.com/tech/2018/09/migrating-from-underscore-to-lodash/)
44 | 又一个迁移，underscore不更新了... lodash可以独立引用功能，也有大量新方法（相比于underscore,  其实lodash更新的也不频繁） 45 | - [可视化&图表库收集](https://www.codewall.co.uk/the-best-javascript-data-visualization-charting-libraries/) 确实有很多酷炫的，我们推荐使用 [AISC图表组件](http://aisc.alibaba-inc.com/site/pc#/cate/4/page/95)，如果有特殊需求联系 业枫。蚂蚁的[AntV](https://antv.alipay.com/zh-cn/index.html) 也不错 46 | - Javascript Robotics & IoT platform, [Johnny-five](http://johnny-five.io/), 支持树莓派等硬件 47 | 48 | ![](https://cdn.nlark.com/lark/0/2018/png/2820/1536569527635-09306391-ec20-48f6-a0c7-3d18f8d4e7a8.png#align=left&display=inline&height=243&originHeight=317&originWidth=722&width=553) 49 | 50 | ![](https://cdn.nlark.com/lark/0/2018/png/2820/1536569541895-fdb133b7-7822-4567-9342-5f2b690f8021.png#align=left&display=inline&height=335&originHeight=810&originWidth=795&width=329) 51 | 52 | 53 | ### TOPIC1 [2018 网页开发初学者学什么？](https://zendev.com/2018/08/14/learning-web-development-2018.html) 54 | 55 | ![](https://cdn.nlark.com/lark/0/2018/png/2820/1536561535910-4ca6160e-3655-4f26-b2bc-dd48fd6096fd.png#align=left&display=inline&height=175&originHeight=600&originWidth=1200&width=350) 56 | 57 | 文中提到了web developer的一种迷茫，新技术太多了，变化太快了，需要学的太多了。
58 | 判断是否要学习三个维度，是否感兴趣 Motivation / 是否有发展 Momentum / 是否有前途及发展 Money。
59 | 最后文章做出了自己的判断 VUE及REACT 发展程度比较好，REACT比较有前途。（我们这边都是REACT ~） 60 | 61 | 62 | ### TOPIC2 [我们为什么需要一个统一的开发框架？](https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247488436&idx=1&sn=b22a02c590ea1b2e85ece70ff0ee2d1e) 63 | 64 | 技术栈不统一真是一个很普遍的事，前端尤为严重。文章先说了一下起因，业务小团队自我繁衍，部门扩大的时候尽量减少对外依赖（不然怎么升的上去），不断新的产品和新的尝试。
65 | 接着说影响，资源浪费、人员储备困难、很难互助、无法形成高效的开发模式，集成度不高。如果能有统一的开发框架，那么可以避免重复技术研究、标准化技术规范、深入技术沉淀。对研发团队有效的管理和考核。（怎么衡量一个川菜厨师和一个鲁菜厨师谁更优秀？）
66 | 用Java的spring cloud, 作为一个例子提了一下，如何做一个统一的开发框架。 67 | -------------------------------------------------------------------------------- /report/201906.md: -------------------------------------------------------------------------------- 1 | ![6月封面图.001.jpeg](https://cdn.nlark.com/yuque/0/2019/jpeg/276025/1562205453984-89978181-00eb-41e6-8a17-7d2291377b4b.jpeg#align=left&display=inline&height=360&name=6%E6%9C%88%E5%B0%81%E9%9D%A2%E5%9B%BE.001.jpeg&originHeight=360&originWidth=720&size=343369&status=done&width=720) 2 | 3 | 【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏从未停歇，在这个过去的六月里，来看看我们为您准备了那些前端小灶吧～ 4 | 5 | > 欢迎 [订阅](https://zhuanlan.zhihu.com/txd-team) & [投稿](https://github.com/txd-team/monthly/issues) 6 | 编辑：> [尹挚](https://github.com/x-cold) 7 | 校对：> [佐七](https://github.com/Mavericker-1996) 8 | 9 | 10 | ## 学习专栏 11 | 12 | 13 | ### [你可能不知道的 VS Code 高级特性](https://www.vscodecandothat.com/#force-collapsible-regions) 14 | 15 | 这里整理了一份 35 个 VS Code 提高开发效率和体验的高级功能列表，包含用法和视频展示，可以说是非常能提效的一些技巧。 16 | 17 | 18 | ### [你用的那些 CSS 转场动画可以换一换了](https://www.zhangxinxu.com/wordpress/2019/05/css-transfer-animation/) 19 | 20 | 传统转场动画就是滑来滑去，淡入淡出这些。时代在召唤，技术在发展，可以试一试使用一些新的转场动画了。作者使用了 CSS3 的一些特性（clip-path、mask、滤镜等）实现一些进阶的转场效果，只需要使用原生的代码就可以像 PPT 里面那样灵活的转场。 21 | 22 | 23 | ### [原生 JS 快速实现拖放效果](https://segmentfault.com/a/1190000019554950) 24 | 25 | 拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生 Javascript 实现起来也非常的方便。作者用非常简洁的代码实现了最基的拖放效果。 26 | 27 | ![1128277794-5d0ddbf1b2cb6_articlex.gif](https://cdn.nlark.com/yuque/0/2019/gif/103147/1562115476618-6889f7c6-2151-4b98-91b4-810b48146ebf.gif#align=left&display=inline&height=227&name=1128277794-5d0ddbf1b2cb6_articlex.gif&originHeight=227&originWidth=800&size=3243863&status=done&width=800) 28 | 29 | ### 30 | 31 | ### [Web Worker 实现多线程计算](https://dassur.ma/things/when-workers/) 32 | 33 | JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行; 那什么时候应该使用 Web Worker，看完这篇文章你或许就有答案了； 34 | 35 | 36 | ### [浅谈小程序运行机制](https://segmentfault.com/a/1190000019131399) 37 | 38 | 小程序与普通网页开发是有很大差别的，这就要从它的技术架构底层去剖析了。还有比如习惯 Vue，React 开发的开发者会吐槽小程序新建页面的繁琐，page 必须由多个文件组成、组件化支持不完善、每次更改 data 里的数据都得 setData、没有像 Vue 方便的 watch 监听、不能操作 DOM，对于复杂性场景不太好，之前不支持 npm，不支持Sass，Less 预编译处理语言。 39 | 40 | 41 | ## 新闻快爆 42 | 43 | 44 | ### [Node.js 十年回顾，你大爷还是你大爷](https://mp.weixin.qq.com/s/imX5Zt5LdjHr8VA_vbhfwg) 45 | 46 | Node.js 从 2009 年诞生开始，到现在已有 10 岁，在这 10 年里，它的成长和成熟是大家有目共睹的。它因后端简化并发编程而被关注，因作为前端辅助开发工具而流行，因异步流程控制和回调地狱而被人诟病，因 npm 批量安装模块而被人敬仰。狼叔新书《更了不起的Node.js》，带你打开Node.js世界的大门，领略大前端领域璀璨的星光。 47 | 48 | 49 | ### [目前可以使用 ES10 的 5 个新特性](https://segmentfault.com/a/1190000019570236) 50 | 51 | 三月份的前端月刊中文我们提及到 ES10 即将到来，截止今天为止，已经有一些特性可以通过 Babel 等工具使用了。 52 | 53 | 54 | ### [PixiJS V5 发布](https://www.pixijs.com/) 55 | 56 | 跨设备的快速轻量 2D 引擎库。 让你可以不需要关心 WebGL 深入知识也能充分发挥硬件加速的优势，创建各种 2D 效果。 PixiJS 有很多有趣的 [DEMO](https://pixijs.io/examples/#/demos-basic/container.js) ， 也可以自己尝试[编写一个例子](https://www.pixiplayground.com/#/edit)。 57 | 58 | 59 | ### [RoboMaster S1](https://mp.weixin.qq.com/s/grs_c4ii9Unf29ugb6Qp3w) 60 | 61 | 大疆发布首款教育机器人机甲大师 RoboMaster S1，启蒙编程思维，程序员要从娃娃抓起（其实是自己想买个大玩具了~~） 62 | 63 | [![](https://cdn.nlark.com/yuque/0/2019/jpeg/103147/1562114331785-2b004cf3-d308-4317-80fa-06beebd8578b.jpeg#align=left&display=inline&height=480&originHeight=480&originWidth=720&size=0&status=done&width=720)](https://camo.githubusercontent.com/ab0afcfe24341853ac65a312a187a0597033c7f4/68747470733a2f2f696d672e616c6963646e2e636f6d2f7466732f544231354c455963424b77334b566a535a464f58586172445658612d3732302d3438302e6a7067) 64 | 65 | 66 | ## 工具推荐 67 | 68 | 69 | ### [grade.js](https://github.com/benhowdle89/grade) 70 | 71 | ![image.png](https://cdn.nlark.com/yuque/0/2019/png/103147/1562113203307-876c531d-b93d-453a-bc7d-710fddc80c9c.png#align=left&display=inline&height=434&name=image.png&originHeight=434&originWidth=527&size=345779&status=done&width=527) 72 | 73 | 这个 JS 库可以从图像提取两种主要颜色，然后生成渐变色背景，主要通过 canvas 来读取图片的像素点，然后做类似于直方图统计，得到图片中的主要色值。 74 | 75 | 76 | ### [react-use](https://github.com/streamich/react-use) 77 | 78 | 必不可少的 React Hooks 集合，libreact 的端口。 79 | 80 | 81 | ### [theia](https://github.com/theia-ide/theia) 82 | 83 | Theia 是一款非常灵活的 Web IDE，可以通过扩展和插件的方式轻松完成定制化需求，官方也提供了丰富的内置扩展（文件、编辑器、终端、SCM...）如果你正在构建一个适用于自己企业的 Web IDE，不妨试试适用 Theia 进行扩展性开发。 84 | 85 | 86 | ## 会议回顾 87 | 88 | 89 | ### [GMTC 全球大前端技术大会](https://gmtc.infoq.cn/2019/beijing/) 90 | 91 | GMTC 全球大前端技术大会于 6.20 -  6.21 在北京顺利召开，主题涵盖工程化、移动开发、质量、小程序、架构、管理等前端的方方面面，也讨总结了前端的过去，展望未来的趋势。感兴趣的同学可以到官网查看[精彩回顾](https://gmtc.infoq.cn/2019/beijing/)。 92 | 93 | 94 | ### [VueConf 2019](https://www.yuque.com/vueconf/2019) 95 | 96 | 2019 年 6 月 8 日来自全球各地的开发者齐聚上海，一起见证了 VueConf 2019 的成功举报，作者尤雨溪亲临现场，这里为你整理好了一份大会的[演讲资料（含视频）](https://www.yuque.com/vueconf/2019)。 97 | 98 | 99 | ![image.png](https://cdn.nlark.com/yuque/0/2019/png/276025/1562202442453-4016bcd0-47ca-4e95-a118-426afc312020.png#align=left&display=inline&height=522&name=image.png&originHeight=1044&originWidth=1080&size=1149092&status=done&width=540) 100 | 101 | -------------------------------------------------------------------------------- /report/201905.md: -------------------------------------------------------------------------------- 1 | ![image.png](https://cdn.nlark.com/yuque/0/2019/png/103147/1559524295409-28a240d8-9eb1-49b4-adf4-8ffd1b049e58.png#align=left&display=inline&height=449&name=image.png&originHeight=898&originWidth=1790&size=2102071&status=done&width=895) 2 | 3 | 【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；五月清风徐来，跟我们一起来看一看新的风向即将吹向何方，前端的技术力量又将影响哪些新的领域。 4 | 5 | > 欢迎 [订阅](https://zhuanlan.zhihu.com/txd-team) & [投稿](https://github.com/txd-team/monthly/issues) 6 | > 编辑：[墨止](https://github.com/damujiangr) 7 | > 审稿：[尹挚](https://github.com/x-cold) 8 | 9 | 10 | 11 | ### 学习专栏 12 | 13 | 14 | #### [《](https://yq.aliyun.com/articles/700174)[深入浅出 React Hooks](https://yq.aliyun.com/articles/700174)[》](https://yq.aliyun.com/articles/700174) 15 | 16 | React 16.8 了，还不了解 React Hooks？！想做前端极客，想写出酷酷的代码，那就赶紧跟 [@x-cold](https://github.com/x-cold) 一起来学习最新的 Hooks 知识吧！原文章看[这里](https://juejin.im/post/5cf475d66fb9a07ea944594e)，一步步进入 React Hooks 的世界。 17 | 18 | 19 | #### [《一个合格的中级前端工程师必须要掌握的 28 个 JavaScript 技巧》](https://juejin.im/post/5cef46226fb9a07eaf2b7516) 20 | 21 | 对在毕业季还在找工作的同学，可以说很实用的，如果能全部掌握这些技巧，拿到几个offer应该是没有问题的，当然要注意平时的积累，能力要全面。 22 | 23 | 24 | #### [《Node.js 技术栈》](https://github.com/Q-Angelo/Nodejs-Roadmap) 25 | 26 | 这是作者从事 Node.js Developer 以来的学习历程，旨在为大家提供一个较详细的学习教程，侧重点更倾向于 Node.js 服务端所涉及的技术栈，如果本文能为您得到帮助，请给予支持！ 27 | 28 | 29 | ### 新闻快报 30 | 31 | 32 | #### Github 重磅推出包管理仓库 33 | ![May-31-2019 16-24-50.gif](https://cdn.nlark.com/yuque/0/2019/gif/106292/1559291181359-440a4c28-6d31-4942-bb8e-155f7b50b3d3.gif#align=left&display=inline&height=420&name=May-31-2019%2016-24-50.gif&originHeight=420&originWidth=820&size=726404&status=done&width=820) 34 | 35 | 现在使用 Github，你的团队可以发布公共/私有的包到 Github 提供的包管理仓库，目前包含的类型有 Npm, Docker, Maven, NuGet, RubyGems等，更多的类型还在继续添加中。而且该托管服务是完全免费的。[[戳👇传送门]](https://github.com/features/package-registry) 36 | 37 | 38 | #### Flutter 实现 Web 访问，新增桌面和嵌入式的应用场景 39 | 40 | 2019 谷歌 I/O 大会上，Flutter Team 公布了 Flutter 可进行 Web 访问、提供自定义图像分类模型等诸多新特性，并且可以应用在桌面系统及嵌入式设备中，给未来提供了更多的想象空间，展现了 Flutter 从移动 UI 到制霸多平台的雄心。Flutter for Web 已发布第一个预览版本，可以查看官网信息进行尝鲜，体验惊喜 [[惊喜门]](https://flutter.dev/web)。在 Facebook 年度开发者大会上宣布了会稳定支持 RN，但是 RN 还要继续步履蹒跚吗？ 41 | 42 | 43 | #### HTML 和 DOM 标准统一 44 | 45 | W3C 宣布与 WHATWG 达成协议，HTML 和 DOM 标准都以 WHATWG 为准，也就是说以后只有一套 HTML 标准了。正所谓分久必合，合久必分，不过对大多数的框架工程师影响不是很大（扎心了） [[戳👇传送门]](https://www.w3.org/blog/news/archives/7753) 46 | 47 | 48 | #### Now and the Future: An Overview of the Web in 2019 49 | 50 | W3C Web 技术总负责人 Philippe Le Hégaret 在 QCon 2019 全球软件开发大会做的分享，介绍了Web 技术当前关注的技术方向，未来 W3C 更着力拓展新的领域，其中最重要的一项是汽车互联网，期望打造适用于车联网的 通用的 Web 技术方案。在拓展核心能力方面，有 WebRTC（视频通话）、Web Assembly（性能、语言生态）、WebPerf（性能管理）、Service Workers（离线）、Web Components（组件） 等等，前景如此美好，真的希望文中描述的技术能早日落地，给前端开发者们带来福音。[[传送门]](https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247491186&idx=1&sn=235f648fccaf0e2769fa5044418a8b4d&chksm=f951ab31ce262227a867bdaeaa9d967f2be0272108ef51cfdd9fd7c5118dbcb7201b56ded254&mpshare=1&scene=2&srcid=05090EIW4SEAUAWYJrESqW58&from=timeline&as) 51 | 52 | 53 | #### Ant Design 4.0 进行时！ 54 | 55 | Ant Design 团队发布 4.0 开发规划，将使用最新的 React API，放弃 IE9/10 浏览器的支持，同时会增加设计资产管理的工具包，预计后续设计师就可以参考到这些资源了 56 | 57 | 58 | ### 工具推荐 59 | 60 | 61 | #### 微软发布 Windows Terminal 62 | 63 | 微软正在推出一款名为 Windows Terminal 的新命令行终端工具。它被设计为访问 PowerShell、 Cmd 和 Windows Linux 子系统（WSL）等环境。微软正在为想要调整终端工具的开发人员添加多个选项卡、分割窗口、快捷键支持，另外支持主题和自定义等等。微软这款新的 Windows 终端应用程序在 Build 2019 开发者大会上公布了。[[戳👇传送门1]](https://devblogs.microsoft.com/commandline/introducing-windows-terminal/) 、[[戳👇传送门2]](https://github.com/microsoft/Terminal)  64 | 65 | ![image.png](https://cdn.nlark.com/yuque/0/2019/png/103147/1559547541629-6b7ca0d0-0d9b-4792-901a-8497131b0c12.png#align=left&display=inline&height=418&name=image.png&originHeight=470&originWidth=728&size=598691&status=done&width=648) 66 | 67 | 68 | #### VSCode  添加 Remote Development 特性 69 | 70 | 使用 Remote Development 特性，开发者可以在远程环境下进行开发和调试，同时具备代码高亮和补充功能，跟在本地使用一样 71 | 72 | 73 | #### EdgeDB - The next generation database 74 | 75 | EdgeDB 结合了 NoSQL 数据库的简单性，关系模型强大的查询、严格、一致性和性能。天然支持 GraphQL 哦。数据库选型又多了一份选择。[[戳👇传送门]](https://edgedb.com/) 76 | 77 | 78 | #### 基于 Operational Transformation 的实时数据库 sharedb 79 | 80 | ShareDB is a realtime database backend based on [Operational Transformation (OT)](https://en.wikipedia.org/wiki/Operational_transformation) of JSON documents. It is the realtime backend for the [DerbyJS web application framework](http://derbyjs.com/). 81 | 82 | 83 | #### create-react-app 发布 3.0 84 | 85 | 支持了 React Hooks 的代码风格校验、TypeScript Lint、Jest 24，Hooks 语法可以很方便的用起来了[[Release 日志]](https://github.com/facebook/create-react-app/releases/tag/v3.0.0) 86 | 87 | 88 | ### 热门文章 89 | 90 | 91 | #### [《前端能力中台化之路—Fusion Design 成长史》](https://mp.weixin.qq.com/s/LJoFj_XbaOqpiiGL1xevVg) 92 | 93 | FDCON 2019 演讲的提炼版本，介绍了前端组件库 Fusion Design 的成长演变之路，还有诸多特性的背后的思考，包括对未来的一些探索 94 | 95 | 96 | #### [《探索 Serverless 中的前端开发模式》](https://mp.weixin.qq.com/s/Z2NDVA_UdsRCS8kgy8ejow) 97 | 98 | 前端工程师永远在打破边界，在 Web 、App、桌面和服务端等方面都已经伸出了触角，Serverless 的出现，又能在前端圈引领什么样的风向和潮流呢 99 | 100 | 101 | #### [《大型项目前端架构浅谈（8000字原创）》](https://juejin.im/post/5cea1f705188250640005472) 102 | 103 | 文中从基础层设计到应用层设计的多种方案、平台等做了简单的介绍，从宏观方面介绍了一个大型前端架构的雏形，可以在自己进行技术设计的做一个参考 104 | 105 | 106 | #### [《精读《Function Component 入门》》](https://zhuanlan.zhihu.com/p/67087685) 107 | 108 | 如果你将要使用或者已经开始使用 React 16了，那么小编我推荐来读一下这篇文件，从传统的 Class Component 思维方式转变一下，开始使用 Function Component ，使用 Hooks 来搭建自己的 React 应用吧。 109 | 110 | 111 | ### 小趣味 112 | 113 | 114 | #### IE 所有版本的下载链接 115 | 116 | 一个 IE 爱好者收集了 IE1～IE12、EDGE 的所有下载链接，新版的 IE 已经拥抱 Chromium 了，传统的IE即将进入“博物馆”，IE 爱好者过来围观吧。[[IE 时光机]](https://www.my-internet-explorer.com/edge/) 117 | 118 | -------------------------------------------------------------------------------- /report/201812.md: -------------------------------------------------------------------------------- 1 | 前端小报 - 201812 月刊 2 | 3 | > 订阅 / 投稿：[https://github.com/txd-team/monthly](https://github.com/txd-team/monthly) 4 | 5 | > 本期小编： [Hkmu (扶容)](https://github.com/Hkmu) / [x-cold (尹挚)](https://github.com/x-cold) 6 | 7 | 8 | 9 | ### 新闻快报 10 | 11 | - npm 发布 2018 年的生态数据，预测 2019 年新趋势 12 | 13 | JavaScript 越来越受欢迎，而 npm 是 JavaScript 库的管理中心，目前拥有超过 836,000 个库，是世界上最大的开源库集合。 14 | 15 | 回顾 2018 年，npm 正在被用在越来越多的场景下，包含浏览器，服务端，移动支持，IoT / 机器人等方面；另外可以看到现在 Web 应用程序中大量依赖 npm，占其代码总量的 97%；npm 本身在 2018 年加入了 [NSP](https://github.com/nodesecurity/nsp) 安全审计，更加注重包的安全管理（当然今年也发生了不少的 npm 包事件，参考工具推荐部分的“翻车现场”）。更多关于 npm 有趣的一些趋势可以浏览前端之巅翻译的[报告](https://mp.weixin.qq.com/s/YBDJzenxlbx-oyEky7oUUw)，英文好的同学可以参考[原始报告](https://blog.npmjs.org/post/180868064080/this-year-in-javascript-2018-in-review-and-npms)。 16 | 17 | - Rollup 发布 v1.0 版本 18 | 19 | 从 Rollup 出现到现在已经接近 3 年半的时间，带来了让人眼前一亮的 Tree Shaking 等特性，前端应用的项目构建上我们使用的频率可能相对低一些，而在一些库/框架的开发中经常会用到它，包括 React, Vue 也在使用。在 2018 年 12 月 28 日，Rollup 终于发布了 1.0.0 版本，结束了 0.x.x 时代。当然，升级到最新版本的 Rollup 需要改动不少的配置，参见[更新日志](https://github.com/rollup/rollup/releases/tag/v1.0.0)。 20 | 21 | - Babel 7.2.0 发布，支持私有实例方法 22 | 23 | 关于[私有作用域](https://tc39.github.io/proposal-private-fields/) (Private Fields) 的支持已经进入最新的提案中，Babel 的更新支持意味着我们可以在语言层面直接在我们的类 (Class) 中定义私有的变量和方法了，可以参考下面的示例： 24 | 25 | ```javascript 26 | class Person { 27 | #age = 19; 28 | 29 | #increaseAge() { 30 | this.#age++; 31 | } 32 | 33 | birthday() { 34 | this.#increaseAge(); 35 | alert("Happy Birthday!"); 36 | } 37 | } 38 | ``` 39 | 40 | 在这个提案之前，我们也可以通过下划线命名，Symbol 命名，闭包和 ES6 Proxy 等方式来实现私有作用域，可以参考这篇[文章](https://github.com/Philon/arts/blob/master/tip/JavaScript/JS%E7%B1%BB%E7%9A%84%E7%A7%81%E6%9C%89%E5%8F%98%E9%87%8F.md)。关于 Babel 7.2.0 带来的更多特性可以读一下官方的[更新日志](https://babeljs.io/blog/2018/12/03/7.2.0)。 41 | 42 | - AI 也能帮你写代码 (TypeScript / JavaScript / Python / C++ / C#) 了！！！ 43 | 44 | 微软和 IntelliCode 团队一起推出 [Visual Studio IntelliCode](https://visualstudio.microsoft.com/zh-hans/services/intellicode/) 扩展，预览版可以在 VSCode 插件市场直接查找「Visual Studio IntelliCode」安装。在我们编写代码的时候，插件会自动给出推荐的编码补全，当然它不只是个语法的提示工具，它的做法是根据编码的上下文来提供智能的建议，赶紧安装体验吧~ 45 | 46 | ![intellicode_3.gif](https://cdn.nlark.com/yuque/0/2019/gif/103147/1546594322606-2ef2f2b7-d52f-44f6-b8aa-36f2bf15d5b1.gif#align=left&display=inline&height=386&linkTarget=_blank&name=intellicode_3.gif&originHeight=772&originWidth=1402&size=744532&width=701#align=left&display=inline&height=411&originHeight=772&originWidth=1402&width=746)
47 | 48 | - 2019 年十款流行的 Node.js 框架 49 | 50 | 文章介绍了框架带来的收益以及如何选择适合的框架，并且对比了 10 款目前流行的 Node.js 框架，包括老牌的 Express、Meteor，以及一些新兴框架，例如 Adonis, Nest 等。感兴趣的同学可以[阅读原文](https://scotch.io/bar-talk/10-node-frameworks-to-use-in-2019#toc-introduction)。 51 | 52 | 值得一提的是，在诸多框架横空出世的黄金开发时代，框架之间更多是特性的互补，所以并没有必要去分出高下，更重要的是选择跟业务成长相契合的框架。另外作者列举的更多的是海外流行的框架，其实国产的 Egg, ThinkJS 也已经有不少的企业级实践，感兴趣的可以到对应的 Github 仓库继续深入了解。 53 | 54 | - 阿里开源企业级设计系统最佳解决方案 [Fusion](https://fusion.design/about) 55 | 56 | 2018 年 12 月 16 号，Fusion Design 在 OSC 深圳源创会年终盛典上正式开源，它是阿里巴巴耗时近三年打造的企业中后台解决方案，关于 Fusion 的详细介绍可以参考[这里](https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247490172&idx=1&sn=4c6f224a74f4e13e37ae112f10f3667a&chksm=f951af3fce26262919bded758a2661dd728038334c81bc7ae257c05b44479adbb984e6589e9e&token=935107263&lang=zh_CN#rd)。 57 | 58 | - 微软宣布 Edge 将采用 Chromium 内核 59 | 60 | 这对于诸多的前端开发者而言，无疑是本年底最大的福音~！具体的计划可以参考官网的[博客](https://blogs.windows.com/windowsexperience/2018/12/06/microsoft-edge-making-the-web-better-through-more-open-source-collaboration/)，在不久的将来，基于 Chromium 的 Edge 浏览器将要正式和我们见面啦。 61 | 62 | 63 | ### Github Trending 64 | 65 | > 洞察 Github 近期 Hot Fresh Repository 66 | 67 | 68 | - [Magic-Grid](https://github.com/e-oj/Magic-Grid) 69 | 70 | 一款简单易用，轻量级的动态布局的 JavaScript 库，与它的名字不同，Magic-Grid 不是 CSS Grid 库，它支持弹性布局/瀑布流等，还提供了一个支持 Vue 的[版本](https://github.com/imlinus/Vue-Magic-Grid)。 71 | 72 | - [nodebestpractices](https://github.com/i0natan/nodebestpractices) 73 | 74 | 大型 Node.js 最佳实践的精品总结和分享，里面包含了丰富的使用场景及最佳实践（附带解释），阅读这本大型书籍也能收获不少关于 Node.js 的知识。 75 | 76 | - [sharp](https://github.com/lovell/sharp) 77 | 78 | 高性能的 Node.js 图像处理模块，图像处理又多一种新的选择。 79 | 80 | - [bloomrpc](https://github.com/uw-labs/bloomrpc) 81 | 82 | 不容错过的 GPRC 服务可视化客户端，可以理解为 HTTP 之 Postman, GraphQL 之 Playground，GRPC 之 BllomRPC。 83 | 84 | - [devhub](https://github.com/devhubapp/devhub) 85 | 86 | Github 社交聚合平台，个人认为更像是个人工作台，支持 Web, iOS, Android, Desktop 多平台，如果你是 Github 用户，这里可能提供了你想要的一切。 87 | 88 | - [rrweb](https://github.com/rrweb-io/rrweb) 89 | 90 | rrweb 是 'record and replay the web' 的简写，旨在利用现代浏览器所提供的强大 API 录制并回放任意 Web 界面中的用户操作。 91 | 92 | - [notable](https://github.com/fabiospampinato/notable) 93 | 94 | 一款基于 Markdown 的笔记应用程序，支持无限文件夹 / 标签管理，喜欢纯粹的 Markdown 编辑体验的同学可以尝试使用一下，README 文件中有和其他竞品对比的报告。 95 | 96 | 97 | ### 精品学习 98 | 99 | - [前端该知道些密码学和安全上的事儿](https://mp.weixin.qq.com/s/eMa4y0-B9xqeB_mNPHeRSw) 100 | 101 | 在这个经常翻车的年代，网络安全逐渐受到重视。在前端这个开放的世界中，开发人员更应该对安全有所了解，并在自己的应用程序中部署适当的安全工具和策略，保护用户隐私以及系统的安全运行。文章阅读时间约 15 分钟。 102 | 103 | - [Why review code](https://mp.weixin.qq.com/s/5m3bBzFTN82ttEFN5EpBew) 104 | 105 | 如何保证代码的交付质量？结对编程是否有科学依据？实际上，Code Review 无论是在软件工程体系，亦或是开源社区的运行秩序中，都是非常重要的环节。正确的 Code Review 姿势不仅能提高代码质量，降低故障发生的风险，还能给团队开发带来效能的提升。如果你的团队还没有 Review 代码的习惯，不妨来看下燕燕翻译的这篇博客。文章阅读时间约 10 分钟。 106 | 107 | 108 | ### 工具推荐 109 | 110 | - [quicklink](https://github.com/GoogleChromeLabs/quicklink) 111 | 112 | 还记得曾今的 WAP 时代吗？当我们在浏览网页的时候，经常能看到一个绿色的下一页按钮，点击之后可以“几乎无刷新”的跳转到新的页面中，它其实是一种预加载的策略。现在 quicklink 也可以给普通的 Web 应用程序提供类似的能力，使用它我们可以让浏览器在空闲的时间预先将用户即将访问的页面预先缓存，从而极大地提高了切换页面的速度。 113 | 114 | - [ncc](https://github.com/zeit/ncc) 115 | 116 | 可以将 Node.js 模块打包成单个文件的神奇工具，让你的模块最小化。这种打包的方式非常适合一些需要更“纯粹”的交付场景，比如 serverless，通过 ncc 我们可以很轻松地把应用程序及依赖转换成单个文件进行交付。 117 | 118 | - [npq](https://github.com/lirantal/npq) 119 | 120 | 最近半年发生的 npm 事故稍微有些频繁，因此通过 npm 安装一个靠谱的 package 和 version 非常重要。npq 会在安装之前进行前置的检查，其中包括了安全扫描、包的发布时间、热度、安装脚本分析等。另外带大家回顾一下今年的大型翻车现场： 121 | 122 | debug：[visionmedia/debug#603](https://github.com/visionmedia/debug/issues/603)
React：[facebook/react#14208](https://github.com/facebook/react/issues/14208)
event-stream：[https://zhuanlan.zhihu.com/p/50938220](https://zhuanlan.zhihu.com/p/50938220) 123 | -------------------------------------------------------------------------------- /report/201902.md: -------------------------------------------------------------------------------- 1 | 【AIS-TXD前端技术月刊】- 本月热门前端技术快报，汇聚 Github Trending 流行 Repo 和热门文章，文末有福利 2 | 3 | ![hooks.jpg](https://cdn.nlark.com/yuque/0/2019/jpeg/103147/1551432272343-512be9f6-cff6-43f0-8151-7bed017ec646.jpeg#align=left&display=inline&height=446&name=hooks.jpg&originHeight=808&originWidth=1352&size=24501&status=done&width=746) 4 | 5 | ### 6 | > 欢迎 [订阅](https://zhuanlan.zhihu.com/txd-team) & [投稿](https://github.com/txd-team/monthly/issues) 7 | 8 | > 本期小编：[damujiangr (墨止) ](https://github.com/damujiangr)  9 | 10 | 11 | 12 | ### 新闻快报 13 | 14 | #### React v16.8 发布:[ The One With Hooks](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) 15 | 16 | - [Hooks 上手介绍](https://reactjs.org/docs/hooks-intro.html)  17 | - 额外：React 终于开始做国际化了，以后国内的新手们就能看到中文文档的 React 了，目前正在招募 Contributors，有兴趣的可以参看 [Is React Translated Yet? ¡Sí! Sim! はい](https://reactjs.org/blog/2019/02/23/is-react-translated-yet.html)  18 | 19 | #### 20 | 21 | #### Vue v2.6 发布: 代号：Macross 22 | 23 | - 准备与 v3.0 版本接轨了 24 | - Slot 引入了新的模版语法， v-slot (默认插槽) v-slot:name (具名插槽) 25 | - 异步错误处理、编译警告位置信息等等 26 | - [专栏链接](https://zhuanlan.zhihu.com/p/56260917)  27 | 28 | 29 | #### Flutter 1.2 发布 30 | 31 | - Flutter 1.2 是自第一个测试版本，历时一年后，发布的第一次 feature update 32 | - 除了提升了核心框架的稳定性、性能和质量，完善现在的widget，重要的是为开发者提供了基于 Web 的开发工具，以后还可能会直接构建到VS Code中 33 | - widget inspector 支持树状层级结构的可视化 34 | - timeline view 支持帧级别的诊断，发现渲染和计算的问题 35 | - full source-level debugger 支持设置断点、单步执行，查看调用堆栈 36 | - logging view 能够显示 app 中的日志、网络、框架和垃圾回收事件 37 | - [官方介绍链接](https://developers.googleblog.com/2019/02/launching-flutter-12-at-mobile-world.html)  38 | 39 | 40 | #### 支付宝小程序向个人开发者开放公测 41 | 42 | - 小程序这场围绕流量、场景、创意等诸多概念的新风口，每一家公司都想要分得一杯羹，越来越多的小程序、轻应用涌现出来，支付宝小程序开发公测，说明技术架构上已趋稳定 43 | - [支付包小程序入驻链接](https://docs.alipay.com/mini/introduce/register)  44 | - 这里还有一篇技术稿，为支付宝小程序首席架构师白招拒，解读支付宝小程序的技术架构和开发特点，[《独家！支付宝首次披露其小程序技术架构》](https://mp.weixin.qq.com/s/PX7b_qV6tYKnN3ecoz9Ehw)  45 | 46 | 47 | #### 阿里云 ARMS 推出小程序监控 48 | 49 | - 基础服务的角色来了，可以用于及时发现卡顿、缓慢和一些错误，让小程序不再裸奔 50 | - 目前支持情况：钉钉E应用、支付宝小程序、微信小程序、其他符合标准的小程序 51 | - [前端监控接入概述](https://help.aliyun.com/document_detail/106086.html)  52 | 53 | 54 | #### Next.js 8 新增支持 Serverless 55 | 56 | - 支持 Serverless 可以极大的提高应用开发的可靠性和可伸缩性，启用也很简单，查看[官方详细介绍](https://nextjs.org/blog/next-8/)  57 | ```javascript 58 | // next.config.js 59 | module.exports = { 60 | target: "serverless", 61 | }; 62 | ``` 63 | 64 | 65 | #### [Ant Design of Vue](https://vue.ant.design/) 66 | 67 | - 近日有开发者基于 Ant Design 的设计语言，开发了一套基于 Vue 组件库，喜欢 antd 风 的 Vue 开发者有福利了 68 | - 使用体验方面，跟 Ant Design 官网的更新要滞后一些，感官上还是很不错的 69 | 70 | 71 | #### [TSLint in 2019](https://medium.com/palantir/tslint-in-2019-1a144c2317a9)  72 | 73 | - 随着TypeScript生态的不断壮大，TSLint也在不断演进，准备提供更多的能力，更加拥抱社区共同发展，和对 ESLint 的兼容，让开发者可以无缝切换 74 | 75 | 76 | #### npm 推出企业版 [npm Enterprise](https://www.npmjs.com/products/enterprise) 77 | 78 | - 主打安全性，提供额外的控制权限，还可以定制CI/CD系统集成流程，可以理解为企业私服，比如阿里内部的tnpm与开放的镜像的cnpm 79 | 80 | 81 | ### Github Trending 82 | 83 | #### 好用的代码片段查看工具 推荐者：[x-cold](https://github.com/x-cold)  84 | 85 | - 将某一个文件的仓库地址的 `github.com` 替换为 `github.githistory.xyz` ，回车即可访问到代码变更的记录。也可以安装浏览器插件 [Chrome](https://chrome.google.com/webstore/detail/github-history-browser-ex/laghnmifffncfonaoffcndocllegejnf) 或 [Firefox](https://addons.mozilla.org/firefox/addon/github-history/)，在某个文件的网页上就能看到一个 `Open in Git History` 的按钮，点击即可。 86 | - ![20190228194645.png](https://cdn.nlark.com/yuque/0/2019/png/103147/1551432272343-4a97aefb-0df2-48c2-8bdd-f0555fbf7479.png#align=left&display=inline&height=48&name=20190228194645.png&originHeight=48&originWidth=420&size=9210&status=done&width=420) 87 | - 对于本地仓库，可以使用命令访问 `npx git-file-history path/to/file.ext`  88 | - Github 仓库：[pomber/git-history](https://github.com/pomber/git-history)  89 | 90 |        
![TB1aeVCKAvoK1RjSZPfXXXPKFXa-2250-1148.gif](https://cdn.nlark.com/yuque/0/2019/gif/103147/1551853326318-c74e199c-a029-4754-a9f1-9367fe9a6810.gif#align=left&display=inline&height=381&name=TB1aeVCKAvoK1RjSZPfXXXPKFXa-2250-1148.gif&originHeight=1148&originWidth=2250&size=7317661&status=done&width=746) 91 | 92 | 93 | 94 | #### 让网站变的透明直到消失的方案 95 | 96 | - 加入 [kleampa](https://github.com/kleampa)/**[not-paid](https://github.com/kleampa/not-paid)** 后，如果设置的日期即将到来，那么网页会逐天变得越来越透明，直到完全消失 97 | 98 | 99 | #### 是时候打造一款属于自己的AI助手了 100 | 101 | - 使用 [leon-ai](https://github.com/leon-ai)/**[leon](https://github.com/leon-ai/leon)**  即可打造属于自己的AI助手 102 | - 安装过程中注意需要某些必要的包：如 `brew install pipenv`  103 | 104 | 105 | ### 工具推荐 106 | 107 | #### Animation in React 108 | 109 | - 使用 React 写动画并不容易，但是借用 `@nearform/react-animation` 提供的组件和预制的 keyframes，就会让动画实现变得轻松起来 110 | - [使用入门文章](https://www.nearform.com/blog/animation-in-react/)  111 | - [@nearform/react-animation in NPM](https://www.npmjs.com/package/@nearform/react-animation)  112 | 113 | 114 | #### Webpack 5 的新特性 115 | 116 | - 介绍了 Webpack 5 即将带来的新特性 [New Features in Webpack 5](https://blog.logrocket.com/new-features-in-webpack-5-2559755adf5e)  117 | - 通过持久缓存提高构建性能 118 | - 代码拆分功能更加强大，更智能的分析模块大小 119 | - Name Chunk ID 不需要在使用注释定义，而是使用如下配置： 120 | ```javascript 121 | optimization: { chunkIds: 'named' } 122 | ``` 123 | 124 | - 尽量遵循在内部作出改变的原则，而不会破坏使用方式 125 | 126 | 127 | ### 热门文章 128 | 129 | #### [给2019前端的5个建议](https://zhuanlan.zhihu.com/p/55357377)  130 | 131 | - 不断学习 Redux/TypeScript 等等，造轮子覆盖全链路，程序员一直在路上 132 | 133 | 134 | #### [近一万字的ES6语法知识点补充](https://juejin.im/post/5c6234f16fb9a049a81fcca5)  135 | 136 | - ES2019 都来了，快来补充学习起来 137 | 138 |   139 | 140 | #### [研发团队资源成本优化实践](https://tech.meituan.com/2019/02/21/rd-team-resource-cost-optimization-practice.html)  141 | 142 | - 主要介绍了成本投入与产出的背景、实践过程中的几个阶段，可以对自己的团队管理进行了一个对照和复盘 143 | 144 | 145 | ### 福利来了 146 | 147 | 春天来了，又到了金三银四的季节，我们是阿里巴巴「研发效能部-体验技术」团队，一个集前端、视觉、交互的综合性团队，致力于阿里集团全球数据中心和DevOps的数字化、自动化、智能化的体验设计和前端体系化建设，打造企业级数据可视化产品、探索未来前沿科技创新产品，这里有酒有故事，就等你来，简历请投：`thomasyang.ypf#alibaba-inc.com`、`longbo.ylb#alibaba-inc.com` 148 | -------------------------------------------------------------------------------- /report/201903.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ![image.png](https://cdn.nlark.com/yuque/0/2019/png/103147/1554174860996-48dafaa4-e8f1-483f-9d05-8ccc91028aa5.png#align=left&display=inline&height=443&name=image.png&originHeight=886&originWidth=1790&size=2086701&status=done&width=895) 4 | 5 | 【Alibaba-TXD 前端小报】- 热门前端技术快报，聚焦业界新视界；不知不觉 2019 年已经过去了 1/4，日新月异的前端技术正在蓬勃发展，[ES10](https://segmentfault.com/a/1190000018311280) 都已到来。 6 | 7 | > 欢迎 [订阅](https://zhuanlan.zhihu.com/txd-team) & [投稿](https://github.com/txd-team/monthly/issues) 8 | > 本期小编：[玙璠](https://github.com/happyliuliu) 9 | 10 | 11 | 12 | ### 学习专栏 13 | 14 | 15 | #### 2019 年前端技术会议 16 | 裕波列出了一份前端技术会议的[清单](https://www.yuque.com/itchina110/giku37/xdzuak)，涵盖国内和海外的重大前端相关的技术会议 17 | 18 | 19 | #### 微软前端训练营 20 | 微软推出另一个前端的学习路径规划，官方提供的[代码仓库](https://github.com/Microsoft/frontend-bootcamp)将一步一步带你走进前端技术领域，囊括基础的 HTML/CSS/JS 学习、TypeScript 强类型、React/Redux 学习和实践等。 21 | 22 | 23 | ### 新闻快报 24 | 25 | 26 | #### 阿里开源 Flutter 应用框架 Fish Redux 27 | [Fish Redux](https://github.com/alibaba/fish-redux) 框架是基于 Redux 数据管理的组装式 Flutter 应用框架，适合用于构建中大型的复杂应用，解决了集中状态管理和UI组件化等问题，将集中，分治，复用，隔离做的更进一步。 28 | 29 | 30 | #### Handtrack.js 搞定手部动作跟踪 31 | 这是一个经过训练的产生的开源模型，而不需要用户自己训练。它隐藏了模型的加载步骤，允许用户在没有任何 ML 经验的情况下检测图像中的手，可以直接在 Web 应用使用该库，[传送门](https://github.com/eduardolundgren/tracking.js)。
![人工智能.gif](https://cdn.nlark.com/yuque/0/2019/gif/137059/1554173440898-750a723a-7f77-4a2b-8be6-4657f6a1e5d5.gif#align=left&display=inline&height=194&name=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD.gif&originHeight=240&originWidth=320&size=3646259&status=done&width=259) 32 | 33 | 34 | #### 小程序多端框架 35 | 如今小程序的发展如日中天，很多公司的业务也都慢慢转向小程序，同时很多应用需要同时兼顾多个小程序平台，所以就有了上层开发框架或者脚手架来优化 DSL 来提高开发效率。其中凹凸实验室从开发体验、兼容性、接入成本、工具链等多个方面对小程序的的多端框架进行了全面的[测评](https://juejin.im/post/5c90eb366fb9a070d4199cc9)，如果准备入坑，可以事先了解一下。 36 | 37 | 38 | #### TWA 让你的 PWA 进入应用商店 39 | TWA（Trusted Web Activity）的发布，是将 Native 的技术扩展到 Web App，将 PWA 站点打包为 Native App 放入应用商店，用户可以在应用商店中搜索安装 PWA 应用，相比国外，PWA 在国内并非很流行，但这并不代表这个技术就不关键。未来可以考虑如何将该技术融入实践中来，[传送门](https://developers.google.com/web/updates/2019/02/using-twa)，这篇[文章](https://www.infoq.cn/article/XTE9WzSL11iHmW*WBozi)也有全面的解析。 40 | 41 | 42 | #### Storybook 5.0 正式发布 43 | Storybook 是一个比较受欢迎的 UI 组件库，为各种视图层（如 React、Vue、Angular、React Native、Ember）提供了结构化的 UI 开发、测试和文档。Storybook 5.0 是目前为止发布的最大的一个版本，新版本的内容包括：全新的开发体验；带有主题的组件库；改进的前端插件架构；全新的[官网](https://storybook.js.org/)。 44 | 45 | 46 | #### Node.js 和 JS 基金会合并为 OpenJS 基金会 47 | Node.js 基金会和 JS 基金会宣布合并为 OpenJS 基金会，将提供一个中立的组织来托管项目并协助资助有益于生态系统的活动，简化基金会日常运营的同时满足个基础架构、技术和营销需求，为 Node.js 和 JavaScript 提供更光明的未来，这也是 JavaScript 发展中的一大步。 48 | 49 | 50 | #### 5G 来了 51 | 从 2G 的发展，到 3G 的的成熟，再到 4G 落地，继而迎接 5G 时代的全面到来。5G 具有极快的传输速度、更高的网络容量、信息可及时触达等特点，也就是高速率、多连体、低时延。这些优势可带动广泛的行业发展，如物联网、视频、全息技术以及无人驾驶等，让我们，拭目以待。 52 | 53 | 54 | #### 996.ICU 55 | 相当火爆的 github 项目 [996.ICU](https://github.com/996icu/996.ICU)，由 IT 工作者对工作制度的反抗，以谋求自己的合法权益的一种特别的方式。不得不感叹的是，随着时代及技术的发展，无产阶级的联合方式也在发生着变化。 56 | 57 | ![加班.gif](https://cdn.nlark.com/yuque/0/2019/gif/137059/1554173440891-46104a73-a778-4813-b116-2d2840e6795f.gif#align=left&display=inline&height=168&name=%E5%8A%A0%E7%8F%AD.gif&originHeight=104&originWidth=129&size=19061&status=done&width=208) 58 | 59 | 60 | #### TSLint -> ESLint 61 | 继和 Babel 合作，使 Babel 支持编译 TS 语法后，TypeScript 团队又发布了新的 Roadmap，将使用 ESLint 来进行 TS 语法的静态类型检查，统一开发体验。TSLint 和 ESLint 团队也纷纷发文，公布未来的计划，TSLint 在被完全集成之前，会保持维护状态，ESLint 中推荐使用 typescript-eslint 来支持 TS 语法的静态类型检查，具体见 [TSLint Roadmap](https://github.com/palantir/tslint/issues/4534)、[The future of TypeScript on ESLint](https://eslint.org/blog/2019/01/future-typescript-eslint) 62 | 63 | 64 | ### 工具推荐 65 | 66 | 67 | #### [Animations when you scroll](https://github.com/alexfoxy/laxxx) 68 | 69 | - 将滚动与动画相结合，使页面更有灵性 70 | - 支持在 DOM、React、VUE 中使用 71 | - 支持多种动画参数配置 72 | 73 | ![lax.gif](https://cdn.nlark.com/yuque/0/2019/gif/137059/1554173440895-2c7ea1b1-3e3c-428b-9c40-fa08b863168c.gif#align=left&display=inline&height=259&name=lax.gif&originHeight=259&originWidth=320&size=634366&status=done&width=320) 74 | 75 | 76 | #### You Dont Need 系列 77 | You Dont Need 系列教程目的在于让读者回归基础，在不依赖一些主流的 util 库的情况下，自己动手去实现库里面提供的核心功能；很多情况下，一些 util 库占用了大量的体积，而且业务中实际使用的部分很少，如果能够手工去实现其中使用到的一些方法，就可以轻松通过移除三方库来提高加载速度了。（然而上规模的项目中，依然建议使用统一的 util 库） 78 | 79 | - [You-Dont-Need-JavaScript](https://github.com/you-dont-need/You-Dont-Need-JavaScript) 介绍了一些常用的组件、动效、甚至功能，在不通过编写 JavaScript 代码的前提下去实现它！ 80 | - [You-Dont-Need-GUI](https://github.com/you-dont-need/You-Dont-Need-GUI) 许多场景下，我们使用命令交互的方式去操作机器（如文件、进程等处理），能大幅提高工作效率。 81 | - [You-Dont-Need-Momentjs](https://github.com/you-dont-need/You-Dont-Need-Momentjs) 介绍了 moment.js 对时间处理的核心功能实现。（通常情况下，我们还是需要一个时间处理库，推荐使用体积更小的 date-fns / dayjs）。 82 | - [You-Dont-Need-Lodash-Underscore](https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore) 常用的一些 util 方法的 JavaScript 实现。 83 | - [You-Dont-Need-jQuery](https://github.com/nefe/You-Dont-Need-jQuery) 去除 jQuery 的一些 Native JavaScript 的方案，一步一步替换 jQuery 的 API。 84 | 85 | 86 | #### TypeScript To WebAssembly 87 | 通常我们都需要将 TypeScript 编译成 ES5 的代码，才能在浏览器中正常运行，[assemblyscript](https://github.com/AssemblyScript/assemblyscript) 是一款 TypeScript To WebAssembly 的编译器，通过 Webassembly 运行编译后的二进制代码。 88 | 89 | 90 | ### 热门文章 91 | 92 | 93 | #### [我在淘宝做前端的这三年](https://zhuanlan.zhihu.com/yujiangshui) 94 | 红了樱桃，绿了芭蕉。文章将在淘宝的三年时光折射为入职、职业规划、招聘、晋升、离职等与我们息息相关的经验分享，值得品读。 95 | 96 | 97 | #### [前端专业方向的尽头](https://mp.weixin.qq.com/s?__biz=MzI5MTA4ODA3NQ==&mid=2247483710&idx=1&sn=cce855fd797f68ef77da424a7809500b&chksm=ec14b29adb633b8ccd4cab9a84adfd89014c96792c799b8501bdaf99bfc3c916dd298ffd62e3&mpshare=1&scene=2&srcid=&from=timeline&ascene=2&devicetype=androi) 98 | 驽马十驾,功在不舍。或是走一条纯专业的探索之路，或是趋向技术管理，这些都是技术人的选择与坚持，也会拥有独一无二的风景。 99 | 100 | 101 | #### [2019年大前端技术趋势深度解读](https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2651014404&idx=2&sn=7ed7c965c10af5463b0ffadd9661ab61&chksm=bdbebd578ac93441467b1d81bc81141f2cecbee0b35dd625c62156d8f6abd33d1bea8661bea6&xtrack=1&scene=0&subscene=131&clicktime=1552918479&ascene=7&devic) 102 | 念过去，望未来。前端的发展日新月异，坚持学习的同时也要保持思辨和平和。 103 | 104 | 105 | ![image.png](https://cdn.nlark.com/yuque/0/2019/png/137059/1554173440911-9bd825a2-0664-4e96-b300-12a855a34e4a.png#align=left&display=inline&height=378&name=image.png&originHeight=1044&originWidth=1080&size=1149092&status=done&width=391) 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /report/201904.md: -------------------------------------------------------------------------------- 1 | ![image.png](https://cdn.nlark.com/yuque/0/2019/png/276025/1556515821434-91b89639-b1b1-446e-a3a2-e625b8a04880.png#align=left&display=inline&height=360&name=image.png&originHeight=360&originWidth=720&size=553714&status=done&width=720) 2 | 3 | 【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏从未停歇，即将流逝的四月里，[Nodejs](https://www.yuque.com/egg/nodejs/nodejs-12) 发布了 v12 版本，[Chrome75](https://addyosmani.com/blog/lazy-loading/) 也将原生支持懒加载……也许是大潮将至，亦或是好事将近，总之，在下还能学！！！ 4 | 5 | > 欢迎 [订阅](https://zhuanlan.zhihu.com/txd-team) & [投稿](https://github.com/txd-team/monthly/issues) 6 | > 本期小编：[佐七](https://github.com/Mavericker-1996) 7 | 8 | 9 | 10 | ## 学习专栏 11 | 12 | #### [2019 前端工程师手册（front-end-handbook-2019）](https://frontendmasters.com/books/front-end-handbook/2019/) 13 | 这个受欢迎的前端详细指南于本年度再次回归。更新了大量有用的资源、学习资料和开发工具。内容非常全面，值得一看。 14 | 15 | 16 | #### [Css Layout Cookbook](https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook) 17 | MDN 官网为前端开发者总结的一些常用布局模块的实现方案。包括面包屑，分页，导航栏等，值得参考。 18 | 19 | ![image.png](https://cdn.nlark.com/yuque/0/2019/png/276025/1556455431352-828407a9-780d-4743-aa43-68042bfcdbb0.png#align=left&display=inline&height=600&name=image.png&originHeight=600&originWidth=696&size=125343&status=done&width=696) 20 | 21 | 22 | #### [11 个教程中不常被提及的 JavaScript 小技巧](https://medium.com/@bretcameron/12-javascript-tricks-you-wont-find-in-most-tutorials-a9c9331f169d) 23 | 本文作者选取了 11 个在我们工作中经常出现却容易被忽略的 JavaScript 小技巧，可以帮助我们更高效的进行编码。 24 | 25 | 26 | #### [45 个值得收藏的 CSS 形状](https://juejin.im/post/5cbd1f0ae51d456e5e035f45#heading-14) 27 | 本文列举了一些我们日常会用到的一些 CSS 形状，值得参考。此外，在Houdini 已经到来的当下，也许一句 --shape: 'triangle' ，即可使用，无需重复编写这些 CSS 形状。
28 | 29 | 30 | ## 新闻快报 31 | 32 | #### [第五届 CSS 大会顺利举行](https://www.yuque.com/cssconf/5th) 33 | 第五届 CSS 大会于 2019 年 3 月 30 日在深圳举办，本次会议共邀请了 7 位演讲嘉宾出席演讲，其中有我们熟悉的大漠，张鑫旭，勾三股四等，为我们分享了一些新时代下的 CSS 技术。 34 | 35 | 36 | #### [Chrome75 将原生支持懒加载](https://addyosmani.com/blog/lazy-loading/) 37 | 过去我们一直通过 js 来实现图片的延迟加载，而 Chrome75 的到来将原生支持该功能。我们可以通过设置 loading 属性来控制浏览器是否延迟加载屏幕外的图像和 iframe。示例代码如下： 38 | 39 | ```javascript 40 | ... 41 | 42 | ``` 43 | 44 | 让我们看一下效果： 45 | 46 | ![lazyload.gif](https://cdn.nlark.com/yuque/0/2019/gif/276025/1556457435267-b0ee9630-61f0-46f8-9a0b-14b4cae6592f.gif#align=left&display=inline&height=772&name=lazyload.gif&originHeight=772&originWidth=1342&size=3336715&status=done&width=1342) 47 | 48 | 49 | 50 | #### [微软发布基于 Chromium 的预览版 Edge](https://mp.weixin.qq.com/s/jrwb7rYy_p9g_L_P8oLASQ) 51 | 2018 年 12 月，微软宣布 Edge 将采用 Chromium，这是由谷歌 Chrome 支持的开源项目，其中包含了不少值得我们期待的新特性像自定义元素和 shaodw dom，javascript 字体加载API等。目前预览版现在已经可以在 Windows 上使用，很快就可以在 Mac 上使用。 52 | 53 | 54 | #### [jQuery 3.4.0 版本发布](http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/) 55 | 4月10 日，jQuery 官博发文宣告 jQuery 3.4.0 正式发布。距离 2018 年 1 月发布 v 3.3.0 版已有一年多了。jQuery 官方表示，这是 3.x 系列的最后一个版本，他们将全力准备 jQuery 4.0。本次更新重点放在一些bug的修理和性能的提升。 56 | 57 | 58 | #### [Nodejs 12发布](https://www.yuque.com/egg/nodejs/nodejs-12) 59 | 时隔一年，Node.js 12 如约而至，正式发布第一个 [Current](https://github.com/nodejs/Release) 版本。（按照当前的节奏一年两更，2063 年我们就能迎来 Node v100 了……） 60 | 61 | 该版本带来了诸如： 62 | 63 | - V8 版本更新带来好多不错的特性； 64 | - HTTP 解析速度提升； 65 | - 启动速度大幅提升； 66 | - 更好的诊断报告和堆分析工具； 67 | - ESM 模块更新； 68 | 69 | 同时 [Node v6](https://nodejs.org/en/about/releases/) 也即将停止维护。 70 | 71 | 72 | #### [第三届 VueConf 将在上海举办](https://vue.w3ctech.com/) 73 | 一年一度的 VueConf 又来啦！VueConf 2018 是在杭州举办的，Vue.js 作者尤雨溪采用了远程参与的方式，给大家带来了精彩了演讲。这一次，VueConf 2019 上海来啦，会议将在 6 月 8 号上海徐家汇华山路举办，尤大将亲临现场，给大家带来主题演讲，赶快点击链接抢票吧！ 74 | 75 | 76 | ## 工具推荐 77 | 78 | #### [Shepherd: Guide Your Users Through a Tour of Your App ](https://shipshapecode.github.io/shepherd/docs/welcome/) 79 | Shepherd是一款便于我们为一款产品做新手指引的工具库，通过一些简单的api就可以实现该功能，目前对于Vue，React，Angular，Ember框架都有支持。 80 | 81 | ![shepherd.gif](https://cdn.nlark.com/yuque/0/2019/gif/276025/1556459532372-fce6df6c-b6b6-4813-9c48-6241afa2a824.gif#align=left&display=inline&height=772&name=shepherd.gif&originHeight=772&originWidth=1342&size=1438302&status=done&width=1342) 82 | 83 | 84 | #### [CloudConvert: 文件格式在线转换平台](https://cloudconvert.com/) 85 | CloudConvert 是一款强大全能格式在线转换云在线应用，支持跨平台。 ... 支持输入文件 URL、Dropbox、Google Drive 文件源或者直接从电脑上传文件进行转换，你只需要一个浏览器就可以使用它，非常方便。 86 | 87 | ![image.png](https://cdn.nlark.com/yuque/0/2019/png/276025/1556507397357-85217ee1-c574-461f-b3df-71e088cf92fa.png#align=left&display=inline&height=1646&name=image.png&originHeight=1646&originWidth=2878&size=765280&status=done&width=2878) 88 | 89 | 90 | #### [Ink: 使用 React 编写命令行界面](https://github.com/vadimdemedes/ink) 91 | Ink 是一款使用 React 风格开发命令行界面应用 (CLI App) 的 Nodejs 工具，也就是说，我们可以使用像 React 那样的方式来组织代码，开发出运行在命令行的工具应用。Ink 2.0 可以无缝支持 React 的某些特性，比如 Hooks 或Context，还可以与 React 生态系统中的其他重要组件（比如 Redux ）发生交互。
官方文档提供了如下的示例： 92 | 93 | ```jsx 94 | import React, {Component} from 'react'; 95 | import {render, Color} from 'ink'; 96 | 97 | class Counter extends Component { 98 | constructor() { 99 | super(); 100 | this.state = { 101 | i: 0 102 | }; 103 | } 104 | 105 | render() { 106 | return ( 107 | 108 | {this.state.i} tests passed 109 | 110 | ); 111 | } 112 | 113 | componentDidMount() { 114 | this.timer = setInterval(() => { 115 | this.setState({ 116 | i: this.state.i + 1 117 | }); 118 | }, 100); 119 | } 120 | 121 | componentWillUnmount() { 122 | clearInterval(this.timer); 123 | } 124 | } 125 | 126 | render(); 127 | 128 | ``` 129 | 130 | 终端上的输出： 131 | 132 | ![](https://cdn.nlark.com/yuque/0/2019/svg/276025/1556507982379-0795e747-d6a0-4631-bda8-435fd2ab8e28.svg#align=left&display=inline&height=250&originHeight=234&originWidth=540&status=done&width=578) 133 | 134 | 135 | ## 热门文章 136 | 137 | #### [我在阿里云做前端](https://zhuanlan.zhihu.com/p/61127760) 138 | “抓住我们核心的竞争力，并同时发现业务中的问题，跨端推进解决，这是最好的出路。” 让我们看看阿里巴巴高级前端技术专家城池大大讲述他过去几年在阿里云的前端经验。 139 | 140 | 141 | #### [Winter 眼中的前端十年：觉醒、全栈、包袱，未来无不可为](https://www.infoq.cn/article/ENA6ooPYgt6*bZieWfCK) 142 | 为什么他能在前端圈如鱼得水？为什么他总能拿到大公司的高薪 Offer？在他眼中：前端 Leader 都该焦虑什么？为什么过去十年是前端觉醒的十年？在杭州家里，本篇文章采访了本期嘉宾 Winter，听他讲述前端行业十年的得与失。 143 | 144 | 145 | #### [使用 Typescript 两年之后，它值得推荐吗](https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247491022&idx=1&sn=0f080050f4bb7c3365d5cfbc1b70bea1&chksm=f951a88dce26219bef53994b7608b21b298324f387863401dc2d7e09d13f56782659a1cfc552&xtrack=1&scene=0&subscene=10000&clicktime=1556444647&ascene=7&devicetype=android-28&version=27000439&nettype=WIFI&abtest_cookie=BAABAAoACwASABMABQAjlx4AVpkeAMGZHgDZmR4A3JkeAAAA&lang=zh_CN&pass_ticket=6FpnjH0Xly5DJAnrxT8RH3mjz5WprMiG89TiVaWcA6eIM1QWBOVLN8KBvrCx5v52&wx_header=1)  146 | Typescript 近两年热度不减，很多大公司都选择去拥抱 TS，但它真的值得被推荐吗？本篇文章站在比较客观的角度从多方面讲述 TS 的优点和缺点。 147 | 148 | ![image.png](https://cdn.nlark.com/yuque/0/2019/png/137059/1554173440911-9bd825a2-0664-4e96-b300-12a855a34e4a.png#align=left&display=inline&height=378&name=image.png&originHeight=1044&originWidth=1080&size=1149092&status=done&width=391) 149 | -------------------------------------------------------------------------------- /report/201901.md: -------------------------------------------------------------------------------- 1 | 重磅消息：GITHUB 宣布私有仓库免费；Jest / Yarn 等大型前端项目纷纷准备迁移到 TypeScript；ES2019 即将到来，你准备好了吗？ 2 | 3 | > 订阅 / 投稿：[https://github.com/txd-team/monthly](https://github.com/txd-team/monthly) 4 | 5 | > 本期小编：[x-cold (尹挚)](https://github.com/x-cold) 6 | 7 | 8 | 9 | ### 新闻快报 10 | 11 | 12 | #### 重磅消息：Github 宣布[私有仓库免费](https://github.com/pricing)，同期还上线了[星标话题](https://github.com/topics) (topics) 的功能 13 | 14 | 2019 年伊始，GitHub 正式宣布开放无限制创建私有存储库，并开始提供统一的企业版 GitHub 服务，微软正在开始加速 toB 企业服务的布局。开发者们一片叫好声，可谓年度最佳的程序员福利了。 15 | 16 | ![](https://cdn.nlark.com/yuque/0/2019/png/103147/1548992494868-94cd1a37-2454-40cd-90bb-7d90c3ad001a.png#align=left&display=inline&height=331&linkTarget=_blank&originHeight=1008&originWidth=1312&width=431#align=left&display=inline&height=573&originHeight=1008&originWidth=1312&width=746) 17 | 18 | 19 | #### 软件技术 B2B 公司 [Idera.inc](https://www.idera.com/) 收购 Travis CI 20 | 21 | Travis CI 将结合 Idera 公司其本身的数据库 / 开发者 / 测试等工具发挥更大的商业优势。不过使用免费版的社区同学也不用紧张，**Travis CI 依然保证对开源软件免费的策略，并且其开源证书不会修改 (MIT)**，更多可以参考详细的[官方公告](https://blog.travis-ci.com/2019-01-23-travis-ci-joins-idera-inc)。 22 | 23 | > 需要额外提醒的是, Travis-CI 对 Github 私有仓库依然没有提供免费的服务。 24 | 25 | 26 | 27 | #### ES2019 即将到来，[新特性](https://github.com/tc39/proposals/blob/master/finished-proposals.md)快速一览 28 | 29 | ![image.png](https://cdn.nlark.com/yuque/0/2019/png/103147/1548992506585-4f3bff27-7235-455e-9808-93e2aad54b1a.png#align=left&display=inline&height=752&linkTarget=_blank&name=image.png&originHeight=2339&originWidth=1080&size=747066&width=347#align=left&display=inline&height=1616&originHeight=2339&originWidth=1080&width=746) 30 | 31 | 32 | #### 越来越多的项目开始迁移到 TypeScript 33 | 34 | MemSQL Studio 的 3W+ 行前端源代码从 Flow 迁移到 TypeScript，主要目的是加强类型的控制，避免动态/弱类型造成运行时的各种问题。官方总结了一篇[文章](https://davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/)，介绍了他们为什么要迁移到 TypeScript，以及迁移过程的记录。 35 | 36 | Fackbook 开源的测试框架 [Jest](https://github.com/facebook/jest) 通过几番的讨论终于从 JavaScript 迁移到使用 TypeScript 构建整个项目了，详细的过程可以查看[关联的 Pull Request](https://github.com/facebook/jest/pull/7554)。 37 | 38 | 1 月 25 日，Yarn 官方团队在 GitHub issue 中宣布将对 Yarn 进行[重大更改](https://github.com/yarnpkg/yarn)，主要包括：将代码库从 Flow 移植到 TypeScript，不再支持 Node 4 和 Node 6，并为 Yarn 新增了一些功能等，这个更改项目代号为 Berry，目的是增强 Yarn 优势，弥补弱势。(本条消息来自 [InfoQ](https://www.infoq.cn/article/eaRb-EzTimF4kfy4dsg7)) 39 | 40 | 41 | #### Midway v1.0 社区 42 | 43 | [Midway](https://github.com/midwayjs/midway) 是一款基于 Egg 和 TypeScript 的 Web 开发框架，由来自淘宝的 MidwayJS 团队开发。用户可以使用丰富的装饰器快速开发，并且引入了 IoC 的概念，统一管理依赖和统一初始化，是一款面向未来的全栈开发方案。 44 | 45 | 46 | #### JavaScript 成为 2018 年最受欢迎的编程语言 47 | 48 | 随着前端领域的迅猛发展，JavaScript 语言已经延伸到更丰富的使用场景中，HackerRank 在社区发起了 2018 年度的开发者调查，其中就包含了编程语言和框架。[调查结果](https://mp.weixin.qq.com/s/buLIpFVHkBb9tYReQyBZlA)显示：JavaScript 在 2018 年度荣获最受欢迎的编程语言。 49 | 50 | 51 | #### 简要讯息 52 | 53 | - npm package [可视化视角](https://anvaka.github.io/pm/#/galaxy/npm?cx=-1345&cy=-7006&cz=-6553&lx=0.6217&ly=-0.6459&lz=0.3098&lw=0.3168&ml=150&s=1.75&l=1&v=2018-11-02T00-00-00Z)，你能找到你发过的 npm 包吗？ 54 | - 「墨者修齐」2018 年可视化[年度总结](https://www.yuque.com/mo-college/weekly/ny35wg)，介绍了各种场景下的可视化产品。 55 | - [SSE Conf](https://seeconf.antfin.com/) 2019 顺利举行，会议相关资料包[下载](https://www.yuque.com/seeconf/content/kbnzac) 56 | - 第十三届 [D2 前端技术论坛](http://d2forum.alibaba-inc.com/)在杭州举行，精彩回顾 [大合集](https://www.yuque.com/d2forum/content/d213) 57 | 58 | 59 | ### Github Trending 60 | 61 | > 洞察 Github 近期 Hot Fresh Repository 62 | 63 | 64 | - [flutter-go](https://github.com/alibaba/flutter-go) 65 | 66 | [flutter](https://github.com/flutter/flutter) 开发者帮助 APP，包含 flutter 常用 140+ 组件的 demo 演示与中文文档，帮助开发者快速上手 Flutter 内部测试中，1.0 正式版将于 2月 20日 发布。 67 | 68 | - [trilium](https://github.com/zadam/trilium) 69 | 70 | Trilium Notes 是一款知识库构建工具，支持无限层级扩展，文档可以挂载到多个节点上，采用所见即所得的编辑方式。体验上个人感觉有点像桌面版本的语雀。 71 | 72 | - [CSS-Inspiration](https://github.com/chokcoco/CSS-Inspiration) 73 | 74 | 国服第一切图仔 [chokcoco](https://github.com/chokcoco) 整理的各种 CSS 技巧，帮助学习 CSS 和寻找灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。 75 | 76 | - [nuclear](https://github.com/nukeop/nuclear) 77 | 78 | 一款高颜值的流媒体资源音乐🎵播放器，支持网络上所有免费的流媒体资源。 79 | 80 | - [vscode-browser-preview](https://github.com/auchenberg/vscode-browser-preview) 81 | 82 | 一款“带给我惊喜”的 vscode 插件，提供给给编辑器实时预览页面的能力，可以将 vscode 打造成更强大的集成开发环境 (IDE) 了。 83 | 84 | ![1548992494875-b282cb53-c06d-40f1-ae4c-d142837e5377.gif](https://cdn.nlark.com/yuque/0/2019/gif/103147/1548992552938-9984fbf1-2e70-4da4-aee2-12b1a68d05d7.gif#align=left&display=inline&height=452&linkTarget=_blank&name=1548992494875-b282cb53-c06d-40f1-ae4c-d142837e5377.gif&originHeight=858&originWidth=1416&size=2200095&width=746#align=left&display=inline&height=452&originHeight=858&originWidth=1416&width=746) 85 | 86 | 87 | ### 精品学习 88 | 89 | 90 | #### TypScript 学习指导 91 | 92 | TypeScript 最近可谓如火如荼，它是 JavaScript 的超集，其最大的特点就是支持了类型系统。其火爆的中最核心的推动力无非是前端工程规模的增长，覆盖端 (服务端 node / deno、移动端等)的扩展，学习和使用 TypeScript 能够让我们更轻松地应付一些复杂的开发场景。 93 | 94 | - 理解类型系统，推荐初级读物 [《A primer of type system》](https://www.cs.uaf.edu/users/chappell/public_html/class/2018_spr/cs331/docs/types_primer.html) 95 | - 入门 TypeScript 语言，参阅官网文档[英文原版](http://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html) /[ 中文译版](https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html) 96 | - 实践参考项目 (starter) 97 | - [TypeScript-Node-Starter](https://github.com/Microsoft/TypeScript-Node-Starter) 98 | - [TypeScript-React-Starter](https://github.com/Microsoft/TypeScript-React-Starter) 99 | - [TypeScript-Vue-Starter](https://github.com/Microsoft/TypeScript-Vue-Starter) 100 | - 大家猜猜为啥没有列出 [Angular](https://angular.io/) ??? 101 | 102 | 103 | #### 「墨者修齐」数据可视化[周刊](https://www.yuque.com/mo-college/weekly) 104 | 105 | 精选文章推荐，可视化入门与进阶权威网站、论文、工具介绍，工程与设计实践分享，2019 年起每周一更新。 106 | 107 | 108 | #### Development 技术播客[列表](https://github.com/rShetty/awesome-podcasts#web-development) 109 | 110 | 涵盖了开发相关的方方面面，包括编程语言、AI、Devops、Web 开发等丰富的课程体系。 111 | 112 | 113 | #### Flutter-learning 114 | 115 | [Flutter-learning](https://github.com/AweiLoveAndroid/Flutter-learning) 整理了 Flutter 相关学习资料，包括 Flutter 安装和配置，Flutter 开发遇到的难题，Flutter 示例代码和模板，Flutter 项目实战，Dart 语言学习示例代码。 116 | 117 | 118 | ### 工具推荐 119 | 120 | - [RunJS](https://projects.lukehaas.me/runjs/) 121 | 122 | 一款可以随手验证你的想法的桌面应用程序，输入 JS 代码片段既可预览执行结果，支持最新的 ES 特性。(PS: 也可以用来当做代码片段备忘录) 123 | 124 | - [image-map](https://www.image-map.net/) 125 | 126 | 在线生成 image maps 的可视化工具，如果你想要绘制简单的局部可交互地图、编写邮件时希望添加链接到图片指定区块上，不妨通过 image maps 这项古老悠久的技术来实现，image-map 是一款在线进行可视化编辑，生成对应的 map / area 代码的工具。 127 | 128 | - [mjml](https://github.com/mjmlio/mjml) 129 | 130 | mjml 是一种用于创建响应式的邮件的标记语言，通过编写语义化的标签，会自动帮助你转换成标准的 html 的代码，并且使用了 table 进行布局，非常适合编写富文本邮件。如果有这方面的需求，不妨进一步试试桌面版的 [mjml-app](http://mjmlio.github.io/mjml-app/) 吧。 131 | 132 | - [terminus](https://github.com/Eugeny/terminus) 133 | 134 | 支持 windows，linux，macos 三端的命令行工具，集成的SSH客户端和连接管理器，可定制化程度非常高。 135 | 136 | 137 | ### 其他 138 | 139 | 最近在 Reddit 看到的前端 vs 后端的一些[对比图](https://github.com/txd-team/monthly/issues/24)，“很是真实”，献上给大家。 140 | 141 | 各位客官猪年大吉呀🌺🌺🌺，祝福新一年里猪事顺利！！！ 另外 2020 年毕业的同学别忘了准备阿里巴巴春季实习生招聘哈，需要内推的同学也可以提前发送附件简历到我的邮箱。 142 | 143 | 144 | ### 附录 145 | 146 | - [《](https://github.com/shengxinjing/programmer-job-blacklist)[程序员找工作黑名单](https://github.com/shengxinjing/programmer-job-blacklist)[》](https://github.com/shengxinjing/programmer-job-blacklist) 147 | --------------------------------------------------------------------------------