用户1716310442438
获得徽章 1
#青训营笔记创作活动#
2023.02.16 day14
使用 fabric . js 快速开发一个图片编辑器：
初始化： fabric . js 创建对象，用 EventEmitter 创建事件发射器；
背景设置：画布大小、背景颜色、背景图片，插入元素：础元素文字、正方形、圆形等各种图形；
属性调整：填充颜色、坐标、旋转角度、透明度等；
2023.02.16 day14
使用 fabric . js 快速开发一个图片编辑器：
初始化： fabric . js 创建对象，用 EventEmitter 创建事件发射器；
背景设置：画布大小、背景颜色、背景图片，插入元素：础元素文字、正方形、圆形等各种图形；
属性调整：填充颜色、坐标、旋转角度、透明度等；
展开
评论
点赞
#青训营笔记创作活动#
2023.02.15 day15
调试 antd 的源码：
1、用 create - react - app 创建一个 react 项目；2、进入项目， run dev server ;
3、安装 antd ，在入口组件里引入样式和 Button 组件；
调试 Button 组件的源码：1、创建一个 VSCode 调试配置；2、指定调试的 URL 并启动。
2023.02.15 day15
调试 antd 的源码：
1、用 create - react - app 创建一个 react 项目；2、进入项目， run dev server ;
3、安装 antd ，在入口组件里引入样式和 Button 组件；
调试 Button 组件的源码：1、创建一个 VSCode 调试配置；2、指定调试的 URL 并启动。
展开
评论
点赞
#青训营笔记创作活动#
2023.02.14 day16
人脸检测实现：
1、创建人脸模型，引入 tensorflow 训练好的人脸特征点检测模型；2、人脸识别；
3、特征检测：人脸的远近﹣人脸占画面的比例；张嘴；眨眼；左右摇头。
2023.02.14 day16
人脸检测实现：
1、创建人脸模型，引入 tensorflow 训练好的人脸特征点检测模型；2、人脸识别；
3、特征检测：人脸的远近﹣人脸占画面的比例；张嘴；眨眼；左右摇头。
展开
评论
点赞
#青训营笔记创作活动#
2023.02.13 day17
借助 CSS 来监听事件：
1、 hover 延时触发：加一个有延时的 transition ,添加监听 transitionend 方法；2、长按触发事件：: active ，再监听 transitionend ;
3、轮播和暂停： CSS 动画， infinite 无限循环；: hover 暂停和播放动画。
2023.02.13 day17
借助 CSS 来监听事件：
1、 hover 延时触发：加一个有延时的 transition ,添加监听 transitionend 方法；2、长按触发事件：: active ，再监听 transitionend ;
3、轮播和暂停： CSS 动画， infinite 无限循环；: hover 暂停和播放动画。
展开
评论
点赞
#青训营笔记创作活动#
2023.02.12 day18
实用函数：
1、 clamp ()：设置上下限；应用于流体的尺寸和定位，装饰性元素，流体高度，动态分割器；
2、 max ()：设置最大上限；应用于动态 border Radius ;
2023.02.12 day18
实用函数：
1、 clamp ()：设置上下限；应用于流体的尺寸和定位，装饰性元素，流体高度，动态分割器；
2、 max ()：设置最大上限；应用于动态 border Radius ;
展开
评论
点赞
#青训营笔记创作活动#
2023.02.11 day19
浏览器调试技巧：
控制台输出内容： console . log ({});控制台输出警告信息： console . warn 控制台输出错误信息： console . error 计算代码段的执行时间： console . time 和 console . timeEnd
2023.02.11 day19
浏览器调试技巧：
控制台输出内容： console . log ({});控制台输出警告信息： console . warn 控制台输出错误信息： console . error 计算代码段的执行时间： console . time 和 console . timeEnd
展开
评论
点赞
#青训营笔记创作活动#
2023.02.10 day20
前端实现羊了个羊小游戏：
地图实现：卡片是以1/4为单位排列的；
覆盖关系：处理遮挡用的二维数组 coverMap ;
2023.02.10 day20
前端实现羊了个羊小游戏：
地图实现：卡片是以1/4为单位排列的；
覆盖关系：处理遮挡用的二维数组 coverMap ;
评论
点赞
#青训营笔记创作活动#
2023.02.09day21
pnpm :包管理器；
优点：包安装速度极快；磁盘空间利用非常高效；支持 monorepo ；安全性高。
依赖管理： npm / yarn install 原理； pnpm 依赖管理。
2023.02.09day21
pnpm :包管理器；
优点：包安装速度极快；磁盘空间利用非常高效；支持 monorepo ；安全性高。
依赖管理： npm / yarn install 原理； pnpm 依赖管理。
展开
评论
点赞
#青训营笔记创作活动#
2023.01.28 day13
防止按钮重复点击：
禁用点击事件：pointer-events；
时间的限制：animation；
触发时机（点击行为）：:active；
2023.01.28 day13
防止按钮重复点击：
禁用点击事件：pointer-events；
时间的限制：animation；
触发时机（点击行为）：:active；
展开
评论
点赞
#青训营笔记创作活动#
2023.01.27 day12
设计一个不能操作DOM和调接口的环境：
1）利用 iframe 创建沙箱，
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）设置 blacklist 黑名单，在黑名单中添加 XMLHttpRequest等实现禁用原生的方式调用接口；
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
2023.01.27 day12
设计一个不能操作DOM和调接口的环境：
1）利用 iframe 创建沙箱，
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）设置 blacklist 黑名单，在黑名单中添加 XMLHttpRequest等实现禁用原生的方式调用接口；
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
展开
评论
点赞
#青训营笔记创作活动#
2023.01.26 day11
Vite项目屏幕适配的两种方案：
1、基于rem的适配方案：
步骤：安装依赖；项目根目录创建 postcss.config.js 文件；main.ts/js 文件中导入依赖；项目重启。
2、基于scale的适配方案：
步骤：新建resize.ts/js文件；相关界面引入resize.ts/js。
2023.01.26 day11
Vite项目屏幕适配的两种方案：
1、基于rem的适配方案：
步骤：安装依赖；项目根目录创建 postcss.config.js 文件；main.ts/js 文件中导入依赖；项目重启。
2、基于scale的适配方案：
步骤：新建resize.ts/js文件；相关界面引入resize.ts/js。
展开
评论
点赞
#青训营笔记创作活动#
2023.01.25 day10
不常见但有用的CSS属性：
1、position: sticky：标题在滚动的时候，会一直贴着最顶上。
2、:empty 选择器：通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示-接口没有数据。
3、background-clip: text：做带背景的文字效果。
4、user-select：禁用光标选中。
5、
2023.01.25 day10
不常见但有用的CSS属性：
1、position: sticky：标题在滚动的时候，会一直贴着最顶上。
2、:empty 选择器：通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示-接口没有数据。
3、background-clip: text：做带背景的文字效果。
4、user-select：禁用光标选中。
5、
展开
评论
点赞