Eternal_biu
获得徽章 1
- #青训营笔记创作活动#
1月28日 打卡day9
今日学习
1.TinyPng
TinyPNG使用智能的「有损压缩技术」来减少WEBP、JPEG和PNG文件的文件大小。通过选择性地减少图像中的「颜色数量」，使用更少的字节来存储数据。压缩方法：手动压缩和官方提供的tinify进行压缩
2.实现思路
总体分为五个过程
查找：找出所有的图片资源；
分配：均分任务到每个进程；
上传：把原图上传到TinyPng；
下载：从TinyPng中下载压缩好的图片；
写入：用下载的图片覆盖本地图片；展开评论点赞 - #青训营笔记创作活动#
1月23日 打卡day8
今日学习
Esbuild ：由 Figma 的 CTO 「Evan Wallace」基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以快 10~100 倍。
架构优势：1. Golang 开发 2. 多核并行3. 从零造轮子 4. 高效利用内存
限制：没有 TS 类型检查；不能操作 AST；不支持装饰器语法；产物 target 无法降级到 ES5 及以下
使用场景：1. 代码压缩工具：Vite 2.6 可以直接使用 Esbuild 来压缩 JS 和 CSS 代码。2. 代替 ts-node 3. 代替 ts-jest 4.小程序的场景，可以使用 Esbuild 来代替 Webpack，大大提升编译速度
展开评论点赞 - #青训营笔记创作活动#
1月20日 打卡day7
今日学习
WebRTC 的应用场景
直播
游戏
视频会议/在线教育
屏幕共享/远程控制
使用：1.WebRTC 只能在 HTTPS 协议或者 localhost 下使用，如果是 HTTP 协议，会报错。
2.通过navigator.mediaDevices.getUserMedia(constraints)这个 api 来获取媒体流
3.constraints指定了请求的媒体类型和相对应的参数，用于配置视频流和音频流的信息
4.将媒体流赋值给 video 标签的 srcObject 属性，让其播放
5.实现拍照功能，canvas 标签可以将媒体流绘制到 canvas 上，也可以通过 toDataURL 方法将 canvas 转换为 base64 图片后做一些其他操作展开评论点赞 - #青训营笔记创作活动#
1月19日 打卡day6
今日学习
抓包：将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作
可以实现：探测由内部和外部的用户滥用网络资源
探测网络入侵后的影响
监测链接互联网宽频流量
监测网络使用流量（包括内部用户，外部用户和系统）
监测互联网和用户电脑的安全状态
原理：在 http 标准中，没有对通信端身份验证的标准。对于服务器来说，它接收的 HTTP 请求报文只要格式符合规范，就发送响应报文。对于 HTTP 抓包，无需做过多的处理，只需要让中间人负责转发客户端和服务端的数据包。
工具：whistle展开评论点赞 - #青训营笔记创作活动#
1月18日 打卡Day5
今日学习
1.回到顶部
用behavior: 'smooth'比定时器更简单粗暴
2.防抖/节流
防抖：指定时间内 频繁触发一个事件，以最后一次触发为准
节流：指定时间内 频繁触发一个事件，只会触发一次
3.借助isArray 方法检测是否为一个安全数组
4.检测对象是否为一个安全对象
// 首先要去判断 当前对象是否为有效对象
const isVaildObject = (obj) => {
return typeof obj === 'object' && !Array.isArray(obj) && Object.keys(obj).length
}
// 这里直接用上面的函数 如果有效就返回本身，无效就返回空对象
const safeObject = obj => isVaildObject(obj) ? obj : {}展开评论点赞 - #青训营笔记创作活动#
1月16日 打卡Day3
今日学习
Monorepo对立的是传统的 MultiRepo 模式，即每个项目对应一个单独的仓库来分散管理。痛点：1.代码复用 2.版本管理 3.项目基建 优点：1.工作流的一致性，由于所有的项目放在一个仓库当中，复用起来非常方便，如果有依赖的代码变动，那么用到这个依赖的项目当中会立马感知到；2.项目基建成本的降低 3.团队协作也更加容易。展开评论点赞 - #青训营笔记创作活动#
1月15日 打卡Day2
今日学习
1.GitHub Desktop git可视化工具
2.tinypng 是一个完全免费并且高压缩率的在线压缩图片网站，一般能满足日常大部分压缩图片的需求，如果你需要压缩大于5M的图片，可以考虑用 squoosh
3.codePen/CodeSandbox/码上掘金，在线代码编译
4.carbon代码生成图片
5.css3-animation 包含了一些常见的动画效果，并且包含片段代码
6.boardmix/ProcessOn，在线画图
7.surge快速部署建站
8.pagespeed在线性能评测网站展开评论点赞 - #青训营笔记创作活动#
1月14日打卡 Day 1
今日学习
通常情况下用HTML5进行元素拖拽样式过于简陋，无法实现更高级的用户体验。将鼠标的坐标设置为克隆元素的绝对定位值(left、top)，此时减去 offset 偏移量，就能让克隆元素覆盖在本体上面。同时我们用 dragging 变量标记了状态(拖动中)，接下来配合移动鼠标的监听事件就能将元素“抓”起来了，然后我们用transition能让元素回退过程有一个自然地动画，最终在动作结束时给克隆元素添加了过渡属性，然后直接设置回初始坐标让克隆元素回到它的出生地点，用定时器在过渡动画持续的相同时间后移除克隆元素，这样就有了一个平滑稳定的回退动画。展开评论点赞