前端sonder
bug开发工程师
获得徽章 1
- #青训营笔记创作活动#
1月22日 打卡day18
今日看了一篇前端实现羊了个羊，自己没有跟着实现，只是单纯的看了一遍，有点bug，点快了没有消除，应该是设置的定时器的原因
评论点赞 - #青训营笔记创作活动#
1月21日 打卡day17
今日学习了浏览器的调试技巧
通过使用console、breakpoint、条件断点、DOM断点和VS code断点几种方法。使用对应的调试方式，可以提高我们的开发效率以及解决问题能力展开评论点赞 - #青训营笔记创作活动#
1月20日 打卡day16
今日学习了利用css来监听事件
● :hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
● :active配合transition延时、transitionend监听可以实现长按触发效果
● CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
● 可以直接通过:hover来控制台动画的暂停和播放展开评论点赞 - #青训营笔记创作活动#
1月19日 打卡day15
今天看了一篇前端实现活体人脸检测
看了一遍文章，没有具体去实现
在网页中使用活体人脸检测大部分都是前端录制一段视频，让后端调用第三方接口去判断，今天我们就用纯前端方式来实现这个功能。
引入tensorflow训练好的人脸特征点检测模型，预测 486 个 3D 人脸特征点，推断出人脸的近似面部几何图形。展开评论点赞 - #青训营笔记创作活动#
1月18日 打卡day14
今日学习了如何调试antd的源码
antd 是 react 主流组件库，我们经常使用它但可能并没有调试过它的源码。
我们可以在 renderWithHooks 里调用函数组件的地方打个条件断点，在调用想调试的组件时断住，这样我们就可以 step into 到该组件定义的地方。展开评论点赞 - #青训营笔记创作活动#
1月17日 打卡day13
今日学习了使用fabric.js快速开发一个图片编辑器。
没有上手去尝试，就看了一遍fabric.js的基本使用。
可以结合数据接口拼接模板生成图片，很轻松的实现定制模板 + 生成图片的功能。展开评论点赞 - #青训营笔记创作活动#
1月16日 打卡day12
今日学习了如何防止按钮重复点击，看到按钮重复点击，在看这篇文章之前我一直是通过节流的方式实现的。
看完这篇文章了解到可以适用animation的方式模拟节流
不过，这种实现方式还是比较有局限的，仅限于点击行为，像很多时候，节流可能会用在滚动事件或者键盘事件上，像这些场景就用传统方式实现就行了。
button{
animation: throttle 2s step-end forwards;
}
button:active{
animation: none;
}
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}
展开评论点赞 - #青训营笔记创作活动#
1月15日 打卡day11
今日看了这篇文章，感觉这个问题非常有意思
要求禁止开发者操作dom，直接修改 window.document 的值，让开发者无法获取 document
要求禁止开发者调接口
这篇文章实现的方式是通过适用沙箱（Sandbox）-沙箱指在隔离环境中，用以测试不受信任的文件或应用程序等行为的工具。展开评论点赞 - #青训营笔记创作活动#
1月14日 打卡day10
今日学习了Vite项目屏幕适配的两种方案
方案一：基于rem的适配方案
适用场景：不固定宽高比的Web应用，适用于绝大部分业务场景
方案二：基于scale的是适配方案
适用场景：固定宽高比的Web应用，如大屏或者固定窗口业务应用展开评论点赞 - #青训营笔记创作活动#
1月13日 打卡day9
今日学习了几个很有用但是平时没见过的属性
比如：
:empty伪类平时开发的时候数据都是通过请求接口获取的，也会存在接口没有数据的情况。这个时候正常的做法是给用户一个提示，这时候可以用该伪类。
:invalid伪类
:focus-within伪类展开评论点赞