明远周刊：css动画、svg动画实现线条 loading

精彩看点

css 动画、svg 动画实现线条 loading
前端与后端各自的难点
优化个人网站的图片流量
Google 翻译会影响网页
使用 cdn 开放 api 实现在控制台安装 npm 包
一个简单的浏览器插件实践
2 月 7 日，v3 将作为 vue 的默认版本
使用 vdom json 生成真实 dom

阅读文章

巧用 CSS 实现动态线条 Loading 动画

使用 3 种方式实现 Chrome tab 的圆圈 loading 效果

使用 css 圆角+animation +遮罩的原理实现
使用 svg 的 stroke-dasharray stroke-dashoffset 和 animation 实现
使用 CSS @property 实现

思考

conic-gradient 是围绕着中心顺时针的渐变，其他的还有 linear-gradient 线性渐变、radial-gradient辐射状渐变

【Web 动画】SVG 线条动画入门

web 动画一般分为三种：css3 动画、js 动画（canvas）、html 动画（svg），本文介绍 svg

以一个弯曲的进度条为例，引出stroke-dasharray stroke-dashoffset 属性和polyline 形状（画出两个相同的图形，使用动画加遮罩实现进度条效果），能用简洁的代码，实现比较复杂的线条动画，体现了 svg 动画的强大之处

思考

stroke-dasharray的值是数组，第一个值是线的长度，第二个值是空白的长度，第三个值是线的长度，第四个值是空白的长度，以此类推，如果值的个数不够，那么就会把前面的数组重复来一遍，通过animation改变stroke-dasharray的值，会有一个线条动画的效果

CSS @property，让不可能变可能

@property 允许开发者显示定义他们自己的 css 自定义属性，这些自定义属性通过transition可以实现渐变颜色的动画、线条位置的动画，但目前兼容性不是很好

前端比后端幸福多了！

一篇小漫画，以前端和后端相互交流的视角讲解了各自的难点

后端：需要学习编程语言、框架，Nginx、Redis、MySQL、Kafka，微服务、分布式、高并发、大流量，docker、k8s 等内容

前端：需要学习计算机网络（http https websocket）、较为简单的数据结构和算法（后端接口数据转换为前端界面展示数据）、计算机程序设计（作用域、闭包、对象、原型）、操作系统（node、进程与线程、函数调用栈、事件循环）、编译原理（v8、抽象语法树、字节码、虚拟机、less babel 等编译）、图形学（可视化图像）

如果只呆在高层的抽象上编程也能过得挺滋润，但抽象只能节省你的编程时间，不能节省你的学习时间

思考

前后端都有自己的难点，大多数人还是想互相了解的，我觉得前后端都挺难的，如果做不到十分了解，那么就不要妄下定论

为什么要去学计算机基础，因为想看到一些本质的东西，很多东西是相似的，只不过是换了个名词而已（举个 🌰：文件系统中的硬链接其实和 JS 中的引用是类似的，都是为了节省存储空间），你如果不知道本质，那么就要学习不同的名词，并且不能建立起知识之间的联系，也容易忘记，但你知道了本质，就能举一反三。计算机基础 yyds，希望大家都能成为计算机科学家 🤓

阮一峰老师本周的周刊，开头也是讨论前后端的，好巧，引用一句：

前端和后端的差异，不在于难度，或者说各有各的难，而是所要解决的问题不一样。
前端的特征是混乱、嘈杂、易变，因为这些都是最终用户的特征，前端需要匹配用户。如果你不适应混乱、嘈杂、易变的开发，你就很难适应前端。
后端面对的是硬件、算法和数据结构，所以比较稳定。但是会涉及到计算机科学、语言设计、编译原理等高深的内容，想要搞懂这些东西，绝非易事。

省钱 90%！我是这样优化网站图片的

写文章不可避免的会有图片，那么就会遇到图片存哪里的问题，作者使用腾讯云的文件服务上传图片，但近期流量费用增加，本文讲述了如何降低流量省钱

使用 referrer 拒绝其他域名的请求
使用 tinify.cn 的开发者账号压缩图片，支持 500 张
转换为 webp 格式
gzip 压缩（几乎没有收益，因为图片已经是压缩的格式了）

gif 不好压缩，暂时不改，开启 cdn 能使图片访问速度快 10 倍

思考

我用的是 uPic+gitee，uPic 开启 80%压缩，gitee 在国内速度也不错，再加上 typora 可以配合 uPic 自动上传图片，但 gitee 的图片应该还得做个备份，预防 gitee 不能访问的状况，计划备份在 githb 上，使用 action 来做

你真的认为 Google 翻译不影响"前端"页面功能吗?

通过 textarea 计数功能不可用的 bug 引出 Google 翻译会影响网页的功能

会影响元素的 dom 结构
导致 vue 和 react 的双向绑定失效

但伪元素的内容不会被翻译，也不受翻译影响

大道至简，繁在人心：在浏览器控制台安装 npm 包是什么操作？

浏览器可以通过添加 script 标签来引入额外的 js，那么 npm 包的 js 文件去哪里找呢？cdnjs 和 unpkg 提供了线上静态的 js 文件，只要引用他们的 js 即可

思考

文中使用了 referrer 头来解决直接请求 cdnjs 跨域的问题

7 分钟学会写一个浏览器插件——突破某 SDN 未登录禁止复制的限制

应用：类似于现在的 pwa

扩展：我们经常下载使用的

插件：类似 flash pdf 等，能提供操作系统的一些功能，因为安全问题，已经废弃或内置了

但现在扩展一般都叫插件了，简明扼要的说了写插件的重点：要有manifest.json，用来描述图标，popup 的资源、页面加载的资源，使用到了一些 api：chrome.tabs.query chrome.tabs.sendMessage chrome.runtime.onMessage.addListener

思考

可以自己写点提升工作效率的插件