姜颖
学生
获得徽章 1
- #青训营笔记创作活动#
2月11日 打卡day25今日学习：
写给前端的 docker 使用指南
了解 docker 常见操作，如构建镜像、运行容器、进入容器执行命令如何进入 docker 容器中进行调试使用 docker 启动 nginx 容器，并在本地浏览器某端口可直接打开如何得知启动 nginx 容器的 IP 端口了解 docker 原理，如何模拟 docker 隔离环境及限制资源 Dockerfile、Image、Container 有何区别 Dockerfile 中 CMD 与 RUN 有何区别
展开评论点赞 - #青训营笔记创作活动#
2月10日 打卡day24今日学习：
一次搞懂数据大屏适配方案 (vw vh、rem、scale)
开发定制化大屏，大家可能都一个感受，开发大屏主要是两方面的工作：大屏之关键-前期的自适应适配根据 ui 稿绘制图表，调细节
3 种方案在实际应用中该怎么选择视具体情况而定，也有看到大家说自适应在地图的适配中会有一些兼容问题，我这边还没有实践过。如果想简单，客户能同意留白，选用 scale 即可如果需要兼容不同比例的大屏，并且想在不同比例中都有比较好的效果，图表占满屏幕，类似于移动端的响应式，可以采用 vm vh 的方案至于 rem，个人觉得就是 scale 和 vm vh 的综合，最终的效果跟 scale 差不多
展开评论点赞 - #青训营笔记创作活动#
2月9日 打卡day23
今日学习：
推荐20个开源的前端低代码项目
近几年，在技术领域低代码是比较热门的话题，比如阿里云推出了易搭，通过简单的拖拽、配置，即可完成业务应用的搭建，腾讯云则是推出了微搭，通过行业化模板、拖放式组件和可视化配置快速构建多端应用。
低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。展开评论点赞 - #青训营笔记创作活动#
2月8日 打卡day22
今日学习：
我被骂了，但我学会了如何构造高性能的树状结构
整个结构扁平化后收益特别多。
结构很清晰，我们可以很轻易的对数据进行处理。
特别是在特别大数据量的情况下，这种形式可以极大的提高性能，减去需要遍历的性能消耗。
以前各种在数组对象出现的弊端都消失了。展开评论点赞 - #青训营笔记创作活动#
2月7日 打卡day21
今日学习：
关于现代包管理器的深度思考——为什么现在我更推荐 pnpm 而不是 npm/yarn?
pnpm 本质上就是一个包管理器，这一点跟 npm/yarn 没有区别，但它作为杀手锏的两个优势在于:
包安装速度极快；
磁盘空间利用非常高效。
1. 速度快
2. 高效利用磁盘空间
3. 支持 monorepo
4. 安全性高
虽然 pnpm 内部做了非常多复杂的设计，但实际上对于用户来说是无感知的，使用起来非常友好。并且，现在作者现在还一直在维护，目前 npm 上周下载量已经有 10w +，经历了大规模用户的考验，稳定性也能有所保障。
因此，综合来看，pnpm 是一个相比 npm/yarn 更优的方案，期待未来 pnpm 能有更多的落地。展开评论点赞 - #青训营笔记创作活动#
2月6日 打卡day20
今日学习:
纯前端实现羊了个羊小游戏
基础生成
最基础的地图只关乎当前层，假设当前需要判定是否放置卡片的坐标为 [i, j]，那么下面四个位置就不能存在卡片，否则就会出现同层卡片重叠
优化地图
以一层为例，按上面的逻辑只能生成最简单的地图，实际我们观察游戏，会发现卡片的放置是有一定规律的：
左右对称
从顶层到底层越来越往中心聚集，卡片越来越少
上一层不会完全覆盖下一层
卡片渲染
每次位置和随机数判定合格，我们应该实际放置一张卡片，一个实际的 dom。然后根据卡片的 x、y、z、宽高 值设置实际位置
覆盖关系
我们可以先按一层的大小初始化一个处理遮挡用的二维数组 coverMap，然后在之前生成的游戏地图上，从最后一层往第一层遍历。
填充数据
整改游戏的核心逻辑是 pending 区域存在 3 个同样图案的卡片时会消除。所以我们有两个关键点要注意。
道具的实现
暂存道具
随机道具
撤销道具
动效的实现
从排堆进入 pendding 区域
从 pendding 区域进入暂存区
使用随机道具时候的动画
集齐 3 个卡片时候的消除动画
样式美化展开评论点赞 - #青训营笔记创作活动#
2月5日 打卡day19
今日学习：
前端应该掌握的浏览器调试技巧
今天学习了打印输出、普通断点、条件断点、DOM断点、VS code 断点等调式方式。对于调试技巧任重而道远，需要学习与实践并行，才能更好的灵活使用，在对应的问题使用对应的调试方式，可以提高我们的开发效率以及解决问题能力，提高自己的竞争力。展开评论点赞 - #青训营笔记创作活动#
2月4日 打卡day18
今日学习：
别整一坨 CSS 代码了，试试这几个实用函数
Clamp(), Max(), 和 Min() 函数
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
我们有一个 max() 函数，在 0px 和 min()的计算值之间进行比较，并选择较大的值。
min() 函数在 8px 和 calc((100vw - 4px - 100%) * 9999 的计算值之间进行比较,这会得到一个非常大的正数或负数。展开评论点赞 - #青训营笔记创作活动#
2月3日 打卡day17
今日学习：
还在用定时器吗？借助 CSS 来监听事件
CSS 在控制定时器的开启和暂停上更有优势，下面总结一下
:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
:active配合transition延时、transitionend监听可以实现长按触发效果
CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
可以直接通过:hover来控制台动画的暂停和播放
当然，可以利用的不仅仅是以上几个案例，任何和 CSS 交互（:hover、:active）有类似功能的都可以朝这个方向去思考。展开评论点赞 - #青训营笔记创作活动#
2月2日 打卡day16
今日学习：
前端实现活体人脸检测
创建人脸模型
引入tensorflow训练好的人脸特征点检测模型，预测 486 个 3D 人脸特征点，推断出人脸的近似面部几何图形。
特征检测
人脸特征提取就是针对人脸的某些特征进行判断（以下的动作判断仅供参考，实际情况下需要多个特征点来判断某个动作）
人脸的远近
取4帧 人脸占画面的比例，判断这组值是递增或递减，取第一帧和最后最后一帧的占比，根据阈值判断人脸的远近。
张嘴
取2帧 [10,152]占[0,17]的比例,判断递增，取第一帧和最后最后一帧的距离，根据阈值判断张嘴。
眨眼
根据左眼[159, 144] 右眼[385, 374]的距离，判断连续4帧小于阈值，即可判断眨眼了。
左右摇头
根据左脸[195, 93] 右脸[195, 323]的相差距离，取4帧数据，根据距离和正负数，来判断向左转和向右转。展开评论点赞