惊弓
获得徽章 0
#青训营笔记创作活动#
2月13日 打卡day8
今日学习：借助 CSS 控制定时器的方法：
1.hover 延时触发:`:hover`配合`transition`延时、`transitionend`监听
2.长按触发事件 `:active`配合`transition`延时、`transitionend`监听
3.轮播和暂停:`infinite`配合`animationiteration`监听
使用CSS定义超链接样式正确的书写顺序：:link—:visited—:hover—:active
2月13日 打卡day8
今日学习：借助 CSS 控制定时器的方法：
1.hover 延时触发:`:hover`配合`transition`延时、`transitionend`监听
2.长按触发事件 `:active`配合`transition`延时、`transitionend`监听
3.轮播和暂停:`infinite`配合`animationiteration`监听
使用CSS定义超链接样式正确的书写顺序：:link—:visited—:hover—:active
展开
评论
点赞
#青训营笔记创作活动#
2月12日 打卡day7
今日学习：CSS 防止按钮重复点击
实现这样一个功能需要用到
禁用事件：pointer-events
状态恢复animation
触发点击行为：伪类:active
从禁用->可点击的变化。每次点击时让这个动画执行一遍，在执行的过程中，一直处于禁用状态。
2月12日 打卡day7
今日学习：CSS 防止按钮重复点击
实现这样一个功能需要用到
禁用事件：pointer-events
状态恢复animation
触发点击行为：伪类:active
从禁用->可点击的变化。每次点击时让这个动画执行一遍，在执行的过程中，一直处于禁用状态。
展开
评论
点赞
#青训营笔记创作活动#
2月11日 打卡day6
今日学习：细数那些惊艳一时的 CSS 属性
`position：sticky`粘性定位：标题在滚动的时候，会一直黏着在最顶上；
`:empty` 选择器:选中内容为空的容器；伪元素：不会增长JS查DOM的负担，对JS是透明的；能够简化页面的html标签
`gap`：设置元素之间的边距；
`background-clip: text`：实现剪切纹理的文字效果；
`user-select`:禁用光标选中；
`:invalid`：表示任意内容未通过验证的 `input` 或其他 `form` 元素；
`:required`：表示任意内容通过验证的 `input` 或其他 `form` 元素；
`:focus-within`：表示一个元素获得焦点，或该元素的后代元素获得焦点，就会匹配上；
`mix-blend-mode:difference`:描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。其中，difference 表示差值。
2月11日 打卡day6
今日学习：细数那些惊艳一时的 CSS 属性
`position：sticky`粘性定位：标题在滚动的时候，会一直黏着在最顶上；
`:empty` 选择器:选中内容为空的容器；伪元素：不会增长JS查DOM的负担，对JS是透明的；能够简化页面的html标签
`gap`：设置元素之间的边距；
`background-clip: text`：实现剪切纹理的文字效果；
`user-select`:禁用光标选中；
`:invalid`：表示任意内容未通过验证的 `input` 或其他 `form` 元素；
`:required`：表示任意内容通过验证的 `input` 或其他 `form` 元素；
`:focus-within`：表示一个元素获得焦点，或该元素的后代元素获得焦点，就会匹配上；
`mix-blend-mode:difference`:描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。其中，difference 表示差值。
展开
评论
点赞
#青训营笔记创作活动#
2月10日 打卡day5
今日学习：
抓包：将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作；通常抓取应用层 HTTP/HTTPS 的包
HTTPS 语义仍然是 HTTP，只不过是在 HTTP 协议栈中 http 与 tcp 之间插入安全层 `SSL/TSL`。安全层采用对称加密的方式加密传输数据和非对称加密的方式来传输对称密钥。HTTP + 加密 + 认证 + 完整性保护 = HTTPS
抓包的原理： HTTP/HTTPS为应用层通信协议（客户端-服务器体系）
在 HTTPS 加密通信之前：1.截取客户端发送的包含证书的报文，伪装成服务端，把自己的证书发给客户端，然后拿到【客户端返回的包含对称加密通信密钥的报文】，生成中间人与客户端对称加密的密钥。
2.同样伪装成客户端，以服务端自己的非对称公钥加密【客户端返回的包含对称加密通信密钥的报文】发给服务端，获得服务端生成的对称加密密钥。
3.这样一来，加密通信建立完成，而中间人拿到了通信的数据密钥，可以查看、修改 HTTPS 的通信报文。
4.这里客户端与中间人通信、中间人与服务端通信，都是正常建立了 HTTPS 加密连接的。
2月10日 打卡day5
今日学习：
抓包：将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作；通常抓取应用层 HTTP/HTTPS 的包
HTTPS 语义仍然是 HTTP，只不过是在 HTTP 协议栈中 http 与 tcp 之间插入安全层 `SSL/TSL`。安全层采用对称加密的方式加密传输数据和非对称加密的方式来传输对称密钥。HTTP + 加密 + 认证 + 完整性保护 = HTTPS
抓包的原理： HTTP/HTTPS为应用层通信协议（客户端-服务器体系）
在 HTTPS 加密通信之前：1.截取客户端发送的包含证书的报文，伪装成服务端，把自己的证书发给客户端，然后拿到【客户端返回的包含对称加密通信密钥的报文】，生成中间人与客户端对称加密的密钥。
2.同样伪装成客户端，以服务端自己的非对称公钥加密【客户端返回的包含对称加密通信密钥的报文】发给服务端，获得服务端生成的对称加密密钥。
3.这样一来，加密通信建立完成，而中间人拿到了通信的数据密钥，可以查看、修改 HTTPS 的通信报文。
4.这里客户端与中间人通信、中间人与服务端通信，都是正常建立了 HTTPS 加密连接的。
展开
评论
点赞
Esbuild：基于 Golang 开发的打包工具，主打性能优势。
架构优势：Golang 开发：多线程打包|直接编译成机器码，节省程序运行时间
多核并行
高效利用内存：从头到尾尽可能复用一份AST（抽象语法树），提高内存利用率 #青训营笔记创作活动#
架构优势：Golang 开发：多线程打包|直接编译成机器码，节省程序运行时间
多核并行
高效利用内存：从头到尾尽可能复用一份AST（抽象语法树），提高内存利用率 #青训营笔记创作活动#
展开
评论
点赞
#青训营笔记创作活动#
2月6日 打卡day2
今日学习：
Monorepo 的概念：将多个项目放在一个仓库里面
在 packages 存放多个子项目，每个子项目都有自己的package.json。
传统的 MultiRepo 模式：每个项目对应一个单独的仓库分散管理。
MultiRepo的弊端：
代码复用效率低，维护成本高；
依赖更新不及时；各个项目间存在构建、部署和发布的规范不能统一的情况；
Monorepo 的收益：
工作流的一致性：由于所有的项目放在一个仓库当中，复用起来非常方便。
项目基建成本的降低：所有项目复用一套标准的工具和规范，无需切换开发环境，如果有新的项目接入，可以直接复用已有的基建流程。
团队协作更加容易：简化了 commit 记录
2月6日 打卡day2
今日学习：
Monorepo 的概念：将多个项目放在一个仓库里面
在 packages 存放多个子项目，每个子项目都有自己的package.json。
传统的 MultiRepo 模式：每个项目对应一个单独的仓库分散管理。
MultiRepo的弊端：
代码复用效率低，维护成本高；
依赖更新不及时；各个项目间存在构建、部署和发布的规范不能统一的情况；
Monorepo 的收益：
工作流的一致性：由于所有的项目放在一个仓库当中，复用起来非常方便。
项目基建成本的降低：所有项目复用一套标准的工具和规范，无需切换开发环境，如果有新的项目接入，可以直接复用已有的基建流程。
团队协作更加容易：简化了 commit 记录
展开
评论
点赞
一些日常工作中比较实用的软件和网站：
GitHub Desktop：git可视化工具
tinypng：免费、高压缩率的在线压缩图片网站
squoosh：支持大图片压缩和图片压缩质量自定义
Json.cn：JSON在线格式化
carbon：代码生成图片
iconfont：矢量图标
css3-animation：包含了一些常见的css3动画效果
canva：封面模板
UnSplash：高清图片
surge：快速部署建站
pagespeed：在线性能评测
responsively：多平台测试
#青训营笔记创作活动#
GitHub Desktop：git可视化工具
tinypng：免费、高压缩率的在线压缩图片网站
squoosh：支持大图片压缩和图片压缩质量自定义
Json.cn：JSON在线格式化
carbon：代码生成图片
iconfont：矢量图标
css3-animation：包含了一些常见的css3动画效果
canva：封面模板
UnSplash：高清图片
surge：快速部署建站
pagespeed：在线性能评测
responsively：多平台测试
#青训营笔记创作活动#
展开
评论
点赞
#青训营笔记创作活动#
2月3日 打卡day1
今日学习内容：使用原生JS实现一个富有动感的自定义拖拽效果。
该效果的核心思想是使用鼠标的三个事件mousedown，mousemove，mouseup 。当mousedown时克隆一个绝对定位的元素，并标识"拖拽中"的状态，接着在 mousemove中就可以判断应该执行的具体方法，实现让元素随鼠标移动。监听事件的event对象中，clientX，clientY标识鼠标当前横纵坐标，offsetX和offsetY表示相对偏移量。在 mousedown时记录初始坐标，在mouseup时判断是否在目标区域中，如果是则用鼠标获取到的当前的偏移量 - 初始坐标得到元素实际在目标区域中的位置。
2月3日 打卡day1
今日学习内容：使用原生JS实现一个富有动感的自定义拖拽效果。
该效果的核心思想是使用鼠标的三个事件mousedown，mousemove，mouseup 。当mousedown时克隆一个绝对定位的元素，并标识"拖拽中"的状态，接着在 mousemove中就可以判断应该执行的具体方法，实现让元素随鼠标移动。监听事件的event对象中，clientX，clientY标识鼠标当前横纵坐标，offsetX和offsetY表示相对偏移量。在 mousedown时记录初始坐标，在mouseup时判断是否在目标区域中，如果是则用鼠标获取到的当前的偏移量 - 初始坐标得到元素实际在目标区域中的位置。
展开
评论
点赞