前端周刊 2018

第 1 期 by Lmagic

01. 2018 JavaScript 测试概览

文章介绍了JavaScript测试的关键术语、测试类型、工具和方法,并简要分析了工具jsdom、Istanbul、Karma、Chai、Wallaby等,测试框架mocha、jest、jasmine、AVA等以及UI测试工具TestCafe、WebdriverIO、Puppeteer等。

详情:https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3

02. WebAssembly在线IDE — Web Assembly Studio

Web Assembly Studio是一个简单的在线IDE

详情:https://webassembly.studio/

03. CanJS 4.0 一套前端架构库

CanJS 说不上快速,但其集成了自定义元素、可观察对象、路由等,是一款轻量级的JS库。Apple Store、Yahoo和HP等都有使用它。

详情:https://www.bitovi.com/blog/canjs-4.0

04. Chrome计划将非https连接的网站标记为不安全

谷歌刚刚宣布,从2018年7月开始,随着Chrome 68 的发布,未加载 https 的网页将被标记为“不安全”。这篇文章回顾了https 的发展历程,以及接下来会发生什么。

详情:https://blog.cloudflare.com/https-or-bust-chromes-plan-to-label-sites-as-not-secure/

05. Exploring ES2018 and ES2019

这是一本涵盖ECMAScript 2018和ECMAScript 2019内容的新书,可在线阅读或付费下载电子书。

详情:http://exploringjs.com/es2018-es2019/

06. 2018 我们如何使用 JavaScript

文章从command-line tools、Webpack、Babel、TypeScript 和 Flow等方面讨论了2018年我们如何使用JavaScript。

详情:https://www.telerik.com/blogs/how-to-javascript-in-2018

07. 如何在React项目中使用CSS模块

这篇文章探讨了如何在react项目中使用css模块的方法,包括将CSS作为JS对象使用和使用CSS模块。

详情: https://blog.pusher.com/css-modules-react/

08. 用CSS实现键盘记录的方法

CSS Keylogger 是一款 Chrome 扩展程序和Express 服务器,可利用 CSS 实现键盘记录的功能。

详情:https://github.com/maxchehab/CSS-Keylogging

09. 使用 Webpack 进行 web 性能优化

文章从减小资源大小、利用长期缓存、监控和分析应用程序三个方面讲述了如何使用 Webpack 进行 web 性能优化。

详情:https://developers.google.com/web/
fundamentals/performance/webpack/

10. npm V5.7.0 发布

v5.7.0 允许 npm install 修复 package-lock.json 和 npm-shrinkwrap.json 合并冲突的文件;该版本新增的 npm ci 命令仅从锁定文件进行安装,如果 package.json 和锁定文件不同步,那么它会报告一个错误。

详情:http://blog.npmjs.org/post/171139955345/v570

11. Font Awesome 发布版本 5.0.6

FontAwesome是一款图标工具库,5.0.6版本新增了许多图标,减小了js文件大小,修复了一些问题等。

详情:https://github.com/FortAwesome/Font-Awesome

12. 前端面试手册

准备找工作?这是一份不错的前端面试手册,包括了html、css 和 js问题。

详情:https://github.com/yangshun/front-end-interview-handbook

第二期

01. Propel:JS的科学计算框架

Propel 是一种 JavaScript 科学计算框架,类似于 Python 中的科学计算库 NumPy,也就是说利用 JS 也可以进行机器学习啦。Propel可以依靠 TensorFlow 来提高性能,适用于Node 和浏览器环境。

详情:http://propelml.org/

02. 事件循环详解

详情链接是一段在 2018 JSConf.Asia 大会上详解浏览器中事件循环和渲染机制的视频,总长35分钟。

详情:https://www.youtube.com/watch?v=cCOL7MC4Pl0

03. webpack 4 正式发布

webpack 4 于2.25号正式发布,版本代号为legato。该版本构建速度最快可提升98%,新增 mode 配置项,提供零配置平台来扩展,废除了 CommonsChunkPlugin 插件,默认支持 WebAssembly,更多更新请戳详情。

详情:https://medium.com/webpack/webpack-4-released-today-6cdb994702d4

04. V8 中的 DOM 对象

Chrome 66的 DevTools 可以跟踪C++ DOM对象,并显示 JavaScript 引用的所有可访问的 DOM 对象,因此在 Chrome 中调试内存泄漏变得更加容易。

V8 6.4版默认启用了Lazy deserialization,使得平均每个浏览器选项卡的V8内存消耗减少了500KB以上。

详情:https://v8project.blogspot.com/2018/03/tracing-js-dom.html

05. CityJSConf 2018

CityJSConf 2018 将在3月26号于伦敦举行。

详情:http://cityjsconf.org/

06. 如何使用 Vue.js 创建可访问的自动完成组件?

这篇文章讲述了如何在 vue 中使用 aria 属性创建一个完全可访问的自动完成组件,即使是使用类似 MacOS 中 VoiceOver 这样的辅助技术浏览网页,也可识别出自动完成组件。Aria 属性可以使 HTML 元素语义更明确,方便残障人士浏览网页。

详情:https://alligator.io/vuejs/vue-a11y-autocomplete/

07. Konva: HTML5 2D Canvas 库

Konva 是一个适用于桌面和移动应用程序的HTML5 2D Canvas 库,提供分层、缓存、过滤、桌面和移动事件支持等功能。

详情: https://konvajs.github.io/

08. TypeScript —超能量 JavaScript

这篇文章探讨了 TypeScript 强大的静态类型检查功能,并分析了 JS 和 TS 中的数据类型。上个月 TypeScript 有 10,327,953 次下载量,大大超过了 Flow 的下载量。

详情:https://medium.freecodecamp.org/typescript-javascript-with-super-powers-a333b0fcabc9

09. NodeJs 中的安全配置

‘npm install sqreen’ 使用可配置的插件扩展Node.js Web 应用程序安全性,以保护应用程序和用户账户信息,避免XSS、NoSQL注入和数据泄露等。

详情:https://www.sqreen.io/

10. 检测未使用的 CSS 选择器

JitBit 开发了一款检测无用的 CSS 选择器的工具,它通过用户输入的网站根URL来递归检测所有内部链接的网页,找出其中未使用的 CSS 选择器。但对于伪类选择器,其总是显示为未使用。

详情:https://www.jitbit.com/unusedcss/

11. WebKit 新增Storage Access API

Storage Access API 允许第三方嵌入的网站可请求访问第一方网站的 cookie,但这并不是指放宽了同源策略。该 API 已经在 Safari 的预览版本中实现,但是对于跨浏览器支持似乎有点不稳定。

详情:https://webkit.org/blog/8124/introducing-storage-access-api/

12. Electron 2.0.0-beta.1 版本发布

Electron 2.0.0-beta.1 升级了 Chrome、Node 、V8的版本,从 GTK2 切换到GTK3,更多更新请点击详情查看。

详情:https://electronjs.org/releases#2.0.0-beta.1

第三期

01. Chrome65 的新功能

CSS Paint API 允许使用编程方式生成图像;Server Timing API允许服务器将时间信息通过HTTP headers传递给浏览器; CSS display: contents可使盒子消失;

详情:https://developers.google.com/web/updates/2018/03/nic65

02. Boxy SVG:基于Web的SVG编辑器

一款基于Web的SVG编辑器

详情:https://boxy-svg.com/app

03. Fontanello:查看网页字体信息的浏览器插件

一款Chrome和Firefox的浏览器插件,通过右键单击显示选定文本的字体样式信息

详情:https://fontanello.oktavilla.se/

04. 5大CSS前端框架比较

文章精选了github上star数最多的5大CSS前端框架进行比较:Bootstrap,Foundation,Semantic UI,Pure和UIkit。

详情:https://www.sitepoint.com/most-popular-frontend-frameworks-compared/

05. Node v8.10.0 (LTS)发布

Node v8.10.0 (LTS)已发布,这个版本带来了很多重大变化,更新包括V8,libuv,ICU(Unicode支持)和OpenSSL 1.1.0支持等。

详情:https://nodejs.org/en/blog/release/v8.10.0/

06. DoneJS 2.0发布:高性能实时Web应用程序框架

DoneJS 2.0带来lCanJS 4.0的最新增强功能,并通过集成Travis CI,Heroku和Firebase简化持续集成和持续部署。

详情:https://www.bitovi.com/blog/donejs-2.0

07. React.js常见问题小结

文章涵盖了React初学者的一些常见问题,例如组件名没有用大写字母开头、模板字符串与字符串的使用、React.PropTypes的使用等等。

原文: https://dev.to/samerbuna/reactjs-frequently-facedproblems–l5g

08. 用Vue.js开发微信小程序:开源框架mpvue解析

mpvue(Vue.js in mini program)是一款使用 Vue.js 开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。

详情:https://mp.weixin.qq.com/s/fY3HMV__wiXLF1G2pOCBaA

9. Rollbar-JavaScript实时错误监控、警报和分析

Rollbar跟踪完整的堆栈、请求参数、URL、环境和受影响的用户,进行实时错误监控、警报和分析。

详情:https://rollbar.com/error-tracking/javascript/

10. CSS 30秒

这是一个有趣的github项目:30秒或更短的时间内理解有用的CSS代码片段,包括布局、视觉、动画和交互等知识点。

详情:https://atomiks.github.io/30-seconds-of-css/

11. JavaScript反调试技巧

这篇文章讨论了如何给代码主动调试增加困难,给那些想要分析你JavaScript代码的人增加一定的难度。文中提出的反调试技巧包括检测未知的执行环境、检测调试工具(例如DevTools)、代码完整性控制、流完整性控制和反模拟。
详情:http://www.freebuf.com/articles/system/163579.html

12. 使用Angular UI组件和SpreadJS电子表格增强web应用

使用GrapeCity无依赖性的Angular JavaScript解决方案构建完整的企业Web应用程序,包括SpreadJS的类Excel表格组件和Wijmo的网格,图表和输入框等UI控件。
详情:https://www.grapecity.com/en/javascript-solutions

第四期

01. Angular, React or Vue?

如何为下一个 Web 应用程序选择合适的JavaScript 框架?Progress 的新白皮书提供了对 Angular、React 和 Vue 当前状态的分析和全方面的比较。请戳详情下载白皮书~

详情:https://www.telerik.com/campaigns/kendo-ui/wp-choosing-js-framework

02. Rough.js:创建手绘外观的图形

利用 Rough.js 可以创建出粗略的手绘外观图形,包括直条、曲线、弧线、多边形、圆形和椭圆等基本图形和 SVG paths。

详情:https://github.com/pshihn/rough

03. TypeScript 2.8 RC 发布

该版本最大的亮点是新增了条件类型,条件类型是基于 JavaScript 的条件语法,采用 A extends B ? C : D 形式。

详情:https://blogs.msdn.microsoft.com/typescript/2018/03/15/announcing-typescript-2-8-rc/

04. MobX 4 发布:简单的状态管理库

MobX 4 新增了很多功能:无装饰器语法的装饰器,动态扩展的可观察对象,await when 和 flow 进一步简化异步过程,onBecome(Un)Observed 自动获取数据源,生产版本更小更快。

详情:https://medium.com/@mweststrate/mobx-4-better-simpler-faster-smaller-c1fbc08008da

05. Pell1.0:一个仅有 1.38kb 的 web 文本编辑器

Pell 是一款简单的 WYSIWYG web 文本编辑器,由 ES6 编写,无任何依赖,最小压缩版仅1.38kb。

详情:https://github.com/jaredreich/pell/#readme

06. 2018 React 学习指南

这是一篇 2015 年发布的经典 React 教程,从最基础部分开始讲解,最近更新了包括 React 16.3 版本的部分。

详情:https://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/

07. UnCSS:删除未使用的样式

UnCSS 是一个从样式表中删除未使用 CSS 的工具。它可以跨多个文件,并支持JavaScript 注入的 CSS。

原文: https://github.com/uncss/uncss

08. TOAST UI Chart:真正的跨浏览器图表

TOAST UI Chart 作为数据可视化图表工具,不仅跨浏览器支持(甚至支持IE8),而且高颜值~

详情:https://github.com/nhnent/tui.chart

9. npm 5.8.0(-next.0) 发布

该版本有大量的调整和改进。但 next 版本仅供测试和开发使用,而不是用于生产。

详情:http://blog.npmjs.org/post/171813275740/v580-next0

10. Emma:用于查找和安装 npm 软件包的 CLI 工具

Emma 是一个命令行工具,可帮助您更快速地搜索和安装 npm 软件包。采用 Algolia 的搜索功能,可提供您所需的全部信息,以确定哪个软件包是正确的。

详情:https://github.com/maticzav/emma-cli

11. Houdini 和 CSS Paint API 解析

Houdini 是 W3C 工作组为开发人员提供CSS 扩展功能的一套 CSS API,CSS Paint API (使用 CSS 属性来绘制图像)就是其中之一。文章对 Houdini 和 CSS Paint API 进行了详细解析。

详情:https://www.w3cplus.com/css/say-hello-to-houdini-and-the-css-paint-api.html

12. 参与 2018 年前端工具调查

为收集前端开发人员的意见,并了解整个 Web 开发行业的工具习惯,请戳详情参与调查吧~

这是 2016 年的调查结果:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

详情:https://medium.freecodecamp.org/launching-the-front-end-tooling-survey-2018-927bf975fdf0

第五期

01. D3.js 5.0 发布

D3 一直是 JavaScript 数据可视化的不错选择。本次发布的 5.0 版本的更新包括:使用 Promise 代替回调函数,等高线图和密度图。

详情:https://github.com/d3/d3/blob/master/CHANGES.md#changes-in-d3-50

02. 用 Parcel 搭建 React App

号称开箱即用的后起之秀 Parcel,不到半年在Github 已经有 2w 多 star。本文教你用 Parcel 搭建 React App,作者认为它甚至比 create-react-app 更简单。

详情:https://itnext.io/react-with-parcel-99229106dac8

03. 使用 Node 调用 GraphQL API

Facebook 推出的接口查询语言 GraphQL,立志在简洁性和扩展性方面超越 REST,其已被应用在很多复杂的业务场景中。这是一篇讲解如何在 Node 中使用 GraphQL API 的文章。

详情:https://itnext.io/call-graphql-api-with-native-node-modules-5e4d088ca969

04. 用 JavaScript 写一个区块链

这篇文章讲解了如何使用 JavaScript 来创建一个简单的区块链,并演示它们的内部是如何工作的。全文包括三个部分:实现一个基本的区块链,实现POW(proof-of-work:工作量证明),交易与挖矿奖励。

详情:https://zhuanlan.zhihu.com/p/34522746?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

05. 渲染引擎性能优化指南

这篇文章详细讲解了页面渲染的整个过程以及渲染的性能优化技巧。优化技巧包括:优化 JavaScript 与 DOM 交互,CSS 样式优化,页面布局优化,减少 repaint/reflow (重绘/回流)。

详情:https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda

06. React/Redux 10 Tips

这是来自具有 2 年 React/Redux 开发经验的 20 人团队的见解和技巧分享:使用 React 和 Redux 进行大规模开发的 10 个Tips。

详情:https://www.youtube.com/watch?v=NQta2urK3zk

07. Node v9.9.0 (Current) 发布

该版本更新包括:assert 模块调整,tty 模块新增函数 getColorDepth(判断终端是否支持颜色),弃用函数 Buffer 和 new Buffer 等。

原文: https://nodejs.org/en/blog/release/v9.9.0/

08. Chrome 66+ 允许异步剪贴板访问

Chrome 66 版本中新增了异步剪贴板API (navigator.clipboard 等),通过检查应用的交互权限允许异步剪切板访问,仅支持 HTTPS 页面。

详情:https://developers.google.com/web/updates/2018/03/clipboardapi

09. CSS Gradient: 为你的网页制作渐变

CSS Gradient 是一个在线工具,通过在线调色可生成你所需的渐变 CSS 代码,同时提供多种多样的渐变色板和示例。

详情:https://cssgradient.io/

10. MEAN/MERN 技术栈开发课程

这是来自 MongoDB University 的免费课程,讲解了如何使用现代化的 MEAN/MERN 技术栈进行开发。

MEAN (MongoDB, Express, Angular2, Node.js)

MERN (MongoDB, Express, React, Node.js)

详情:https://www.mongodb.com/blog/post/the-modern-application-stack-part-1-introducing-the-mean-stack

11. Angular CLI 参考指南

这篇文章详细讲解了 Angular CLI 的使用,包括CLI 的安装,应用程序的创建,添加功能,自动化配置单元测试和端到端测试,应用程序的构建和部署等。

详情:https://www.sitepoint.com/ultimate-angular-cli-reference/

12. JS 动画库在 React 中的使用比较

这篇文章讨论了 GreenSock、Anime.js、Mo.js、Popmotion 和 Velocity 等动画库在 React 中的使用评分及体验。

详情:https://blog.logrocket.com/comparing-the-top-js-animation-libraries-for-use-in-react-apps-e3ba5ccad68d

第六期

01. JS 引擎 V8 v6.6 的更新

最新 v6.6 版本的 V8 JavaScript 引擎更新了方法 Function.prototype.toString(),改进了代码缓存机制、异步性能和 Array#reduce 性能,为 String.prototype添加了 trimStart() 和 trimEnd() 方法。

详情:https://v8project.blogspot.com/2018/03/v8-release-66.html

02. 2018 开发者调查结果

这是一份来自 StackOverflow 10万开发者的调查结果,请查收一下~
调查结果显示 JavaScript 是连续 6 年最常用的编程语言;TensorFlow 是 StackOverflow 发展最快的技术之一,最受开发者青睐;全球范围内,使用 F#,Ocaml,Clojure 和 Groovy 的开发者薪资最高。

详情:https://insights.stackoverflow.com/survey/2018/

03. React 16.3.0 发布

React 16.3.0 版本引入了新的 Context API,允许开发者使用 React.createContext() 生成两个关联组件;组件生命周期也发生了变化,废除了 componentWillMount, componentWillUpdate, componentWillReceiveProps, 引入了 getDerivedStateFromProps;此外,还提供了 StrictMode, createRef 和 forwardRef APIs,以保证代码符合最佳实践。

详情:https://reactjs.org/blog/2018/03/29/react-v-16-3.html

04. 11 种 JavaScript 机器学习库

文章介绍了 11 种 JavaScript 机器学习库: Brain.js,Synaptic,Neataptic,Conventjs,Webdnn,Deeplearnjs,Tensorflow Deep Playground,Compromise,Neuro.js,mljs,Mind.

详情:https://blog.bitsrc.io/11-javascript-machine-learning-libraries-to-use-in-your-app-c49772cca46c

05. TypeScript 2.8 发布

TypeScript 2.8 新版本继续支持条件类型(形式为 A extends B ? C : D),新增了 VS Code 中组织 import 导入的功能(可删除未使用的导入和对导入进行排序),并改进了 JSX 支持。

详情:https://blogs.msdn.microsoft.com/typescript/2018/03/27/announcing-typescript-2-8/

06. 2018 JS 库与框架概览

文章介绍了目前JS库与框架的状态,包括React、Vue.js、Angular、Polymer、TypeScript 和 jQuery,同时通过回顾各框架的历史情况,来预测各框架未来的发展,为前端工程师的技术选型提供参考。

详情:https://medium.com/@alberto.park/the-status-of-javascript-libraries-frameworks-2018-beyond-3a5a7cae7513

07. npm v5.7.0发布

新版本中 npm install 可以自动修复 package-lock.json 和 npm-shrinkwrap.json 合并冲突的文件,还新增了 npm ci 命令。

注意:该版本出现文件系统权限被更改问题。 issue:https://github.com/npm/npm/issues/19883

详情:http://blog.npmjs.org/post/171139955345/v570

08. 开始使用新的CSS Typed Object Model

CSS 类型化对象模型带来了类型,方法和灵活的对象模型来处理 JavaScript 中的 CSS 值。作为 Houdini 的一部分,新的 CSS 类型对象模型(Typed OM)通过给 CSS 值添加类型、方法和适当的对象模型来进行扩展。值不再是字符串,而是作为 JavaScript 对象的值,用于提升 CSS 的性能和更加合理的操作。Chrome 66 已经率先支持 Typed OM。

详情:https://zhuanlan.zhihu.com/p/35029796

09. React Apollo 打造 GitHub 客户端

React还能开发客户端应用?这篇文章教你使用 React Apollo 构建一个与 GitHub GraphQL API 进行交互的应用程序。

详情:https://www.graphql.college/building-a-github-client-with-react-apollo/

10. Vue Design System

Vue Design System 是一个用 Vue.js 构建 UI 设计系统的开源工具,提供了一套基础应用程序开发的工具,模式和实践。

详情:https://github.com/viljamis/vue-design-system

11. 'display:contents’如何工作

display: contents 使元素的子元素显示为其父元素的直接子元素,而忽略元素本身。它可以帮助我们保持良好的语义化结构,同时也能帮助我们得到我们想要的布局。目前,只有 Firefox 和 Chrome的最新版本支持该属性。

详情:https://bitsofco.de/how-display-contents-works/

12. Chrome DevTools的12个使用技巧

伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome 已成为一个必须掌握的工具。在这篇文章中,分享了 12 个很酷的技巧,包括拖拽元素重新布局,直接通过 CSS 选择器查找元素和类似 sumlime gotoanything 的功能等。

详情:https://medium.freecodecamp.org/cool-chrome-devtools-tips-and-tricks-you-wish-you-knew-already-f54f65df88d2

第七期

01. ES2016, 2017, 2018 中的新特性

文章介绍了 18 个 ECMAScript 2016,2017 和 2018 中新增加的特性,这些特性已被加入到 TC39 提案中。包括Array.prototype.includes、Object.values()、Object.entries()、String padding、指数运算符、对象的rest属性和Promise.prototype.finally() 等。

详情:https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e

02. Webpack 4.5.0 发布

Webpack 于 4 月 4 号发布了 4.5.0 版本,除了性能改进、bug 修复外,首次添加了贡献者的 yarn setup 安装脚本。

详情:https://github.com/webpack/webpack/releases

03. 纯 CSS 实现一个太阳系

Jamie Coulter 用纯 CSS 创建了一个非常棒的 demo,它可以让你探索太阳系的行星和卫星,包括各个星球的图片和简要介绍,并带有一些炫酷的效果。

详情:https://codepen.io/jcoulterdesign/pen/ZxXbeP

04. 网页设计中的 10 种排版技巧

网页设计中的 10 种排版技巧:保持最少的字体数量,使用标准字体,限制文本长度,使用在各种屏幕分辨率下可用性良好的字体,使用字母区分度高的字体,避免全英文大写文本,善用空白区域的技巧,增加色彩对比,减少单独红/绿色文本的使用,避免使用闪烁的文字。

详情:https://uxplanet.org/10-tips-on-typography-in-web-design-13a378f4aa0d

05. iOS 11.3 中的 PWA 应用

Apple 在 iOS 11.3 中悄悄增加了对“渐进式 Web 应用”(PWA) 这一系列新技术的基本支持,这意味着现在可以在没有 App Store 批准的情况下在 iOS 上安装应用程序,不过会有一些限制。文章概括了最新发布的 iOS 11.3 对 PWA 的支持情况,以及PWA 应用开发者需要注意的问题。

详情:https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7

06. 第四届 CSS 大会

中国第四届 CSS 开发者大会已于 2018 年 03 月 31 日在厦门成功举办。前端工程师的本质就是做出用户体验更好的产品,不仅仅要考虑的是在交互上的体验,还需要考虑性能的优化,如何为用户节约带宽,如何让用户打开的速度更快。

详情:https://zhuanlan.zhihu.com/p/35278699

07. Node v9.11.0 (Current) 发布

本次发布做了一些常规小调整和功能增强。这一次,通过将 ICU 升级到 61.1 改进了对 Unicode 的支持,fs 模块增加了为 ReadStream 和 WriteStream 发送 ready 事件的功能。(从技术上讲,9.11.1已经不在了,但它是一个快速补丁版本,仅用于修复 x64 的非功能 MSI 安装程序。)

详情:https://nodejs.org/en/blog/release/v9.11.0/

08. React 生命周期的正确打开姿势

这张 React 生命周期图来自 React 开发团队核心成员 Dan。Twitter 上的很多人都发现可以从中学到一些有用的东西。React 严格定义了组件的生命周期会经历如下三个过程:挂载过程(Mount),更新过程(Update),卸载过程(Unmount)。

详情:https://twitter.com/dan_abramov

09. Bulma:基于 Flexbox 的 CSS 框架

Bulma 是基于 Flexbox 的开源 CSS 框架,支持浏览器 Chrome、Edge、Firefox、Opera 和 Safari 的最新版本,IE10+ 仅部分支持。Bulma 可支持图标库 Font Awesome 5,此外 Bulma 还有许多衍生项目,例如用于 React 的 Bloomer 和用于 Vue 的Buefy。

详情:https://bulma.io/

10. MVVM 前端数据流框架精讲

本次分享是带大家了解什么是 MVVM,MVVM 的原理,以及近几年产生了哪些演变。同时借 MVVM 这个话题拓展到对各类前端数据流方案的思考,形成对前端数据流整体认知,帮助大家在团队中更好的做技术选型。

详情:https://zhuanlan.zhihu.com/p/35211052

11. Pose:用于 HTML,SVG 和 React 的声明性动画库

当 CSS 的简洁遇上 Popmotion 灵活的强大功能,会碰撞出怎样的火花?本文介绍了 SVG,React 和 CSS 的综合应用,甚至都不需要配置,你就可以非常轻松地制作出声明式和触发式的动画。

详情:https://popmotion.io/pose/

12. 网络错误日志(NEL)

2017 年 12 月 8 日W3C 的 Web 性能工作组(Web Performance Working Group)更新了网络错误日志(Network Error Logging)的工作草案。该文档定义了一个机制,允许 Web 站点声明一个网络错误汇报策略(reporting policy),浏览器等用户代理可以利用这一机制,汇报影响资源正确加载的网络错误。该文档还定义了一个错误报告的标准格式及其在浏览器和 Web 服务器之间的传输机制。

详情:https://dcreager.net/nel/intro/

第八期

01. 2018 前端开发者手册

这是一份 2018 前端开发手册,内容包括三个部分:前端工程实践、前端开发学习和前端开发工具。

详情:https://frontendmasters.com/books/front-end-handbook/2018/

02. Bootstrap v4.1.0 发布

Bootstrap 发布了最新版本 v4.1.0,该版本除了常规的 bug 修复和文档更新外,还新增了自定义范围表单控件、轮播工具 carousel-fade、纯文本下拉菜单项 dropdown-item-text 和 box-shadow 工具等功能。

详情:https://blog.getbootstrap.com/2018/04/09/bootstrap-4-1/

03. Firefox Reality:简单的 VR 浏览器

2018 年 4 月 3 日 Mozilla 推出 Firefox Reality,这是一款全新的 VR 浏览器,专门为虚拟现实(VR)和增强现实(AR)而设计。该浏览器已在 GitHub 上开源。

详情:https://blog.mozilla.org/blog/2018/04/03/mozilla-brings-firefox-augmented-virtual-reality/

04. Angular 6 有什么新功能?

随着 Angular 6 候选版本 RC5 的发布,正式版将很快发布。一起来看看 Angular 6 中的新功能:支持 TypeScript 2.7+ ,新增渲染引擎 lvy,支持 Bazel 编译器,将 navigationSource 和 restoredState 添加到 NavigationStart。

详情:https://walkingtree.tech/whats-new-angular-6/

05. 浏览器无密码登录的新标准 WebAuthn

2018 年 4 月 10 日 FIDO 联盟(FIDO Alliance)与 W3C 联合取得了 Web 认证标准的重大进展,为全球用户带来更简单、更强大的 Web 认证方式。由 FIDO 提交的文档 Web Authentication(WebAuthn),已经正式进入 W3C 候选推荐标准(Candidate Recommendation,简称CR)阶段。目前 WebAuthn 标准已获得 Firefox 最新版本的支持,未来几个月即将推出的 Chrome 和 Edge 新版本也将支持该标准。

详情:https://www.theverge.com/2018/4/10/17215406/webauthn-support-chrome-firefox-edge-fido-password-free
中文版:https://mp.weixin.qq.com/s/enjl4i-3naF0iOdZMfrYuw

06. Site Palette:网页调色板工具

Site Palette 是一个简单易用的免费 chrome 浏览器扩展程序,可提取出网页的基本颜色生成调色板,可作为设计师和前端开发人员的有用工具。

详情:http://palette.site/

07. 图像和视频的懒加载

如何改善初始页面加载时间和降低每页有效载荷?本指南介绍了懒加载相关技术,懒加载库 lazysizes 和懒加载中需要注意的问题。

详情:https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

08. 使用CSS filter解决SVG背景颜色问题

你可能发现使用 SVG 图片做背景图时会难以控制 fill color 等属性,在这种情况下,可以尝试使用 CSS filter。它提供了 10 多个属性,包括 blur,contrast,brightness,grayscale 和 hue-rotate 等,用于直接在浏览器中实现类似 Photoshop 滤镜的视觉效果。

详情:https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/

09. NodeJs 中的 HTTP/2 推送功能

HTTP/2 的主要目标是通过启用完整的请求和响应复用来减少延迟,通过 HTTP 头域的高效压缩来最大限度地减少协议开销,并增加对请求优先级和服务器推送的支持。HTTP/2 Server Push 允许服务器在收到浏览器的请求之前,主动向浏览器推送资源。文章介绍了 NodeJs 中 HTTP/2 服务端推送的更新。

详情:https://medium.com/the-node-js-collection/node-js-can-http-2-push-b491894e1bb1

10. 从头开始编写自己的 Promise 库

随着 NodeJs 对 Async/await 的支持,我们越来越少使用 Callbacks。而 Async/await 又是基于 Promise 的,因此理解这种流行的异步实现机制是很有必要的。在这篇文章中, 作者讲解了如何编写自己的 Promise 库,并演示如何使用 Async/await。

详情:http://thecodebarbarian.com/write-your-own-node-js-promise-library-from-scratch.html

11. Epic Spinners:一个简单易用的CSS旋转动画库

Epic Spinners 是一个 CSS 旋转动画库,可以通过 html/css 源码使用,或者作为 Vue.js 组件使用。此外还有用于 Angular 的库 angular-epic-spinners 和用于 React 的库 react-epic-spinners。

详情:http://epic-spinners.epicmax.co/

12. 优化 React:虚拟 DOM 详解

这是一份全面的对初学者友好的 React 内部机制的介绍,作者为我们揭开 JSX 的神秘面纱,给我们展示 React 如何做出渲染决策,如何找到性能瓶颈, 并分享了一些经验和提示, 以避免常见的错误。

详情:https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained

第九期

1. Node.js 10 将带来什么?

Node.js 10 的第一个版本将于本周二(4 月 24 日)发布,并将在 10 月份推出 LTS 版本,将带来哪些更新? N-API,持续 HTTP/2 支持,ECMAScript Modules(ESM),Async Hooks 等等。

详情:https://nodesource.com/blog/what-you-can-expect-from-node-js-10

2. webpack 4.6.0 发布

webpack 4.6.0 发布了对 Prefetch/Preload 的支持。Preload 可以更早地发现资源以避免瀑布似的获取,不会花费额外的带宽。Prefetch 使用浏览器的空闲时间来获取资源,可能需要额外的带宽。

详情:https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c

3. 200 行 JavaScript 人脸识别库

picojs 是仅 200 行 JavaScript 代码的人脸识别库,最小只有 2KB。它可以实时检测出图像中的脸部,所有处理都在客户端完成。

详情:https://github.com/tehnokv/picojs

4.CSS Grid 布局的最佳实践

什么是 CSS Grid 布局的最佳实践?除了采用规范中的布局方式,还需考虑 Grid 与其他布局方式(例如 Flexbox)的结合,构建方式,以及团队的工作模式等。

详情:https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/

5. Yarn 和 npm 大比拼

npm 是 Node.js 的默认包管理器,Yarn 是 Facebook 发布的包管理器。这篇文章深入介绍了这两者软件包管理器提供的内容,它们之间的区别以及它们如何演变。

详情:https://blog.risingstack.com/yarn-vs-npm-node-js-package-managers/

6. 开发大型 JavaScript 应用

这是根据 JSConf Australia 上发表的演讲整理的文章,分享了作者在开发大型 JavaScript 应用后的一些心得。文中给出了整个演讲的视频链接。

详情:https://medium.com/@cramforce/designing-very-large-javascript-applications-6e013a3291a3

7. Houdini:CSS杀手级别的项目

Houdini 是一个伟大的项目,它本着可扩展 Web 宣言(Extensible Web Manifesto)的精神,让开发者直接可以访问浏览器的 CSS 引擎,这使得开发者能够自定义自己的 CSS 功能,以便能在浏览器的本地渲染管道中高效运行。了解更多请阅读原文。

详情:https://codersblock.com/blog/say-hello-to-houdini-and-the-css-paint-api/

8. 9个诀窍教你写出更好的 React 代码

如何在 React 中写出更好的代码,作者为我们提供了 9 个有用的 tips: 使用 propTypes 和 defaultProps,在恰当的时候使用 Component、PureComponent 和 Stateless Functional Component,如何使用 React Dev Tools,使用 Bit / StoryBook 提高工作效率等。

详情:https://blog.bitsrc.io/how-to-write-better-code-in-react-best-practices-b8ca87d462b0

9. 介绍JavaScript即将推出的三种新功能

本文介绍了 JavaScript 即将发布的新功能,作者用实例展现了 JavaScript 在可选链式调用(Optional Chaining)、Nullish coalescing 和 Pipeline operator 上的改变。

详情:https://medium.freecodecamp.org/here-are-three-upcoming-changes-to-javascript-that-youll-love-387bce1bfb0b

10. 5分钟教你学会Bulma

Bulma 是一个简单、易用的 CSS 框架,虽然很多开发人员喜欢用 Bootstrap,但是作者认为Bulma的设计更好,而且更轻量。在文章中,作者给出了一些步骤让你快速上手Bulma。

详情:https://medium.freecodecamp.org/learn-bulma-in-5-minutes-ec5188c53e83

11. 使用官方 Vue.js 测试工具与 Jest 编写组件的单元测试

Vue.js 以其灵活、高性能、易上手的特性正逐步被应用到更多的 Web 项目中,本系列文章依次介绍了编写首个简单的组件单元测试用例,测试递归渲染的 Vue.js 组件,测试组件的样式与结构,测试组件的状态、计算属性与方法,测试属性与自定义事件,测试生命周期回调,测试 Vue.js Slots,利用模块别名配置 Jest 等内容。

详情:https://alexjoverm.github.io/series/Unit-Testing-Vue-js-Components-with-the-Official-Vue-Testing-Tools-and-Jest/

12. 2018 GraphQL 必知必会

大部分开发者都了解如何构建 REST API,也感受过它的红与黑;本文则是对 API 领域的新星—GraphQL 进行介绍与讨论。GraphQL 经常被称作是面向前端的 API 技术方案,因为它允许前端开发者以更简单灵活的方式进行数据请求。该特性也正是弥补了传统 REST API 的一个不足:无法为不同的客户端返回定制化数据;而 GraphQL 的另一个优势在于,能够将原本需要向多接口发起的请求仅向单接口请求。

详情:https://medium.com/@weblab_tech/graphql-everything-you-need-to-know-58756ff253d8

第十期

1. Node.js 10 正式发布

在过去的一周,Node.js 10.0.0 正式发布,带来大量改进和修复。这是自 Node.js Foundation 开展以来的第七个主要版本,并将在 2018 年 10 月成为下一个 LTS 分支。新版本自带定制化的 Node-ChakraCore 引擎,其功能亮点包括:全面支持 N-API,支持 TTD 的生成器和异步函数,支持 Inspector 协议等等。

详情:https://nodejs.org/en/blog/release/v10.0.0/

2. npm 6 的更新

Node.js 10.0.0 附带 npm 5.7.x, 但是,预计在 Node.js 10.x 生命周期的早期会更新为 npm 6。第 6 版将侧重于性能、稳定性和安全性,与先前版本的 npm 相比,性能提高 17 倍。以后,如果使用具有已知安全问题的代码,npm Registry 的用户会收到警告通知。npm 将自动检查针对 NSP 数据库的安装请求,并在代码包含漏洞时发出警告通知。

详情:https://blog.npmjs.org/post/173260195980/announcing-npm6

3. Gooact:用 160 行代码实现一个“React”

本教程分为四部分,教你如何用 160 行代码从头构建一个类似 React 的库,包括实现组件 API 和虚拟 DOM。学习本教程需要具备基本的 React 知识。

详情:https://medium.com/@sweetpalma/gooact-react-in-160-lines-of-javascript-44e0742ad60f

4. Tone.js:创建交互式音乐

Tone.js 是在浏览器中创建交互式音乐的框架。它提供高级调度功能、合成器效果, 以及在 Web 音频 API 之上构建的直观的音乐抽象。

详情:https://tonejs.github.io

5. 马里奥卡丁车:纯CSS打造的小游戏

Stephen Cook 解释了他如何使用纯 CSS 创建交互式马里奥卡丁车游戏。这个项目中,作者没有使用一行 JS 代码和一张图片,100% 纯 CSS 打造,其中 HTML 代码也仅有 13 行。

详情:https://codeburst.io/mario-kart-css-7572bd2ce608

6. 用 video 替代 GIF 的方案

GIF 动画可能会由于非常庞大造成页面卡顿、性能下降等问题, 在本指南中,我们将看到如何通过用大多数浏览器中可用的 MPEG-4 和 WebM 视频源代替它们来遏制这种膨胀。本指南使用 ffmpeg 工具,你可能需要先安装它。

详情:https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/

7. TUI Calendar:全能的日历控件

TUI Calendar 是高度可定制的全能 JavaScript 日程安排日历,支持多种视图类型(每日,每周,每月等),支持任务和 milestone 的高效管理,支持通过鼠标拖拽来调整日程安排,支持按主题自定义用户界面,支持 Chrome、Safari 、Firefox、Edge 和 IE9+。

详情:https://github.com/nhnent/tui.calendar

8. 使用数组进行函数式编程

借鉴函数式编程中的技巧,文章讲述了如何使用 map,filter 和 reduce 操作数组对象。由于这些方法不会改变调用数组本身,所以我们可以有效地使用它们而不用担心副作用。

详情:https://www.telerik.com/blogs/functional-programming-with-javascript-object-arrays

9. Day.js:Moment.js 的轻量化方案

Day.js 是一个轻量级( 2kB )的 JavaScript 时间日期处理库,和 Moment.js 的 API 设计保持完全一样。如果你曾经用过 Moment.js,那么你已经知道如何使用 Day.js。Day.js 并没有改变或覆盖 Javascript 原生的 Date.prototype,而是创造了一个全新的包含 Javascript Date 对象 Dayjs 的对象。Dayjs 对象是不可变的,所有的 API 操作都将返回一个新的 Dayjs 对象。

详情:https://github.com/xx45/dayjs

10. 原生般的页面转场动画

为了帮助用户快速收集信息,获得更好的浏览体验,目前前端开发中出现了许多原生般的技术实例。本篇文章讨论了如何使用 Vue 和 Nuxt 构建一个原生般的网页,整个页面从一个布局转换到另一个布局展现出漂亮的流畅平滑动画。

详情:https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/

11. TypeORM: 用于 TS 和 JS 的ORM

TypeORM 是一种 ORM(Object Relational Mapping),可以在 NodeJS、Browser、Cordova、PhoneGap、Ionic、React Native 和 Electron 平台上运行,并且可以与 TypeScript 和 JavaScript(ES5,ES6,ES7)一起使用。其目标是始终支持最新的 JavaScript 功能以及提供附加功能,以帮助您开发任何使用数据库的应用程序,不论是只有少数表格的小型应用程序,还是具有多个数据库的大型企业级应用程序。

详情:http://typeorm.io/

12. 手写 WebAssembly

WebAssembly(wasm) 是一个可移植、体积小、加载快并且兼容 Web 的全新格式,其目标是充分发挥硬件能力以达到原生执行效率。WebAssembly 不仅可以运行在浏览器上,也可以运行在非 web 环境下。本篇文章探索了如何使用 WebAssembly 来编写经典的康威生命游戏。

详情:http://blog.scottlogic.com/2018/04/26/webassembly-by-hand.html