大前端技术
文章平均质量分 88
前端技术
独立开发者张张
集美美图App开发者、极简主义创业者、独立开发者、一人企业CEO、猫奴、做过美团骑手、躺平了
展开
-
为什么你的下一个项目应该使用 NextJS 而不是 React?
服务器端渲染(SSR)是服务器在每次请求时生成网页完整 HTML 内容的一种方法。这与客户端渲染(CSR)形成鲜明对比,后者是由浏览器获取最小的 HTML 文档,然后由 JavaScript 来动态渲染内容。可以把 SSR 想象成服务器是一位尽心尽力的大厨,在美食上桌前精心准备,而 CSR 就像一位家庭厨师,需要在厨房里把饭菜一件件组装起来。原创 2024-09-18 20:55:45 · 823 阅读 · 0 评论 -
NuxtHub 测试版发布,一种以零配置在全球范围内构建全栈 Nuxt 应用程序的新方法
翻译自:https://hub.nuxt.com/blog/beta我们很高兴地宣布 NuxtHub 的测试版发布,这是一种以零配置在全球范围内构建全栈 Nuxt 应用程序的新方法。3 个月内拥有超过 700 名 alpha 测试人员和 3,000 个项目部署,我们很高兴地宣布 NuxtHub 现已进入公开测试阶段 ✨NuxtHub 是的扩展,可帮助您在 Cloudflare 帐户上以零配置构建全栈应用程序。翻译 2024-07-05 21:12:44 · 143 阅读 · 0 评论 -
CSS属性选择器具有不区分大小写的模式
今天,我偶然发现了 caniuse.com 项目的一期,其中提到了新的和即将推出的 CSS Level 4 选择器。原创 2024-06-21 22:01:15 · 350 阅读 · 0 评论 -
innerHTML 的新替代方案
浏览器支持说明:所有浏览器都支持。setHTML仍在标准化中,仅在 Firefox 中可用。自版本 125 起在 Chrome 和 Edge 中受支持。浏览器最近实施了一种新的方法。这里的Unsafe意味着,就像innerHTML一样,它不执行输入清理。这种命名方式与以前的浏览器 API 并不一致:我们有innerHTML,但没有;有eval(),但没有,等等。但与老方法不同的是,它既有安全版本(setHTML),也有不安全版本()–这就是命名的由来。原创 2024-05-22 22:44:58 · 824 阅读 · 0 评论 -
在 CSS 中使用 text-emphasis 来增强文本的趣味性
您可以更改颜色、大小、字体,甚至添加阴影和轮廓等效果。但最近,我了解到一个我以前没有听说过的时尚 CSS 属性,它非常棒!属性是一种有趣的方式,可以增加对文本的强调,并可用于为您的设计增添趣味。大多数现代浏览器都支持它,因此您可以立即开始使用它来使您的文本脱颖而出!属性组合的简称,可以为文本添加强调标记。这些标记可用于以各种方式突出显示文本,例如在文本上方或下方添加点、圆、双圆或文本。您甚至可以使用表情符号来强调文本。您也可以使用字母来强调文本。这将在文本顶部添加一个点,如下所示。原创 2024-05-14 18:04:32 · 484 阅读 · 0 评论 -
如何使用 Node.js 发送电子邮件全解和相关工具推荐
是的,您可以使用自定义的 SMTP 服务器发送电子邮件。您需要在传输器选项中提供 SMTP 服务器的主机、端口和身份验证详细信息。原创 2024-04-19 02:10:06 · 1294 阅读 · 0 评论 -
如何打造一个好的(Vue)组件库?这里有一个清单
你是否考虑过在 Vue.js 或其他框架中构建组件库,或者你需要它来构建可重用的设计系统,以减少投入市场的时间并提供视觉一致性,或者你想为社区贡献另一个组件库。你可能想立即投入进去并开始编码,但是首先你必须退后一步,问问自己:“是什么构成了一个好的组件库?让我们在这篇文章中回答这个问题,给你一个我们认为是必要考虑的项目清单。原创 2024-04-03 21:19:52 · 1022 阅读 · 0 评论 -
为什么 Vite 是最好的?探索 Vite 的高级功能
Vite 是一个现代的前端构建工具,它以其速度和简洁性在 Web 开发社区中备受关注。但是,是什么让 Vite 成为您下一个项目的最佳选择呢?让我们深入研究它的高级特性,以更好地理解它为什么会脱颖而出。原创 2024-03-30 23:37:38 · 363 阅读 · 0 评论 -
小技巧|如何向文本添加渐变效果和图案
在这个快速技巧中,我们将展示向网页上的文本添加渐变效果和图案是多么容易。我们实现此目的的方法是使文本透明,通过属性在文本上放置背景装饰,并使用将该背景装饰剪切到文本字符。我们可以创建的一些示例如下图所示。原创 2024-03-27 15:59:56 · 715 阅读 · 0 评论 -
实战|使用 Node.js 和 htmx 构建全栈应用程序
在本教程中,我将演示如何使用 Node 作为后端和 htmx 作为前端来构建功能齐全的 CRUD 应用程序。这将演示 htmx 如何集成到全栈应用程序中,使您能够评估其有效性并确定它是否是您未来项目的不错选择。htmx 是一个现代 JavaScript 库,旨在通过实现部分 HTML 更新来增强Web应用,而无需重新加载整个页面。与传统前端框架中的 JSON 有效载荷不同,它通过有线方式发送 HTML 来实现这一功能。原创 2024-03-25 22:10:48 · 1204 阅读 · 0 评论 -
使用 Array.prototype.with 更新不可变数组
使用本文介绍的四种方法之一可以在 JavaScript 中更轻松地实现不可变更新原创 2024-03-11 22:09:52 · 438 阅读 · 0 评论 -
Vue3:使用 Composition API 不需要 Pinia
一个引人注目的替代方案是利用 Composition API 将数据和业务逻辑封装在自定义 hooks 中。这些钩子(以useStore函数为例)成为状态定义、更新和特定业务逻辑的中心。反过来,组件只需要与这些钩子公开的状态和方法进行交互,从而抽象出内部的复杂性。// 使用 Composition API 自定义 hook// 在 useStore 函数外部定义 count 变量});原创 2024-03-03 21:15:52 · 646 阅读 · 0 评论 -
2024 年十大 Vue.js UI 库
Vue.js 是一个流行的 JavaScript 框架,它在前端开发者中越来越受欢迎,以其简单、灵活和易用性而闻名。Vue.js 如此受欢迎的原因之一是它拥有庞大的 UI 库生态系统。这些库为开发人员提供了预构建的组件和工具,帮助他们快速高效地构建漂亮且响应性强的用户界面。所以,让我们来看看 2024 年排名前 10 的 Vue.js UI 库,以确保您的开发生产力尽可能高!原创 2024-02-05 15:11:09 · 2242 阅读 · 0 评论 -
VueFire:一个一流的 Vue 和 Firebase 体验,包括对 Nuxt 的支持,现在已经稳定了
一个一流的 Vue 和 Firebase 体验 — 包括对 Nuxt 的支持,现在已经稳定了。Vue 和 Firebase 现在比以往任何时候都更好了。原创 2024-01-31 19:26:48 · 1141 阅读 · 0 评论 -
fsx 简介:适用于 JavaScript 的现代文件系统 API
我们今天拥有的 JavaScript API 比十年前要好得多。考虑一下从到fetch()的转变:开发者体验显著改善,允许我们编写更简洁、功能性更强的代码来完成同样的事情。异步编程的 promises 的引入允许了这种变化,以及一系列其他变化,使得 JavaScript 更容易编写。然而,有一个领域几乎没有创新:服务器端 JavaScript 运行时的文件系统 API。原创 2024-01-24 15:02:03 · 652 阅读 · 0 评论 -
如何优雅的发布一个 TypeScript 软件包?
向 NPM 发布软件包本身并不是一个特别困难的挑战。但是,配置你的 TypeScript 项目以取得成功可能是一个挑战。你的软件包能在大多数项目上运行吗?用户能否使用类型提示和自动完成功能?它能与 ES Modules (ESM) 和 CommonJS (CJS) 风格的导入一起使用吗?阅读完本篇文章后,你将了解如何使你的 TypeScript 包在任何(或大多数)JavaScript 和 TypeScript 项目中更易于访问和使用,包括浏览器支持!原创 2024-01-22 21:27:45 · 950 阅读 · 0 评论 -
DOMPurify:一个只针对 DOM 的、超快的、宽容的 HTML XSS清理工具
是一个只针对 DOM 的、超快的、超容忍的 HTML、MathML 和 SVG 跨站脚本清理器。DOMPurify 于 2014 年 2 月发布,目前已经达到 v3.0.8 版本。DOMPurify 是用 JavaScript 编写的,在所有现代浏览器(Safari(10 ),Opera(15 ),Edge,Firefox 和 Chrome - 以及几乎所有使用 Blink,Gecko 或 WebKit 的浏览器)上都可以运行,它不会在 MSIE 或其他旧版浏览器上崩溃。原创 2024-01-21 15:41:19 · 2235 阅读 · 0 评论 -
2024 年 Vue.js 会发生什么
就像前端开发世界的其他部分一样,Vue 世界发展得很快。在这篇文章中,我想了解一下 Vue 的现状,并分享我对 2024 年发展趋势的预测。原创 2024-01-20 14:44:42 · 1499 阅读 · 0 评论 -
2023 年顶级前端工具
在过去的 12 个月里,我在我的时事通讯中分享了数百种工具。我为前端和全栈开发人员提供了大量实用的库、帮助程序和其他有用的东西。这些工具涵盖许多类别,包括 JavaScript 库和实用程序、Web 框架、CSS 生成器、数据库工具、React 组件、CLI 工具,甚至 ChatGPT 和基于 AI 的工具,后者是我在过去一年中开始定期介绍的工具。本文中的 60 个工具是我的时事通讯中 2023 年点击次数最多的 Web 开发人员工具。原创 2024-01-18 16:37:59 · 1295 阅读 · 0 评论 -
htmx 只是另一个 JavaScript 框架吗?老外都吵上了
对 htmx 最常见的批评之一通常来自第一次听说它的人,如下所示:你抱怨现代前端框架的复杂性,但你的解决方案只是另一个复杂的前端框架。这是一个很好的反对意见!对于你引入到项目中的任何第三方 (3P) 代码,你都有权提出疑问。即使你没有亲自编写 3P 代码,但只要将其纳入项目,你就必须了解它–如果你想升级它,就必须重新了解它。让我们将这些批评分解成其组成部分,并确定htmx在其声称要解决的伤害中到底有多少沉迷其中。原创 2024-01-15 14:03:15 · 625 阅读 · 0 评论 -
Rough.js:创建手绘、草图外观的图形
是一个小型的(原创 2024-01-07 16:46:33 · 542 阅读 · 0 评论 -
date-fns v3 发布——这个由 200 个函数组成的 JavaScript 日期处理套件
经过几个月的开发,v3 终于出来了!对于大多数开发人员来说,升级不需要做任何改动。对某些人来说,升级也是轻而易举的事。原创 2023-12-24 15:21:09 · 397 阅读 · 0 评论 -
NativePHP:使用 PHP 构建桌面应用程序
PHP 在我心中占据着特殊的位置。它是我的第一份工作,我记得我在家里花了无数个小时做一些小项目。我非常想用 PHP 创建桌面应用程序,但我从来没有做到过。,我可以了。NativePHP 追随 Slack、Discord 和 Trello 等流行应用程序的脚步,将您的 PHP 应用程序包装在 Electro 中。它允许后端逻辑在 PHP 上运行,而 UI 则使用 HTML、CSS 和任何 JavaScript 框架构建。原创 2023-12-22 17:38:37 · 480 阅读 · 0 评论 -
如何优雅地观察 Vue.js 3 中 localStorage 的变化?
原生 localStorage 只能监听同源跨不同页面的变化。然而,对于单页面应用程序来说,这种方式并不实用。因此,我打算创建一个自定义钩子来监视 localStorage 中的变化。我们需要重写 localStorage 下的所有方法,以便无论何时使用它们都可以被观察到。emit 事件接口,我们可以使用 mitt 或 tiny-emitter 等第三方库来实现此功能。好了,这就是全部了。不过,我打算使用自己实现的中介模式作为通信方法。第三,我实现了 useStorage 钩子。由于 Vue 3 删除了。原创 2023-12-14 16:32:33 · 241 阅读 · 0 评论 -
JS 云服务 Deno Depoly 宣布,推出定时运行功能 Deno Cron
Web 构建日益复杂。编写现代软件包括利用云基础设施、剖析模板代码和管理复杂的配置,而开发人员只想专注于编写业务逻辑。Deno 旨在通过删除配置和不必要的模板,从根本上简化 Web 开发。我们将无服务器数据库和(一种卸载任务或安排未来工作的方法)直接内置到运行时中,因此将它们添加到应用程序中只需几行代码即可。原创 2023-12-10 19:44:28 · 215 阅读 · 2 评论 -
仅 CSS 阅读进度条
为了构建一个阅读进度条,即显示用户向下滚动时阅读文章的进度,很难不考虑 JavaScript。但是,事实证明,您也可以使用纯 CSS 构建阅读进度条。我们将用它来创建阅读进度条。,将动画时间轴绑定到视口的垂直滚动位置。这将确保当用户向下滚动页面时进度条具有动画效果。固定在视口顶部并调整其背景颜色,该颜色始终对用户可见。这将确保用户向下滚动页面时进度条始终可见。接下来,我们将定义进度条的样式。使用不同的背景颜色,并将其高度设置为。现在,为了使进度条动画化,我们将为。,这实际上将进度条的宽度从。原创 2023-12-04 18:12:58 · 327 阅读 · 0 评论 -
基础:JavaScript的怪癖之一:提升(Hoisting)
在我们深入研究细节之前,让我们揭开 JavaScript 中提升的神秘面纱。提升是一个后台进程,它在编译阶段将变量和函数声明移动到它们所包含作用域的顶部。这允许你在正式声明它们之前就使用它们。想象一下,它就像一个魔术师从帽子里拿出一只兔子,兔子就是你的变量或函数,帽子就是 JavaScript 引擎,提升确保魔术师(JavaScript)总是能找到它需要的兔子(变量或函数),无论它被放在代码的什么位置。原创 2023-11-08 15:17:30 · 184 阅读 · 0 评论 -
关于 Vue 样式的 7 个你(可能)不知道的技巧
单文件组件由三个不同的实体组成:模板、脚本和样式。所有这些都很重要,但后者往往被忽视,尽管它可能会变得复杂,并经常导致挫折和错误。更好地理解可以改进代码审查并减少调试时间。原创 2023-11-07 13:53:54 · 209 阅读 · 0 评论 -
保护生产中 Node.js 应用程序安全的 15 项最佳实践
在后端开发方面,Node.js 是开发人员最喜欢的技术之一。它的受欢迎程度不断上升,现已成为在线攻击的主要目标之一。这就是为什么保护 Node.js 免受漏洞和威胁至关重要。在本指南中,您将看到为生产设计安全 Node.js 应用程序架构的 15 种最佳实践。实施所有这些实践,让您的后端比以往任何时候都更安全!原创 2023-10-30 16:19:45 · 378 阅读 · 0 评论 -
RDB.js:适用于 Node.js 和 Typescript 的终极对象关系映射器
是适用于 Node.js 和 Typescript 的终极对象关系映射器,可与 Postgres、MS SQL、MySQL、Sybase SAP 和 SQLite 等流行数据库无缝集成。无论您是使用 TypeScript 还是 JavaScript(包括 CommonJS 和 ECMAScript)构建应用程序,RDB 都能满足您的需求。原创 2023-10-22 15:36:48 · 697 阅读 · 0 评论 -
在 JavaScript 中验证 URL 的新方法(2023 年版)
在 JavaScript 领域,URL 验证方面有了新消息!多年来,人们一直在咒骂 JavaScript 没有一种简便的方法来验证 URL,现在有了一种新方法–唯一剩下的问题是“什么是有效的 URL?因为这是个棘手的问题。是一种快速判断字符串是否为有效 URL 的方法。但在我们兴奋之前,在撰写本篇文章时,目前也得到了很好的支持,因此可以按照一般建议使用构造函数来验证 URL。不过你可以在下面找到最新的浏览器支持信息。放在辅助函数中,检查它是否会抛出异常并将其调用!构造函数相同的算法来评估有效的 URL。翻译 2023-09-17 21:30:19 · 322 阅读 · 0 评论 -
React.js组件设计的8个最佳实践
通过遵循这些 React 组件设计的最佳实践,您将能够创建更简洁、更可维护和可重用的组件。每个实践都强化了一些重要原则,如单一责任、可重用性、PropTypes和性能优化。将这些实践融入 React 项目将有助于提高代码质量、改善开发人员体验,并最终实现更强大的应用程序。请记住,掌握这些最佳实践需要实践和不断学习。了解不断发展的 React 生态系统的最新动态,并始终致力于编写高效、可读性强且易于维护的代码。原创 2023-08-25 23:44:54 · 167 阅读 · 0 评论 -
Node.js究竟是什么?初学者指南
从Node.js官网来看,它是这样说的:Node.js 是一个开源、跨平台的 JavaScript 运行时环境。为了定义Node.js,我们需要将定义分成几个部分。我们要定义的术语是:开源跨平台的运行时环境编程语言的运行时环境是指用户可以执行用该语言编写的代码的任何环境。该环境提供运行代码所需的所有工具和资源。Node.js 是一种 JavaScript 运行时环境。除了 Node.js,JavaScript 运行环境的另一个例子是网络浏览器。原创 2023-08-05 22:30:12 · 162 阅读 · 0 评论 -
【收藏】用Vue.js来构建你的Web3应用,就像开发 Web2 一样熟悉
作为一名涉足去中心化网络的前端 JavaScript 开发人员,您可能遇到过许多 Web3 开发解决方案。但是,这些解决方案通常侧重于钱包集成和交易执行,这就造成了学习曲线,偏离了熟悉的 Web2 开发体验。但不用担心!有一种解决方案可以无缝衔接 Web2 和 Web3,它就是。在本篇博文中,我们将探讨如何利用 Vue 和 Juno 的强大功能来开发去中心化应用程序(dApps)。加入我们的旅程,揭开 Juno 的神秘面纱,让您轻松创建非凡的去中心化体验!原创 2023-07-25 15:18:19 · 339 阅读 · 0 评论 -
为ReactJS工程师学习Swift和SwiftUI提供的几个代码实例
SwiftUI带来了一种声明式的UI构建方式,类似于ReactJS,但与Swift集成得更紧密。了解ReactJS和SwiftUI之间的这些映射可以使两者之间的过渡更加直观。虽然这涉及到一个学习曲线,但了解模式的异同可以使这一过程更加顺利。请记住,SwiftUI正在迅速发展,因此请及时了解最新的更改和功能。当您准备好使用HTTP请求并将应用程序连接到远程API时,请查看 “从JavaScript过渡到Swift和SwiftUI?从这个简单的网络层开始”。原创 2023-07-21 15:28:11 · 529 阅读 · 0 评论 -
JavaScript多功能甘特图组件 - jsGantt
jsGantt是一个可定制的、灵活的、多语言的甘特图组件,由原生 JavaScript 构建。它使用客户端渲染以获得快速的性能和动态的交互性。非常适用于任何需要交互式时间线或时间表显示的项目。原创 2023-07-03 14:57:55 · 1875 阅读 · 0 评论 -
适用于Vue 3的最佳开源分页库
从头开始实现分页可能是一项耗时的任务,需要大量的精力和资源。幸运的是,有几个伟大的开源库可以简化这个过程,提高你的效率。使用分页库可以节省你的时间和精力,使你能够专注于建立你的应用程序的其他更重要的功能。在这篇文章中,我们将探讨一些适用于Vue 3的最佳分页库,回顾它们的特点、受欢迎程度和支持情况。这些库配备了预置的组件、样式和功能,使开发者很容易在他们的项目中快速添加分页功能。让我们开始吧!原创 2023-06-29 16:04:03 · 2484 阅读 · 0 评论 -
Vue.js 3 开源组件推荐:代码差异查看器插件
一个Vue.js差异查看器插件,可以用来比较两个代码片断之间的差异。3.可用的组件props。2.向模板中添加组件。原创 2022-10-24 11:34:17 · 2411 阅读 · 0 评论 -
Tauri vs Electron:真实项目的比较
Electron正在被取代?是的,Tauri要好得多,但它仍然错过了很多。几年后,我相信Tauri团队会赶上Electron的应用。我感到兴奋的是。Deno作为后端,更好的自动更新和iOS/Android支持。翻译 2022-09-20 15:05:45 · 10317 阅读 · 0 评论 -
像专业人员一样验证你的Vue Props
Vue 要求将传递给组件的任何数据显式声明为 props。此外,它还提供了一个强大的内置机制来验证这些数据。这就像组件和消费者之间的合同一样,确保组件按预期使用。让我们来探讨一下这个强大的工具,它可以帮助我们在开发和调试过程中减少错误并增加我们的信心。翻译 2022-09-17 15:50:47 · 142 阅读 · 0 评论