HTML、CSS、JS 各司其职的原则 ｜ 青训营笔记
介绍
我们知道，一个网页通常分为三层，JS 负责行为，CSS 负责表现，HTML 负责结构。在写页面时，遵循 HTML、CSS、JS 各司其职的原则，各自实现对应的功能，这样的好处不仅便于后续代码的维护扩展，而且可以做到代码简洁、可读性高。
示例比如我们要实现一个深夜/白天模式切换的需求。点击”太阳🌞”图标时，切换为深夜模式，页面变成深色背景、浅色字体、图标变为”月亮🌜”。点击”月亮🌜”图标时，切换为白天模式，页面变成浅色背景、深色字体、图标变为”太阳🌞”。
版本一我们在按钮上面绑定一个点击事件，根据按钮的 innerHTML 判断当前模式，然后设置 body.style，再设置按钮的 innerHTML。
123456789101112btn.addEventListener('click', (e) => { const body = document.body; if(e.target.innerHTML === '🌞') { body.style.backgroundColor = ...
CSS 中的层叠、优先级和继承 ｜ 青训营笔记
介绍CSS 中的层叠、优先级和继承决定着如何将 CSS 应用到 HTML 中，以及如何解决冲突。在某些时候，我们在做一个项目过程中会发现一些应该产生效果的样式没有生效，通常的原因是你创建了两个应用于同一个元素的规则，而设计元素样式的规则可能不是期望的规则，因此需要了解这些机制是如何工作的。
层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。简单地说，就是 CSS 规则的顺序。它在 CSS 处于核心地位，CSS 的全称层叠样式表正是强调了这一点。有三个因素需要考虑，根据重要性排序（递增）如下：
资源顺序 - 如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。
优先级 - 决定在发生冲突的时候应该使用哪条规则。例如有些规则在最后出现，但是却应用了前面的具有冲突的规则，这是因为前面的有更高的优先级——它范围更小。
重要程度 - 特殊的 CSS 规则 !important，用于修改特定属性的值，能够覆盖普通规则的层叠。
大多数 @规则的 CSS 声明是参与层叠计算的，比如包含于 @media、@documents 或者@supports 的 C ...
HTML 中的语义元素 | 青训营笔记
介绍我们知道，HTML 被用来结构化信息——例如标题、段落和列表等，也可用来在一定程度上描述文档的外观和语义。在编程中，语义指的是一段代码的含义——例如 “运行这行 JavaScript 代码会产生怎样的影响？”, 或者 “这个 HTML 的元素有什么作用，扮演了什么样的角色”（而不只是 “它看上去像是什么？”）。
首先我们看一个使用 HTML5 语义元素定义的页面，可以看到通过语义元素，HTML 结构更加清晰了。
HTML 中的语义语义 HTML 是使用 HTML 标记来加强网页和 Web 应用程序中信息的语义或意义，而不仅仅是定义其表示或外观。根据 W3C，语义网：
“允许跨应用程序、企业和团体对数据进行分享和重用。”
好的语义化 HTML 也改善了网页文档的可访问性（参见网页内容无障碍指南）。例如，当屏幕阅读器或音频浏览器可以正确判定一个文档的结构时，视觉障碍用户不会再因阅读重复或无关的信息而浪费时间。
例如，<h1> 元素是一个语义化元素，赋予了它包裹着的文本“这个页面中最高级别标题功能“的角色 (或含义) 。
1<h1>This is a to ...
「青训营 X 码上掘金」制作一个翻转动效的个人名片
介绍
名片（Business card），是一种载有关于公司或个人的联系信息的卡片，常用于商务往来场合之中，作为一种便利和记忆辅助工具的共享。名片通常包括：姓名、单位或商业机构名称（通常带有商标）、以及联系信息（如：街道地址、电话号码、传真号码、电子邮件地址及网站）。
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。用代码制作一张名片最直观地介绍给别人的方式就是通过使用 HTML 绘制一个网页来显示了，下面我们就来制作一个翻转动效的个人名片。
实现
创建一个外部容器用来封装名片内部各个元素，一个内部容器用来实现翻转动效。
123<div class="flip-card"> <div class="flip-card-inner"></div></div>
翻转动效需要使用 CSS transform、transform-style 属性和 rotateY 函数，rotateY 函数定义了一个 2D 转换，它可以让一个元素围绕纵坐标 (垂直轴) 旋转，trans ...
「兔了个兔」纯 CSS 制作兔子、气球动画
介绍Hello，掘友们好！又是一年新春之际，祝福大家兔年快乐！下面我们使用纯 CSS 制作一个兔子、气球动画，效果为：一个圆形框内有只兔子，当我们在光标悬停在圆形框内或通过键盘 Tab 键导航来聚焦到圆形框元素时，小兔子将张大嘴巴，同时底部升起三只不同颜色的气球，上面的祝福语也会开启颜色动画，这个动效意味着掘友们能在新年大展宏图、步步高升。
实现
创建一个容器元素。
1<div class="container" tabindex="0"></div>
设置 tabindex=”0”，表示该容器元素是可聚焦的，并且可以通过键盘 Tab 键导航来聚焦到该元素。
创建顶部祝福语元素。
1<div class="prompt">大展宏兔 步步高升</div>
由于是在容器元素状态变化时，改变祝福语元素的状态，所以可以使用相邻兄弟选择器 +，且要将它们 position 属性设置为 absolute，从而将容器元素排在后面显示。祝福语元素的动画状态默认 paused，当容器元 ...
「兔了个兔」来看看夜晚能聚光的🐇
介绍宠物科普：小兔是有各种颜色的，它们的眼睛也是有不一样颜色的。那是因为它们身体里有一种叫色素的东西。兔子眼睛的颜色与它们的皮毛颜色有关系，黑兔子的眼睛是黑色的，灰兔子的眼睛是灰色的，白兔子的眼睛红色的。因为兔子是夜行动物，所以它的眼睛能大量聚光，即使在微暗处也能看到东西。
下面我们来做一个 svg 动效：一群在夜晚的兔子，眼睛发射着聚光，当鼠标悬停在 svg 元素上或通过键盘 Tab 键导航来聚焦到 svg 元素时时，将切换到白天正常的状态。
实现
定义 SVG 容器，设置视口在用户空间中的位置为 0 0，尺寸为 500 500。
12<svg viewBox="0 0 500 500" tabIndex="0"></svg>
设置 tabindex=”0”，表示 SVG 元素是可聚焦的，并且可以通过键盘 Tab 键导航来聚焦到该元素。
定义一个公共（可重用）的 svg symbol 图形模板对象元素。
12<symbol id="creature" viewBox="0 ...
兔年让这只🐇发射💣来爆破你的所有坏运
前言Hello，掘友们好！又是一年新春之际，祝福大家兔年快乐！给大家介绍一个有趣的动效（兼容 IE），页面右下角有一只搞怪的兔子，鼠标在页面中悬停时，兔子会跟着做出不同的动作和表情。然后可以在页面中任意位置（离兔子太近不能发射，会伤到兔子😆）点击鼠标，将从兔子眼睛👀里发射炮弹，随之击中爆破的是你的霉 运、压 力、贫 穷、疾 病😮💨。
实现
定义一个随机文本块。
1<p id="p1"></p>
定义兔子的构造函数。
12345678910111213141516171819function HoverRabbit() { this.explodeImage = new Image(); this.explodeImage.src = "img/explode.png"; for (var i = 1; i <= 6; i++) { this.images[i] = new Image(); this.images[i].src = "img/s" ...
使用 ECharts 制作掘金个人信息报表
前言码上掘金迎新年🎉活动开始好久了，大佬们也已经发了各种总结报告。但是我在码上掘金上面请求 api.juejin.cn 接口用户数据时报错 "name":"TypeError","message":"Failed to fetch"，通过打印 console.log(location.href) 显示为 code.devrank.cn，所以应该是跨域的问题。
所以，有些总结报告不能正常显示应该都是类似的问题。昨天终于发现茶无味的一天的作品2022年终总结互动网页，可以正常显示掘金接口的数据。
给大佬留言得到回复是请求的跨域请求的代理网站，因为发现还没有人做关于 ECharts 的报表，所以征得同意可以调用接口后，制作了一个 ECharts 掘金个人信息报表。
ECharts 报表是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器。
引入 ECharts虽然我们大部分使用 ECharts 是在 node 项目中，但为了简单， ...
前端本地存储数据库 IndexedDB 存储文件
介绍
IndexedDB 是一种浏览器底层 API，目前各浏览器都已支持，兼容性很好。
特点
IndexedDB 内部采用对象仓库（object store）存放键值对数据。可以存储结构化克隆算法支持的任何对象。每一个数据记录都有对应的主键，主键是独一无二的，并且不能有重复。
使用索引实现对数据的高性能搜索。
IndexedDB API 大部分都是异步的。不会通过返回值提供数据，而是要传递一个回调函数来获取返回值。
同大多数 Web 存储解决方案一样，IndexedDB 遵循同源策略。即可以访问相同域内存储的数据，但无法跨不同域访问数据。
可以存储文件、二进制对象。
在 Web Worker 中可用。
IndexedDB 属于 NoSQL 和事务型面向对象数据库系统。对数据库的所有操作，都要通过事务完成。
IndexedDB 允许存储和检索用键索引的对象，它可以存储结构化克隆算法支持的任何对象。
结构化克隆结构化克隆是由 HTML5 规范定义的用于复制复杂 JavaScript 对象的算法，例如 structuredClone() 函数的调用，Workers 的 postMessag ...
前端本地存储数据库 IndexedDB 的范围查询和对结果计数
介绍
IndexedDB 是一种浏览器底层 API，目前各浏览器都已支持，兼容性很好。
IndexedDB 内部采用对象仓库（object store）存放键值对数据。可以存储结构化克隆算法支持的任何对象。每一个数据记录都有对应的主键，主键是独一无二的，并且不能有重复。
使用索引实现对数据的高性能搜索。
IndexedDB API 大部分都是异步的。不会通过返回值提供数据，而是要传递一个回调函数来获取返回值。
同大多数 Web 存储解决方案一样，IndexedDB 遵循同源策略。即可以访问相同域内存储的数据，但无法跨不同域访问数据。
可以存储文件/二进制对象。
在 Web Worker 中可用。
IndexedDB 属于 NoSQL 和事务型面向对象数据库系统。对数据库的所有操作，都要通过事务完成。
后端开发者都知道，SQL 语句中有 BETWEEN 操作符和 COUNT() 函数可以用来对匹配的记录进行过滤和计数。IndexedDB 也提供了 IDBKeyRange 接口和 IDBObjectStore.count() 方法可以实现相同的目的。
1SELECT COUN ...