学了Vite再来看看Snowpack吧
什么是 Snowpack？看下官网的介绍：
Snowpack is a lightning-fast frontend build tool, designed for the modern web. It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development workflow. Snowpack leverages JavaScript’s native module system (known as ESM) to avoid unnecessary work and stay fast no matter how big your project grows.
Once you try it, it’s impossible to go back to anything else.
Snowpack 是一款闪电般快速的前端构建工具，专为现代 Web 设计。 它是开发工作流程中更重、更复杂的打包程序（如 webpack 或 Parcel）的替代品 ...
基于Sentry搭建前端异常监控系统
背景虽然在我们的项目上线前会有很多的测试流程，但是测试流程肯定无法保证 100%覆盖所有操作场景，在用户的使用过程中仍会有一些问题暴露出来。但当线上用户出现问题，我们需要收到用户的一个反馈，才能去定位解决，这样会导致我们的问题解决不够及时。并且有些疑难杂症，我们无法复现定位，这时候我们需要得知用户的环境、操作等信息，以便于对问题进行排查。基于以上三点考虑，我认为在大部分项目中都需要接入一个异常监控系统，来实现收集异常、收集日志信息、及时警告、展示统计信息等功能。
为什么选择 Sentry？
免费
Sentry 可直接使用也可自行搭建
兼容性强，基本不受语言限制，搭建一套系统可用于多个项目。
Sentry 简介
Sentry’s application monitoring platform helps every developerdiagnose, fix, and optimize the performance of their code.
Sentry 的应用程序监视平台可帮助每个开发人员诊断，修复和优化其代码的性能。
Sentry 部署及使用Sentry 可直接使用也可自 ...
用vscode来调试js文件吧
前言最近经常在 LeetCode 上刷算法题，又菜又舍不得开会员在线调试，就可怜怜巴巴的用 chore 的控制台缓慢的调试。偶然发现 VSCode 也可以对 js 文件进行调试，并且拥有打断点、监听变量等功能，那就赶快弄起来吧~
操作首先点击 run 面板 create a launch.json file，选择 node.js，VSCode 会帮我们在 .vscode 的文件夹中自动创建一个 launch.json 文件，
自动创建好的文件代码如下：
123456789101112131415{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "con ...
实现通过短信中的链接打开小程序
在开发小程序的过程中，我遇到了这样的一个需求，通过短信中的链接打开一个h5，这个h5可以实现点击跳转小程序，或者扫码跳转，并且将链接上的参数填充到小程序界面上。下面来描述一下我的开发步骤及实现方案。
这个需求大部分的功能是基于 h5 页面实现的，所以首先进行对 h5 页面的攻破。样式部分不多说，开始攻破两大功能点。
1. 通过点击按钮跳转小程序点击按钮跳转即通过链接实现跳转，这里使用了小程序官方 api - urlscheme.generate
在这个api中提到获取 URL Scheme 需要 access_token。
access_token，是小程序全局唯一后台接口调用凭据。需要通过官方 api - auth.getAccessToken 去调取，文档中提示 access_token 有效期是 2个小时，所以我将获取的 access_token 存储在 redis 中，并设定过期时间，避免反复调用造成 access_token 刷新，产生不必要的冲突。
下面是获取 accessToken 的代码实现：
12345678910111213141516171819202122232 ...
深入学习HTTP协议(3)-HTTP进阶
身为一个前端，HTTP 对我而言就像是云雾环绕的一座山，看不透也不知从哪开始攀登。深入学习 HTTP 协议系列就是我对罗剑锋老师的《透视 HTTP 协议》所做的总结。希望能对大家的登山之旅有所帮助。
HTTP 实体数据实体数据类型HTTP 实体数据的类型采用的 MIME type，是多用途互联网邮件扩展方案（简称MIME）的其中一部分标准。
HTTP实体数据 常用类别：
text：文本格式的可读数据，例如：text/html、text/plain、text/css等。
image：图像文件，例如：image/gif、image/jpeg、image/png等。
audio：音频数据，例如：audio/mpeg等。
video：视频数据，例如：video/mp4等。
application：数据格式不固定，必须有上层应用程序来解释。常见的有 application/json，application/javascript等。
实体数据压缩HTTP 在传输时为了节约宽带，有时会根据指定压缩类型进行压缩数据。
Encoding type（压缩数据类型）常用类别：
gzip：GNU z ...
微信小程序保存图片到相册
在开发过程中经常遇到保存图片到相册的需求，主要有两种一是保存服务器地址图片，还有一种是保存 canvas 生成的 base64 格式图片，下面来讲解分别怎么实现。
保存服务器地址图片到相册1234567891011121314151617181920212223242526272829303132333435363738394041424344// 查看是否有 `scope.writePhotosAlbum` 权限wx.getSetting({ success: (res) => { if (!res.authSetting["scope.writePhotosAlbum"]) { // 申请所需权限 wx.authorize({ scope: "scope.writePhotosAlbum", success: () => { // 授权成功保存图片 saveToAlbum(); ...
记录踩到的坑&知识点-js/css
2020-12
css 中 import css 文件要写相对路径，若想使用路径别名需要通过 alias 配置
css 父盒子高度不确定，由子盒子撑开时，如果想让所有子盒子充满父盒子，可以通过以下方式实现。12345// 父盒子.box { display: flex; align-items: stretch;}
react-hooks学习笔记
React Hooks
React Hooks 解决问题：组件很难服状态逻辑
组件更新时执行顺序 before render->useEffect 的返回函数->useEffect
组件每次 render 时，获取到的 state 和 props 都是当前 render 里的值。而 ref 在所有 render 里都保持者唯一的引用，不同的 render 中取到的 ref 都是一个地址。
hook 使用规则
只在 react 函数最顶层调用
只在 react 函数中调用 hook
ts学习笔记
mocha 包。
@types/react 给我们提供了 React.FunctionComponent (官方简称 FC ) type，来定义函数式组件的类型。
normalze.css 提供 css 基础配置。
如何给你的Taro小程序项目加上TS
前言现在有越来越多的项目开始使用 ts，我们熟知的 React 、Ant Design 也已经全面转变为 ts。那么 ts 能给我们带来什么呢？
粗谈 TypeScript很多人会好奇，ESLint 可以为我们提示代码不规范以及使用错误等问题，在有 ESLint 的情况下为什么还需要 TypeScript？
首先，ESLint 是用来检测代码规范的，并不能检测代码逻辑问题。
其次，我们都知道 JavaScript 是一种弱类型语言，并且是在运行时检查的动态类型。而 Typescript 相对于 Javascript 为我们带来了静态类型，它可以根据我们对变量的类型定义、以及自身的类型断言在编译期对代码进行类型检查。
简单介绍过后，下面我们开始进入正题，给 Taro 项目加上 TS。
TS 快到项目里来1. 新增包首先是关于 npm 包的安装，这里我建议通过 taro init 选择 Typescript，创建内置 ts 环境的新项目。
下面是 ts 相关包：
1234567891011121314"@typescript-eslint/eslint-plugin": ...
