本期刊专注于 Web 前端前沿技术,收集的内容来自于国外各大前端技术周刊,这里把自己感兴趣的,并值得分享的内容做了整理。
部分链接可能无法直接打开,你需要通过科学上网的方式来解决。
本期热文
图解 CSS Grid
用详细的,直观地插图来掌握 CSS Grid。
https://dev.to/mustapha/css-g...
MUSTAPHA AOUAS
使用 Tensorflow 让前端开发者进行机器学习
Charlie Gerard 介绍了如何使用 JavaScript 和 Tensorflow.js 之类的框架开始机器学习,并着重介绍了在前端进行机器学习的局限性。
https://www.smashingmagazine....
SMASHING MAGAZINE
Firefox 进入更快的 4 周发布周期
我们只需不到几年的时间就能达到 Chrome 100,而 Firefox 似乎也希望采取行动, Firefox 的发布节奏从 Firefox 71 开始,将从每个版本大约 6-8 周调整为 4 周。
https://hacks.mozilla.org/201...
MOZILLA HACKS
为什么 0.1 + 0.2 === 0.30000000000000004
:在 JS 中实现 IEEE 754(视频)
访问您的 JavaScript 控制台,然后输入 0.1 + 0.2
。 如果答案使你感到困惑,那么你可以在这个视频中找到答案。
https://www.youtube.com/watch...
LOW LEVEL JAVASCRIPT
维基百科在有限开支下的 JavaScript 初始化
维基百科每分钟获得 363,000 次页面浏览, 本文介绍了他们如何将 JS 有效负载从 36kb 下降到 28kb,仅在文件上节省了 8kb,相当于每天节省 4.3 TB 流量。 这意味着,每天约相当于 30.4 吨的二氧化碳,或者 159,805 公里(绕地球 4 圈)的长途汽车旅行。
https://phabricator.wikimedia...
Chrome 77 的新功能
从 Chrome 77 开始,在浏览器中内置了原生懒加载功能。 只要 上增加
loading="lazy"
,您的图片就只会在进入视口时加载。 视口的接近程度取决于以下几个因素:
- 正在获取的资源类型(图像或 iframe)
- 是否在 Android 版的 Chrome 上启用了精简模式
- 有效连接类型
https://developers.google.com...
文章 & 教程
如何分析 React App 的性能
了解如何使用 React DevTools 和 React 的 profiling 构建来开始对生产应用进行性能分析。
https://kentcdodds.com/blog/p...
KENT C DODDS
Console.log()
—调试时应使用的 8 种方法
其中包括了 console.assert
,console.count
,console.group
和两种计时方法。
https://t.co/HSVgSHEPVV
MARCO ANTONIO GHIANI
4 个迭代器和生成器的指南
https://jfet97.github.io/Java...
ANDREA SIMONE COSTA
从 jQuery 转换为普通 JavaScript 的备忘清单
https://tobiasahlin.com/blog/...
TOBIAS AHLIN
使用 CSS 变量的逻辑运算
如何通过 calc()
函数使用算术运算在 CSS 中模拟 not(var(—i))
之类的函数。
https://css-tricks.com/logica...
ANA TUDOR
如何安置表单按钮
好的表单设计非常困难。该教程专门研究按钮的位置,以及创建它们的最佳方法。
https://adamsilver.io/article...
工具 & 资源
Sortable 1.10
一个可重新排序的拖放列表。在触摸屏和现代浏览器上表现良好,可在列表间拖动项目、定义拖动手柄,可用于 Angular 和 React。
https://sortablejs.github.io/...
SORTABLE
Vue Select
Vue 的一个功能丰富的 组件
https://vue-select.org/
JEFF SAGAL
Emittery
一个简单的现代异步事件发射器。
https://github.com/sindresorh...
SINDRE SORHUS
HTML Minifier
一个高度可配置化的,基于 JavaScript 的 HTML 压缩程序。已更新到版本 4+
http://kangax.github.io/html-...
MySigMail Card
一个无需编码和设计,可拖放式的电子邮件模板构建器。
https://landing.card.mysigmai...
React Spaces
可以让你将页面或容器划分为可嵌套的锚定,或可滚动和可调整大小的空间的 React 组件。
https://github.com/aeagle/rea...
React 数据表格组件
一个简单的,可排序的,灵活的 React 表格库。
https://github.com/jbetancur/...
react-textarea-autocomplete
增强的 textarea
,用于自动完成功能,例如在 GitHub 注释中(比如:表情符号 和 @)。
https://github.com/webscopeio...
创意
ThreeJS Moon
NASA 科学可视化工作室创造的月亮纹路。基于月球表面的真实照片,并使用 ThreeJS 处理的动画。
https://codepen.io/g12n/pen/v...
具有悬浮效果的 CSS 按钮
https://codepen.io/JeremyWink...
版本发布
- Relay 6.0 — 用于构建数据驱动的 React 应用程序的框架,https://github.com/facebook/r...
- PapaParse 5.1 — CSV 快速解析器,https://github.com/mholt/Papa...
- Glide 3.4 — 无依赖的滑块和轮播,https://github.com/glidejs/glide
- ESLint 6.4.0,https://eslint.org/blog/2019/...
内容来源
- 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.r...
往期回顾
- 2019 年最佳的 10 个 CSS 框架
- D3.js 简介
- JavaScript 是如何成长并成为一门“真正的”语言的
关注我的公众号,关注前端技术