最新文章

我的编程之旅:你应该辞去目前的工作去追求你的目标吗?

本文讨论了是否应该辞去当前工作去追求个人目标的议题。作者认为这并不是每个人都能轻易做出的选择,因为这需要承担风险并兼顾其他责任如家庭、学业等。作者建议学会在工作之余安排时间追求目标,并衡量辞职的风险。同时,作者分享了自己的GitHub链接以展示正在进行的项目。文章讨论了追求目标的挑战和可能的建议,适合Devto社区成员阅读。

Administrator 博客 2025-06-08

我的编程之旅:学习数学!

我的编程之旅中学习数学的经历。起初害怕数学,但后来突破障碍,通过自主学习完成代数2的学习,并准备进入预备微积分等课程。建议耐心寻找适合自己的学习方法,结合可汗学院、书籍和YouTube视频等资源学习。同时,将数学应用于编程项目中巩固知识。最终,保持积极乐观态度,继续前行。此外,还分享了个人最新项目“完成广场”及其在GitHub上的相关信息。

Administrator 博客 2025-06-08

Writing custom TypeScript ESLint rules: How I learned to love the AST Why writing your own eslint plugins and rules ? The (not so) imaginary problem we’re solving Creating a TS project to lint If there’s a pattern, there’s automation Initializing our eslint plugin project Going further

这篇文章介绍了如何编写自定义TypeScript ESLint规则,以解决在测试期间出现的组件类型错误问题。文章首先解释了ESLint的工作原理和抽象语法树(AST)的作用,然后详细描述了如何初始化ESLint插件项目并创建TS项目进行lint。文章强调,如果有模式,就可以自动化,并给出了编写自定义ESLint规则的原因。最后,文章展示了如何通过创建AST来修复在酶测试中出现的泛型问题,并总结了AST在开发中的重要性。

Administrator 博客 2025-06-08

十大 Git GUI 客户端

摘要: 本文主要介绍了十大 Git GUI 客户端,包括 Visual Studio Code、Fork、Sourcetree、GitKraken、SmartGit、GitHub Desktop、Tortoise Git、Aurees 等。文章详细描述了每个客户端的特点和优势,并提供了相关网站链接供读者深入了解。这些 Git GUI 客户端可以方便开发者进行版本控制和管理,提高工作效率。

Administrator 博客 2025-06-08

前端的清洁架构

摘要: 本文介绍了前端的清洁架构,主要围绕待办事项列表应用程序的开发展开。作者分享了其在实践中的见解和示例代码,解释了如何在前端开发中实施清洁架构的理念。文章分为三个主要部分:清洁架构、高级前端架构和实体。在清洁架构部分,作者引用了Bob Martin的《清晰架构》一书,阐述了清洁架构的核心理念和其在前端开发中的应用。在高级前端架构部分,作者描述了新功能的高级架构图。在实体部分,作者强调了实体在清洁架构中的重要性,并给出了Todo实体的接口示例。本文有助于开发人员理解并应用清洁架构理念,提高前端开发的效率和可维护性。

Administrator 博客 2025-06-08

如何构建全栈 Next.js 应用(使用 Storybook 和 TailwindCSS)

摘要: 本教程将指导你如何构建全栈的Next.js应用程序,使用Storybook和TailwindCSS。文章先介绍了使用的技术和工具,然后详细阐述了构建流程,包括项目的初始设置、Tailwind CSS的添加和配置、Storybook的支持、项目范围的确定、前端规划、搜索组件、页眉和页脚、布局、结果、后端规划、搜索数据、API路由、静态和动态页面的处理、前端收尾工作、主题和设计系统的应用等。最后,文章总结了整个构建过程,并给出了添加Tailwind CSS和VS Code的Tailwind CSS IntelliSense扩展的步骤和推荐。

Administrator 博客 2025-06-08

理解现代 Web 技术栈:Babel

摘要: 本文介绍了理解现代Web技术栈中的Babel,包括版本信息和存储库、目录、Babel是什么、先决条件、初始化项目、安装Babel、转换代码、Polyfills和总结等方面的内容。文章解释了Babel作为一个工具,允许使用所有最新的语法和功能编写JavaScript代码,并在可能不支持这些功能的浏览器中运行,通过将当前的JS代码转换为更多浏览器能够理解的旧版JavaScript代码。此外,文章还介绍了初始化项目、创建包含现代语法的JavaScript文件以及使用Babel转译这些文件的流程。

Administrator 博客 2025-06-08

JavaScript 中的 WeakMap - 简单介绍

文章介绍了JavaScript中的WeakMap的基本概念和特点,包括其与其他数据结构如Map的区别。文章详细描述了如何创建WeakMap对象,介绍了WeakMap的一些基本方法和特性,包括其弱引用、不可迭代等特性。此外,文章还提供了添加元素和检索值的基本示例代码。最后,总结了文章的主要观点和要点。本文旨在帮助读者理解JavaScript中WeakMap的概念和应用。翻译自Devto上的文章。 摘要: JavaScript中的WeakMap是一种特殊的数据结构,主要用于存储键值对,其中键必须是对象。WeakMap具有弱引用的特性,这意味着当对象不再被其他变量引用时,它们可以被垃圾回收机制清除。与Map相比,WeakMap有一些重要的区别和限制,例如它不能迭代、没有size属性等。本文介绍了如何创建WeakMap对象,以及使用其set()、get()和delete()方法进行操作。文章还提供了关于如何使用这些方法的示例代码。通过本文,读者可以更好地理解JavaScript中WeakMap的概念和应用场景。

Administrator 博客 2025-06-08

即将推出的值得关注的 JavaScript ES2021(ES12)功能

标题:即将推出的值得关注的 JavaScript ES2021(ES12)功能 摘要: 本文将介绍JavaScript ES2021(ES12)中即将推出的值得关注的五个特性,包括String.prototype.replaceAll()、数字分隔符、逻辑赋值运算符、Promise.any()和WeakRef。本文将详细解释这些特性的用途和用法,以帮助读者更好地了解和利用这些新特性。 一、String.prototype.replaceAll() 让我们从JavaScript ES2021中一个较小的功能开始,但仍然是语言的一个不错的补充,那就是replaceAll()方法。目前,当你想要替换字符串中某个模式的多次出现时,可以使用replace()方法。问题是,如果你使用字符串,这将只允许你替换该模式的第一次出现。 这意味着如果你想替换所有出现的模式,你必须使用正则表达式。对于许多开发人员来说,正则表达式并不是他们的首选。远非如此。如果你也是这些开发人员之一,你一定会喜欢这个新replaceAll()方法。该方法的工作方式与replace()方法类似,不同之处在于它允许你替换所有出现的模式,而无需使用正则表达式。 二、数字分隔符 这是JavaScript ES2021中另一个非常小的功能,但它至少可以提高你的工作效率。尤其是在处理大数字时。数字分隔符提供了一种简单的方法,让大数字更易读、更易于操作。它的语法非常简单,就是一个下划线 (_)。 三、逻辑赋值运算符 JavaScript 允许在布尔上下文中使用逻辑运算符。然而,对于那些希望在变量上应用这些操作的开发者来说,有时可能会有些麻烦。在ES2021中,通过引入逻辑赋值运算符,我们可以更简洁地在变量上使用逻辑AND(&&)和逻辑OR(||)。这些新的逻辑赋值运算符可以大大简化代码,提高开发效率。 四、Promise.any() Promise.any()是ES2021中引入的一个非常有用的新特性。这个方法接收一个promise的iterable,并返回一个新的promise。当iterable中的任何一个promise成功解决时,新的promise就会解决为该值。如果所有的promise都被拒绝,那么新的promise就会用一个AggregateError被拒绝。这个新方法为处理多个独立的异步操作提供了一个非常有用的工具,特别是在你希望至少有一个操作成功的情况下。 五、WeakRef WeakRef是ES2021引入的另一个重要特性,它提供了一种方式来保持对对象的弱引用。这意味着即使存在对对象的WeakRef引用,也不会阻止对象被垃圾回收。这对于某些类型的资源管理非常有用,特别是当你想保留对某个对象的访问权但又不想阻止它在不再需要时被清理时。WeakRef可以用于各种场景,包括缓存策略和资源管理。总的来说,WeakRef为JavaScript的内存管理提供了一种新的方式。 总结: JavaScript ES2021(ES12)带来了新的功能和改进,这些功能将使开发人员的生活更加轻松,提高效率。从字符串处理到内存管理,ES2021都有一些值得关注的特性。在本文中,我们详细介绍了五个主要的特性:String.prototype.replaceAll()、数字分隔符、逻辑赋值运算符、Promise.any()和WeakRef。随着ES2021的发布,我们期待这些新特性在JavaScript开发中的广泛应用和讨论。

Administrator 博客 2025-06-08

如何通过三种方式编写异步 JavaScript 代码

摘要:本文介绍了如何通过三种方式编写异步 JavaScript 代码。由于 JavaScript 是单线程编程语言,同步调用会阻塞主线程,导致程序在等待期间无法响应。因此,需要编写异步代码以提高效率。本文概述了三种编写异步 JavaScript 代码的方法,包括使用回调函数、Promise 和 async/await。通过示例代码,文章解释了每种方法的工作原理和用法,并强调了异步编程的优点和需要注意的问题。

Administrator 博客 2025-06-08

如何创建自己的 React 自定义 Hooks

摘要: 本文主要介绍了如何创建自己的React自定义Hooks。首先,文章简要概述了React Hooks的概念和由来,解释了什么是React自定义Hooks以及为什么要使用它们。接着,文章详细阐述了创建React自定义Hooks的规则和步骤,包括钩子函数的命名、逻辑编写以及使用其他React Hooks的方式。文章以一个示例自定义Hooks——useWindowSize为例,展示了如何编写一个实用的自定义Hooks,并在最后提供了该Hooks的JavaScript代码。通过阅读本文,读者可以了解如何创建自己的React自定义Hooks,并将其应用于实际项目中以提升代码的可复用性和开发效率。

Administrator 博客 2025-06-08

JavaScript Fetch API 入门

文章摘要: 本文介绍了JavaScript Fetch API的入门知识,包括简要介绍、基础知识、使用承诺处理函数处理获取请求,以及使用await处理获取请求。文章详细解释了fetch API的使用方法和处理响应的方式,包括使用try...catch语句处理可能出现的错误。

Administrator 博客 2025-06-08

React useCallback Hook 快速指南

React useCallback Hook 快速指南摘要: 本文主要介绍了React中的useCallback Hook。首先简要概述了useCallback的功能和重要性,接着详细解释了其语法和使用方法。然后,通过具体例子展示了依赖项数组的作用,强调了依赖项在记忆化函数中的关键作用。最后,通过一个简单的例子演示了如何使用useCallback Hook来记忆函数,并指出了如果不正确使用依赖项数组可能导致的问题。本文旨在帮助开发者理解并正确使用React的useCallback Hook,以提高应用程序性能。

Administrator 博客 2025-06-08

创建良好 JavaScript 变量的 7 种做法

创建优秀 JavaScript 变量的七大策略摘要: 本文主要介绍了创建良好 JavaScript 变量的七种实践方法。首先是使用有意义且不言自明的变量名,这可以让代码更简洁、更易于阅读,节省开发人员的时间。其次是保持变量局部化,避免意外冲突和污染全局命名空间。通过这两种做法,可以大大提高代码的质量和可维护性。此外,文章还介绍了其他五种实践方法,包括避免使用保留字、避免使用通用变量名、使用常量代替魔术值等。遵循这些实践可以帮助开发人员创建出更加清晰、易于理解和维护的 JavaScript 代码。

Administrator 博客 2025-06-08

我从零开始构建了自己的 VS Code 语法高亮器,以下是我学到的东西。Redshift 语法高亮器

我从头开始构建了自己的VS Code语法高亮器,主要聚焦于Redshift语法的高亮。在此过程中,我遇到了一些挑战并学到了很多经验。 首先,我发现互联网上没有太多关于Redshift的语法高亮技术,因此在VS Code扩展商店中搜索时几乎没有找到相关的扩展。由于Redshift与PostgreSQL和Oracle非常相似,我尝试使用基于Oracle的扩展,但随着时间的推移,该扩展变得越来越庞大并出现了许多错误。 于是,我决定自己构建语法高亮器。一开始,我以为可以通过复制现有的扩展并进行修改来实现,但发现并没有那么简单。有两种实现语法高亮的方法,我选择了第一种方法,使用正则表达式在JSON包中声明要高亮的内容。 在构建过程中,我意识到语法高亮不仅仅是简单地高亮所有非自由文本。良好的语法高亮可以使函数的颜色与变量的颜色不同,注释的颜色与字符串的颜色不同。通过不同的突出显示区域,可以更容易地找到正在寻找的代码位。因此,我需要为我计划突出的内容找到合适的组别,并应用规则。 虽然遇到了一些挑战,但这个过程并不像我想象的那么难。通过学习和尝试,我使用Yeoman构建了一个VSCode扩展的工作shell,然后使用预定义的组别、JSON模板和正则表达式指南来创建我的语法高亮器。最终,我成功地编译并运行了扩展。 Git Hub仓库地址:[插入Git Hub仓库链接]。 这篇文章主要介绍了我在构建自己的VS Code语法高亮器过程中所遇到的挑战和学习到的经验。

Administrator 博客 2025-06-08

React.js - 你需要了解的事情

摘要: 本文介绍了React.js的基础知识,包括现代JS特性、开发环境、组件结构、React Hooks、路由、全局状态管理、HTTP服务交互等方面的内容。文章鼓励读者学习React之前先掌握HTML、CSS和JS的基础知识,并提供了相关资源和链接。此外,文章还介绍了如何管理全局状态以及与HTTP服务进行交互的方法,并推荐了一些相关的库和工具。最后,文章总结了在React项目中仍然使用Redux的原因。

Administrator 博客 2025-06-08

何时选择 Gatsby、Next.Js 或 Create React App

摘要: 本文主要介绍了何时选择使用 Gatsby、Next.Js 或 Create React App 这三个 React 框架/工具。文章详细解释了这三个工具的特点和适用场景。Create React App(CRA)是官方支持的创建单页 React 应用程序的方法,适用于商业应用程序、仪表盘和内部网络应用程序等。Gatsby 是一个渐进式 Web 应用生成器,适合用于内容丰富、需要一流 SEO 和极速性能的应用,如个人网站、博客、文档网站等。Next.js 提供了强大的路由功能、服务端渲染和丰富的 UI 库,适合大型项目或需要高级功能的项目。文章还提到了每个工具的优缺点,以及选择这些工具时需要考虑的风险。

Administrator 博客 2025-06-08

使用 React 和 TDD 创建计算器应用程序

摘要: 本文介绍了如何使用React和TDD(测试驱动开发)方法创建一个简单的Web应用计算器。文章首先介绍了TDD的基本概念,然后详细描述了如何设置项目环境,包括使用create-react-app和TypeScript模板。接下来,文章通过具体的编码实践,展示了如何开始编写失败的测试并创建Calculator组件,最终使其通过测试。全文内容专业,条理清晰,为开发者提供了一个创建计算器应用的实用指南。

Administrator 博客 2025-06-08

开发者免费 - 软件列表(SaaS、PaaS、IaaS 等)目录

摘要: 本文提供了为开发人员提供的免费软件列表,包括SaaS、PaaS和IaaS等产品。文章涵盖了各种云提供商、分析、API、代码质量、数据库等方面的免费服务。此外,文章还列出了Google云平台提供的各种免费服务详细信息,包括App Engine、Cloud Firestore、Compute Engine等。这些免费服务旨在帮助开发人员和开源作者选择和做出明智的决策。

Administrator 博客 2025-06-08

您的下一个 React Modal 具有您自己的“useModal”Hook 和 Context API。

摘要: 本文介绍了如何结合React的Hooks、Context API和Portals在React项目中创建自定义的Modal组件。文章首先回顾了Modal组件的创建过程,包括在public/index.html中添加新标签以使用React Portal呈现Modal组件。接着,文章展示了自定义Hook “useModal”的实现,该Hook用于保存Modal组件的状态。最后,文章解释了如何使用Context API跨组件共享状态,并指出Hook只能创建组件内部的“本地状态”,而要将实际状态传递给子组件,需要通过props或使用React Context。本文旨在帮助开发者理解和实现React项目中Modal组件的高级用法。

Administrator 博客 2025-06-08