这里是 Frontend Focus 的中文翻译项目,每周在 己思 平台首发。
翻译及校对:richshaw2015,Yully Che
A long-requested but still underused feature. Here’s a solid look at the “revolutionary possibilities for collaboration and code reuse” that CSS custom properties for cascading variables offer.
来源:Lea Verou
The Web Platform Contribution Guide is an online resource for anyone who wants to participate in the development of Web standards present and future. If the idea of Web standards boggles your mind at all, this is a very accessible guide.
来源:Bocoup
Yep, Microsoft’s Chromium-based Edge launched back in January, but users had to specifically download it. It will now be automatically installed.
:format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/66889047/acastro_200207_3900_Edge_0001.0.0.jpg)
来源:Tom Warren
Billed as the ‘successor to intercooler.js’, htmx lets you add dynamic Ajax-y elements, Server Sent Events (SSE), WebSockets and more to a site using just HTML attributes.
<!-- Load from unpkg -->
<script src="https://unpkg.com/htmx.org@0.0.6"></script>
<!-- have a button POST a click via AJAX -->
<button hx-post="/clicked" hx-swap="outerHTML">
Click Me
</button>
来源:Big Sky Software
Firefox 77 已经发布。 Here’s what developers need to know.
Netlify’s Build Plugins are officially coming out of beta with some new resources for getting started.
从明年开始 Google 的搜索结果将考虑“页面体验”。
Here are the release notes for the latest version (107) of Safari Technology Preview.
Brave 浏览器现在拥有1500万月活。
A look at how to use CSS variables to create more manageable project styles and more portable patterns.
来源:Sara Soueidan
aspect-ratio
It’s not directly supported in any browsers yet but its arrival is described as ‘impending’. Stuff like aspect-ratio: 16 / 9
certainly seems nice, though, so we’re keeping our fingers crossed..
来源:CSS Tricks
A step by step guide to creating a hamburger menu animation with SVG and CSS.
来源:Mikael Ainalem
Definitely not for the faint of heart. This is a pretty deep dive into containing blocks, rendering, and scroll performance.
来源:Chen Hui Jing
Thoughts on the shifting responsibilities of frontend developers, a place which puts us “between the thing we’re building and the people we’re building it for”.
来源:Chris Coyier
If you’ve ever wanted to add a pause between each iteration of your CSS @keyframes
animation, it’s.. not easy. Here’s an interesting technique to create such an effect, though.
来源:Eric Johnson
A clever (sneaky?) use of :before
makes it all work.
来源:Jonathan Snook
Web Designer and Developer Advocate Jen Simmons joins Dave Rupert and Chris Coyier to talk about her new HTML Essentials course, CSS Aspect Ratio, and rendering engines vs browsers.
来源:ShopTalk Show podcast
A closer look at the component-based library.
来源:Anthony Le Goas
Uses Rough.js for the handdrawn look. Lots of nice interactive examples on the page showing the diversity of annotation types.
来源:Preet Shihn
Feels a bit like satire, but seems to be a real framework that wants to promote simplicity, speed, and accessibility in web pages. Backstory here.
来源:Jonathan Crockett
Runs entirely in the browser with no backend or plugins required. Impressive. Source here.
来源:Pantelis Kalogiros
This online tool lets you play around with cubic-bezier()
values to create custom easings that you can drop into transitions and animations.
来源:Paul Macgregor
An interesting use for WebAssembly here. Originally built for J P Morgan, Perspective is for building real-time high performance interactive visualizations, powered by a C++ engine compiled to WASM under the hood.
来源:The Fintech Open Source Foundation
A quick way to improve the readability of keyboard shortcuts when you’re mentioning them in text. I love simple little solutions like this.
来源:Terence Eden
译者注:如需了解,请查看原文。
译者注:如需了解,请查看原文。
Copyright © 2015-2022 BY-NC-ND 4.0