甜心远统治世界
获得徽章 1
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
#青训营笔记创作活动# 12月27日打卡day16
纯前端方式实现活体人脸检测
*创建人脸模型
*人脸识别
*特征检测（张嘴，眨眼，点头等）
结合机器学习
纯前端方式实现活体人脸检测
*创建人脸模型
*人脸识别
*特征检测（张嘴，眨眼，点头等）
结合机器学习
展开
评论
点赞
#青训营笔记创作活动# 12月26日打卡Day15
调试 antd 的源码
首先用 create-react-app 创建一个 react 项目，并把dev server跑起来
之后安装antd
利用断点调试找到调用函数组件的地方
也可以利用sourcemap直接调试组件对应的tsx源码
调试 antd 的源码
首先用 create-react-app 创建一个 react 项目，并把dev server跑起来
之后安装antd
利用断点调试找到调用函数组件的地方
也可以利用sourcemap直接调试组件对应的tsx源码
展开
评论
点赞
#青训营笔记创作活动# 12月24日打卡Day14
fabric.js开发一个图片编辑器
从整篇文章里可以系统了解实现一个项目的完整逻辑，并且从整体框架到内部细节代码可以学习到很多知识，也初步了解了fabric.js的代码逻辑与使用方法
fabric.js开发一个图片编辑器
从整篇文章里可以系统了解实现一个项目的完整逻辑，并且从整体框架到内部细节代码可以学习到很多知识，也初步了解了fabric.js的代码逻辑与使用方法
评论
点赞
#青训营笔记创作活动# 12月24日打卡Day13
css防止按钮重复点击
禁用点击事件pointer-events，自动禁用一段时间animation，触发机制伪类:active
利用css对动画的控制，实现动画控制按钮从禁用->可点击的变化
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，避免沙箱逃逸
设计一个不能操作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()方法来实现元素的缩放效果。
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 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
*标题吸顶
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中下载压缩好的图片；
写入：用下载的图片覆盖本地图片；
学习使用tinyping工具实现图片压缩。构建webpack plugin时会产生页面迭代和无法选择压缩图片的问题。
通过命令行工具解决。在打包「生产环境」代码之前，执行「压缩命令」，通过命令行交互，选择需要压缩的图片。
实现思路大体分为查找，分配，上传，下载，写入五步。
查找：找出所有的图片资源；
分配：均分任务到每个进程；
上传：把原图上传到TinyPng；
下载：从TinyPng中下载压缩好的图片；
写入：用下载的图片覆盖本地图片；
展开
评论
点赞
#青训营笔记创作活动# 12月14日打卡Day8
Esbuild采用go语言开发，有多核并行，从零开始造轮子，高效利用内存等优势。
对于插件机制，esbuild 插件就是一个对象，里面有name和setup两个属性，name是插件的名称，setup是一个函数，其中入参是一个 build 对象，这个对象上挂载了一些钩子可供我们自定义一些构建逻辑。
可以应用于代码压缩工具，代替ts-node，代替ts-jest，第三方库boundler，打包Node库，小程序编译和web构建等方面。
Esbuild采用go语言开发，有多核并行，从零开始造轮子，高效利用内存等优势。
对于插件机制，esbuild 插件就是一个对象，里面有name和setup两个属性，name是插件的名称，setup是一个函数，其中入参是一个 build 对象，这个对象上挂载了一些钩子可供我们自定义一些构建逻辑。
可以应用于代码压缩工具，代替ts-node，代替ts-jest，第三方库boundler，打包Node库，小程序编译和web构建等方面。
展开
评论
1