See You Again

前端聚焦周刊:第 433 期

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

原文:Frontend Focus issue 433

翻译及校对:richshaw2015Yully Che

🚀 刊首

A Practical Overview of CSS Houdini

A detailed look at each part of Houdini, a group of APIs that give developers direct access to the CSS Object Model, including current browser support (quickly improving) and how its features can be used today using progressive enhancement.

来源:Adrian Bece

Safari Now Blocking Third-Party Cookies By Default, Plus Expires Local Storage After 7 Days..

Safari’s Intelligent Tracking Prevention (ITP) has been in beta for a few months, and is now live in both the iOS and macOS builds. It introduces significant privacy changes, including cross-site cookies now being blocked by default. There is also a ‘7 day cap on all script-writeable storage’ (including Indexed DB, localStorage and sessionStorage) which Aral Balkan suggests “effectively kills offline web apps”.

来源:John Wilander (WebKit)

Embracing Modern Image Formats: Leveraging WebP in HTML and React

A thorough look at how using next-gen image formats along with the <picture> element can reduce image sizes dramatically.

来源:Josh W Comeau

The Complete AEA DC 2019 Now Online

Usually videos from ‘An Event Apart’ sessions get released gradually, but due to current circumstances they’ve opted to release them all in one go. There’s some good stuff here including excellent talks from Jen Simmons, Sara Soueidan, Aaron Gustafson and others.

来源:An Event Apart

Chrome Releases Paused: There’ll Be No Final Chrome 82

The stable release of Chrome 81 was due to arrive last week, but this version remains in beta for the forseeable future as things are now on hiatus due to the current global crisis. Canary releases will continue shipping as planned.

来源:Chrome Developers on Twitter

📙 文章、教程、观点

Flexbox and Absolute Positioning

Looks at what happens when you absolutely position a flex item and talks about a related bug in Firefox’s developer tools.

来源:Chen Hui Jing

How Do You Make Video Accessible?

Lots of good reminders here on video accessibility, covering captions, subtitles, audio descriptions, transcripts, and more.

来源:Suzanne Scacca

CSS Can Influence Screenreaders

Runs through a few examples of how your CSS can significantly change what some screen readers announce.

来源:Ben Myers

Maintaining Performance

Dave discusses how shaving 33s off page load time (by fixing how fonts are loaded) helped him recognize some larger lessons about performance over the long haul.

来源:Dave Rupert

Customize Media Notifications and Playback Controls with The Media Session API

A look at how to customize media notifications and respond to media related events, such as seeking or track changing with the Media Session API.

来源:François Beaufort

How to Create an Extruded Hover Effect with Box Shadows

Now this may have some performance implications, but the end result is a neat effect. The article refers to the effect as an “accordion”, but not in the UI sense.

来源:Sarah L. Fossheim

How to Use the URL API with Vanilla JavaScript

A simple look at a lesser-known Web API, which lets you grab various bits including the hash, hostname, pathname, protocol, etc.

来源:Chris Ferdinandi

Playing With Particles Using the Web Animations API

来源:Louis Hoebregts

How to use the currentColor value in CSS

来源:JS Craft

Indicating Scroll Position on a Page With CSS

来源:Preethi Sam

🔧 代码、工具、资源

tabler-icons: A Set of Over 300 Free High-Quality SVG Icons

Here’s a nice collection of practical icons. MIT-licensed.


Buttono: A Flexible Sass Mixin for Creating BEM-Style Buttons

Buttons have a consistent look across modern browers and include focus styles for accessibility.

来源:Hasan Aydoğdu

CSS2JS: Convert CSS to a JavaScript Object

Got CSS and need it in JavaScript object format for JSX or some CSS-in-JS library? This may help.


Uppload: A ‘Better’ JavaScript Image Uploader

Open source, highly customizable with 30+ plugins and can be used with any file uploading backend.

来源:El Niño

来源:Web Font of the Week

Ostrich Sans

来源:Although not new, this remains a popular typeface. Ostrich Sans is a modern sans-serif font featuring long stems (or necks if you will). It’s available in a variety of styles and weights — I particularly like the Black and Heavy variants. Here’s the related GitHub repo.

💻 招聘


🗓 未来大事记


2020-06-30 喜欢

Copyright © 2015-2021 BY-NC-ND 4.0

回到顶部 ↑