王大帅哥学前端
获得徽章 1
- #青训营笔记创作活动#
2月24日 打卡day18
今日学习了CSS比较函数，clamp函数可以限制接受值，max和min函数可以比较数值自动选择更大或小的值，收获很大。评论点赞 - #青训营笔记创作活动#
2月16日 打卡day17
今日学习了前端浏览器调试技巧，扩充了
console.assert: 用于控制台输出错误日志，减少判断书写，第一个参数为false,null,undefined,0会输出第二个参数-字符串。
console.$i: 浏览器安装扩展程序Console Importer，允许直接使用npm包。比如:console.$i(‘dayjs’)。
条件断点，右键add condition breakpoint。展开评论点赞 - #青训营笔记创作活动#
2月10日 打卡day16
今日学习了前端人脸检测，利用纯前端技术，基于tensorflow学习模型，采集人脸特征点，调用接口判断人间远近，张嘴，眨眼，摇头等动作，效果很明显，很有意思，后面会体验一下并仔细阅读源码。
展开评论点赞 - #青训营笔记创作活动#
2月9日 打卡day15
今日学习了用css做节流的方法，收获颇多。原理是利用css中动画的控制，在动画执行期间让标签处于禁用状态，动画完成之后恢复，也可以达到和Js函数一样的节流效果！思路非常棒，很有借鉴意义！展开赞过 评论1 - #青训营笔记创作活动#
2月5日 打卡day11
今日学习了vite屏幕适配方案。原理是利用rem方案进行窗口大小变化自适应，应用于不固定宽高比的应用。第二种是scale函数来对元素进行x,y轴缩放实现固定宽高比的应用，但对于地图这种经纬度的应用不友好。展开评论点赞 - #青训营笔记创作活动#
2月4日 打卡day10
今日学习了新颖的css属性，虽然有一些在之前的学习中接触到，但是在本文中发现了其新的应用场景。
1. Sticky: 这是position新增的属性，是指的元素活动过程相对于其定位父元素到达指定位置是处于固定定位的效果，因此可以用纯css实现吸顶灯的效果。
2. :empty，自动选定空元素，可以给空元素统一设定样式。
3. gap，用来指定元素之间间隔。
4. background-clip: text，实现文字背景的效果。
5. user-select，禁用光标选中。
6. :invalid，实现表单违法值的效果。
7. :focus-within，实现父子联动。
8. mix-blend-mode:difference，描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
展开评论点赞 - #青训营笔记创作活动#
2月3日 打卡day9
今日学习了前端图片压缩的新工具tinypng。其通过减少图像中颜色数量实现使用更少的数据存储图像，是一种有损压缩图片的方式，但是几乎看不出来区别。文章介绍根据TinyPng封装一个工具，对项目中图片实现自动打包的思路和代码非常值得借鉴和学习。展开评论点赞 - #青训营笔记创作活动#
2月2日 打卡day8
今日学习了ESbulid，了解到前端打包工具的新趋势。ESbulid是Figma基于go语言开发的前端打包工具，充分利用多线程和多核cpu的性能，直接编译成机器码，省略编译时间，复用AST节点数据，高效利用内存，使得相比于Webpack等在性能上有着数量级的优势。它更适合在bundler和minimizer使用，但是兼容性略差，可以和SWC共用弥补这方面的劣势。实际可用于代码压缩，打包node库，小程序编译和web构建的多种应用场景，是前端工程化的新方向。
展开评论点赞 - #青训营笔记创作活动#
2月1日 打卡day7
今日学习了webRTC技术，收获颇丰。首先，webRTC是一项实时通讯技术，可以不借助中间媒体的情况下实现浏览器之间点对点的链接，进行音视频或任意数据的传输，使得电话会议等成为可能。本文介绍的非常全面，通过获取摄像头，屏幕分享，录制视频等api介绍了webRTC技术入门，此外背景抠图也非常有用，后期会继续follow这个专辑学习！展开评论点赞 - #青训营笔记创作活动#
1月31日 打卡day6
今日学习了前段抓包技能，对抓包原理喝抓包工具whistle有一定了解。whistle作为完全跨平台的抓包工具，可以支持http/https，socket等协议，可以修改请求，查看远程页面的log日志和dom节点，它操作简单功能强大，在实际业务中排除bug非常有用！展开评论点赞