甜心远统治世界
获得徽章 1
- #青训营笔记创作活动# 12月27日打卡day16
纯前端方式实现活体人脸检测
*创建人脸模型
*人脸识别
*特征检测（张嘴，眨眼，点头等）
结合机器学习展开评论点赞 - #青训营笔记创作活动# 12月26日打卡Day15
调试 antd 的源码
首先用 create-react-app 创建一个 react 项目，并把dev server跑起来
之后安装antd
利用断点调试找到调用函数组件的地方
也可以利用sourcemap直接调试组件对应的tsx源码
展开评论点赞 - #青训营笔记创作活动# 12月24日打卡Day14
fabric.js开发一个图片编辑器
从整篇文章里可以系统了解实现一个项目的完整逻辑，并且从整体框架到内部细节代码可以学习到很多知识，也初步了解了fabric.js的代码逻辑与使用方法评论点赞 - #青训营笔记创作活动# 12月24日打卡Day13
css防止按钮重复点击
禁用点击事件pointer-events，自动禁用一段时间animation，触发机制伪类:active
利用css对动画的控制，实现动画控制按钮从禁用->可点击的变化展开评论点赞 - #青训营笔记创作活动# 12月21日打卡Day12
设计一个不能操作DOM和调接口的环境
实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸展开评论点赞 - #青训营笔记创作活动# 12月19日打卡Day11
Vite项目屏幕适配的两种方案
1.基于rem适配，适用于不固定宽高比的Web应用，适用于绝大部分业务场景
2.基于scale方法实现，在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。展开评论点赞 - #青训营笔记创作活动# 12月17日打卡Day10
*标题吸顶
position属性的sticky属性值
*接口无数据
人为判断当前数据返回列表的长度是否为 0，如果为 0 则显示一个 “暂无数据” 给用户，反之则隐藏该提示。
*多个元素等分间距
gap
*带背景的文字效果
background-clip: text
*文本选中
user-select
*不用JS实现校验输入
:invalid伪类
*输入时页面动效
:focus-within伪类
*mix-blend-mode:difference 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。展开评论点赞 - #青训营笔记创作活动# 12月15日打卡Day9
学习使用tinyping工具实现图片压缩。构建webpack plugin时会产生页面迭代和无法选择压缩图片的问题。
通过命令行工具解决。在打包「生产环境」代码之前，执行「压缩命令」，通过命令行交互，选择需要压缩的图片。
实现思路大体分为查找，分配，上传，下载，写入五步。
查找：找出所有的图片资源；
分配：均分任务到每个进程；
上传：把原图上传到TinyPng；
下载：从TinyPng中下载压缩好的图片；
写入：用下载的图片覆盖本地图片；展开评论点赞 - #青训营笔记创作活动# 12月14日打卡Day8
Esbuild采用go语言开发，有多核并行，从零开始造轮子，高效利用内存等优势。
对于插件机制，esbuild 插件就是一个对象，里面有name和setup两个属性，name是插件的名称，setup是一个函数，其中入参是一个 build 对象，这个对象上挂载了一些钩子可供我们自定义一些构建逻辑。
可以应用于代码压缩工具，代替ts-node，代替ts-jest，第三方库boundler，打包Node库，小程序编译和web构建等方面。展开赞过 评论1 - #青训营笔记创作活动# 12月13日 打卡Day7
WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。
媒体流是采用流式传输的方式，使得流式媒体在Internet上播放的技术。通过网络传输的音频、视频或多媒体文件在播放前并不下载整个文件，数据流随时传送随时播放，只是在开始时有一些延迟。我们可以通过摄像头，麦克风，屏幕共享等方式获取到媒体流，然后通过 WebRTC 技术将媒体流传输到远端实现实时通讯。
navigator.mediaDevices.getUserMedia(constraints)这个 api 来获取媒体流，参数包含媒体流的类型，分辨率等信息。通过修改constriants的参数设置媒体流的来源或者媒体流的宽高等信息。
以及关于如何使用媒体流实现录制屏幕和屏幕共享，或者制作虚拟背景等实用性功能。有些不懂的地方还会继续学习。展开评论点赞