See You Again

前端聚焦周刊:第 445 期

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

原文:Frontend Focus issue 445

翻译及校对:richshaw2015Yully Che

🚀 刊首

Bootstrap 5 Alpha 发布

It’s early days but the first useful glimpse of Bootstrap 5 is here, including a new logo. Bootstrap continues to be a very popular CSS framework, not least because it keeps taking useful steps forward. v5 drops jQuery, starts to use CSS custom properties (a.k.a. CSS variables), and has overhauled its form components and styling.

来源:The Bootstrap Team

Google 实验性移除 URL 的完整显示

Folks from Google have already discussed how changing the way a URL is displayed could work. Now, one such test is live in Chrome Dev/Canary 85. The move has attracted a fair bit of criticism, but you can opt out.

来源:Corbin Davenport


Anything you add to a browser is going to have performance repercussions in terms of memory consumption, any JavaScript to be run, effects on page rendering, etc. These results demonstrate the costs pretty well but there’s one nice exception: the effect of ad blockers on ‘noisy’ pages!


Web 引擎的多样性和生态

Over the past few years we’ve seen plenty of chatter around ‘browser engine diversity’. Here, Brian offers his “slightly tilted view of this” based instead on ‘the health of the ecosystem’, explaining why this may be a more valuable way to discuss these topics.

来源:Brian Kardell

⚡️ Quick bits:

📙 文章、教程、观点

使用可视化工具学习 Z-Index

Ever been stumped as to why setting a z-index to 99999 didn’t solve your positioning issue? This interactive guide to using both Z-Index and Stacking Contexts may prove handy.

来源:Thiru Manikandan

CSS 自定义属性失败后的回滚处理

Yup. Matthias shares how using supports() or a media-query can help deal with this quirk.

来源:Matthias Ott

Unicode 支持,具体是什么意思?😃

This Hacker News thread goes into the weeds on this, and well….it’s complicated.

  1. ſatisfaction == satisfaction == ſatiſfaction == Satiſfaction == SatiSfaction === ſatiSfaction

来源:Ben E. C. Boyter


This is an exhaustive look at the history of the search engine, covering everything from the DMOZ index to Duck Duck Go.

来源:Carl Hendy

Web Accessibility 是如何工作的

A quick introduction to the inner workings of web accessibility.

  1. <label for="accept-terms">I accept terms</label>
  2. <input type="checkbox" id="accept-terms" />

来源:Segun Ola

How I Fixed Accessibility On My Website and How You Can Fix Yours

Daniela shares the steps taken to fix certain accessibility issues (contrast, screen reader experience, alt tags) on her website.

来源:Daniela Matos de Carvalho

Jamstack 的五个神秘之处

There have been a growing number of posts criticizing Jamstack. Brian takes on some of the common misconceptions that often underly these critiques (via our Jamstack newsletter).

来源:Brian Rinaldi

Flow 浏览器通过了 Acid 测试

The work-in-progress browser Flow has just reached a development milestone, passing all three Acid tests. Plenty of in-depth browser chat sprung up around this news over on HN.

来源:Piers Wombwell

🔧 代码、工具、资源


This effect feels a little overdone nowadays, but this library is small, efficient, and it feels performant to me too.

来源:Al Mamun


This tool does a fairly basic check for things like broken links, broken images, spelling errors, and potential layout errors (e.g. something overflowing a container). Example test.


SVGuitar:创建基于 SVG 的吉他图谱

As simple as that, really :-)

来源:Raphael Voellmy


The site allows you to mix, match, and customize a whole slew of different illustrations that you can download in PNG or SVG format (requires sign-up for large versions).

来源:Blush Design

Postcards:通过拖拽创建 HTML 邮件模板

A free to start ‘no-code’ platform for building responsive HTML email templates. Uses a drag-and-drop UI and includes lots of pre-built components.


本周字体 Poppins

From the Indian Type Foundry — this is an ‘internationalist take’ on the geometric sans-serif typeface with support for both Latin and Devanagari writing systems. The glyphs sport a practical, monolinear look which works well in many settings.

💻 招聘


🗓 未来大事记


2020-09-18 喜欢

Copyright © 2015-2021 BY-NC-ND 4.0

回到顶部 ↑