“前端微周刊”每周五更新,为你带来不一样的前端周刊新体验
微信搜索订阅“前端微志”公众号
🖼 趣图
📰 资讯
Vite在npm的周下载量破十万,GitHub stars破2.5万
最新消息,Vite
目前达到一个里程碑的阶段。
- npm周下载量达10万
- GitHub star数破2.5万
- 249位代码贡献者
- Discord上成员数超过2500
Stack Overflow发现四分之一访客喜欢ctrl+c
今年愚人节的时候,Stack Overflow
给大家开了一个玩笑:对用户复制代码的次数进行收费(不知道的朋友,可以查看前端微周刊的第7期内容)。
其实,Stack Overflow
在页面上偷偷“动了手脚”,监听用户在页面上按下ctrl + c
的操作,并对3月26日到4月9日的用户数据进行了分析,发现了一些比较有趣的事情:
- 7,305,042个文章和评论中,产生了40,623,987次复制操作
- 每从问题中复制10次,就有在评论中的35次复制
- 未被采纳的答案的复制次数,大于被采纳答案的复制次数
- 大概80%的复制来自于未登录用户或0积分用户
- 复制次数做多的tag是
html/css
,其次是javascript
- 被复制做多的带代码块的回答是How to iterate over rows in a DataFrame in Pandas
- 被复制最多的文本回答是TypeError: this.getOptions is not a function [closed]
- 被复制最多的带代码块的问题是How to create an HTML button that acts like a link?
- 被复制最多的文本问题是Updates were rejected because the tip of your current branch is behind its remote counterpart
Vue Devtools v6 beta8发布
Vue Devtools
发布v6
的第八个beta版本,为Firefox
浏览器端带来了新的特性和变更。
- 支持
Vue 2
,同时支持vue-router
和vuex
- 插件权限能力,可以在插件详情页内配置不同权限是否启用
- 在页面刷新时,元素检查时的选中状态会被保留
- 在检查器中,可以选中“Copy path”来复制属性的path
- 可以编辑计算属性的setter
- ……
主流浏览器已支持flexbox属性:gap
随着Apple的Safari在macOS和iOS的最新版本中支持flexbox
的gap
属性,目前所有主流浏览器都已支持这一特性。
CSS
中的属性gap
适用于flexbox
布局的元素,可以使得各flex item
间存在一个间距(效果类似margin
),与margin
不同的是,gap
的间距只存在于flex item
之间,不一定每个方向都有。如下示例代码:
<div class="flex-gap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<style>
.flex-gap {
display: inline-flex;
flex-wrap: wrap;
gap: 12px;
}
</style>
上面示例代码的展示效果如下图:
📖 文章
Why We Switched From Webpack To Vite
Replit
团队发现由React
和Webpack
构建的项目已经变得越来越复杂和低效,开发环境的构建也越来越慢。在过去几周中,他们慢慢切换到Vite
做开发环境的构建,体验到了什么是快。
A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors
CSS
工作组编辑针对Selector Level 4
的草案中包含了一些伪类选择器,已经在大部分现代浏览器中支持,文中详细介绍了这些伪类选择器的使用规则及其效果。
:any-link
:focus-visible
:focus-within
:is()
:where()
- 增强的
:not()
:has()
- Level 3中的
:empty
Incomplete List of Mistakes in the Design of CSS
文中列出了CSS
设计中的错误内容,这还只是不完全清单,如:
white-space: nowrap
应该是white-space: no-wrap
vertical-align: middle
应该是text-middle
或x-middle
,因为不是真正的middleBox-sizing
应该默认border-box
border-radius
应该叫corner-radius
- ……
文中有很多,细细读一下,觉得甚有道理,值得一看。
The Making (and Potential Benefits) of a CSS Font
这是一种不使用字体来渲染文字的方式,而是使用CSS
字体来渲染文字内容。
作者别出心裁,使用SVG
绘制字母,然后将这些字母组合成文字,作为不使用字体文件渲染文字的方法。
整体来说,是个不错的探索,文中也给出了字体文件和CSS字体的优劣对比,感兴趣的话,可以详细读一下原文。
🛠 工具、插件
Mighty:云浏览器
大家听说过“云游戏”吧?云游戏的运行原理是在云端有一个机器去运行游戏,并通过视频流的方式将页面返回给用户持有的设备(可以是电脑、平板和手机),这样用户的本地设备就不需要做游戏的大量计算工作,就像看视频一样去玩游戏,也保证了不同端上的游戏体验一致。当然,云游戏对网络的要求会比较高。
Mighty
的这个“云浏览器”的理念,跟“云游戏”有点类似,也是通过数据流的方式,将云端运行的浏览器页面内容返回给用户手持设备,这样可以保证用户访问多个Tab时,本地设备不会出现内存吃紧、风扇狂飙的问题。毕竟,现在很多基于React/Vue/Angular的大型前端应用越来越大,对浏览器内存的占用越来越高,总会出现撑不住的那一天。与“云游戏”类似,它对网络速度也是有要求的,不然你的文字输入和鼠标移动就会出现明显的卡顿现象。
Mighty
目前处于内测阶段,可以填写问卷获取内测的资格,后期应该会以付费订阅的方式来维持运营。想要尝鲜的朋友可以在官网填写问卷申请一下。
inspx:页面样式调试神器
这个插件很有意思,它可以让你不开启DevTools
即可查看元素的样式,效果如上图。
使用起来也很方便,大致分为几步:
- 安装依赖
npm install inspx --save-dev
- 让它包裹你的React应用
import Inspect from 'inspx';
<Inspect>
<App />
</Inspect>
- 启动项目,在页面元素上,鼠标悬停 + 同时安装
option
键(Windows系统下为alt
键)
SVG Background:生成SVG背景图
SVG Background
是一个简单好用的工具,可以一键生成SVG
格式的背景图,目前支持多种风格的背景图样式。
🥅 代码片段
用CSS绘制水滴
.drop {
position: relative;
height: 200px;
width: 200px;
background: #54ABFB;
border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%;
opacity: 0.8;
border: 2px solid #3D93FF;
}
.drop::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background: #318CFE;
border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%;
box-shadow: -20px 30px 16px #1B6CFB,
-40px 60px 32px #1B6CFB,
inset -6px 6px 10px #1B6CFB,
inset 2px 6px 10px #1A74E5;
inset 20px -20px 22px white,
inset 40px -40px 44px #A8CEFF;
}
.drop::after {
content: "";
position: absolute;
left: 130px;
top: 40px;
height: 40px;
width: 40px;
background: #E6FDFB;
border-radius: 44% 56% 46% 54% / 36% 50% 50% 64%;
box-shadow: 16px 40px 0 -10px white;
opacity: 0.8;
}
让focus
的效果变得更有意思
我们给出一段实例代码,针对未设置动画减弱的用户开启focus
动画特效:
@media (prefers-reduced-motion: no-preference) {
:focus {
transition: outline-offset .25s ease;
outline-offset: 5px;
}
}
window.showOpenFilePicker
:让你可以对本地文件进行读写
window.showOpenFilePicker
是目前还处在Working Draft
阶段的一个标准,目前已经得到Chrome
和Edge
浏览器支持。需要注意的是,这个API只能在安全的上下文环境(HTTPS)中使用。
它的神奇之处就是打通了浏览器与本地文件的读写通道,显示一个文件选择窗口(与的file类型input被点击时的效果类似),能通过API获取文件内容以及将内容保存到文件中(需要先选择文件,才可以保存到该文件中)。
大家可以去上图中的window.showOpenFilePicker读写文件示例页面去手动操作一下打开和保存文件的操作(使用Chrome/Edge 86+版本的浏览器)。
上图中的部分示例代码如下(showOpenFilePicker完整示例代码):
const textarea = document.querySelector('textarea')
// Handle [cmd]+[s] and [cmd]+[o] shortcuts
window.addEventListener('keydown', event => {
if (event.key === 'o' && event.metaKey) {
event.preventDefault()
highlight('cmd+o')
openFile()
}
if (event.key === 's' && event.metaKey) {
event.preventDefault()
highlight('cmd+s')
saveFile()
}
})
let fileHandle;
async function openFile() {
const [handle] = await window.showOpenFilePicker()
fileHandle = handle
const file = await handle.getFile()
const text = await file.text()
textarea.value = text
}
async function saveFile() {
const writable = await fileHandle.createWritable()
await writable.write(textarea.value)
await writable.close()
}