【每周精选】第2期

306 阅读2分钟
  1. 改变世界的一次代码提交-Git 第一次提交的源代码分析及带来的启示 --- 糊涂说
  • 简单介绍了 git 诞生的背景/设计/实现,没太看懂,先收藏
  1. 图片加载失败后CSS样式处理最佳实践 — 张鑫旭
  • 张鑫旭总有一些简单巧妙的tips。展示失败图片占位&显示alt
  1. 如何通过 new Function 创建异步函数 —  David Walsh 
// Shim for allowing async function creation via new Function
const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;

// Usage
const fetchPage = new AsyncFunction("url", "return await fetch(url);");
fetchPage("/").then(response => { ... });
  • 虽然应该不会这么做 BUT 了解一下还有这种做法也是ok的
  1. Gaining security and privacy by partitioning the cache — Google Developers
  • 现有缓存策略:跨站请求同一资源可以使用缓存,这会带来一些安全和隐私问题:可通过检测网站响应请求的时间表明浏览器曾经是否访问过相同的资源,导致可以检测用户是否访问过特定网站,跨站点搜索攻击,跨站点跟踪等。
  • 因此,从 Chrome 86 开始,会对缓存进行分区:
    • 缓存的键:资源URL + Network Isolation Key(Top-Level site + frame site)
  • 可能导致一些流行的脚本在不同网站间无法缓存
  1. Intl.RelativeTimeFormat相对时间格式化 — DeathGhost
const rtf = new Intl.RelativeTimeFormat('zh-Hans');
// output :: 2秒钟后
console.log(rtf.format(2, 'second'));
// output :: 15分钟前
console.log(rtf.format(-15, 'minute'));
// output :: 8小时后
console.log(rtf.format(8, 'hour'));
// output :: 2天前
console.log(rtf.format(-2, 'day'));
// output :: 2周后
console.log(rtf.format(2, 'week'));
// output :: 5个月前
console.log(rtf.format(-5, 'month'));
// output :: 2个季度后
console.log(rtf.format(2, 'quarter'));
// output :: 10年前
console.log(rtf.format(-10, 'year'));
  1. 【第2059期】唤起 App 在转转的实践 -- 大转转FE
  • 唤端的常用手段:URL Schema + 定时器根据隐藏与否判断是否安装app->下载页
  • URL Schema 在iOS 上的问题以及 Universal Link:注册方法
  • 微信唤端的 API: launchApplication,getInstallState,wx-open-launch-app
  1. JS纯前端实现audio音频剪裁剪切复制播放与上传 — 张鑫旭
    • File -> ArrayBuffer -> AudioBuffer -> 复制剪切 -> 播放 -> 格式转换
  2. Chrome 86 新功能解读 — 前端大全
  • 文件系统访问API:showOpenFilePicker()/showSaveFilePicker()
  • 人机接口设备访问 API
  • 多屏幕 API
  1. 只有1个CSS属性的响应式网站🥳 — Dip Vachhani
  • clamp(minimus, preferred, maximum);