See You Again

前端聚焦周刊:第 419 期

这里是 Frontend Focus 的中文翻译项目,每周在 Oh My RSS 平台首发。

如有翻译错误或国外优质文章推荐,欢迎提交 issue。

原文:Frontend Focus issue 419

翻译及校对:richshaw2015Yully Che

🚀 刊首

更好地定制输入组件

Julie Grundy 探讨了自定义表单存在的各种问题,给出了自己的实现方案,兼顾美观、屏幕缩放、读屏软件、高对比度、输入提示、交互性等因素。

来源:Julie Grundy

Bootstrap 4.4.0

该版本引入了新的响应式布局实现,包含了若干 bug 修复和废弃特性。

来源:Mark Otto, Jacob Thornton, and Bootstrap contributors

Mozilla 在 macOS 的日构建版本中推出 Firefox Replay

这个特性刚推出来,可以记录、回放、回滚到各种状态,包括 JS 行为、DOM 变化、界面更新等。其他平台支持将稍后提供。有关该项目的详细信息,参见 Mozilla 的网站。

来源:Paul Hill

如何使用新的 CSS 语法 :is() 简化元素定位

这篇直观的展示了这个新的“匹配任何元素”伪类选择器的几种用法,以及如何与 :not 搭配使用。它将是 :any() and :matches() 的继任者。

来源:Kezz Bracey

这几招可以改善网站的图片加载性能

Jen Simmons 解释并再次建议对所有图片增加宽高属性声明,以阻止加载“垃圾信息”。

来源:Mozilla Developer

Web 游戏相关的 W3C 状态更新

W3C 提供了构建 Web 游戏所需的各种技术要点概述,包括 WebAssembly、Gamepad API、Web Monetization API 等。

来源:François Daoust (W3C)

📙 文章、教程、观点

Edge 和 Chrome 之战:微软的“防跟踪”特性给 Google 一击重拳

新的 Edge 浏览器采用了与 Google Chrome 相同的基础源代码,并包含了新的“防跟踪”特性,该功能可屏蔽第三方跟踪器,在严格模式下还能阻止许多广告。

来源:Ed Bott

Firefox 界面使用 Web 组件构建

几周前,Mozilla 把原来基于 XML 的界面实现转成了基于 Web 组件技术构建。这篇博文解释了背后的原因。

来源:Brian Grinstead

Web API 画中画简介

Chrome 支持“画中画”机制,即在所有页面之上创建视频播放浮窗。Firefox 和 Safari 也有专门的 API 支持。

来源:Ayooluwa Isaiah

从 Chrome 性能监控中学到的东西

近期的 performance.now() 会议上拍摄的演讲。点击查看相关 PPT

来源:Annie Sullivan

使用 CSS 自定义属性

本篇介绍了使用 CSS 自定义属性(CSS 变量)的基本知识,做主题时很有用。

来源:Kristofer Giltvedt Selbekk

不得已时才使用 label

这篇不是讨论表单或可访问性的,而是 label 元素的使用原则,包括放置位置、是否突出显示等,很多场景下是不需要它的。

来源:Refactoring UI

可预测的预加载

通过检测开发中使用的技术,以实现可预测的预加载,例如 GuessJS

来源:Divya Sasidharan

When JavaScript Bytes

该演讲介绍了减少 JavaScript 网络传输大小的实用方法。

来源:Tim Kadlec

使用 Vue.js 和 Tailwind 构建带动画的可拖动界面

Tailwind CSS 是一种越来越流行的 CSS 框架。

来源:Cristi Jora

常见的可访问性错误检查清单

来源:Bruce Lawson

使用 Phaser 在 Ionic Capacitor 中开发 H5 本地游戏

来源:Abhijeet Rathore

🔧 代码、工具、资源

CSSYBERTRUCK

特斯拉超级卡车的 CSS 动画演示。

Be a shame if someone was to tamper with those windows…

来源:David Khourshid codepen

WebGLStudio.js: 浏览器中的3D图形编辑器

作者宣称它已经比较成熟了,可以被扩展或者用于生产环境使用了(尽管1.0版本还有点距离)。

来源:Javi Agenjo

上周我们分享了 GSAP 3’s 的发布,现在 GreenSock 团队分享了一组该动画库的新功能。

来源:GreenSock codepen

Happy Hues: 辅助调色工具

寻找调色灵感的网站,可以生成各种颜色的搭配效果。

来源:Mackenzie Child

Creepyface: 让面孔跟随指针的 JS 库

来源:Alejandro Tardín

Screenshot-to-code: 将设计原型转换成静态网站的神经网络框架

来源:Emil Wallner

Wireframer:生成模拟文本占位符 SVG

来源:Jim Raptis

💻 招聘

译者注:如需了解,请查看原文

🗓 未来大事记

译者注:如需了解,请查看原文

2019-12-16 喜欢

Copyright © 2015-2022 BY-NC-ND 4.0

回到顶部 ↑