本期刊专注于 Web 前端前沿技术，收集的内容来自于国外各大前端技术周刊，这里把自己感兴趣的，并值得分享的内容做了整理。
部分链接可能无法直接打开，你需要通过科学上网的方式来解决。
本期热文
D3.js 简介
一篇关于 D3（一个流行的基于 JavaScript 的数据可视化库）的非常棒的介绍文章，以及它的模块生态系统。
https://wattenberger.com/blog/d3
AMELIA WATTENBERGER
我最喜欢的 CSS Hack
{ border: 1px solid red } 是通过在每个元素周围设置边框来调试 CSS 和 HTML 问题的经典技巧。这一技巧需要些额外的步骤，但可以很好的帮助你定位问题，特别是嵌套元素。
https://dev.to/gajus/my-favorite-css-hack-32g3
GAJUS KUIZINAS
苹果公司在生产中发布了 Web 组件
Apple 刚为他们的 Apple Music 服务推出了一个基于 Web 的客户端，一些开发人员注意到他们正在使用什么技术来构造它（比如 Ember，Web Components 和 Stencil JS）。
https://dev.to/ionic/apple-just-shipped-web-components-to-production-and-you-probably-missed-it-57pf
MAX LYNCH
在 JavaScript 和 TypeScript 中使用 void
void 在 JS 和 TypeScript 中有着不同的含义，但可以用它做一些意想不到的事情。
https://fettblog.eu/void-in-javascript-and-typescript/
STEFAN BAUMGARTNER
Firefox 69 发布：面向开发者的新功能
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/69
MOZILLA
文章 & 教程
Array.from() 的 5 个灵活应用
Array.from() 可以将类数组的对象转换为数组，还能可用于生成范围、去重和数组克隆。
https://dmitripavlutin.com/javascript-array-from-applications/
DMITRI PAVLUTIN
在 Firefox DevTools 中调试 TypeScript
https://hacks.mozilla.org/2019/09/debugging-typescript-in-firefox-devtools/
JAN HONZA ODVARKO
使用 .some() 和 .find() 简化您的 JavaScript
https://medium.com/poka-techblog/simplify-your-javascript-use-some-and-find-f9fb9826ddfd
ETIENNE TALBOT
创建一个简单的 JavaScript 混淆器
https://antoinevastel.com/javascript/2019/09/04/home-made-obfuscator.html
ANTOINE VASTEL
如何使用 CSS 混合模式和 SVG 动态地更改图像颜色
https://tympanus.net/codrops/2019/09/03/how-to-dynamically-change-the-colors-of-product-images-using-css-blend-mode-and-svg/
KYLE WETTON
CSS 中的溢出和“数据丢失”
在默认情况下，元素会扩展以适应内容，但如果要指定元素的大小，则内容可能会“溢出”。
https://www.smashingmagazine.com/2019/09/overflow-data-loss-css/
RACHEL ANDREW
用 caption-side 属性来控制表格标题的位置
https://www.stefanjudis.com/today-i-learned/caption-side-controls-the-position-of-a-table-caption/
STEFAN JUDIS
你知道从 HTML5 开始，锚标签可以包含块级元素了吗？
https://www.bennadel.com/blog/3693-anchor-tags-can-contain-block-level-elements-as-of-html5.htm
BEN NADEL
让用户能够快速跳转到页面顶部的几种方法
https://css-tricks.com/need-to-scroll-to-the-top-of-the-page/
CHRIS COYIER
工具 & 资源
React Developer Tools
浏览器中的 React 开发者工具插件（Chrome 和 Firefox），现在已经更新到版本 3+。
https://www.npmjs.com/package/react-devtools
Webpack Boilerplate
轻量的 Webpack 4 样板代码，包含了 Babel，Sass，ESLint，热模块更新，以及开发/生产的优化。
https://github.com/taniarascia/webpack-boilerplate?mc_cid=1b9802fdde&mc_eid=e1e4216411
Bitmelo
一个可在线创建 JavaScript 游戏的工具。
https://bitmelo.com/
DAVID BYERS
SpaceTime
一个无依赖的处理时区的库。支持夏令时，闰年和半球，并允许您计算不同时区的时间。
http://spacetime.how/
SPENCER KELLY
vue-treeselect
具有嵌套选项支持的 Vue.js 的多选组件。
https://vue-treeselect.js.org/
FANGZHOU LI
TOAST UI Grid 4.5
一个数据网格控件，这种不依赖于 TypeScript 的数据网格组件可用于 IE9，且适用于多种数据类型，具有高级排序功能（可以自定义），可以轻松地重新定位。
https://ui.toast.com/tui-grid/
NHN ENTERTAINMENT
CSS 书写模式 Level 3
CSS 书写模式 Level 3 定义了 CSS 支持各种书写模式及其组合，包括从左到右和从右到左的文本排序以及水平和垂直方向。
https://www.w3.org/TR/2019/CR-css-writing-modes-3-20190903/?mc_cid=1b9802fdde&mc_eid=e1e4216411
字体样式匹配器
该工具可在你的字体加载有延时时，可调整后备字体的字体粗细/大小/间距等，以使它们尽可能接近对齐，因此，不会出现太多明显的切换。
https://meowni.ca/font-style-matcher/?mc_cid=1b9802fdde&mc_eid=e1e4216411
Kontrast
Chrome 和 Firefox 扩展程序。 在浏览器中实时快速检查和调整对比度，以符合 WCAG 2.0 标准。
https://www.getkontrast.com/
cypress-axe
使用 ax-core（用于自动 Web UI 测试的可访问性引擎）运行 Cypress（测试框架）来测试可访问性。
https://github.com/avanslaars/cypress-axe
jscodeshift
来自 Facebook 的工具包，用于在多个 JavaScript 或 TypeScript 文件上运行 codemod。
https://github.com/facebook/jscodeshift
Uptrends
终极监控工具，可以控制网站，API 和服务器的正常运行时间，性能和功能。
https://www.uptrends.com/
imagecompressor
在线图片压缩工具，最多可将 PNG / JPG 文件压缩 80％，并保持图片原有色彩。
https://www.websiteplanet.com/webtools/imagecompressor/
Remix Icon
一套开源中性风格的 SVG 系统符号，专为设计人员和开发人员精心打造，可供个人和商业用途免费使用。
https://remixicon.com/
SVG-edit
一个快速的，并基于 Web 的，由 JavaScript 驱动的 SVG 绘图编辑器，适用于任何现代浏览器，现已更新到版本 5+。
https://github.com/SVG-Edit/svgedit
Recharts
一个基于 React 构建的可组合图表库，现已更新到版本 1.6。
http://recharts.org/en-US/
Enpose
简单的截图机器人，通过基于 URL 的 API 创建自己的动态图像。
https://enpose.co/
创意
“订单确认”趣味按钮
https://codepen.io/aaroniker/pen/eYOVrNa?utm_campaign=CSS%20Animation%20Weekly&utm_medium=email&utm_source=Revue%20newsletter
codepen.io
模拟时钟
https://codepen.io/JavaScriptJunkie/pen/gOYvPMv?utm_campaign=CSS%20Animation%20Weekly&utm_medium=email&utm_source=Revue%20newsletter
codepen.io
滚动实验
https://codepen.io/andybarefoot/pen/rNBJGxj?utm_campaign=CSS%20Animation%20Weekly&utm_medium=email&utm_source=Revue%20newsletter
codepen.io
版本发布
- Node 12.10, https://nodejs.org/en/blog/release/v12.10.0/Handlebars.js
-
Handlebars.js 4.2, https://github.com/wycats/handlebars.jsVuePress
-
VuePress 1.0.4 - Vue 驱动的静态站点生成器, https://github.com/vuejs/vuepress
-
Riot 4.5 - 简单而优雅的基于组件的 UI 库, https://riot.js.org/
- RxDB 8.4 - JavaScript 应用程序的实时数据库, https://github.com/pubkey/rxdb
内容来源
- Frontend Focus, https://frontendfoc.us/
- JavaScript Weekly, https://javascriptweekly.com/
- Responsive Design Weekly, https://responsivedesign.is/
- Web Tools Weekly, https://webtoolsweekly.com/
- CSS Animation Weekly, https://weekly.cssanimation.rocks/
往期回顾
关注微信公众号：zhao-buhan，关注前端前沿技术
