See You Again

前端聚焦周刊:第 440 期

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

原文:Frontend Focus issue 440

翻译及校对:richshaw2015Yully Che

🚀 刊首

深入理解 CSS contain 属性

This is a comprehensive look at a new-ish CSS property (now a standard) with pretty good browser support that helps a browser to calculate a page’s layout more efficiently.

来源:Travis Almand

Does Masonry Belong in The CSS Grid Specification?

Rachel’s thoughts on the proposal to add masonry layout into the Grid specification, along with a demo and a request for readers to add their own comments on the CSS WG thread.

来源:Rachel Andrew

脸书如何重构 Facebook.com 技术栈

Facebook completely rebuilt its tech stack to achieve its performance and growth goals. Here’s how they’ve done it with React, Relay, SVG, code-splitting, and more.

来源:Ashley Watkins (Facebook)

多亏了 Covid-19,网站可用性从未像现在这样重要

A good reminder of the importance of accessibility, especially considering that many will be accessing critical online content more often during this crisis.

来源:SEAN BRADLEY

React 中更加友好的动画

An extensive look at using the prefers-reduced-motion media query (including using it with matchMedia in JavaScript) to disable animations for users who have that preference set.

来源:josh w comeau

📙 文章、教程、观点

Firefox 即将推出的进程管理器

Mozilla is working on integrating a process manager into Firefox to provide detailed process information. Here’s a look at it.

来源:Martin Brinkmann

如何将滚动百分比显示在标题栏

This is a neat little trick. Using both React and Gatsby to show how much of a page you’ve read (scrolled) in the title bar/tab.

来源:Knut Melvær

lh and rlh 单位:还没支持,但总有一天会

Two new unit types from the Level 4 spec for CSS values. 1 lh unit is “equal to the current computed value of line-height” and rlh is the same but for the root element. What supports it? Nothing yet.

来源:Chris Coyier

一个复杂表格的设计案例

Designing a table with lots of data to display can be a tricky problem. James Long shares a considered look at how he went about it.

来源:James Long

理解为什么 Firefox 开发者工具中修改 CSS 规则后没有效果

This is an awesome little feature that’s been around for a few months now and is well worth checking out. It grays out CSS declarations that have no effect, provides tips on what is wrong, suggests ways to fix it, and provides a helpful link for more information.

来源:Elijah Manor

Micro-Typography: How To Space And Kern Punctuation Marks And Other Symbols

If you work with typography/UI/UX this is worth a read — it explores how to add/adjust spacing to certain characters in a consistent way. The author notes that it’s actually not as easy and quick as it should be.

来源:Thomas Bohm

为什么以及如何避免在单页面应用中跨域

Puts forward why you should avoid cross-origin resource sharing (by using the proxy configuration in your frontend development server).

来源:Ashan Fernando

前端应用的 13 个安全提示

Advice on how to make your site less susceptible to bad actors.

来源:Deepak Gupta

如何轻松创建响应式的垂直对齐样式

来源:Paula Borowska

🔧 代码、工具、资源

Fast or Slow:全球的网站速度分析

Enter a URL to get a weighted average performance score based on multiple geo tests. Detailed reports are then shareable via URL for 90+ days (and you can subscribe for updates to specific reports).

来源:Fast or Slow

Bootstrap 4.5.0 发布

Originally planned as a patch release this got bumped up to a minor release due to some small new features. Also includes over a dozen bug fixes.

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

axe Linter:自动分析并修复可用性问题

A new GitHub-based tool from Deque Systems (read a write-up here) that checks source code for common accessibility issues and will automatically find and suggest fixes.

来源:Deque Systems

Canvas 引擎对比:PixiJS vs Two.js vs Paper.js

A benchmark of three popular 2D rendering engines/drawing APIs. Note: This will tax your system.

(几千个不同的矩形以不同的速度在画布上移动)

来源:SlayLines

GitHub Writer: WYSIWYG Rich-Text Editor for GitHub, Powered by CKEditor

This is a Chrome/Firefox extension that adds rich-text editing (as opposed to plain-text Markdown) to GitHub issues, pull requests, wikis, etc.

@2x-c1b37b343d.png" alt="">

来源:CKEditor Ecosystem

本周字体:Routed Gothic

来源:Remember those technical drawings with blue backgrounds from the mid-to-late 20th century? Well, this font from Darren Embry is a 21st century take on the lettering found in such drawings and documents.

💻 招聘

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

🗓 未来大事记

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

2020-08-12 喜欢

Copyright © 2015-2020 BY-NC-ND 4.0

回到顶部 ↑