web前端

程序设计实验室

返璞归真！使用 alpinejs 开发交互式 web 应用，抛弃 node_modules 和 webpack 吧！最近一直在使用 DjangoStarter 开发各种小项目，之前我是比较喜欢前后端分离的，后端用 Ninja API，前端 nextjs，开发起来也挺舒服的，交互体验也比较好。

Web前端之汉字排序、sort与localeCompare的介绍、编码顺序与字典顺序的区别不使用拼音库，利用JavaScript的localeCompare方法直接按汉字的字典序排序。localeCompare可以在比较字符串时指定语言及排序规则，它对中文字符排序时，会默认按拼音顺序排列。

一条晒干的咸魚

【Web前端】JavaScript 对象原型与继承机制JavaScript 是一种动态类型的编程语言，其核心特性之一就是对象和原型链。理解原型及其工作机制对于掌握 JavaScript 的继承和对象关系非常重要。

粥里有勺糖

浏览器中生成 OSS 令牌 | Web Crypto API笔者写文章的时候，都会把图片通过自己搭建的一个简单站点 https://imgbed.sugarat.top/ 把图片上传到各种云的对象存储服务（OSS）上。

使用 Wake Lock API：保持设备唤醒的最佳实践在现代 Web 应用中，尤其是涉及视频播放、实时通信、地图导航等长时间运行的任务时，用户常常希望设备不要因为空闲而自动进入睡眠模式或屏幕变暗。为了解决这一问题，Web API 提供了一个名为 Wake Lock 的接口，允许开发者请求设备保持唤醒状态。

物联网之ESP32与微信小程序实现指示灯、转向灯代码解析敬请期待…Html代码解析敬请期待…JavaScript代码解析敬请期待…

react-pdf预览在线PDF的使用建议安装8.0.2版本的react-pdf，如果安装更高版本的可能出现一些浏览器的兼容性问题；移动端加入放大、缩小、上一页、下一页的功能；

物联网之ESP32配网方式、蓝牙、WiFiESP32配网(Wi-Fi配置)的方式有多种，每种方式都有各自的优缺点。根据具体项目需求，可以选择适合的配网方式。

程序设计实验室

项目完成小结：使用DjangoStarter v3和Taro开发的微信小程序不知不觉已经九月了，又到了一年的开学季，我每年都想做的项目墙甚至连个影子都没有…😂最近生活中的琐事太多了，导致完全没有想写文章的动力，不过再怎么拖还是得记录，随便写写吧~

一条晒干的咸魚

”CSS 网格“二维布局系统（补充）——WEB开发系列32CSS 网格布局是一种二维布局系统，用于网页设计。通过使用网格，你可以将内容以行和列的形式进行排列。此外，网格布局还能够简便地实现一些复杂的布局结构。

一条晒干的咸魚

CSS 高级区块效果——WEB开发系列25CSS提供了多种工具和属性，使我们能够创建视觉上引人注目的效果。今天我们继续将深入了解几种高级CSS效果：盒子阴影、滤镜、混合模式和文本背景裁剪，提升网页设计的质感和深度。

一条晒干的咸魚

理解 CSS 层叠、优先级和继承——WEB开发系列15Web 开发中，CSS (Cascading Style Sheets) 是决定网页视觉呈现的关键技术之一。它为 HTML (Hypertext Markup Language) 提供样式，使得开发者能够控制页面布局、字体、颜色和其他视觉元素。然而，CSS 的强大功能伴随着一定的复杂性，尤其是在处理层叠、优先级和继承这些核心概念时。

一条晒干的咸魚

响应式 HTML 表单设计——WEB开发系列11HTML 表单是 Web 应用程序的重要组成部分，用户通过它与网站交互，可以填写信息、提交数据等。HTML 表单用于收集用户的输入信息。HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

一条晒干的咸魚

HTML 列表和容器元素——WEB开发系列10HTML 提供了多种方式来组织和展示内容，其中包括无序列表、有序列表、分区元素 <div> 和内联元素 <span>、以及如何使用 <div> 进行布局和表格布局。

一条晒干的咸魚

剖析HTML 元素——WEB开发系列02HTML元素是构成HTML文档结构的基本单位，定义了页面上的不同部分和内容。HTML元素可以包含不同类型的内容，如文本、图片、链接、表格等，每种元素都有其特定的用途和语义。通过组合和嵌套不同的HTML元素，可以创建复杂的网页结构和布局。

艾恩小灰灰

Tailwind CSS：颠覆常规的实用主义设计利器在前端开发领域，样式框架的选择一直是一个充满争议的话题。近年来，Tailwind CSS 以其独特的设计理念和实用性，迅速在开发者社区中走红，成为许多项目的新宠。本文将深入探讨 Tailwind CSS 的优势与不足，并通过代码示例展示其实际应用，同时给出使用建议，帮助你更好地决定是否将其纳入你的技术栈。

艾恩小灰灰

只用 CSS 能玩出什么花样？在前端开发领域，CSS 不仅仅是一种样式语言，它更像是一位多才多艺的艺术家，能够创造出令人惊叹的视觉效果。本文将带你探索 CSS 的无限可能，从基本形状到动态动画，从几何艺术到仿生设计，只用 CSS 就能玩出令人难以置信的花样。

如何在 Vue 和 JavaScript 中截取视频任意帧图片大家好！今天我们来聊聊如何在 Vue 和 JavaScript 中截取视频的任意一帧图片。这个功能在很多场景下都非常有用，比如视频编辑、视频预览等。本文将带你一步步实现这个功能，并且会提供详细的代码示例。

艾恩小灰灰

CSS Modules：重构前端样式的未来？在前端开发领域，CSS Modules 是近年来备受关注的一种样式解决方案，它改变了传统 CSS 的全局共享模式，引入了一种局部作用域的概念。这种变化不仅提升了样式的可维护性和可复用性，还促进了组件化开发的进一步成熟。本文将深入探讨 CSS Modules 的概念、优点、局限性以及如何在项目中应用这一技术。

深入理解 React 的 useSyncExternalStore Hook大家好，今天我们来聊聊 React 18 引入的一个新 Hook：useSyncExternalStore。这个 Hook 主要用于与外部存储同步状态，特别是在需要确保状态一致性的场景下非常有用。本文将深入探讨这个 Hook 的使用场景、工作原理，并通过代码示例来帮助大家更好地理解。