共计 2516 个字符,预计需要花费 7 分钟才能阅读完成。
前端爱好者周刊 (Github: shfshanyue/weekly),每周记录对于前端的开源工具、优良文章、重大库版本公布记录等等。每周一公布,订阅平台如下,欢送订阅。
- 订阅网站: https://weekly.shanyue.tech
- 订阅 Github: shfshanyue/weekly
封面
贵州盘州发现 2.44 亿年前一种大型肉食性基干新鳍鱼类的化石,命名为盘州暴鱼
一句话
- 在 VSCode 中,通过快捷键 <Ctrl + K + Z> 可疾速进入禅模式 (View: Toggle Zen Mode)
- 贵州盘州发现 2.44 亿年前一种大型肉食性基干新鳍鱼类的化石,命名为盘州暴鱼
- 截至 2021 年 3 月末,我国外汇储备规模为 31700 亿美元,较 2 月末降落 350 亿美元,降幅为 1.09%
开发利器
一、Emmet: Web 开发者的利器
高效的前端开发利器,可在 Vue/React 中疾速书写批改 HTML/CSS,并反对多种编辑器,如风行的 VSCode。
它最大的性能就是把 CSS 款式的缩写
转化为 HTML,如输出 #page>(#header>ul#nav>li*4>a)+(#content>h1{Hello world}+p)+#footer
,并按下 Tab 键,主动生成以下 HTML
<div id="page"> | |
<div id="header"> | |
<ul id="nav"> | |
<li><a href=""></a></li> | |
<li><a href=""></a></li> | |
<li><a href=""></a></li> | |
<li><a href=""></a></li> | |
</ul> | |
</div> | |
<div id="content"> | |
<h1>Hello world</h1> | |
<p></p> | |
</div> | |
<div id="footer"></div> | |
</div> |
以上扩大缩写的性能被称为 Expand Abbreviation
。除此之外,它还有更多粗疏的性能,这些性能在 Emmet 中被称为 Action
- 去除最外层标签
- 包裹选中的标签
- …
- repo: emmetio/emmet
- npm: emmet
二、Web Developer 浏览器插件
一款服务于 Web 开发者的浏览器插件,能够针对该网站做更深刻的操作,如
- 禁止 Javascript
- 禁止 CSS
- 显示页面所有图片
- …
文章举荐
一、纯 Javascript 代码片段大全
这篇文章总结了几个收集对于 vanilla javascript 代码片段的网站,十分好用,蕴含以下几个网站
- 30 Seconds Of Code
- How to manage HTML DOM with vanilla JavaScript only?
- Cheat sheet for moving from jQuery to vanilla JavaScript
- microjs
- Single line of code
二、Dark mode in 5 minutes, with inverted lightness variables
本文应用 HSL 函数与 CSS 变量主动生成网站暗黑模式
:root {--primary-hs: 250 30%;} | |
h1 {color: hsl(var(--primary-hs) 30%); | |
} | |
article {background: hsl(var(--primary-hs) 90%); | |
} | |
article h2 {background: hsl(var(--primary-hs) 40%); | |
color: white; | |
} | |
@media (prefers-color-scheme: dark) { | |
:root {--primary-hs: 320 30%;} | |
} |
HSL 函数如同 RGB 函数一样,可作为 color
的属性值,他承受三个参数:色相 (Hue)、饱和度(Saturation) 和亮度(Lightness)
- H (hue) 色相,单位是角度,其中 red=0deg(=360deg), green=120deg, blue=240deg
- S (Saturation) 饱和度,单位是百分比,为 0 时代表全灰
- L (Lightness) 亮度,单位是百分比,100% 是红色,0% 是彩色
代码片段
一、应用可选链操作符代替 lodash.get
const object = {a: [{ b: { c: 3} }] } | |
const result = object?.a?.[0]?.b?.c ?? 1 | |
console.log(result) | |
//=> 3 |
开源与库
一、charts.css
数据可视化个别用 Canvas 实现,或者应用 SVG 实现,它居然还能应用 CSS 实现,听起来是不有点意思?
charts.css 通过 CSS 来进行数据可视化,在 charts.css 中画图,个别通过 table、css variables 与 class 管制图表
<table class="charts-css column" id="my-chart"> | |
... | |
</table> |
- repo: ChartsCSS/charts.css
- npm: charts.css
版本公布
一、Tailwind CSS v2.1
Tailwind CSS v2.1 在四月六日公布,咱们来看看它更新了哪些地方
JIT engine in core
在 Tailwind CSS 的生产模式中能够通过 purgecss 去除无用的 CSS 代码,然而在开发环境下仍然有很大的代码体积,造成极高工夫与极差的开发体验。在接下来的 2.1 版本能够启用 mode: jit
个性在开发者环境中开启。
// tailwind.config.js | |
module.exports = { | |
+ mode: 'jit', | |
purge: [// ...], | |
theme: {// ...} | |
// ... | |
} |
同时反对一些更灵便的写法
<!-- Colors --> | |
<button class="bg-[#1da1f1]">Share on Twitter</button> | |
<p class="font-bold !font-medium"> | |
This will be medium even though bold comes later in the CSS. | |
</p> | |
<input class="disabled:opacity-75"> |
另外也有一些其余个性的更新
- Composable CSS filters API
- New blending mode utilities
- New isolation utilities