See You Again

前端聚焦周刊:第 451 期

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

原文:Frontend Focus issue 451

翻译及校对:richshaw2015Yully Che

🚀 刊首

设计自适应的组件,不止适配尺寸

Thoughts on designing systems of reusable components that adapt to responsive layouts, containers, work with different content states and adapt to user needs, behaviour and context.

来源:Stéphanie Walter

‘Can I Use’ 的 Beta 版本

Can I Use is a fantastic resource for checking browser compatibility for modern Web Platform features and a redesign is on the way with performance improvements, better visual accessibility, nicer URLs, dark mode support, and several more new features.

来源:Can I Use

提高可读性的现代 CSS 技术

Advice and tips on how to improve website legibility using things such as variable fonts, contrast, spacing, etc.

来源:Edoardo Cavazza

网络字体生日快乐

It has been a decade since the then newly-formed WebFonts Working Group published a First Public Working Draft of the Web Open Font Format (WOFF).

来源:Vladimir Levantovsky

Firefox 79:共享内存的回归、新工具及平台更新

A run through of the highlights in version 79 of Firefox. Here’s the full developer-focused round-up of changes.

来源:Florian Scholz, Chris Mills, Harald Kirschner (Mozilla)

Edge 路线图及发布时间表

A new Microsoft Edge release schedule for both the Beta and Stable channel releases.

来源:Microsoft Edge Team

⚡️ Quick bits:

📙 文章、教程、观点

HTML:如何更加友好

How much do you know about HTML’s semantics? In this 20-minute talk one of the co-editors of the HTML5.3 spec will bring you up to speed, showing you how to use HTML to make sites that work better, are faster and include more people.

来源:Bruce Lawson

理解 CSS 的多背景

A detailed visual explainer of the background-image property, and how best to use it to stack multiple backgrounds.

来源:Ahmad Shadeed

针对新手的 Fetch API 教程

A fairly gentle intro to using Fetch, the replacement for Ajax-based XMLHttpRequest techniques, along with a little bit of coverage of Promises.

  1. fetch('https://dog.ceo/api/breeds/image/random')
  2. .then((response) => {
  3. return response.json();
  4. })
  5. .then((myContent) => {
  6. myImage.src = myContent['message'];
  7. });

来源:Louis Lazaris

Introspecting CSS via the CSS OM

Some interesting digging around by Lea. You’re unlikely to need to do this yourself but it shows how you can interrogate the browser for supported CSS properties and whether or not certain properties are shorthand forms of others. Clever stuff.

来源:Lea Verou

Webwaste

Just what is the environmental impact of bloated websites and unnecessary assets? Gerry McGovern examines in this extract from his book World Wide Waste.

来源:A List Apart

本地处理 JS 日期和时间

来源:Elijah Manor

Svelte 图片懒加载

来源:Donovan Hutchinson

🔧 代码、工具、资源

css-sweeper:纯 CSS 实现的扫雷游戏

Play it here. The CSS interestingly uses a combination of CSS variables (using a technique called ‘space toggle’) along with HTML checkboxes.

来源:PropJockey

Tailzilla:Tailwind CSS 的在线代码编辑器

This is a collection of responsive components, templates, and starter kits based on Tailwind CSS. Each component offers a split screen live preview and editable code.

来源:Tailzilla

Formbutton:简单可定制的弹窗表单

This adds one of those bottom-corner fly-out forms that users can use to quickly communicate or add feedback.

来源:Formspree

webcompat:浏览器兼容性问题上报平台

An initiative by various volunteers supported by Mozilla that aims to document bugs that create inconsistent experiences across browsers.

来源:webcompat

通过 SVG 和 CSS 阴影创建的水滴效果

A very impressive end result.

来源:Oscar Salazar codepen

💻 招聘

译者注:如需了解,请查看原文

🗓 未来大事记

译者注:如需了解,请查看原文

2021-01-18 喜欢

Copyright © 2015-2021 BY-NC-ND 4.0

回到顶部 ↑