Zora178
获得徽章 1
提交远程仓库git push <远程主机名> <本地分支名>:<远程分支名>
查看分支git branch
忽略文件 .gitignore不需要纳入Git管理
查看分支git branch
忽略文件 .gitignore不需要纳入Git管理
评论
点赞
阅读打卡day13
1、导航是加载网页的第一步，域名系统（DNS）查询，TCP 三次握手SYN、SYN-ACK、ACK，TLS协商（加密）
2、获取资源，http请求、响应，TCP 慢启动和拥塞算法，解析HTML（词法分析 和 树构造），预加载器，解析css（词法分析和构建 CSSOM），执行 Javascript，创建可访问（无障碍）树，渲染树
1、导航是加载网页的第一步，域名系统（DNS）查询，TCP 三次握手SYN、SYN-ACK、ACK，TLS协商（加密）
2、获取资源，http请求、响应，TCP 慢启动和拥塞算法，解析HTML（词法分析 和 树构造），预加载器，解析css（词法分析和构建 CSSOM），执行 Javascript，创建可访问（无障碍）树，渲染树
展开
评论
点赞
阅读打卡day11
鼠标位置获取
通过background定义两个背景色，默认的显示部分background-size是100%，渐变部分的background-size是0，待hover时设置为100%，这时就会显示渐变背景色内容
按钮的文字阴影变化
鼠标位置获取
通过background定义两个背景色，默认的显示部分background-size是100%，渐变部分的background-size是0，待hover时设置为100%，这时就会显示渐变背景色内容
按钮的文字阴影变化
评论
点赞
阅读打卡day10
可读性
Javascript 的逻辑或 || 的短路运算有时候可以用来代替一些比较简单的 if else
一层 三元运算符
switch case
对象配置
可读性
Javascript 的逻辑或 || 的短路运算有时候可以用来代替一些比较简单的 if else
一层 三元运算符
switch case
对象配置
展开
评论
点赞
阅读打卡day9
pnpm由npm和yarn衍生出来
速度快，节约磁盘空间，支持monorepo
pnpm由npm和yarn衍生出来
速度快，节约磁盘空间，支持monorepo
评论
点赞
阅读打卡day8
函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。
使用css实现节流
1、可以禁用事件，是pointer-events
2、时间的限制，每次点击后需要自动禁用300ms，时间过后重新恢复，使用animation
3、点击行为，所以必然和伪类:active有关联
函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。
使用css实现节流
1、可以禁用事件，是pointer-events
2、时间的限制，每次点击后需要自动禁用300ms，时间过后重新恢复，使用animation
3、点击行为，所以必然和伪类:active有关联
展开
评论
点赞
阅读打卡day7
WebRTC 是浏览器之间点对点（Peer-to-Peer）的连接
通过摄像头，麦克风，屏幕共享等方式获取到媒体流，然后通过 WebRTC 技术将媒体流传输到远端实现实时通讯
WebRTC 只能在 HTTPS 协议或者 localhost 下使用，如果是 HTTP 协议，会报错。
主要通过navigator.mediaDevices.getUserMedia(constraints)这个 api 来获取媒体流，参数是配置对象的信息
constraints参数中具体支持哪些配置项，可以通过navigator.mediaDevices.getSupportedConstraints()这个方法来获取
将媒体流赋值给 video 标签的 srcObject 属性，让其播放。
实现拍照功能，canvas 标签可以将媒体流绘制到 canvas 上，也可以通过 toDataURL 方法将 canvas 转换为 base64 图片后做一些其他操作。
最终生成的 imgUrl 给到 img 标签让其展示就行了。
WebRTC 是浏览器之间点对点（Peer-to-Peer）的连接
通过摄像头，麦克风，屏幕共享等方式获取到媒体流，然后通过 WebRTC 技术将媒体流传输到远端实现实时通讯
WebRTC 只能在 HTTPS 协议或者 localhost 下使用，如果是 HTTP 协议，会报错。
主要通过navigator.mediaDevices.getUserMedia(constraints)这个 api 来获取媒体流，参数是配置对象的信息
constraints参数中具体支持哪些配置项，可以通过navigator.mediaDevices.getSupportedConstraints()这个方法来获取
将媒体流赋值给 video 标签的 srcObject 属性，让其播放。
实现拍照功能，canvas 标签可以将媒体流绘制到 canvas 上，也可以通过 toDataURL 方法将 canvas 转换为 base64 图片后做一些其他操作。
最终生成的 imgUrl 给到 img 标签让其展示就行了。
展开
评论
点赞
阅读打卡day6
background-clip 文字覆盖图片
background-clip:text 文字覆盖图片，底部图片消失
color: transparent 文字透明，底图出现，仅文字部分
.bg渐变 加上一个上下移动的动画
混合模式 mix-blend-mode 使文字出现
原动画的实现是结合页面的滚动实现的
@scroll-timeline 设定一个动画的开始和结束由滚动容器内的滚动进度决定（不推荐）
gsap.timeline 结合滚动容器，触发动画
background-clip 文字覆盖图片
background-clip:text 文字覆盖图片，底部图片消失
color: transparent 文字透明，底图出现，仅文字部分
.bg渐变 加上一个上下移动的动画
混合模式 mix-blend-mode 使文字出现
原动画的实现是结合页面的滚动实现的
@scroll-timeline 设定一个动画的开始和结束由滚动容器内的滚动进度决定（不推荐）
gsap.timeline 结合滚动容器，触发动画
展开
评论
点赞
阅读打卡day5
fast-poster是一款使用Python+Vue开发的通用海报生成器，可以用来快速的生成海报。使用时知需要经过三步即可生成所需要的海报：启动服务 > 编辑海报 > 生成代码。项目链接：gitee.com/vitojc/fast…
fast-poster是一款使用Python+Vue开发的通用海报生成器，可以用来快速的生成海报。使用时知需要经过三步即可生成所需要的海报：启动服务 > 编辑海报 > 生成代码。项目链接：gitee.com/vitojc/fast…
评论
点赞
阅读打卡day4
console.log（{a，b，c}） 控制台输出多个变量
console.warn
console.error
console.time和console.timeEnd计算代码段的执行时间，有助于性能调试和判断
console.assert判断空值或者false逻辑
console.dir输出DOM节点对应的js对象映射
console.table数组或类数组或对象打印成表格
console.$i在 devtool 开发者工具直接使用npm包，需要扩展程序Console Importer作为辅助工具
以时间处理插件dayjs作为示例，在控制台输入congsole.$i('dayjs')即可安装dayjsnpm包，可以使用其相应功能。
直接断点：在Sources源代码面板，点击对应的行数
代码断点：写debugger就能实现断点
快捷键ctrl+p弹出文件搜索弹窗，输入英文冒号:，继续输入想要跳转的行数，
行数右键点击，选择Add conditional breakpoint...，输入对应的逻辑判断
console.log（{a，b，c}） 控制台输出多个变量
console.warn
console.error
console.time和console.timeEnd计算代码段的执行时间，有助于性能调试和判断
console.assert判断空值或者false逻辑
console.dir输出DOM节点对应的js对象映射
console.table数组或类数组或对象打印成表格
console.$i在 devtool 开发者工具直接使用npm包，需要扩展程序Console Importer作为辅助工具
以时间处理插件dayjs作为示例，在控制台输入congsole.$i('dayjs')即可安装dayjsnpm包，可以使用其相应功能。
直接断点：在Sources源代码面板，点击对应的行数
代码断点：写debugger就能实现断点
快捷键ctrl+p弹出文件搜索弹窗，输入英文冒号:，继续输入想要跳转的行数，
行数右键点击，选择Add conditional breakpoint...，输入对应的逻辑判断
展开
评论
点赞
阅读打卡day3
TinyPng的图片压缩效果很好
可以在官网压缩或者使用tinify在发布前压缩
先使用命令行工具，选择需要压缩的图片，webpack plugin在打包生产环境代码时对图片处理
可以使用插件pw-super-tinypng
TinyPng的图片压缩效果很好
可以在官网压缩或者使用tinify在发布前压缩
先使用命令行工具，选择需要压缩的图片，webpack plugin在打包生产环境代码时对图片处理
可以使用插件pw-super-tinypng
评论
点赞