获得徽章 7
- #青训营笔记创作活动#
2月6日，青训营阅读打卡day8
Clamp(), Max(), 和 Min() 函数
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。展开赞过
评论1 - #青训营笔记创作活动#
2月3日，青训营阅读打卡day7
近几年，在技术领域低代码是比较热门的话题，比如阿里云推出了易搭，通过简单的拖拽、配置，即可完成业务应用的搭建，腾讯云则是推出了微搭，通过行业化模板、拖放式组件和可视化配置快速构建多端应用。低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。这里是几个值得学习和使用的低代码开源项目，可以帮助我们更深入地了解什么是低代码。展开赞过 评论2 - #青训营笔记创作活动#
1月30日，青训营阅读打卡day6
1. position: sticky
在滚动的时候，会一直贴着最顶上。
2. :empty 选择器
通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示。
3. gap
gap 属性它适用于 Grid 布局、Flex 布局以及多列布局，并不一定只是 Grid 布局中可以使用。
要让每个元素之间隔开 XXpx， 那么使用 gap 我们可以这样：
gap: XXpx;
4. background-clip: text
可以做一个带背景的文字效果
5. user-select
user-select 属性可以 禁用光标选中 ，让网页看着和移动端一样。
6. :invalid 伪类
:invalid 表示任意内容未通过验证的 input 或其他 form 元素。
7. :focus-within 伪类
:focus-within 表示一个元素获得焦点，或该元素的后代元素获得焦点，就会匹配上。
8. mix-blend-mode:difference
mix-blend-mode:difference 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。其中，difference 表示差值。展开赞过 评论2 - #青训营笔记创作活动#
1月19日，青训营阅读打卡day5
console.log
console.warn
在控制台输出警告信息，用于代码存在不合理或不符合规范但不影响系统运行的提示
console.error
在控制台输出错误信息，用于代码错误和异常的提示
console.time和console.timeEnd
这两个方法一般是配合使用，用于计算代码段的执行时间，有助于性能调试和判断
console.assert
第一个参数为 false（例如null，undefined，''，0，或者结果为false的逻辑等）的情况下会在控制台输出错误日志，可以减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的。
console.dir
对于DOM节点的打印输出，如果采用console.log，会以标签的形式输出，和直接查看没有太大的差异，有时我们可能想要查看DOM的相关事件和属性，可以采用console.dir，输出DOM节点对应的js对象映射。
console.table
可以将数组（或者是 类数组 的对象，或者就是一个 对象 ）打印成一个表格，
console.$i
以时间处理插件dayjs作为示例，在控制台输入congsole.$i('dayjs')即可安装dayjsnpm包，可以使用其相应功能。
代码断点
在需要断点的地方，书写debugger就能实现断点，对于直接断点对比的缺点是不需要断点的时候，需要删除掉对应的断点代码。
条件断点
对于行数右键点击，选择Add conditional breakpoint...，输入对应的逻辑判断，注意书写的逻辑使用的变量是当前行可以拿到的变量
DOM断点
单击Elements选项卡
找到要设置断点的元素
右键单击该元素
将鼠标悬停在Break on，然后选择Subtree modifications、Attributes modifications或Node removal
展开赞过 评论2 - #青训营笔记创作活动#
1月18日，青训营阅读打卡day4
1.什么是 Monorepo?
把多个项目放在一个仓库里面，相对立的是传统的 MultiRepo 模式，即每个项目对应一个单独的仓库来分散管理。
2.Monorepo的弊端
1.代码复用，因为不同的仓库工作区的割裂，导致复用代码的成本很高，开发调试的流程繁琐，甚至在基础库频繁改动的情况下让人感到很抓狂，体验很差。
2.版本管理，当项目多了之后，很容易出现依赖更新不及时的情况。
3.项目基建，由于在 MultiRepo 当中，各个项目的工作流是割裂的，因此每个项目需要单独配置开发环境、配置 CI 流程、配置部署发布流程等等，甚至每个项目都有自己单独的一套脚手架工具。如果是 10 个项目，就需要维护 10 份基建的流程，逻辑重复不说，各个项目间存在构建、部署和发布的规范不能统一的情况，这样维护起来就更加麻烦了。
3. Monorepo 的优势
1.工作流的一致性
2.项目基建成本的降低
3.团队协作也更加容易
4.Monorepo 的落地
其中比较底层的方案比如 lerna，封装了 Monorepo 中的依赖安装、脚本批量执行等等基本的功能，但没有一套构建、测试、部署的工具链，整体 Monorepo 功能比较弱，但要用到业务项目当中，往往需要基于它进行顶层能力的封装，提供全面工程能力的支撑。
当然也有一些集成的 Monorepo 方案，比如nx(官网写的真心不错，还有不少视频教程)、rushstack，提供从初始化、开发、构建、测试到部署的全流程能力，有一套比较完整的 Monorepo 基础设施，适合直接拿来进行业务项目的开发。不过由于这些顶层方案内部各种流程和工具链都已经非常完善了，如果要基于这些方案来定制，适配和维护的成本过高，基本是不可行的。展开赞过 评论3 - #青训营笔记创作活动#
1月17日，阅读打卡day3
16个前端必备的实用工具与网站：
1. GitHub Desktop 。
2. 图片在线压缩，tinypng 是一个完全免费并且高压缩率的在线压缩图片网站，一般能满足日常大部分压缩图片的需求，如果你需要压缩大于5M的图片，可以考虑用 squoosh ，这个网站支持大图片压缩和图片压缩质量自定义。
3. 在线代码编辑，很多人可能用的是 codePen 或者 CodeSandbox 等，掘金的码上掘金也挺好用的，并且登录自己的掘金账号就能看到，挺方便的。4.JSON格式化，Json.cn。
5. 代码生成图片，carbon 可以生成酷炫的代码片段，并且支持导出图片。
6. 表情符号，
www.emojiall.com。
7. 矢量图标-iconfont。
8.css3动画，www.webhek.com。
9. 封面模板-canva，www.canva.cn。
10. 高清图片-UnSplash。
11. 在线画图，boardmix.cn。
12.快速部署建站，前端有时候需要自己部署一个网站，我们可以自己去买服务器，也有免费的部署网站，如 surge。
13. 在线性能评测，pagespeed 根据各项指标可以得出我们网站的一个综合评分，让我们知道我们的网站在那些方面还可以进行优化。
14. 多平台测试，我们的网站经常要在各种设备下看下效果，可是用手机和浏览器去一个个访问截图又比较麻烦，responsively 这个软件支持主流手机、PAD、电脑设备访问您的网站，并可以导出。
15. Chrome扩展组件，chrome.zzzmh.cn。
16. 在线简历，500丁。展开赞过 12 - #青训营笔记创作活动#
11月16日，青训营阅读打卡day2
抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，通过抓包可以：
分析网络问题
业务分析
分析网络信息流通量
网络大数据金融风险控制
探测企图入侵网络的攻击
探测由内部和外部的用户滥用网络资源
探测网络入侵后的影响
监测链接互联网宽频流量
监测网络使用流量（包括内部用户，外部用户和系统）
监测互联网和用户电脑的安全状态
渗透与欺骗展开赞过 12 - #青训营笔记创作活动#
1月12日，打卡day1，今日学习
Promise(承诺)，给予调用者一个承诺，过一会返回数据给你，就可以创建一个promise对象。当我们new一个promise，此时我们需要传递一个回调函数，这个函数为立即执行的，称之为（executor），这个回调函数，需要传入两个参数回调函数，reslove,reject(函数可以进行传参)，当执行了reslove函数，会回调promise对象的.then函数；当执行了reject函数，会回调promise对象的.catche函数。展开赞过 12
www.emojiall.com