博客园 - ESnail
uuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=63127
2023-07-24T02:04:51Z
ESnail
https://www.cnblogs.com/EnSnail/
feed.cnblogs.com
https://www.cnblogs.com/EnSnail/p/17576519.html
布局问题解决1:浮动图像对齐 - ESnail
在实现图像与文本内容对齐时,我们面临着垂直对齐和环绕效果之间的挑战。 ### 期望实现效果: ### 实际: 1. 用 `float` + `flex`、`grid` 处理垂直对齐。 对齐了,但是当文本内容较多高度比图像高度高时,空间效率低,没有环绕效果。 2. 用 `float` + [shape
2023-07-24T02:02:00Z
2023-07-24T02:02:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】在实现图像与文本内容对齐时,我们面临着垂直对齐和环绕效果之间的挑战。 ### 期望实现效果: ### 实际: 1. 用 `float` + `flex`、`grid` 处理垂直对齐。 对齐了,但是当文本内容较多高度比图像高度高时,空间效率低,没有环绕效果。 2. 用 `float` + [shape <a href="https://www.cnblogs.com/EnSnail/p/17576519.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/17457057.html
如何制作 Storybook Day 网页上的 3D 效果? - ESnail
Storybook 刚刚达到了一个重要的里程牌:7.0 版本!为了庆祝,该团队举办了他们的第一次用户大会 - [Storybook Day](https://storybook.js.org/day)。为了更特别,在活动页面中添加了一个视觉上令人惊叹的 3D 插图。 原文:[How we built
2023-06-05T01:43:00Z
2023-06-05T01:43:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】Storybook 刚刚达到了一个重要的里程牌:7.0 版本!为了庆祝,该团队举办了他们的第一次用户大会 - [Storybook Day](https://storybook.js.org/day)。为了更特别,在活动页面中添加了一个视觉上令人惊叹的 3D 插图。 原文:[How we built <a href="https://www.cnblogs.com/EnSnail/p/17457057.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/17419761.html
使用 React Three Fiber 和 GSAP 实现 WebGL 轮播动画 - ESnail
参考:[Building a WebGL Carousel with React Three Fiber and GSAP](https://tympanus.net/codrops/2023/04/27/building-a-webgl-carousel-with-react-three-fibe
2023-05-22T01:34:00Z
2023-05-22T01:34:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】参考:[Building a WebGL Carousel with React Three Fiber and GSAP](https://tympanus.net/codrops/2023/04/27/building-a-webgl-carousel-with-react-three-fibe <a href="https://www.cnblogs.com/EnSnail/p/17419761.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/17390161.html
深浅拷贝,温故知新 - ESnail
1、深拷贝 1.1、概念 对象的深拷贝是指其属性与其拷贝的源对象的属性不共享相同的引用(指向相同的底层值)的副本。 因此,当你更改源或副本时,可以确保不会导致其他对象也发生更改;也就是说,你不会无意中对源或副本造成意料之外的更改。 在深拷贝中,源和副本是完全独立的。深拷贝与其源对象不共享引用,所以对
2023-05-11T01:53:00Z
2023-05-11T01:53:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】1、深拷贝 1.1、概念 对象的深拷贝是指其属性与其拷贝的源对象的属性不共享相同的引用(指向相同的底层值)的副本。 因此,当你更改源或副本时,可以确保不会导致其他对象也发生更改;也就是说,你不会无意中对源或副本造成意料之外的更改。 在深拷贝中,源和副本是完全独立的。深拷贝与其源对象不共享引用,所以对 <a href="https://www.cnblogs.com/EnSnail/p/17390161.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/17312256.html
好奇心驱使下试验了 chatGPT 的 js 代码的能力 - ESnail
手边的项目中有个函数,主要实现图片分片裁剪功能。可以优化一下。 也想看看 chatGPT 的代码理解能力,优化能力,实现能力,用例能力。 于是有了这篇文章。 实验结果总结: chatGPT 确实强大,提供的答案可以借鉴,但不能完全依赖,需要你自行判断是否正确 当你需要一个纯函数时,可以考虑使用。 提
2023-04-13T01:37:00Z
2023-04-13T01:37:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】手边的项目中有个函数,主要实现图片分片裁剪功能。可以优化一下。 也想看看 chatGPT 的代码理解能力,优化能力,实现能力,用例能力。 于是有了这篇文章。 实验结果总结: chatGPT 确实强大,提供的答案可以借鉴,但不能完全依赖,需要你自行判断是否正确 当你需要一个纯函数时,可以考虑使用。 提 <a href="https://www.cnblogs.com/EnSnail/p/17312256.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/17234326.html
最新 umi4-max 如何使用 webpack5 联邦模块 - ESnail
新项目用 umi4-max 搭建,部分功能想要使用其他项目的功能,不想重新开发,想到了使用 webpack5 的联邦模块,可以直接引用其他项目代码来实现共享代码。 理想很美好,现实很残酷。直接按照 webpack5 联邦模块的使用方法,并不能成功,而官方文档没有明确说明如何使用。 webpack 联
2023-03-19T13:09:00Z
2023-03-19T13:09:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】新项目用 umi4-max 搭建,部分功能想要使用其他项目的功能,不想重新开发,想到了使用 webpack5 的联邦模块,可以直接引用其他项目代码来实现共享代码。 理想很美好,现实很残酷。直接按照 webpack5 联邦模块的使用方法,并不能成功,而官方文档没有明确说明如何使用。 webpack 联 <a href="https://www.cnblogs.com/EnSnail/p/17234326.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/17221171.html
重构:banner 中 logo 聚合分散动画 - ESnail
1. 效果展示 在线查看 2. 开始前说明 效果实现参考源码:Logo 聚集与散开 原效果代码基于 react jsx 类组件实现。依赖旧,代码冗余。 我将基于此进行重构,重构目标: 基于最新依赖包,用 ts + hook 实现效果 简化 dom 结构及样式 支持响应式 重构应该在还原的基础上,用更
2023-03-16T01:38:00Z
2023-03-16T01:38:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】1. 效果展示 在线查看 2. 开始前说明 效果实现参考源码:Logo 聚集与散开 原效果代码基于 react jsx 类组件实现。依赖旧,代码冗余。 我将基于此进行重构,重构目标: 基于最新依赖包,用 ts + hook 实现效果 简化 dom 结构及样式 支持响应式 重构应该在还原的基础上,用更 <a href="https://www.cnblogs.com/EnSnail/p/17221171.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/16895423.html
TS进阶之infer - ESnail
收录一下,方便需要的时候查询。 参考:TS进阶之infer 主要内容:介绍下非常实用的infer的使用方法 使用介绍 条件类型的基本语法是: T extends U ? X : Y; 如果占位符类型 U 是一个可以被分解成几个部分的类型,譬如数组类型,元组类型,函数类型,字符串字面量类型等。这时候可
2022-11-16T03:55:00Z
2022-11-16T03:55:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】收录一下,方便需要的时候查询。 参考:TS进阶之infer 主要内容:介绍下非常实用的infer的使用方法 使用介绍 条件类型的基本语法是: T extends U ? X : Y; 如果占位符类型 U 是一个可以被分解成几个部分的类型,譬如数组类型,元组类型,函数类型,字符串字面量类型等。这时候可 <a href="https://www.cnblogs.com/EnSnail/p/16895423.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/16700896.html
css 实现字体三连 (镂空、渐变、背景)、彩色字体 - ESnail
美化字体,镂空字是个不错的选择。 参考:中秋佳节之际, 一起来欣赏 9 个冷门的css属性 镂空字 p { font-size: 150px; color: white; -webkit-text-stroke: 6px red; } 字体白色,描边红色。 渐变色镂空文字 p { font-size
2022-09-16T10:13:00Z
2022-09-16T10:13:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】美化字体,镂空字是个不错的选择。 参考:中秋佳节之际, 一起来欣赏 9 个冷门的css属性 镂空字 p { font-size: 150px; color: white; -webkit-text-stroke: 6px red; } 字体白色,描边红色。 渐变色镂空文字 p { font-size <a href="https://www.cnblogs.com/EnSnail/p/16700896.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/16461813.html
可视化基础:已知2点坐标,如何求旋转角度? - ESnail
问题 已知:from ,to 两点的坐标,如何求两点连线的旋转角度? 可以通过余弦定理求解三个角的度数。具体说明如下: 在三角形中,已知边A、B、C, 且A、B、C所对的内角分别是a、b、c, 则: cosa=[B²+C²-A²]/(2BC) cosb=[A²+C²-B²]/(2AC) cosc=[
2022-07-09T12:25:00Z
2022-07-09T12:25:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】问题 已知:from ,to 两点的坐标,如何求两点连线的旋转角度? 可以通过余弦定理求解三个角的度数。具体说明如下: 在三角形中,已知边A、B、C, 且A、B、C所对的内角分别是a、b、c, 则: cosa=[B²+C²-A²]/(2BC) cosb=[A²+C²-B²]/(2AC) cosc=[ <a href="https://www.cnblogs.com/EnSnail/p/16461813.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/15754962.html
gojs 实用高级用法 - ESnail
大家,新年好! 历史文章: 数据可视化 gojs 简单使用介绍 gojs 如何实现虚线(蚂蚁线)动画? 本文介绍的是在使用 gojs 制作图的过程中,你可能会碰到的问题的一些解决方案。 gojs 是一个非常强大的可视化关系的js库。 1. 取消更新动画 问题:更新数据的时候,会触发渲染,有渲染动画,
2022-01-01T01:46:00Z
2022-01-01T01:46:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】大家,新年好! 历史文章: 数据可视化 gojs 简单使用介绍 gojs 如何实现虚线(蚂蚁线)动画? 本文介绍的是在使用 gojs 制作图的过程中,你可能会碰到的问题的一些解决方案。 gojs 是一个非常强大的可视化关系的js库。 1. 取消更新动画 问题:更新数据的时候,会触发渲染,有渲染动画, <a href="https://www.cnblogs.com/EnSnail/p/15754962.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/15707038.html
vue-cli3 vue2 保留 webpack 支持 vite 成功实践 - ESnail
大家好! 文本是为了提升开发效率及体验实践诞生的。 项目背景: 脚手架:vue-cli3,具体为 "@vue/cli-service": "^3.4.1" 库:vue2,具体为:"vue": "2.6.12" 备注:没有 typescript , 非 ssr 痛点:随着时间的推移、业务的不断迭代,依
2021-12-19T04:20:00Z
2021-12-19T04:20:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】大家好! 文本是为了提升开发效率及体验实践诞生的。 项目背景: 脚手架:vue-cli3,具体为 "@vue/cli-service": "^3.4.1" 库:vue2,具体为:"vue": "2.6.12" 备注:没有 typescript , 非 ssr 痛点:随着时间的推移、业务的不断迭代,依 <a href="https://www.cnblogs.com/EnSnail/p/15707038.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/15679835.html
react18 来了,我 get 到... - ESnail
大家好! 本文主要是关于即将发布的 react 18 的新特性。那么 react18 带来了什么呢? 详情可以关注 github React 18 工作组仓库 1. automatic batching:自动批处理。 batching 批处理,说的是,可以将回调函数中多个 setState 事件合并
2021-12-12T09:21:00Z
2021-12-12T09:21:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】大家好! 本文主要是关于即将发布的 react 18 的新特性。那么 react18 带来了什么呢? 详情可以关注 github React 18 工作组仓库 1. automatic batching:自动批处理。 batching 批处理,说的是,可以将回调函数中多个 setState 事件合并 <a href="https://www.cnblogs.com/EnSnail/p/15679835.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/14938799.html
typescript 中的 infer 关键字的理解 - ESnail
infer 这个关键字,整理记录一下,避免后面忘记了。有点难以理解呢。 infer infer 是在 typescript 2.8中新增的关键字。 infer 可以在 extends 条件类型的字句中,在真实分支中引用此推断类型变量,推断待推断的类型。 例如:用infer推断函数的返回值类型 typ
2021-06-26T11:20:00Z
2021-06-26T11:20:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】infer 这个关键字,整理记录一下,避免后面忘记了。有点难以理解呢。 infer infer 是在 typescript 2.8中新增的关键字。 infer 可以在 extends 条件类型的字句中,在真实分支中引用此推断类型变量,推断待推断的类型。 例如:用infer推断函数的返回值类型 typ <a href="https://www.cnblogs.com/EnSnail/p/14938799.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/14938774.html
antd 组件 RangePicker 扩展,支持预选范围回填选中 - ESnail
最近在做和时间段范围相关的,预设常用的日期范围可以提高用户体验。可以说 antd 的组件是很不错的,但是美中不足的是,不支持预设范围回填选中,怎么办? 在此基础上封装一下好了。 先来看下效果图: 未选中: 选中回填: 看了下渲染出来的 html 内容,用的是 Tag 实现的。那我也这么实现好了。 主
2021-06-26T11:12:00Z
2021-06-26T11:12:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】最近在做和时间段范围相关的,预设常用的日期范围可以提高用户体验。可以说 antd 的组件是很不错的,但是美中不足的是,不支持预设范围回填选中,怎么办? 在此基础上封装一下好了。 先来看下效果图: 未选中: 选中回填: 看了下渲染出来的 html 内容,用的是 Tag 实现的。那我也这么实现好了。 主 <a href="https://www.cnblogs.com/EnSnail/p/14938774.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/14774565.html
”控制反转Ioc,依赖注入DI“如何实现的? - ESnail
牛顿曾说:如果说我看得比别人更远些,那是因为我站在巨人的肩膀上。 阅读优质框架库的源码,能学到不少,更有甚者基于此创造了更优秀的,大致就是如此。 midwayjs 已经忘了是怎么认识它的了。印象中是个 nodejs 的优质框架,看了介绍,很厉害!!! Midway - 一个面向未来的云端一体 Nod
2021-05-16T11:09:00Z
2021-05-16T11:09:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】牛顿曾说:如果说我看得比别人更远些,那是因为我站在巨人的肩膀上。 阅读优质框架库的源码,能学到不少,更有甚者基于此创造了更优秀的,大致就是如此。 midwayjs 已经忘了是怎么认识它的了。印象中是个 nodejs 的优质框架,看了介绍,很厉害!!! Midway - 一个面向未来的云端一体 Nod <a href="https://www.cnblogs.com/EnSnail/p/14774565.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/14532028.html
新的颜色对比度算法-感知对比度算法APCA - ESnail
灵感的源泉来源于不断的接受新鲜事物。 Chrome 89 新功能一览,性能提升明显,大量 DevTools 新特性! 文章中的新特性,掌握了对日常开发,很受益,赶紧更新浏览器版本吧。 谈谈其中提到的:新的颜色对比度算法-先进感知对比度算法(APCA)。 启用该功能设置:选中 Settings > E
2021-03-14T04:16:00Z
2021-03-14T04:16:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】灵感的源泉来源于不断的接受新鲜事物。 Chrome 89 新功能一览,性能提升明显,大量 DevTools 新特性! 文章中的新特性,掌握了对日常开发,很受益,赶紧更新浏览器版本吧。 谈谈其中提到的:新的颜色对比度算法-先进感知对比度算法(APCA)。 启用该功能设置:选中 Settings > E <a href="https://www.cnblogs.com/EnSnail/p/14532028.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/14384009.html
canvas 操作图像记录:自适应+提取背景色+灰度处理 - ESnail
用个小 demo 记录一下,如何在 canvas 上操作图像。 绘制图像,并自适应水平垂直居中 图像灰度处理 提取图像的主题色:平均值法(单色背景)、最多色值法(双色背景) 点击在线体验 绘制图像,并自适应水平垂直居中 绘制图像 利用的是 canvas 的 api drawImage void ct
2021-02-07T02:00:00Z
2021-02-07T02:00:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】用个小 demo 记录一下,如何在 canvas 上操作图像。 绘制图像,并自适应水平垂直居中 图像灰度处理 提取图像的主题色:平均值法(单色背景)、最多色值法(双色背景) 点击在线体验 绘制图像,并自适应水平垂直居中 绘制图像 利用的是 canvas 的 api drawImage void ct <a href="https://www.cnblogs.com/EnSnail/p/14384009.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/13938504.html
前端未来趋势之原生API:Web Components - ESnail
声明:未经允许,不得转载。 Web Components 现世很久了,所以你可能听说过,甚至学习过,非常了解了。但是没关系,可以再重温一下,温故知新。 浏览器原生能力越来越强。 js 曾经的 JQuery,是前端入门必学的技能,是前端项目必用的一个库。它的强大之处在于简化了 dom 操作(强大的选择
2020-11-06T11:05:00Z
2020-11-06T11:05:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】声明:未经允许,不得转载。 Web Components 现世很久了,所以你可能听说过,甚至学习过,非常了解了。但是没关系,可以再重温一下,温故知新。 浏览器原生能力越来越强。 js 曾经的 JQuery,是前端入门必学的技能,是前端项目必用的一个库。它的强大之处在于简化了 dom 操作(强大的选择 <a href="https://www.cnblogs.com/EnSnail/p/13938504.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/EnSnail/p/13835236.html
AVA 源码解读-规则逻辑 - ESnail
做可视化决策的过程,为了节省人的工作量及提效,一个好的方案是推荐。 现有的智能可视化推荐系统分为两类: 基于规则的 和 基于机器学习的。 前者一般是根据专家经验或实验得到的可视化准则; 后者则是直接学习从数据到可视化的模型。 本文是在研究基于规则的可视化推荐的过程中,查看背后源码规则部分实现的过程后
2020-10-18T07:00:00Z
2020-10-18T07:00:00Z
ESnail
https://www.cnblogs.com/EnSnail/
【摘要】做可视化决策的过程,为了节省人的工作量及提效,一个好的方案是推荐。 现有的智能可视化推荐系统分为两类: 基于规则的 和 基于机器学习的。 前者一般是根据专家经验或实验得到的可视化准则; 后者则是直接学习从数据到可视化的模型。 本文是在研究基于规则的可视化推荐的过程中,查看背后源码规则部分实现的过程后 <a href="https://www.cnblogs.com/EnSnail/p/13835236.html" target="_blank">阅读全文</a>