最新文章

16 个开源项目助您改善开发人员工作流程

摘要: 本文介绍了16个开源项目,这些项目可以帮助开发人员改善工作流程并节省时间。这些项目涵盖了测试环境、身份验证解决方案、强大的分析、数据库管理和部署解决方案等多个方面。从火营到Supabase,这些工具旨在提高开发技术并优化工作流程。每个项目都提供了直接链接、描述和预览,以便读者在阅读文章时可以立即了解它们。这些开源项目为开发人员提供了丰富的资源和工具,有助于提高软件交付的质量和效率。

Administrator 博客 2025-06-09

使用 Typescript 的 useContext()

文章摘要: 本文介绍了如何使用 Typescript 的 `useContext()` hook 来创建全局上下文并在 React 应用中传递数据。文章首先解释了使用 `useContext()` 的先决条件,即需要基本熟悉 React 和 Typescript。接着,文章通过示例展示了如何创建顶层上下文、提供全局上下文以及如何在子组件中使用全局设置的上下文值。文章详细描述了使用 `MyGlobalContext` 创建全局上下文的过程,并展示了如何在 App 组件中将 context 包裹到父级以便其子组件可以访问 context 的值。最后,文章演示了如何在 Home 组件中使用全局设置的副本值。通过本文,读者可以了解如何在 React 应用中使用 Typescript 的 `useContext()` 来简化数据传递和管理全局状态。

Administrator 博客 2025-06-09

两行 CSS 代码实现从移动设备到桌面的菜单

文章摘要: 本文介绍了使用两行CSS代码实现从移动设备到桌面的菜单的创建过程。文章首先描述了菜单的复杂性和涉及的技术点,然后详细解释了如何利用一些最新和最强大的CSS功能来达到简单实现的目的。文章通过具体的代码示例和图像展示了菜单的结构、设计和实现过程,包括使用切换器来显示弹出窗口,以及在桌面和移动设备上呈现不同的菜单样式。最后,文章强调了菜单的灵活性和可访问性。 关键词:CSS,菜单,移动设备,桌面,切换器,弹出窗口

Administrator 博客 2025-06-09

前端安全:npm-audit 和脚本完整性

文章摘要:前端安全是现代web开发的重要组成部分。本文重点介绍了npm-audit和脚本完整性的重要性,并详细解释了如何使用它们来保护网站免受潜在的安全威胁。文章首先提到了全球数千个网站被代码劫持的事件,强调了安全问题的紧迫性。然后介绍了npm-audit的作用和如何使用它来检测和修复前端资源中的漏洞。接着,文章阐述了第三方脚本和脚本完整性的概念,以及如何通过使用unpkg等CDN来交付脚本,并强调了添加完整性属性到script标签中的重要性。最后,文章提供了如何获取脚本的完整性信息并将其添加到script标签中的具体步骤。本文旨在提高开发者对前端安全的认识,并帮助他们使用npm-audit和脚本完整性来增强网站的安全性。

Administrator 博客 2025-06-09

前端安全:内容安全策略

摘要:本文讨论了前端安全中的一项重要策略——内容安全策略(CSP)。作者首先介绍了CSP的基本概念,并详细描述了如何在服务器响应头或HTML中的`<meta>`标签中添加CSP。接着,文章通过具体示例,如添加脚本、谷歌字体和YouTube等内容的CSP条目,详细解释了如何实施CSP。最后,文章强调了CSP的重要性和其在保护网站安全方面的作用。 关键词:翻译,Devto,前端安全,内容安全策略(CSP)

Administrator 博客 2025-06-09

CSS 中的时钟和手表

摘要: 本文介绍了使用CSS创建时钟和手表的方法。首先,文章回顾了之前使用CSS三角函数创建时钟的例子,并展示了一个使用纯CSS创建的模拟时钟。接着,文章介绍了CSS引入的新功能,如`offset-path`,这些功能适合用于创建时钟的索引。文章详细解释了如何建立简单的网格作为时钟的基础,并展示了如何使用`<li>`元素和`offset-distance`/`offset-path`将它们放置在圆圈周围。此外,文章还解释了如何为每个`<li>`元素设置度数(实际上是百分比),以及如何使用有序列表`<ol>`来显示数字。最后,文章介绍了使用`cos()`和`sin()`函数来放置数字的方法。整篇文章内容简洁明了,重点突出了使用CSS创建时钟和手表的方法和技巧。

Administrator 博客 2025-06-09

帮助我在周末推出 MVP 的 5 种方法 定义成功是什么样子 保持简单 不要重新发明轮子 可重复使用的代码 重新利用您知道的工具 最后的想法

这篇文章介绍了作者如何在短时间内设计和发布一个在线平台的最小可行产品(MVP)的五个方法。这些方法包括定义成功标准、保持简单、避免重复造轮子、使用可重用代码和重新利用熟悉的工具。文章还提到了作者如何利用这些方法在周末内完成了Lancerlist的设计、构建和发布。这些概念和方法对开发人员在构建新产品时可能有所帮助。摘要翻译:这篇文章介绍了如何在短时间内设计和发布在线平台的MVP的五个方法,包括定义成功标准、简化设计、避免重复造轮子、使用可复用代码和借助熟悉的工具。这些方法有助于开发人员在短时间内完成产品设计并验证市场反应。

Administrator 博客 2025-06-09

使用 GitHub Actions 在共享主机上进行持续部署

文章摘要: 本文主要介绍了如何使用GitHub Actions在共享主机上进行持续部署。首先,文章介绍了持续部署的定义和重要性。接着,解释了什么是共享主机,并指出使用共享主机进行网站托管的常见方式。然后,文章重点介绍了GitHub Actions及其在持续部署中的应用。最后,通过具体的操作步骤,详细解释了如何在共享主机上设置GitHub Actions进行持续部署,包括创建工作流程、设置GitHub操作等关键步骤。

Administrator 博客 2025-06-09

变异没问题

摘要: 本文讨论了关于编程中的“变异”问题,探讨了函数式编程中的表达式和命令式语句的使用,以及局部突变和纯数学函数的概念。文章指出,尽管在某些情况下使用命令式语句可能没有问题,但如果过度使用,可能会引入不必要的复杂性和难以追踪的错误。文章还讨论了关于代码库实现细节的问题,强调了如果开发者过于关注工具或方法的实现细节,而忽视了整体的设计和架构,可能会导致代码库的复杂性和难以维护的问题。此外,文章还探讨了关于函数式编程中的Reduce函数的使用问题,指出过度依赖或使用Reduce可能会导致代码变得过于复杂和难以理解。最后,通过比较两种将用户转换为CSV格式的编程方法,文章进一步阐述了过度依赖一种特定的编程风格或方法可能会导致的问题。总的来说,文章提醒开发者关注代码的清晰性和简洁性,以及关注全局的设计和结构,而不是过度关注实现细节。

Administrator 博客 2025-06-09

回顾 Python - 基础知识祝你有美好的一天😃!。

摘要: 这篇文章主要回顾了Python的基础知识,包括变量、缩进、数据类型等。作者表达了对Python这门语言的热爱,因为它在软件开发的不同领域如Web开发、机器学习或数据科学中有广泛的应用。文章以一个回顾开始,介绍了作者近两个月的学习情况和重新学习Python的原因。然后详细解释了Python中的变量、缩进规则和数据类型等基本概念。文章还包含了一些代码示例,以帮助读者更好地理解这些概念。最后,文章以祝愿读者有美好的一天作为结尾。

Administrator 博客 2025-06-09

如何从头开始配置 Webpack 和 Vue

摘要: 本文介绍了如何从头开始配置Webpack和Vue。文章首先提到了像vue-cli、create-react-app和@angular/cli这样的工具,它们为开发者提供了预先配置好的项目和应用程序,省去了配置项目和设置Webpack等工具的麻烦。然而,作者出于好奇和探索,选择了手动配置Webpack和Vue。文章详细列出了安装所需的依赖项和工具,并解释了每个依赖项的作用和用途。最后,文章提到了创建index.html文件和webpack.config.js文件的步骤。整篇文章旨在帮助读者了解如何手动配置Webpack和Vue,从头开始构建项目。

Administrator 博客 2025-06-09

如何从头开始使用 Webpack & Friends 配置 React 祝你有美好的一天😃!。

摘要: 本文从如何从头开始使用Webpack和相关工具配置React入手,详细介绍了所需的依赖安装和关键配置步骤。文章强调了使用Babel的重要性,包括其预设的作用和如何转换JSX代码为JavaScript代码。同时,文章还对使用React声明的声明式代码与使用命令的命令行代码的优劣进行了简要解释。此外,还对Web技术的其他重要组件如npm趋势进行了介绍。全文简洁明了,提供了完整的步骤概述。

Administrator 博客 2025-06-09

使用 Typescript、Jest 和 React 测试库设置 Next.js

摘要: 这篇文章是关于如何使用 Typescript、Jest 和 React 测试库来设置 Next.js 的教程摘要。文中首先解释了为什么要这么做,然后列出了设置项目的步骤,包括创建 Next.js 应用程序、安装 typescript 以及相关的 node 类型、安装 jest 和其他测试库、创建配置文件以及启动应用程序以便配置 typescript 等步骤。这篇文章旨在帮助开发者使用这些工具来设置 Next.js 项目,以便进行更高效的开发。

Administrator 博客 2025-06-09

使用 React 和 Intersection Observer 创建部分导航 使用 React 和 Intersection Observer 创建部分导航

摘要: 本文介绍了如何使用React和Intersection Observer创建部分导航。文章首先介绍了项目的背景和目的,然后详细阐述了项目的实现过程,包括样板文件的创建、数据的获取、urql的安装和App组件的包装等步骤。文章还强调了Intersection Observer API的重要作用,并在项目中实际应用了该API以实现导航的高亮显示。整体内容简洁明了,为读者提供了创建类似项目的基本思路和步骤。

Administrator 博客 2025-06-09

Next.js 身份验证 - 使用 NextAuth.js 进行 JWT 刷新令牌轮换

摘要: 本文介绍了在Next.js应用中使用NextAuth.js进行JWT刷新令牌轮换的身份验证流程。文章首先描述了身份验证的基本流程,包括用户输入凭证、后端验证并返回accessToken、accessTokenExpiry和refreshToken。接着,文章强调了设置refetchInterval的重要性,以确保用户在令牌过期之前保持身份验证状态。然后,文章详细描述了服务器端逻辑,包括使用CredentialsProvider实现凭证身份验证,以及jwt回调中决定令牌是否可以刷新的逻辑。最后,文章提供了一个示例代码片段,展示了如何实现刷新访问令牌的函数。 关键词:Next.js 身份验证,NextAuth.js,JWT刷新令牌轮换。

Administrator 博客 2025-06-09

了解二进制系统如何工作的最简单方法。

介绍二进制系统的基本原理,解释为什么计算机使用二进制系统以及二进制的工作原理。文章通过类比手指计数的方式,形象地解释了二进制数的表示方法和工作原理。通过练习使用图像说明,读者可以了解二进制数的工作原理。文章来自Devto,关键词包括翻译、了解二进制系统如何工作的最简单方法等。

Administrator 博客 2025-06-09

使用 Performance.now() 对字符串字面量 ("") 和模板字面量 (``) 进行基准测试

文章摘要:对 JavaScript 中的字符串字面量("")和模板字面量(``)进行了基准测试,以比较它们的性能表现。文章介绍了两种定义字符串的方式,并通过使用 Performance.now() 进行性能测试,记录了测试结果,同时提供了不同方式下字符串连接的代码示例。

Administrator 博客 2025-06-09

使用 Cypress 进行 API 测试 - 第一部分

本文是关于使用 Cypress 进行 API 测试的教程的第一部分。文章介绍了 Cypress 的基本概念和特性,包括如何设置项目、自动化测试以及使用 Cypress 命令。本文总结了如何创建一个 Cypress 项目、如何设置环境并介绍了 Cypress 的主要测试类型。文章还提到了如何使用 Cypress 进行 API 测试的一些基本步骤和注意事项。

Administrator 博客 2025-06-09

创建更清洁的 MacOS 工作区

本文介绍了如何创建更清洁的 MacOS 工作区,包括使用 yabai 进行窗口管理,skhd 创建热键绑定,iTerm2 作为终端模拟器,pywal 生成配色方案,Übersicht 创建桌面小部件,ncmpcpp 和 mopidy 作为命令行音乐播放器,dmenu-mac 替代 Spotlight 启动器,以及 gotop 作为 htop 的替代品。此外,还介绍了其他定制选项,如 Firefox 和主题的自定义 CSS。文章关键词为创建更清洁的 MacOS 工作区、Devto。

Administrator 博客 2025-06-09

使用 CSS 变量赋予你的 CSS 超能力

本文介绍了如何使用 CSS 变量赋予 CSS 超能力。文章首先解释了什么是 CSS 变量,并指出大多数现代浏览器都支持 CSS 变量。接着,文章详细阐述了如何声明 CSS 变量,并给出了使用 CSS 变量的示例。文章还强调了 CSS 变量的力量,在于可以快速调整配色方案并在所有引用该方案的地方调整相同的颜色。最后,文章鼓励读者通过编辑 Codepen 来探索 CSS 变量的实际效果,并提供了关于访问其他类似文章的建议。

Administrator 博客 2025-06-09