前端即网站前台部分，运行在 PC 端、移动端等浏览器上展现给用户浏览的网页。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计；前端开发则是网站的前台代码实现，是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。
前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js 的广泛应用，各类 UI 框架，JS 类库层出不穷，开发难度也在逐步提升。
热门文章
实现这个效果需要借助 resize 特性，可以天然的实现元素拉伸特性。最常见的就是 textarea，默认就是可以拉伸的
<textarea></textarea>
不过，我们这里需要的不是textarea，而是普通的元素。普通的元素要实现这样的效果也很容易，只需要在overflow不是visible的情况下，添加resize属性就行了
.resizable {
resize: both;
overflow: scroll;
}背景：实现主题切换有几种不同的方案，比如使用CSS变量，使用JavaScript动态加载对应的主题样式文件等。本文主要讲的是如何使用Sass实现主题切换。
本质：Sass作为CSS预处理器，需要编译成CSS后，才能被浏览器识别和解析。因此无法在浏览器中直接使用Sass实现类似CSS变量那种动态切换。本质上来说，项目中有几个主题就要提前定义好几份主题样式并全部引入。
绝大部分情况，网络请求都是先请求先响应。但是某些情况下，由于未知的一些问题，可能会导致先请求的 api 后返回。最简单的解决方案就是添加 loading 状态，在所有请求都完成后才能进行下一次请求。
但不是所有的业务都可以采用这种方式。这时候开发者就需要对其进行处理以避免渲染错误数据。
在动手实现之前，首先脑子里要有一个整体脉络，明白搭建前端监控具体的流程步骤有哪些。因为前端监控系统实际上是一个完整的全栈项目，而并不仅仅是前端，甚至主要的实现都是围绕在数据方面的。
当然了，还有一点说明，本篇的实现主要是面对普通业务，面向中小厂自研的方向。我看过大厂做的监控系统，非常复杂能力也非常强，动不动就是亿万级别的数据，最后整还到了大数据的方向。我只介绍如何实现主要功能，如何解决问题。
异常数据，是指前端在操作页面的过程中，触发的执行异常或加载异常，此时浏览器会抛出来报错信息。
比如说你的前端代码用了个未声明的变量，此时控制台会打印出红色错误，告诉你报错原因。或者是接口请求出错了，在网络面板内也能查到异常情况，是请求发送的异常，还是接口响应的异常。
在我们实际的开发场景中，前端捕获的异常主要是分两个大类，接口异常 和 前端异常，我们分别看下这两大类异常怎么捕获。
同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。
MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：
无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
无法接触非同源网页的 DOM
无法向非同源地址发送 AJAX 请求
痛点：
日常开发中, 往往我们在项目中引用的很多依赖包，但是随之依赖包的升级，我们的项目之间的依赖就越来越难以维护，包与包之间版本的引用也让我们头疼。
Lerna 包管理：
正如官网所说的，Lerna 是一个管理工具，用于管理包含多个软件包（package）的 JavaScript 项目，对于使用 git 和 npm 管理多软件包代码仓库的工作流程进行了优化。
开发之前，需要准备页面所需的素材，本文用到的海岛素材是在 sketchfab.com 找的免费模型。下载好素材之后，在 Blender 中打开，按自己的想法调整模型的颜色、材质、大小比例、角度、位置等信息，删减不需要的模块、缩减面数以压缩模型体积，最后删除相机、光照、UV、动画等多余信息，只导出模型网格备用。
unified是一个通过使用语法树来进行解析、检查、转换和序列化文本内容的接口，可以处理Markdown、HTML和自然语言。它是一个库，作为一个独立的执行接口，负责执行器的角色，调用其生态上相关的插件完成具体任务。同时unified也代表一个生态，要完成前面说的文本处理任务需要配合其生态下的各种插件，截止到目前，它生态中的插件已经有三百多个！鉴于数量实在太多，很容易迷失在它庞大的生态里，可谓是劝退生态。
unified主要有四个生态：remark、rehype、retext、redot，这四个生态下又有各自的生态，此外还包括处理语法树的一些工具、其他构建相关的工具。
通过查看样式我们发现都是 UI 的样式，并没有我们手动覆盖的样式。
但是这里有一个异常点有四个生效的样式，正常情况是只会有一个。但是这里我忽略了这个问题，我以为只是有多余的引入，或者没有 externals 、peerDependencies 导致有多个。
看上去样式是生效了只不过效果不对，我就怀疑 theme-p 有问题，但是在文档站显示是正常的。
那我们只能想办法去排查这个错误样式是谁引入进来的。
brightness 属性是用来修改亮度的。值可以是百分比，也可以是数值（0.5 = 50%），默认值是 1，但不能是负数。当值越接近 0，画面越黑，当等于 0 时，整个画面几乎就成纯黑的了；值理论上可以趋于无限大，当大到一定值时，画面就几乎成纯白了
能用来干啥呢？有一个非常常见的效果想必大家都看过
最近准备一个技术分享，看到以前做的一个语音转文字的功能，放在slides上落灰了，索性整理到这里和大家分享下。
从技术选型，到方案设计，到实际落地，可以说把全链路都覆盖到了。
语音转写流程图
PC端浏览器如何录音
录音完毕后语音如何发送
语音发送和实时转写
通用录音组件
总结
热门问答
- 怎么使用vue2+el-table实现甘特图？
- vue能否实现向后端一样再部署时动态配置。
- js数据处理
- 编写一个js算法，用一次循环将数组中出现2次或者以上的值删掉
- 在生产环境中axios向后端发送请求为什么不用localhost呢?
- 我在next.js中使用plaiceholder这个插件去模糊化图片的时候，当图片数量比较多的时候为什么会卡住？
- 递归和动态规划的区别，应该如何理解？
- animation实现无缝滚动动画会空白
- 如果一次网页操作本身就只会触发一次回流/重绘, 那么虚拟dom还有优势吗?
- 如何使用webapck 处理特殊文件，比如xx.lock文件
课程推荐
课程收获：
- 掌握一项随处可见、日益增加的技术需求
- 提升自身技术，拓宽前端视野
- 加强硬实力，把握晋升机会
- 基于计算机底层，向前端架构迈进
PS：大家想看哪些方面的技术内容，可以在评论区留言喔 ~
如有问题可以添加小姐姐微信~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。