金金金禾呈
学生
获得徽章 2
#青训营笔记创作活动#
1月31日 day15
可以在 renderWithHooks 里调用函数组件的地方打个条件断点，在调用想调试的组件时断住，这样我们就可以 step into 到该组件定义的地方。
但是这样调试的并不是最初的源码，没有 jsx 和 ts 语法。
1月31日 day15
可以在 renderWithHooks 里调用函数组件的地方打个条件断点，在调用想调试的组件时断住，这样我们就可以 step into 到该组件定义的地方。
但是这样调试的并不是最初的源码，没有 jsx 和 ts 语法。
展开
评论
点赞
赞了这篇文章
#青训营笔记创作活动#
1月30日 day14
fabric.js的功能很强大，可以很轻松的开发出一个简版的图片编辑器，自定义素材、模板、字体文件；还可以结合数据接口拼接模板生成图片，很轻松的实现定制模板 + 生成图片的功能。
1月30日 day14
fabric.js的功能很强大，可以很轻松的开发出一个简版的图片编辑器，自定义素材、模板、字体文件；还可以结合数据接口拼接模板生成图片，很轻松的实现定制模板 + 生成图片的功能。
评论
点赞
#青训营笔记创作活动#
1月29日 day13
1.函数节流是一个非常常见的优化方式，可以有效避免函数过于频繁的执行
2. CSS 的实现思路和 JS 不同，重点在于在于找到和该场景相关联的属性
3. CSS 实现“节流”其实就是控制一个动画的精准控制，假设有一个动画控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，这样就达到了“节流”的效果
4.还可以通过 transition 的回调函数动态设置按钮禁用态
5.这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的
1月29日 day13
1.函数节流是一个非常常见的优化方式，可以有效避免函数过于频繁的执行
2. CSS 的实现思路和 JS 不同，重点在于在于找到和该场景相关联的属性
3. CSS 实现“节流”其实就是控制一个动画的精准控制，假设有一个动画控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，这样就达到了“节流”的效果
4.还可以通过 transition 的回调函数动态设置按钮禁用态
5.这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的
展开
评论
点赞
#青训营笔记创作活动#
1月28日 day12
防止沙箱逃逸是一件挺有趣的事情，就像双方在下棋一样，你来我往，有攻有守设计一个不能操作DOM和调接口的环境 ：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
1月28日 day12
防止沙箱逃逸是一件挺有趣的事情，就像双方在下棋一样，你来我往，有攻有守设计一个不能操作DOM和调接口的环境 ：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
展开
评论
点赞
赞了这篇文章
#青训营笔记创作活动#
1月26日 day11
rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素（html/body）的字体设置为10px,方便于我们计算（此时子元素的1rem就相当于10px）。
1月26日 day11
rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素（html/body）的字体设置为10px,方便于我们计算（此时子元素的1rem就相当于10px）。
评论
点赞
#青训营笔记创作活动#
1月25日 day10
position 属性新增了一个属性值 sticky，可以满足标题在滚动的时候吸顶的需求；empty 选择器；gap更方便布局；background-clip: text可以做剪切蒙版的效果；user-select可以 禁用光标选中，让网页看着和移动端一样；invalid 伪类可以不用 JS 也能实现校验提示的效果了；focus-within 伪类可以根据子元素的状态来改变父元素的样式；mix-blend-mode:difference可以将元素的内容应该与元素的直系父元素的内容和元素的背景如何混合，制作炫酷图标。
1月25日 day10
position 属性新增了一个属性值 sticky，可以满足标题在滚动的时候吸顶的需求；empty 选择器；gap更方便布局；background-clip: text可以做剪切蒙版的效果；user-select可以 禁用光标选中，让网页看着和移动端一样；invalid 伪类可以不用 JS 也能实现校验提示的效果了；focus-within 伪类可以根据子元素的状态来改变父元素的样式；mix-blend-mode:difference可以将元素的内容应该与元素的直系父元素的内容和元素的背景如何混合，制作炫酷图标。
展开
评论
点赞
赞了这篇文章
#青训营笔记创作活动#
1月24日 day9
TinyPNG使用智能的「有损压缩技术」来减少WEBP、JPEG和PNG文件的文件大小。通过选择性地减少图像中的「颜色数量」，使用更少的字节来存储数据。这种效果几乎是看不见的，但在文件大小上有非常大的差别。
不过用webp格式是更优解。
1月24日 day9
TinyPNG使用智能的「有损压缩技术」来减少WEBP、JPEG和PNG文件的文件大小。通过选择性地减少图像中的「颜色数量」，使用更少的字节来存储数据。这种效果几乎是看不见的，但在文件大小上有非常大的差别。
不过用webp格式是更优解。
展开
评论
点赞
赞了这篇文章
#青训营笔记创作活动#
1月23日 day8
Esbuild 是由 Figma 的 CTO 「Evan Wallace」基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以快 10~100 倍。
总体来说呢，菜鸡我就看出以后用这个作为打包工具就好。
1月23日 day8
Esbuild 是由 Figma 的 CTO 「Evan Wallace」基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以快 10~100 倍。
总体来说呢，菜鸡我就看出以后用这个作为打包工具就好。
展开
评论
点赞
赞了这篇文章
#青训营笔记创作活动#
1月22日 day7
不明觉厉的内容，WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。
1月22日 day7
不明觉厉的内容，WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。
展开
评论
点赞
赞了这篇文章
#青训营笔记创作活动#
1月21日 day6
抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作
抓包工具有 whistle
HTTP抓包思路就是设置一个中间人进程负责抓包，每次目标进程之间的会话都先与中间人进程通信，再进行转发
1月21日 day6
抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作
抓包工具有 whistle
HTTP抓包思路就是设置一个中间人进程负责抓包，每次目标进程之间的会话都先与中间人进程通信，再进行转发
展开
评论
点赞