第04期 - 东海音乐节

X

摄于去年东海音乐节，在海边听着摇滚吹着风挥着手，感觉超爽，喜欢音乐的潮流前端可以开拓一个追音乐节的习惯

记录每周看到的前端潮流技术，筛选后发布于此，关注让你更潮流~

好文和学习

• 使用 CSS 对图片遮罩：本文介绍了 CSS 的实验特性mask-image的使用，包括了如何实现图片遮罩、SVG 屏蔽、渐变遮罩的效果，还有一篇张鑫旭的旧文也可一读

• 一种新的图片格式 AVIF：派生自AV1 视频的关键帧，目前 chrome85 已经支持，Android 很快会被支持，对于可接受质量的图片，有个例子对比 WebP(43k)大小是 JPEG(74k)的一半，而 AVIF(18K)大小居然不到 WebP 的一半，文章从多个方面进行介绍，值得一读

• 双屏和折叠屏一些 Web API 介绍：微软 Edge 团队写的，介绍了两个 Chromium 实验特性，一个 CSS 媒体查询 screen-spanning 和一组环境变量来描述折叠屏的几何关系，一个 JS getWindowSegments 窗口枚举 API 用于检测非 DOM 场景

• 论某德阳神秘乱码：知乎专栏里面一篇很有趣的文章，德阳市发布的《致德阳市民的一封信》全部是整齐“乱码”文，很神奇的操作最后给转回去了，也可借此了解一下 中文编码

• 在 Canvas 里模拟物体碰撞： 从 0 到 1 学习 Canvas 能力，原文可见，文章是讲如何在 canvas 里模拟物体碰撞，超级易上手带你一步一步来实现一群粒子碰撞的效果

• 机器学习基石课程笔记：本系列是台湾大学资讯工程系林軒田（Hsuan-Tien Lin）教授开设的《机器学习基石》课程的梳理，从机器什么时候、为什么、怎么学习、怎么学习更好4 个部分来讲述

• 中国大周期及其货币：桥水基金创始人达利欧的一篇最新长文，剖析了中国的历史更替脉络，以及中国人的思维方式、运作方式，并着重分析了从 1949 年到现在的中国崛起之路，可深入一读

开源和工具

• Github @vue/lit：借助lit-html和@vue/reactivity的自定义元素，用 vue 的语法直接写 Web Component 的工具，解释文可见尤大 3 天前发在 GitHub 上的 vue-lit 是啥？

• Github Brahmos：一个使用 React API 和原生模版来来写视图的 UI 库，使用 JSX 但是没有 VDOM，可以和尤大的vue-lit来对比一下，更多类似可见Superfine、Hyperapp

• instant.page 实时预加载：一行代码提速你的网站转化，在用户单击页面之前预加载页面，一般人鼠标放到要点击的链接上，从真正点击下去有预计 100ms 的瞬间延迟，利用此时间差去预加载，有兴趣同学可以借助此思路在业务中二次创新一下

• ARWES 科幻朋克 UI 框架：18 年的一个面向 Web 应用的未来科幻和网络朋克图形用户界面框架，连文档都是用 ARWES 自举的，动效和音效很有感觉

• Github GrapesJS：一个开源的 NoCode Web Builder 的搭建页面的框架，可见Web 页面 Demo和专题稿 Demo

• Github Repluggable ：Repluggable 是一个为前端应用实现控制反转的库，可让复杂项目的开发变得更加容易。同时还在 React+Redux 应用中实现了微前端，并计划在未来使其独立于框架

• filters.css - 滤镜样式库：可以实现超多中颜色滤镜的纯 CSS 样式库，对于图像招聘处理的同学很合适

• Vime 播放器：一个可定制的、可扩展的、可访问的、与框架无关的播放器，看功能效果很不错

• 10 月 1 日之后，你新建的 GitHub 库默认分支不叫「master」了：这个决定并不是最近才做出的，6 月份国外「Black Lives Matter」抗议活动持续发酵，多个开源项目采取行动替换冒犯性的术语的一个结果

iOS 和多端

• 一位 iOS 开发者的进阶之旅：原文大部分内容来自V2EX-iOS 开发有什么国人写的比较好的书籍推荐？，看完这个很有触动，对于想学习 iOS 的前端同学可以参考

• Podfile 的解析逻辑：iOS 开发里面的 Podfile 文件可以类比前端开发的 package.json，文章先从 Xcode 工程结构讲到 CocoaPods-Core，最后到精细化的 Podfile 配置，一篇文章带你了解 CocoaPods 的全部

• Flutter 包大小治理上的探索与实践：美团前端团队对 Flutter 的包大小问题进行了调研和实践，设计并实现了一套基于动态下发的包大小优化方案，本文深入介绍，对于弄 Flutter 可以一读

设计和灵感

• CodePen 100 divs - Dragon：一个用 100 个 div 加上 svg 实现的跟随鼠标移动的动，实现效果值得研究一番

• Figma Config 又给我们带来了什么新特性？：Figma传说是设计师中的 Github，今年大会主题是《让设计和代码连接更紧密》，此文为一些新特性预告讲解

---