See You Again

前端聚焦周刊:第 427 期

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

原文:Frontend Focus issue 427

翻译及校对:richshaw2015Yully Che

🚀 刊首

Chrome 保护用户免受不安全下载影响

In a move designed to stop unsafe downloads, starting in April, Chrome will block files downloaded insecurely (non-HTTPS downloads started on secure pages) from HTTPS pages. Here’s The Register’s take on this change.

来源:Joe DeBlasio (Google)

Mozilla 在浏览器竞争中落败,但它仍然认为它可以拯救互联网

The inside story of Mozilla’s long, sometimes lonely and totally idealistic quest: “The only way to fight Google, Facebook and the rest of the seemingly unstoppable tech giants is to change the structure and technology of the internet itself.

来源:David Pierce

什么是 CSS4?

A number of bloggers have responded to PPK’s original article calling for better marketing efforts around CSS. Here PPK furthers the discussion with a response to those articles.


你应该自托管 Google 字体吗?


A detailed and considered look at what we can do to minimise the performance impact of third-party fonts, whilst also giving designers what they want - win win.

来源:Barry Pollard

Firefox 73 来了

Released yesterday, this version adds CSS logical properties, letter-spacing and word-spacing support when working with SVG, DevTools updates and more. You can see the full list of changes for developers here.

来源:Chris Mills (Mozilla)

📙 文章、教程、观点


If you’ve got a lengthy article with lots of subsections, how about putting a handy, sticky navigational menu alongside of it? Here’s how.

来源:Chris Coyier

期望的 CSS 特性

A bit of wish-casting here, conjuring up a half dozen or so little ideas and features that would be nice to see in the CSS of the future.

来源:Tyler Sticka


Tim Kadlec talks to designer Karolina Szczur about third-party scripts, how to identify which ones are problematic, and what you can do about it.

来源:Chasing Waterfalls podcast


Vue、React、Angular 的竞品,前端框架真是层出不穷。

Svelte is an interesting compile-time framework. Here’s why you may want to consider using it.

来源:Tristram Tolliday


Learn how to design and build an accessible autocomplete control from scratch.

来源:Adam Silver

🔧 代码、工具、资源

Tailwind 1.2.0 发布

The new version of this popular utility-first CSS framework is described as “probably the most exciting feature release in the history of Tailwind”. It adds CSS Transition, Transform and Grid support, plus a ton of other additions.

来源:Adam Wathan

CheerpJ 2.0 发布:Java 到 WASM 和 JS 的编译器

This is a commercial tool (though free for non-commercial purposes) but as someone who started on the Web in the 90s, the idea of Java being compiled to JavaScript continues to tickle me. 🙂 Interesting tech.

来源:Stefano De Rossi

Griddle:CSS 网格框架

A just-add-classes grid framework based on the Grid Layout module and Flexbox. If you’ve used Bootstrap grids, this should be easy to use.

来源:Dave Berning

rgbKineticSlider:WebGL 实现的轮播特效

demo 效果太酷炫了!

A fully customizable WebGL slider/carousel based on PixiJS and GSAP. Certainly not for every project, but the demos are worth a look.

来源:Hadrien Mongouachon

公共的 Sans 字体

A reworking of Libre Franklin by the USWDS department of the GSA, a US government agency. It’s freely licensed and comes in nine weights.



This lightweight and cross-browser library helps auto-detect a user’s local time and switch themes.

  1. <script src="darkmode.js"></script>
  2. <script>
  3. var options = {
  4. light: "light.css",
  5. dark: "dark.css",
  6. startAt: "23:00",
  7. endAt: "06:00",
  8. checkSystemScheme: true,
  9. saveOnToggle: true
  10. };
  11. var DarkMode = new DarkMode(options);
  12. </script>

来源:Nickolas Deny


If you’ve seen how Medium lets readers select text and share it, it’s like that, but lighter.

来源:Estevan Maito


Native Mac or Windows app. A free editor to create animated SVG icons using a nice clean interface.

来源:Philip Ardeljan

🖍 漫画:Mastery of HTML has to start somewhere…

来源:(Image shared with permission via: Becks)

💻 招聘


🗓 未来大事记


2020-04-05 喜欢

Copyright © 2015-2021 BY-NC-ND 4.0

回到顶部 ↑