获得徽章 1
- #青训营笔记创作活动#
1月30日 打卡day15
今日学习
调试 antd 组件库的源码
创建配置，添加断点，调试源码，安装依赖，执行build，找到package.json 文件下的三种入口，调试配置展开评论1 - #第五届青训营阅读打卡#
1月31日 打卡day16
今日学习
纯前端实现活体人脸检测编写思路
创建人脸模型（引入人脸特征点检测模型）->人脸识别->特征检测（人脸远近、是否张嘴，眨眼，左右摇头）评论1 - #青训营笔记创作活动#
2月3日 打卡day17
今日学习
1、hover延时触发
（１）JS定时器法：设置定时器，销毁定时器，考虑 dom 嵌套结构（容易误触发）
（２）CSS法：添加监听transitionend方法，设置一个无关紧要的样式【 opacity: 0.999;】，及延时transition: 0s 1s opacity;
２、长按触发事件
监听transitionend方法
el.addEventListener('transitionend', () => {
// 具体逻辑
})
３、轮播和暂停
CSS 动画设置次数为infinite就可以无限循环，通过:hover实现暂停和播放动画，然后再监听animationiteration方法实现每次动画的触发展开评论1 - #青训营笔记创作活动#
1月29日 打卡day14
今日学习
认识canvas库 fabric.js ，通过源代码学习其基础用法，划分一个个小组件实现整个功能
①初始化对象、事件；②设置画布样式、背景颜色、图片等等；③插入基础元素，文字、正方形、SVG；④属性调整，旋转角度、坐标、透明度等等；⑤多向对齐等等展开评论1 - #青训营笔记创作活动#
1月28日 打卡day13
今日学习
1、节流：可以有效的避免函数过于频繁的执行，例如对一个提交按钮，只允许每300ms提交一次
2、CSS实现节流思路一
（1）pointer-events：禁用点击事件
（2）animation：控制禁用时间
（3）伪类:active：触发点击
3、CSS实现节流思路二
通过:active触发transition变化，然后通过监听transition回调动态设置按钮的禁用状态
（1）定义一个无关紧要的过渡属性，比如opacity
（2）监听transition的起始回调
该方法的优势：禁用的逻辑是完全和业务逻辑是解耦的【指可以在任意场合下无缝接入，不受框架和环境影响】展开评论1 - #青训营笔记创作活动#
1月26日 打卡day11
今日学习
1、rem：相对于根元素字体大小的单位，根元素的字体设置为10px时，子元素的1rem就相当于10px
2、基于rem和scale的适配方案的实操展开评论1 - #青训营笔记创作活动#
1月27日 打卡day12
今日学习
拓展JS知识，关于利用沙箱禁止开发者操作 DOM 和调接口的环境评论1 - #青训营笔记创作活动#
1月25日 打卡day10
今日学习
认识更多CSS属性，满满干货![[大笑]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_55.74ed629.png)
1、position: sticky 可以实现标题吸顶的需求
2、选择器:empty 选中内容为空的容器，然后通过伪元素为空容器添加提示
3、gap属性 可以实现每个元素之间隔固定距离
4、background-clip: text 用来做带背景的文字效果
5、user-select属性 禁用光标选中效果
6、选择器:invalid 伪类 实现校验提示的效果，例如当 input 值有效时，元素颜色为绿色【input:valid {background-color: #ddffdd;}】，无效时为红色【input:invalid {background-color: #ffdddd;}】
7、选择器:focus-within 伪类 根据子元素的状态来改变父元素的样式
8、mix-blend-mode:difference属性 元素内容与元素的直系父元素内容和元素背景如何混合， 其中difference 表示差值展开评论1 - #青训营笔记创作活动#
1月19日 打卡day6
今日学习
认识一项新技能抓包，满满的干货
1、清晰的认识到数据从一个设备到另一个设备的过程
2、HTTP/HTTPS 抓包常见的应用层体系结构客户端-服务器体系的原理：
（1）通信的实际上是进程而不是程序
（2）套接字是应用层与运输层之间的端口
（3）HTTPS 在协议栈 http 与 tcp 之间插入安全层 SSL/TSL。与 http 相比不容易受到中间人攻击，更有安全性。【HTTP + 加密 + 认证 + 完整性保护 = HTTPS】
3、电脑端抓手机端的包
4、认识及使用抓包工具 whistle展开评论1 - #青训营笔记创作活动#
1月20日 打卡day7
今日学习
新认识到一项技术WebRTC，满满的干货![[奋斗]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_29.2801857.png)
1、WebRTC的一些基础认识
2、学习到摄像头获取、共享媒体流，实现录制、视频虚拟背景的详细过程展开评论1
![[大笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_55.74ed629.png)
![[奋斗]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_29.2801857.png)