用户271299231152
获得徽章 0
- #挑战每日一条沸点# Day 18
这篇文章介绍了一些前端应该掌握的浏览器调试技巧，包括 console 的各种方法，断点的设置和使用，以及 VS code 的调试功能。
console 可以用来输出打印和调试开发，除了常用的 log 、 error 、 warn ，还有一些可以提高开发效率的功能，如 time 和 timeEnd 用于计算代码执行时间， assert 用于判断逻辑， dir 用于查看 DOM 节点的属性和事件， table 用于将数组或对象打印成表格， $i 用于在控制台直接使用 npm 包等。
断点可以用来查看代码的执行过程和变量的值，有两种方式设置断点：直接在源代码面板点击行数或在代码中写 debugger 。还有一些高级的断点方式，如条件断点和 DOM 断点。
VS code 可以用来调试 Node 环境下的代码，需要在终端面板选择调试终端，然后在代码中设置断点，运行代码后就可以进入调试状态。展开评论点赞 - #挑战每日一条沸点# Day 17
这篇文章介绍了一些 CSS 的比较函数，如 clamp(), max(), min()，它们可以用来设置元素的尺寸、位置、间距等属性，使其更加灵活和响应式。clamp() 函数可以限制一个值在一个上限和下限之间，当这个值超过范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。max() 函数可以返回多个值中的最大值，min() 函数可以返回多个值中的最小值。它们可以接收任意数量的参数。文章给出了一些使用比较函数的实例，如流体的尺寸和定位、装饰性元素、流体高度、Loading Bar、动态分割器、动态 border Radius、间距等。展开评论点赞 - #挑战每日一条沸点# Day 16
这篇文章介绍了几种用 CSS 来替代定时器的方法，可以实现一些常见的交互效果，比如延时触发、长按触发、轮播和暂停等。这些方法的原理是利用 CSS 的伪类（:hover, :active）和过渡（transition）或动画（animation）来控制定时器的开启和暂停，以及监听过渡或动画结束（transitionend, animationiteration）的事件来触发具体的逻辑。优点是可以省去大量的 js 代码，避免定时器的取消和设置，也更好理解和控制，提高了代码的可读性和可维护性。展开评论点赞 - #挑战每日一条沸点# Day 15
阅读完当前页面的文章后，我学到了如何用纯前端的方式实现活体人脸检测的功能。文章介绍了使用 TensorFlow.js 的人脸特征点检测模型，通过分析人脸的动作，如张嘴、眨眼、左右摇头等，来判断是否是活体。文章还给出了详细的代码和注释，以及效果演示和相关文档的链接，让我对前端和人工智能有了更多的兴趣和认识。展开评论点赞 - #挑战每日一条沸点# Day 14
我读完这篇文章后，了解了如何使用 VSCode Chrome Debugger、条件断点、sourcemap 等工具来调试 Ant Design 的源码。Ant Design 是一个优秀的 React 组件库，它有三种不同的编译入口：esm、commonjs 和 UMD。文章教我如何修改 Ant Design 的配置文件，让它能够生成正确的 sourcemap，从而可以在 React 项目中直接调试 tsx 源码。展开评论点赞 - #挑战每日一条沸点# Day13
我在读完当前页面的文章后，学到了如何使用 fabric.js 快速开发一个图片编辑器的基本知识。文章介绍了 fabric.js 的架构设计、初始化、背景设置、插入元素、属性调整、元素对齐、其他用法等方面的内容，通过代码示例和截图展示了 fabric.js 的功能和效果。文章还提供了一个在线预览地址和一个 GitHub 地址，让我可以进一步学习和体验 fabric.js 的开源编辑器。展开评论点赞 - #挑战每日一条沸点# Day 12
这篇文章介绍了如何用 CSS 实现类似于 JS 的节流功能，即限制函数的执行频率。文章分析了 CSS 的实现思路，主要是利用 pointer-events、animation 和 :active 这三个属性来控制按钮的点击状态。文章还提供了另一种思路，通过 transition 的回调函数动态设置按钮的禁用状态。文章最后总结了 CSS 实现节流的优点和局限性，以及适用的场景。这篇文章让我学到了 CSS 的一些新的用法和技巧，也让我对 CSS 的动画控制有了更深的理解。展开评论点赞 - #挑战每日一条沸点# Day 11
这篇文章是关于沙箱的概念和实现的，沙箱是一种可以为运行中的程序提供隔离环境的安全机制，它可以防止程序影响到外部程序的运行。文章介绍了沙箱的应用场景和实现方式，以及如何设计一个不能操作 DOM 和调接口的环境。评论点赞 - #挑战每日一条沸点# Day 10
这篇文章让我了解了 Vue3 中使用 mitt.js 这个库来实现组件之间的通信。我学到了 mitt.js 的优点，如体积小、支持全局事件监听和移除、不依赖 Vue 实例等。我还学到了两种使用 mitt.js 的方式，一种是在 main.ts 中注册挂载到全局，另一种是在组件中引用。我了解了如何在组件中使用 emit 和 on 方法来发送和接收信息。展开评论点赞 - #挑战每日一条沸点# Day 9
我了解了如何用 position: sticky 实现吸顶效果，如何用 :empty 选择器和伪元素来显示空容器的提示，如何用 gap 属性来设置元素之间的间距，如何用 background-clip: text 属性来给文字添加背景图片，如何用 user-select 属性来禁止用户选中文本，如何用 :invalid 伪类来校验表单输入的有效性，如何用 :focus-within 伪类来根据子元素的焦点状态改变父元素的样式，以及如何用 mix-blend-mode: difference 属性来实现一些特殊的图形效果。展开评论点赞