See You Again

前端聚焦周刊:第 442 期

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

原文:Frontend Focus issue 442

翻译及校对:richshaw2015Yully Che

🚀 刊首


Ten years ago the phrase ‘responsive web design’ was first coined. This guiding blog post, outlining the three ‘ingredients’ needed (fluid grids, flexible images, and media queries), soon followed. Here, Ethan takes a look back at just how responsive design came to be.

来源:Ethan Marcotte

Edge 自 2020 年以来的所有新功能

Microsoft Build 2020 took place entirely online for the first time last week but it wasn’t short of announcements and great talks, particularly for MS’s Edge browser. Here’s a video roundup of what’s new if you’d prefer.

来源:Kyle Pflug (Microsoft)

Google Fonts 很快,现在变得更快了

Using Google Fonts? It can often prove to be one of the bigger performance bottlenecks, but in this thorough guide Harry Roberts runs through several optimisations you can put in place to make things snappy.

来源:CSS Wizardry

WebGL 完全指南

A really detailed walkthrough of getting started with WebGL at the low level, complete with integrated, editable examples and coverage of the math behind 3D rendering. If you’ve ever wondered what libraries like Three.js are using behind the scenes, it’s all here.

来源:Maxime Euzière

⚡️ Quick bits:

📙 文章、教程、观点

掌握 Line Height 属性

Caleb Williams looks at the line-height property, “probably one of the most misunderstood, yet commonly-used attributes”.

来源:CSS Tricks

如何使用 Flexbox 水平和垂直居中

You’ve heard all the jokes about the difficult of center aligning things with CSS, but laugh no more as Ali demonstrates how to do it in just a minute.

来源:Ali Spittel

iPhone 本地调试

You should be testing on a real-world mobile device, so here’s a nice and quick way to get your localhost server running on an iPhone with the help of ngrok.

来源:Josh Comeau


One of the more controversial topics in frontend web dev is microfrontends. Are they worth it? Should you really split up your application?

来源:Florian Rappl

这些是我不知道的 content 用法

You’ll no doubt learn something here.

  1. .new-item::before {
  2. /* "Highlighted item" and element content is read out */
  3. content: "★" / "Highlighted item";
  4. }

来源:Manuel Matuzović

使用 Cloudflare、GitHub Actions、Metalsmith 开发一个简单的 CMS 系统

Let’s say you want to build a CMS but don’t want to mess with the fiddly UI bit.. how about using GitHub itself? Couple that with the Metalsmith static site generator and Cloudflare Workers.. and here you go.

  1. ├── build.js
  2. ├── dist
  3. └── worker.js
  4. ├── layouts
  5. ├── about.hbs
  6. ├── article.hbs
  7. ├── index.hbs
  8. └── partials
  9. └── navigation.hbs
  10. ├── package-lock.json
  11. ├── package.json
  12. ├── public
  13. ├── src
  14. ├──
  15. ├── articles
  16. ├──
  17. └──
  18. └──
  19. ├── workers-site
  20. ├── index.js
  21. ├── package-lock.json
  22. ├── package.json
  23. └── worker
  24. └── script.js
  25. └── wrangler.toml

来源:Jon Paul Uritis

target="_blank" — 一个被低估的安全漏洞

Why rel="noopener" should be added to links containing target="_blank" as a precaution against reverse ‘tabnabbing’.

  1. <a href= '/share' rel="noopener noreferrer" target="_blank"/>

来源:Manjula Dube

Using Chrome DevTools Console Utilities to Make Debugging Easier

来源:Tomasz Łakomy

🔧 代码、工具、资源 5:通过预读让网站体感更快

A reasonably simple piece of JavaScript you can drop onto a page that adds link preloading (upon mouse or pointer hover on a link) to make page transitions seem unnaturally fast.

  1. <script src="//" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

来源:Alexandre Dieulot

Tailblocks: Ready-to-Use Tailwind CSS Blocks

This is a set of 60+ ready-to-use UI blocks built with Tailwind, the popular CSS framework. 15 categories of blocks, which you can preview here.

来源:Mert Cukuren

Blunt: A CSS Framework That Helps with Layouts and Leaves Your Styling Alone

This is a little different. This framework doesn’t have any effect on design visuals, it only provides helper classes for positioning and responsive layouts.


LaTeX.css:让你的网站更像一个 LaTeX 文档

LaTeX is a popular typesetting system frequently used in academia and mathematic or scientific documentation.

  1. <link rel="stylesheet" href="" />

来源:Vincent Dörig


Makes things easier cross-platform. Uses the Web Audio API but can fall back to HTML5 Audio.

来源:James Simpson

LineIcons:2000+ 免费的线条图标

A nice looking set of line-based icons, categorized, and available in a number of different formats including web font, SVG, AI, and more.


纯 CSS 实现的油画

Another amazing effort, this time of an Italian-style renaissance painting, from CSS artist Diana Smith. Related repo.

来源:Diana Smith

💻 招聘


🗓 未来大事记


2020-08-12 喜欢

Copyright © 2015-2021 BY-NC-ND 4.0

回到顶部 ↑