
获得徽章 1
- #青训营笔记创作活动#
1月27日 打卡day17
今日学习:CSS控制定时器
1. 鼠标进出 :hover transition添加监听transitionend方法
2. 长按触发::hover:active transition再监听transitionend方法
3. 轮播和暂停:CSS 动画设置次数为infinite就可以无限循环,:hover暂停和播放动画,监听每次动画的触发可以用animationiteration方法展开评论点赞 - #青训营笔记创作活动#
1月26日 打卡day16
今日学习:前端实现活体人脸检测
1. 引入tensorflow训练好的人脸特征模型
2. 根据一定帧数确定阈值今儿确定各项参数评论点赞 - #青训营笔记创作活动#
1月25日 打卡day15
今日学习:Ant Design 源码
1. 创建VSCode调试配置
2. 打断点
3. antd三种入口:es 目录对应 esm 入口,lib 目录对应 commonjs 入口,dist 目录对应 UMD 入口
4. 想调试最初的tsx 源码需要用 sourcemap展开评论点赞 - #青训营笔记创作活动#
1月23日 打卡day14
今日学习:fabric.js
1. 强大的canvas库
2. fabric.js创建对象,用EventEmitter创建事件发射器,可订阅单选、多选、取消选择事件。 通过vue的provide语法把fabric对象、EventEmitter对象向下传递,在mixins中保存选中的元素和选中状态。
3. 导入SVG元素时,可以导入SVG文件或者字符串进行导入,调用fabric的loadSVGFromURL、loadSVGFromString方法进行导入
4. 字体属性可以自定义字体,需要先下载字体后再进行设置,可以通过fontfaceobserver工具库下载指定字体,成功后在设置字体名称。展开赞过评论1 - #青训营笔记创作活动#
1月20日 打卡day13
今日学习:CSS实现节流
1. 禁用点击事件:pointer-events:none;
2. 限制时间:animation
3. 触发时机::active
4. 用CSS永华串联三者,控制按钮从禁用->可点击的变化,每次点击时让这个动画重新执行一遍,在执行的过程中,一直处于禁用状态
5. 第二种方法:通过:active去触发transition变化,然后通过监听transition回调去动态设置按钮的禁用状态,实现如下展开赞过评论1 - #青训营笔记创作活动#
1月19日 打卡day12
今日学习:沙箱
1. 沙箱:为待执行的程序创建一个独立的执行环境,内部程序的执行不会影响到外部程序的运行
2. with对于沙箱的意义:可以实现所有变量均来自可靠或自主实现的上下文环境,而不会从全局的执行环境中取值,相当于做了一层拦截,实现隔离的效果
3. iframe 标签可以创造一个独立的浏览器原生级别的运行环境,这个环境由浏览器实现了与主环境的隔离展开赞过评论1 - #青训营笔记创作活动#
1月18日 打卡day11
今日学习:Vite项目屏幕适配
1.基于rem适配,通常根元素字体设置为10px,此时子元素1rem相当于10px
2.基于scale适配:通过CSS3的缩放属性,适合用于固定宽高比的Web应用展开赞过评论1 - 1月17日 打卡day10
今日学习:CSS
1. posotion:sticky标题吸附
2. :empty::after用于处理空数据
3. gap,用于Flex布局和Grid布局,让每个元素固定间隔,省去了除不尽的麻烦
4. background-clip: text做一个带背景的文字效果
5. user-select属性 禁用光标选中
6. :invalid伪类 任意内容未通过验证的 input 或其他 form 元素
7. :focus-within 伪类 表示一个元素获得焦点,或该元素的后代元素获得焦点,就会匹配上。
8. mix-blend-mode:difference 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。 #青训营笔记创作活动#展开评论点赞 - #青训营笔记创作活动#
1月16日 打卡day9
今日学习:图片压缩
1. TinyPng压缩
2. 封装tinify工具
3. 用命令行安装
4. 还是推荐使用官方压缩展开评论点赞 - #青训营笔记创作活动#
1月15日 打卡day8
今日学习:Esbuild
1. Esbuild基于Golang开发,是打包工具,多线程打包且直接编译成机器码
2. Esbuild速度快,但兼容性不如SWC,尤其是ES5及以下不可使用
3. 插件机制、虚拟模块支持更友好,没有\0这样hack操作
4. 编译能力强
5. 应用场景:代码压缩工具、代替 ts-node、代替 ts-jest、第三方库 Bundler、打包 Node 库、小程序编译、Web 构建展开评论点赞