See You Again

前端聚焦周刊:第 437 期

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

原文:Frontend Focus issue 437

翻译及校对:richshaw2015Yully Che

🚀 刊首

深入开发者的内心:如何策划一个 UI 特性

A look at how to approach building a new frontend feature in a thoughtful, considered way, based on one developer’s own thought process. It’s neat to see how he’d approach the task of building a basic heatmap (above).

来源:Johannes Kettmann

JavaScript 框架的性能开销

Using data from the HTTP Archive, Tim explores the performance cost of using various popular frameworks as a starting point. Some good analysis here.

来源:Tim Kadlec

CSS 中 LCH 颜色的一切

An introduction to LCH colors (Lightness, Chroma, Hue), a new feature in CSS, which Lea refers to as a “game changer”. There’s a related LCH color picker tool too.

来源:Lea Verou

‘We’ve Ruined The Web. Here’s How We Fix It.’

An interesting hour-long chat with Jeremy Keith, a ‘philosopher of the internet’, on the imbalances found in the modern the web:

“All the evidence staring us in the face is that faster websites will make you more money – yet for some reason, that’s just ignored in favor of weirdly prioritized stuff.”

来源:Gerry McGovern podcast

Tailwind CSS 1.3.0 发布

We’ve linked to this popular utility-first CSS framework a fair few times over the years and it continues to improve. This latest release brings with it declarative layout utilities, transition-delay support, font-size/line-height pairings and more.

来源:Tailwind CSS

📙 文章、教程、观点

前端刷题的 13 个网站

“My favorite way to level up as a front-end developer is to do the work. Literally just build websites,” says Chris Coyier. If you’re short of ideas on how to level up, these other sites will help.

来源:Chris Coyier

Listboxes vs. Dropdown Lists

An in-depth look at the advantages and disadvantages of using two HTML form components, one much more common than the other.

来源:Anna Kaley

📅 All Day Hey! Live: An Online Conference for Designers & Frontend Devs

This all-day conf is now fully digital, and will be live-streamed early next month. The lineup is looking good, with speakers from Netlify, Smashing Magazine, and Microsoft to name a few. Tickets are affordable, and those currently out of work can attend for free.


使用 CSS clip-path 创建形变动画

Learn how to implement morphing, a technique for transforming one appearance into another, using CSS.

来源:Mikael Ainalem

使用 CSS 伪随机属性添加插图

Eric’s personal site has recently been redesigned, bringing with it a collection of Japanese illustrations - used to add a bit of flourish and decoration between bodies of text. Here’s how Eric got one of the set of illustrations to display at random with just CSS (no PHP or JavaScript here).

来源:Eric Meyer

Wes Bos 的网站重构分享

Always nice to see folks update a personal site (more of this please!). Here’s how Wes Bos moved away from WordPress over to a Gatsby set up.

来源:Wes Bos


How to create a ‘quick and dirty’ dark mode for simple apps/sites using pure CSS.

  1. @media (prefers-color-scheme: dark) {
  2. filter: invert(90%) hue-rotate(25deg);
  3. }
  4. @media (prefers-color-scheme: dark) {
  5. img, video, iframe {
  6. filter: invert(100%) hue-rotate(-25deg);
  7. }
  8. }

来源:Chase McCoy

使用渐变和阴影画一个 Macintosh

Sarah runs through a quick explanation of how they created an original Macintosh using CSS.

来源:Sarah L. Fossheim

Are You using SVG Favicons Yet? A Guide for Modern Browsers

来源:Antoine Boulanger

🔧 代码、工具、资源


A neat collection of CSS-only backgrounds. You can see them in action on the demo site.

来源:Jiten Bansal

Good Email Code:编写 HTML 邮件的库和指南

This seems to be in early development but contains some snippets with explanations for cross-browser HTML email code.

来源:Mark Robbins

Isomorphic Layout Composer

An SSR layout service that composes a web page from fragment services.



This generates deep-linked color combos not often used by developers. Not sure how they determine least-used, but the example combos are indeed interesting and not-so-common.


💻 招聘


🗓 未来大事记


2020-07-31 喜欢

Copyright © 2015-2021 BY-NC-ND 4.0

回到顶部 ↑