See You Again

前端聚焦周刊:第 430 期

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

原文:Frontend Focus issue 430

翻译及校对:richshaw2015Yully Che

🚀 刊首

为什么 GOV.UK 设计团队更改了数字输入类型

Highlights how the <input type="number"> element can be somewhat problematic in some scenarios, and offers up a solution.

来源:Hanna Laakso

Safari 将暂停有效期超过 13 个月的证书

From September 1, any new certificate valid for more than 398 days will be rejected by Apple’s Safari browser. While this is a Safari only move for now, if this catches on it might affect how you manage your TLS certificates.

来源:The Register


Covers the significance of establishing code guidelines and standards at the beginning of a project, and the importance of evolving those standards as a project progresses.

来源:Brad Frost

CSS 工作组发布了四个“首次公开草案”

This update briefly discusses the first drafts for four specs: CSS Color Module Level 5, Media Queries 5, CSS Transforms Level 2, and CSS Conditional Rules Level 4.


Brave 浏览器自动将 404 页面指向历史版本

The web browser can now detect when a webpage is unavailable and will offer to search the Wayback Machine for a backup. The feature isn’t just for 404 errors though, as it will also trigger when hitting a 408, 410, 451, 500, 502, 503, 504, 509, 520, 521, 523, 524, 525, or 526 error.


来源:Jon Porter

不要再叫 ‘Drop-Down’ 了

使用更精准的叫法,例如 selectARIA ListboxdatalistARIA ComboboxAutocompleteARIA Menudetails/summaryDisclosure WidgetAccordionFly-out NavigationCustom Display SelectorOtherwordingness

This is a little opinionated because there does seem to be a place for the term, but getting the terminology right in the 11 instances discussed is important.

来源:Adrian Roselli

📙 文章、教程、观点

CSS 隐藏元素的十种方法

Each of the 10 methods has an accompanying chart that looks at various pros/cons including accessibility, browser support, layout/reflow, performance, and more.

来源:Craig Buckler

Currying in CSS?

The concept here is based on the fact that the values of CSS custom properties aren’t evaluated until they’re used. This kinda sorta resembles ‘currying’ in JS.

  1. :root {
  2. --card-padding: 40px;
  3. --card-background: #FAFAFA;
  4. }
  5. .card {
  6. padding: var(--card-padding);
  7. background: var(--card-background);
  8. }

来源:Trys Mudford


Dave has created a “living document” (that he intends to keep updated) that references different problems various sources have found with the accessibility of certain HTML elements.

来源:Dave Rupert


Subjects discussed include request rates, down time, HTTP status codes, delegating business logic, CORS, and cache busting.

来源:Alexander Wang

CSS 的负边距

As the author points out, this might be the only article that covers negative margins in-depth (though it doesn’t go into flexbox and grid).


如何在 Vanilla JS 中使用 requestAnimationFrame()

If you’ve never really had a use for this feature, but want to know how it works, this is easy to follow with some simple demos.

  1. window.requestAnimationFrame(function () {
  2. console.log('it ran!');
  3. });

来源:Chris Ferdinandi

Vue 的组件构建思路

A step-by-step tutorial building a search bar component. Good for those already familiar with Vue but maybe want to see another developer’s perspective on component composition.

来源:Marina Mosti

使用 Vanilla.js 构建单页应用(SPA)

来源:Jeremy Likness

🔧 代码、工具、资源


This nifty browser-based tool can create smooth looking layered box-shadows. There is also an accompanying Figma plugin.

来源:Philipp Brumm

Heroicons:免费的 MIT 许可的高质量 UI 开发 SVG 图标

140 icons in total, available in solid or outline style.

来源:refactoring ui超过 500 个可自定义的 CSS 图标

Another icon set, this time a collection of retina-ready icons built in CSS.

来源:Astrit Malsija

Google Lighthouse Firefox 插件

The mega-popular performance and website quality tool is now available as a Firefox extension.


Pep:立即将您的网站转换成快速、可安装的 PWA

Ostensibly can be done using a single line of code. Free for sites up to 10k page views per month and there are paid plans after that.


Panolens.js:基于 Three.js 的 JavaScript 全景查看器

View examples here. This is a lightweight, flexible, WebGL-based panorama viewer built on top of Three.js.

来源:Ray Chen

来源:Web Font of the Week

Shake 字体

There’s a deeply personal story behind this font initiative, and although finding a practical use for it may prove tricky, it has been created to raise awareness and fund Parkinson’s research.

💻 招聘


🗓 未来大事记


2020-06-18 喜欢

Copyright © 2015-2021 BY-NC-ND 4.0

回到顶部 ↑