前端技术日志 | 图解 CSS Grid

本期刊专注于 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",您的图片就只会在进入视口时加载。 视口的接近程度取决于以下几个因素:

  1. 正在获取的资源类型(图像或 iframe)
  2. 是否在 Android 版的 Chrome 上启用了精简模式
  3. 有效连接类型

https://developers.google.com...

文章 & 教程

如何分析 React App 的性能

了解如何使用 React DevTools 和 React 的 profiling 构建来开始对生产应用进行性能分析。

https://kentcdodds.com/blog/p...

KENT C DODDS

Console.log() —调试时应使用的 8 种方法

其中包括了 console.assertconsole.countconsole.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 的一个功能丰富的