See You Again

前端聚焦周刊:第 448 期

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

原文:Frontend Focus issue 448

翻译及校对:richshaw2015Yully Che

🚀 刊首

Chrome 新 TAB:’CSS Overview’

This new experimental feature in Chrome looks really neat. It provides an overview of the CSS on a site, detailing colors, fonts, media queries and unused declarations.

来源:Robin Rendle

CSS 的新特性 – 202007 版

Rachel Andrew takes a look at some of the interesting CSS features that are making their way into browsers right now, including Flexbox gap support, the aspect ratio unit, and more.

来源:Smashing Magazine


Covers different options and approaches (design, technical considerations, etc) for implementing dark mode.

来源:Mohamed Adhuham

Web 开发的至暗时代

A visual trip down memory lane covering many of the old web dev techniques and online trends from the early days of the web. Beware, some flashing animations on this page.

来源:Pavel Laptev

一行 CSS 代码实现的十种现代布局

A snappy and dynamic talk from Una Kravets highlighting how just a single-line of CSS can do “some serious heavy lifting” and build a robust modern layout. You can see them all in action here.

来源:Google Chrome Developers

⚡️ Quick bits:

📙 文章、教程、观点

Creating a Menu Image Animation on Hover

How to create a hover effect for a menu where images appear with an animation on each item.

来源:Mary Lou

使用 Next.js 构建 Tailwind 博客的过程

The Tailwind team talk about how they set up their blog and some challenges they faced, particularly some complexities around the choice to use MDX for content.

来源:Adam Wathan

使用 border-radius 属性定义水平和垂直圆角

A look at how to use CSS border-radius to create not only basic shapes but complex ones too.

来源:Jehy Tompkins

Why Browser Security UI Isn’t Specified

来源:Alex Russell


来源:Timi Omoyeni

Goodbye Squarespace. Hello Eleventy, Tailwind CSS and Netlify!

It’s great not only to see people transitioning to the Jamstack (we have a newsletter for that), but also to hear about some of the difficulties they faced in making that transition.

来源:Sahil Parikh

🔧 代码、工具、资源

Textures.js:数据可视化之 SVG 网格花纹

Built on top of d3.js, this lets you bring together patterns and colors in an elegant and, dare we say, old school manner.

来源:Riccardo Scalco


Released to celebrate Independence Day, here’s an all-American stylesheet. Even if you have no need for US-related symbols and patterns, you might pick up something from how they’re implemented.

  1. .usa-stars {
  2. background: linear-gradient(324deg, #3c3b6e 4%, transparent 4%) -0.7in 0.43in,
  3. linear-gradient(36deg, #3c3b6e 4%, transparent 4%) 0.3in 0.43in,
  4. linear-gradient(72deg, #fff 8.5%, transparent 8.5%) 0.3in 0.43in,
  5. linear-gradient(288deg, #fff 8.5%, transparent 8.5%) -0.7in 0.43in,
  6. linear-gradient(216deg, #fff 7.5%, transparent 7.5%) -0.7in 0.23in,
  7. linear-gradient(144deg, #fff 7.5%, transparent 7.5%) 0.3in 0.23in,
  8. linear-gradient(324deg, #3c3b6e 4%, transparent 4%) -0.2in 0.93in,
  9. linear-gradient(36deg, #3c3b6e 4%, transparent 4%) 0.8in 0.93in,
  10. linear-gradient(72deg, #fff 8.5%, transparent 8.5%) 0.8in 0.93in,
  11. linear-gradient(288deg, #fff 8.5%, transparent 8.5%) -0.2in 0.93in,
  12. linear-gradient(216deg, #fff 7.5%, transparent 7.5%) -0.2in 0.73in,
  13. linear-gradient(144deg, #fff 7.5%, transparent 7.5%) 0.8in 0.73in,
  14. #3c3b6e;
  15. background-size: 1in 1in;
  16. }

来源:Bennett Feely

使用 Speedlify 持续测试网站性能

A new tool by Zach Leatherman that can run locally or on Netlify for running continuous performance measurements.

来源:Zach Leatherman

Keyframes:创建 CSS 动画工具

Has a visual timeline to help create, view, and run animations without having to go back and forth between browser and editor.

来源:Mitch Samuels

Image Extractor:从任何公开网站抓取图片

Works fast. Just enter a URL and all the images will be displayed in a gallery from where you can download all, or choose the ones you want (for personal use only, of course).


Hyperapp:开发 Web 界面的微型框架

Claims to be 2x faster than React and comes in at less than 2KB.

来源:Jorge Bucaran

Quik:通过后台服务兼容旧 IE 浏览器

Currently in private alpha. This tool runs a modern browser headlessly that then draws your website for anyone visiting on an old version of Internet Explorer. We’re linking to this more because it’s an interesting idea.


💻 招聘


🗓 未来大事记


2020-09-18 喜欢

Copyright © 2015-2022 BY-NC-ND 4.0

回到顶部 ↑