# 第 4 期 - 东海音乐节
> 摄于去年东海音乐节，在海边听着摇滚吹着风挥着手，感觉超爽，喜欢音乐的潮流前端可以开拓一个追音乐节的习惯
- Issue: 4
- 发布日期: 2020/12/15
- HTML: https://weekly.tw93.fun/posts/4
- JSON: https://weekly.tw93.fun/api/posts/4.json
- English translation: https://weekly.tw93.fun/en/posts/4.md
---
摄于去年东海音乐节，在海边听着摇滚吹着风挥着手，感觉超爽，喜欢音乐的潮流前端可以开拓一个追音乐节的习惯
> **记录每周看到的前端潮流技术，筛选后发布于此，关注让你更潮流~**
## 好文和学习
- **[使用 CSS 对图片遮罩](https://web.dev/css-masking/)**：本文介绍了 CSS 的实验特性[`mask-image`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image)的使用，包括了如何实现图片遮罩、SVG 屏蔽、渐变遮罩的效果，还有一篇张鑫旭的[旧文](https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/)也可一读
- **[一种新的图片格式 AVIF](https://jakearchibald.com/2020/avif-has-landed/)**：派生自[AV1 视频](https://www.cnblogs.com/qcloud1001/p/13209695.html)的关键帧，目前 chrome85 已经支持，Android 很快会被支持，对于可接受质量的图片，有个例子对比 WebP(43k)大小是 JPEG(74k)的一半，而 AVIF(18K)大小居然不到 WebP 的一半，文章从多个方面进行介绍，值得一读
- **[双屏和折叠屏一些 Web API 介绍](https://blogs.windows.com/msedgedev/2020/09/14/introducing-dual-screen-foldable-web-apis/)**：微软 Edge 团队写的，介绍了两个 Chromium 实验特性，一个 CSS 媒体查询 screen-spanning 和一组环境变量来描述折叠屏的几何关系，一个 JS getWindowSegments 窗口枚举 API 用于检测非 DOM 场景
- **[论某德阳神秘乱码](https://zhuanlan.zhihu.com/p/258567705)**：知乎专栏里面一篇很有趣的文章，德阳市发布的《致德阳市民的一封信》全部是整齐“乱码”文，很神奇的操作最后给转回去了，也可借此了解一下 [中文编码](https://zhuanlan.zhihu.com/p/46216008)
- **[在 Canvas 里模拟物体碰撞](https://www.kffhi.com/blog/2020/08/22/Simulating-Object-Collisions-with-Canvas/)**： 从 0 到 1 学习 Canvas 能力，原文[可见](https://joshbradley.me/object-collisions-with-canvas/)，文章是讲如何在 canvas 里模拟物体碰撞，超级易上手带你一步一步来实现一群粒子碰撞的效果
- **[机器学习基石课程笔记](https://juejin.im/post/6859697422605598734)**：本系列是台湾大学资讯工程系林軒田（Hsuan-Tien Lin）教授开设的《机器学习基石》课程的梳理，从机器[什么时候](https://juejin.im/post/6859697422605598734)、[为什么](https://juejin.im/post/6861235413085454349)、[怎么学习](https://juejin.im/post/6874914360964317198)、[怎么学习更好](https://juejin.im/post/6874908302514323469)4 个部分来讲述
- **[中国大周期及其货币](https://finance.sina.com.cn/china/gncj/2020-09-21/doc-iivhvpwy8038347.shtml)**：桥水基金创始人达利欧的一篇最新长文，剖析了中国的历史更替脉络，以及中国人的思维方式、运作方式，并着重分析了从 1949 年到现在的中国崛起之路，可深入一读
## 开源和工具
- **[Github @vue/lit](https://github.com/yyx990803/vue-lit)**：借助[lit-html](https://lit-html.polymer-project.org/)和[@vue/reactivity](https://github.com/vuejs/vue-next/tree/master/packages/reactivity)的自定义元素，用 vue 的语法直接写 Web Component 的工具，解释文可见[尤大 3 天前发在 GitHub 上的 vue-lit 是啥？](https://juejin.im/post/6874383765070675976)
- **[Github Brahmos](https://github.com/brahmosjs/brahmos)**：一个使用 React API 和原生模版来来写视图的 UI 库，使用 JSX 但是没有 VDOM，可以和尤大的[vue-lit](https://github.com/yyx990803/vue-lit)来对比一下，更多类似可见[Superfine](https://github.com/jorgebucaran/superfine)、[Hyperapp](https://github.com/jorgebucaran/hyperapp)
- **[instant.page 实时预加载](https://instant.page/)**：一行代码提速你的网站转化，在用户单击页面之前预加载页面，一般人鼠标放到要点击的链接上，从真正点击下去有预计 100ms 的瞬间延迟，利用此时间差去预加载，有兴趣同学可以借助此思路在业务中二次创新一下
- **[ARWES 科幻朋克 UI 框架](https://arwes.dev/)**：18 年的一个面向 Web 应用的未来科幻和网络朋克图形用户界面框架，连文档都是用 ARWES 自举的，动效和音效很有感觉
- **[Github GrapesJS](https://github.com/artf/grapesjs)**：一个开源的 NoCode Web Builder 的搭建页面的框架，可见[Web 页面 Demo](https://grapesjs.com/demo.html)和[专题稿 Demo](https://grapesjs.com/demo-newsletter-editor.html)
- **[Github Repluggable ](https://github.com/wix/repluggable)**：Repluggable 是一个为前端应用实现控制反转的库，可让复杂项目的开发变得更加容易。同时还在 React+Redux 应用中实现了微前端，并计划在未来使其独立于框架
- **[filters.css - 滤镜样式库](https://bansal.io/filters-css#blur)**：可以实现超多中颜色滤镜的纯 CSS 样式库，对于图像招聘处理的同学很合适
- **[Vime 播放器](https://vimejs.com/)**：一个可定制的、可扩展的、可访问的、与框架无关的播放器，看功能效果很不错
- **[10 月 1 日之后，你新建的 GitHub 库默认分支不叫「master」了](https://www.jiqizhixin.com/articles/2020-09-21-10)**：这个决定并不是最近才做出的，6 月份国外「Black Lives Matter」抗议活动持续发酵，多个开源项目采取行动替换冒犯性的术语的一个结果
## iOS 和多端
- **[一位 iOS 开发者的进阶之旅](https://mp.weixin.qq.com/s/cKuVFRPUnnScLM3y26mgIQ)**：原文大部分内容来自[V2EX-iOS 开发有什么国人写的比较好的书籍推荐？](https://www.v2ex.com/t/701970)，看完这个很有触动，对于想学习 iOS 的前端同学可以参考
- **[Podfile 的解析逻辑](https://mp.weixin.qq.com/s/f9YcS9eYS_RShLsTXS-SvA)**：iOS 开发里面的 Podfile 文件可以类比前端开发的 package.json，文章先从 Xcode 工程结构讲到 CocoaPods-Core，最后到精细化的 Podfile 配置，一篇文章带你了解 CocoaPods 的全部
- **[Flutter 包大小治理上的探索与实践](https://mp.weixin.qq.com/s/adC-YUWd-xuUlzeAPHzJoQ)**：美团前端团队对 Flutter 的包大小问题进行了调研和实践，设计并实现了一套基于动态下发的包大小优化方案，本文深入介绍，对于弄 Flutter 可以一读
## 设计和灵感
- **[CodePen 100 divs - Dragon](https://codepen.io/cassie-codes/pen/GRZdoYX)**：一个用 100 个 div 加上 svg 实现的跟随鼠标移动的动，实现效果值得研究一番
- **[Figma Config 又给我们带来了什么新特性？](https://mp.weixin.qq.com/s/-xcDU5Q0c0-AMj8NNcCgZQ)**：[Figma](https://www.figma.com/)传说是设计师中的 Github，今年大会主题是《让设计和代码连接更紧密》，此文为一些新特性预告讲解