获得徽章 1
#青训营笔记创作活动#
1月20日 打卡day13
今日学习：CSS实现节流
1. 禁用点击事件：pointer-events:none;
2. 限制时间：animation
3. 触发时机：:active
4. 用CSS永华串联三者，控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态
5. 第二种方法：通过:active去触发transition变化，然后通过监听transition回调去动态设置按钮的禁用状态，实现如下
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月19日 打卡day12
今日学习：沙箱
1. 沙箱：为待执行的程序创建一个独立的执行环境，内部程序的执行不会影响到外部程序的运行
2. with对于沙箱的意义：可以实现所有变量均来自可靠或自主实现的上下文环境，而不会从全局的执行环境中取值，相当于做了一层拦截，实现隔离的效果
3. iframe 标签可以创造一个独立的浏览器原生级别的运行环境，这个环境由浏览器实现了与主环境的隔离
展开
评论
1
#青训营笔记创作活动#
1月18日 打卡day11
今日学习：Vite项目屏幕适配
1.基于rem适配，通常根元素字体设置为10px，此时子元素1rem相当于10px
2.基于scale适配：通过CSS3的缩放属性，适合用于固定宽高比的Web应用
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 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。 #青训营笔记创作活动#
今日学习：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月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 构建
1月15日 打卡day8
今日学习:Esbuild
1. Esbuild基于Golang开发,是打包工具,多线程打包且直接编译成机器码
2. Esbuild速度快,但兼容性不如SWC,尤其是ES5及以下不可使用
3. 插件机制、虚拟模块支持更友好，没有\0这样hack操作
4. 编译能力强
5. 应用场景：代码压缩工具、代替 ts-node、代替 ts-jest、第三方库 Bundler、打包 Node 库、小程序编译、Web 构建
展开
评论
点赞
#青训营笔记创作活动#
1月14日 打卡day7
今日学习：WebRTC
1. WebRTC：创建点对点的数据传输
2.需要注意的是，WebRTC 只能在 HTTPS 协议或者 localhost 下使用，如果是 HTTP 协议，会报错。
3.建议拍照小应用
4.共享屏幕获取媒体流实现录制
5.视频虚拟背景
1月14日 打卡day7
今日学习：WebRTC
1. WebRTC：创建点对点的数据传输
2.需要注意的是，WebRTC 只能在 HTTPS 协议或者 localhost 下使用，如果是 HTTP 协议，会报错。
3.建议拍照小应用
4.共享屏幕获取媒体流实现录制
5.视频虚拟背景
展开
评论
点赞
#青训营笔记创作活动#
1月13日 打卡day6
今日学习：前端抓包
1. 抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作
2. HTTP/HTTPS 抓包原理：中间人进程负责抓包，先通信再转发
3. 抓包工具 whistle
1月13日 打卡day6
今日学习：前端抓包
1. 抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作
2. HTTP/HTTPS 抓包原理：中间人进程负责抓包，先通信再转发
3. 抓包工具 whistle
展开
评论
点赞
#青训营笔记创作活动#
1月12日 打卡day5
今日学习：js工具方法
1. 计算距下次生日还有多少天
2. 回到顶部
3. 复制文本
4. 防抖节流
5. 过滤特殊字符
6. 常用正则判断
7. 初始化数组
8. 将RGB转换为十六进制
9. 检测是否是一个函数
10. 检测是否是一个安全数组
11. 检测是否是一个安全对象
1月12日 打卡day5
今日学习：js工具方法
1. 计算距下次生日还有多少天
2. 回到顶部
3. 复制文本
4. 防抖节流
5. 过滤特殊字符
6. 常用正则判断
7. 初始化数组
8. 将RGB转换为十六进制
9. 检测是否是一个函数
10. 检测是否是一个安全数组
11. 检测是否是一个安全对象
展开
评论
点赞
#青训营笔记创作活动#
1月11日 打卡day4
今日学习：promise/async await
1. 早期异步代码传错参数顺序危害极大，灵活不规范且不方便
2. Promise传入回调函数resolve:回调promise对象.then函数；回调函数reject:回调promise对象.catch函数
3. Promise三个状态：
- pending(待定)，执行了executor，状态还在等待中，没有被兑现，也没有被拒绝
- fulfilled(已兑现)，执行了resolve函数则代表了已兑现状态
- rejected(已拒绝)，执行了reject函数则代表了已拒绝状态
- 状态只要从待定状态，变为其他状态，则状态不能再改变
4. async异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行
5. 普通函数主动返回什么就返回什么，不返回为undefined
- 异步函数的返回值特点
- 明确有返回一个普通值，相当于Promise.resolve(返回值)
- 返回一个thenable对象则由，then方法中的resolve,或者reject有关
- 明确返回一个promise，则由这个promise决定
6. 异步函数中可以使用await关键字，普通函数不行
- await特点
- 通常await关键字后面都是跟一个Promise
- 可以是普通值
- 可以是thenable
- 可以是Promise主动调用resolve或者reject
1月11日 打卡day4
今日学习：promise/async await
1. 早期异步代码传错参数顺序危害极大，灵活不规范且不方便
2. Promise传入回调函数resolve:回调promise对象.then函数；回调函数reject:回调promise对象.catch函数
3. Promise三个状态：
- pending(待定)，执行了executor，状态还在等待中，没有被兑现，也没有被拒绝
- fulfilled(已兑现)，执行了resolve函数则代表了已兑现状态
- rejected(已拒绝)，执行了reject函数则代表了已拒绝状态
- 状态只要从待定状态，变为其他状态，则状态不能再改变
4. async异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行
5. 普通函数主动返回什么就返回什么，不返回为undefined
- 异步函数的返回值特点
- 明确有返回一个普通值，相当于Promise.resolve(返回值)
- 返回一个thenable对象则由，then方法中的resolve,或者reject有关
- 明确返回一个promise，则由这个promise决定
6. 异步函数中可以使用await关键字，普通函数不行
- await特点
- 通常await关键字后面都是跟一个Promise
- 可以是普通值
- 可以是thenable
- 可以是Promise主动调用resolve或者reject
展开
评论
点赞
#青训营笔记创作活动#
1月10日 打卡day3
今日学习：Monorepo
1. 相比于MultiRepo技术每个项目对应一个单独的仓库来分散管理，Monorepo把多个项目放在一个仓库里面。
2. MultiRepo在代码复用，版本管理我，项目基建多方面弊病明显，而Monorepo很好的解决了这些问题。
1月10日 打卡day3
今日学习：Monorepo
1. 相比于MultiRepo技术每个项目对应一个单独的仓库来分散管理，Monorepo把多个项目放在一个仓库里面。
2. MultiRepo在代码复用，版本管理我，项目基建多方面弊病明显，而Monorepo很好的解决了这些问题。
展开
评论
点赞
#青训营笔记创作活动#
1月8日 打卡day2
今日学习：前端实用工具与网站
1. Github Desktop：git可视化工具，git命令比较难记，用可视化工具会好很多
2. 图片在线压缩：tinypng 完全免费并且高压缩率的在线压缩图片网站 如果需要压缩大于5M的图片，可以用 squoosh 支持大图片压缩和图片压缩质量自定义
3. 在线代码编辑：codePen、CodeSandbox和掘金的码上掘金
4. JSON格式化：Json.cn网站 还有好用的前端工具类smalldev
5. 代码生成图片：carbon可以生成炫酷的代码片段，并且支持导出图片，也可使用ray.so
6. 表情符号：EMOJIALL网站 ，有很多颜文字且可直接cv
7. 矢量图标-iconfont：阿里字体库
8. CSS3动画：css3-animation包含一些常见动画，包含可cv片段代码
9. 封面模板-canva：canva有很多免费素材和模板
10. 高清图片-UnSplash：很多4K高清图片免费下载
11. 在线画图： 画一些流程图或者思维导图，boardmix和ProcessOn都不错
12. 快速部署建站：部署网站除了购买服务器，还有免费的部署网站surge等
13. 在线性能评测：pagespeed网站会给我们的网站评分以找出可优化项
14. 多平台测试：responsively软件支持主流手机、PAD、电脑设备访问您的网站，并可以导出
15. Chrome扩展组件：极简插件可以不翻墙直接下载Google扩展程序
16. 在线简历：简历模板网站：五百丁简历（收费）
1月8日 打卡day2
今日学习：前端实用工具与网站
1. Github Desktop：git可视化工具，git命令比较难记，用可视化工具会好很多
2. 图片在线压缩：tinypng 完全免费并且高压缩率的在线压缩图片网站 如果需要压缩大于5M的图片，可以用 squoosh 支持大图片压缩和图片压缩质量自定义
3. 在线代码编辑：codePen、CodeSandbox和掘金的码上掘金
4. JSON格式化：Json.cn网站 还有好用的前端工具类smalldev
5. 代码生成图片：carbon可以生成炫酷的代码片段，并且支持导出图片，也可使用ray.so
6. 表情符号：EMOJIALL网站 ，有很多颜文字且可直接cv
7. 矢量图标-iconfont：阿里字体库
8. CSS3动画：css3-animation包含一些常见动画，包含可cv片段代码
9. 封面模板-canva：canva有很多免费素材和模板
10. 高清图片-UnSplash：很多4K高清图片免费下载
11. 在线画图： 画一些流程图或者思维导图，boardmix和ProcessOn都不错
12. 快速部署建站：部署网站除了购买服务器，还有免费的部署网站surge等
13. 在线性能评测：pagespeed网站会给我们的网站评分以找出可优化项
14. 多平台测试：responsively软件支持主流手机、PAD、电脑设备访问您的网站，并可以导出
15. Chrome扩展组件：极简插件可以不翻墙直接下载Google扩展程序
16. 在线简历：简历模板网站：五百丁简历（收费）
展开
评论
点赞
#青训营笔记创作活动#
1月7日 打卡day1
今日学习
1. HTML5 Drag 和 Drop比较简陋，样式不够美观
2. 通过mousedown，mouseup，mousemove判断元素状态，通过克隆元素实现拖拽。
3. 滤镜filter快速实现鼠标覆盖动态效果
4. 伪类激活cursor的grab和grabbing设置抓取动作图标
5. 通过改变克隆元素top和left值实现拖拽
6. transition动态过渡
7. 距离公式判断放大倍率
8. Image缓存图片方法处理加载问题
1月7日 打卡day1
今日学习
1. HTML5 Drag 和 Drop比较简陋，样式不够美观
2. 通过mousedown，mouseup，mousemove判断元素状态，通过克隆元素实现拖拽。
3. 滤镜filter快速实现鼠标覆盖动态效果
4. 伪类激活cursor的grab和grabbing设置抓取动作图标
5. 通过改变克隆元素top和left值实现拖拽
6. transition动态过渡
7. 距离公式判断放大倍率
8. Image缓存图片方法处理加载问题
展开
评论
1