获得徽章 1
- #青训营笔记创作活动# 1月30日 打卡day15
clamp() 函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接收三个参数:最小值、首选值、最大值。使用CSS max()函数,根据视口宽度他能将卡片的border-radius 从 0px 切换到 8px。展开评论点赞 - #青训营笔记创作活动# 1月29日 打卡day14
平时工作中很多场合都要用到定时器,比如延迟加载、定时查询等等,但定时器的控制有时候会有些许麻烦,比如鼠标移入停止、移出再重新开始。:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果 :active配合transition延时、transitionend监听可以实现长按触发效果 。展开评论点赞 - #青训营笔记创作活动# 1月28日 打卡day13
在网页中使用活体人脸检测大部分都是前端录制一段视频,让后端调用第三方接口去判断,如果用纯前端方式来实现这个功能,就需要创建人脸模型进行特征提取人脸特征提取就是针对人脸的某些特征进行判断评论点赞 - #青训营笔记创作活动# 1月27日 打卡day12
antd 是 react 主流组件库,我们可以在 renderWithHooks 里调用函数组件的地方打个条件断点,在调用想调试的组件时断住,这样我们就可以 step into 到该组件定义的地方。antd 有三种入口:es 目录对应 esm 入口,lib 目录对应 commonjs 入口,dist 目录对应 UMD 入口。把 antd 代码下载下来,执行 npm run dist 就可以生成 UMD 形式的代码。展开评论点赞 - #青训营笔记创作活动# 1月26日 打卡day11
konva.js是一个非常强大的canvas库,使用fabric.js 快速开发一个图片编辑器首先要在入口文件中初始化实例,然后与mixins结合,在mixins中定义了选择类型(多选、单选、未选中)、选中元素类型、选中id等属性,以及选中、取消选中的事件,子组件通过引入mixins来开发对应功能;如子组件需要对fabric对象进行操作,则可以通过inject获得原始对象。展开评论点赞 - #青训营笔记创作活动# 1月25日 打卡day10
函数节流(throttle)是 JS 中一个非常常见的优化手段,可以有效的避免函数过于频繁的执行。实现这样一个功能需要用到pointer-events、animation以及:active,便可实现类似“节流”的功能。相比 JS 实现而言,实现更精简、使用更简单,没有框架限制。展开评论点赞 - #青训营笔记创作活动# 1月23日 打卡day9
在页面中,可以通过 document 对象来获取 HTML 元素,进行增删改查的 DOM 操作。沙箱(Sandbox) 是一种安全机制,为运行中的程序提供隔离环境,通常用于执行未经测试或不受信任的程序或代码,它会为待执行的程序创建一个独立的执行环境,内部程序的执行不会影响到外部程序的运行。使用沙箱即可实现一个不可操作DOM与调接口的环境展开评论点赞 - #青训营笔记创作活动# 1月22日 打卡day8
rem是指相对于根元素的字体大小的单位,在日常开发过程中我们通常把根元素(html/body)的字体设置为10px,方便于我们计算(此时子元素的1rem就相当于10px)。在CSS3中,我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放,指的是“缩小”和“放大”的意思。展开评论点赞 - #青训营笔记创作活动# 1月21日 打卡day7
很多时候,我们从PS等工具导出来的图片,或者是美术直接给到切图,都是未经过压缩的,体积都比较大。总体分为五个过程:1.查找:找出所有的图片资源;2.分配:均分任务到每个进程;3.上传:把原图上传到TinyPng;4.下载:从TinyPng中下载压缩好的图片;5.写入:用下载的图片覆盖本地图片展开评论点赞 - #青训营笔记创作活动# 1月20日 打卡day6
Esbuild 是由 Figma 的 CTO 「Evan Wallace」基于 Golang 开发的一款打包工具,相比传统的打包工具,主打性能优势,在构建速度上可以快 10~100 倍。他的优势在于使用Golang开发、多核并行、从0造轮子、高效利用内存。从而使得Esbuild 的代码压缩功能非常优秀,可以甩开传统的压缩工具一个量级以上的性能差距。展开评论点赞