See You Again

前端聚焦周刊:第 434 期

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

原文:Frontend Focus issue 434

翻译及校对:richshaw2015Yully Che

🚀 刊首

Chrome 表单控件和焦点的更新

Here’s a closer look at the recent changes introduced to HTML form controls within Chrome, designed to “beautiful, webby, and neutral”. They bring with them a host of accessibility wins, touch support, and more consistent keyboard access.

来源:Rob Dodson (Google)

Google 恢复因新冠病毒而暂停的更新

Chrome 81 will now be released on April 7. Here’s the official blog post from Google announcing that releases are now resuming.

来源:Catalin Cimpanu (ZDNet)

TOAST UI Editor 2.0:强大的所见即所得的 Markdown 编辑器

Two years in comes version 2.0, along with 10K GitHub stars to boot. v2.0 has a new Markdown parser, better syntax highlighting, improved scroll syncing and live previews, and more. GitHub repo.

来源:NHN

由于新冠病毒(和 Google),Mozilla 重新启用 TLS 1.0 和 1.1

TLS 1.0 and 1.1 has been re-enabled in the Firefox Stable and Beta browser because of Google and government sites that still rely on these protocols. Google has taken a similar, temporary, step due to the COVID-19 crisis, too.

来源:Martin Brinkmann (gHacks)

当设计趋势风向改变时你应该怎么办

This guide aims to help you figure out which approach makes the most sense when considering popular design trends for your site.

来源:Suzanne Scacca

如何提升页面加载速度

In this advanced guide Patrick Stox explains how page speed works, and what actions to take for your site.

来源:Ahrefs

📙 文章、教程、观点

切换到 Edge 的十个原因

Yep, this is a feature list trying to convince folks to give Edge a try. I didn’t know about a few of the things Edge now offers, including an interesting ‘vertical tabs’ mode.

来源:Liat Ben-Zur

Web 视频中的 playsinline 属性

Have you noticed how sometimes in mobile browsers a video will play right where it is instead of the fullscreen default? Here’s how that works.

  1. <video src="..." controls playsinline></video>

来源:Chris Coyier

Inclusive Inputs

An exploration into how to make inputs more accessible, touching upon semantic HTML and a bit of ARIA.

  1. <div class="form-group">
  2. <label for="password">
  3. Password
  4. <span class="required" aria-hidden="true">*</span>
  5. <span class="sr-only">required</span>
  6. </label>
  7. <input
  8. type="password"
  9. id="password"
  10. name="password"
  11. autocomplete="new-password"
  12. aria-invalid="true"
  13. aria-describedby="error_pw desc_pw"
  14. >
  15. <p class="aside" id="desc_pw">Your password needs to have at least eight characters.</p>
  16. <p class="error" id="error_pw">Please check your input.</p>
  17. </div>

来源:Oscar Braunert

Making a Responsive Twitch Embed

This works mainly as a refresher on how to do intrinsic aspect ratio sizing in CSS for any embedded media, but it’s specific to Twitch embeds.

来源:Phil Nash

HTML DOM: A Resource for Solving DOM Problems with Native APIs

A guide with a list of different things we might normally do with a JavaScript library, but can now be done using native APIs.

来源:Nguyen Huu Phuoc

Bootstrap 5 不再支持 IE 10 & 11:这对我们有什么影响

The upcoming version five of popular framework Bootstrap is officially dropping support for both Internet Explorer 10 and 11. Here’s a quick look at what that means for those relying on Bootstrap, and what workarounds (polyfills) to expect.

来源:Zoltán Szőgyényi

使用 CodeMirror 构建代码编辑器

CodeMirror is an open source project that makes it easy to build advanced text editors into your frontend apps. Here’s how to build a code editor with it and how to connect together all the pieces.

  1. CodeMirror(document.querySelector('#my-div'), {
  2. lineNumbers: true,
  3. tabSize: 2,
  4. value: 'console.log("Hello, World");'
  5. });

来源:Valeri Karpov

5 Reasons Why GraphCMS Could Be Your Next Backend for MVPs

An overview about why using a backend-as-a-service like GraphCMS is a viable way to go for MVPs.

来源:Stephen Jensen

Designing Web Applications for the Apple Watch using Toucaan CSS Framework

来源:Marvin Danig

为你的生产和开发站点适配不同的 Favicon

来源:Chris Coyier

Source Sans Pro

Drawing inspiration from American gothic typeface designs, this is Adobe’s first open-source typeface family (and is made up of 12 weights). Designed by Paul D. Hunt it was conceived primarily as a typeface for user interfaces boasting wide-ranging language support and a focus on clarity and legibility.

🔧 代码、工具、资源

MoreToggles.css

A pure CSS library with plenty of stylish toggles. Here’s the related GitHub page.

来源:Enkai Ji

Bootstrap Icons Alpha 3

Although still in alpha, this is a massive update that puts the icon library at over 500 icons and adds a permalink page for each.

来源:Mark Otto, Jacob Thornton, and Bootstrap contributors

Animockup:在浏览器中创建带动效的模型

An open-source design tool to make animated GIFs and videos to showcase your products. Try it here.

来源:Alyssa X

Snapfont:测试任意字体在任意网站上效果的 Chrome 插件

Based on a pay-what-you-want model, this allows you to test any of the ~900 fonts on Google Fonts or using any locally installed font.

来源:snapfont

💻 招聘

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

🗓 未来大事记

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

2020-06-30 喜欢

Copyright © 2015-2022 BY-NC-ND 4.0

回到顶部 ↑