前端微周刊(第11期):Vite在npm的周下载量破十万;Stack Overflow发现四分之一访客喜欢`ctrl+c`

“前端微周刊”每周五更新,为你带来不一样的前端周刊新体验

微信搜索订阅“前端微志”公众号

🖼 趣图

前端、后端 vs 全栈

📰 资讯

Vite在npm的周下载量破十万,GitHub stars破2.5万

Vite在过去一年每周的安装量趋势

最新消息,Vite目前达到一个里程碑的阶段。

  • npm周下载量达10万
  • GitHub star数破2.5万
  • 249位代码贡献者
  • Discord上成员数超过2500

Stack Overflow发现四分之一访客喜欢ctrl+c

Stack Overflow4月1日的愚人节joke

今年愚人节的时候,Stack Overflow给大家开了一个玩笑:对用户复制代码的次数进行收费(不知道的朋友,可以查看前端微周刊的第7期内容)。

其实,Stack Overflow在页面上偷偷“动了手脚”,监听用户在页面上按下ctrl + c的操作,并对3月26日到4月9日的用户数据进行了分析,发现了一些比较有趣的事情:

Vue Devtools v6 beta8发布

Vue DevTools支持Vue 2

Vue Devtools发布v6的第八个beta版本,为Firefox浏览器端带来了新的特性和变更。

  • 支持Vue 2,同时支持vue-routervuex
  • 插件权限能力,可以在插件详情页内配置不同权限是否启用
  • 在页面刷新时,元素检查时的选中状态会被保留
  • 在检查器中,可以选中“Copy path”来复制属性的path
  • 可以编辑计算属性的setter
  • ……

主流浏览器已支持flexbox属性:gap

gap属性在各浏览器中的兼容情况

随着Apple的Safari在macOS和iOS的最新版本中支持flexboxgap属性,目前所有主流浏览器都已支持这一特性。

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>

上面示例代码的展示效果如下图:

gap属性示例效果

📖 文章

Why We Switched From Webpack To Vite

Replit团队发现由ReactWebpack构建的项目已经变得越来越复杂和低效,开发环境的构建也越来越慢。在过去几周中,他们慢慢切换到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-middlex-middle,因为不是真正的middle
  • Box-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:页面样式调试神器

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绘制水滴

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动画

我们给出一段实例代码,针对未设置动画减弱的用户开启focus动画特效:

@media (prefers-reduced-motion: no-preference) {
  :focus {
    transition: outline-offset .25s ease;
    outline-offset: 5px;
  }
}

window.showOpenFilePicker:让你可以对本地文件进行读写

window.showOpenFilePicker是目前还处在Working Draft阶段的一个标准,目前已经得到ChromeEdge浏览器支持。需要注意的是,这个API只能在安全的上下文环境(HTTPS)中使用。

它的神奇之处就是打通了浏览器与本地文件的读写通道,显示一个文件选择窗口(与的file类型input被点击时的效果类似),能通过API获取文件内容以及将内容保存到文件中(需要先选择文件,才可以保存到该文件中)。

window.showOpenFilePicker读写文件示例

大家可以去上图中的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()
}
2021-04-30

访问量 781

扫码关注公众号“前端微志”

第一时间获取新周刊

预览图片