用户8147561885610
获得徽章 1
#青训营笔记创作活动#
31 January 2023
介绍了css的clamp, max, min函数的使用
clamp函数带三个参数，第一个参数限定最小值，第三个参数限定最大值，第二个参数则是真实的计算值
如果计算值超出最小值或最大值，则使用边界值进行替代
clamp函数可以在一些情境下免去复杂的计算和媒体查询
max, min函数则是对于数据的一端进行限制，合理使用可以简化代码
31 January 2023
介绍了css的clamp, max, min函数的使用
clamp函数带三个参数，第一个参数限定最小值，第三个参数限定最大值，第二个参数则是真实的计算值
如果计算值超出最小值或最大值，则使用边界值进行替代
clamp函数可以在一些情境下免去复杂的计算和媒体查询
max, min函数则是对于数据的一端进行限制，合理使用可以简化代码
展开
评论
点赞
#青训营笔记创作活动#
30 January 2023
悬浮延时效果：悬浮时添加css transition，监听transitionend事件
长按效果：添加:hover:active选择器，在其下添加transition，监听transitionend
轮播图的播放：自定义一个scroll动画(css)无限触发，JS监听animationiteration，用animation-play-state控制暂停
30 January 2023
悬浮延时效果：悬浮时添加css transition，监听transitionend事件
长按效果：添加:hover:active选择器，在其下添加transition，监听transitionend
轮播图的播放：自定义一个scroll动画(css)无限触发，JS监听animationiteration，用animation-play-state控制暂停
展开
评论
点赞
#青训营笔记创作活动#
29 January 2023
简要介绍了这些工具&网站的功能
GitHub Desktop：便于进行git协作
tinypng&squoosh：压缩图片，便于网络传输
codePen&CodeSandbox&码上掘金：在线代码编辑器
json.cn&smalldev：JSON格式化
carbon&ray.so：将代码生成图片
emojiall：表情符号
iconfont：矢量字体图标
css3-animation：css3动画，可复制粘贴的解决方案
canva：绘制自定义封面
UnSplash：高清图片站
boardmix：在线生成流程图、思维导图等
surge：部署网站
pagespeed：在线性能评测
responsively：多平台测试网站显示效果
极简插件：安装Chrome扩展
五百丁：在线简历
29 January 2023
简要介绍了这些工具&网站的功能
GitHub Desktop：便于进行git协作
tinypng&squoosh：压缩图片，便于网络传输
codePen&CodeSandbox&码上掘金：在线代码编辑器
json.cn&smalldev：JSON格式化
carbon&ray.so：将代码生成图片
emojiall：表情符号
iconfont：矢量字体图标
css3-animation：css3动画，可复制粘贴的解决方案
canva：绘制自定义封面
UnSplash：高清图片站
boardmix：在线生成流程图、思维导图等
surge：部署网站
pagespeed：在线性能评测
responsively：多平台测试网站显示效果
极简插件：安装Chrome扩展
五百丁：在线简历
展开
评论
点赞
#青训营笔记创作活动#
28 January 2023
本文主要介绍了Monorepo，多个项目放在一个仓库的项目管理方法
相比于一个项目一个仓库的Multirepo方法，Monorepo解决了代码复用率低的问题、依赖管理不便的问题和项目基建重复/不统一的问题
要落地Monorepo，需要处理项目之间依赖、构建流程等问题，较为复杂，但是可以使用社区中较为成熟的方案并加以改造
28 January 2023
本文主要介绍了Monorepo，多个项目放在一个仓库的项目管理方法
相比于一个项目一个仓库的Multirepo方法，Monorepo解决了代码复用率低的问题、依赖管理不便的问题和项目基建重复/不统一的问题
要落地Monorepo，需要处理项目之间依赖、构建流程等问题，较为复杂，但是可以使用社区中较为成熟的方案并加以改造
展开
评论
点赞
#青训营笔记创作活动#
27 January 2023
本文介绍了pnpm包管理器的几个特点，包括安装速度快、磁盘空间利用高效（通过硬链接跟踪同一处文件）、支持monorepo、安全性更高
详细分析了pnpm对于依赖的管理机制，指出相对于npm安装的扁平化（依赖平铺在文件夹中，存在结构不确定问题），pnpm通过软链接形成的嵌套结构更加规范，还解决了依赖提升的问题
27 January 2023
本文介绍了pnpm包管理器的几个特点，包括安装速度快、磁盘空间利用高效（通过硬链接跟踪同一处文件）、支持monorepo、安全性更高
详细分析了pnpm对于依赖的管理机制，指出相对于npm安装的扁平化（依赖平铺在文件夹中，存在结构不确定问题），pnpm通过软链接形成的嵌套结构更加规范，还解决了依赖提升的问题
展开
评论
点赞
#青训营笔记创作活动#
26 January 2023
通过pixi.js实现的一个水波纹动态效果
创建一个pixi应用，载入资源图像，在渲染的时候先把背景图像放到中心位置，然后通过DisplacementFilter，配合定时函数，将背景图片的纹理x进行移动，实现水体扭曲效果
然后引入pixi-filters.js，通过ShockwaveFilter，传入一定范围内波动的波纹参数，将过滤器加入数组，定时扫描数组并增加过滤器的时间，即可实现波纹效果
26 January 2023
通过pixi.js实现的一个水波纹动态效果
创建一个pixi应用，载入资源图像，在渲染的时候先把背景图像放到中心位置，然后通过DisplacementFilter，配合定时函数，将背景图片的纹理x进行移动，实现水体扭曲效果
然后引入pixi-filters.js，通过ShockwaveFilter，传入一定范围内波动的波纹参数，将过滤器加入数组，定时扫描数组并增加过滤器的时间，即可实现波纹效果
展开
评论
点赞
#青训营笔记创作活动#
25 January 2023
本文介绍了git的几种常用指令，涉及到拉取、推送、合并、变基
内容简明扼要，可以作为参考手册在忘记的时候翻一翻
不过，文章里面的代码段是不是选错语言了？
25 January 2023
本文介绍了git的几种常用指令，涉及到拉取、推送、合并、变基
内容简明扼要，可以作为参考手册在忘记的时候翻一翻
不过，文章里面的代码段是不是选错语言了？
评论
点赞
#青训营笔记创作活动#
24 January 2023
本文从Vue的循环key开始说起，介绍vue编译过程中生成的虚拟DOM（然后使用虚拟DOM生成真实的DOM结构，这样可以节约浏览器的资源消耗），diff算法（用来根据key选中虚拟DOM元素）
需要让key唯一是diff算法的需要
使用index作为key会使得列表发生变化时，虚拟DOM结构并没能产生应有的更改；删除列表元素时，由于删除的是虚拟DOM节点，会导致出错
24 January 2023
本文从Vue的循环key开始说起，介绍vue编译过程中生成的虚拟DOM（然后使用虚拟DOM生成真实的DOM结构，这样可以节约浏览器的资源消耗），diff算法（用来根据key选中虚拟DOM元素）
需要让key唯一是diff算法的需要
使用index作为key会使得列表发生变化时，虚拟DOM结构并没能产生应有的更改；删除列表元素时，由于删除的是虚拟DOM节点，会导致出错
展开
评论
点赞
#青训营笔记创作活动#
22 January 2023
讲解了docx-preview和pdfjs-dist两个组件的使用
docx-preview组件可以实现对于docx类型文件的预览，主要使用renderAsync函数，加以必要的参数组，将文件预览挂载到特定ref的HTML元素上
pdfjs-dist组件可以实现对于pdf类型文件的预览，可以对ArrayBuffer格式的pdf数据进行渲染（目标是canvas），还可以进行放大缩小
22 January 2023
讲解了docx-preview和pdfjs-dist两个组件的使用
docx-preview组件可以实现对于docx类型文件的预览，主要使用renderAsync函数，加以必要的参数组，将文件预览挂载到特定ref的HTML元素上
pdfjs-dist组件可以实现对于pdf类型文件的预览，可以对ArrayBuffer格式的pdf数据进行渲染（目标是canvas），还可以进行放大缩小
展开
评论
点赞
#青训营笔记创作活动#
21 January 2023
本文介绍了几种if-else的替代方案
短路运算，比较常见如 res = data.content || null
三元运算符，不怎么适合嵌套使用
switch case，很多编程语言都有，有一个短路特性
对象配置/策略模式，利用键值对快速匹配对应值，适合选项有限的情况
进行逻辑判断的时候，可以活用这些方法，简化代码
21 January 2023
本文介绍了几种if-else的替代方案
短路运算，比较常见如 res = data.content || null
三元运算符，不怎么适合嵌套使用
switch case，很多编程语言都有，有一个短路特性
对象配置/策略模式，利用键值对快速匹配对应值，适合选项有限的情况
进行逻辑判断的时候，可以活用这些方法，简化代码
展开
评论
点赞
#青训营笔记创作活动#
juejin.cn
20 January 2023
介绍了console的另外几个调试功能：掐表计时（time, timeEnd）、断言（assert）、查看DOM属性（dir）、将数组打印成表格（table）
另外还介绍了js断点的使用（开发者工具添加直接断点、debugger语句代码断点、以及条件断点、DOM断点和VSCode中调试断点），提供了更多的调试方案
juejin.cn20 January 2023
介绍了console的另外几个调试功能：掐表计时（time, timeEnd）、断言（assert）、查看DOM属性（dir）、将数组打印成表格（table）
另外还介绍了js断点的使用（开发者工具添加直接断点、debugger语句代码断点、以及条件断点、DOM断点和VSCode中调试断点），提供了更多的调试方案
展开
评论
点赞