See You Again

前端聚焦周刊:第 438 期

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

原文:Frontend Focus issue 438

翻译及校对:richshaw2015Yully Che

🚀 刊首

min(), max(), and clamp()` 等 CSS 魔术方法

The min, max, and clamp functions are now starting to see more widespread browser support. Here’s a video running through how these properties can be used to really open up responsive typography techniques.

来源:Kevin Powell


Bootstrap core team member Andrés Galante runs through how we can ensure our font sizes are accessible by asking what sort of best practices we can rely on to make an accessible reading experience.


CSS 国际化

An excellent guide to the various features in CSS that can be used as part of an internationalisation strategy that goes beyond mere translation.

来源:Chen Hui Jing

AMP 引入用户友好的加密支持

AMP aims to be all about providing speed to mobile consumers of content but paywalls just, well, get in the way. So Google and the AMP folks have come up with a way where protected content can be served and unlocked client-side for more performance. Cynically, of course, you could consider this yet another form of DRM for Web content…

来源:The AMP Blog

使用 Flutter 开发响应式 Web 和桌面应用

A look at the current state of Flutter for browser-based apps and how to create a responsive app using it.

来源:Carmine Zaccagnino

📙 文章、教程、观点

CSS 中的间距

This is pretty much everything you need to know about spacing in CSS, covering grid layout, flexbox, positioning, and lots more.

来源:Ahmad Shadeed

Web 应用的性能分析

An overview of how to use Chrome DevTools to understand a Web application’s performance bottlenecks.

来源:Sam Saccone


A thought-provoking piece by Ethan that looks at some of the problems inherent in our self-regulated industry, in particular related to performance and accessibility.

来源:Ethan Marcotte

CSS Clamp: The Goldilocks of CSS Math Functions

As with the video featured above, here’s a quick look at how to use min, max, and size with the clamp property.

来源:Steve Fenton

纯 CSS 实现的适用所有屏幕尺寸的提示

来源:Ted Krueger


  1. <progress id="reading-progress" max="100" value="0" ></progress>

来源:Rob OLeary

🔧 代码、工具、资源

98.css: A Design System for Building Faithful Recreations of Old UIs

If for any reason you need to your interface to look like Windows 98 then this library has you sorted. Here’s the associated repo.

来源:Jordan Scales

Color Accessibility: Tools and Resources to Help You Design Inclusive Products

We’ve linked to this before, but it’s recently been updated and remains a solid resource.

来源:Stéphanie Walter

Will It CORS?

A handy online tool/wizard for establishing how your (potential) use case will (or won’t!) operate alongside CORS (Cross-Origin Resource Sharing).

来源:HTTP Toolkit

Shorthand: A CSS Framework for Designers

Includes a “lite” (only gray) and “full” version. This is similar to utility class-based frameworks, so the draw here is that you don’t have to write any CSS, just add classes.

来源:Jiten Bansal

1loc:一行 JS 代码片段集合

A neat little collection of vanilla JavaScript one-liners divided into various categories (arrays, date/time, DOM, etc).

  1. // `arr` is an array
  2. const isEmpty = arr => !(Array.isArray(arr) && arr.length > 0 && arr.filter(el => el === undefined).length > 0)

来源:Nguyen Huu Phuoc

🕰 推荐拾遗

💻 招聘


🗓 未来大事记


2020-07-31 喜欢

Copyright © 2015-2021 BY-NC-ND 4.0

回到顶部 ↑