项目需要引入jupyterlab组件，结果在项目中导入css出错了，报错信息是找不到 @jupyterlab/application/style/index.css 文件中的依赖样式文件 @import url('~@fortawesome/fontawesome-free/css/all.min.css');

今天看到一篇文章讲解了web worker的技术方案。很有收获，虽然目前虽然不一定能用上。

记录一些在学习过程中get到的新知识点。

e2e

e2e或者端到端（end-to-end）或者UI测试是一种测试方法，它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之，它从一个用户的角度出发，认为整个系统都是一个黑箱，只有UI会暴露给用户。

具体链接看：http://sentsin.com/web/658.html

场景

目前大部分接触到的页面都会使用SPA来实现。但是SPA会有个问题，就是对于SEO的支持不是很好。

对于vue项目来说，可以使用nuxt一把梭😹。
但对于简单的场景来说，其实也可以用预渲染的方式来只对首页和文档部分做静态渲染。
这样既满足了SEO的支持，也和原本vue的写法一样。

我们为什么一再强调将css放在头部，将js文件放在尾部

在面试的过程中，经常会有人在回答页面的优化中提到将js放到body标签底部，原因是因为浏览器生成Dom树的时候是一行一行读HTML代码的，script标签放在最后面就不会影响前面的页面的渲染。
那么问题来了，既然Dom树完全生成好后页面才能渲染出来，浏览器又必须读完全部HTML才能生成完整的Dom树，script标签不放在body底部是不是也一样，因为dom树的生成需要整个文档解析完毕。

这几天换服务器，然后在服务器上的mongodb就需要做一下数据迁移。在此记录下方法。

数据备份

在mongodb中使用mongodump命令来备份数据：

1

mongodump -h localhost:27017 -d test -o /path/to/mongobackups

昨天看到一个炫酷的css动画，仔细阅读了下，感觉还是挺好玩的，虽然业务场景上不太用的到，这里做下记录。

主要是用了filter这个属性。

【第1816期】巧用 CSS 实现酷炫的充电动画

今天了解到一个牛逼的东西：quikcjs。

前段时间同事还在说有没有js转可执行文件的库。可惜知道的晚了点，不然可以让他们试试这个。

昨天看到一个有意思的题目：怎么使用HTML5实现录音的功能？

然后试着了解了下，实现原理主要是用了MediaStream这个对象。

The MediaStream interface represents a stream of media content. A stream consists of several tracks such as video or audio tracks.
Each track is specified as an instance of MediaStreamTrack.
You can obtain a MediaStream object either by using the constructor or by calling MediaDevices.getUserMedia().

这是来自MDN文档 对 MediaStream 的说明。

从中我们可以知道，可以通过 MediaDevices.getUserMedia() 方法来获取设备的音频输入功能。

早就看到stylelint 的介绍文章，感觉有点意思。因为懒，这几天才接入了这个样式检查的工具。

话不多说，直接看如何引入这个库吧。

install

安装相关依赖库

1

yarn add stylelint stylelint-config-standard stylelint-config-prettier