XavierShaw
Bug Snipper
获得徽章 1
#青训营笔记创作活动#
1月30日 打卡day11
今日学习 fabric.js开发图片编辑器
架构要点：
在入口文件中初始化实例，然后与mixins结合，在mixins中定义选择类型并在子组件中引入mixins来开发对应功能。
fabric.js可以轻松开发出一个简版的图片编辑器，自定义素材，模板，字体文件等，也可以结合数据接口拼接模板生成图片。
1月30日 打卡day11
今日学习 fabric.js开发图片编辑器
架构要点：
在入口文件中初始化实例，然后与mixins结合，在mixins中定义选择类型并在子组件中引入mixins来开发对应功能。
fabric.js可以轻松开发出一个简版的图片编辑器，自定义素材，模板，字体文件等，也可以结合数据接口拼接模板生成图片。
展开
评论
点赞
#青训营笔记创作活动#
1月29日 打卡day10
今日学习 CSS防止按钮重复点击
函数节流(throttle)是JS中常见的优化手段，能有效避免函数过于频繁的执行。
e.g. btn.addEventListener('click', _.throttle(save,300)
CSS实现思路
通过animation, pointer-events来实现
1月29日 打卡day10
今日学习 CSS防止按钮重复点击
函数节流(throttle)是JS中常见的优化手段，能有效避免函数过于频繁的执行。
e.g. btn.addEventListener('click', _.throttle(save,300)
CSS实现思路
通过animation, pointer-events来实现
展开
评论
点赞
#青训营笔记创作活动#
1月28日 打卡day9
今日学习 惊艳的CSS属性
1. position: sticky
组件保持吸附在顶部
2. :empty 选择器
选择内容为空的容器
e.g. .container:empty::after { content: 'no data'}
3. background-clip: text
用来做带背景的文字效果
4. user-select
可以通过这个属性禁用光标选中
5. :invalid
用invalid伪类来选择未通过校验的元素
6. :focus -within
当子代被选中的时候，父代也会匹配上
可以通过子元素的状态改变父元素的样式
1月28日 打卡day9
今日学习 惊艳的CSS属性
1. position: sticky
组件保持吸附在顶部
2. :empty 选择器
选择内容为空的容器
e.g. .container:empty::after { content: 'no data'}
3. background-clip: text
用来做带背景的文字效果
4. user-select
可以通过这个属性禁用光标选中
5. :invalid
用invalid伪类来选择未通过校验的元素
6. :focus -within
当子代被选中的时候，父代也会匹配上
可以通过子元素的状态改变父元素的样式
展开
评论
点赞
#青训营笔记创作活动#
1月26日 打卡day8
今日学习 图片压缩
通常我们使用PS等工具导出的图片体积都比较大，这就给了我们优化的空间。
TinyPng使用智能的有损压缩技术来减少webp, jpeg, png文件的文件大小。通过选择性地减少图像中的颜色数量，使用更少的字节来存储数据。
1月26日 打卡day8
今日学习 图片压缩
通常我们使用PS等工具导出的图片体积都比较大，这就给了我们优化的空间。
TinyPng使用智能的有损压缩技术来减少webp, jpeg, png文件的文件大小。通过选择性地减少图像中的颜色数量，使用更少的字节来存储数据。
展开
评论
点赞
#青训营笔记创作活动#
1月25日 打卡day7
今日学习 Esbuild
Esbuild是基于Golang开发的一款打包工具，主打性能优势。
架构优势：
1. Golang开发
2. 多核并行
3. 高效利用内存
1月25日 打卡day7
今日学习 Esbuild
Esbuild是基于Golang开发的一款打包工具，主打性能优势。
架构优势：
1. Golang开发
2. 多核并行
3. 高效利用内存
展开
评论
点赞
#青训营笔记创作活动#
1月24日 打卡day6
今日学习 WebRTC
WebRTC: Web Real-Time Communication
它是一项实时通讯技术，允许网络应用或站点，在不借助中间媒介的情况下，建立浏览器之间点对点的连接，实现视频流/音频流/数据的传输。
应用场景：直播，游戏，视频会议，远程控制等
通过摄像头/麦克风/屏幕共享等方式获取到媒体流，然后通过WebRTC技术将媒体流传输到远端实现实时通讯。
1月24日 打卡day6
今日学习 WebRTC
WebRTC: Web Real-Time Communication
它是一项实时通讯技术，允许网络应用或站点，在不借助中间媒介的情况下，建立浏览器之间点对点的连接，实现视频流/音频流/数据的传输。
应用场景：直播，游戏，视频会议，远程控制等
通过摄像头/麦克风/屏幕共享等方式获取到媒体流，然后通过WebRTC技术将媒体流传输到远端实现实时通讯。
展开
评论
1
#青训营笔记创作活动#
1月23日 打卡day5
今日学习 前端人必须掌握的抓包技能
抓包是将网络传输发送与接收的数据包进行截获，重发，编辑，转存等操作。
作为前端开发者，通常是抓取应用层的HTTP/HTTPS的包。
通常使用基于Node实现的跨平台抓包调试工具Whistle进行抓包。
1月23日 打卡day5
今日学习 前端人必须掌握的抓包技能
抓包是将网络传输发送与接收的数据包进行截获，重发，编辑，转存等操作。
作为前端开发者，通常是抓取应用层的HTTP/HTTPS的包。
通常使用基于Node实现的跨平台抓包调试工具Whistle进行抓包。
展开
评论
1
#青训营笔记创作活动#
1月21日 打卡day4
今日学习 前端应该掌握的调试技巧
console的功能：
1. log 输出信息 当多个变量需要输出时，可以加个中括号
2. warn 输出不规范/不合理代码的提示
3. error 输出代码错误和异常的提示
4. assert 判断条件是否成立
5. dir 输出DOM节点对应的js映射
断点：
1. 在代码里写debugger制造断点
2. 右键添加条件断点
1月21日 打卡day4
今日学习 前端应该掌握的调试技巧
console的功能：
1. log 输出信息 当多个变量需要输出时，可以加个中括号
2. warn 输出不规范/不合理代码的提示
3. error 输出代码错误和异常的提示
4. assert 判断条件是否成立
5. dir 输出DOM节点对应的js映射
断点：
1. 在代码里写debugger制造断点
2. 右键添加条件断点
展开
评论
1
#青训营笔记创作活动#
1月19日 打卡day3
今日学习 promise / async await
JS是单线程的，耗时操作全部由浏览器处理。
代码执行顺序并非书写顺序，异步操作不会阻塞代码执行。
Promise: new时传入回调函数resolve和reject,兑现promise执行resolve(状态为fulfilled)，拒绝promise执行reject(状态为rejected)，等待状态为pending。
resolve中传入参数为promise，则新promise决定原promise状态；resolve中传入参数为对象且有then方法，那么会执行对象的then方法（thenable）
then的第一个参数为成功的回调函数，第二个(可选)为失败的回调函数。
finally方法，类似于try/catch的finally。
async 声明异步函数
异步函数要有明确的返回值（普通值/promise/thenable对象）
异步函数可以用await关键字
通常await后面跟promise，当promise状态为fulfilled后才会执行await后面的代码。
1月19日 打卡day3
今日学习 promise / async await
JS是单线程的，耗时操作全部由浏览器处理。
代码执行顺序并非书写顺序，异步操作不会阻塞代码执行。
Promise: new时传入回调函数resolve和reject,兑现promise执行resolve(状态为fulfilled)，拒绝promise执行reject(状态为rejected)，等待状态为pending。
resolve中传入参数为promise，则新promise决定原promise状态；resolve中传入参数为对象且有then方法，那么会执行对象的then方法（thenable）
then的第一个参数为成功的回调函数，第二个(可选)为失败的回调函数。
finally方法，类似于try/catch的finally。
async 声明异步函数
异步函数要有明确的返回值（普通值/promise/thenable对象）
异步函数可以用await关键字
通常await后面跟promise，当promise状态为fulfilled后才会执行await后面的代码。
展开
评论
1
#青训营笔记创作活动#
1月18日 打卡day2
今日学习 现代前端工程的项目管理方式
传统的MultiRepo模式 - 每个项目一个单独的仓库
MonoRepo - 多个项目放在一个仓库
packages存放多个子项目，每个子项目有自己的package.json
优点：
1. 代码复用 - 工作流一致
2. 版本管理 - 版本同步
3. 项目基建 - 成本降低
1月18日 打卡day2
今日学习 现代前端工程的项目管理方式
传统的MultiRepo模式 - 每个项目一个单独的仓库
MonoRepo - 多个项目放在一个仓库
packages存放多个子项目，每个子项目有自己的package.json
优点：
1. 代码复用 - 工作流一致
2. 版本管理 - 版本同步
3. 项目基建 - 成本降低
展开
评论
1
#青训营笔记创作活动#
1月17日 打卡day1
今日学习 [JS的元素拖拽]
1. 在hover中设置filter: brightness(90%）实现鼠标覆盖效果，无需额外制作遮罩；利用cursor:grab/grabbing实现抓取效果
2. 抓取前克隆元素，用绝对定位计算位置，隐藏原元素并用transition动画效果使过程流畅
3. 用transform: scale实现拖拽放大
1月17日 打卡day1
今日学习 [JS的元素拖拽]
1. 在hover中设置filter: brightness(90%）实现鼠标覆盖效果，无需额外制作遮罩；利用cursor:grab/grabbing实现抓取效果
2. 抓取前克隆元素，用绝对定位计算位置，隐藏原元素并用transition动画效果使过程流畅
3. 用transform: scale实现拖拽放大
展开
评论
1