See You Again

前端聚焦周刊:第 443 期

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

原文:Frontend Focus issue 443

翻译及校对:richshaw2015Yully Che

🚀 刊首

CSS 变量用户指南

A long-requested but still underused feature. Here’s a solid look at the “revolutionary possibilities for collaboration and code reuse” that CSS custom properties for cascading variables offer.

来源:Lea Verou

Web 标准贡献指南

The Web Platform Contribution Guide is an online resource for anyone who wants to participate in the development of Web standards present and future. If the idea of Web standards boggles your mind at all, this is a very accessible guide.


Edge 和 Windows 更新捆绑

Yep, Microsoft’s Chromium-based Edge launched back in January, but users had to specifically download it. It will now be automatically installed.


来源:Tom Warren

htmx:使用 HTML 属性构建动态页面

Billed as the ‘successor to intercooler.js’, htmx lets you add dynamic Ajax-y elements, Server Sent Events (SSE), WebSockets and more to a site using just HTML attributes.

  1. <!-- Load from unpkg -->
  2. <script src=""></script>
  3. <!-- have a button POST a click via AJAX -->
  4. <button hx-post="/clicked" hx-swap="outerHTML">
  5. Click Me
  6. </button>

来源:Big Sky Software

⚡️ 速报

📙 文章、教程、观点

CSS 变量的全局设置和组件样式

A look at how to use CSS variables to create more manageable project styles and more portable patterns.

来源:Sara Soueidan

初看 aspect-ratio

It’s not directly supported in any browsers yet but its arrival is described as ‘impending’. Stuff like aspect-ratio: 16 / 9 certainly seems nice, though, so we’re keeping our fingers crossed..

来源:CSS Tricks

🍔用 SVG 和 CSS 做一个汉堡菜单

A step by step guide to creating a hamburger menu animation with SVG and CSS.

来源:Mikael Ainalem


Definitely not for the faint of heart. This is a pretty deep dive into containing blocks, rendering, and scroll performance.

来源:Chen Hui Jing


Thoughts on the shifting responsibilities of frontend developers, a place which puts us “between the thing we’re building and the people we’re building it for”.

来源:Chris Coyier

延迟 Keyframes 动画的新方式

If you’ve ever wanted to add a pause between each iteration of your CSS @keyframes animation, it’s.. not easy. Here’s an interesting technique to create such an effect, though.

来源:Eric Johnson

使用 CSS Grid 创建堆叠的标题

A clever (sneaky?) use of :before makes it all work.

来源:Jonathan Snook

CSS Aspect Ratio, Rendering Engines, and More with Jen Simmons

Web Designer and Developer Advocate Jen Simmons joins Dave Rupert and Chris Coyier to talk about her new HTML Essentials course, CSS Aspect Ratio, and rendering engines vs browsers.

来源:ShopTalk Show podcast


A closer look at the component-based library.

来源:Anthony Le Goas

🔧 代码、工具、资源


Uses Rough.js for the handdrawn look. Lots of nice interactive examples on the page showing the diversity of annotation types.

来源:Preet Shihn

htmlgoddess:生成类似 1999 年代码风格的静态站点

Feels a bit like satire, but seems to be a real framework that wants to promote simplicity, speed, and accessibility in web pages. Backstory here.

来源:Jonathan Crockett

AudioMass:功能齐全的 Web 端的音频剪辑工具

Runs entirely in the browser with no backend or plugins required. Impressive. Source here.

来源:Pantelis Kalogiros

Easings: Generate, Test & Share Custom Cubic Bezier Easing Curves

This online tool lets you play around with cubic-bezier() values to create custom easings that you can drop into transitions and animations.

来源:Paul Macgregor

Perspective:通过 WebAssembly 实现数据流的可视化

An interesting use for WebAssembly here. Originally built for J P Morgan, Perspective is for building real-time high performance interactive visualizations, powered by a C++ engine compiled to WASM under the hood.

来源:The Fintech Open Source Foundation

更好的键盘 CSS

A quick way to improve the readability of keyboard shortcuts when you’re mentioning them in text. I love simple little solutions like this.

来源:Terence Eden

💻 招聘


🗓 未来大事记


2020-08-12 喜欢

Copyright © 2015-2021 BY-NC-ND 4.0

回到顶部 ↑