├── assets ├── qrcode_feweekly.jpg └── qrcode_wangshijun.jpg ├── LICENSE ├── README.md └── issues ├── Issue-42.md ├── Issue-41.md ├── Issue-43.md ├── Issue-46.md ├── Issue-45.md ├── Issue-44.md ├── Issue-48.md ├── Issue-47.md ├── Issue-60.md ├── Issue-56.md ├── Issue-58.md ├── Issue-63.md ├── Issue-59.md ├── Issue-52.md ├── Issue-50.md ├── Issue-49.md ├── Issue-54.md ├── Issue-61.md ├── Issue-57.md ├── Issue-51.md ├── Issue-53.md ├── Issue-62.md └── Issue-55.md /assets/qrcode_feweekly.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangshijun/feweekly/HEAD/assets/qrcode_feweekly.jpg -------------------------------------------------------------------------------- /assets/qrcode_wangshijun.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangshijun/feweekly/HEAD/assets/qrcode_wangshijun.jpg -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 wangshijun 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 前端周刊 2 | 3 | > 前端周刊，让你在前端领域跟上时代的脚步！聚焦最新的文章、教程、工具、框架、视频，由资深前端工程师为你精选精编。给大家提供的内容除了每周一期的资讯聚合之外，还会有不定期的文章翻译，技术干货放送。 4 | 5 | ## 往届周刊 6 | 7 | * [前端周刊第63期：前端新手如何快速提高？](issues/Issue-63.md) 8 | * [前端周刊第62期：学习学习再学习](issues/Issue-62.md) 9 | * [前端周刊第61期：你离 CTC 有多远？](issues/Issue-61.md) 10 | * [前端周刊第60期：用空格缩进的程序员挣得更多？](issues/Issue-60.md) 11 | * [前端周刊第59期：选 Flow 还是 TypeScript？](issues/Issue-59.md) 12 | * [前端周刊第58期：送你 3 道面试题](issues/Issue-58.md) 13 | * [前端周刊第57期：《战争与和平版》的 CSS-IN-JS 黑历史](issues/Issue-57.md) 14 | * [前端周刊第56期：应接不暇的技术大会](issues/Issue-56.md) 15 | * [前端周刊第55期：10X 程序员？](issues/Issue-55.md) 16 | * [前端周刊第54期：Prepack 引发社区小高潮](issues/Issue-54.md) 17 | * [前端周刊第53期：React 社区的撕逼](issues/Issue-53.md) 18 | * [前端周刊第52期：React Native 路由管理、样式管理](issues/Issue-52.md) 19 | * [前端周刊第51期：1000个包的男人 + Vue.js + React Native](issues/Issue-51.md) 20 | * [前端周刊第50期：React 状态管理 + Vue.js 作弊条 + 命令行技巧](issues/Issue-50.md) 21 | * [前端周刊第49期：React 和 Vue.js SSR 框架 + 微信小程序 + Grid 布局](issues/Issue-47.md) 22 | * [前端周刊第48期：Vue Conf 2017 + Progressive WEB APP](issues/Issue-47.md) 23 | * [前端周刊第47期：Vue.js 后台模板 + React Conf 2017 + 饿了么面试宝典](issues/Issue-47.md) 24 | * [前端周刊第46期：Vue.js + VSCode + 程序员防骗指南](issues/Issue-46.md) 25 | * [前端周刊第45期：Node.js API 最佳实践、AWS CaseStudy](issues/Issue-45.md) 26 | * [前端周刊第44期：JS 新概念词典、TypeScript 免费好书、SHA1 可被破解](issues/Issue-44.md) 27 | * [前端周刊第43期：前端工程师手册2017版](issues/Issue-43.md) 28 | * [前端周刊第42期：Vue.js 组件编写原则](issues/Issue-42.md) 29 | * [前端周刊第41期：浏览器预加载机制探秘](issues/Issue-41.md) 30 | 31 | ## 同步平台 32 | 33 | ### 知乎专栏 34 | 35 | 每期的内容也会同步发送在[知乎专栏](http://zhuanlan.zhihu.com/feweekly)上。 36 | 37 | ### 微信订阅号 38 | 39 | 想直接在微信中订阅前端周刊？扫下方二维码关注前端周刊订阅号。 40 | 41 | ![feweekly](./assets/qrcode_feweekly.jpg) 42 | 43 | ### 面对面交流 44 | 45 | 想和我面对面交流？扫下方二维码添加我为好友。 46 | 47 | ![wangshijun](./assets/qrcode_wangshijun.jpg) 48 | 49 | Happy Hacking 50 | 51 | -------------------------------------------------------------------------------- /issues/Issue-42.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第42期 2 | 3 | > 很高兴跟大家宣布，前端周刊本周起恢复，频率仍然是每周一期，下面是本周收集到的不错的文章、教程、工具或业界动态，请享用。除了邮件分发之外，之后每期还会同步发送到简书上，方便国内同学阅读。 4 | 5 | ### 文章教程 6 | 7 | #### [Vue.js 组件编写原则](https://github.com/pablohpsilva/vuejs-component-style-guide) 8 | 9 | 总结了部分 Vue Component 编写最佳实践，如果你正在学 Vue 但是发现自己的代码写的不怎么优雅，这就是良药！ 10 | 11 | #### [Ionic 2 vs ReactNative vs NativeScript](http://www.discoversdk.com/blog/ionic-2-vs-reactnative-vs-nativescript) 12 | 13 | 前端可用的 APP 开发技术哪家强？从多个方面跟你比较这三个开发框架的优劣，到底哪个好？可能还需要你自己上手试试才知道。如果时间有限，这里面的比较思路应该会对你有些启发，貌似少了国内的 Weex、微信小程序。 14 | 15 | #### [给所有开发者的 React Native 详细入门指南](http://www.jianshu.com/p/fa0874be0827) 16 | 17 | 首次收录来自简书的文章，如果你最近在开发 React Native，这篇文章应该能节省你不少时间，涵盖环境搭建、基本的开发调试技巧。 18 | 19 | ### 代码框架 20 | 21 | #### [字段校验利器：express-validator](https://github.com/ctavan/express-validator) 22 | 23 | 使用了 express 来写后端但是还在自己编写字段校验逻辑？使用 express-validator 能大量减少你的重复工作，内置了不少插入即用校验器，还支持扩展，赶快收下吧。 24 | 25 | #### [Element：来自饿了么的网站快速成型工具](http://element.eleme.io/#/zh-CN/component/collapse) 26 | 27 | Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么前端团队提供。 28 | 29 | ### 找找灵感 30 | 31 | #### [请收好：一箩筐免费的 Bootstrap 模板](https://www.creative-tim.com/) 32 | 33 | 这个设计师的风格非常的清新简洁，目测还是个前端开发者，自己开发了网站来展示（销售）自己的作品，里面包含了大量基于 Bootstrap 的网页模板，多数是免费的，如果你需要最好的，也可以付费。 34 | 35 | ### 视频演讲 36 | 37 | #### [手把手教你把 Vue 单页应用打包成 PhoneGap APP](https://www.youtube.com/watch?v=R6MmXfgh4tQ) 38 | 39 | Vue 2016年被前端开发者广泛使用，用它来做 WebAPP 自然也不在话下，视频里的哥们手把手的教你把 WebAPP 打包成 PhoneGap APP，应用形式是类似 Twitter 的产品。需要翻墙~ 40 | 41 | ### 精彩问答 42 | 43 | #### [如何不使用 JS 在表单提交时发送邮件？](http://stackoverflow.com/questions/12626940/mailto-on-submit-button) 44 | 45 | 可能你的网站要上线了，在此之前你做了一个 Coming Soon 的页面，上面会让感兴趣的用户留下邮箱，好在网站上线的时候第一时间通知他们，没有后台的时候怎么做呢？其实可以直接在浏览器里调起邮件发送，并且设定好接收人、主题、内容。 46 | 47 | #### [NodeJS 是导入 Native 模块究竟是怎么工作的？](https://blog.ghaiklor.com/how-nodejs-requires-native-shared-objects-63648092f178#.s4m7h860b) 48 | 49 | 你知道 NodeJS require 的时候究竟做了什么吗？从网上的只言片语可能有些模糊的认识，那么它 require native 模块的时候是怎么工作的呢？这篇文章使用大量的源代码片段和推理为你做了详尽的解释。 50 | 51 | ### 技术动态 52 | 53 | #### [Twitter 移动站已经使用迁移到 NodeJS](https://twitter.com/necolas/status/829128165314306048) 54 | 55 | 来自 Twitter 的动态，他们的移动站现在使用 NodeJS + Express 做后端，前端使用 React + PWA，这里面有几个名词不知道的自己去搜索，下面的讨论也有些看头。 56 | 57 | #### [Next.js 大版本升级就要来了](https://jsmantra.com/next-on-next-js-1a134505f346#.zfmpoyjsw) 58 | 59 | Next.js 是啥呢？可能大多数同学还没听过，简单说他是一个让你使用 React 快速开发带有服务端渲染功能的应用的框架。版本 2 相比较版本 1 有大量的改进，包括性能、动态路由支持等，如果你还在自己拼凑服务端渲染的框架，直接用这个吧。 60 | 61 | ### One More Thing 62 | 63 | 想直接在微信中订阅前端周刊？扫下方二维码关注前端周刊订阅号。 64 | 65 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 66 | 67 | 每期的内容也会同步发送在知乎专栏[前端周刊](http://zhuanlan.zhihu.com/feweekly)上。 68 | 69 | Happy Hacking 70 | -------------------------------------------------------------------------------- /issues/Issue-41.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第41期 2 | 3 | > 哈哈，内容周五已经准备好了，但是忘记点发送了，今早上发出，请享用~ 4 | 5 | ### 文章教程 6 | 7 | #### [手把手教你玩转 Github Pages](http://24ways.org/2013/get-started-with-github-pages/) 8 | 9 | 有人说 Github 就是工程师的简历，然而一图胜千言，在程序员的世界里，一个能运行的 Demo 胜过千行万行的代码和文档，相信不少同学有注意到很多 GitHub 上的仓库利用 GitHub 本身提供的功能能够展示 Demo，也有人利用 GitHub 搭建自己的免费博客，到底是如何做的？搞懂这些，详细你会更喜欢 GitHub~ 10 | 11 | #### [必读：可扩展 CSS 的方法论大搜罗](https://github.com/davidtheclark/scalable-css-reading-list) 12 | 13 | 该仓库围绕可扩展 CSS 这个主题的不少思路和解决办法，有些现在已经被广泛使用，比较有名的有 OOCSS、BEM、SMACSS 等，CSS 虽然简单，但是项目打了让你头疼的地方还不少，到这里来取取经吧，看看如何提高 CSS 代码的可维护性、可扩展性~ 14 | 15 | #### [论 Node 应用的持续部署](http://blog.risingstack.com/continuous-deployment-of-node-js-applications/) 16 | 17 | 自动化能给工程师节省非常多的时间和经理，这篇文章讨论持续部署需要解决的问题和好处，并且以 Node 应用为例说明~ 18 | 19 | ### 开发工具 20 | 21 | #### [SSHRC：带上你的终端配置去旅行](https://github.com/Russell91/sshrc) 22 | 23 | 喜欢用 Linux 命令行或者倒腾或服务器的同学肯定经常遇到需求，我 SSH 到陌生的远程机器，但是我很熟悉的 bash，vim配置都没有了，需要在那个机器上重新搞？有了 SSHRC，你就可以带上你的终端配置去旅行啦~ 24 | 25 | #### [MongoUI：类 phpMyAdmin 的数据库后台](http://webapplog.com/mongoui/) 26 | 27 | MongoUI 是基于 Node 开发的类似于 phpMyAdmin 的 MongoDB 数据库管理后台，整体使用 BS 搭建，界面小清新，觉得在命令行中操作 MongoDB 很麻烦的同学快收下吧~ 28 | 29 | ### 代码框架 30 | 31 | #### [TableSaw：响应式表格插件合集](https://github.com/filamentgroup/tablesaw) 32 | 33 | 该仓库收集了很多响应式表格的 jQuery 插件，支持多种响应式表格的展示模式：比如单行变多行，表头选择，表格导航地图等等，做移动页面的东西可以看看，如果用不上，相信也能找找灵感~ 34 | 35 | #### [ACL：基于 Node 的权限控制组件](https://github.com/optimalbits/node_acl) 36 | 37 | 应用变大之后，自然免不了出现用户、角色之类的需求，伴随而来的就是权限控制的问题，同样的资源哪些人不能访问，哪些人能访问？ACL 对这块做了很好的抽象，可以很方便的指定角色的权限规则，并且支持多种会话存储方式，结合上 Express 和 Passport，相信能为你节省不少开发时间~ 38 | 39 | #### [Font Awesome Animation](http://l-lin.github.io/font-awesome-animation/) 40 | 41 | 利用 CSS3 让你的 Font Awesome 图标动起来，使用的是自己的 IconFont 库？没关系，学会他的实现思路就可以了~ 42 | 43 | #### [Hello.js：基于 OAuth 的浏览器端用户认证 SDK](http://adodson.com/hello.js/#hellojs) 44 | 45 | 开发浏览器端的单页面应用时常常会碰到接入各种第3放认证或者用户登陆的需求，比如 Google、GitHub、Twitter 等，每次都要去搜索这些 API 的文档，然后写大段的代码？Hello.js 把这些重复性的脏活累活帮你干完了，只需简单的 API 调用，遍能够快速实现各种第 3 方认证的接入，不过目前针对国内服务的插件还比较少，有兴趣的同学可以扩展~ 46 | 47 | ### 视频演讲 48 | 49 | #### [浏览器预加载机制探秘](http://www.slideshare.net/AndyDavies/london-web-standards-20140922-pdf) 50 | 51 | 了解浏览器的预加载机制么？为什么会存在这种机制？到底如何工作？看看这个演讲稿，你能了解个大概~ 52 | 53 | ### 精彩问答 54 | 55 | #### [Express：如何为路由增加命名空间？](http://stackoverflow.com/questions/17173286/how-to-mount-app-get-routes-on-a-particular-path-prefix) 56 | 57 | Express 4 中对 Router 做了比较大的改进，可以为路由的 URL 增加命名空间了，浏览下这个问题的答案，你就知道具体怎么搞了~ 58 | 59 | #### [如何不用 Cookie 存储 GA 的数据？](http://davidmurdoch.com/2014/09/22/google-async-analytics-using-localstorage/) 60 | 61 | 用过 GA 的同学大概都知道，GA 对于 Session 的追踪是依赖 Cookie 的，这样产生的 Cookie 在你的主域上发生的每次请求都会带上，如果你的网站访问量很大，这个算下来还是个不小的带宽消耗呢，不光耗带宽，还可能影响网站性能哦，那么有什么优化办法？可以用 LocalStorage 存储这些数据，这篇文章指明了解决方案~ 62 | 63 | ### One More Thing 64 | 65 | 想直接在微信中订阅前端周刊？扫下方二维码关注前端周刊订阅号。 66 | 67 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 68 | 69 | 每期的内容也会同步发送在知乎专栏[前端周刊](http://zhuanlan.zhihu.com/feweekly)上。 70 | 71 | Happy Hacking 72 | -------------------------------------------------------------------------------- /issues/Issue-43.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第43期：前端工程师手册2017版 2 | 3 | > 嘿嘿，本期开始前端周刊的内容会同步发布在名称都为《前端周刊》的微信公众号、知乎专栏、简书专栏上，欢迎大家根据自己方便的方式去订阅，邮件也会继续发送。下面是第 43 期内容，请享用！ 4 | 5 | ### 文章教程 6 | 7 | #### [前端工程师手册 2017 版](https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/) 8 | 9 | 托管在 gitbook 上可以免费阅读的开源书籍，内容涵盖前端的基础知识，前端最佳实践，前端工作流，里面收录了非常全面的前端工程师工具，如果你想把前端功夫修炼的出神入化，这本书就是你的行动指南。 10 | 11 | #### [Google Analytics 追踪脚本的正确使用姿势](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/) 12 | 13 | 相信不少前端同学或者站长都是用 Google Analytics 来追踪和分析自己网站的访客，如果你还仅仅是嵌入了官方提供的那一段代码，赶紧学习下这个吧，如何做 Google Analytics 做错误追踪、性能统计，甚至自动化事件发送。 14 | 15 | ### 开发工具 16 | 17 | #### [vm2：更优秀的 NodeJS vm/sandbox 机制](https://github.com/patriksimek/vm2) 18 | 19 | 因为业务需要，研究了下如何在 NodeJS 中运行用户输入的代码，比如让他自己定义某个字段的计算公式，然后在业务后台根据这个计算公式去计算另外一个指标，发现了 内置的 vm 模块基本满足需求，本文的 vm2 更强大，支持模块导入、输出控制、代码预编译等特性。 20 | 21 | #### [git-pr：管理 Pull Request 的小工具](https://gist.github.com/gnarf/5406589) 22 | 23 | git-pr 是一个很简单的小工具，能帮你在管理 Pull Request 的时候去掉部分重复工作，比如 checkout 远程的 pr 分支，清理本地的分支等等。工程师的效率很大程度上取决于他用的工具，快用这个武装自己吧。 24 | 25 | ### 代码框架 26 | 27 | #### [Awesome Angular 2+ Components](https://github.com/brillout/awesome-angular-components) 28 | 29 | 这是一篇 Awesome 系列仓库，里面收录了 50+ Angular 2+ 的组件，还做了详细的分类：涵盖样式、布局、交互组价、数据状态管理、性能、项目脚手架等，如果你是 Angular 的老用户，可以来这里开开眼，看是否在重复造轮子，是否有比你造的还好的轮子。 30 | 31 | #### [React Native Hackathon Starter Project](https://github.com/dabit3/react-native-hackathon-starter) 32 | 33 | React Native 的种子文件，里面包含文件组织方式，各种命令，集成了 React-Native-Element，支持 Android 和 iOS 平台，非常适合快速的开始 1 个 React Native 应用，他的起名就是为黑客马拉松准备的。对于公司级的项目，可以参考另外 1 个脚手架工具 ignite，自己去搜。 34 | 35 | #### [Tether：精巧的网页元素定位库](http://tether.io/) 36 | 37 | 我首次注意到 Tether 是在浏览 Bootstrap 4 的网站发现的，Tether 是一款非常小巧、灵活、强大的网页元素定位库，调用的语法也非常的语义化，体积非常小，Bootstrap 都使用了，你应该也看看。 38 | 39 | ### 找找灵感 40 | 41 | #### [Github：开源项目参与指南](https://opensource.guide/) 42 | 43 | 可以说没有 Github 就没有前端领域的蓬勃发展，目前大家所熟知的开源项目基本都托管在 Github 上面，那么如何参与开源项目？如何自己主导开源项目？如何写作？如何管控代码质量？如何运营开源项目社区？这些问题都在这份指南中有非常具体的指导。 44 | 45 | #### [Cheat-Sheet：自定义浏览器资源调度行为的几种方式](https://twitter.com/addyosmani/status/743571393174872064) 46 | 47 | 可能不少同学听说过 preconnect、preload、prefetch、prerender 、dns-prefetch 这些名词，他们究竟是用来做什么的？有什么用？什么场景下适合使用？怎么使用？来自 Andy Osmani 的 Cheat Sheet 给你解释的一清二楚。 48 | 49 | ### 视频演讲 50 | 51 | #### [React Native 最佳技术演讲视频合集](https://github.com/tiaanduplessis/awesome-react-native-talks) 52 | 53 | 又一篇 Awesome 系列文章，整理了很多 React Native 相关的视频，主题涵盖性能优化、技术决策，实现原理等，适合 E 文好且有时间慢慢消化的同学看。 54 | 55 | ### 精彩问答 56 | 57 | #### [Base64 编码到底好还是不好？](https://csswizardry.com/2017/02/base64-encoding-and-performance/) 58 | 59 | 做过前端性能优化的同学可能都知道某些时候为了减少网络请求的数量，会把页面中内联或者 CSS 中需要的图片做 base64 编码，但是这样做到底好还是不好？如果不好，是因为什么原因？都做了非常详细的分析。 60 | 61 | #### [为什么文件名要小写？](http://www.ruanyifeng.com/blog/2017/02/filename-should-be-lowercase.html) 62 | 63 | 文件名要小写的原因分析，仔细看看，或许能给你以后少挖些坑。来自阮一峰。 64 | 65 | #### [如何避免 iTerm 中的 SSH 会话出现 broken pipe？](https://twitter.com/arrix/status/2386444332) 66 | 67 | 使用 iTerm SSH 链接到远程服务器，空闲几分钟之后你会发现，链接被自动断开了，需要手动重连。有没有自动化的办法保持会话是活动状态呢？答案肯定是有，这篇文章里面就有答案，配置非常简单。 68 | 69 | ### One More Thing 70 | 71 | 想直接在微信中订阅前端周刊？扫下方二维码关注前端周刊订阅号。 72 | 73 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 74 | 75 | 每期的内容也会同步发送在知乎专栏[前端周刊](http://zhuanlan.zhihu.com/feweekly)上。 76 | 77 | Happy Hacking 78 | -------------------------------------------------------------------------------- /issues/Issue-46.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第46期：Vue.js、Visual Studio Code、程序员防骗指南 2 | 3 | > 本期内容中 Vue.js 和 Visual Studio Code 的内容比重偏大，关注我知乎专栏的同学可以从我接下来的发文中找到原因，我每周会发布 1~2 篇高质量的技术文章到知乎专栏，欢迎大家订阅。以下是本期内容，请享用。 4 | 5 | ### 文章教程 6 | 7 | #### [从零开始构建 JavaScript 技术栈](https://github.com/pd4d10/js-stack-from-scratch) 8 | 9 | 这是 JavaScript Stack from Scratch 的中文版，由我们团队高级前端荣剑同学翻译成中文：这是个简单直接的 JavaScript 技术栈构建指南。在此之前，你需要掌握基本的编程知识和一些 JavaScript 基础。本教程旨在将所有现代 JS 技术栈结合起来使用，并为每个工具提供最简单的示例。你可以把它当作从零开始编写代码样板的示范。 10 | 11 | #### [你不得不知的 package.json 常识](https://nodesource.com/blog/the-basics-of-package-json-in-node-js-and-npm?utm_source=nodeweekly&utm_medium=email) 12 | 13 | 可以说 package.json 是整个 npm 社区和生态的核心要素，你可以认为他是包、模块的规格说明，其中的字段都是什么含义，应该如何使用，懂了这些，你的 Node.js 才算是入门。 14 | 15 | #### [基于 Loopback 开发一个完整的 Rest API Server](https://blog.optis.be/developing-a-complete-rest-api-with-loopback-a3190edc105a#.qgjfxjwww) 16 | 17 | Loopback 非常适合用来开发 API Server，他独有的 API Explorer 能够让你直观的了解系统所提供的所有接口，需要的参数。这篇文章教你基于 Loopback 开发一个完整的露营预定服务端，从脚手架到数据校验、安全、存储都有涉及。 18 | 19 | ### 开发工具 20 | 21 | #### [husky：把 githooks 集成到你的工作流](https://github.com/typicode/husky) 22 | 23 | husky 和 ghooks 类似，能帮你把各种检查真正的落实到代码提交和推送工作流，安装使用非常简单，非常多的开源项目在使用它做简单的质量控制。 24 | 25 | #### [Visual Studio Code 的奇技淫巧](https://github.com/Microsoft/vscode-tips-and-tricks) 26 | 27 | 微软官方整理的，Visual Studio Code 的各种技巧，覆盖的面还比较广，包括快捷键、插件安装、主题设置、编程字体等。 28 | 29 | #### [Awesome：Visual Studio Code](https://github.com/viatsko/awesome-vscode) 30 | 31 | Visual Studio Code 在国外的开发者群体中已经非常的受欢迎，它的智能感知功能更是让很多工程师爱不释手，极大的提高了开发效率。这又是个 Awesome 仓库，里面整理了把 Visual Studio Code 编辑器发挥到极致需要的各种配置、插件。 32 | 33 | #### [legit：快速为你的代码添加版权头](https://github.com/captainsafia/legit?utm_source=nodeweekly&utm_medium=email) 34 | 35 | 说程序员是天生懒惰的动物，一点不假，legit 就是这样的一个工具，能快速的为你的代码添加版权文件头，让你不能费劲的去复制粘贴。 36 | 37 | ### 代码框架 38 | 39 | #### [flatpickr：简洁的轻量级日期时间选择器](https://github.com/chmln/flatpickr) 40 | 41 | 开发大型 WEB 应用少不了会有日期时间选择的交互，flatpickr 是一款扁平化设计的，现代简约风格的日期时间选择器，代码无依赖，体积相比 Bootstrap 和 jQuery UI 的那套小了不止一点点。 42 | 43 | #### [SQLite Parser：JS 实现的语法解析器](https://github.com/codeschool/sqlite-parser) 44 | 45 | sqlite-parser 是基于 peg.js 实现的兼容 sqllite 3 语法的解析器，简单的说就是能把 sql 语句解析成现成的语法树，有个这东西你能做很多事情，比如在人人车，我们基于他做了非常灵活的业务配置系统。 46 | 47 | #### [iView：高质量的 Vue.js UI 组件库](https://www.iviewui.com/) 48 | 49 | iView 是 一套高质量的 Vue.js UI 组件库，纯国产，相信国内的同学用起来会非常顺手，近期发布了 V2 版本，其中包含了命令行工具，能快速开始新项目。至于组件库的构成就不多说了，不输入社区中其他的组件库，甚至更丰富。 50 | 51 | ### 找找灵感 52 | 53 | #### [基于 vue2 + vuex 构建的有 45 个页面的大型单页面应用](https://github.com/bailicangdu/vue2-elm) 54 | 55 | 基于 vue2 + vuex 构建的有 45 个页面的大型单页面应用，初学入门的同学接触最多的的是各种 hello world 程序，而 bailicangdu 花了两个月时间用 vuejs 几乎把饿了么的页面写了个遍，正在学 vue.js 的同学可以研究研究。 56 | 57 | ### 技术动态 58 | 59 | #### [Safari 终于支持 performance timing](https://twitter.com/webkit/status/839540260111593472) 60 | 61 | Safari 的最新技术预览版已经开始支持 performance timing，这对那些使用 performance timing 采集性能数据的同学来说，是好消息，因为这部分用户的数据采集不再需要 hack 了。当然目前是还在技术预览版中，不久之后才登陆正式版。 62 | 63 | #### [Chrome 开发者工具可以贴在屏幕左侧](https://twitter.com/addyosmani/status/838782825994182656) 64 | 65 | 有没有因为 Chrome 开发者工具的面板只能贴在屏幕的右边或下边而感到不顺手？好消息是最新版的 Chrome 开发者工具支持把面板贴在屏幕左侧了，可以更新尝鲜。 66 | 67 | ### 职位招聘 68 | 69 | #### [程序员找工作黑名单，已惊呆](https://github.com/shengxinjing/programmer-job-blacklist) 70 | 71 | 首先承认这不是招聘贴，说实话看到这个的时候我也笑喷了，不过每隔一段时间网上就会爆出程序员因跟老板不和并且利益没有保障的案例，有心人很快就整理了这个：程序员找工作黑名单，换工作和当技术合伙人要谨慎，希望对各位能有帮助。 72 | 73 | ### One More Thing 74 | 75 | 如果对文中的内容有任何疑问，欢迎留言讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/p/25644447)。 76 | -------------------------------------------------------------------------------- /issues/Issue-45.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第45期：Node.js API 最佳实践、AWS CaseStudy 2 | 3 | > 这周发生了很多大事，百度挂完亚马逊挂，斯坦福还准备开 JS 课程，看来订阅这份周刊的同学都没入错行。先纠正我之前的一个错误，就是对于 Node.js 的叫法，有写过 NodeJS 的，也有写过 Node 的，但是官方的叫法是 Node.js。下面是本周的精彩内容，请享用！ 4 | 5 | ### 文章教程 6 | 7 | #### [编写 Node.js Rest API 的 10 个最佳实践](https://zhuanlan.zhihu.com/p/25506654) 8 | 9 | Node.js 除了用来编写 WEB 应用之外，还可以用来编写 API 服务，本文会介绍编写 Node.js Rest API 的最佳实践，包括如何命名路由、如何选择框架、如何进行认证和测试、如何发送元数据等话题。翻译自 RingStack。 10 | 11 | #### [Node.js 最新 WEB 技术栈](https://cnodejs.org/topic/56fdf66ec5f5b4a959e91771) 12 | 13 | 由 Node.js 领域的狼叔整理，里面涵盖了使用 Node.js 开发 WEB 应用的方方面面，按照他的路线图，要不了多久，你也能成为 JS 全栈工程师。 14 | 15 | ### 开发工具 16 | 17 | #### [Lerna：帮你管理包含多个 package 的 JS 项目的工具](https://lernajs.io/?utm_source=nodeweekly&utm_medium=email) 18 | 19 | Lerna 是一款能够帮你管理包含多个 package 的 JS 项目的工具，能够带来的便利是主 package、子 package 发版的管理，可能部分同学没有这种痛点，但是如果你留心过大型的开源项目比如 webpack、babel 等的源代码就会发现，这些项目都包含很多个 package，他们都用了 Lerna。 20 | 21 | ### 代码框架 22 | 23 | #### [Store.js：跨浏览器的通用浏览器端存储方案](https://github.com/marcuswestin/store.js) 24 | 25 | Store.js 是跨浏览器的浏览器端通用存储解决方案，会根据浏览器的支持情况智能选取最合适的存储介质，目前发布了 2.0 版本，对于开发单页应用的同学来说，是非常值得看看的。 26 | 27 | #### [CSSIcon：使用纯 CSS 实现的图标库](https://github.com/wentin/cssicon) 28 | 29 | 这是使用纯 CSS 实现的图标库，没有任何依赖，你可以直接把 CSS 复制粘贴了拿去用，里面包含了不少常用的其他图标库需要依赖字体或者图片才能实现的图标，对动画的支持当然不在话下。 30 | 31 | #### [HyperApp：小巧的、类 Elm 架构的 WEB 应用构建框架](https://github.com/hyperapp/hyperapp) 32 | 33 | HyperApp 是小巧的、类 Elm 架构的 WEB 应用构建框架，主要特性为声明式、无状态、内置 JSX 支持。小巧到什么程度呢？无任何依赖，只有 1KB 大小。喜欢折腾的同学可以看看。 34 | 35 | #### [Node.js 中角色和权限功能相关的库](https://gist.github.com/facultymatt/6370903) 36 | 37 | 现代软件系统不管是面向用户的还是企业内部的，权限控制都会是不可或缺的一部分，这篇 gitst 收录了 Node.js 中跟角色权限相关的各种库，包含了多种实现的模型。 38 | 39 | ### 找找灵感 40 | 41 | #### [Vue.js NewsLetter](https://www.getrevue.co/profile/vuenewsletter) 42 | 43 | 类似于前端周刊的，但是主题聚焦在 Vue.js 方面，Vue.js 这款国产框架最近1年被采用的势头非常的迅猛，如果你正在学习，这个不容错过！里面也是收录了大量的内容，不过是英文的。 44 | 45 | ### 视频演讲 46 | 47 | #### [QQ 会员活动运营平台架构设计实践](http://hansionxu.blog.163.com/blog/static/2416981092016295202426/) 48 | 49 | 腾讯技术大牛在 SDCC 上所做的分享，详细展示了 QQ 会员活动运营平台架构设计实践，面临的挑战、解决方案，容量、安全、效率等方面的考量。如果想成为前端架构师，这种学习不可少！ 50 | 51 | ### 精彩问答 52 | 53 | #### [图片的 display 设置为 none 到底会不会下载？](https://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading) 54 | 55 | 很多同学可能会认为，把图片的样式属性 display 设置为 none 浏览器就不会下载他了，我最近发现业务上有个加载慢的页面就是因为这种认识导致的，实际上结果不是二分的，而是随着浏览器的进化答案不同。 56 | 57 | #### [如何优化 CPU 密集型的 Node.js 应用？](https://medium.com/@graeme_boy/how-to-optimize-cpu-intensive-work-in-node-js-cdc09099ed41#.efm219a5y) 58 | 59 | 通常来说 Node.js 只适合于开发 IO 密集型的应用，但是有时候你可能也会拿他来开发 CPU 密集型的任务，这种情况下也是有办法来进行一些优化，来实现更高的性能的，这篇文章帮你解惑。 60 | 61 | #### [JS 中的 void 到底有啥用？](http://cmichel.io/javascript-void-keyword/) 62 | 63 | JS 中的 void 到底有啥用？没见过？这次算是开眼，见过？那你知道他是用来干嘛的么？这篇文章都给你解释清楚了。 64 | 65 | ### 技术动态 66 | 67 | #### [斯坦福大学准备使用 JS 来做计算机入门课程](http://www.stanforddaily.com/2017/02/28/cs-department-updates-introductory-courses/) 68 | 69 | 有人预言说，能用 JS 写的，最终都会用 JS 写，我印象中国内外没有一家学校开设了 JS 或者前端课程，但是斯坦福大学走在了前面，准备采用 JS 作为计算机科学导论的编程语言，并为此做好了充分准备。 70 | 71 | #### [AWS 的 S3 故障回顾和思考](http://coolshell.cn/articles/17737.html?from=timeline&isappinstalled=0) 72 | 73 | 继 GitLab 的误删除数据事件没几天，“不沉航母” AWS S3 几天前也“沉”了 4 个小时，墙外的半个互联网也跟着挂了。按 AWS 惯例，AWS 今天给出了一个简单的故障报告，简单来说这个故障和 GitLab 一样，也是人员误操作，他们是什么态度？后续怎么解决、完善？相信很值得借鉴。 74 | 75 | #### [Visual Studio Code V1.10 发布](https://code.visualstudio.com/updates/v1_10#_preview-minimap) 76 | 77 | Visual Studio Code 可以说是微软发力之后的奋起直追，目前已经在前端开发者中占有了不小的时长份额，本次发版包含了大量改进，比如：Minimap 给你提供代码的鸟瞰图、编辑器内的文本拖拽支持、自动生成 JSDoc 等。 78 | 79 | ### One More Thing 80 | 81 | 想直接在微信中订阅前端周刊？扫下方二维码关注前端周刊订阅号。 82 | 83 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 84 | 85 | 每期的内容也会同步发送在知乎专栏[前端周刊](http://zhuanlan.zhihu.com/feweekly)上。 86 | 87 | Happy Hacking 88 | 89 | -------------------------------------------------------------------------------- /issues/Issue-44.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第44期：JS 新概念词典、TypeScript 免费好书、SHA1 可被破解 2 | 3 | > 哈哈，从本周开始，我会每周翻译一篇精彩的英文文章同步发布到知乎专栏和微信公众号上，以照顾前端初学或者英文不好的同学。下面是本周的精彩内容，请享用。 4 | 5 | ### 文章教程 6 | 7 | #### [JS 新概念词汇释义：第 1 部分](https://auth0.com/blog/glossary-of-modern-javascript-concepts/) 8 | 9 | 前端技术的发展和其他领域工程思想的引入，不少新词汇产生了，比如纯函数、非纯函数、函数副作用；函数式编程、响应式编程；不可变数据类型；高阶函数等，不少现代 JS 框架的设计思想都或多或少有这些概念在里面，这篇文章深入浅出的跟大家解释了每个概念是什么含义，英文不好的同学别担心，我会陆续把这篇文章翻译成中文发布在我的知乎专栏上。 10 | 11 | #### [用户认证令牌你必须知道的 10 件事](https://auth0.com/blog/ten-things-you-should-know-about-tokens-and-cookies/) 12 | 13 | 随着 SPA （单页应用）的盛行，不少前端同学可能都会接触到基于令牌（Token）的用户认证机制，但是关于 Token 的各种细节你是否都了解的非常清楚？比如怎么存储？怎么刷新？怎么鉴权？跟 Cookie 和 Session 相比有啥不同？英文不好的请稍后，这篇文章我翻译后会发布在知乎专栏上。 14 | 15 | #### [HTTP 2：现实世界的性能测试和剖析](https://css-tricks.com/http2-real-world-performance-test-analysis/) 16 | 17 | 也许你听说过 HTTP 2，他不是一个概念，现在很多云服务商、CDN 厂商开始支持支持这种新的网络协议，很多人都说 HTTP 2 理论上性能高很多，但是没有拿出实际的数据，这篇文章做了些实际的测试，结果应该是很有说服力的。 18 | 19 | #### [免费好书推荐：TypeScript 入门教程](https://ts.xcatliu.com/introduction/hello-typescript.html) 20 | 21 | 作者是好朋友刘易成，从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript，原名《From JavaScript to TypeScript》，作者希望分享学习的过程，帮助大家更容易的理解 TypeScript。内容比较易懂，正在学习 TypeScript 的同学请收下。 22 | 23 | ### 开发工具 24 | 25 | #### [oh-my-zsh：Github 上排名第 1 的程序员生产力工具](https://github.com/showcases/productivity-tools?s=stars) 26 | 27 | oh-my-zsh 是社区驱动的 zsh 插件管理框架，目前有 1000 多贡献者，支持各种各样的插件（400+）和整体自定义，能够让你在命令行中把生产力提高到极致，如果你还没开始拥抱命令行，还在等什么呢？ 28 | 29 | ### 代码框架 30 | 31 | #### [Rock：来自人人车前端的 JS 全栈脚手架](https://github.com/renrenche/rock) 32 | 33 | Rock 是人人车前端团队这一年多来前后端分离路上探索、积累出来的 JS 全栈脚手架，使用 webpack 作为打包工具，打包过程做了详尽的调优，后端基于 express，前端支持各种主流前端框架：vue、react，上手简单，文档详尽，开发者友好，并且主维护者是个大美女哦，感兴趣的可以去看看。 34 | 35 | ### 找找灵感 36 | 37 | #### [笑喷：中国程序员容易发音错误的单词](https://github.com/shimohq/chinese-programmer-wrong-pronunciation) 38 | 39 | 有没有发生过这样的事情：跟同事讲了好多遍一个单词，但是还是没听懂，最后竟然是你的单词发音和他不同？这里收录了不少中国程序员容易发音错误的单词，你应该去看看，不懂音标的自觉去找老师。 40 | 41 | ### 精彩问答 42 | 43 | #### [有哪些老鸟程序员知道而新手不知道的小技巧？](https://www.zhihu.com/question/36426051) 44 | 45 | 同样是知乎上的一个问题，回答里面有道有术，道是别人踩了很多坑总结出来的经验，而术是别人发下的能瞬间提高效率的奇技淫巧，里面肯定有你不知道的。 46 | 47 | #### [大公司里怎样开发和部署前端代码？](https://www.zhihu.com/question/20790576) 48 | 49 | 文绉绉的说法就是大公司的前端团队如何交付产品，很多前端刚入门的同学可能要很久才能搞明白的事情，不少大公司的人来作答，建议仔细看，自己画图。 50 | 51 | #### [链接跳转时 document.referer 什么时候会被置空呢？](http://stackoverflow.com/questions/19455450/document-referrer-empty-when-navigating-from-external-url) 52 | 53 | 我们都知道从页面中的链接或者JS触发的跳转，不论是外部还是内部，新打开的页面都会有 document.referer，但是某些情况下，浏览器处于安全考虑会把这个设置为空，比如从 https 协议跳转到了 http 协议。 54 | 55 | ### 技术动态 56 | 57 | #### [TypeScript 2.2 发布日志](https://blogs.msdn.microsoft.com/typescript/2017/02/22/announcing-typescript-2-2/) 58 | 59 | 给没听过 TypeScript 的同学解释下什么是 TypeScript，他弥补了 JS 的弱类型缺陷，支持各种新的 ES 语法，并且能编译成高性能的 JS 代码去运营，目前发布了 2.2 版本：引入 object 类型，增强了对编辑器的支持。 60 | 61 | #### [SHA1 加密算法被证实可破解](https://auth0.com/blog/sha-1-collision-attack/?utm_source=notifications-chrome&utm_medium=sc&utm_campaign=notifications) 62 | 63 | MD5 被证实可以破解之后，部分同学建议转向 SHA1，认为他更安全，但是现在谷歌证实 SHA1 也能够被破解，即提供两份不同的文档，经过复杂的计算能产生相同的 SHA1，不过实际破解需要的时间长达 6500 年，对于大家来说安全问题可能还不是迫在眉睫，但是随着计算机性能的不断提升，未来肯定会是问题。 64 | 65 | #### [Node.js v7.6 发布啦](https://mp.weixin.qq.com/s?__biz=MzAxMTU0NTc4Nw==&mid=2661157442&idx=1&sn=d5fb19edc2f421cbc13f6a432f2279e6&chksm=80d5d796b7a25e80223e3508e46d3cc699d49e909a17ed1f65f263cf30e8acdf08e105a14e33&scene=0&key=ab8bb8f63a4fc57b41b672577be9e96518dfd29992a47dfe447ca) 66 | 67 | 本次版本升级的要点包括：集成 v8 5.5 版本；支持 async 函数，再也不用加 flag 才能运行了；性能提升，尤其是内存，最多 35% 的提升；在 v8 5.7 对 async 函数的优化会有 4 倍以上的提高。感谢 i5ting 的翻译。 68 | 69 | ### One More Thing 70 | 71 | 想直接在微信中订阅前端周刊？扫下方二维码关注前端周刊订阅号。 72 | 73 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 74 | 75 | 每期的内容也会同步发送在知乎专栏[前端周刊](http://zhuanlan.zhihu.com/feweekly)上。 76 | 77 | Happy Hacking 78 | -------------------------------------------------------------------------------- /issues/Issue-48.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第48期：Vue Conf 2017 + Progressive WEB APP 2 | 3 | > 根据前端趋势观察，本期收录的内容有两个重点：Vue.js 周边，包括各种脚手架、工具库、技术交流大会；PWA 周边，包括视频、开发工具、应用示例。以下是具体内容内容，请享用！ 4 | 5 | ### 文章教程 6 | 7 | #### [PWA 在饿了么的实践经验](https://zhuanlan.zhihu.com/p/25800461) 8 | 9 | 本篇旨在和大家分享「饿了么 M 站」在 PWA 改造中的实践经验。涉及到的方面有：PWA 线上部署的准备工作、多页应用的 prerender 优化、实践过程中踩到的（和推进解决的）坑。而关于 PWA 的一些基础资料，可以看本周刊收录的其他资料。 10 | 11 | #### [浅谈前端状态管理](https://zhuanlan.zhihu.com/p/25800767) 12 | 13 | 近两年前端技术的发展如火如荼，大量的前端项目都在使用或转向 Vue 和 React 的阵营，由前端渲染页面的单页应用占比也越来越高，这就代表前端工作的复杂度也在直线上升，前端页面上展示的信息越来越多也越来越复杂，任何状态都需要进行管理，这篇文章聊的就是前端状态管理，分上下两篇，下篇自己找。 14 | 15 | ### 开发工具 16 | 17 | #### [TestCafe：现代 WEB 应用自动化测试利器](https://github.com/DevExpress/testcafe) 18 | 19 | TestCafe 是纯 Node.js 编写的现代 Web 应用自动化测试工具，专用来进行 E2E 测试，不需要安装任何依赖就能自己启动浏览器、运行测试、收集测试结果，不需要任何插件就能支持各种现代浏览器，有人专门写了文章用它来测试 Vue.js 应用。 20 | 21 | #### [pm86：生产环境的 Node.js 服务管理工具](https://github.com/ericjjj/PM86) 22 | 23 | pm86 基于 pm2，类似于美团的 pm2.5，都是用来管理 Node.js 服务的工具，在命令行工具的基础上，提供了监控仪表盘，可以私有化部署，并且仪表盘使用 Vue.js 开发，如果你想定制也很容易。 24 | 25 | #### [Eagle.js：基于 Vue.js 的 PPT 编写演示工具](https://zulko.github.io/eaglejs-demo/?utm_campaign=Revue%20newsletter&utm_medium=Newsletter&utm_source=revue#/) 26 | 27 | Eagle.js 是一款基于 Vue.js 的 PPT 编写和演示工具，支持动画、自定义主题、可交互组件（非常适合在技术交流会上做 Demo 演示），并且能非常容易的实现组件、Slide、样式的重用。是个新轮子，并且还不是前端做的。 28 | 29 | ### 代码框架 30 | 31 | #### [unvue：简单好用的 Vue.js 同构应用脚手架](https://github.com/egoist/unvue?utm_campaign=Revue%20newsletter&utm_medium=Newsletter&utm_source=revue) 32 | 33 | 支持服务端渲染的 Vue.js 同构应用脚手架，架构在具有强大的 SSR 能力的 Vue Router 之上。同时支持代码分割、Webpack 配置自定义、以及类似于 Next.js 的 插件机制。 34 | 35 | #### [Vue.js 2 + Webpack 2 + TypeScript 2 应用脚手架](https://github.com/ducksoupdev/vue-webpack-typescript?utm_campaign=Revue%20newsletter&utm_medium=Newsletter&utm_source=revue) 36 | 37 | 如果你想用非常前沿的前端技术来开发 WEB 应用，这会是非常值得考虑的种子项目，内含 Vue.js 2.2、Webpack 2、TypeScript 2，支持热更新，工程化方面支持单元测试、覆盖率报告、静态资源编译和打包优化。 38 | 39 | #### [Progressive Web App（PWA）版本的 CNode 社区](https://cnodejs.org/topic/58cd118bede0d3f7168541ef) 40 | 41 | CNode PWA 是使用 React、React Router 和 Redux 构建的 Progressive Web App，基于 CNode 社区提供的 API 开发，对于在学习 PWA 的同学是个非常不错的学习材料。GitHub 首页支持扫码直接预览，可以直接安装到桌面，体验流畅。 42 | 43 | ### 视频演讲 44 | 45 | #### [学习 PWA（Progress Web APP）的 10 段最佳视频](https://techbeacon.com/top-10-progressive-web-app-videos-get-speed-fast?utm_source=mobilewebweekly&utm_medium=email) 46 | 47 | 渐进式 WEB 应用，或者 Progressive Web App，亦被简称为 PWA，正被越来越多的开发者和互联网公司关注和讨论，因其基于现代的 WEB 技术，能够提供离线优先的、可以媲美原生的、轻量级 APP 体验。诸如 Google、Microsoft、Twitter 等大的互联网公司都在跟进。那么究竟什么是 PWA？开发 PWA 使用了哪些技术？需要借助什么工具？如果你想学，这 10 段视频就是为你准备的。 48 | 49 | #### [像擎天柱变身那样转换代码：AST 入门指南](https://www.youtube.com/watch?v=WO7H2NHmN18) 50 | 51 | 有没有好奇 babel、less、sass、postcss 这些代码转换工具是怎么工作的？他们都有的一个机理就是 AST（Abstract Syntax Tree，抽象语法树），AST 是啥？有什么用？看看这段 48 分钟的视频，你就能理解清楚。需翻墙。 52 | 53 | ### 技术动态 54 | 55 | #### [nginScript：在 Nginx 中使用 Javascript](https://www.nginx.com/blog/introduction-nginscript/) 56 | 57 | Javascript 的使用范围真是越来越广，我们都知道 Nginx 脚本语言中 Lua 始终是不二之选，本周 Nginx 官方推出了 Javascript 支持，虽然和 Node.js 有区别，但是可以用 Javascript 在 Nginx 中干很多事情，比如请求处理、日志处理。 58 | 59 | #### [npm 新功能：支持免费的机构账号](https://www.npmjs.com/features) 60 | 61 | npm 本周宣布支持免费的机构账号，能省去不少自己造轮子搭建私有 npm registry 62 | 的麻烦，免费机构账号的限制就是所有的仓库必须是开源的，免费版机构账号支持部分收费版的功能，比如组员管理。需要提醒的是这个就像是域名。 63 | 64 | #### [Chrome 58 Beta 版发布：支持 PWA 全屏](https://blog.chromium.org/2017/03/chrome-58-beta-indexeddb-20_21.html?m=1) 65 | 66 | Google 本周发布了 Chrome 58 Beta 版，其中包含了多个更新，如 IndexedDB 2.0、Iframe 导航的改进，亮点是支持 PWA 应用全屏。在我看来，PWA 跟微信的小程序是有异曲同工之妙，大的互联网公司都在布局，聪明的开发者该怎么做呢？ 67 | 68 | #### [VueConf 全球技术大会将于 5 月 20 在北京举办](https://zhuanlan.zhihu.com/p/25867191) 69 | 70 | 全球首届 VueConf 将于 5 月 20 日在北京举办，目前正在筹备过程中，近期会发布更多购票相关细节，感兴趣的小伙伴请保持关注了。同时，他们也在寻找讲师和赞助商。有兴趣有实力的公司或者朋友可以开始去原文联系举办方了。 71 | 72 | ### One More Thing 73 | 74 | 如果对文中的内容有任何疑问，欢迎留言讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/p/25644447)。 75 | 76 | -------------------------------------------------------------------------------- /issues/Issue-47.md: -------------------------------------------------------------------------------- 1 | # 前端周刊第47期：Vue.js 后台模板 + React Conf 2017 + 饿了么面试宝典 2 | 3 | > 本文共 2676 字，读完需 5 分钟，速读需 1 分钟。认真阅读每期推送的同学可能发现，前端周刊收录的文章很大比例是英文，早期甚至全是英文，后来接到很多同学反馈才适量增加了中文内容的比例。但是整体来讲，我期望能给大家一个刻意学习技术英语的机会，期望有心人能把握。另外，我上周翻译了《2016 年崛起的 JS 项目》，同步发到了知乎专栏，建议打开这封邮件的同学都去阅读下，绝对会有所收获。 4 | 5 | ### 文章教程 6 | 7 | #### [Vue.js 组件编码规范中文版](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md) 8 | 9 | 早些时候，本周刊推送了 Vue.js 组件编码规范英文版，这篇是中文译本，英文不好的同学可以学习下，但是最终建议还是学好英文，可以先从翻译开始。 10 | 11 | #### [使用 TestCafe 对 Vue.js 应用进行 E2E 测试](https://alligator.io/vuejs/e2e-testing-testcafe/?utm_source=javascriptweekly&utm_medium=email) 12 | 13 | TestCafe 是 2016 年出现并且已经有不少人采用的 E2E 测试工具，追求软件质量的团队和开发者都会想办法给项目增加测试，测试因粒度不同可分为：单元测试、接口测试、集成测试，而 TestCafe 是用来做集成测试的，即前端说熟知的 E2E 测试，这篇文章介绍了如何使用 TestCafe 对 Vue.js 应用进行 E2E 测试。 14 | 15 | ### 开发工具 16 | 17 | #### [goops：给仓库添加最佳 gitignore 规则的命令行工具](https://github.com/captainsafia/goops?utm_source=nodeweekly&utm_medium=email) 18 | 19 | goops 能够给你当前的工作目录添加 .gitignore 文件的命令行工具，当然他实际上比这个更强大，goops 会分析你当前目录下的文件来决定忽略哪些文件，可以说具有一定程度的智能。 20 | 21 | #### [完成 E2E 测试的 5 个最佳 Node.js 工具](https://medium.com/@adrian_lewis/top-5-most-rated-node-js-frameworks-for-end-to-end-web-testing-f8ebca4e5d44#.vk449a1r5) 22 | 23 | 这篇文章里面列出了适合用来对项目进行 E2E 测试 5 个最佳工具，其中就包括本期周刊收录的另外一篇文章《 使用 TestCafe 对 Vue.js 进行 E2E 测试》里面的 TestCafe，如何让前端的迭代更快、更有自信？调研下这些工具，挑选最适合你的。 24 | 25 | ### 代码框架 26 | 27 | #### [Vue.js + Element UI 的管理后台模板](https://github.com/lin-xin/manage-system) 28 | 29 | 一个基于 Vue.js + Webpack + Vuex + Vue-Router + Element UI 的管理后台种子项目，相比饿了么官方开源的那个而言，可以说是专业版，对常见的管理后台功能做了增强，比如所见即所得编辑器、文件上传、主题支持等。 30 | 31 | #### [Epilogue + Express + Sequelize 快速搭建 API 服务](https://github.com/dchester/epilogue) 32 | 33 | 使用 Express + Sequelize 搭建后端服务是比较常见的技术组合，如果架构是前后端分离的，就需要服务端暴露出各种 API，而 API 遵循某种规范是最好的做法，最常见的就是 Restful 规范了，Epilogue 就是这样的插件，帮你快速把 Express + Sequelize 的服务变成 Restful 接口，支持各种各样的定制。 34 | 35 | #### [vue-moment：Vue.js 日期处理的 filter](https://github.com/brockpetrie/vue-moment) 36 | 37 | moment.js 可以说是前端领域日期时间处理的标准库，在使用 Vue.js 开发应用的时候免不了要格式化日期，vue-moment 已经帮你把这个事情做了，直接引入，就可以在模板中输出变量的时候添加 moment 的过滤器。 38 | 39 | ### 找找灵感 40 | 41 | #### [Gulp 优秀插件、文章、教程大合集](https://github.com/Platform-CUF/use-gulp) 42 | 43 | 这应该是除了 Gulp 官方的文档和教程之外最好的插件、文章、教程大合集，我比较好奇的是，为啥作者没有把这个仓库命名为 awesome-gulp，虽然 gulp 在前端社区里面的出现不算是早的，但是学会使用它绝对是值得的。 44 | 45 | #### [Awesome Element：饿了么组件库周边](https://github.com/ElementUI/awesome-element) 46 | 47 | 又一张 Awesome List，围绕着饿了么大前端开源的 Element 组件库收集了不少的资料，不管是在使用、打算使用的同学都可以看看，从里面找找是否有可以用的轮子。 48 | 49 | ### 视频演讲 50 | 51 | #### [React Conf 2017 视频大合集](https://www.youtube.com/playlist?list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0) 52 | 53 | 本周结束的 React Conf 2017 上有相当多的干货，目前视频都在 Youtube 上放了出来，本届 React Conf 的内容也非常精彩，包括：Facebook 内部的 React Native 之路、React 同构应用、Redux 和 MobX 对比、React 开发工具、GraphQL、React VR 等，英语好的同学自行翻墙去学习。 54 | 55 | ### 精彩问答 56 | 57 | #### [如何在 git-diff 中准确的展示改了哪个单词？](https://twitter.com/csswizardry/status/757592722479976448) 58 | 59 | 新版的 git 中提供了 --word-diff 的功能，对于写 Markdown 的同学非常有用，不同于传统的整行 diff 模式，他是按词语来进行 diff，让你更加清楚的看到道理改了哪个地方。当然，使用这个特性需要升级下 git 版本。 60 | 61 | ### 技术动态 62 | 63 | #### [Guetzli: 谷歌开源了效率更高的 JPEG 图片编码算法](https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html) 64 | 65 | Guetzli 是谷歌近期宣布开源的新的 JPEG 图片编码算法，在视觉无损的情况下，编码出来的图片体积能减少 20% ~ 30%，官方代码仓库、周边配套工具已经开始出现，想加快图片加载速度、节省带宽？赶紧用起来。 66 | 67 | #### [GitHub：更新开源项目许可证的展示](https://zhuanlan.zhihu.com/p/25821233?utm_source=zhihu&utm_medium=social) 68 | 69 | GitHub 更新了 License 界面，让你对 License 一目了然，如果项目是根据流行的开源许可证（如MIT，Apache或GPL）获得许可，您将看到许可证的简要说明，以及您可以和不能对项目执行的操作的概述。 70 | 71 | ### 职位招聘 72 | 73 | #### [如何通过饿了么 Node.js 面试？](https://github.com/ElemeFE/node-interview) 74 | 75 | 这是饿了么官方整理的如何通过他们 Node.js 工程师面试的攻略，里面涵盖了用 Node.js 做服务端开发的几乎所有领域，能看的出来，整理这篇内容的人能力、视野都非常的强，即使你没在找工作，还有有很大的参考价值。 76 | 77 | ### One More Thing 78 | 79 | 如果对文中的内容有任何疑问，欢迎留言讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/p/25644447)。 80 | 81 | -------------------------------------------------------------------------------- /issues/Issue-60.md: -------------------------------------------------------------------------------- 1 | # 前端周刊第60期：用空格缩进的程序员挣得更多？ 2 | 3 | > David Robinson 从 Stack Overflow 年度开发者调查中发现的结论，使用空格缩进比使用制表符缩进的程序员平均年薪高 8.6%，即多超过两年的工作经验，当然这个结论是纯粹统计上的相关性，很难说就是实际的因果关系，最后作者特意强调为了薪水，他继续坚持使用空格缩进，你呢？ 4 | 5 | ### 技术动态 6 | 7 | #### [ CSS 年度调查报告](https://www.sitepoint.com/results-ultimate-css-survey-2017/) 8 | 9 | Louis Lazaris 进行了为期 6 周的问卷收集，对 1600 份问卷结果做的汇总，基本覆盖了 CSS 社区今年以来发生的变化，比如比较受欢迎的工具、方法论、编码技巧，信息量不小。不论老鸟、新手透过这份报告能观察到大家都是怎么做的，不断打磨自己的工具箱长期来说会是非常划算的投资。 10 | 11 | #### [TypeScript 2.4 RC 版本发布](https://blogs.msdn.microsoft.com/typescript/2017/06/12/announcing-typescript-2-4-rc/) 12 | 13 | 新版的 TypeScript 带来的特性包括：支持动态 import 表达式，更安全的回调参数检查，弱类型支持，字符串枚举等，其中弱类型支持是跟跟老版本不兼容的。正在学习或者使用 TypeScript 同学可以关注。 14 | 15 | #### [V8 引擎发布 6.0 版本](https://v8project.blogspot.com/2017/06/v8-release-60.html) 16 | 17 | 这里探讨的 V8 引擎不是 Node.js 8，前段事件 Node.js 发布新版的时候，很多人把两者搞混了。该版本新增 SharedArrayBuffer 支持，并且带来了原生的 rest/spread 操作符支持。可用时间节点方面：V8 最新版将会在 Chrome 60 中发布，Node.js 也会跟随发布。 18 | 19 | ### 文章教程 20 | 21 | #### [19 个常用的 JS 简写技巧](https://www.sitepoint.com/shorthand-javascript-techniques/) 22 | 23 | 用更少的代码做更多的事情，会让你成为更牛的程序员，说起来容易具体怎么做呢？熟练掌握代码的简写技巧就非常管用，作者在这篇文章中整理了 19 个常用的 JS 简写技巧，当然，部分简写转换是不等价的，注意原文中的标注，改出了 Bug 可不好。 24 | 25 | #### [那些年处理过的内容溢出](https://css-tricks.com/handling-long-unexpected-content-css/) 26 | 27 | 靠谱的程序员会很在意自己写的程序的健壮性，弹 JS 的健壮性很好理解，实际上 CSS 也是有的，有没有这样的体会，设计图非常的完美，但是仅仅照着那个做出来的东西在生产环境数据的测试下可能出各种问题，其中最典型的就是内容溢出，这篇文章讲了不少内容溢出的处理办法，文末有彩蛋，有个叫做 ForceFeed 的工具帮你在开发阶段做内容溢出测试。 28 | 29 | #### [代码讲解把 Console 用到极致](https://medium.freecodecamp.com/how-to-get-the-most-out-of-the-javascript-console-b57ca9db3e6d) 30 | 31 | 来自 FreeCodeCamp，Console 是多数程序员的调试首选，但 Console 对大多数人来说是既熟悉又陌生的，我亲眼见到不少新同学的调试代码写的很蹩脚，读完这篇文章，你能学到诸如如何用 Console 格式化输出、对代码计时、对输出分组、输出表格。 32 | 33 | #### [高效 Node.js 程序员都有的开发习惯](https://blog.heroku.com/node-habits-2017) 34 | 35 | 这里整理了 8 个高效 Node.js 程序员都有的开发习惯，从包管理，到脚本管理，再到代码风格、测试等，原文用的次是 “Happy Developer”，养成这些好的习惯，能为你避免不少麻烦，麻烦少了，效率就高了，自然就会 “Happy”，不是么？ 36 | 37 | #### [Lin Clark：内存管理入门教程](https://hacks.mozilla.org/2017/06/a-crash-course-in-memory-management/) 38 | 39 | 程序员漫画作家 Link Clark 的作品，系列文章有 3 篇，链接在原文头部，即使初学者也能透过这 3 篇文章理解 JS 中为什么要引入 ArrayBuffer 和 SharedArrayBufer，以及引入这些特性之后如何处理特殊情况。 40 | 41 | ### 代码框架 42 | 43 | #### [Awesome React Components](https://github.com/brillout/awesome-react-components) 44 | 45 | 有同学问我该怎么选择适合业务使用的 React 组件或者组件库，做任何选择的方法论都是相同的，先找到备选，然后添加必要的条件对备选进行过滤，关于 React 组件或者组件库，这篇就收录了不少备选，接下来的必要条件就跟实际的业务有关了。 46 | 47 | #### [如何对 হ 这种文字解码？](https://github.com/mathiasbynens/he) 48 | 49 | 最近处理业务数据，发现部分数据全部被编码成了类似 হ 的内容，前端同学对这个应该都不陌生，因为 HTML 里面的 > 和 < 都是类似的，如何对这些东西解码？这篇就是个现成的轮子。 50 | 51 | #### [React Native Spinner 工具箱](https://github.com/maxs15/react-native-spinkit) 52 | 53 | Loading Spinner 是多数应用都会采用的交互方式，可以极大的减少用户感知的等待时间，这是把 spinkit 迁移到 React Native 的即插即用的组件，支持超过 10 种动效，相比内置的 ActivityIndicator 能给你更多的选择。 54 | 55 | #### [Vue 专用 TypeScript 代码片段](https://marketplace.visualstudio.com/items?itemName=ducksoupdev.Vue2&utm_campaign=Revue%20newsletter&utm_medium=Newsletter&utm_source=revue) 56 | 57 | 如果想把 TypeScript 快速融入到自己的开发习惯中，需要找到很多类似的工具配置，这是专门为 Vue、Vuex 定制的 VSCode 代码片段，当然更好的方式是根据自己的工作方式去定制。 58 | 59 | ### 精彩问答 60 | 61 | #### [Vim 如何实现无限撤销？](https://jovicailic.org/2017/04/vim-persistent-undo/) 62 | 63 | Vim 如果不做任何配置，默认的撤销动作只能在当前打开的文件中执行，无限撤销的能力能让你撤销昨天甚至很久之前做的修改，只需要简单的几行配置就可以搞定。 64 | 65 | #### [工作能力强的人有哪些共同特征？](https://www.zhihu.com/question/28880482/answer/176343416) 66 | 67 | 知乎上广受关注的问题，跟每个人的成长有关。你有没有在工作中遇到能力很强的人，不仅知识渊博，而且软实力让人佩服，做什么事情都感觉很让人放心。这类人有什么共同的特征？对我们有什么启发？ 68 | 69 | #### [如何优雅的杀掉卡住的 SSH 会话？](https://medium.com/fullwebio/how-to-kill-a-frozen-ssh-session-7c3da419d5f7) 70 | 71 | 遇到过 SSH 会话卡住的时候你会愤怒的敲键盘？粗暴的关掉终端窗口？实际上是有更优雅的方式来杀掉卡住的 SSH 会话，命令也很简单。 72 | 73 | ### One More Thing 74 | 75 | 如果觉得本文对你有帮助，请不要吝啬 star。如果对文中的内容有任何疑问，欢迎提 Issue 讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/feweekly)。或者扫描下方二维码订阅微信公众号。 76 | 77 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 78 | 79 | Happy Hacking 80 | 81 | 82 | -------------------------------------------------------------------------------- /issues/Issue-56.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第56期：应接不暇的技术大会 2 | 3 | > WannaCry 病毒的事情我们就不在这里扯了，本周各科技公司、技术社区的大会真是让人应接不暇，Google IO、MicroSoft Build、React Europe、Vue Conf，每个里面都有不少前端工具、框架、演进方向的干货，好学的你怎么错过？下面是本周精选内容，请享用。 4 | 5 | ### 技术动态 6 | 7 | #### [Google I/O 2017 视频列表](https://www.youtube.com/playlist?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy) 8 | 9 | Google I/O 2017 可以说是整个互联网的盛宴，关于它的报道已经很多了，这里搜罗了全部的视频，里面关于前端的内容比较值得关注，比如 Polymer、Dev Tools、PWA 等，工程师不光要埋头做事，还要抬头看路，大的科技公司则走在我们前面。 10 | 11 | #### [Next.js 3.0 预览版发布](https://zeit.co/blog/next3-preview) 12 | 13 | Next.js 是基于 React 的支持服务端渲染的开发框架，本周发布 3.0 预览版，支持动态 import。服务端渲染虽然提了很长时间，但是到目前为止还处在看上去很美、用起来性能达不到要求的阶段，不过社区的努力会带来好的结果。 14 | 15 | #### [Vue Conf 2017 参会笔记](https://juejin.im/post/591fa2d0a0bb9f005f3ccd1b) 16 | 17 | 掘金编辑产出的参会笔记，全球首届 Vue.js 开发者大会，尤雨溪介绍了 Vue.js 的演进之路和今年的版本迭代计划，狼叔对前后端分离的大前端技术架构给出了良方，张耀春则分享了非常多 Webpack 用在实际项目中的技巧，掘金的创始人在现场做了他前端生涯的最后一次技术分享，可惜没有直播。 18 | 19 | #### [React Europe 2017 大会议程](https://www.react-europe.org/#day-2017-May-17) 20 | 21 | React Europe 2017 大会也是本周举行，程序员界的漫画天才 Link Clark 又做了逆天的分享，她用漫画图解 Redux、GraphQL、React Fiber 让我在迅速理解这些概念的同学也为她的才华做震撼，有点跑题了，React Europe 中除了她的演讲，还有很多值得关注学习的内容，怎么挑出高质量的？相信你有自己的办法。 22 | 23 | ### 文章教程 24 | 25 | #### [CSS Grid 学习指南](http://learncssgrid.com/) 26 | 27 | CSS Grid 是比 Flexbox 更强大的布局特性，如果你还徘徊在门外，何不打开这篇教程研究下，作者对内容的组织非常的用心，你应该半小时就能学完。 28 | 29 | #### [8 个能让你惊艳同事的 npm 技巧](https://medium.com/@adiramsalem/8-npm-tricks-you-can-use-to-impress-your-colleagues-dbdae1ef5f9e) 30 | 31 | 工程师不光要技术扎实，对工具也要练习、练习、再练习，这里是几个 npm 的小技巧，跟你的日常工作关系紧密，但是你可能还不知道，在同事面前表演下，估计他们会被惊艳到。 32 | 33 | #### [程序人生：服务性能 101](https://mp.weixin.qq.com/s?__biz=MzA3NDM0ODQwMw==&mid=2649827699&idx=1&sn=e97071f2f049b8027c3105b8bd4ade70&chksm=8704ab6fb0732279f3c1b463653a812bbaef4d921fe65fe82cfb397765b01a9c5552a18307fe&mpshare=1&scene=24&srcid=0512xD7mWOH0riOVoTkmFf72&key=fac364d3ab4) 34 | 35 | 来自我非常敬佩的程序人生的微信公号，虽然前端对性能的关注不需要到服务级别，但是培养一种思维方式还是非常有用的。比如什么时候该严肃地考虑性能问题？如何衡量和优化服务的性能？有兴趣的同学可以阅读原文看他的分享 Slide。 36 | 37 | #### [阮一峰：Fish shell 入门教程](http://www.ruanyifeng.com/blog/2017/05/fish_shell.html) 38 | 39 | 早些时候有推过一篇文章说：为什么优秀的程序员都爱命令行？Phodal 在他的长文[《在工作头三年里如何快速成长》](https://zhuanlan.zhihu.com/p/26704720)中提到的要尽早开始拥抱命令行、纯键盘操作，慢慢你会发现过多使用鼠标会使你的效率下降，这点我深有体会，也非常赞同，但是你的命令行工具箱也是需要不断打磨的，如果你还没开始行动，那这篇文章可以入门。 40 | 41 | ### 开发工具 42 | 43 | #### [静态网站生成（SSG）工具大搜罗](https://www.staticgen.com/) 44 | 45 | 国外大行其道的一键部署服务 Surge、Now 是在静态网站生成器大背景下的商业产品，你也想部署纯净太的网站？需要先挑选一个 SSG 工具，然后挑个服务商，这个小站列出几乎所有的 SSG 工具。 46 | 47 | #### [Eruda：把开发者工具带到移动端](https://github.com/liriliri/eruda) 48 | 49 | 你有没有吐槽过为啥移动端浏览器没有类似与 Chrome 开发者工具这样的调试利器？有人已经做了尝试和努力，Eruda 可以在移动端浏览器中给你类似的调试功能，官方 README 尾部的那段接入代码要仔细看。 50 | 51 | #### [Atom 新版集成 GitHub 功能](https://github.atom.io/) 52 | 53 | Atom 的最新版中集成了常用的 Git 功能你可以方便的在 GUI 上操作分支、查看日志、做代码的提交和拉取。已经抛弃 Atom 的同学可以绕路了。 54 | 55 | #### [测量并对比你和竞品的网站性能](https://www.dareboost.com/en/compare) 56 | 57 | 在网站性能测试工具里面 WebPageTest 是当之无愧的榜首，但是用它来对比两个网站（比如说你相对比自己和竞品的性能）操作略麻烦，这个工具能让你一键完成对比。 58 | 59 | ### 视频教程 60 | 61 | #### [让代码检查不再痛苦](https://www.youtube.com/watch?v=GLdH9SMG97o) 62 | 63 | 为 Andrey Okonetchnikov 在 React Amsterdam 上做的分享，列出了现有的代码风格检查（Code Linting）方案的集成痛点，并给出了非常不错的解决方案，我们团队已经用上了，如果你还不知道啥是 Code Linting，得抓紧学了。 64 | 65 | #### [抽象语法树（AST）入门](https://egghead.io/lessons/javascript-introduction-to-abstract-syntax-trees) 66 | 67 | 抽象语法树是啥？有什么用？如果你好奇过各种预编译工具（比如 babel、postcss、eslint 等）是怎么工作的，这个教程能让你知其然还支持所以然。 68 | 69 | ### 精彩问答 70 | 71 | #### [Mac 中如何让两个应用并排全屏？](https://support.apple.com/en-us/HT204948) 72 | 73 | 我喜欢在超大的显示器上同时开着 Vim 和 iTerm，一个用来写代码，一个用来调试或者操作 Git，那么如何让两个应用并排全屏好使我沉浸在编码中呢？需要用到 Mac 系统的一个特性，非常简单，1 分钟就学会。 74 | 75 | #### [如何知道 npm 模块的资源消耗？](http://cost-of-modules.herokuapp.com/) 76 | 77 | 前端网上流传一张图对比了各种语言包管理机制的深度，npm 是被黑的最狠的，有国外的朋友在 Twitter 上发文说清理 node_modules 让他的 Mac 增加了 15G 磁盘空间，真有这么严重？你用的最多的包到底会占用多少空间？安装时需要下载多少东西？这个小工具可以帮你计算。 78 | 79 | ### One More Thing 80 | 81 | 如果觉得本文对你有帮助，请不要吝啬 star。如果对文中的内容有任何疑问，欢迎提 Issue 讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/feweekly)。或者扫描下方二维码订阅微信公众号。 82 | 83 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 84 | 85 | Happy Hacking 86 | -------------------------------------------------------------------------------- /issues/Issue-58.md: -------------------------------------------------------------------------------- 1 | # 前端周刊第58期：送你 3 道面试题 2 | 3 | > 破解前端面试系列文章本周出到第 3 篇：如何搞定纸上编程环节，早些时候发布了闭包篇、DOM 篇，感兴趣的同学可以看看，对面试官和求职者都应该有些参考价值，每篇文章下面的讨论也是值得阅读的，部分读者提出了非常不错的建议和想法。下面是本周精选内容，请享用。 4 | 5 | ### 技术动态 6 | 7 | #### [Prettier 发布 1.4.0 版本](https://github.com/prettier/prettier/releases/tag/1.4.0) 8 | 9 | 非常好用的代码格式化工具 Prettier 本周发布了 1.4.0 版本，新版增加了对 CSS、Less、SASS、TypeScript 的支持，也修复了格式化 JSX 时的一些问题，预计接下来各代码编辑器插件也会紧跟升级，VSCode 里面的插件已经升级完了，你还在等啥？ 10 | 11 | #### [CSSConf EU 2017 视频列表](https://www.youtube.com/watch?v=-9lhH72KlKY&list=PL37ZVnwpeshF0XmpjKBJ3-0kvr3b5ZpJR) 12 | 13 | 原计划收录在 56 期的技术大会视频里面的内容，但是考虑到信息量太大，延迟到了这周。这是 CSSConf EU 2017 的视频列表，相比而言 CSS 的社区更小也更年轻，但是还是有不错的内容，跟 CSS-IN-JS 有关的题为《A Unified Styling Language》演讲推荐观看，Medium 上也为相同名字的文章。 14 | 15 | ### 文章教程 16 | 17 | #### [JS 模块现状和建议](https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358) 18 | 19 | 最近关于 Node.js 中如何实现 ES 模块的讨论多了起来，这篇文章对 ES 模块当下的发展做了梳理，包括各种工具（比如 Webpack、Rollup）的支持情况，浏览器的支持情况。并在最后就是否应该开始 ES 模块给出了比较中肯的建议。 20 | 21 | #### [阅读 flexbox 规范学会的 11 个要点](https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b) 22 | 23 | 作者阅读了 flexbox 的规范之后，对 flexbox 又有了更深的理解和认识。作者感慨，通过阅读规范，它最大的收获是知道自己原来对 flexbox 的理解是不完整的，即使他看了很多博客文章，写了不少代码。技术深度就是这样练出来的，比如你是否有看过 es5、es6 的规范呢？ 24 | 25 | #### [你应该知道的 5 个 Node.js 8 新特性](http://codingsans.com/blog/node-8) 26 | 27 | 小有争议的一篇文章，介绍了 Node.js 8 里面你可以上手即用的 5 个新特性，关于 Node.js 8 的内容已经非常多了，大家可以自己去找，官方的发版建议阅读。 28 | 29 | #### [O(logn) 时间复杂度到底该怎么理解？](https://hackernoon.com/what-does-the-time-complexity-o-log-n-actually-mean-45f94bb5bfbf) 30 | 31 | 算法时间复杂度里面的 O(1)、O(n) 等都是非常直观且容易理解的，可能你能意会 O(logn) 的复杂度，怎么跟人解释清楚？这篇文章的作者用图解法做了尝试，试试看？ 32 | 33 | #### [LeetCode 题解：免费电子书](https://www.gitbook.com/book/siddontang/leetcode-solution/details) 34 | 35 | 电子书的作者为了撬开算法的大门，刷完了 LeetCode 的题目，将自己做题的思路记录下来，教是最好的学，如果你最近正巧在刷题，会是不错的参考资料。 36 | 37 | ### 开发工具 38 | 39 | #### [stylefmt：自动化的 css 格式化工具](https://github.com/morishitter/stylefmt) 40 | 41 | stylefmt 是专门为 css 定制的格式化工具，支持 less、sass，也有插件支持各种新的 css-in-js 写法，比如 styled-components，周四我正好在项目中有实践，接下来会单独写篇文章解释如何把样式格式化工具集成到开发交付工作流中。 42 | 43 | #### [chrome dev tools 性能工具大观](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference) 44 | 45 | Google 官方出品的 dev tools 性能工具详细介绍，文章比较长，介绍了几乎所有 dev tools 内涵的性能工具，包含如何打开、录制，如何解读结果，发现问题，如果你真的想学会性能诊断，把这个加到学习列表吧。 46 | 47 | ### 代码框架 48 | 49 | #### [react-native-animatable：超赞动画库](https://github.com/oblador/react-native-animatable) 50 | 51 | 高仿 animate.css，但是专门为 react native 定制， 各种动画都定义成了组件，动画声明方式也都是声明式的，参数可以直接通过节点 props 来控制。 52 | 53 | #### [mocka：通用的内容占位符组件](https://github.com/Chalarangelo/mocka?utm_campaign=explore-email&utm_medium=email&utm_source=newsletter&utm_term=weekly) 54 | 55 | 内容占位符已经被越来越多的应用开始使用，不管是 APP 还是 WEB，掘金的 WEB 版就有，其作用就是提高用户对 APP 响应速度的感知，mocka 封装了常见的内容占位符代码，你可以直接在自己的项目中使用。不要看错了，这个是 mocka，和测试框架 mocha 仅一字之差。 56 | 57 | ### 视频教程 58 | 59 | #### [用 tmux 管理你的命令行会话](https://egghead.io/courses/wrangle-your-terminal-with-tmux) 60 | 61 | 在程序员的世界里命令行终端就像是 chrome，会根据需要开很多个窗口或者标签页，但是机器重启之后如何快速恢复之前的工作目录，打开的文件，运行的程序？早些时候你可能需要用 screen，后来出现了更好的窗口管理工具 tmux，这个视频教程能让你在 30 分钟快速入门 tmux。 62 | 63 | #### [如何禁用 react-native 中的黄色告警？](https://egghead.io/lessons/react-disable-and-ignore-yellow-box-warnings-in-react-native?utm_content=bufferdbed7&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer) 64 | 65 | 开发 react-native 的同学可能有注意到偶尔会遇到黄色的报警，每次刷新都会出来，有些你不打算处理的其实是可以用一行代码直接忽略掉、或者全部禁用（个人不推荐后面这种做法），egghead.io 的视频手把手的教你配置。 66 | 67 | ### 精彩问答 68 | 69 | #### [react-native 中如何管理静态资源？](https://willowtreeapps.com/ideas/react-native-tips-and-tricks-2-0-managing-static-assets-with-absolute-paths/) 70 | 71 | webpack 里面一切皆模块的思路同样可以用到 react-native 里面的静态资源管理，不过方法略有差异，比起在 react jsx 代码中零星分布的动态 require 更优雅。 72 | 73 | #### [如何用 CSS 对图片裁剪和缩放？](https://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped) 74 | 75 | 使用 CSS 对图片进行裁剪和缩放是实际业务中比较常见的需求，解决方法也不少，来自 Stack Overflow 的问答。 76 | 77 | ### One More Thing 78 | 79 | 如果觉得本文对你有帮助，请不要吝啬 star。如果对文中的内容有任何疑问，欢迎提 Issue 讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/feweekly)。或者扫描下方二维码订阅微信公众号。 80 | 81 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 82 | 83 | Happy Hacking 84 | 85 | -------------------------------------------------------------------------------- /issues/Issue-63.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第63期：前端新手如何快速提高？ 2 | 3 | > 本周 JSConf China 于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的 PPT、视频目前都还没放出来，有心的同学如果找到了欢迎分享。最近公司入职了 3 个实习同学，关于实习同学如何快速掌握熟练工程师的工作流程、开发套路来自我提升本期收录多条精彩内容。以下是精选内容，请享用！ 4 | 5 | ### 技术动态 6 | 7 | #### [ES8 发布及主要特性总览](https://hackernoon.com/es8-was-released-and-here-are-its-main-new-features-ee9c394adf66) 8 | 9 | ES8 已经正式发布，这篇文章使用实例对 ES8 中确定的语言特性（比如 Object.values、Object.entries、String.padStart、String.padEnd）做了介绍，基础好的同学可以自己去阅读规范原文，此外，掘金翻译计划也把文章翻译成了中文。 10 | 11 | ### 文章教程 12 | 13 | #### [JS 项目行军指南](https://github.com/wearehive/project-guidelines) 14 | 15 | 对于相当比例的工程师，尤其是刚入门的前端工程师来说，开始一个全新的项目就像是在未知领域摸索前行，如果方法不当，维护老项目更是噩梦，那么推进新项目是否有固定的套路可循呢？这篇文章是 Hive 的团队总结出来的 JS 项目行军指南，覆盖了 Git、依赖、测试、文件组织、代码规范等方面。 16 | 17 | #### [API 安全检查清单](https://github.com/shieldfy/API-Security-Checklist) 18 | 19 | 《清单革命》中提出在医学领域使用检查清单是保障复杂手术成功简单却有效的方法，有人把这种方法论迁移到建筑领域，而软件工程领域同样使用，对于开始接触 JS 后端开发的同学，如何保障 API 服务的安全有很多方面需要考虑，如果想让自己成为思维缜密的工程师，这篇文章及其中提到的概念和技术，非常值得学习。 20 | 21 | #### [awesome-guidelines：编码风格指南](https://github.com/Kristories/awesome-guidelines) 22 | 23 | 高质量的代码会体现在表层和结构两方面，表层主要指代码排列、变量命名等方面，结构主要体现在容错、扩展、调试等方面，表层的代码技巧相比结构方面更容易掌握，而通常来说表层很差的代码，结构也好不到哪里去，这篇汇集了很多门语言的编程规范、最佳实践。 24 | 25 | #### [每个单元测试都必须回答的 5 个问题](https://medium.com/javascript-scene/what-every-unit-test-needs-f6cd34d9836d) 26 | 27 | 有个难以接受但是残酷的事实，大多数程序员都不知道怎么写测试，测试不仅能帮助你理清对需求的理解，还有利于设计的开展，更直接的是方便持续集成为以后的自动化回归打好基础。那么该怎么写测试？正确的思考都是从提问开始，每个单元测试都要回答 的问题包括：你在测什么？它是干啥的？输入是什么？输出是什么？如何重复测试？ 28 | 29 | ### 开发工具 30 | 31 | #### [Release：快速生成仓库的 Changelog](https://github.com/zeit/release) 32 | 33 | Zeit 官方发布的命令行工具，运行之后能自动生成 GitHub Release，并且基于上次发布之后的提交生成本次 Release 的更新日志，如果不了解这种发版流程，建议去看看 React、React Native 的版本更新机制。 34 | 35 | #### [Chrome 60 DevTools 新功能预览](https://www.youtube.com/watch?v=Qnmb2YhkQmQ) 36 | 37 | Chrome 无疑是配备了最好的开发者工具的浏览器，该视频通过实际操作讲解 Chrome 60 中新发布的 DevTools 功能，感兴趣的可以看看。 38 | 39 | ### 代码框架 40 | 41 | #### [Gifted Chat：React Native 会话式 UI 库](https://github.com/FaridSafi/react-native-gifted-chat) 42 | 43 | 在 AI 时代，人机交互的方式也有不少新的变化，具体到前端领域，会话式UI（Conversational UI）的崛起尤为显著，微信公号上的自动回复功能也可算作此类，Gifted Chat 是为 React Native 定制的会话式交互组件，在交互细节上做了不少的优化考量，也支持灵活的自定义，如果你最近想做个类似的 APP，应该可以用上。 44 | 45 | #### [franc：支持超过 800+ 语言的语种检测库](https://github.com/wooorm/franc) 46 | 47 | 如果你恰巧也需要在工作中处理多国语言，而需要知道数据库中存储的文本语种，franc 绝对能为你所用，支持超过 800+ 语种，支持计算某段文本属于某种语言的概率，长的文本输入能给你更精确的结果。 48 | 49 | #### [Markvis：在 Markdown 中输出图表](https://github.com/geekplux/markvis) 50 | 51 | 不得不说 Markvis 为 Markdown 带来了更加丰富的表现力，支持条形图、饼图，并且这种需求是刚需，在 Markdown 越来越普及的今天。 52 | 53 | ### 找找灵感 54 | 55 | #### [Practical Node.js：第2版](https://github.com/azat-co/practicalnode) 56 | 57 | Practical Node.js 开始修订第 2 版了，预计年底会完工，这个仓库是手稿原文，如果你看过的话是不是也可以参与进去呢？该书的第一版< href="https://www.amazon.com/Practical-Node-js-Building-Real-World-Scalable/dp/1430265957/ref=sr_1_1?ie=UTF8&qid=1500419270&sr=8-1&keywords=practical+node.js#customerReviews">评价还比较不错。 58 | 59 | #### [VimGameSnake：在 Vim 中玩贪吃蛇](https://github.com/johngrib/vim-game-snake) 60 | 61 | 代码写累了想在 Vim 里面休闲下？请收下这款游戏吧，不要跟老板说是前端周刊介绍的，哈哈。当然，如果你想在 Vim 中尝试更多的游戏，可以移步：github.com/jmanoel7/vim-games。 62 | 63 | #### [AI 术语中英文对照表](https://jiqizhixin.github.io/AI-Terminology-page/) 64 | 65 | 如果你知道某个领域各种术语对应的英文单词，能看懂英文技术资料就会更容易，前端为什么要关注人工智能？科技发展的趋势是挡不住的，即使不做人工智能的开发，多学点单词也能避免不少拼音式变量名吧。 66 | 67 | ### 精彩问答 68 | 69 | #### [如何对压缩混淆后的 JS 代码做逆向工程？](https://www.alexkras.com/reverse-engineering-one-line-of-javascript/) 70 | 71 | 很多前端同学在初入门的时候可能都用到了逆向工程的方法，区别就是逆向的难度大小的问题，通常 CSS、DOM 再明显不过了，你对压缩混淆过的 JS 代码做过逆向工程么？没有的话，读读这篇长文，看看 Alex Kras 是如何做到的。 72 | 73 | #### [为什么 Reddit 选择了 TypeScript？](https://redditblog.com/2017/06/30/why-we-chose-typescript/) 74 | 75 | Reddit 的前端团队在做重构的时候重新选择了 TypeScript 作为基本的开发语言，他们调研了哪些方案？选择 TypeScript 的理由是什么？如果你时间有限就看最后的结论吧。 76 | 77 | #### [认真的 JS 开发者必须知道的 10 件事？](https://www.reddit.com/r/javascript/comments/6mlc9d/what_10_things_should_a_serious_javascript/) 78 | 79 | 由一个想提高自己的前端工程师发布在 Redit 上的问题，高票答案总结的非常不错，现在的前端工程师跟五年前的前端工程师已经大不相同，如果你想在这个领域立足并成为大牛，这个答案可以作为基础技能检查清单。 80 | 81 | ### One More Thing 82 | 83 | 如果觉得本文对你有帮助，请不要吝啬 star。如果对文中的内容有任何疑问，欢迎提 Issue 讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/feweekly)。或者扫描下方二维码订阅微信公众号。 84 | 85 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 86 | 87 | Happy Hacking 88 | 89 | -------------------------------------------------------------------------------- /issues/Issue-59.md: -------------------------------------------------------------------------------- 1 | # 前端周刊第59期：选 Flow 还是 TypeScript？ 2 | 3 | > 周末是时隔两月的家人团聚，而每次内容的准备平均需要我集中精力工作 3 小时，所以第 59 期的内容今早才准备好，对不住大家了。本期的引子是“选 Flow 还是 TypeScript”，缘起于去年底的 JS 调查报告展示 39% 的程序员听说过会准备采用 TypeScript，你是其中一份子么？从想用到真正开始用缺的就是实践。而笔者也是最近才开始拥抱 TypeScript。下面是本周精选内容，请享用。 4 | 5 | ### 文章教程 6 | 7 | #### [架构师必读：开源软件的架构](http://aosabook.org/en/index.html) 8 | 9 | 英文系列名为《The Architecture of Open Source Applications》，这个系列文章强烈推荐有志于成为架构师的同学阅读，里面介绍了不少开源软件的设计理念，全套分四册，完全开源，覆盖的开源软件有上古神器，也有黑马新秀，如果你没有思考过这些司空见惯的东西到底是怎么设计的，相信这里面的文章会给你不少启发。最新的系列叫做《500 Lines or Less》，用 500 行代码能做什么？比较有意思 10 | 11 | #### [util.promisify 用法详解](http://2ality.com/2017/05/util-promisify.html) 12 | 13 | Node.js 8 增加的新特性，让你把各种基于回调的函数方便的转成 Promise，这样就可以在 async/await 上下文使用了，这篇文章介绍了基本用法。 14 | 15 | #### [对比 Flow 和 TypeScript](http://djcordhose.github.io/flow-vs-typescript/flow-typescript-2.html#/) 16 | 17 | 主标题：JS 中的类型系统，原作者也是蛮拼的，JS 中类型系统的对比做了多次分享，早期对比了 Flow 和 TypeScript 1.x，后来对比了 Flow 和 TypeScript 2.x，最后还把 ELM 加入到对比里面。这是中篇的链接，对比的风格更学术化，如果你想对选用 Flow 还是 TypeScript 做出非常严谨的选择，这篇是不得不看的。 18 | 19 | #### [从 Flow 到 TypeScript](http://jan.varwig.org/2017/02/15/flow-vs-typescript.html) 20 | 21 | 作者在使用 React 开发的早些时候，因为 TypeScript 还不够完善，遂全部采用 Facebook 开源的静态检查方案 Flow，时过境迁发现 TypeScript 更能满足需求，虽然标题里有 vs 字眼，但是明显倾向于 TypeScript，并且给出了从 Flow 到 TypeScript 的基本步骤。TypeScript 是 2016 年 JS 调查报告中 39% 的开发者听说过并且原因试用的技术，你还在徘徊犹豫么？ 22 | 23 | #### [React Native 渐进式图片加载思路](https://medium.com/the-react-native-log/progressive-image-loading-in-react-native-ecc88e724343) 24 | 25 | WEB 和 APP 领域的很多东西都是通用的，对于多图的应用，图片加载的优化必不可少，这篇文章介绍了在 React Native 中实现图片渐进式加载的方案，并且有实际的代码示例。 26 | 27 | ### 开发工具 28 | 29 | #### [Lighthouse：让 Dev Tools 如虎添翼](https://github.com/GoogleChrome/lighthouse) 30 | 31 | Google 官方出品，目前已经内置在 Chrome Dev Tools 中，可以用来对你的网页，尤其是 H5 做全面的诊断，给出的报告涵盖 PWA、性能、可访问性、最佳实践等方面，不得不说，一份报告就有太多值得学习的地方。并且 Lighthouse 还提供了命令行工具，可以很好的与你的 CI 流程结合。 32 | 33 | #### [ZangoDB：浏览器中的 MongoDB](https://github.com/erikolson186/zangodb) 34 | 35 | ZangoDB 是基于 HTML5 中 IndexedDB 的类似于 MongoDB 的数据库封装库，如果你熟悉 MongoDB 的各种语法，那么在浏览器中书写 MongoDB 的代码来做数据过滤、分页、投影、排序、更新和聚合已经不是什么难事。 36 | 37 | ### 代码框架 38 | 39 | #### [FastImage：高性能的 React Native 图片组件](https://github.com/DylanVann/react-native-fast-image) 40 | 41 | 这周对公司 APP 做图片加载优化，调研时找到了 CachedImage 和 FastImage，其中 FastImage 更新，但是允许开发者对图片加载的调度有更大的自主权，两者都支持 Placeholder、文件系统缓存。你可以根据自己的需要选用。 42 | 43 | #### [FeatherIcon：美观的开源图标库](https://feathericons.com/) 44 | 45 | 社区中能找到的图标库越来越多，选择的时候你会考虑哪些要素？是否开源、图标的种类、版权、受欢迎程度、添加新图标的难度？Feather Icon 使用 MIT 授权，主维护者也比较勤奋，使用者不少，设计风格比较简洁，你也可以看看。 46 | 47 | ### 找找灵感 48 | 49 | #### [学会做任何事情](http://www.wikihow.com/Main-Page) 50 | 51 | 你会教人如何使用筷子么？看起来很简单的事情，貌似找到他的关键，并且讲解给别人就没有那么容易了。wiki-how 里面有各种如何做 XXX 的教程，当你学一个新的东西时候，写个新教程的时候是不是可以参考呢？ 52 | 53 | #### [程序员应该访问的最佳网站](https://github.com/sdmg15/Best-websites-a-programmer-should-visit) 54 | 55 | 已经有人在掘金发过了，里面收录了程序员工作生活可能涉及到的各种网络资源的列表，比如怎么准备面试、去哪里看新闻、哪里有不错的视频教学、有哪些不错的 Youtube 频道、免费的编程书等等，如果你想练习提高自己的英文，这里的每个链接都可为你所用。 56 | 57 | #### [动画渐变函数图示](http://easings.net/) 58 | 59 | 恰到好处的动画能让你的应用体验更加流畅，谈到动画，不得不提到渐变函数（即 easing functions），渐变函数基本决定了动画的视觉效果，每种不同的渐变函数到底是怎样的曲线？这里用图示法给你生动的解释。 60 | 61 | ### 视频教程 62 | 63 | #### [学习 Recompose 中的高阶组件和函数式组件](https://egghead.io/courses/higher-order-components-with-functional-patterns-using-recompose) 64 | 65 | 来自 egghead.io，如果你使用了 React 相当长的时间，比如说一年，但是还不知道函数式组件、高阶组件是啥，这个视频教程当属于敲黑板系列了，如果说 《React Best Practice and Design Patterns》是文字版的，那么这个就是视频版的，虽然基于 Recompose 讲解，但是很多模式即使不用它也可以自己实现。 66 | 67 | #### [egghead.io：60 分钟学会 ES6](https://egghead.io/courses/learn-es6-ecmascript-2015?utm_content=buffer6a6db&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer) 68 | 69 | 是 egghead.io 上为数不多的多人合作的视频课程，通过实际的编码演示了 ES6 中的各种新特性，如果你只是看了 ES6 的各种新语法、结构，但是还是羡慕别人的代码为啥写的那么溜，可以来看看这个，当然，最好的办法是自己跟着练。 70 | 71 | ### 精彩问答 72 | 73 | #### [如何使用 Git 管理大文件？](https://medium.com/fullwebio/how-to-track-large-files-database-psd-bin-in-git-263aac9f93f2) 74 | 75 | 如何使用 Git 管理诸如 PSD、二进制文件、数据库文件等的大文件？这里给出了详细的步骤，有版本的东西就好追溯，软件演化周期的各种资源都是一样的，而 Git 在做这种记录的时候有着天然的优势。 76 | 77 | #### [如何使用 JS 格式化货币数字？](https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript) 78 | 79 | 可能不少同学会想到去找个库，如果你的需求很简单，何不自己尝试写个呢？这是个正则的解法，注意答案被讨论的比较多，谨慎采用（仔细看文档总是有好处的）。 80 | 81 | ### One More Thing 82 | 83 | 如果觉得本文对你有帮助，请不要吝啬 star。如果对文中的内容有任何疑问，欢迎提 Issue 讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/feweekly)。或者扫描下方二维码订阅微信公众号。 84 | 85 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 86 | 87 | Happy Hacking 88 | 89 | -------------------------------------------------------------------------------- /issues/Issue-52.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第52期 2 | 3 | > 哈哈，互联网圈本周的大事件是微信公众号关闭 iOS 平台打赏入口，讨论这件事情的文章很多，前端周刊就没有收录相关文章。回到技术本身，我读到 3 篇非常不错的如何写出更简洁代码的文章：缩进就是复杂性、去掉循环、写的更少，不论是初入门的新人还是中高级工程师都建议阅读。好了，下面是本周精选的内容，React Native 比重较大，请享用。 4 | 5 | ### 文章教程 6 | 7 | #### [箭头函数你需要知道的都在这儿了](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 8 | 9 | 箭头函数是 ES6 中的新特性，让函数代码更简洁，箭头函数本身没有绑定执行上下文，参数等等。很多时候，我们犯了错误才会明白“动手之前要先去看文档”，MDN 上关于箭头函数文档非常详细，关于哪里能用，哪里不能用，都解释的很详细，如果你就生在 ES6 的环境，这个必须得仔细看。 10 | 11 | #### [写给略懂 jQuery 同学的 Vue.js 入门教程](https://medium.freecodecamp.com/vue-js-introduction-for-people-who-know-just-enough-jquery-to-get-by-eab5aa193d77) 12 | 13 | jQuery 在前端领域的地位就像是 Web Server 领域的 Apache，据统计现在全球有 70% 的网站都引用了 jQuery，技术在进步，如果你只是略懂 jQuery 想学 Vue.js 咋办？学习新东西的最大障碍就是思维方式的转变，阅读这篇文章看看学会 Vue.js 接受哪些新的思考方式。 14 | 15 | #### [通过案例学会 React Native Navigator  原理及用法](https://medium.com/react-native-training/react-native-navigator-navigating-like-a-pro-in-react-native-3cb1b6dc1e30) 16 | 17 | React Native 入门的时候，脑子里面肯定很多疑问，React Native 里面是否有类似于 React Router 的东西？如果有怎么用？React Native 内置的 Navigator 就是用来干这个的，方便你开发多页面的 APP，这篇文章从最简单的例子开始教你如何使用 Navigator、传递参数、配置转场动画。 18 | 19 | #### [管理 React Native 应用样式的几点建议](https://medium.com/@tommylackemann/managing-styles-in-react-native-3546d3482d73) 20 | 21 | 入手 React Native 开发的同学有没有纠结过应用的样式代码到底该放到哪里？是单独抽出来，还是全部内联？共享的样式怎么办？实际上没有标准的做法，这篇文章会给你一些建议，让你的代码更好管理。 22 | 23 | #### [如何使用 HTTP Headers 来保护你的 Web 应用？](https://juejin.im/post/58f5d3718d6d810057c18f75) 24 | 25 | 无论是简单的小网页还是复杂的单页应用，Web 应用都是网络攻击的目标。开发者可以利用 HTTP 响应头来加强 Web 应用程序的安全性，通常只需要添加几行代码即可。本文将介绍 web 开发者如何利用 HTTP Headers 来构建安全的应用。虽然本文的示例代码是 Node.js，但基本所有主流的服务端语言都支持设置 HTTP 响应头，并且都可以简单地对其进行配置。 26 | 27 | #### [大数据浪潮下的前端工程师](https://zhuanlan.zhihu.com/p/25825404?group_id=837335635386826752) 28 | 29 | 把前端工程师放在产业发展、技术进步的大背景下来审视，前端工程师不应该仅仅关注实现界面和交互，非常建议阅读，不多做解释。 30 | 31 | #### [前端精读评论：前后端渲染之争](https://zhuanlan.zhihu.com/p/26366128) 32 | 33 | 十年前，几乎所有网站都使用 ASP、Java、PHP 这类做后端渲染，但后来随着 Angular、React、Vue 等 JS 框架的崛起，开始转向了前端渲染。从 2014 年起又开始流行了同构渲染，号称是未来，集成了前后端渲染的优点，但转眼间三年过去了，很多当时壮心满满的框架（Rendlr、Lazo）从先驱变成了先烈。同构到底是不是未来？自己的项目该如何选型？建议阅读 34 | 35 | ### 开发工具 36 | 37 | #### [httpie: 比 curl 和 wget 更好用的网络工具](https://github.com/jakubroztocil/httpie) 38 | 39 | httpie 是一款比 curl 和 wget 更好用的网络请求命令行工具，Egghead.io 上还有一门介绍 http 基础知识的免费课程全程就是用的这个工具，你看了这个课程 httpie 的用法和 http 基础都学会了，注意这个工具的读法是 “爱吃提提派”，而不是“爱吃踢踢屁爱意”。 40 | 41 | #### [awaiting：async/await 辅助工具库](https://hunterloftis.github.io/awaiting/) 42 | 43 | awaiting 是基于 async/await 特性的工具库，提供了常见的延时、等待，以及 Promise 相关的工具函数，想学好 async/await？看看先行者拿他做了啥会学的更快。 44 | 45 | ### 代码框架 46 | 47 | #### [React Navigation：可扩展但易用的路由解决方案](https://github.com/react-community/react-navigation) 48 | 49 | 看了上面的 Navigator 文章，觉得他很难用，现在来看看 React Navigation，可扩展但非常易用的路由解决方案，由 Facebook、Expo、React 社区的共同努力演化而来，甚至可以用在 React 项目中。 50 | 51 | #### [Split.js：轻量的视图分隔 JS 插件](https://nathancahill.github.io/Split.js/) 52 | 53 | Split.js 是一款轻量级的视图（面板）分隔插件，无任何外部依赖，对 HTML 的书写也没有特别的规定，只需要分隔的面板有相同的父节点。支持横向、纵向分割，相邻的面板中间自动给加上了可拖拽的分割线。 54 | 55 | ### 找找灵感 56 | 57 | #### [Froggy：玩儿游戏学会 Flexbox](http://flexboxfroggy.com/) 58 | 59 | 这样说吧，Flexbox 对布局带来的便利只有学会的人能真正体会到，这个 24 关的小游戏，通过灵活运用 Flexbox 把青蛙放到正确的位置，助你掌握 Flexbox 里面的各种属性用途、用法。 60 | 61 | #### [漫画赏析：Linux 内核到底长啥样](https://zhuanlan.zhihu.com/p/26379813) 62 | 63 | 这篇文章为大家解读来自 TurnOff.us 的漫画 “InSide The Linux Kernel” ，非常形象有趣。TurnOff.us 是一个极客漫画网站，作者 Daniel Stori 画了一些非常有趣的关于编程语言、Web、云计算、Linux 相关的漫画。 64 | 65 | ### 视频教程 66 | 67 | #### [Egghead.io：Redux 入门教程](https://egghead.io/courses/getting-started-with-redux?utm_content=bufferec33f&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer) 68 | 69 | 任何应用的状态管理都是至关重要的，Redux 被部分同学误解为是给 React 应用使用的状态管理工具，实际上他可以应用到更广义的 JS 应用中，本视频教程由 Redux 的作者（那个让 HMR（模块热更新）成为前端开发标配的男人）亲自录制，免费开放到了 Egghead.io 上，想学的赶紧去。 70 | 71 | #### [JS 驱动网站的 SEO 最佳实践](https://www.youtube.com/watch?v=JlP5rBynK3E) 72 | 73 | 来自 Google 的工程师 John Mueller，跟大家分享现代网站（主要指大量使用 JS 网站） SEO 最佳实践，澄清了社区中关于 JS 网站 SEO 的一些认识误区，并给了不少有用的建议，需翻墙。 74 | 75 | ### One More Thing 76 | 77 | 如果觉得本文对你有帮助，请不要吝啬 star。如果对文中的内容有任何疑问，欢迎提 Issue 讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/feweekly)。或者扫描下方二维码订阅微信公众号。 78 | 79 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 80 | 81 | Happy Hacking 82 | -------------------------------------------------------------------------------- /issues/Issue-50.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第50期：React 状态管理 + Vue.js 作弊条 + 命令行技巧 2 | 3 | > 因为休假今晨返京，所以本期内容发周日晚才发出来。本期在 IDE、命令行、React、Vue 等方面都有涉及，还收录了 csswizardry 博主的开发环境和装备。以下是精选内容，请享用。 4 | 5 | ### 技术动态 6 | 7 | #### [React v15.5.0 正式版发布](https://github.com/facebook/react/releases) 8 | 9 | Facebook 近期发布了 React v15.5.0 小版本，该版本的变化主要包括增加 CreateClass 和 PropTypes 的弃用警告和部分 Bugfix，具体可以参照原文，需翻墙。 10 | 11 | #### [Dropbox：Brotli 静态资源压缩算法实战](https://blogs.dropbox.com/tech/2017/04/deploying-brotli-for-static-content/) 12 | 13 | 这篇文章来自 Dropbox 工程团队，他们在自己的服务中部署了 Brotli：比 gzip 压缩还要小 20% 的压缩算法，用于提供静态资源，文中有详细的数据、实现方案、以及部署之后发现的问题。 14 | 15 | ### 文章教程 16 | 17 | #### [async/await 甩 Promise 几条街的 6 大理由](https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9) 18 | 19 | Node.js v7.6.0 中已经天然开启了 async/await 特性的支持，如果你还不知道他们是啥，放下手头的事情研究下先。async/await 可以说是更加优雅的 JS 异步处理方式，写出来的代码比 Promise 更加简洁，这里列出了 6 大理由，哈哈~ 20 | 21 | #### [Grid Garden：交互式的 Grid 布局学习园地](http://cssgridgarden.com/) 22 | 23 | Grid Garden 是一个交互式的 Grid 布局学习园地，代码和演示并排展示，一步步教你学会 Grid 布局的各种属性。 24 | 25 | #### [如何处理 Node.js 中的 Unhandled Promise Rejection](http://thecodebarbarian.com/unhandled-promise-rejections-in-node.js.html?utm_source=javascriptweekly&utm_medium=email) 26 | 27 | Node.js 从 V6.6.0 开始，会在命令行中把未处理的 Promise Rejection 打印成 Warning，而 Promise Rejection 通常意味着我们的应用抛出了错误，未来的 Node.js 版本遇到 Promise Rejection 会直接抛错而不是简单的警告，我们在现在的代码中该如何处理这种问题？有什么坑？都在这篇文章里啦。 28 | 29 | #### [MobX vs Redux: Comparing the Opposing Paradigms](https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ%3D%3D&mid=2651226268&idx=1&sn=3eb78e7933ba951d1b8d6b9d69a240be&chksm=bd4959188a3ed00e1c941d8893fd2b496ed0afd648b8b1a8b7c301178ba0e5fd52f681ade723&scene=0&key=87f047796d968ecc232ede698) 30 | 31 | Redux 与 MobX 是 React 生态中最火热的状态管理工具，社区也一直没有停止对上述两者的讨论。在不久前结束的 React Conf 2017 中，Preethi Kasireddy 也做了相关分享，MobX vs Redux: Comparing the Opposing Paradigms，让我们来看看她的观点是怎样的。英文好的同学可以去 Youtube 上看视频。 32 | 33 | #### [你看不到的 CSS 属性](https://madebymike.com.au/writing/the-invisible-parts-of-CSS/) 34 | 35 | 前端日常工作中，你的首要目标可能就是让页面元素看起来跟设计图完全相同，实现目标的过程跟结果相比起来可能并不是那么重要，这也意味着，使用 CSS 的时候，我们会更关心视觉效果而不是 CSS 究竟是如何工作的，有过部分工作经验的同学可能已经意识到，CSS 代码的视觉效果会受到部分不可见属性的影响，比如 display 属性，怎样才算是真的掌握了 CSS ？通过这篇文章认真学习不可见属性。 36 | 37 | ### 开发工具 38 | 39 | #### [Reactide：专门为 React 定制的 IDE](https://github.com/reactide/reactide) 40 | 41 | Reactide 是收款专门为 React 定制的集成开发环境，支持 Windows、Mac，目测也是使用类似于阿童木的技术编写的，使用 Reactide 开发 React 应用不需要任何配置，你只需要打开文件、编辑、保存，就能预览效果。还在早期开发阶段，有兴趣的同学可以试试。 42 | 43 | #### [bash 入门学习指南](https://github.com/Idnan/bash-guide) 44 | 45 | 第 49 期周刊中有篇题为《优秀的程序员都喜欢命令行》的文章，而 bash 是众多命令行环境中的经典，这篇文章列出了能够在 bash 中完成的各种操作，比如文件、目录、文本、网络等，没有非常复杂的参数讲解，非常适合入门。 46 | 47 | #### [通过 .npmrc 打磨你的 Node.js 开发环境](https://nodesource.com/blog/configuring-your-npmrc-for-an-optimal-node-js-environment) 48 | 49 | 对于 Node.js 开发者来说，每天使用 npm 命令行的次数恐怕是仅次于编辑器的，Node.js 生态的蓬勃发展离不开 npm，npm 命令行工具是高度可配置和自定义的，这篇文章列出了可以通过 .npmrc 来完成的优化你开发环境的全局配置。 50 | 51 | #### [Harry Roberts 的开发环境和装备](https://csswizardry.com/uses/) 52 | 53 | 不知道 Harry Roberts 的同学总该知道 csswizardry.com 这个网站吧，他就是这个网站的博主，他在这篇文章中贴出了自己的开发环境和装备，工欲善其事必先利其器，如果你想效率非常，对开发环境的调校和练习是必不可少的。 54 | 55 | ### 找找灵感 56 | 57 | #### [Vue.js 2.2 API 作弊条](https://vuejs-tips.github.io/cheatsheet/) 58 | 59 | 这个作弊条完整列出了 Vue.js 2.2 版本的全部 API，并且附上了到官方文档的链接，排版也一目了然，喜欢使用作弊条的同学可以打印出来了。 60 | 61 | #### [调用 JS 函数的 11 种姿势](https://gist.github.com/myshov/05800f083a0afce56e0f782314a103eb?utm_source=javascriptweekly&utm_medium=email) 62 | 63 | 这个 gist 列出了调用 JS 函数的 11 种姿势，然后给大家挖了一个大坑，后面的评论区还有不少补充，估计大多数同学只用过其中的几种，站在个人角度，冷门的方式不建议用，但是站到你面前，你要能认出来。 64 | 65 | ### 精彩问答 66 | 67 | #### [如何通过 HTTP Header 让你的应用更安全？](https://www.smashingmagazine.com/2017/04/secure-web-app-http-headers/) 68 | 69 | 这篇发表在 smashingmagazine 的文章介绍了如何通过设置恰当的 HTTP Header，让你的应用更安全，具体来说就是如何避免被人内嵌、如何避免 XSS、如何避免被缓存、如何避免点击劫持、如何避免嗅探。严肃的工程师都应该把这些安全措施用到实际项目中。 70 | 71 | #### [工程师面试为什么要考算法和写代码？](https://mp.weixin.qq.com/s?__biz=MjM5ODIzNDQ3Mw%3D%3D&mid=2649966803&idx=1&sn=6485fd28c30d5b7c711d00a89f2e82cc&chksm=beca38d589bdb1c313cf18d229603dbbb575938e467ce1b6eb233c2c118f14c9df3f47bf6a53&mpshare=1&scene=24&srcid=0331wM4Q) 72 | 73 | 很多面试工程师职位的抱怨，为什么面试的时候老是要考什么算法呀，还要现场写代码？弄得大家天天去刷面试题，这些有什么用？这篇文章聊了这么做的原委，笔者非常赞同。不是为了考算法而考算法，面试官需要在短暂的面试时间内确定候选人是否够聪明、是否能出活。 74 | 75 | ### One More Thing 76 | 77 | 如果对文中的内容有任何疑问，欢迎留言讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/feweekly)。或者扫描下方二维码订阅微信公众号。 78 | 79 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 80 | 81 | -------------------------------------------------------------------------------- /issues/Issue-49.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第49期：React 和 Vue.js SSR 框架 + 微信小程序 + Grid 布局 2 | 3 | > 本周收录的内容包含主流前端框架 React、Vue.js、Angular 的版本更新和周边扩展；CSS 方面，Grid 布局是值得关注的；开发效率方面：有 2 篇关于 Git、Webpack 的技巧。内容如下，请享用。 4 | 5 | ### 技术动态 6 | 7 | #### [Angular 4.0.0 正式版发布](http://angularjs.blogspot.hk/2017/03/angular-400-now-available.html?utm_source=javascriptweekly&utm_medium=email) 8 | 9 | Angular 近期发布了 4.0 正式版，笔者只能感叹前端社区的版本号真是越来越逆天了，4.0 版本与 2.x 版本几乎是完全兼容的，内含的改进包括：更小的文件体积、视图引擎的大幅度改进，能节省模板编译产生的代码 60% 左右，此外还提供了支持服务端渲染的项目参考、最新版本的 TypeScript 支持等。看起来 Google 在 Angular 上投入了很大的精力，你跟么？ 10 | 11 | #### [微信小程序 6 大新能力全面解读](https://mp.weixin.qq.com/s?__biz=MzI4ODUxNTczMA==&mid=2247484533&idx=1&sn=c128948bffaf65893e9d4c93289ab35e&chksm=ec3c7788db4bfe9e5a1d39ad9b4cf12a79d3c3a7d66ce2d2b3d871ac2d5b73e6db381a6e94ac&scene=21#wechat_redirect) 12 | 13 | 微信小程序在 3 月 27 日晚 10 点突然爆出大新闻。微信为小程序开放了 6 大新能力，在知晓程序的这篇文章中，你将看到小程序 6 大新能力的最靠谱解读。 14 | 15 | #### [轻松一刻：left-pad 事件周年纪](https://twitter.com/i/moments/847043675364507648?utm_source=nodeweekly&utm_medium=email) 16 | 17 | 去年这个时候，JS 社区发生了让很多开源包和开发者奔溃的 "left pad" 事件，随后就有人唱衰 JS 社区，但是整个社区又做了很多事情来避免类似问题，这里是一些比较有趣的推特内容，无聊的时候可以看看。 18 | 19 | ### 文章教程 20 | 21 | #### [通过实例搞懂 Grid 和 Flexbox 两种布局方式](http://tutorialzine.com/2017/03/css-grid-vs-flexbox/) 22 | 23 | 做前端的同学不光要着眼于 JS 的变化，CSS 领域也在不断演化，从早期的 table 布局，到后来的 div + css 布局，再到 flexbox 布局，现在出现了更好用的 grid 布局，对于新出的这两种，flexbox 和 grid 有何异同？对比起来可能学习更快。 24 | 25 | #### [透视 webpack 构建，把 CommonsChunkPlugin 用到极致](https://medium.com/webpack/webpack-bits-getting-the-most-out-of-the-commonschunkplugin-ab389e5f318) 26 | 27 | webpack 官方开发组在 twitter 上发起了一个活动，让大家使用 webpack-bundle-analyzer 把打包后的 webpack 依赖可视化截图发出来，然后给诊断 webpack 配置不合理的地方，这篇文章把大家典型的错误姿势做了纠正，你需要自己研究下，很大概率，你用的姿势也不对。 28 | 29 | #### [声明 Vue.js 组件模板的 7 种姿势](http://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/) 30 | 31 | 这篇文章梳理了声明 Vue.js 组件模板的 7 种方式，并举了比较具体的例子来说明，当然这其中方式在代码可读性、可维护性、模块化等方面都有不小的差别，你所要做的就是涨点只是，选取自己最舒适的。 32 | 33 | ### 开发工具 34 | 35 | #### [最常用的 Git 奇技淫巧](https://github.com/git-tips/tips) 36 | 37 | 这里列出了超过 50 个 Git 相关的技巧，给出了每个技巧需要的命令和能解决的问题，想真正掌握 Git 操作？除了看 Git 内核之外，还需要对常用的命令勤加练习，这里就是练习秘籍。 38 | 39 | #### [手把手教你配置 Webpack + Vue + TypeScript 开发环境](https://medium.com/@hayavuk/setting-vue-up-for-typescript-goodness-a6ddc4072f4f) 40 | 41 | 这篇文章先是花了不少篇幅跟你解释为什么要选择 .vue 文件的方式来做 Vue.js 开发，接下来是为什么选择 TypeScript，然后手把手教你如何配置他们的开发环境，如果你做类似事情的时候遇到问题，这会是不错的参考。 42 | 43 | ### 代码框架 44 | 45 | #### [Vue Typeahead：输入框自动完成组件](https://github.com/pespantelis/vue-typeahead?utm_campaign=Revue%20newsletter&utm_medium=Newsletter&utm_source=revue) 46 | 47 | Typeahead 这种交互方式已经很常见了，鼻祖就是 Google 的搜索建议，这是 1 个为 Vue.js 开发的输入框自动完成组件，做用户界面和管理后台的都应该能用得上。官网的 Demo 使用了 Twitter 的 API，使用可能不那么流畅，即使翻墙了也是如此。 48 | 49 | #### [React 前后端同构应用框架 Next.js 发布 2.0 版本](https://zeit.co/blog/next2) 50 | 51 | Next.js 在前端周刊第46期中已经收录，其出现的主要动机是提供一个前后端同构应用的脚手架，Github star 数量超过 1W，近期正式发布了 2.0 版本，其主作者在 React Conf 2017 上也 Next.js 做了演讲和布道，想在 React 前后端同构应用上少走弯路？强烈建议试试这个。 52 | 53 | #### [Vue.js 前后端同构应用框架 Nuxt.js](https://github.com/nuxt/nuxt.js) 54 | 55 | 该项目受 React 领域中的 Next.js 启发而产生，主要目的是便利大家开发 Vue.js 服务端渲染的应用，诞生的还比较晚，目前还没有发布 1.0 正式版，保守的同学可以再等等。侧面反映了 Vue.js 在开发者群体中受欢迎的程度。 56 | 57 | #### [Choices：轻量级的输入框、选择列表扩展插件](https://joshuajohnson.co.uk/Choices/) 58 | 59 | Choices.js 提供了类似于 Select2 和 Selectize 的输入框和选择列表扩展功能，但是不依赖 jQuery，源代码很小，支持多种自定义配置，首页有常见业务场景中需要的标签输入框、多选列表、单选列表、级联选择的 Demo。 60 | 61 | ### 精彩问答 62 | 63 | #### [为什么优秀的程序员喜欢命令行？](https://mp.weixin.qq.com/s?__biz=MzAxODI5ODMwOA==&mid=2666540615&idx=1&sn=43a27036709a4d65a086c6efd8ac5e95&chksm=80dceaecb7ab63fa14724d8ed890fd69001854a0088cd0c3055da7a66786d605aa811d335adc&mpshare=1&scene=24&srcid=0330HEHMv2zBX5bU89LMEntG&key=87f047796d9) 64 | 65 | 要给优秀的程序员下一个明确的定义无疑是一件非常困难的事情。擅长抽象思维、动手能力强、追求效率、喜欢自动化、愿意持续学习、对代码质量有很高的追求等等，这些维度都有其合理性，不过又都略显抽象和主观。这篇文章的作者有他独到的观点，我也非常赞同，文中列出了工程师可以通过命令行完成的很多事情。 66 | 67 | #### [ES6 中的 const 到底意味着什么？](https://medium.com/the-node-js-collection/what-does-const-stand-for-in-es6-f7ab3d9e06fc) 68 | 69 | const 是 ES6 中变量声明的新方式，表面意思是声明的变量不可被改变，从底层来看，到底是什么不可被改变？从其他语言转 JS 的同学可能会有些疑惑。用 const 声明的数组或者对象，或者类型实例能否被改变？能被怎样改变？你都清楚么？ 70 | 71 | #### [使用淘宝镜像加速 Electron、Node-Sass 的安装速度](http://zqlu.github.io/2016/05/10/taobao-nodejs-mirror/) 72 | 73 | 可以说淘宝的镜像给国内的开发者节省了很多时间，大到操作系统，小到各种工具。这篇短小的文章介绍了如何在项目中使用淘宝镜像为 Electron 和 Node-Sass 的安装加速，希望能缩短你的搭环境时间。 74 | 75 | ### One More Thing 76 | 77 | 如果对文中的内容有任何疑问，欢迎留言讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/feweekly)。或者扫描下方二维码订阅微信公众号。 78 | 79 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 80 | 81 | -------------------------------------------------------------------------------- /issues/Issue-54.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第54期：Prepack 引发社区小高潮 2 | 3 | > 你看到这篇文章的时候，在德国举行的，2017 年 CSSConf.EU 和 JSConf.EU 应该已经闭幕了，从推特上放出来的资料来看，干货确实不少，好学的同学有这个信息应该就够了。Facebook 开源 JS 代码优化工具 Prepack 的事情貌似又引发了社区的一波小高潮，相信理性的你也有自己的判断。下面是本周精选内容，请享用！ 4 | 5 | ### 技术动态 6 | 7 | #### [Chrome Headless 终于来了](https://developers.google.com/web/updates/2017/04/headless-chrome) 8 | 9 | Headless Chrome 在 Chrome 59 中已经可用，把 Chrome 的强大能力带到了命令行中，搞浏览器端持续集成和功能测试的同学可以上手玩玩了？这篇文章作为入门。稍微解释下 Headless 的概念，只需要通过命令行去访问，不需要用户界面的工具都可称之为 Headless，早期的 PhantomJS 就属于这种。 10 | 11 | #### [Facebook 开源 JS 代码优化工具 Prepack](https://www.zhihu.com/question/59360593) 12 | 13 | Facebook 近两月在开源领域动作频频，最近又开源了 Prepack：优化 JS 源代码的工具，实际上它是通过部分求值器（Partial Evaluator）在编译时执行原本在运行时的计算过程，并通过代码重写来提其执行效率。该怎么看待 Prepack？知乎上不少同学从不同角度发表了看法。 14 | 15 | ### 文章教程 16 | 17 | #### [如何更好的组织 React 项目的代码？](https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1) 18 | 19 | 项目代码的组织方式在很大程度上决定了新手上手项目的速度，项目后期的维护成本，基于代码角色（比如 component、container、action、reducer）的代码组织方式被很多人使用，也出现在很多脚手架工具中，那么这种组织方式到底适不适合项目的长远发展呢？从个人经验来说，基于业务领域的顶层组织可能更适合长远的可维护性。这篇文章给出了可行的代码组织建议。 20 | 21 | #### [Nest：使用 TypeScript、面向对象和函数式变成写后端](https://kamilmysliwiec.com/nest-final-release-is-here-node-js-framework-built-top-of-typescript) 22 | 23 | Nest 是一款使用 TypeScript 开发的 Node.js 框架，结合了面向对象和函数式编程的思想，基于 express 构建，对后端应用的结构做了更高的分层和抽象。你不一定需要使用，可以透过这篇文章看看它的设计思想。 24 | 25 | #### [给 Node.js 新手：提高效率必备的工具和库](https://node.university/blog/725514/node-toolchain) 26 | 27 | 不少刚入门 Node.js 的同学可能都会问这个问题，新手该如何利用社区中的工具和库最大程度的提高自己的效率呢？JS 语言基础当然是不可少，因为如果你没有提高效率的基础知识，效率自然无从谈起。接下来就是工具和库的选择，要做到尽量少的浪费时间，这篇文章做了梳理，包括编辑器、代码库、命令行工具等几大类。 28 | 29 | #### [关于监控的几个基础问题](https://mp.weixin.qq.com/s?__biz=MzA3MDMwOTcwMg==&mid=2650004810&idx=1&sn=0c22de4721d8f7c8118ba45e4a7bb6b1&chksm=8739bf63b04e3675ccd5e803e981fd0f188d25a247abad16692207a100eeaff3184895184bf2&mpshare=1&scene=24&srcid=05036Fr9uHOXKjccJHMdQ0zb&key=454f3c8ee53) 30 | 31 | 如果你觉得系统监控跟前端没啥关系，那就认识太局限了。页面的加载速度、JS 报错的数量趋势都是前端工程师应该负责的范畴，但是具体到监控，很多时候，做了跟没做一样，有时甚至都没做。介绍监控的常识问题，非常值得你阅读。 32 | 33 | ### 开发工具 34 | 35 | #### [pkg：把 Node.js 应用打包成可执行文件包](https://github.com/zeit/pkg) 36 | 37 | zeit.co 出品的命令行工具，帮你把 Node.js 应用打包成可执行文件，可以直接部署到任何环境，支持跨平台，没有 Node.js 运行时也是没问题的。基于他你把 Node.js 应用打包成安装包分发给客户。国内貌似阿里有实践，但是没有系统的开源出来。 38 | 39 | #### [codecopy：让你成为更好的代码摘抄员](https://github.com/zenorocha/codecopy) 40 | 41 | 或多或少，我们都会从网页粘贴代码到自己的项目中，codecopy 是一款加速你代码摘抄过程的浏览器插件，在页面所有疑似代码片段的地方增加复制按钮，目前支持 Chrome、Firefox，支持的网站基本包括了所有程序员常去的网站，比如 GitHub、GitLab、Medium、NPM 等。 42 | 43 | #### [create-next-app：快速开始 React + Next.js 项目](https://open.segment.com/create-next-app) 44 | 45 | create-next-app 看名字就很像 create-react-app，能够快速的帮你开始一个 React + Next.js 的项目，Next.js 不多解释了。该命令行工具简化项目初始化之外，还提供了超过 10 个项目模板供你选择，比如你可以选择性的加入 Redux 或者 Mobx 等 React 全家桶玩具。 46 | 47 | #### [AppiconMaker：帮你生成跨平台的应用图标](http://appiconmaker.co/) 48 | 49 | AppiconMaker 是一款在线的图标缩放工具，你提供原图，它输出能直接导入到 50 | Xcode 或 Android Studio 的不同尺寸的应用图标，如果想用离线版本，可以看看 makeappicon.com。 51 | 52 | ### 代码框架 53 | 54 | #### [rn-splash-screen：用 JS 控制的 APP 闪屏组件](https://github.com/mehcode/rn-splash-screen) 55 | 56 | APP 闪屏是 iOS 中率先使用的提高用户感知速度的设计，后来部分 APP 拓展了这个设计的外延，在启动的时候展示或者播放广告，在 React Native 中也是可以实现的，这个库同时支持 iOS 和 Android。 57 | 58 | #### [react-native-masonry：灵活的砖块布局组件](https://github.com/brh55/react-native-masonry) 59 | 60 | 砖块布局（Masonry Layout）常用来展示多列的多图页面，在 WEB 端和 APP 端都比较常见，react-native-masonry 给你提供了可以直接在 react-native 中使用的组件，支持动态列、图片渐进加载以及事件绑定。 61 | 62 | ### 视频教程 63 | 64 | #### [egghead.io：20 分钟掌握 async/await ](https://egghead.io/courses/asynchronous-javascript-with-async-await) 65 | 66 | async/await 能让 JS 的可读性再上一个台阶，但实际使用中你可能还是会碰到不少问题，比如如何和匿名函数、箭头函数结合使用？多个 async 如何排列性能最好？花 20 分钟学习下这里的课程，或许你能发现自己之前的不正确用法。 67 | 68 | ### 精彩问答 69 | 70 | #### [Git 如何提交只改了文件名大小写的变更？](http://stackoverflow.com/questions/17683458/how-do-i-commit-case-sensitive-only-filename-changes-in-git) 71 | 72 | 在对文件命名大小写不敏感的文件系统中，如果你改了文件名（只是大小写变化），Git 默认模式是识别不了这种变化的，自然就无法提交，那该怎么做呢？有不少方法，看看 StackOverflow 的讨论。当然绕过这个问题的办法是约定所有的文件名小写。 73 | 74 | #### [如何知道仓库的代码行数？](https://zhuanlan.zhihu.com/p/26684427) 75 | 76 | 有句话，可能很多人忽略，但是却是个不争的事实：没有 BUG 的代码就是没有代码。优秀的工程师是能用更短小、简洁的代码写出相同的功能的，即使第一次没有写出来这种代码，他通过后续的重构也能达到，那么怎么跟别人证明重构能让代码变少呢？你需要一个计算代码行数的工具。 77 | 78 | ### One More Thing 79 | 80 | 如果觉得本文对你有帮助，请不要吝啬 star。如果对文中的内容有任何疑问，欢迎提 Issue 讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/feweekly)。或者扫描下方二维码订阅微信公众号。 81 | 82 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 83 | 84 | Happy Hacking 85 | -------------------------------------------------------------------------------- /issues/Issue-61.md: -------------------------------------------------------------------------------- 1 | # 前端周刊第61期：你离 CTC 有多远？ 2 | 3 | > 最近阿里云的美女工程师张秋怡被 Node.js 社区吸纳为 CTC（核心技术委员会）成员，只有对 Node.js 社区有足够大贡献的人，才会被吸纳为 CTC 成员，张秋怡做了哪些贡献？如果你想参与开源社区，她是个很好的参照。本周信息量最大的部分非 Fluent Conf 2017 莫属了，我只是给了个入口，爱学习的同学自己去折腾吧。 4 | 5 | ### 技术动态 6 | 7 | #### [Webpack 3 发布正式版](https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b) 8 | 9 | 虽然 Webpack 3 正式版发布两周了，但是是个非常值得收录的事件，本次发版完全是提供社区投票所产生的功能需求，并且不再像之前那样不同版本之间不相互兼容。本次发版的旗舰特性是 Scope Hoisting，目的是为了提高打包后代码的运行效率，其他特性更包括 Magic Comments，能让打包后的代码更易阅读，如果还有其他你想要的特性，可以去它的投票页面看看。 10 | 11 | #### [Vue Conf 2017 国外版演讲精选](http://vuejsdevelopers.com/2017/06/25/vue-conf-2017/?jsdojo_id=revue_vcf&utm_campaign=Revue%20newsletter&utm_medium=Newsletter&utm_source=Anthony%20Gore) 12 | 13 | 上周在波兰举行的 Vue Conf 2017 已经结束，与会人数超过 300 人，虽然声称是全球首届，但是实际上比国内的要晚一个月左右，这篇文章精选了本次大会中几个比较精彩的演讲，感兴趣的同学可以看看，想提高英语的同学，可以对照着中文看看尤雨溪的开题演讲。 14 | 15 | #### [Fluent Conf 2017 日程表](https://conferences.oreilly.com/fluent/fl-ca/public/schedule/grid/public/2017-06-20?view=list) 16 | 17 | 那个用各种动物做书籍封面的出版社也喜欢组织各种技术交流大会，Fluent Conf 算是 WEB 领域综合性的技术交流大会，我连续看了几年，每次都收获不小。这个日程表上有很多演讲的讲稿，如果想看视频自己去搜吧，大会共 4 天，前 2 天是各种 Workshop、短期闭门培训，后 2 天演讲比较多。 18 | 19 | #### [React Native 月刊第 1 期](http://facebook.github.io/react-native/blog/2017/06/21/react-native-monthly-1.html) 20 | 21 | React Native 社区大玩家组织的月度会议纪要，诸如 Airbnb、Shouten、Wix 等公司都会通报他们遇到的问题、在解决的问题、工程经验，从中不难窥探出 React Native 大致的演化方向：模块化，也能看到这些大玩家在使用哪些工具更好的解决 React Native 应用的问题，比如打包工具、E2E 测试工具。 22 | 23 | ### 文章教程 24 | 25 | #### [注释良好的 CSS 代码应该长啥样？](https://css-tricks.com/well-documented-css-codebase-look-like/?utm_source=CSS-Weekly&utm_campaign=Issue-271&utm_medium=email) 26 | 27 | 社区中就代码可维护性的讨论 JS 比 CSS 多太多，实际上 CSS 也是写起来容易，维护起来难的语种，注释和文档良好的 CSS 代码能够保障代码一致性，大幅度提高代码可维护性，帮助团队形成编码时的“共同语言”，那么注释良好的 CSS 代码该包含哪些要素呢？理解这篇文章再加以实践，相信能提高不少。 28 | 29 | #### [为什么我选 React 而不是 Vue](https://medium.com/@CalinLeafshade/why-i-chose-react-over-vue-3dd9a230b507) 30 | 31 | React 和 Vue 可以说是当下大热的前端框架，而笔者对 Vue 的第一印象是：它怎么既像 Angular 又像 React。本文作者用 React 和 Vue 做过几个项目之后，还是更加倾向于使用 React，并给出了他的三大理由，技术选型没有最好的，只有最合适的，如果你是 Vue 的死忠粉，更应该看看这个。 32 | 33 | #### [React 组件解耦重构的技巧](https://medium.com/dailyjs/techniques-for-decomposing-react-components-e8a1081ef5da) 34 | 35 | 有没有写过 render 函数巨大无比的 React 组件？为啥别人的 React 组件代码看起来那么优美？可能是因为没意识到这样做的好处，也可能是因为没有掌握方法论，这篇文章奉上 3 个立即可用的 React 组件解耦重构方法。 36 | 37 | #### [Express.js 中的 Session 是如何工作的？](http://nodewebapps.com/2017/06/18/how-do-nodejs-sessions-work/) 38 | 39 | 几乎所有需要维护用户数据、会话状态的 WEB 应用都需要使用 Session，作为开发者不光要知道如何使用 Session 还要知道它是如何工作的。这篇文章介绍了 Session 是什么？如何存储 Session 数据？如何确定 Session 的存储介质？常见的安全问题和对策。 40 | 41 | #### [边学开发边赚钱的最佳姿势](https://hackernoon.com/the-best-way-to-learn-development-skills-while-getting-paid-in-the-process-a31bfb138287) 42 | 43 | 传统观念都会认为学技能是需要交学费的，有没有可能在学会技能的过程中就开始赚到钱呢？答案是肯定的，尤其是在这个时代，从事创造性劳动的都极有可能获得。这篇文章就介绍了如何在学习开发技能的同学赚到钱的思路，虽然作者只赚了 $11，但是这是一个质的提升。 44 | 45 | #### [像产品一样优化你的交付流水线](https://medium.com/mydr-engineering/treat-your-build-pipeline-as-a-product-61a1b24ae538) 46 | 47 | 靠谱工程师应该具有的三观：技术观、产品观、数据观，本文介绍了如何将 13 条产品设计原则应用到软件交互流水线优化上，取得的效果是平均每天节省 13 个工程师工时，相当于两人日的资源，能做出这样事情的人，贡献的价值自然是巨大的。总之，这是篇道与术并存的文章，如果你只是想优化自己的交付流水线或者学习通用的产品设计原则，都是非常值得阅读的。 48 | 49 | ### 开发工具 50 | 51 | #### [Pencil：类 Sketch 的开源图表软件](https://github.com/evolus/pencil) 52 | 53 | Pencil 项目的愿景是提供所有人都可以免费试用的图表只做软件，完全基于 Electron 开发，目前提供的功能还算强大，如果你是个喜欢平面设计的前端工程师，这个仓库是个很不错的参与开源社区的机会。 54 | 55 | #### [Detox：APP 端到端测试的利器](https://github.com/wix/detox) 56 | 57 | Detox 是高性能的 APP 端到端测试框架，能够在真实设备上运行测试，如真是用户般和 APP 交互，并且提供了天然的 React Native 支持，能够很好的与你的持续集成环节结合起来，并且可以很方便的与 Mocha、Ava 结合使用。 58 | 59 | #### [支持事务的 MongoDB 操作库](https://github.com/e-oj/Fawn) 60 | 61 | 不支持事务是 MongoDB 和其他数据库引擎相比的劣势，而这个仓库基于 MongoDB的两阶段提交特性提供了类似于事务的操作，你可以通过他指定一系列操作，要么全部成功，要么全部失败回滚，不理解事务是啥的同学可以去看看银行转账的例子。 62 | 63 | #### [Vue 开发者工具火狐版](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) 64 | 65 | 虽然现在身边几乎见不到使用火狐浏览器开发调试的同学了，这个工具还是值得发出来，是 Vue.js 原作者尤雨溪发布的。 66 | 67 | ### 精彩问答 68 | 69 | #### [MongoDB 如何给所有的文档增加随机数？](https://stackoverflow.com/questions/27065279/update-all-documents-in-a-collection-with-random-numbers) 70 | 71 | 不需要编写复杂的脚本，因为 MongoDB 中可以执行 JS 代码，如果你恰巧也有类似的需求，此文可作为快速参考。 72 | 73 | #### [React Native 中如何禁用屏幕旋转？](https://stackoverflow.com/questions/32176548/how-to-disable-rotation-in-react-native) 74 | 75 | 准确的表述问题应该是：如何在 XCode 配置应用不响应屏幕旋转，适用于 Native 和 React Native，配置方法很简单，还附带赠送了 Android 中的配置方法。 76 | 77 | ### One More Thing 78 | 79 | 如果觉得本文对你有帮助，请不要吝啬 star。如果对文中的内容有任何疑问，欢迎提 Issue 讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/feweekly)。或者扫描下方二维码订阅微信公众号。 80 | 81 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 82 | 83 | Happy Hacking 84 | 85 | -------------------------------------------------------------------------------- /issues/Issue-57.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第57期：《战争与和平版》的 CSS-IN-JS 黑历史 2 | 3 | > 不知道大家是否注意到，社区中出现的 CSS 尤其是 CSS-IN-JS 风格的轮子轮子越来越多，这个事情在前端社区引发的很多的讨论，或者说是争吵，比如有人说 CSS is Broken，就有人对 CSS is Fine。Cristiano Rastelli 以《战争与和平》为蓝本回顾了历史，也给出了非常赞的观察视角，程序员应该务实，而不是教条，更重要的是保持好奇心。 4 | 5 | 另外第 56 期提到的各种技术大会，已经陆续有人整理适合 WEB 的视频列表，本期收录了我看过的比较精彩的两个，如果你有时间看更多，请移步：Google I/O、JS Conf Europe、Vue Conf。 6 | 7 | 以下是本周精选内容，请享用。 8 | 9 | ### 技术动态 10 | 11 | #### [NPM 5.0 发布：更像 Yarn](http://blog.npmjs.org/post/161081169345/v500) 12 | 13 | 官方的 NPM 5.0 发布日志，你需要知道的版本更新要点：更快，有 Benchmark 表明它比 Yarn 还快；能够自动保持 package.json 里面的缩进；--save 变为默认参数；支持离线模式；支持依赖锁定。官方源上面还只能安装到 4.6.1 版本。 14 | 15 | #### [styled-components 2.0 发布](https://medium.com/styled-components/announcing-v2-f01ef3766ac2) 16 | 17 | 对，就是以抹指甲油图片为图标的那个 CSS-IN-JS 库，我第一次使用就爱上她了，本周发布了 2.0 版本，可以说是真正意义上的大版本，代码体积更小、添加 SSR 支持、发布全新的文档站点、新增多个 helper 函数帮助你实现代码复用、新增 Babel 插件来优化生产环境的代码，最重要的点是你可以直接升级到版本 2.0 而不用做任何更改。 18 | 19 | #### [Autoprefixer 7.0 发布](https://evilmartians.com/chronicles/autoprefixer-7-browserslist-2-released?utm_source=CSS-Weekly&utm_campaign=Issue-266&utm_medium=email) 20 | 21 | 可能部分同学对 Autoprefixer 比较陌生，是能够自动帮你提高 CSS 的浏览器兼容性CSS 预处理工具，各种构建工具都有对应的插件。初版于 4 年前发布的，作者重写整个仓库（从 Coffee 到 Babel）之后，最近发布了 7.0 版本，新版最大变化是升级 BrowserList 到 2.0。 22 | 23 | ### 文章教程 24 | 25 | #### [Stack Overflow 全站切换 HTTPS 之路](https://nickcraver.com/blog/2017/05/22/https-on-stack-overflow/) 26 | 27 | 本周宣布帮助 100W 开发者成功退出 Vim 的程序员社交网站 Stack Overflow 最近宣布了另外一件大事：花了两年时间终于把全站切换到 HTTPS，对于部分正在升级到 HTTPS 或者想升级的同学可以看看，有个心理准备。内容比较全面，从基础设施的迁移、到应用架构、代码逻辑的迁移，都有经验和教训。 28 | 29 | #### [JS 函数的前世今生](https://bocoup.com/blog/the-many-faces-of-functions-in-javascript) 30 | 31 | 函数是 JS 中的一等公民，语言在进化，其中函数的编写、使用方式也在不断进化，这篇文章做了非常不做的梳理和讲解，从早期的函数表达式、函数声明，函数构造，匿名函数，到后来的箭头函数、generator、async 函数，以及不同语法组合的函数，值得看看。 32 | 33 | #### [保障 CSS 编码风格的工具链](https://css-tricks.com/enforcing-css-syntax-style/?utm_source=CSS-Weekly&utm_campaign=Issue-266&utm_medium=email) 34 | 35 | 清晰简洁的代码看起来养眼，读起来也更易懂，在 JS 领域，有很多工具来保障编码风格，比如 ESLint、Standard，也有工具帮你格式化代码，比如 Prettier、JS-Beautify。社区还比较年轻的 CSS 领域呢？早期的 csslint 太难用，但是最近一两年出现了几个比较好的工具，比如代码检查的 stylelint，代码格式化的 stylefmt。 36 | 37 | #### [Style Guide Guide：编写样式规范的指南](http://bradfrost.github.io/style-guide-guide/) 38 | 39 | 比较重视代码重用和用户体验一致性的前端团队在处理复杂的业务都会着手积累自己的样式规范，但实际操作过程中，可能部分样式规范后来沦为纸上的规范，该如何维护真正有价值的样式规范呢？比如样式规范该怎么组织？文档该怎么写？向 Brad Frost 学习。 40 | 41 | ### 开发工具 42 | 43 | #### [sitespeed.io：给你的应用来个全面的性能诊断？](https://www.sitespeed.io/) 44 | 45 | sitespeed.io 完全基于开源工具构建，能够一键对你的 WEB 应用做全面的性能诊断，内涵 Browsertime、ChromeHar、PageXRay 等工具，支持把结构输出到 Grafana，安装方式也比较灵活，近期在关注性能的同学可以看看。 46 | 47 | ### 代码框架 48 | 49 | #### [Shoutem 开源的 React Native 动画组件](https://github.com/shoutem/animation) 50 | 51 | Shoutem 已经被认为是移动领域的 WordPress，可以快速帮用户构建 APP，其在 React Native 上做的事情还是不少，这是他们开源 React Native 的动画组件，支持常见的位置、大小、透明度、坐标轴，动画作者还在 Medium 上发了一篇不错的文章：《Declare Peace with React Native Animations》，感兴趣的可以去搜来读读。 52 | 53 | #### [在 Node.js 顶级作用域中直接使用 await](https://github.com/robertklep/top-level-await) 54 | 55 | 或许你也曾疑惑，为啥 Node.js 里面的 await 语法不能直接使用，而需要在特定的 async 函数中使用，这个 package 源自 Sindre Sorhus 在 twitter 发的一条牢骚，实现的方式也比较 hack，很可能这个特性会出现内置的支持，梦想是要有的，万一实现了呢。 56 | 57 | #### [ensure-error：确保你收到的是 Error 对象](https://github.com/sindresorhus/ensure-error) 58 | 59 | npm 社区贡献的各种 package 在数量上绝对碾压其他语言，但是质量也是参差不齐的，具体到笔者自己踩过的坑就是某些包抛出的错误不是标准的 Error 实例，导致我们的错误处理代码要做特别的改造才不会在处理错误的时候再出错。和 ensure-callback 类似，这个包能确保你拿到的 error 是正确的对象，Sindre Sorhus 这种发现问题解决问题的思路非常值得我们学习。 60 | 61 | ### 找找灵感 62 | 63 | #### [Awesome 系列：函数式编程的资料合集](https://github.com/xgrommx/awesome-functional-programming#javascript) 64 | 65 | Awesome 系列，整理了函数式编程方面的很多不错的演讲、文章、视频，覆盖的语言也比较多，感兴趣的可以慢慢看。 66 | 67 | ### 视频教程 68 | 69 | #### [DevTools: State of the Union 2017](https://www.youtube.com/watch?v=PjjlwAvV8Jg) 70 | 71 | 由 Paul Irish 在 Google I/O 2017 上给大家带来的分享，里面包含大量 Chrome 开发者工具的现场演示，比如：调试 PWA 的功能和技巧；如何解读应用性能、可用性报告；如何使用最新的 async 单步调试功能；如何快速的在开发者工具中编写、保存代码。 72 | 73 | #### [WebAssembly 对 React 究竟意味着什么？](https://www.youtube.com/watch?v=3GHJ4cbxsVQ) 74 | 75 | 程序员卡通作家 Lin Clark 在 JSConf EU 2017 上的演讲，Facebook 是真心想把 React 的性能做到机制，而 WebAssembly 确实快，二者结合起来会怎样？我不剧透了，感兴趣的自己看哈。如果想看 Link Clark 的更多卡通画，可以去搜 ”A Cartoon Guide to“。 76 | 77 | #### [egghead.io：玩转 JS 中的数组](https://egghead.io/playlists/learn-javascript-arrays-in-depth-dbe40331?utm_content=buffer4b7ca&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer) 78 | 79 | 数组可以说是任何编程语言里面最重要的数据类型，JS 也不例外，掌握他们的必要性不必言语，该视频列表涵盖了几乎所有的 JS 数组操作，内涵不少使用数组完成常见任务的特别技巧。 80 | 81 | ### One More Thing 82 | 83 | 如果觉得本文对你有帮助，请不要吝啬 star。如果对文中的内容有任何疑问，欢迎提 Issue 讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/feweekly)。或者扫描下方二维码订阅微信公众号。 84 | 85 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 86 | 87 | Happy Hacking 88 | -------------------------------------------------------------------------------- /issues/Issue-51.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第51期：Vue.js CMS + React Native 轮子 + 奇技淫巧 2 | 3 | > Node.js 社区最高产的工程师 Sindre Sorhus 本周发布了他的第 1000 个 npm 包，详见这里，据 npm 官方统计，全网的 npm 包下载量中有 12% 都跟 Sindre Sorhus 有关。看到这个，你作何感想？另外，部分精彩的文章我已经翻译成中文发到知乎专栏上，就没有收录到前端周刊。下面是本周的精选内容，请享用！ 4 | 5 | ### 技术动态 6 | 7 | #### [谷歌推人工智能绘图工具 AutoDraw](https://www.autodraw.com/) 8 | 9 | AutoDraw 是谷歌推出的人工智能绘图工具，能根据你的手稿作为启发式信息，然后列出你可能想画的内容，对于画画不好的同学可能会很有帮助，不画画没关系，当个玩具也可以。为什么发在前端周刊？你对它的前端是怎么做不感兴趣么？ 10 | 11 | #### [Vue Conf 2017 报名入口](https://vue.w3ctech.com/) 12 | 13 | 全球首届 Vue.js 开发者大会将于 2017 年 5 月 20 日在北京航空航天大学新主楼会议中心举办。Vue.js 作者将出席本次大会，并发表主题演讲。这里是报名入口，早鸟票当天就被抢光了，你如果有女朋友，可以带过去，哈哈！ 14 | 15 | #### [微信公众号可以注销了](https://mp.weixin.qq.com/s?__biz=MjM5NjM4MDAxMg==&mid=2655074573&idx=1&sn=cb31b7bc6332f2cd302a9dd6dcf96bd7&chksm=bd5fb50e8a283c18a19d1949b862906fce8ffeb1f139331e553014bdd94a32e8a1193e18de32&mpshare=1&scene=2&srcid=0412UHDOcVqMiWEHsI7702ck&key=92f5eb06f6e0) 16 | 17 | 微信公众号近期宣布支持自主注销，用户在核实身份信息或者验证帐号主体后，可以在公众号后台发起注销流程。帐号完成注销后，主体注册次数、运营者身份证信息、手机号码、帐号昵称、管理员微信号、注册邮箱等，均可释放。 18 | 19 | #### [如何评价微软开源的 ReactXP ？](https://www.zhihu.com/question/58247259) 20 | 21 | 微软在开源领域动作越来越多，上周开源了 ReactXP，生成能开发跨平台的 React 应用，怎么客观的评价这个动作呢？看看知乎上大家的讨论。 22 | 23 | ### 文章教程 24 | 25 | #### [图解 Chrome 中的滚动锚定机制](https://blog.google/products/chrome/taking-aim-annoying-page-jumps-chrome/) 26 | 27 | 看到这个的时候，再次感慨 Google 做产品就是在做用户体验，不知道你没有遇到过，打开了一个长页面，已经开始阅读，突然页面跳了一下，丢失了你的浏览进度，这通常是因为你看的内容上面还有未加载完成的内容，它加载完就把下面的内容挤下去，产生页面跳跃的感知。Chrome 浏览器已经对这种体验问题做了优化，用了叫做 Scroll-Anchroing 的技术，技术方案细节在本文内的某个链接上。 28 | 29 | #### [集成 Nuxt.js 到现有的 Node.js 项目](https://blog.feathersjs.com/ssr-vuejs-app-with-feathers-and-nuxt-bb7dfd3e6397) 30 | 31 | Nuxt.js 是基于 Vue.js 的前后端同构应用脚手架，Feathers 是 Node.js 的 MVC 框架，当然绝大多数同学在公司不会是从头开始一个新的项目，这篇文章讲了如何把 Nuxt.js 集成到现有的 Feathers 应用中去，对其他的 MVC 框架也有参考价值。 32 | 33 | #### [酷壳：如何重构“箭头型”代码？](http://coolshell.cn/articles/17757.html) 34 | 35 | “箭头型代码”如果嵌套太多，可能看起来很美，因为对称，但是读起来想吐血，因为太长，会相当容易让维护代码的人（包括自己）迷失在代码中，因为看到最内层的代码时，你已经不知道前面的那一层一层的条件判断是什么样的，代码是怎么运行到这里的，所以，那怎么能不写出这种代码呢？这篇文章提供了思路。 36 | 37 | #### [Chrome 里面的 Coverage 功能到底是如何工作的？](http://www.mattzeunert.com/2017/03/29/how-does-chrome-code-coverage-work.html) 38 | 39 | 我本周发了篇文章介绍 Chrome Canary 里面的运行时代码覆盖率功能，这篇文章从源代码的层面研究了这个代码覆盖率功能到底是怎么实现的，文中有彩蛋，看到你就会自己开发 Dev Tools 啦。 40 | 41 | ### 开发工具 42 | 43 | #### [GitHub：开源项目运维自动化工具箱](https://github.com/showcases/tools-for-open-source) 44 | 45 | GitHub 官方整理的能帮助你运维开源项目的工具列表，能把日常的大部分运营工作自动化，比如代码风格检查、持续集成、包管理、变更日志生成、自动找 Reviewer、依赖包过期提醒。说实话，大部分工具其实可以用到公司内部的工程化实践中，前提是你愿意花时间去学习折腾。 46 | 47 | #### [alinode：基于 Node.js 运行时的应用性能管理解决方案](https://alinode.aliyun.com/) 48 | 49 | 官方说法：alinode 是阿里云出品的 Node.js 应用服务解决方案，帮助开发者迅速洞见性能细节，快速定位疑难杂症，直探问题根源。我的说法：没有调查就没有发言权，准备近期使用，之后总结心得出来。 50 | 51 | ### 代码框架 52 | 53 | #### [React Native 微信功能集成实例](https://github.com/weflex/react-native-wechat?utm_campaign=explore-email&utm_medium=email&utm_source=newsletter&utm_term=weekly) 54 | 55 | 该仓库在 React Native 中集成了微信登录、收藏、分享、付款功能，支持 Android 和 iOS 版本，如果你最近在研究 React Native，接下来你很可能会有类似的需求。 56 | 57 | #### [VMS：基于 Vue.js 2.0 的 CMS 系统](https://github.com/ericjjj/vms) 58 | 59 | 类似项目收录过两个，前端类似 vue-admin，但是包含了完整的 Node.js 后端，有比较简单的权限控制（对于复杂的应用略显简陋），集成了常见的后台管理所需的组件：如 WangEditor 富文本编辑器、轻量级 Markdown 编辑器、七牛云图片上传、极光推送等。 60 | 61 | 62 | ### 视频教程 63 | 64 | #### [使用 Nuxt.js 和 Vuex 构建 Vue.js 服务端渲染应用](https://egghead.io/courses/build-a-server-rendered-vue-js-app-with-nuxt-and-vuex?utm_content=bufferb6553&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer) 65 | 66 | Nuxt.js 和 Vuex 是啥这里就不废话了，来自 egghead.io 的课程，从 0 开始，教你如何如何使用 Next.js 来组织应用代码，Vuex 管理状态。 67 | 68 | ### 精彩问答 69 | 70 | #### [toolingtips：如何在 git grep 的时候默认显示行号？](http://stackoverflow.com/questions/11107059/how-to-show-line-numbers-by-default-with-git-grep-command) 71 | 72 | Git 相信很多人都熟悉，grep 自命令可用来快速查找，但是默认的查找结果不显示匹配的代码在哪一行，这其实不利于效率的提升，因为大概率你定位到文件之后还要去文件里再搜一遍才能定位到行，为什么不一步搞定呢？看看这里的第 2 个答案，修改的文件时 ~/.gitconfig。 73 | 74 | #### [toolingtips：如何高效的操作 Mac 中的 Finder 和截图](http://apple.stackexchange.com/questions/400/please-share-your-hidden-macos-features-or-tips-and-tricks?answertab=votes#tab-top) 75 | 76 | Mac 中的文件系统管理器 Finder 和截图相信是很多人常用的，这个帖子里面有些小技巧能让你事半功倍，至少不依赖第三方软件，你确定不去看看？注意是第 1 和第 3 个答案。 77 | 78 | #### [toolingtips：如何让 mongoose 填充嵌套的关联字段](http://stackoverflow.com/questions/19222520/populate-nested-array-in-mongoose) 79 | 80 | 超过 3 个表的关联在复杂的业务中非常常见，mongoose 中有个 populate 查询语法，可以按字段填充关联表里面的数据，那怎么填充嵌套的关联表数据呢？看这里的第2 个答案。顺道吐槽下 mongoose 的文档，谁看谁恶心。 81 | 82 | ### One More Thing 83 | 84 | 如果觉得本文对你有帮助，请不要吝啬 star。如果对文中的内容有任何疑问，欢迎提 Issue 讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/feweekly)。或者扫描下方二维码订阅微信公众号。 85 | 86 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 87 | 88 | Happy Hacking 89 | -------------------------------------------------------------------------------- /issues/Issue-53.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第53期：React 社区的撕逼 2 | 3 | > 本期有篇深度文章介绍 MobX，MobX 的原作者在 Medium 上有[个人频道](https://medium.com/@mweststrate)，写了至少 5 篇长文介绍自己的 React + MobX 心路。此外，[React Amsterdam 技术大会](https://react.amsterdam/#talks)已经闭幕，干货非常多，但需要你花较多时间去消化它的[视频](https://www.youtube.com/watch?v=m_vUUgI0bo8)。以下是本周精选内容，请享用。React 社区的撕逼接下来就是。 4 | 5 | ### 技术动态 6 | 7 | #### [Facebook 官方回应社区对 React 的质疑](https://medium.com/@dan_abramov/hey-thanks-for-feedback-bf9502689ca4) 8 | 9 | 撕逼的事情在国内外都时有发生，本周 Medium 上有篇题为[《Things nobody will tell you about React.js》](https://medium.com/@gianluca.guarini/things-nobody-will-tell-you-about-react-js-3a373c1b03b4)的文章痛批 React，大意为：React 上手太困难，React Native 的 Issue 太多且没人处理，React 及周边工具版本迭代不向前兼容等问题。随后 React 官方维护者 Dan Abramov [发表长文回应](https://medium.com/@dan_abramov/hey-thanks-for-feedback-bf9502689ca4)，澄清了很多外界对 React 的误解。真理越辩越明，仔细看看两篇文章，相信你能收获不少。 10 | 11 | ### 文章教程 12 | 13 | #### [React+MobX 组合与 Vue.js 的详细对比](https://github.com/jarsbe/react-vue-comparison) 14 | 15 | React + Mobx 的组合和 Vue.js 在架构上基本是相同的，这篇文章对这两种技术做了比较细节的对比，还有具体的代码，后来附加上了 Preact 这个轻量级的替代。到底哪个好？没有最好的，只有合适的，只有知道各种技术的优缺点你才会做出更合理的选择。 16 | 17 | #### [代码中添加注释之好坏丑](https://juejin.im/post/5902126aa0bb9f0065e80ea9) 18 | 19 | 有句经典：好的代码自身就是文档。在代码中添加注释有哪些禁忌，有哪些建议，掘金翻译计划已经为你准备好了。当然，如果想写出一手漂亮的代码，还是建议去阅读更有体系的[《The Art of Readable Code》](http://dl.finebook.ir/book/5f/14474.pdf)[彩蛋]，这本书也有中译本，但我强烈建议看英文。 20 | 21 | #### [MobX 内部分治策略详解](http://divideandconquer.surge.sh/#1) 22 | 23 | 大多数同学认为 MobX 是为 React 定制的状态管理工具，这点不可否认，实际上它出现的比 Redux 晚，看到了 Redux 用在实际项目中会带来的问题，对现代前端应用中的 State、View 采用分治策略来击破，让开发者充分体会到响应式编程的好处。这个讲稿是 MobX 作者在 [React Amsterdam](https://react.amsterdam/#talks) 大会上的分享底稿，里面有 4 页能让你掌握 MobX 的思维模型。 24 | 25 | ### 开发工具 26 | 27 | #### [styled-components：把 JS 中的 CSS 进行到底](https://github.com/styled-components/styled-components) 28 | 29 | 写 React 的同学肯定纠结过 CSS 该怎么组织的问题。传统 WEB 开发里面推崇的 CSS、JS、HTML 关注点分离不建议把 CSS 写到 JS 里面，随着开发方式的演化，这种写法总会让人觉得很别扭，因为从概念上来讲组件要具有封装、自治的特点，那么把 CSS 写到组件里面会更容易维护，也能把 JS 的功能发挥到极致，styled-components 就是这样一个库，让你很容的用 CSS 创建比较纯粹的样式组件，一旦你用上它，肯定会爱不释手，我就是这种感觉。 30 | 31 | #### [lint-staged：只检查即将要提交的代码](https://github.com/okonet/lint-staged) 32 | 33 | 很多同学可能用过 npm 里面的 pre-commit 或者类似 husky 的工具来实现代码提交之前的编码风格检查，可有没有这样的痛点：你改了文件 A，但是代码检查工具提示你文件 B、C、D 里面都有不合规的地方，甚至问题还非常多，真是让人沮丧。lint-staged 能帮你只检查要提交的代码，而不是全量检查。 34 | 35 | #### [TypeScript + Node.js 的 Yeoman 生成器](https://github.com/ospatil/generator-node-typescript#readme) 36 | 37 | 想使用 TypeScript 但是嫌工作流工具的拼凑过程太麻烦？可以试试这个 Yeoman Generator，能够让你快速开始使用 TypeScript 编写 Node.js 的包，实际上给浏览器编写也是可以的，生成的代码就包含了各种构建、测试的脚本，甚至还提供了 Visual Studio Code 的任务配置。 38 | 39 | #### [Star History：GitHub 仓库发展史透视工具](http://www.timqian.com/star-history/) 40 | 41 | 基于 Star History 你可以查询任何仓库 Star 数量的变化趋势，有点类似于 Google Trends，但是基于 GitHub 官方 API 提供的精准数据。在你做技术选型、调研的时候可能会比较有用。 42 | 43 | #### [TestCheck.js：让你的测试更健壮](http://leebyron.com/testcheck-js/) 44 | 45 | 请仔细思考这句话：测试只能让你发现 Bug 确实存在，但是不能帮你证明没有 Bug。通常来说，我们的测试只会测试最常见的情形，这样的话覆盖度自然就不是最高，而 TestCheck 能够帮你在测试的时候生成一些随机的输入，助你更早的发现潜在的问题。 46 | 47 | ### 找找灵感 48 | 49 | #### [PWA 应用实例搜罗站点](https://twitter.com/Real_CSS_Tricks/status/857383799822229504) 50 | 51 | 这篇推文列出了三个搜罗 PWA 应用实例的站点，如果你在学习、研发 PWA，没有什么比生产环境的项目更具有研究价值了，可能都需要翻墙，自备梯子。 52 | 53 | #### [Live：前端工程师的入门与进阶](https://mp.weixin.qq.com/s?__biz=MzI3MzQ0NjY4Mg==&mid=2247483740&idx=1&sn=f905f1d4a3457da99bf375d208dcd758&chksm=eb226329dc55ea3f508cdb333fab2e224261d9c3641d091c5637fe78477effc54be3aa0951f8&mpshare=1&scene=2&srcid=0423Mob2KnHfmHW7RXfxz2Ec&key=c78ef623e277) 54 | 55 | justjavac 的知乎 Live：前端工程师入门和进阶，有知友整理出来了学习笔记，里面干货非常多，推荐给在前端路上狂奔的所有同学。 56 | 57 | ### 视频教程 58 | 59 | #### [React Amsterdam 大会学习资料](https://react.amsterdam/#talks) 60 | 61 | React Amsterdam 也是质量非常不错的 React 技术交流会，整体内容分为 React 和 React Native 两条主线，少数几个分享者还就相同主题在 React Conf 2017 上做了分享，大会在 Youtube 上有直播，自己去搜索就好，建议先仔细看看分享日程，然后在视频中选择性观看。 62 | 63 | #### [React Native 经验分享](http://slides.com/windy/react-native-advanced-experience-by-80percent#/) 64 | 65 | 应该是不多的中文的 React Native 实战经验分享，介绍使用 React Native 的好处，使用的现状，踩到了什么坑，最后这部分是参考价值最大的，并且也是篇幅最大的，在使用或者学习 React Native 的同学建议看看。 66 | 67 | ### 精彩问答 68 | 69 | #### [如何在 React Native 启用 ES7 Decorator 特性？](http://moduscreate.com/using-es2016-decorators-in-react-native/) 70 | 71 | ES7 中的 Decorator 特性能让你少些很多重复的代码，写 React 的同学可能经常会碰到需要 bind 上下文的情形，这是用 Decorator 的绝佳场景，关于 Decorator，Google 的工程师 Andy Osmani 有篇经典文章[《Exploring EcmaScript Decorators》](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841)。这篇文章给出了在 React Native 项目中启用 Decorator 的方法。 72 | 73 | #### [Node.js 中的哪些库让你相见恨晚？](https://www.zhihu.com/question/24611701) 74 | 75 | 知乎上的一个问题，列举了不少使用比较多的库，不过个人觉得，最应该参考的是 npmjs.com 上被依赖最多的 package 列表，这个列表是全自动动态更新的，去哪里看？[猛击这里](https://www.npmjs.com/browse/depended)。 76 | 77 | ### One More Thing 78 | 79 | 如果觉得本文对你有帮助，请不要吝啬 star。如果对文中的内容有任何疑问，欢迎提 Issue 讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/feweekly)。或者扫描下方二维码订阅微信公众号。 80 | 81 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 82 | 83 | Happy Hacking 84 | -------------------------------------------------------------------------------- /issues/Issue-62.md: -------------------------------------------------------------------------------- 1 | # 前端周刊第62期：学习学习再学习 2 | 3 | > 腾讯前端技术大会（TFC）和全球技术领导力峰会（GTLC）都于上周闭幕，我翻看了下讲稿，有价值的参考还是不少，不过本周最推荐的部分还是《Learning How to Learn》这门需要你花时间去学习、掌握的课程。最近在招实习生，也收录了部分高质量的面试资料分享给大家。以下是本周精选内容，请享用。 4 | 5 | ### 技术动态 6 | 7 | #### [全球技术领导力峰会 PPT 下载](http://gtlc.geekbang.org/#schedule) 8 | 9 | 学习新知、探索未知、提升自我是技术人的本能，而对技术领导者来说，技术之外，更是有着广袤的世界亟待探索。全球技术领导力峰会（GTLC）是由极客邦主办的技术领导人盛会，今年是第二届，主题为“探索圆外的世界”，邀请了互联网及传统行业的权威技术领袖分享他们关于技术、行业、商业、投资、领导力的实践与见解。有志于成长为技术领导者的同学可以细细研究下。 10 | 11 | #### [腾讯 WEB 前端大会 PPT 下载](http://tfc.alloyteam.com/ppt.html) 12 | 13 | 腾讯 WEB 前端大会（TFC）2017 是由腾讯主办，广邀国内外的前端大牛，有著名流行框架的作者、知名前端书籍的作者、WEB 工程化方面的权威等。部分讲师是从腾讯上千名前端工程师中精挑细选的优秀高级工程师，内容不仅涵盖 WEB 新技术、Node.js、框架、工程化、 图形处理等前端前沿内容 ，还包含极致的性能优化、海量用户运营等具有腾讯前端特色的宝贵经验。没有去现场的同学，PPT 的学习不可错过。 14 | 15 | ### 文章教程 16 | 17 | #### [前端框架发展简史](https://medium.com/this-dot-labs/building-modern-web-applications-in-2017-791d2ef2e341) 18 | 19 | 原标题为《Choosing a frontend framework in 2017》，实际上介绍了自 Backbone 以来，各种前端框架（Angular.js、Angular、React、Ember.js等）出现的背景及后来的演变路径，可见作者对于每个框架的特点都非常熟悉，文末有人问作者为啥没提到 Vue.js，作者的观点也比较明确：Vue.js 是个非常不错的框架，目前集成了大多数框架的优点，但是还没有创造出新的特性。 20 | 21 | #### [你应该知道的 6 个 React Native 性能贴士](https://www.simplytechnologies.net/blog/2017/6/6/6-tips-you-want-to-know-about-react-native-performance) 22 | 23 | React Native 本身性能是非常好的，但是代码写的不好也很容易出现性能较差的 APP，在 Android 上尤其如此，为什么会如此？写出高性能的 APP 有哪些坑要避开？这篇文章开局介绍了 React Native 的基本工作原理，然后给出了几条操作性非常强的建议，内容涵盖组件优化、动画、导航等。 24 | 25 | #### [像产品一样打造样式规范](https://seesparkbox.com/foundry/style_guides_as_products?utm_source=CSS-Weekly&utm_campaign=Issue-271&utm_medium=email) 26 | 27 | 续前篇《想产品一样打造交付流水线》，原题为《Style Guides as Products》，很多同学都知道样式规范的重要性，部分公司制定了自己的样式规范，只有极少数公司的样式规范能真正落到实处，成为开发者主动拥抱和维护的项目。你有没有觉得这跟做产品很像，技术人的产品观可以体现在很多地方，这次你也跟作者一起思考下如何用产品思维来打造样式规范吧。 28 | 29 | ### 开发工具 30 | 31 | #### [bundlesize：打包后代码体积的哨兵](https://github.com/siddharthkp/bundlesize) 32 | 33 | bundlesize 是一个很容易与 Travis、Circle 等 CI 平台集合的工具，能够帮你检查项目打包后的代码体积，并标识在你的 Pull Request 里面，让开发者在把代码合入主干之前对代码体积的变化做到心中有数，配置仅需 2 步，诸如 preact、styled-components 这类的开源项目都在使用了。 34 | 35 | #### [create-component-app：react 组件初始化工具](https://github.com/CVarisco/create-component-app?utm_source=reactnl&utm_medium=email) 36 | 37 | 高效的工程师都会重度使用命令行，使用 react 创建组件时你还在复制粘贴么？是时候换个新的姿势了，create-component-app 提供了可高度自定义的命令行式的组件创建方法，支持配置组件的名称、种类（如 class、pure、stateless）、样式写法。嫌这个命令太长了？去设置个 alias 不好么？ 38 | 39 | ### 代码框架 40 | 41 | #### [jsdiff：基于 JS 的文本比较算法](https://github.com/kpdecker/jsdiff) 42 | 43 | 这是基于 JS 的文本 diff 实现，diff 不仅仅在代码管理领域适用，比如 git，在文档管理领域也是使用的，比如 confluence wiki 的文档历史，在业务系统中甚至也是适用的，如果你想在业务系统中保存详尽的操作日志，即回答“谁在什么时间把什么字段从什么改成了什么这个问题的时候”你可能需要用到这个思路。 44 | 45 | #### [frontexpress：浏览器里面的 express.js](https://github.com/camelaissani/frontexpress) 46 | 47 | 非常喜欢 express.js 里面的中间件开发模式？使用 frontexpress 在浏览器里面也可以写几乎相同的代码了，frontexpress 是轻量级的浏览器端路由管理工具，如果你不依赖任何框架编写代码，它会是个不错的选择。 48 | 49 | ### 找找灵感 50 | 51 | #### [React Native UI Kitten：包含 40 个页面的参考项目](https://github.com/akveo/kittenTricks) 52 | 53 | 跟早些时候出来的 Vue.js 开发的高仿饿了么很像，几乎包含了现代 APP 应用会用到的所有界面，比如加载中页面、登录、注册、仪表盘、列表、详情等，基于 react-native-ui-kitten 开发，集成了 Google Analytics 和 react-navigation，刚入门 react native 的同学可以参考。 54 | 55 | #### [lnxpcs：让你看起来更极客的设计](https://github.com/jstpcs/lnxpcs) 56 | 57 | 这个仓库收集了不下 50 个跟 Linux 有关的艺术设计，比如各种 Linux 发型版本、Shell 版本、只有技术人才能看懂的漫画等等，每个艺术设计甚至有对应的纪念衫可以购买，你有没有兴趣自己去印一件？ 58 | 59 | #### [作为程序员的我年轻时犯的错](https://dev.to/miqubel/mistakes-i-made-as-a-developer) 60 | 61 | 十年互联网老兵的呕血总结，拉长了时间跨度的经验总结显得弥足珍贵：不要局限于一个平台、一门语言；不要为了钱去追求管理岗位；腾出时间放空自己；持续编码；积极参与社区等，对于刚入行或者入行几年的你是否有启示？ 62 | 63 | #### [最佳前端面试问题梳理](https://performancejs.com/post/hde6d32/The-Best-Frontend-JavaScript-Interview-Questions-%28written-by-a-Frontend-Engineer%29) 64 | 65 | 面试对于技术人，尤其是刚入门的技术人来说尤其重要，这篇文章道出了面试的基本框架，考察概念、编码、Debug、设计能力，对时下比较常被问到的前端面试题提出了自己的看法，并且给出了不少的比较有意思，我也时常在用的问题，如果你正在准备实习或者找工作，可以参考。 66 | 67 | ### 视频教程 68 | 69 | #### [Learning How to Learn：元认知能力提升必学课程](https://www.coursera.org/learn/learning-how-to-learn) 70 | 71 | 个人非常喜欢的 Coursera 课程，主要内容是学习和认知的客观规律：你能透过这门课程看清人是如何学会一门新技能；为何花了很多时间学习大脑却感觉一团浆糊原因。不得不说；人的大脑和思维方式有哪些天生的缺陷，改如何避免。在这样一个知识爆炸的时代，你更应该需要掌握如何学习的底层方法。 72 | 73 | ### 精彩问答 74 | 75 | #### [漫画：什么是动态规划？](https://mp.weixin.qq.com/s?__biz=MjM5OTA1MDUyMA==&mid=2655438647&idx=1&sn=4634f712fa4d0236aba60b8e8b7cc2cb&chksm=bd730b408a048256f204695598c0e4f74e75c9582f5b9c740057a69747b306de1a4c308d5388&mpshare=1&scene=1&srcid=0702N84baxNAmMFheg6Ck26Z&key=238113c46368) 76 | 77 | 走台阶问题的动态规划解法是很多大科技公司面试的时候会问的，你当时都答上来了么？这篇文章用比较生动有趣的方式介绍了什么是动态规划，动态规划的基本要素有哪些，怎么用它来解决简单的问题和复杂的问题。 78 | 79 | #### [怎样花两年时间去面试一个人？](https://mp.weixin.qq.com/s?__biz=MjM5ODIzNDQ3Mw==&mid=2649967341&idx=1&sn=e23064e6a95385141b57449c98cc80e2&chksm=beca3aeb89bdb3fda2e5075b986170cf189c9f76e9e1c9dcce5798ac815b3fc4761c529402a5&mpshare=1&scene=24&srcid=07026xj7NPo0eI2IG7CCxYc2&key=e0f557c9f11) 80 | 81 | Joel Spolsky 曾经感叹：招聘难，难于上青天，再难的问题也是有办法的，作者在本文给出了一个比较独特的招聘思路，基于书单和 GitHub，花费两年去面试一个人，虽然我们公司没有完全照这个实践，但是看不看书，GitHub 的代码在评估候选人的时候都是会综合考虑的。如果还没写多少代码，这篇文章的书单对你来说会是个不错的资源。 82 | 83 | ### One More Thing 84 | 85 | 如果觉得本文对你有帮助，请不要吝啬 star。如果对文中的内容有任何疑问，欢迎提 Issue 讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/feweekly)。或者扫描下方二维码订阅微信公众号。 86 | 87 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 88 | 89 | Happy Hacking 90 | 91 | -------------------------------------------------------------------------------- /issues/Issue-55.md: -------------------------------------------------------------------------------- 1 | ## 前端周刊第55期：10X 程序员？ 2 | 3 | > 我本周读到 1 篇比较有趣的文章叫做[《The 10x developer is NOT a myth》](http://www.ybrikman.com/writing/2013/09/29/the-10x-developer-is-not-myth/)，不管你承不承认，也不管你有没有意识到，程序员的效率有时会有天壤之别，10X 程序员的概念很早就出现了，怎样才算 10X 程序员？跟普通程序员的区别在哪里？推荐你抽时间细读，如果你不愿意看中文，可以看看我写的[《工程师做事的三重境界》](https://zhuanlan.zhihu.com/p/26660510)。下面是本周精选的内容，请享用。 4 | 5 | ### 技术动态 6 | 7 | #### [使用 Node.js 的那些理由还站得住脚么？](http://bysin.net/2017/05/07/no-good-reason-to-use-nodejs/) 8 | 9 | 技术社区的活力从各种撕逼的发生频率能看出来，这篇文章开头承认 Node.js 已经非常流行并且越来越流行，但是作者认为早些年列出的使用 Node.js 几大理由是站不住脚的，因为其他技术也在进步，在各个方面他们都比 Node.js 做的更好，你怎么看？ 10 | 11 | #### [ES6 模块加载登陆 Chrome Canary 60](https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7) 12 | 13 | 不知道 ES6 模块的同学应该去看看 [Ponyfoo](https://ponyfoo.com/articles/es6-modules-in-depth) 或者 [Jake](https://jakearchibald.com/2017/es-modules-in-browsers/) 的文章，Chrome Canary v60 已经提供了 ES6 模块的支持，不过需要你手动打开支持。这篇文章可以说是新特性尝鲜文章，并且对如何开始在项目中使用这个功能、如何做恰当的回退都提出了可行的方案。 14 | 15 | ### 文章教程 16 | 17 | #### [让无状态 React Component 渲染快 45% 的黑科技](https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f) 18 | 19 | 无状态 React Component 的概念就是那些纯粹负责渲染且没有状态变化的 Component，这篇文章的作者给出了让这类 Component 渲染加快的技巧：就是把它们当函数使、而不是当 Component 来使，如果你持怀疑态度，可以先看看他是怎么分析的，然后自己做实验来验证。 20 | 21 | #### [从 Angular.js 到 Vue.js 的迁移之路](https://dev.to/hemantisme/moving-from-angular-to-vue--a-vuetiful-journey) 22 | 23 | 你的老系统是使用 Angular 1.x 开发，现在又不想使用变化太快的 Angular 2.x、4.x 版本？可以看看这篇文章的作者如何从 Angular 1.x 迁移到 Vue.js。 24 | 25 | #### [玩转 React Native 动画所需要掌握的](https://medium.com/shoutem/declare-peace-with-react-native-animations-e947332fa9b1) 26 | 27 | 设计得当的交互动画能够让你的应用惊艳用户，使用户沉浸其中，典型的比如 Slack 的官方应用，作者在这边文章会跟你解释改如何去解剖一个动画（透明度、位置、尺寸、颜色），让你了解 React Native 动画的潜力，并且分享了如何设计能够使用到整个 React Native 应用中的动画的技巧。 28 | 29 | #### [用 VSCode 做 React 开发推荐配置](https://hackernoon.com/configure-eslint-prettier-and-flow-in-vs-code-for-react-development-c9d95db07213) 30 | 31 | 与下面收录的 Atom 前端开发终极配置相呼应，这篇文章讲的是如何在 VSCode 配置好 ESLint、Prettier、Flow 以方便 React 开发，给目前在这个场景下的同学。 32 | 33 | #### [用 Atom 做 JS/React 开发的终极配置](https://medium.com/productivity-freak/my-atom-editor-setup-for-js-react-9726cd69ad20) 34 | 35 | 虽然很多同学现在已经转向 Visual Studio Code 了，这个编辑器我也推荐，但对已经很熟 Atom 作为开发工具的同学这篇文章文章也不失其参考价值。怎么才算是完全掌握一个代码编辑器？把他当记事本用就行了？完全不是这么回事，你需要花时间去打磨和练习。这篇文章的作者花了几个月的时间把 Atom 的配置、插件、快捷键调到最优，可能不完全适合你，但是他的思路肯定是值得学习的。 36 | 37 | ### 开发工具 38 | 39 | #### [Vim Awesome：非常棒的 Vim 插件站点](http://vimawesome.com/) 40 | 41 | 不是典型的 Awesome 清单，而是个独立的网站，收录了所有的 Vim 插件，做了分类，首页上能看到最受欢迎的 Vim 插件，使用 Vim 的同学请收下，使用其他 IDE 的同学请绕路，哈哈。 42 | 43 | #### [Keycastr：小巧的按键可视化工具](https://github.com/sdeken/keycastr) 44 | 45 | 在你做技术演示、录制编辑器快捷键或者其他的 GIF 动图时，如果想全方位的把你的操作展示给观看的人，按键可视化必会让你的输出增色不少，Keycastr 是 Mac 下的一款按键可视化小工具，启动的时候会报错，你需要用管理员身份给他 Accessibility/Privacy 权限。 46 | 47 | ### 代码框架 48 | 49 | #### [execa：一个更好的 Node.js child_process](https://github.com/sindresorhus/execa) 50 | 51 | 由在 npm 上发了 1000+ 个包的 Sindre Sorhus 出品，相比 Node.js 内置的 52 | child_process，这个会好用很多，主要的优点有：Promise 化、自动处理子命令输出结尾、比内置大 500 倍的输出 Buffer、更好的 Windows 支持、在父进程退出时自动清理子进程等，经常用 Node.js 来写脚本的同学可以考虑看看。 53 | 54 | #### [BriteCharts：基于 D3.js 的图表绘制库](http://eventbrite.github.io/britecharts/) 55 | 56 | BriteCharts 是一款基于 D3.js V4 版本的图表绘制库，研究过 D3 的同学可能都会觉得 D3 就是绘图领域里面的 DOM，直接使用它你的自由度更大，但是绘图成本相对更高。而 BriteChart 这样的库帮你封装了常见的图表，可以用非常直观的方式在页面中渲染。整个仓库使用 ES6 编写，并且测试覆盖率也非常好，源代码本身就是个不错的学习资源。如果寻找其他 D3.js 图表库的同学可以去搜搜 C3.js 和 NVD3.js。 57 | 58 | 59 | ### 视频教程 60 | 61 | #### [基于 Chrome Dev Tools 的现代前端工作流](https://www.youtube.com/watch?v=v5r_n6Tq0uk) 62 | 63 | Umar Hansa 在 Render Conf 2017 上所做的分享，主题是基于 Chrome Dev Tools 的现代前端工作流，里面的干货非常多，如果你想彻底掌握 Chrome Dev Tools，这篇绝对不容错过。内容涵盖：FPS Meter、Paint Profiler、Timeline Recorder、Source Code Profiling 等 15 个主题。 64 | 65 | #### [egghead.io: 在生产环境中使用 Webpack](https://egghead.io/courses/using-webpack-for-production-javascript-applications?utm_content=buffer9fb7a&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer) 66 | 67 | Webpack 无疑是前端社区中最受欢迎的 JS 应用打包工具，因为内置了太多的功能，它的学习曲线也非常的陡峭，让它跑起来就要费不少的功夫，跟别提用它来做更多的事情了，Kent C. Dodds 在这个系列视频教程中会用实例帮你理解 Webpack 最常用的功能，以及如何优化 Webpack 的配置让它跑的更快。 68 | 69 | ### 精彩问答 70 | 71 | #### [如何让 Git 使用我最喜欢的编辑器？](http://stackoverflow.com/questions/2596805/how-do-i-make-git-use-the-editor-of-my-choice-for-commits) 72 | 73 | 对标题我先稍作解释，Git 的某些操作可能会打开系统中的某个编辑器让你填写内容，典型的就是 commit 的时候如果没指定 commit message，就会默认打开 VI 让你填写，如何把填写 commit message 的编辑器替换成我自己喜欢用的 Vim、Atom、VSCode？改下全局配置就行了，高票答案中有两个方案，要仔细看。 74 | 75 | #### [做 React Native 开发时如何打日志？](http://stackoverflow.com/questions/30115372/how-to-do-logging-in-react-native) 76 | 77 | 打日志可能是众多调试手段中最古老，关键时候也最有效的手段，相比而言 React Native 开发时的日志打法有很多，你都用过哪些？哪些比较好用？看看这篇问答。 78 | 79 | #### [真机调试 React Native 应用时打不开热更新？](http://stackoverflow.com/questions/38772373/how-to-enable-live-reload-in-ios-device-running-react-native-app) 80 | 81 | 可能部分同学遇到过，在真机调试 React Native 应用时，发现调试选项中并没有 Live Reload 和 Hot Module Reloading 的选项，这会对开发调试的效率产生很大的影响，问题产生的原因主要在网络，但是解决的办法超过 3 个步骤。 82 | 83 | ### One More Thing 84 | 85 | 如果觉得本文对你有帮助，请不要吝啬 star。如果对文中的内容有任何疑问，欢迎提 Issue 讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：[《前端周刊：让你在前端领域跟上时代的脚步》](https://zhuanlan.zhihu.com/feweekly)。或者扫描下方二维码订阅微信公众号。 86 | 87 | ![feweekly](http://www.feweekly.com/img/src/weekly/feweekly/qrcode.jpg) 88 | 89 | Happy Hacking 90 | --------------------------------------------------------------------------------