获得徽章 10
- #青训营笔记创作活动#
1月20日 day8
今日学习了什么是esbuild打包和实践，架构优势，插件机制虚拟模块支持，落地场景等评论点赞 - #青训营笔记创作活动#
1月19日 打卡day7
今日阅读的这篇文章主要介绍了 什么是webRTC，应用场景，媒体流概念，以及摄像头获取媒体流，屏幕分享，视频虚拟背景几个方向的实现思路！评论点赞 - #青训营笔记创作活动#
1月18日 打卡day6
今天阅读的这篇文章，主要介绍了抓包原理，怎么抓包，怎么使用whistle进行抓包，非常详细。让我了解了什么是抓包，抓包应用的场景有哪些。评论点赞 - #青训营笔记创作活动#
1月17日 打卡day5
距离下次生日还有多少天
* 思路：
* 首先，分别获取当前时间的时间戳和(今年生日的)目标时间戳
* 其次，判断两个时间戳那个大一些
* 如果当前时间的时间戳大(今年的生日已经过了)
* 将年份 + 1，再减去当前时间的时间戳
* 如果目标时间戳大(今年的生日还没有过)
* 用目标时间戳 - 当前时间时间戳
* 最后将两个时间戳的差值(毫秒)转化为天即可
moment.js的包体积达到了两百多，且已经停止开发了
dayjs的包体积才2kb
[来自](
zhuanlan.zhihu.com)
[官方原文](momentjs.com) 展开评论点赞 - #青训营笔记创作活动#
1月16日 打卡day4
今天看见这篇文章，简直yyds，文章写的promise写的很详细，笔记挺多的这里就不贴了![[可怜]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_5.ece2a96.png)
评论点赞 - #青训营笔记创作活动#
1月15日 打卡day3
Monorepo
某些业务或者工具库通常涉及到很多个仓库，那么时间一长，多个仓库开发弊端日益显露，由此出现了一种新的项目管理方式——Monorepo
概念
Monorepo(新型):把多个项目放在一个仓库里面
MultiRepo(传统):每个项目对应一个单独的仓库来分散管理
一般Monorepo的目录：
├── packages
| ├── pkg1
| | ├── package.json
| ├── pkg2
| | ├── package.json
├── package.json
传统方式的弊端
每个项目都对应单独的一个代码仓库
维护成本高，开发调试的流程繁琐 1.如果代码直接copy，那么如果出现bug，就必须修改多份
2.如果作为npm包进行发布，一旦需要改动代码，(比如引入1.1.0版本的A包，某个地方需要改动)就需要重新走一遍下面的流程
去修改一个工具函数的代码
发布1.1.1版本的新包
项目中安装新版本的 A
版本管理 当项目多了之后，很容易出现依赖更新不及时导致一些报错的情况
项目基建 在 MultiRepo 当中，由于各个项目的工作流是割裂的，因此每个项目需要单独配置开发环境、配置 CI 流程、配置部署发布流程等等，甚至每个项目都有自己单独的一套脚手架工具 其实，很容易发现这些项目里的很多基建的逻辑都是重复的，如果是 10 个项目，就需要维护 10 份基建的流程，逻辑重复不说，各个项目间存在构建、部署和发布的规范不能统一的情况，这样维护起来就更加麻烦
Monorepo 的优势
工作流的一致性 由于所有的项目放在一个仓库当中，复用起来非常方便，如果有依赖的代码变动，那么用到这个依赖的项目当中会立马感知到。并且所有的项目都是使用最新的代码，不会产生其它项目版本更新不及时的情况展开评论点赞 - #青训营笔记创作活动#
1月14日 打卡day2
前端必备实用工具和网站
1.GitHub Desktop
git可视化工具
2.图片在线压缩
tinypng是一个免费并且高压缩率的在线压缩图片网站 如果大于5M即使用squoosh，支持大图片压缩和图片压缩质量自定义
3.在线代码编辑
codePen codeSandBox 码上掘金
4.JSON格式化
Json.cn 前端工具类集合的网站
5.代码生成图片
carbon ray.so
6.表情符号
emojiall
7.矢量图标-iconfont
阿里巴巴字体图标
8.css3动画
css3-animation
9.封面模版-canva
canva
10.高清图片-UnSplash
4K高清图片
11.在线画图
boardmix
processon
12.快速部署建站
surge：免费服务器
13.在线性能评测
pagespeed
14.多平台测试
responsively支持主流手机、PAD、电脑设备访问您的网站，并可以导出
15.Chrome扩展组件
极简插件 可以不翻墙直接下载Google扩展程序
16.在线简历
500丁：永久会员39.9展开评论点赞 - #青训营笔记创作活动#
1月13日 打开day1
今日收获：
老实说，这篇文章我看了三遍以上，第一遍只是粗略的看了一下，感觉写起来应该挺简单的，并且我觉得这个还可以搞拼图。第二遍的时候我细看了一下文本内容，感觉作者思路太清晰了，一个点一个点的带去进去，由浅到深。第三遍的时候我开始上手代码，复制粘贴代码，然后慢慢阅读，越看感觉自己的知识点还有好多不会。
总结收获：
不用说实现思路就是很大的收获
CSS：
cursor grab(抓取光标)、grabbing(正在抓取中光标)
pointer-events: none; 元素永远不会成为鼠标事件的target，但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器
filter: brightness(90%); 调节明亮度实现鼠标覆盖的动态效果
transform-origin: top left; 允许改变被转换元素的位置
break-inside: avoid; 指定元素内部是否应发生分页(page-break)、分列(column-break)或分区(region-break) avoid：避免在元素内出现页、列、区域中断
JS：
cloneNode(true) (深)克隆元素(该节点的所有后代节点也都会被克隆)
getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置 DOMRect：一个 DOMRect 代表一个矩形
cssText CSS Text 是一个控制文本渲染方式的 CSS 模块，例如换行、对齐、空格处理、大小写
Math.hypot() 返回所有参数的平方和的平方根
Image 创建一个新的HTMLImageElement实例 功能等价于 document.createElement('img')
展开评论点赞
zhuanlan.zhihu.com![[可怜]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_5.ece2a96.png)