浏览器API
浏览器API会持续更新
使用需要判断浏览器的兼容性，在部分浏览器上可能不支持，且调用浏览器的部分api需要进行浏览器授权。
调用浏览器摄像头
<button type="button" id="start-camera">打开摄像头</button>
<button type="button" id="snapshot-btn">拍照</button>
<video id="preview-box" width="640" height="480" autoplay></video>
<canvas width="640" height="480"></canvas>
const st ...
了解SSE和WebSocket
SSE介绍什么是SSEServer-Sent Events（SSE）是一种用于实现服务器向客户端实时推送数据的Web技术。与传统的轮询和长轮询相比，SSE提供了更高效和实时的数据推送机制。SSE基于HTTP协议，允许服务器将数据以事件流（Event Stream）的形式发送给客户端。客户端通过建立持久的HTTP连接，并监听事件流，可以实时接收服务器推送的数据。
SSE的主要特点
简单易用：SSE使用基于文本的数据格式，如纯文本、JSON等，使得数据的发送和解析都相对简单。
单向通信：SSE支持服务器向客户端的单向通信，服务器可以主动推送数据给客户端，而客户端只能接收数据。
SSE的简单实现node
// 引入相关模块
const http = require('http');
// 创建 HTTP 服务器
const server = http.createServer((req, res) => {
// 设置跨域响应头
res.setHe ...
打字机效果和拉拽方框伸缩
打字机效果今年最火的应该就是chatGpt,在chatgpt显示答案时，会有打字机效果，会将自己的答案以单个字的形式呈现在页面上。在上班摸鱼时，简单的写了一下当做自己联系。主要是使用css中animation进行实现的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
&l ...
简易时钟翻页
今天周五，老板请假了也没有开周会，手上也没有什么事，就在工位刷掘金。看见掘金上有篇帖子写了一个时钟的翻页效果。于是打发时间自己也写了一个。和掘金上面的不同效果，只是做了一个简易的版本。还没来得及看贴子代码的实现。但是看效果要比我的做的精致。下周再去看下别人的具体代码。
div效果
<div>时：<span class="h"></span></div>
<div>分：<span class="m"></span></div>
<div>秒：<span class="s"></span></div>
<div>翻页时钟⏰</div>
<div class="clock">
...
nest与mongodb构建node服务端应用
最近在使用nest.js和mongodb数据库一起构建node应用,记录下主要步骤。因为在过程中也遇见了一些问题，简单做个记录。
安装nest.js安装node需要注意的是node的版本需要是v16以上，否则在运行nest时会出现node版本不匹配问题。如果不匹配可以使用 nvm或者n工具切换node版本。
安装nest.js 使用npm包形式安装nest脚手架。 $ npm i -g @nestjs/cli
$ nest new project-name project-name为你创建的项目名 官网还提供了其他的安装方式 NestJs中文官网链接
安装Mongodb服务前往mongodb官网下载对应的mongo版本 Mongodb官网,选择产品(Products)->社区版本(Community Server),企业版要钱社区版免费。
选择mongodb服务版本 最好选择v5及以上版本 如果选择版本过低，在与nest链接时，可能会出现版本不匹配提示信息
以下是GPT提供的一些分析以及解决办法 ‘ 这个错误提示表示 MongoDB 驱动程序需要与 Mon ...
点击事件单双击判断
判断是否是双击事件，以及分别执行单双击事件
function isDoubleClick(singleCallback, doubleCallback, delay = 300) {
this.clickEvent = '';
this.firstClickTime = '';
this.clickNum = 0;
return (event) => {
const time = new Date().getTime();
this.clickNum++;
if ((time - this.firstClickTime <= delay) && this.clickEvent === event.target.innerHTML) {
...
《人生大事》
今天周末在家看了一天电影，现在想着最有感触的还是《人生大事》，死亡是每个人都会经历的一件事，也是人生经历的最后一件事。遗憾的是较少有影视作品去描写他，也许是禁忌，也许是恐惧。于我而言这部电影尤为打动的还是小女孩（小文）对外婆的依恋。当外婆被拉走的时候，她是不舍的，因为一个相依为命陪伴自己多年的人的离去，会是刻骨铭心的痛；她也是恐惧的，因为她不知道未来还有谁会像外婆一样对她。电影是悲惨的演绎也是皆大欢喜的结局，但是生活不都是电影。小女孩不知道外婆已经离去，可能是她不知道死亡是什么，可能是她不愿意相信外婆离去。于是她去殡仪馆闹，想去找回外婆。她是很想外婆的，她的手表里始终保存着外婆的语音，是她此刻唯一的念想。很多时候逝者的普通遗物就是生者的最大牵挂。她的童年是不幸的，没有爸妈，但她是幸运的，有唯一的外婆。很多人用童年治愈一生，有些人却用一生去治愈童年。我可能比她要幸运很多，我想我是前者，用童年治愈一生，人生中的前二十多年，我在三个婆婆姥姥的养育下是过的不错的，虽然不见得物质过的多好，但是在感情和人生哲理上得到了许多。我一直认为今天能有我的存在，三个婆婆姥姥是最大功者。去年其实我有和小女孩一 ...
项目发布问题
前端发布 最近利用react+nodejs做了一个简单的h5工程,在开发和发布的过程中遇见了一些问题，先就暂时遇见的一些问题找到了一些解决办法，在这里记录一下，以后遇见了方便查阅.前端利用react+ts开发,通过腾讯云宝塔面板进行上传发布。 当前端代码上传完毕后(前端代码也可以通过 FileZilla Client 上传),然后可以开始建站工作,如果有多个站点时，可能导致ip重复,可以先随便填写一个ip或者域名，之后在修改删除之前的可以解决这个问题。 添加好站点域名和端口号后，还需要开放端口 然后就可以在浏览器根据ip+端口号或者域名访问我们的站点了。目前站点功能很少且单一，页面上还有许多bug，后续会完善解决和增加一些功能。 域名：app 如果需要通过https访问的话，需要申请SSL证书，初次申请可能需要几天的时间。 ，然后根据提示填写一些个人信息，然后等待就可以了。
线上刷新页面404问题将 路由跳转的 BrowserRouter 模式替换为 HashRouter
接口反向代理问题const {createPr ...
2022年毕业季
转眼又是一年毕业季，回想之前我已经毕业两年了，两年时间不长不短。从一个学生变成了一个职场人，读了十多年的书，角色的转变还是不太习惯，可能一直到今天我都还不太习惯。毕业之后去考了下公职类，但是最后还是走上了程序猿的道路。毕业两年从武汉到杭州，待过两家公司，一家搞了三个月，欠薪三个月，还好有杭州市政府发的就业补贴和住房补贴，伴我度过了来杭州最难的时光，有一说一吹爆杭州市政府。当然在这家公司我也学到了许多，结识了一些人，遇见了一个很好且技术很棒的老大。我记得我来杭州的第一个项目就是”闲林街道管理小程序”，每次产品临去客户方演示的时候都会疯狂加班，对的，通宵开发对测试改bug😭😭，还好最后都通过了。最后因为公司欠薪离开了，公司的小伙伴也奔向各地，记得走之前项目经理找我们聊天说”抱歉，我们来杭州挣钱却变成了这样”。当然最后薪资都兑现给我们了，在这里在吹爆一次杭州政府。
最后生计所迫我来到了现在的公司，在这边接触了很多新技术，也接触了很多优秀的人，给我的感觉就是优秀的人做什么都优秀。也很感激在这边遇见的人，接受了我频繁的问题，都是很耐心的给我解答，周末跟他们体验了许多活动，也增加了许多的打发 ...
图片上传
基于node的图片上传简述在markdown中使用图片显得很不方便，查了下大概有如下几种方法：
 插入线上图片；
 跟插入线上图片似乎一样，链接处填写相对路径，但我试了一下发现无法正常加载图片，只会显示图片占位标签；
使用base64方法，![markdown picture][markdownbase64]
使用html中img标签的形式
<div align="center">
<img src="" width="50%">
</div>
试了一下还是使用线上图片比较方便，于是就想这写一个图片上传接口，为自己提供一个图片存储的仓库
图片上传· 首先我们已经基于express搭建了一个后端服务· 其次我们使用mongidb数据库· 使用Multer node.js 中间件，用于处理 multipart/form-dat ...