文章列表


如何使用 Django 模型执行 CRUD 操作

<p>Django 是一个超级有用的工具,用于使用 Python 构建 Web 应用程序。它遵循模型-视图-模板 (MVT) 体系结构,这是一种用于构建 Web 应用的流行设计模式。</p><p>在 MVT 架构中,模型是指存储信息的内部表示,视图负责处理用户请求并返回适当的响应,模板负责呈现从视图接收的数据。</p><p>本指南重点介绍体系结构的“模型”部分,该部分是应用程序的核心组件,也是设计应用程序时通常从该部分开始的地方。该模型负责数据的内部表示,并提供直接与数据库交互的接口。</p><p>在本教程中,您将学习如何使用 Django 的交互式 shell 来创建、读取、更新和删除对象。您还将学习如何在管理界面中注册模型,这对于为您的 Django 项目设计组织良好的数据库非常有用。</p><p>这些技能将使您能够更有效地管理您的项目并确保它们顺利运行。</p><p>先决条件</p><p>为了充分利用本教程,你需要对 Python 和 Django 有基本的了解。</p><p>如何设置项目</p><p>为了帮助您理解本教程中的概念,您将开发一个简单的“待办事项”应用。</p><p>首先,创建一个新目录,您将在其中托管项目,然后将目录更改为该目录。</p><p>进入文件夹后,安装 ,一个用于建立隔离 Python 环境的工具。virtualenv</p><p>pip install virtualenv</p><p>virtualenv venvsource venv/bin/activate</p><p>pip install virtualenv安装必要的工具。 创建一个名为 venv 的虚拟环境。最后,激活虚拟环境,允许在指定环境中进行隔离的 Python 开发。virtualenv venvsource venv/bin/activate</p><p>随意将“venv”替换为您在创建虚拟环境时选择的名称。</p><p>确保已安装 Django。如果没有,请通过命令行安装它,如下所示:</p><p>pip install django</p><p>使用以下命令启动项目:</p><p>django-admin startproject todoproject</p><p>切换到项目目录,然后创建一个新应用。todoproject</p><p>cd todoproject</p><p>python manage.py startapp todoapp</p><p>接下来,将应用的名称包含在 的列表中。在代码编辑器中,导航到文件。INSTALLED_APPSsettings.pysettings.py</p><p>&nbsp;<span style="color: #569cd6;">INSTALLED_APPS</span> = [</p><p>&nbsp; &nbsp; <span style="color: #ce9178;">&#39;django.contrib.admin&#39;</span>,</p><p>&nbsp; &nbsp; <span style="color: #ce9178;">&#39;django.contrib.auth&#39;</span>,</p><p>&nbsp; &nbsp; <span style="color: #ce9178;">&#39;django.contrib.contenttypes&#39;</span>,</p><p>&nbsp; &nbsp; <span style="color: #ce9178;">&#39;django.contrib.sessions&#39;</span>,</p><p>&nbsp; &nbsp; <span style="color: #ce9178;">&#39;django.contrib.messages&#39;</span>,</p><p>&nbsp; &nbsp; <span style="color: #ce9178;">&#39;django.contrib.staticfiles&#39;</span>,</p><p>&nbsp; &nbsp; <span style="color: #ce9178;">&#39;todoapp&#39;</span> <span style="color: #6a9955;"># new app]</span></p><p>Django 模型</p><p>模型就像 Django 中所有数据的首选专家。这就像一个详细的计划,说明您要存储哪些信息、如何存储以及如何检索这些信息。</p><p>待办事项应用程序将存储任务。通过仅存储要完成的任务的标题及其完成状态(即任务是否已完成),您将保持简单。在文本编辑器中打开该文件并添加以下代码:models.py</p><p>from django.db import modelsclass Task(models.Model):</p><p>&nbsp; &nbsp; <span style="color: #569cd6;">title</span> = models.CharField(<span style="color: #569cd6;">max_length</span>=100)</p><p>&nbsp; &nbsp; <span style="color: #569cd6;">completed</span> = models.BooleanField(<span style="color: #569cd6;">default</span>=False)</p><p>在这个超级简单的模型中:</p><p>Task是模型的名称。</p><p>title是最大长度为 100 个字符的类型字段。此字段适用于存储短文本。CharField</p><p>completed是默认值为 的类型字段。此字段是一个布尔值 (True/False)。默认值设置为 ,假设任务在默认情况下以未完成状态开始。BooleanFieldFalseFalse</p><p>模型的主要部分是它存储的事物列表(称为字段)。 和 是字段,属于 和 字段类型。titlecompletedBooleanFieldCharField</p><p>您可以使用的其他字段类型示例包括:</p><p>AutoField:自动递增。IntegerField</p><p>BooleanField:表示 true/false 值。</p><p>CharField:存储基于文本的值。</p><p>DateField:表示使用实例的日期。datetime.date</p><p>DateTimeField:表示使用实例的日期和时间。datetime.datetime</p><p>DecimalField:表示使用实例的固定精度十进制数。Decimal</p><p>EmailField:验证值是否为有效的电子邮件地址。CharField</p><p>ImageField:继承自 ,确保上传的对象是有效的图像。FileField</p><p>IntegerField:将整数值存储在安全范围内。</p><p>SlugField:表示某物的短标签,通常用于 URL。</p><p>TextField:一个大的文本字段。</p><p>TimeField:表示使用实例的时间。datetime.time</p><p>URLField:a 表示 URL。CharField</p><p>其他字段类型解释了表之间的关系:</p><p>ForeignKey:表示多对一关系。</p><p>ManyToManyField:表示多对多关系。</p><p>OneToOneField:表示一对一的关系。从本质上讲,它类似于 with ,但关系的“反向”侧直接产生单个对象。<span style="color: #569cd6;">ForeignKeyunique</span>=True</p><p>若要将数据库与 Django 模型中的最新更改同步,必须运行迁移。请确保您与文件位于同一目录中,然后运行以下命令:manage.py</p><p>python manage.py makemigrations</p><p>python manage.py migrate</p><p>截图-2024-01-12-14-48-39进行迁移</p><p>在文件中注册模型。这使管理员能够通过 Django 管理界面查看、添加、编辑和删除模型的实例。这是在开发和测试期间与数据交互的便捷方式。admin.pyTask</p><p><span style="color: #6a9955;">#admin.pyfrom django.contrib import adminfrom .models import Task# Register your models here.admin.site.register(Task)</span></p><p>你需要创建一个才能访问 Django 管理界面。在终端中,运行以下命令:superuser</p><p>python manage.py createsuperuser</p><p>截图-2024-01-12-14-52-19创建超级用户</p><p>按照提示操作,您应该有一个超级用户帐户来访问管理界面。</p><p>The Django Shell</p><p>你通常会在视图中编写逻辑,但由于我们想做更多的实验,你将使用 Django shell。它是一个功能强大且用途广泛的工具,可增强 Django 项目的开发和测试体验。shell 还提供了一个动态的交互式环境,用于处理代码、数据和模型。</p><p>若要访问 shell,请从项目目录运行以下命令:</p><p>python manage.py shell</p><p>首先导入任务模型。</p><p>截图-来自-2024-01-12-15-15-57将模型导入 Django shell</p><p>对模型执行的基本操作通常是创建、读取、更新和删除,因此得名 CRUD 应用程序。您将在此处学习如何执行所有四个操作。</p><p>创造</p><p>若要创建新任务,请在 shell 中键入以下命令:</p><p>&gt;&gt;&gt; <span style="color: #569cd6;">new_task</span> = Task(<span style="color: #569cd6;">title</span>=<span style="color: #ce9178;">&#39;Complete Assignment&#39;</span>, <span style="color: #569cd6;">completed</span>=False)&gt;&gt;&gt; new_task.save()</p><p>或者,您可以使用该函数,如下所示:create</p><p>Task.objects.create(<span style="color: #569cd6;">title</span>=<span style="color: #ce9178;">&#39;Another Task&#39;</span>, <span style="color: #569cd6;">completed</span>=False)</p><p>要检查所有任务,请输入以下内容:</p><p>Task.objects.all()</p><p>你应该得到类似于你在下图中看到的东西。请注意,查询集与刚刚创建的任务一起返回:</p><p>截图-2024-01-15-12-32-55在 Django shell 中创建对象</p><p>读</p><p>创建对象后,您应该能够读取它们。为此,Django 提供了 和 方法。get()filter()</p><p>该方法根据指定的条件从数据库中检索单个对象。如果未找到任何对象或多个对象,则会引发异常,使其适用于唯一查询。get()</p><p>该方法检索与指定条件匹配的数据库对象的查询集。如果找到多个对象或未找到对象,它不会引发异常,因此非常适合具有多个可能结果的查询。filter()</p><p>您可以使用该方法检索具有特定标题的任务。get()</p><p><span style="color: #569cd6;">specific_task</span> = Task.objects.get(<span style="color: #569cd6;">title</span>=<span style="color: #ce9178;">&#39;Complete Assignment&#39;</span>)print(f<span style="color: #ce9178;">&#39;Title: {specific_task.title}, Completed: {specific_task.completed}&#39;</span>)</p><p>上述代码的输出如下:</p><p>截图-from-2024-01-15-13-59-07在 Django shell 中检索特定对象</p><p>如果任务满足特定条件,您还可以检索该任务。这就是过滤方法的亮点。</p><p>假设您想要获取未完成的任务,即字段设置为 的任务。您可以添加以下代码:completedFalse</p><p><span style="color: #569cd6;">incomplete_tasks</span> = Task.objects.filter(<span style="color: #569cd6;">completed</span>=False)for task in incomplete_tasks:</p><p>&nbsp; &nbsp; print(f<span style="color: #ce9178;">&#39;Title: {task.title}, Completed: {task.completed}&#39;</span>)</p><p>这将返回所有尚未完成的任务。</p><p>截图-2024-01-15-14-02-44-1在 Django shell 中检索满足特定条件的对象</p><p>此方法非常适合根据特定条件检索多个对象。</p><p>更新</p><p>如果要进行更改,则可以使用该方法进行更改。假设您已完成所有任务,现在想要将其标记为已完成。代码如下:update()</p><p><span style="color: #569cd6;">incomplete_tasks</span> = Task.objects.filter(<span style="color: #569cd6;">completed</span>=False)incomplete_tasks.update(<span style="color: #569cd6;">completed</span>=True)<span style="color: #569cd6;">all_tasks</span> = Task.objects.all()for task in all_tasks:</p><p>&nbsp; &nbsp; print(f<span style="color: #ce9178;">&#39;Title: {task.title}, Completed: {task.completed}&#39;</span>)</p><p>以上代码的输出为:</p><p>截图-2024-01-15-14-37-07-1在 Django shell 中更新对象</p><p>这首先将任务的状态更新为 ,然后打印已完成的任务。completed</p><p>删除</p><p>完成所有操作后,您可能希望删除所有任务或特定任务。您可以使用方法执行此操作,如下所示:delete()</p><p><span style="color: #569cd6;">task_to_delete</span> = Task.objects.get(<span style="color: #569cd6;">title</span>=<span style="color: #ce9178;">&#39;Another Task&#39;</span>) task_to_delete.delete() <span style="color: #569cd6;">all_tasks_after_deletion</span> = Task.objects.all() for task in all_tasks_after_deletion:</p><p>&nbsp; &nbsp; print(f<span style="color: #ce9178;">&#39;Title: {task.title}, Completed: {task.completed}&#39;</span>)</p><p>上面的代码使用该方法获取标题为“另一个任务”的任务,然后使用该方法将其删除。最后,它会打印所有剩余任务的详细信息,以验证删除是否成功。getdelete</p><p>输出为:</p><p>截图-2024-01-15-14-53-40删除 Django shell 中的对象</p><p>或者,您可以像这样简化上面的代码:</p><p><span style="color: #569cd6;">task_to_delete</span> = Task.objects.get(<span style="color: #569cd6;">title</span>=<span style="color: #ce9178;">&#39;Another Task&#39;</span>).delete() <span style="color: #569cd6;">all_tasks_after_deletion</span> = Task.objects.all() for task in all_tasks_after_deletion:</p><p>&nbsp; &nbsp; print(f<span style="color: #ce9178;">&#39;Title: {task.title}, Completed: {task.completed}&#39;</span>)</p><p>你可以访问你在 Django 管理面板中创建的所有任务。在终端中启动服务器,如下所示:</p><p>python manage.py runserver</p><p>然后在浏览器上访问站点 http://127.0.0.1:8000/admin/ 并输入您之前创建的超级用户凭据。在那里,您可以访问您创建的所有任务。</p><p>截图-2024-01-15-14-59-40Django 管理界面</p><p>我们删除了另一个任务,因此剩余的任务是“完成分配”任务,如上所示。</p><p>结论</p><p>在本教程中,你探索了创建、读取、更新和删除对象的实际示例,提高了你对 Django 交互式 shell 的使用熟练程度。</p><p>您还了解了在管理界面中注册模型的重要性,以便在开发过程中轻松管理。</p><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-variant-position: inherit; font-stretch: inherit; line-height: 1.5em; font-family: Lato, sans-serif; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 1.25em; vertical-align: baseline; min-width: 100%; color: rgb(10, 10, 35); text-wrap: wrap; background-color: rgb(255, 255, 255);"><br/></p>

盘点最常用的6个Visual Studio Code 中可以使用的 AI 工具,vscode集成ai工具插件

<p>人工智能工具最近变得非常流行。开发人员使用这些工具来帮助生成想法、创建简单的代码示例等。</p><p>2023 年,ChatGPT 和其他大型语言模型进入了我们的许多工具包。我们可以使用它们来提高工作效率并节省重复性任务的时间。</p><p>在本文中,您将发现除了 GitHub Copilot 之外的其他有用工具。</p><p>在我们讨论替代方案之前,让我们先了解一下 GitHub Copilot 是什么以及它的作用。</p><p>什么是 GitHub Copilot?</p><p>GitHub Copilot 可帮助开发人员更快、更高效地编写代码。它是由 GitHub 和 OpenAI 开发的工具,它采用了强大的 AI 和 Codex。</p><p>GitHub Copilot 可与各种代码编辑器配合使用,包括 Visual Studio Code、NeoVim 和 JetBrains。</p><p>GitHub Copilot 使用机器学习。它不会自动完成 - 它会在您在文本编辑器中工作时建议整个代码片段。它还可以帮助您调试和重构旧代码。目标是提高编码效率,减少花在重复性任务上的时间,并提高生产力。</p><p>但 GitHub Copilot 有一个缺点:试用期过后,每月收费 10 美元,一些用户可能会认为这太高了。</p><p>因此,现在让我们看看一些可以免费使用的替代方案。</p><p>Synk (深度代码)</p><p>Synk,以前称为 DeepCode,是一种帮助您确保代码安全的工具。它直接与您的项目文件或存储库一起使用,使团队能够轻松查找和修复其代码、依赖项、容器和基础结构中的任何安全问题。</p><p>Synk (DeepCode) 主页Synk(DeepCode) 主页</p><p>使用案例</p><p>非常适合早期安全审查。</p><p>有效的错误检测和解决。</p><p>Synk 的特点</p><p>在开发早期扫描代码,以帮助其通过安全审查。这有助于避免在开发周期后期进行代价高昂的修复。</p><p>扫描漏洞并显示包含安全问题的结果。</p><p>发现代码中可能存在的错误,帮助您及早发现并修复问题。</p><p>建议如何使代码运行得更好。</p><p>通过从不同的代码示例中学习,变得更加智能。随着时间的推移,它使用算法提供更好的建议。</p><p>Synk 的局限性</p><p>虽然 Snyk 也很强大,但它也有一些局限性。首先,它检查整个代码库,这可能需要大量的计算能力,从而影响性能。</p><p>为了帮助缓解此问题,您可以将大型代码库分解为更小的、可管理的模块。</p><p>此外,开发人员可能需要一些学习曲线来了解如何充分利用该工具。</p><p>但是,您的团队可以提供培训课程或文档,以帮助您和其他开发人员更好地了解如何有效地使用 Synk。此外,鼓励您的团队提供支持资源,例如论坛或文档,以解决常见问题和疑问。</p><p>价格</p><p>在 Visual Studio Code 中使用 Synk 进行单个代码安全测试是完全免费的。这允许在将代码部署到生产环境之前检查代码的安全性。</p><p>要在团队内或出于商业目的进行协作,必须升级计划。您可以在此处找到有关定价计划的更多信息。</p><p>如何在 Visual Studio Code 中设置 Synk</p><p>要设置 Snyk,请在文本中选择“查看”选项以显示下拉菜单。</p><p>在编辑器中查看在编辑器中选择“查看”选项</p><p>然后单击该下拉列表中的“扩展”选项,它将带你进入 Visual Studio Code Marketplace。</p><p>在市场中,键入“Synk Security”并按回车键,然后继续安装它。</p><p>市场市场</p><p>如何在 Snyk 中进行身份验证</p><p>安装 Snyk 后,需要进行身份验证。</p><p>单击编辑器中的 Synk 图标。这将带您进入身份验证页面。</p><p>单击按钮进行身份验证和连接。通过身份验证后,请返回编辑器。就是这样!</p><p>身份验证并连接到,以便它适用于 Visual Studio Code身份验证并连接到,以便它适用于 Visual Studio Code</p><p>完成此步骤后,您现在可以使用 Snyk 在将代码发送到生产环境之前检查、理解和分析您的代码。</p><p>示例用例</p><p>要扫描项目文件中可能存在的漏洞,只需单击左侧面板上的同步图标即可。这将分析代码并突出显示需要注意的任何潜在问题。</p><p>Synk 的实际应用示例Synk 的实际应用示例</p><p>如果你仔细观察,你会看到一些字母,表明编写的代码是多么脆弱。</p><p>“H”表示它真的很高,需要尽快修复。</p><p>“M”表示它处于最大漏洞级别。</p><p>“L”表示它处于低漏洞级别。</p><p>如果您单击某个漏洞,您将获得有关如何修复它的建议,这些建议显示在编辑器的右侧。</p><p>科迪人工智能</p><p>Cody AI 是一款智能编码助手,它使用高级 AI 来理解和分析您的代码。它可以帮助您更快地编写代码,还可以提高您对代码库的理解。它超越了基本功能,可以识别模式并提出改进建议,使您的编码体验更加高效和富有洞察力。</p><p>Cody 主页Cody 主页</p><p>Cody AI 的用例</p><p>促进任务和头脑风暴的创造力。</p><p>解决数字工具的常见问题。</p><p>通过快速的信息共享加强团队合作。</p><p>CodyAI的特点</p><p>对查询提供即时响应。</p><p>允许您上传各种数据类型以构建自定义知识库。</p><p>科迪的回答都有足够的来源引用。</p><p>可以帮助电子邮件创作、文档翻译和营销材料生成。</p><p>协助团队使用数字技术来诊断和解决问题。</p><p>根据以前的遭遇和背景历史,它提出了建议和想法。</p><p>Cody AI 的局限性</p><p>与任何工具一样,也有局限性。首先,人工智能的搜索能力没有那么强大。它使用可用信息分析用户查询。因此,人工智能有时可能会给出缺乏您想要的深度或特异性的答案。</p><p>此外,Cody AI Bots 不能很好地进行数学运算或处理表格。这意味着人工智能在处理数字或复杂数据时可能无法给出准确的答案。</p><p>最后,Cody AI Bots 无法理解文档中的图片、图表或任何视觉内容。它只使用文本来提出响应,因此它不擅长处理视觉元素。</p><p>为了帮助缓解这些问题,请确保在制定查询时尽可能清晰和具体,以帮助 Cody 更好地了解您的意图。</p><p>您还可以将复杂的问题分解为更简单的部分,以提高准确回答的机会。</p><p>价格</p><p>在您的集成开发环境中安装 Cody 可免费供个人使用。但是,对于希望利用 Cody 功能的专业人士或企业来说,需要升级。</p><p>如何在 Visual Studio Code 中设置 Cody</p><p>首先,在文本编辑器中选择“查看”选项以显示下拉菜单,如上所示。</p><p>单击“扩展”,它将带你进入 Visual Studio Code Marketplace。</p><p>在市场中,输入“Cody”并按回车键,然后继续安装它。</p><p>安装 Cody AICody 插件</p><p>现在安装已经完成,您可以开始在编辑器中使用 Cody。</p><p>Cody 提供了不同的命令提示符来帮助您编写代码:</p><p>它可以帮助您为代码生成文档</p><p>如果你正在为一个开源项目做贡献,并发现代码库令人困惑,Cody AI 可以提供解释。</p><p>它可以告诉你一段代码是用哪种编程语言编写的。</p><p>您可以在不离开编码环境的情况下向 Cody 提问。</p><p>Cody 可以根据给定的指令对您的代码进行编辑。</p><p>现在,我将通过一个示例来说明 Cody 如何帮助解释部分代码:</p><p>Cody AI 的一个命令提示符Cody AI 的一个命令提示符</p><p>塔宁</p><p>Tabnine 是一款专为开发人员设计的强大 AI 助手,提供 AI 驱动的代码完成和建议以提高生产力。</p><p>它与多种编程语言和主要的集成开发环境 (IDE) 兼容,使开发人员能够有效地利用其智能代码建议。</p><p>TabNine 主页Tabnine 主页</p><p>使用案例</p><p>加快软件开发:促进更快、更高效的代码编写。</p><p>确保代码一致性:在不同团队成员之间保持一致的编码风格。</p><p>Tabnine的特点</p><p>从您键入的代码中学习并调整其建议以匹配您的编码风格。</p><p>关心您的隐私。它只从开源和宽松的代码中学习,因此您始终拥有自己的代码。</p><p>对于开发人员来说很棒,因为它适用于多种编程语言。它就像一个方便的工具,用于不同的技术的东西!</p><p>通过提供智能建议,使编码更容易,帮助开发人员节省时间。</p><p>它与流行的代码编辑器(如 Visual Studio Code)配合得很好。开发人员可以在他们的编码环境中使用它。</p><p>Tabnine的局限性</p><p>Tabnine 会随着时间的推移从您的编码方式中学习,因此可能需要一些时间才能匹配您的编码风格。如果您积极使用该工具并提供一致的输入以帮助它更快地学习您的编码风格,这将有所帮助。</p><p>Tabnine 还建议代码,但它不会创建整个部分。虽然这似乎是一个限制,但实际上它最适合代码质量。</p><p>最后,它可能会提示不太正确的代码。开发人员应仔细检查建议的准确性。为了帮助 Tabnine 提出更好的代码建议,您可以定期查看并接受/拒绝建议,以微调它对您的偏好的理解。</p><p>在最终确定之前,您还应该始终仔细检查建议的代码的正确性和是否符合编码标准。</p><p>价格</p><p>安装免费,免费。但是,对于大型组织,建议考虑升级。大型组织的升级计划提供无限制的用户访问,同时优先考虑安全和隐私。</p><p>如何在 Visual Studio Code 中设置 Tabnine</p><p>首先,在文本编辑器中选择“查看”选项以显示下拉菜单,如上所示。</p><p>单击“扩展”,它将带您进入 Visual Studio Code Marketplace。</p><p>在市场中,输入“Tabnine”并按回车键,然后继续安装它。</p><p>扩展(IDE 中的市场)扩展(IDE 中的市场)</p><p>现在我们已经安装了它,你可以开始在编辑器中使用 Tabnine。下面是一个示例:</p><p>编辑器中的示例编辑器中的示例</p><p>代码如下:</p><p>const <span style="color: #569cd6;">add</span> = (a, b) =&gt; {</p><p>&nbsp;return a + b<span style="color: #6a9955;">;}console.log(add(5,9))// output 14</span></p><p>代码耳语者</p><p>CodeWhisperer 是一个聪明的编码助手。当您在编码环境中工作时,它使用 AI 来建议代码位或整个函数。它由 AWS 制造,通过自动完成和代码重组等功能使编码更容易。</p><p>Code Whisperer 主页Code Whisperer 主页</p><p>Code Whisperer的功能</p><p>Code Whisperer 会在您编写代码时实时建议代码。</p><p>与您的集成开发环境 (IDE) 集成。</p><p>通过协助改进和重组,帮助提高代码的可读性和效率。</p><p>支持多种编程语言。</p><p>在生成和理解代码文档方面提供有价值的帮助。</p><p>Code Whisperer 的局限性</p><p>CodeWhisperer 可能会发现很难处理需要创造力的新编码任务。</p><p>此外,其训练数据/模型中的错误可能会导致不准确的代码建议。</p><p>考虑到这些,您应该主要使用 CodeWhisperer 作为生成例行或重复代码的工具,将更复杂和创造性的任务留给人类专业知识。</p><p>此外,请确保经常查看和验证 CodeWhisperer 的任何建议,不要只看表面信息。</p><p>如何在 Visual Studio Code 中设置 Code Whisperer</p><p>首先,在文本编辑器中选择“查看”选项以显示下拉列表。</p><p>单击“扩展”,它将带你进入 Visual Studio Code Marketplace。</p><p>在市场中,键入“AWS Toolkit”并按回车键,然后继续安装它。</p><p>图片-58扩展(IDE 中的市场)</p><p>现在,扩展已安装完毕,让我们在集成开发环境 (IDE) 中使用它。</p><p>示例代码耳语</p><p>代码如下:</p><p>// create a greet functionfunction greet(name) {</p><p>&nbsp; &nbsp; return <span style="color: #ce9178;">&quot;Hello &quot;</span> + name<span style="color: #6a9955;">;}// export the greet functionmodule.exports = greet;</span></p><p>CodeGeex 人工智能</p><p>CodeGeeX 是一个有用的编码工具,可以创建评论、建议代码并提供 AI 驱动的聊天帮助。它还可以将您的代码翻译成不同的语言,并与许多编程语言和工具配合使用。</p><p>chrome_4C9oZTEpBeCodeGeex 主页</p><p>使用案例</p><p>让编码更快。</p><p>通过自动注释和解释指导新开发人员完成大代码。</p><p>CodeGeex AI的特点</p><p>擅长完成代码。它通过根据现有代码或注释自动完成和生成行来提供帮助。</p><p>为代码中的方法和行创建注释,从而节省时间并使其易于理解不熟悉的代码。</p><p>帮助将代码从一种编程语言更改为另一种编程语言,例如将 Python 转换为 Java。</p><p>开发人员可以提出 CodeGeeX 编码问题并快速获得答案,而无需搜索网络。</p><p>CodeGeeX 所做的不仅仅是建议代码。它可以解释选定的代码、修复错误、总结代码等。</p><p>CodeGeeX AI 的局限性</p><p>当您使用 CodeGeeX 时,请记住它是一个研究原型,因此它可能并不总是为每种情况创建完美的代码。</p><p>它还可能误解某些语言描述或代码片段,从而导致可能的错误。</p><p>与往常一样,请确保仔细验证生成的代码的准确性和是否符合编码标准。</p><p>此外,在提供语言描述或代码片段时,请尽可能清晰和详细。</p><p>价格</p><p>CodeGeex 可在 Visual Studio Code 上免费安装,升级起价为每月 9 美元。</p><p>如何在 Visual Studio Code 中设置 CodeGeeX AI</p><p>在文本编辑器中选择“查看”选项以显示下拉菜单。</p><p>单击文本编辑器中的“扩展”,它将转到 Visual Studio Code Marketplace。</p><p>在市场中,输入“CodeGeex”并按回车键,然后继续安装。</p><p>安装 CodeGeex安装 CodeGeex</p><p>安装后,单击该图标,它将带您返回可以登录或注册的页面。</p><p>CodeGeex 中的登录页面CodeGeex 中的登录页面</p><p>完成此步骤后,您将能够与 IDE 中的 AI 进行交互。</p><p>若要触发它,请导航到 IDE,突出显示所需的代码,然后单击鼠标右键。将出现一个下拉菜单,允许您选择希望 AI 为您执行的特定命令。</p><p>下面是一个示例:</p><p>使用代码GeexCodeGeex使用示例</p><p>GIF 示例展示了 CodeGeex AI 可以做的一件事。</p><p>要了解有关其功能的更多信息,请访问文档:CodeGeeX: AI Code AutoComplete, Chat, Auto Comment.</p><p>法典:</p><p>const <span style="color: #569cd6;">colors</span> = [<span style="color: #ce9178;">&#39;pink&#39;</span>, <span style="color: #ce9178;">&#39;blue&#39;</span>, <span style="color: #ce9178;">&#39;purple&#39;</span>, <span style="color: #ce9178;">&#39;green&#39;</span>]<span style="color: #6a9955;">;colors.forEach(color =&gt; {</span></p><p>&nbsp; &nbsp; console.log(color)<span style="color: #6a9955;">;});</span></p><p>Codeium(编码)</p><p>Codeium 是一款免费且功能强大的工具,可使用高级 AI 加快编码速度。它就像一个编码的超级英雄,有一个工具可以帮助你完成 70 多种语言的代码。它速度超快,并提供一流的建议,使编码更加高效。您可以将 Codeium 用作 Google Chrome 扩展程序。</p><p>Codeium 主页Codeium 主页</p><p>请记住,由于其强大的功能,使用 Codeium 很容易过度依赖 AI 生成的建议。如果您不保持警惕并且没有跟上您的技能,这可能会导致您的代码出现错误。因此,请确保您仍然检查/运行您的代码,根据需要学习新主题,并保持自己的代码编写能力敏锐。</p><p>您可以在此处阅读有关 Codeium 的更多信息。</p><p>价格</p><p>AI 最初可以免费安装在您的集成开发环境 (IDE) 中,但可能需要升级,起价为每月 12 美元,团队使用。</p><p>如何在 Visual Studio Code 中设置 Codeium</p><p>首先,请访问 Codeium 的网站并选择登录选项。</p><p>登录用户登录用户</p><p>单击此按钮会将您重定向到登录页面。</p><p>登录页面登录页面</p><p>使用您的电子邮件或 Google 帐户登录。</p><p>图片-68证实</p><p>完成登录后,您将遇到各种集成开发环境 (IDE)。选择符合你偏好的那个 - 例如,我使用 Visual Studio Code。</p><p>选择-IDE-代码选择 IDE</p><p>继续在 Visual Studio Code IDE 中安装它。</p><p>安装后,单击 Visual Studio Code 中的“帐户登录”选项,向网站进行身份验证。</p><p>使用代码身份验证-1证实</p><p>完成后,您现在可以在 IDE 中使用 Codeium。</p><p>现在,让我们看一个实际的例子:</p><p>例Codeium 示例</p><p>结论</p><p>本文讨论了可用于加快开发速度的各种 AI 工具。一些开发人员只考虑 GitHub Copilot。但是还有其他具有不同功能的 AI 工具也可以为您提供帮助。</p><p>如果您在本教程中发现了价值,请考虑与其他开发人员分享,他们也可能从中受益。</p><p><br/></p><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-variant-position: inherit; font-stretch: inherit; line-height: 1.5em; font-family: Lato, sans-serif; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 1.25em; vertical-align: baseline; min-width: 100%; color: rgb(10, 10, 35); text-wrap: wrap; background-color: rgb(255, 255, 255);"><br/></p>

如何构建 AI 应用程序 – 前端开发人员指南

<p>对人工智能驱动的应用程序的需求正在快速增长。作为前端开发人员,您可以利用这一趋势,通过将您在前端开发中的技能与 AI 技术相结合来推进您的职业生涯。</p><p>通过这种集成,您可以构建智能应用程序,以改善用户体验并提供有价值的见解,从而对用户的决策产生积极影响。</p><p>为了突出目前令人兴奋的机会,请考虑以下统计数据:</p><p>2023 年,超过 60% 的初创公司被著名的 Y Combinator 录取,专注于人工智能。</p><p>尽管全球投资放缓,但人工智能初创公司的资金激增,并在 2023 年达到了令人印象深刻的 500 亿美元。</p><p>在本指南中,我们将介绍以下内容:</p><p>前端开发人员在推进 AI 创新中的作用。</p><p>将 AI 服务集成到前端工作流中时要遵循的关键步骤</p><p>如何确保您构建的 AI 应用程序具有最佳性能和安全性。</p><p>最后,我们将结合 1-3 中的技巧来构建一个 AI 网站评论家,它可以使用 React 和 OpenAI 的 GPT4-Vision 模型烘焙您的网站和投资组合应用程序。</p><p>先决条件</p><p>HTML知识</p><p>对 React hooks 的基本了解</p><p>本地计算机上安装的 Node 和 npm。</p><p>前端开发人员在打造 AI 驱动体验中的作用</p><p>前端开发人员利用他们在用户界面设计、数据可视化和技术实施方面的专业知识,在打造 AI 驱动的体验方面发挥着至关重要的作用。</p><p>他们负责创建用户界面、设计交互流程以及将 AI 功能无缝集成到应用程序中。</p><p>前端开发人员还与后端开发人员和数据科学家合作,以确保 AI 算法的高效和准确运行。</p><p>此外,前端开发人员在利用最新 AI 模型的 Web 应用程序的性能方面发挥着关键作用。他们负责优化应用程序的性能,确保跨平台兼容性,并实施适应不同设备和屏幕尺寸的响应式设计。</p><p>如何将 AI 服务集成到前端工作流中</p><p>若要将 AI 服务集成到前端工作流中,应遵循包括以下步骤的系统方法:</p><p>确定 AI 功能可以解决或增强的任务或问题。</p><p>研究和评估为所确定的任务或问题所需的特定 AI 功能提供 API 和节点 SDK 的 AI 公司。通过了解不同 AI 公司的产品,您可以选择最合适的 AI 服务来集成到您的应用程序中。</p><p>让我们来看看一些流行的 AI 模型及其核心任务:</p><p>AI模型 &nbsp; &nbsp;任务</p><p>GPT-4的 &nbsp;多模态模型(能够处理文本、图像等)</p><p>稳定扩散 &nbsp; &nbsp;文本到图像生成式 AI 模型</p><p>米斯特拉尔 7B &nbsp; &nbsp;多模态模型(能够处理文本、图像等)</p><p>语音盒 语音生成式 AI 模型</p><p>达尔·E 3 &nbsp;文本到图像生成式 AI 模型</p><p>您可以在“复制探索”和“拥抱脸”探索模型页面上探索更多此类模型。</p><p>利用提供的 API 和节点 SDK,将选定的 AI 服务集成到您的前端应用程序中。这涉及了解 AI 公司提供的文档和指南,以确保无缝集成和正确利用 AI 功能。</p><p>测试和验证前端应用程序中的集成 AI 服务,以确保准确高效的功能。此步骤对于识别和解决技术问题或优化要求至关重要。</p><p>通过提供清晰的解释和可视化,让用户对 AI 生成的输出有一种控制感和所有权,以同理心进行设计也很重要。</p><p>应用实例</p><p>让我们看一个例子。假设你想制作一个自定义的模因生成器。在这种情况下,您应该搜索专门训练用于处理图像的 AI 模型,例如 Stability 的 Stable Diffusion 和 OpenAI 的 DALL·E 3.</p><p>之后,您可以探索可用于利用这些 AI 模型并创建基本示例的最佳 API 和 SDK。</p><p>为了说明这一点,让我们使用 Replicate Node SDK,它提供了一种方便的方法来与 Stable Diffusion AI 模型进行交互,并设置一个基本的 Node.js 程序,我们以后可以将其集成到我们的 React 应用程序中。</p><p>步骤 1。从 https://replicate.com/account 获取令牌</p><p>第 2 步:使用 npm 命令安装 Node SDK:Step 2: Install the Node SDK with the npm command: 步骤 3:</p><p>通过复制 SDK 查询 Stable Diffusion AI 模型。npm install replicate</p><p>const <span style="color: #569cd6;">Replicate</span> = require(<span style="color: #ce9178;">&quot;replicate&quot;</span>)<span style="color: #6a9955;">;</span></p><p>const <span style="color: #569cd6;">replicate</span> = new Replicate({</p><p>&nbsp; auth: <span style="color: #ce9178;">&quot;&quot;</span>, // defaults to process.env.REPLICATE_API_TOKEN</p><p>})<span style="color: #6a9955;">;</span></p><p>async function iLoveCats(){</p><p>&nbsp; &nbsp; const <span style="color: #569cd6;">model</span> = <span style="color: #ce9178;">&quot;stability-ai/stable-diffusion:27b93a2413e7f36cd83da926f3656280b2931564ff050bf9575f1fdf9bcd7478&quot;</span><span style="color: #6a9955;">;</span></p><p>&nbsp; const <span style="color: #569cd6;">input</span> = {</p><p>&nbsp; &nbsp; prompt: <span style="color: #ce9178;">&quot;a cat wearing a suit&quot;</span>,</p><p>&nbsp; }<span style="color: #6a9955;">;</span></p><p>&nbsp; const <span style="color: #569cd6;">output</span> = await replicate.run(model, { input })<span style="color: #6a9955;">;</span></p><p>&nbsp; console.log(output[0])<span style="color: #6a9955;">;</span></p><p>}</p><p>iLoveCats()</p><p>当您记录输出时,您会获得一个图像 URL,您可以轻松地在前端应用程序中显示该 URL。https://replicate.delivery/pbxt/ng6Tb0HNdzYwFZXMNv3qmIBxc2GIwU4t7edephtDvuWZ5wNSA/out-0.png</p><p>一只穿西装的猫一只穿西装的猫。</p><p>如何优化 AI 驱动的前端应用程序的性能和安全性</p><p>优化 AI 驱动的前端应用程序的性能和安全性对于创建流畅的用户体验和数据保护至关重要。</p><p>值得庆幸的是,下面列出的技术类似于传统前端开发中的标准做法。这种重叠意味着熟悉传统前端优化和安全实践的开发人员可以更轻松地适应和应用这些技能来满足 AI 驱动应用程序的独特需求:</p><p>采用延迟加载和代码拆分技术来减少初始加载时间并提高性能。</p><p>利用缓存和资源优化技术来最大限度地减少不必要的 API 调用并提高数据检索速度。</p><p>实施安全的 API 端点和身份验证机制,以确保仅授权访问 AI 服务和数据。</p><p>如何使用 React 和 OpenAI 的 GPT4-Vision 模型构建 AI 网站评论家</p><p>在本节中,我们将构建一个 React 应用程序,该应用程序利用 Vision 模型来分析网站图像并提供反馈。为此,我们将遵循前面描述的 4 步工作流程,将 AI 服务集成到前端应用程序中。</p><p>由于我们需要一个可以分析图像的视觉模型,我们应该看看市场上的可用选项,你可以在这里和这里找到。在检查了可用视觉模型的性能基准后,我们将使用 OpenAI 的 GPT-4 视觉模型。</p><p>OpenAI 的 GPT-4 视觉模型是 2023 年底发布的最先进的 AI 模型。它可以接受图像作为输入,对其进行分析,并根据提示提供详细的反馈。</p><p>除了性能原因外,我们还将把它用于我们的网站评论应用程序,因为它提供比其他视觉模型相对便宜的价格,并且有一个易于使用的 API 端点,与流行的 OpenAI 开发人员界面捆绑在一起。</p><p>现在是时候将它集成到我们的 React 应用程序中了。</p><p>第 1 步:安装 React + Vite</p><p>您可以使用以下命令执行此操作:</p><p>npm create vite@latest my-website-critic -- --template react</p><p>第 2 步:安装 OpenAI Node 包</p><p>在您喜欢的 IDE 中打开生成的项目文件夹并安装 OpenAI Node 包,您将使用它与 GPT4 Vision 模型进行交互。</p><p>安装方法如下:</p><p>cd my-website-critic</p><p>npm install openai</p><p>第 3 步:安装 React Markdown 包</p><p>这将帮助您以可读的格式格式化模型的文本响应。</p><p>npm install react-markdown</p><p>第 4 步:运行 npm install</p><p>现在运行:npm install</p><p>&nbsp; npm install</p><p>&nbsp; npm run dev</p><p>第 5 步:在 React 中管理状态</p><p>在此步骤中,您将使用 React 的 useState 和 useEffect 钩子来管理状态并处理对 OpenAI API 的异步请求。src/App.jsx</p><p>freeCodeCamp 英雄部分freeCodeCamp 英雄部分</p><p>对于我们的图像输入,我们将使用上传到 IMGBB 等图像存储平台的 freeCodeCamp 主页英雄部分的屏幕截图。随意使用您想要的任何图像 URL。</p><p>这是代码 - 我将在下面解释它:</p><p>import { useState, useEffect } from <span style="color: #ce9178;">&#39;react&#39;</span><span style="color: #6a9955;">;import OpenAI from &#39;openai&#39;;import ReactMarkdown from &#39;react-markdown&#39;;const App = () =&gt; {</span></p><p>&nbsp; const [response, setResponse] = useState(null)<span style="color: #6a9955;">;</span></p><p>&nbsp; const [isLoading, setIsLoading] = useState(false)<span style="color: #6a9955;">;</span></p><p>&nbsp; useEffect(() =&gt; {</p><p>&nbsp; &nbsp; const <span style="color: #569cd6;">openai</span> = new OpenAI({</p><p>&nbsp; &nbsp; &nbsp; apiKey: <span style="color: #ce9178;">&quot;YOUR_OPENAI_API_KEY&quot;</span>,</p><p>&nbsp; &nbsp; &nbsp; dangerouslyAllowBrowser: true,</p><p>&nbsp; &nbsp; })<span style="color: #6a9955;">;</span></p><p>&nbsp; &nbsp; const <span style="color: #569cd6;">fetchUICriticResponse</span> = async () =&gt; {</p><p>&nbsp; &nbsp; &nbsp; setIsLoading(true)<span style="color: #6a9955;">;</span></p><p>&nbsp; &nbsp; &nbsp; try {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; const <span style="color: #569cd6;">result</span> = await openai.chat.completions.create({</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; model: <span style="color: #ce9178;">&quot;gpt-4-vision-preview&quot;</span>,</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; messages: [</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; role: <span style="color: #ce9178;">&quot;user&quot;</span>,</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: [</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { type: <span style="color: #ce9178;">&quot;text&quot;</span>, text: <span style="color: #ce9178;">&quot;You&#39;re an expert UI critic. What can I improve in this website?&quot;</span> },</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: <span style="color: #ce9178;">&quot;image_url&quot;</span>,</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image_url: {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #ce9178;">&quot;url&quot;</span>: <span style="color: #ce9178;">&quot;https://i.ibb.co/sWM573X/Screenshot-2024-01-18-at-10-34-28-AM.png&quot;</span>,</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #ce9178;">&quot;max_tokens&quot;</span>: 1500</p><p>&nbsp; &nbsp; &nbsp; &nbsp; })<span style="color: #6a9955;">;</span></p><p>&nbsp; &nbsp; &nbsp; &nbsp; if (result &amp;&amp; result.choices &amp;&amp; result.choices.length &gt; 0 &amp;&amp; result.choices[0].message) {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(1, result)<span style="color: #6a9955;">;</span></p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setResponse(result.choices[0].message.content)<span style="color: #6a9955;">;</span></p><p>&nbsp; &nbsp; &nbsp; &nbsp; }</p><p>&nbsp; &nbsp; &nbsp; } catch (error) {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; console.error(<span style="color: #ce9178;">&quot;Error fetching AI response:&quot;</span>, error)<span style="color: #6a9955;">;</span></p><p>&nbsp; &nbsp; &nbsp; } finally {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; setIsLoading(false)<span style="color: #6a9955;">;</span></p><p>&nbsp; &nbsp; &nbsp; }</p><p>&nbsp; &nbsp; }<span style="color: #6a9955;">;</span></p><p>&nbsp; &nbsp; fetchUICriticResponse()<span style="color: #6a9955;">;</span></p><p>&nbsp; }, [])<span style="color: #6a9955;">;</span></p><p>&nbsp; return (</p><p>&nbsp; &nbsp; &lt;div&gt;</p><p>&nbsp; &nbsp; &nbsp; &lt;h3&gt;Hi! UI Expert Here&lt;/h3&gt;</p><p>&nbsp; &nbsp; &nbsp; {isLoading ? (</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Loading...&lt;/p&gt;</p><p>&nbsp; &nbsp; &nbsp; ) : response ? (</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3&gt;My Feedback:&lt;/h3&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ReactMarkdown&gt;{response}&lt;/ReactMarkdown&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;</p><p>&nbsp; &nbsp; &nbsp; ) : (</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;No response received.&lt;/p&gt;</p><p>&nbsp; &nbsp; &nbsp; )}</p><p>&nbsp; &nbsp; &lt;/div&gt;</p><p>&nbsp; )<span style="color: #6a9955;">;};export default App;</span></p><p>在上面的组件中:</p><p>useEffect 挂钩在组件挂载时运行该函数。fetchUICriticResponse</p><p>useState 钩子管理 AI 响应 (response) 和加载状态 (isLoading)。</p><p>fetchUICriticResponse是一个使用 OpenAI API 获取响应的异步函数。</p><p>该组件在获取响应时呈现加载消息。获取完成后,它会使用我们之前安装的 React Markdown 包显示响应或回退消息。</p><p>您应该得到类似于下图的结果,其中包含对所提供图像和给定提示的 GPT4 Vision 模型分析结果。</p><p>GPT4 Vision 模型分析结果GPT4 Vision 模型分析的结果。</p><p>正如你所看到的,分析遍历了页面上的每个元素,并提供了关于导航清晰度、空格使用、搜索功能等方面的反馈——既有积极的,也有更具建设性的。</p><p>注意:出于安全考虑,不建议直接在前端处理 API 密钥。这个例子只是为了学习。在生产环境中,创建一个文件并放入其中。.envYOUR_OPENAI_API_KEY</p><p>下一步是什么?</p><p>您可以通过创建一个简单的输入字段供用户输入其图像链接来增强这些代码示例。您还可以设置图像上传器,以允许用户从其本地设备上传图像。</p><p>有关如何实现此目的的说明,请参阅官方文档。</p><p>在决定开发哪些 AI 应用程序时,考虑预期影响、用户需求和可用资源至关重要。</p><p>其他一些潜在的人工智能应用想法包括语言翻译应用程序和虚拟个人助理。</p><p>结论</p><p>如果您有兴趣将 AI 整合到前端应用中,请从探索开源和闭源 AI 模型开始。您还需要了解如何使用 API 和外部库。</p><p>您还应该专注于熟悉处理 AI 模型响应和交互性。</p><p>有了这些知识,您就可以为即将涌现的几项面向消费者的 AI 创新做好准备,这些创新需要熟练构建 AI 驱动的应用程序的前端开发人员的服务。</p><p><br/></p><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-variant-position: inherit; font-stretch: inherit; line-height: inherit; font-family: Lato, sans-serif; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 22px; vertical-align: baseline; min-width: 100%; color: rgb(10, 10, 35); text-wrap: wrap; background-color: rgb(255, 255, 255);"><br/></p>

一文搞懂css中常用的单位:何时使用 rem、em、px

<p>CSS 不仅仅是一个样式工具。它还决定了网页在浏览器中的呈现方式。优化良好的 CSS 意味着更快的加载时间和更流畅的用户体验。</p><p>在当今的数字环境中,网站的性能是其成功的关键因素。编写高效的CSS代码可以极大地影响网页的加载速度,影响从用户体验到搜索引擎排名的方方面面。</p><p>本指南深入探讨了有效的策略,以帮助您完善CSS,确保您的网站不仅看起来很棒,而且加载速度快,运行流畅。</p><p>CSS 如何影响 Web 性能</p><p>当用户访问网页时,浏览器会检索网站的结构 HTML 及其样式 CSS。这是一组关于网页每个部分应该如何外观的详细说明。</p><p>如果CSS包含太多信息或过于复杂,就像给浏览器一个需要更长的时间才能解决的难题。这可能会导致用户等待时间更长,这可能很烦人。</p><p>这就是简化 CSS 的艺术发挥作用的地方。这不仅仅是整理代码,还要确保浏览器可以更快地准备好网页。</p><p>当 CSS 变得更精简、更简单时,就像给浏览器一个清晰、易于理解的地图。这使得网页加载速度更快,使一切感觉更灵敏。</p><p>1. 编写更短的 CSS</p><p>在编写 CSS 时,使用流行的软件开发原则 Don<span style="color: #ce9178;">&#39;t Repeat Yourself (DRY)。这提倡代码的简洁明了。</span></p><p><span style="color: #ce9178;">这很重要,因为在实践中,CSS 涉及跨各种选择器的重复属性。目标应该是识别和巩固这些重复属性。通过这样做,您可以消除冗余,从而实现更干净、更易于管理的 CSS。</span></p><p><span style="color: #ce9178;">例如,在下面的代码中,多个元素(和 )共享相同的字体大小和颜色。h1h2</span></p><p><span style="color: #ce9178;">h1 {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; font-size: 20px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; color: #fff;}h2 {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; font-size: 20px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; color: #fff;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">因此,您可以将它们分组到一个公共类下,而不是为每个选择器单独声明这些属性。这不仅简化了样式表,而且使未来的更新更容易,更不容易出错。</span></p><p><span style="color: #ce9178;">您可以将上面的代码重写为如下所示:</span></p><p><span style="color: #ce9178;">h1, h2 {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; font-size: 20px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; color: #fff;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">使用速记属性是最小化 CSS 大小的另一种有效策略,使代码更有效率。它还允许您使用单个声明设置多个相关的 CSS 属性。以下是编写有效速记 CSS 的方法:</span></p><p><span style="color: #ce9178;">当元素的所有边都具有相同的值时,请使用该值。</span></p><p><span style="color: #ce9178;">/* Before shorthand */.same-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-top: 15px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-right: 15px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-bottom: 15px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-left: 15px;}/* After shorthand */.same-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 15px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">当元素的所有边都具有不同的值时,请使用所有四个值。</span></p><p><span style="color: #ce9178;">/* Before shorthand */.different-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-top: 10px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-right: 20px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-bottom: 15px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-left: 25px;}/* After shorthand */.different-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 10px 20px 15px 25px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">当 top/bottom 和 right/left 具有相同的值时,请使用两个值。</span></p><p><span style="color: #ce9178;">/* Before shorthand */.two-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-top: 10px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-right: 20px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-bottom: 10px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-left: 20px;}/* After shorthand */.two-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 10px 20px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">如果只有右/左值相同,但顶部和底部不相同,请使用三个值。</span></p><p><span style="color: #ce9178;">/* Before shorthand */.three-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-top: 10px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-right: 20px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-bottom: 15px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-left: 20px;}/* After shorthand */.three-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 10px 20px 15px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">2. 使用浅层 CSS 选择器</span></p><p><span style="color: #ce9178;">浅层 CSS 选择器是直接而简洁的选择器,具有较少级别的嵌套元素,不会太深入地挖掘 HTML 结构。</span></p><p><span style="color: #ce9178;">简化选择器可以显著加快网页呈现速度,因为深度嵌套的选择器需要更长的时间供浏览器评估,从而导致页面呈现速度变慢。</span></p><p><span style="color: #ce9178;">考虑以下代码中的示例:将属性值分配给深度嵌套的选择器(如)很麻烦,并且会导致渲染延迟,因为浏览器需要时间来检查每个级别(然后是 header,然后是 nav,然后是 ul 等)以找到正确的 &lt;a&gt; 标签来设置样式)。header nav ul li a</span></p><p><span style="color: #ce9178;">或者,给它一个直接的类是直接的,浏览器可以更快地解释。类选择器通常比嵌套标签更有效,因为浏览器只是查找带有类的元素并应用样式,而不必担心它们在 DOM 树中的位置。.nav-link</span></p><p><span style="color: #ce9178;">/* Less efficient: Deeply nested selector */header nav ul li a { </span></p><p><span style="color: #ce9178;">&nbsp; &nbsp;color: #000;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp;font-size: 10px;</span></p><p><span style="color: #ce9178;">&nbsp;}/* More efficient: Class selector */.nav-link {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp;color: #000;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp;font-size: 10px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">3. 段CSS代码</span></p><p><span style="color: #ce9178;">将您的 CSS 代码分割成更小、更集中的片段,例如为不同的网站组件提供单独的文件并创建特定于页面的样式,可以大大提高您网站的性能。这种方法不仅可以更轻松地查找和编辑特定样式,还可以确保网页只加载所需的 CSS,避免不必要的批量。</span></p><p><span style="color: #ce9178;">增强的可维护性和更快的页面加载是最明显的关键优势。较小的 CSS 文件更易于管理,就像一个组织良好的工具箱,其中所有内容都很容易找到。而且,通过只为每个页面加载必要的CSS,浏览器可以减少工作量,从而改善用户体验。</span></p><p><span style="color: #ce9178;">原始 CSS</span></p><p><span style="color: #ce9178;">假设您有一个 CSS 文件,其中包含您网站各个部分的样式:</span></p><p><span style="color: #ce9178;">/* Styles for the home page */.homepage {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; background-color: #f0f0f0;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 10px;}/* Styles for the services page */.services {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; background-color: #333;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; color: white;}/* Styles for the contact page */.contact {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; background-color: #222;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; color: white;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 20px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">分段 CSS</span></p><p><span style="color: #ce9178;">现在,让我们根据其用途将此 CSS 分割成不同的文件:</span></p><p><span style="color: #ce9178;">主页样式(主页.css):</span></p><p><span style="color: #ce9178;">.homepage {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; background-color: #f0f0f0;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 10px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">2. Services page Styles (services.css):</span></p><p><span style="color: #ce9178;">.services {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; background-color: #333;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; color: white;}</span></p><p><span style="color: #ce9178;">CSS code</span></p><p><span style="color: #ce9178;">3. 联系页面样式(contact.css):</span></p><p><span style="color: #ce9178;">.contact {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; background-color: #222;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; color: white;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 20px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">每个 CSS 文件都集中在网站的特定部分。现在,当用户访问您的网站时,每个页面仅加载所需的 CSS,从而提高网站的性能。</span></p><p><span style="color: #ce9178;">4. 优化 CSS 交付</span></p><p><span style="color: #ce9178;">您可以通过缩小 CSS 来使 CSS 文件更轻、加载速度更快——也就是说,您可以删除多余的空格和行(这称为缩小)。然后,您可以压缩这些文件,以便用户下载它们更小、更快捷。</span></p><p><span style="color: #ce9178;">此外,请确保首先加载您网站最重要的样式,以便人们更快地看到您的页面。其他样式可以在后台加载而不会减慢速度。</span></p><p><span style="color: #ce9178;">您还可以通过在浏览器中保存一些 CSS(这称为缓存)来使访问次数多次的人更快地访问您的网站。这意味着他们不必在每次访问时再次加载。</span></p><p><span style="color: #ce9178;">此外,如果您使用 CDN 或服务器网络,无论您的用户身在何处,您的 CSS 文件都可以存储在世界各地的许多地方,以便更快地加载。</span></p><p><span style="color: #ce9178;">缩小CSS比较 167KB 的未缩小 CSS 文件和 92KB 的缩小 CSS 文件之间文件大小的图形</span></p><p><span style="color: #ce9178;">原始 CSS</span></p><p><span style="color: #ce9178;">/* Main Stylesheet *//* Header Style */header {</span></p><p><span style="color: #ce9178;">&nbsp; background-color: #333;</span></p><p><span style="color: #ce9178;">&nbsp; color: white;</span></p><p><span style="color: #ce9178;">&nbsp; padding: 10px;}/* Navigation Style */nav {</span></p><p><span style="color: #ce9178;">&nbsp; background-color: #444;</span></p><p><span style="color: #ce9178;">&nbsp; margin-top: 10px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">上面的CSS代码是可读的,并且有很好的注释,但它包含额外的空格和注释,增加了文件大小。</span></p><p><span style="color: #ce9178;">缩小的 CSS</span></p><p><span style="color: #ce9178;">header{background-color:#333;color:white;padding:10px}nav{background-color:#444;margin-top:10px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">缩小版将所有规则合并为一行,删除了不必要的空格和注释,从而减小了文件大小以加快加载速度。</span></p><p><span style="color: #ce9178;">结论</span></p><p><span style="color: #ce9178;">优化您的 CSS 可以加快您的网站速度,从而改善整体用户体验。</span></p><p><span style="color: #ce9178;">通过实现本文中概述的实践,您可以实现性能更高、效率更高且可维护的 CSS。调整几行代码可能带来的性能节省并不显著,但在不同的样式表中,在数百行中,影响将开始显现。</span></p><p><span style="color: #ce9178;">请记住,Web 性能是一个持续的过程。定期审查和完善您的 CSS,以跟上最佳实践和新兴趋势。</span></p><p><br/></p><p><br/></p>

web前端优化之css优化篇:加快网页访问速度

<p>CSS 不仅仅是一个样式工具。它还决定了网页在浏览器中的呈现方式。优化良好的 CSS 意味着更快的加载时间和更流畅的用户体验。</p><p>在当今的数字环境中,网站的性能是其成功的关键因素。编写高效的CSS代码可以极大地影响网页的加载速度,影响从用户体验到搜索引擎排名的方方面面。</p><p>本指南深入探讨了有效的策略,以帮助您完善CSS,确保您的网站不仅看起来很棒,而且加载速度快,运行流畅。</p><p>CSS 如何影响 Web 性能</p><p>当用户访问网页时,浏览器会检索网站的结构 HTML 及其样式 CSS。这是一组关于网页每个部分应该如何外观的详细说明。</p><p>如果CSS包含太多信息或过于复杂,就像给浏览器一个需要更长的时间才能解决的难题。这可能会导致用户等待时间更长,这可能很烦人。</p><p>这就是简化 CSS 的艺术发挥作用的地方。这不仅仅是整理代码,还要确保浏览器可以更快地准备好网页。</p><p>当 CSS 变得更精简、更简单时,就像给浏览器一个清晰、易于理解的地图。这使得网页加载速度更快,使一切感觉更灵敏。</p><p>1. 编写更短的 CSS</p><p>在编写 CSS 时,使用流行的软件开发原则 Don<span style="color: #ce9178;">&#39;t Repeat Yourself (DRY)。这提倡代码的简洁明了。</span></p><p><span style="color: #ce9178;">这很重要,因为在实践中,CSS 涉及跨各种选择器的重复属性。目标应该是识别和巩固这些重复属性。通过这样做,您可以消除冗余,从而实现更干净、更易于管理的 CSS。</span></p><p><span style="color: #ce9178;">例如,在下面的代码中,多个元素(和 )共享相同的字体大小和颜色。h1h2</span></p><p><span style="color: #ce9178;">h1 {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; font-size: 20px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; color: #fff;}h2 {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; font-size: 20px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; color: #fff;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">因此,您可以将它们分组到一个公共类下,而不是为每个选择器单独声明这些属性。这不仅简化了样式表,而且使未来的更新更容易,更不容易出错。</span></p><p><span style="color: #ce9178;">您可以将上面的代码重写为如下所示:</span></p><p><span style="color: #ce9178;">h1, h2 {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; font-size: 20px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; color: #fff;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">使用速记属性是最小化 CSS 大小的另一种有效策略,使代码更有效率。它还允许您使用单个声明设置多个相关的 CSS 属性。以下是编写有效速记 CSS 的方法:</span></p><p><span style="color: #ce9178;">当元素的所有边都具有相同的值时,请使用该值。</span></p><p><span style="color: #ce9178;">/* Before shorthand */.same-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-top: 15px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-right: 15px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-bottom: 15px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-left: 15px;}/* After shorthand */.same-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 15px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">当元素的所有边都具有不同的值时,请使用所有四个值。</span></p><p><span style="color: #ce9178;">/* Before shorthand */.different-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-top: 10px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-right: 20px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-bottom: 15px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-left: 25px;}/* After shorthand */.different-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 10px 20px 15px 25px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">当 top/bottom 和 right/left 具有相同的值时,请使用两个值。</span></p><p><span style="color: #ce9178;">/* Before shorthand */.two-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-top: 10px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-right: 20px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-bottom: 10px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-left: 20px;}/* After shorthand */.two-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 10px 20px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">如果只有右/左值相同,但顶部和底部不相同,请使用三个值。</span></p><p><span style="color: #ce9178;">/* Before shorthand */.three-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-top: 10px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-right: 20px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-bottom: 15px;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding-left: 20px;}/* After shorthand */.three-sides {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 10px 20px 15px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">2. 使用浅层 CSS 选择器</span></p><p><span style="color: #ce9178;">浅层 CSS 选择器是直接而简洁的选择器,具有较少级别的嵌套元素,不会太深入地挖掘 HTML 结构。</span></p><p><span style="color: #ce9178;">简化选择器可以显著加快网页呈现速度,因为深度嵌套的选择器需要更长的时间供浏览器评估,从而导致页面呈现速度变慢。</span></p><p><span style="color: #ce9178;">考虑以下代码中的示例:将属性值分配给深度嵌套的选择器(如)很麻烦,并且会导致渲染延迟,因为浏览器需要时间来检查每个级别(然后是 header,然后是 nav,然后是 ul 等)以找到正确的 &lt;a&gt; 标签来设置样式)。header nav ul li a</span></p><p><span style="color: #ce9178;">或者,给它一个直接的类是直接的,浏览器可以更快地解释。类选择器通常比嵌套标签更有效,因为浏览器只是查找带有类的元素并应用样式,而不必担心它们在 DOM 树中的位置。.nav-link</span></p><p><span style="color: #ce9178;">/* Less efficient: Deeply nested selector */header nav ul li a {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp;color: #000;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp;font-size: 10px;</span></p><p><span style="color: #ce9178;">&nbsp;}/* More efficient: Class selector */.nav-link {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp;color: #000;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp;font-size: 10px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">3. 段CSS代码</span></p><p><span style="color: #ce9178;">将您的 CSS 代码分割成更小、更集中的片段,例如为不同的网站组件提供单独的文件并创建特定于页面的样式,可以大大提高您网站的性能。这种方法不仅可以更轻松地查找和编辑特定样式,还可以确保网页只加载所需的 CSS,避免不必要的批量。</span></p><p><span style="color: #ce9178;">增强的可维护性和更快的页面加载是最明显的关键优势。较小的 CSS 文件更易于管理,就像一个组织良好的工具箱,其中所有内容都很容易找到。而且,通过只为每个页面加载必要的CSS,浏览器可以减少工作量,从而改善用户体验。</span></p><p><span style="color: #ce9178;">原始 CSS</span></p><p><span style="color: #ce9178;">假设您有一个 CSS 文件,其中包含您网站各个部分的样式:</span></p><p><span style="color: #ce9178;">/* Styles for the home page */.homepage {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; background-color: #f0f0f0;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 10px;}/* Styles for the services page */.services {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; background-color: #333;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; color: white;}/* Styles for the contact page */.contact {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; background-color: #222;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; color: white;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 20px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">分段 CSS</span></p><p><span style="color: #ce9178;">现在,让我们根据其用途将此 CSS 分割成不同的文件:</span></p><p><span style="color: #ce9178;">主页样式(主页.css):</span></p><p><span style="color: #ce9178;">.homepage {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; background-color: #f0f0f0;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 10px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">2. Services page Styles (services.css):</span></p><p><span style="color: #ce9178;">.services {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; background-color: #333;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; color: white;}</span></p><p><span style="color: #ce9178;">CSS code</span></p><p><span style="color: #ce9178;">3. 联系页面样式(contact.css):</span></p><p><span style="color: #ce9178;">.contact {</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; background-color: #222;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; color: white;</span></p><p><span style="color: #ce9178;">&nbsp; &nbsp; padding: 20px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">每个 CSS 文件都集中在网站的特定部分。现在,当用户访问您的网站时,每个页面仅加载所需的 CSS,从而提高网站的性能。</span></p><p><span style="color: #ce9178;">4. 优化 CSS 交付</span></p><p><span style="color: #ce9178;">您可以通过缩小 CSS 来使 CSS 文件更轻、加载速度更快——也就是说,您可以删除多余的空格和行(这称为缩小)。然后,您可以压缩这些文件,以便用户下载它们更小、更快捷。</span></p><p><span style="color: #ce9178;">此外,请确保首先加载您网站最重要的样式,以便人们更快地看到您的页面。其他样式可以在后台加载而不会减慢速度。</span></p><p><span style="color: #ce9178;">您还可以通过在浏览器中保存一些 CSS(这称为缓存)来使访问次数多次的人更快地访问您的网站。这意味着他们不必在每次访问时再次加载。</span></p><p><span style="color: #ce9178;">此外,如果您使用 CDN 或服务器网络,无论您的用户身在何处,您的 CSS 文件都可以存储在世界各地的许多地方,以便更快地加载。</span></p><p><span style="color: #ce9178;">缩小CSS比较 167KB 的未缩小 CSS 文件和 92KB 的缩小 CSS 文件之间文件大小的图形</span></p><p><span style="color: #ce9178;">原始 CSS</span></p><p><span style="color: #ce9178;">/* Main Stylesheet *//* Header Style */header {</span></p><p><span style="color: #ce9178;">&nbsp; background-color: #333;</span></p><p><span style="color: #ce9178;">&nbsp; color: white;</span></p><p><span style="color: #ce9178;">&nbsp; padding: 10px;}/* Navigation Style */nav {</span></p><p><span style="color: #ce9178;">&nbsp; background-color: #444;</span></p><p><span style="color: #ce9178;">&nbsp; margin-top: 10px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">上面的CSS代码是可读的,并且有很好的注释,但它包含额外的空格和注释,增加了文件大小。</span></p><p><span style="color: #ce9178;">缩小的 CSS</span></p><p><span style="color: #ce9178;">header{background-color:#333;color:white;padding:10px}nav{background-color:#444;margin-top:10px;}</span></p><p><span style="color: #ce9178;">CSS 代码</span></p><p><span style="color: #ce9178;">缩小版将所有规则合并为一行,删除了不必要的空格和注释,从而减小了文件大小以加快加载速度。</span></p><p><span style="color: #ce9178;">结论</span></p><p><span style="color: #ce9178;">优化您的 CSS 可以加快您的网站速度,从而改善整体用户体验。</span></p><p><span style="color: #ce9178;">通过实现本文中概述的实践,您可以实现性能更高、效率更高且可维护的 CSS。调整几行代码可能带来的性能节省并不显著,但在不同的样式表中,在数百行中,影响将开始显现。</span></p><p><span style="color: #ce9178;">请记住,Web 性能是一个持续的过程。定期审查和完善您的 CSS,以跟上最佳实践和新兴趋势。</span></p><p><br/></p><p><br/></p>

我们所知道的关于 Vue 3 的 Vapor Mode

<p>什么是蒸汽模式?</p><p>蒸汽模式是受 Solid.js 启发的一种新的替代编译策略。它旨在通过将代码编译为更高效的 JavaScript 输出来提高应用程序的性能。</p><p>在应用级别使用时,您可以完全删除虚拟 DOM,从而减小应用的捆绑包大小。</p><p>&nbsp;好处</p><p>性能更强</p><p>使用更少的内存</p><p>需要较少的运行时支持代码。</p><p>Solid.js 有一个与 Vue 非常相似的反应式系统,它们都在响应式系统中使用代理,并具有基于读取的自动跟踪。这就是为什么 Vue 可以实现与 Solid.js 类似的编译策略。</p><p>蒸汽模式如何工作?</p><p>给定相同的单个文件组件,Vapor 模式将能够将其编译为性能更高的 JavaScript 输出。.vue</p><p>为了优化最佳性能,Vapor 模式将只支持 Vue 功能的一个子集,这些功能是新的组合式 API 和 SFC,这是 Vue 3 编写应用程序的新默认方式。 阅读更多关于 Vue 的年度回顾。.vue&lt;script setup&gt;</p><p>目前的方法是什么?</p><p>目前,Vue 采用混合 VDOM/Compiler 方法。编译器获取 SFC 的模板,对其进行分析并将 a 馈送到虚拟 DOM。</p><p>这种编译器告知的虚拟 DOM 方法允许 Vue 在执行 DOM 操作时比 Svelte 4 等无 V-DOM 的工具表现得更好。</p><p>React / Svelte / Vue Benchmark</p><p>你的眼睛没有欺骗</p><p>你</p><p>Vue 3 目前的表现优于 Svelte 和 React。pic.twitter.com/E6H4OfqGp2</p><p>&amp;mdash<span style="color: #6a9955;">;:icarus.gk (@icarusgkx) 2023年8月21日</span></p><p>如何使用蒸汽模式?</p><p>在组件级别。</p><p>您将能够使用文件名后缀启用它。.vapor</p><p>最终目标是在同一应用程序中自由混合 Vapor 和非 Vapor 组件。</p><p>* 注意</p><p>最初,蒸汽模式可以从集成到 vDOM 中的纯蒸汽树开始,然后从那里提高它们之间的互操作性。</p><p>在应用级别。</p><p>以这种方式编译的应用程序将能够完全删除虚拟 DOM 运行时,并且仅包含@vue/反应性和蒸汽模式运行时帮助程序,这些助手非常轻量级。以这种方式编写的应用程序的基线大小为 ~6kb,而当前带有 vDOM 的基线 Vue 3 应用程序的基线大小为 ~50kb。这减少了 88%!</p><p>要点</p><p>这是一项可选功能,不会影响现有代码库。</p><p>如果你决定将你的 Vue 版本升级到包含 Vapor Mode 的版本,这不会引入任何与 Vapor Mode 相关的重大更改。</p><p>Vapor 模式将能够与 vDOM 组件进行互操作。</p><p>因此,如果您想使用任何使用虚拟 DOM 的库,例如 Vuetify,Vapor 模式仍然能够支持它。</p><p>蒸汽模式级</p><p>虽然仍在开发中,但我们有一些关于它的新闻:</p><p>第 1 阶段:核心功能的运行时</p><p>所有 Vapor 运行时助手都引入了,这些助手基本上是帮助生成代码的代码。这个阶段差不多完成了。</p><p>目标</p><p>支持核心指令 () 和组件树。v-on, v-if, v-for, etc...</p><p>验证性能假设。</p><p>与现有 SSR 输出的水化兼容性。</p><p>第 2 阶段:核心功能的编译器</p><p>这里的主要重点是确保我们可以采用 Vue 模板或 JSX 并将其转换为运行时可以处理的东西。</p><p>目标</p><p>共享代码生成 IR(中间表示)</p><p>JSX AST / 模板 AST - IR - 蒸汽模式代码</p><p>为什么要进行中间表示?</p><p>由于没有虚拟 DOM,Vapor Mode 的编译过程消除了手动创建渲染函数的需要。但是,一些用户需要 JavaScript 的广泛灵活性。在这种情况下,可以将 JSX 编译成 Vapor 代码。</p><p>模板和 JSX 都经历了相同的中间表示的转换,最终编译成 Vapor 代码。</p><p>第 3 阶段:集成</p><p>Vue 旨在使 Vapor 可以无缝嵌入到您现有的应用程序中,而无需对您当前的设置进行任何修改。您可以灵活地在组件级别选择加入,从而逐步将其引入应用程序的子集或专门引入性能关键领域。</p><p>目标</p><p>对独立 Vapor 应用程序的工具支持</p><p>在现有应用程序中运行 Vapor 组件</p><p>在 Vapor 中运行 vDOM 组件</p><p>第 4 阶段:功能奇偶校验</p><p>在最初的版本中,Vapor Mode 将只提供基本的核心功能,而一些更辅助的功能,如 、 、 将在 Vue 团队整理完之前的所有目标后实现。&lt;Transition /&gt;&lt;KeepAlive /&gt;&lt;Teleport /&gt;Suspense</p><p>总结</p><p>Vapor Mode 是 Vue.js 正在开发的一种新的面向性能的编译策略</p><p>它将使用相同的模板(假设你使用的是组合 API,并生成性能更高的输出。&lt;script setup&gt;</p><p>它将是可逐步采用的 - 您将能够选择为单个组件或整个应用程序启用蒸汽模式。</p><p>最终目标是在同一应用程序中自由混合 Vapor 和非 Vapor 组件而不会出现问题,但是,Vapor 模式可以从集成到 vDOM 中的纯 Vapor 树开始,然后从那里提高它们之间的互操作性。</p><p><br/></p>

详细介绍CSS 中的形状shapes

<p>矩形</p><p>最初,HTML 中的所有内容都是矩形。因此,矩形很容易绘制<span style="color: #6a9955;">;指定宽度和高度。如果这不起作用,您可以使用带有内联显示的元素,切换到块或内联块元素,您应该没问题。</span></p><p>.rectangle {</p><p>&nbsp; width: 500px<span style="color: #6a9955;">;</span></p><p>&nbsp; height: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; background: black<span style="color: #6a9955;">;</span></p><p>}</p><p>CSS 代码旁边的矩形以生成矩形</p><p>广场</p><p>正方形是宽度和高度具有相同值的矩形。我们可以采用矩形代码并将高度更改为与宽度相同的值,如下所示:</p><p>.square {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; height: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; background: black<span style="color: #6a9955;">;</span></p><p>}</p><p>那行得通,但是......如果我们想改变正方形的大小,我们每次都需要更新两个值。这不是一个大问题,但在 CSS 中,我们有 aspect-ratio 属性,它允许我们指定宽度和高度之间的关系。设置值 or(如视频中所示)也会产生一个包含相同代码行的正方形,但现在我们只需要更新一行代码来调整它的大小:11 / 1</p><p>.square {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; aspect-ratio: 1<span style="color: #6a9955;">;</span></p><p>&nbsp; background: black<span style="color: #6a9955;">;</span></p><p>}</p><p>CSS代码旁边的正方形来绘制一个正方形</p><p>圈</p><p>从正方形开始,我们需要设置一个圆形。我们通过使用 border-radius 并将其分配给一个相当大的百分比值(50% 或更高)来实现这一点。简单易行。</p><p>.circle {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; aspect-ratio: 1<span style="color: #6a9955;">;</span></p><p>&nbsp; background: black<span style="color: #6a9955;">;</span></p><p>&nbsp; border-radius: 50%<span style="color: #6a9955;">;</span></p><p>}</p><p>CSS代码旁边的圆圈,用于绘制圆圈</p><p>椭圆</p><p>椭圆是像圆形一样的圆形,但不是正方形,而是基于矩形。(椭圆有一个更准确和技术性的定义,但我现在只用这个定义。因此,我们将像圆形一样添加属性,但将其添加到矩形而不是正方形中。border-radius</p><p>.ellipse {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; height: 400px<span style="color: #6a9955;">;</span></p><p>&nbsp; background: black<span style="color: #6a9955;">;</span></p><p>&nbsp; border-radius: 50%<span style="color: #6a9955;">;</span></p><p>}</p><p>用于绘制椭圆的代码旁边的椭圆</p><p>椭圆形/卵形</p><p>椭圆和椭圆是不一样的。内圈是否相互交叉有一些技术定义,但为了简单起见,我们将考虑椭圆形类似于鸡蛋。我们通过使用 border-radius 属性的两个值来实现此形状。是的,有两组,每组最多 4 个值:水平半径,然后用正斜杠 () 分隔垂直半径。/</p><p>我们将水平半径设置为 ,然后为顶角指定较大的垂直半径值,为底角指定较小的垂直半径值。像这样的东西:100%</p><p>.oval {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; height: 400px<span style="color: #6a9955;">;</span></p><p>&nbsp; background: black<span style="color: #6a9955;">;</span></p><p>&nbsp; border-radius: 100% / 120% 120% 75% 75%<span style="color: #6a9955;">;</span></p><p>}</p><p>这些值将取决于矩形的大小。太大的值可能以平坦的顶部结束,而太小的值可能以平坦的底部结束。您可能需要玩弄数字才能获得所需的形状。</p><p>绘制椭圆所需的 CSS 代码旁边的椭圆形</p><p>钟</p><p>铃铛是一种夸张的卵形,一侧长而圆,另一侧是扁平的(尽管仍然具有柔和的曲线)。要获得此形状,请取一个椭圆形,并使大值变大,小值变小。</p><p>如果您创建 CSS 艺术,则此形状可以方便地用于身体甚至面部(稍微调整半径值)。</p><p>.bell {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; height: 400px<span style="color: #6a9955;">;</span></p><p>&nbsp; background: black<span style="color: #6a9955;">;</span></p><p>&nbsp; border-radius: 100% / 160% 160% 25% 25%<span style="color: #6a9955;">;</span></p><p>}</p><p>CSS 代码旁边的铃铛形状,用于绘制铃铛</p><p>拱</p><p>椭圆和钟形略有变化,拱形底部平坦,顶部弯曲。这个值没有玩弄<span style="color: #6a9955;">;我们可以将 border-radius 属性设置为固定值:</span></p><p>.arch {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; height: 400px<span style="color: #6a9955;">;</span></p><p>&nbsp; background: black<span style="color: #6a9955;">;</span></p><p>&nbsp; border-radius: 50% / 100% 100% 0% 0%<span style="color: #6a9955;">;</span></p><p>}</p><p>使用这种方法,如果元素的宽度是高度的两倍,我们将得到一个半圆形而不是拱形。</p><p>CSS 代码旁边的拱形,用于绘制拱形</p><p>眼睛</p><p>三个形状中的第一种形状,需要稍微旋转。我们将从一个正方形开始,然后设置两个相对角的边框半径,同时将其他两个角保留为零。我总是从左上角开始并添加 45 度旋转,但您可以选择任何其他角落并相应地调整旋转。</p><p>.eye {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; aspect-ratio: 1<span style="color: #6a9955;">;</span></p><p>&nbsp; background: black<span style="color: #6a9955;">;</span></p><p>&nbsp; rotate: 45deg<span style="color: #6a9955;">;</span></p><p>&nbsp; border-radius: 80% 0<span style="color: #6a9955;">;</span></p><p>}</p><p>您可以使用该属性或 .无论哪种方式都可以。至于边框半径,该值越高,眼睛曲率越柔和(重复值以允许一侧比另一侧高:.)rotate: 45degtransform: rotate(45deg)80% 0 100% 0</p><p>用CSS代码画眼睛的眼睛形状</p><p>撕</p><p>有趣的是,眼泪的形状是眼睛形状的变体。相同的代码,只是更改了边框半径:最大化三个半径以获得圆形,并将最后一个角半径保留为零,使其以一个点结束。</p><p>.tear {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; aspect-ratio: 1<span style="color: #6a9955;">;</span></p><p>&nbsp; background: black<span style="color: #6a9955;">;</span></p><p>&nbsp; rotate: 45deg<span style="color: #6a9955;">;</span></p><p>&nbsp; border-radius: 0 50% 50% 50%<span style="color: #6a9955;">;</span></p><p>}</p><p>CSS 代码旁边的撕裂形状,用于绘制撕裂形状</p><p>心</p><p>绘制心形与前面的形状略有不同,因为它将使用元素以及 ::before 和 ::after 伪元素。我们从一个正方形开始,将其旋转 45 度,然后将伪元素添加为圆形(见上文)。我们水平平移一个伪伪,垂直平移另一个伪伪斜移(当元素旋转时,两者都会斜移),这样就完成了。代码可能看起来很“复杂”,但想法很简单。</p><p>.heart {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; aspect-ratio: 1<span style="color: #6a9955;">;</span></p><p>&nbsp; background: black<span style="color: #6a9955;">;</span></p><p>&nbsp; rotate: 45deg<span style="color: #6a9955;">;</span></p><p>&nbsp; position: relative<span style="color: #6a9955;">;</span></p><p>}</p><p>.heart::before,</p><p>.heart::after {</p><p>&nbsp; content: <span style="color: #ce9178;">&quot;&quot;</span><span style="color: #6a9955;">;</span></p><p>&nbsp; position: absolute<span style="color: #6a9955;">;</span></p><p>&nbsp; width: 100%<span style="color: #6a9955;">;</span></p><p>&nbsp; aspect-ratio: 1<span style="color: #6a9955;">;</span></p><p>&nbsp; border-radius: 50%<span style="color: #6a9955;">;</span></p><p>&nbsp; background: inherit<span style="color: #6a9955;">;</span></p><p>&nbsp; translate: -50% 0<span style="color: #6a9955;">;</span></p><p>}</p><p>.heart::after {</p><p>&nbsp; translate: 0 -50%<span style="color: #6a9955;">;</span></p><p>}</p><p>CSS代码旁边的一颗心画一颗心</p><p>三角形</p><p>许多在线文章讨论了如何使用边框、高度/宽度为零和一些透明颜色绘制三角形。我强烈反对这种做法。虽然它有效,但它是老式的,如果我们想要灵活性和响应能力,可能会很麻烦。(如果你想了解更多关于为什么,我写了一篇文章,用不同的方法在CSS中绘制三角形,它们的优缺点)。</p><p>相反,我建议使用 clip-path 来绘制三角形 - 以及以下一些多边形形状。使用 clip-path,我们指定定义形状的路径(可以使用多边形、图像、实际路径等)。该形状之外的所有内容都将被剪裁。在三角形的情况下,我们只需要 3 个点。</p><p>.triangle {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; height: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; background: black<span style="color: #6a9955;">;</span></p><p>&nbsp; clip-path: polygon(50% 0, 100% 100%, 0 100%)<span style="color: #6a9955;">;</span></p><p>}</p><p>CSS代码旁边的三角形,用于绘制三角形</p><p>梯形</p><p>另一个多边形。使用中的函数很容易制作。在这种情况下,我们将从一个矩形或正方形开始,我们需要四个点:底部的点在角落里,顶部的点稍微在里面。我们完成了!polygon()clip-path</p><p>.trapezoid {</p><p>&nbsp; width: 400px<span style="color: #6a9955;">;</span></p><p>&nbsp; height: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; background: black<span style="color: #6a9955;">;</span></p><p>&nbsp; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%)<span style="color: #6a9955;">;</span></p><p>}</p><p>CSS 代码旁边的梯形,用于绘制梯形</p><p>八角形</p><p>我做了八边形,因为它很容易做到(不需要计算任何东西或使用三角学)。好消息是 / 方法可以外推到任何多边形形状。clip-pathpolygon()</p><p>在视频中,我简化了点,这样它们就不会占据整个屏幕<span style="color: #6a9955;">;实际上,我们需要使用一些十进制数来获得八边形:</span></p><p>.octagon {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; height: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; background: black<span style="color: #6a9955;">;</span></p><p>&nbsp; clip-path: polygon(16.6% 16.6%, 50% 0, 83.3% 16.6%, 100% 50%,</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;83.3% 83.3%, 50% 100%, 16.6% 83.3%, 0 50%)<span style="color: #6a9955;">;</span></p><p>}</p><p>CSS 代码旁边的八边形,用于绘制八边形</p><p>火花</p><p>火花是八边形的变体。唯一的区别是其中四个点的位置。在八角形中,它们朝向外面<span style="color: #6a9955;">;在火花中,它们将朝向内部(想象一个旋转的正方形)。</span></p><p>.spark {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; aspect-ratio: 1<span style="color: #6a9955;">;</span></p><p>&nbsp; background: black<span style="color: #6a9955;">;</span></p><p>&nbsp; clip-path: polygon(40% 40%, 50% 0, 60% 40%, 100% 50%,</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;60% 60%, 50% 100%, 40% 60%, 0 50%)<span style="color: #6a9955;">;</span></p><p>}</p><p>为了获得更酷的效果,不要将形状应用于元素本身,而是应用于元素和伪元素。然后将一个旋转 45 度(如果将此旋转应用于 .::before::after::before</p><p>CSS 代码旁边的四点火花形状来绘制它</p><p>月亮</p><p>月亮可以有多种形式。我们所说的月亮形状是指新月形(或渐变)。我们可以从圆形开始并应用框阴影来快速实现这一点。框阴影允许五个值:水平平移、垂直平移、模糊度(可选)、缩放(可选)和颜色(可选,默认为文本颜色)。根据我们是想要新月形还是渐变形,我们会在右边或左边添加一个大阴影。</p><p>.moon {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; aspect-ratio: 1<span style="color: #6a9955;">;</span></p><p>&nbsp; border-radius: 50%<span style="color: #6a9955;">;</span></p><p>&nbsp; box-shadow: -90px 0 0 80px black<span style="color: #6a9955;">;</span></p><p>}</p><p>作为替代实现,我建议使用蒙版而不是阴影。这是因为使用蒙版实现时,月亮的绘制在页面的流程中是明确定义的,并且它与用于绘制月亮的元素的大小相匹配(我们可以使用插图来避免这个问题)。此外,蒙版比阴影提供了更大的灵活性。</p><p>.moon {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; aspect-ratio: 1<span style="color: #6a9955;">;</span></p><p>&nbsp; border-radius: 50%<span style="color: #6a9955;">;</span></p><p>&nbsp; -webkit-mask: radial-gradient(circle at 75% 50%, <span style="color: #6a9955;">#0000 33%, #000 0);</span></p><p>}</p><p>CSS 代码旁边的递减月亮来绘制它</p><p>污渍/飞溅</p><p>此形状比此列表中的所有其他形状都更复杂。我写了一篇关于如何创建它的更详细的文章(包括一个分步视频)。这个想法是具有重复的圆锥渐变并应用过滤器以使它们看起来平滑。</p><p>您可以通过更改背景的数量或其大小来实现许多不同形状的效果。玩一玩,找到你最喜欢的那个。</p><p>.stain {</p><p>&nbsp; width: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; height: 300px<span style="color: #6a9955;">;</span></p><p>&nbsp; background:</p><p>&nbsp; &nbsp; repeating-conic-gradient(<span style="color: #6a9955;">#000 0 3%, #0000 0 11%),</span></p><p>&nbsp; &nbsp; repeating-conic-gradient(<span style="color: #6a9955;">#0000 0 5%, #000 0 7%) 50% / 60% 60%,</span></p><p>&nbsp; &nbsp; repeating-conic-gradient(<span style="color: #6a9955;">#0000 0 7%, #000 0 9%) 50% / 70% 70%,</span></p><p>&nbsp; &nbsp; repeating-conic-gradient(<span style="color: #6a9955;">#0000 0 11%, #000 0 13%) 50% / 80% 80%,</span></p><p>&nbsp; &nbsp; radial-gradient(<span style="color: #6a9955;">#000 22%, #0000 0),</span></p><p>&nbsp; &nbsp; <span style="color: #6a9955;">#fff;</span></p><p>&nbsp; mix-blend-mode: darken<span style="color: #6a9955;">;</span></p><p>&nbsp; filter: blur(10px) contrast(100) brightness(1) &nbsp;grayscale(1)<span style="color: #6a9955;">;</span></p><p>&nbsp; box-shadow: 0 0 0 50px <span style="color: #6a9955;">#fff;</span></p><p>}</p><p>用代码染色形状</p><p><br/></p><p><br/></p>

成为一名优秀的软件工程师比以往任何时候都更难

<p>在创业环境中工作了近十年,使我有幸接触到创新、探索和快速失败方法的快节奏文化。我遵循了标准的晋升阶梯:实习生、初级、中级、高级,并最终进入了工程管理轨道。随着时间的流逝,许多与我一起成长的人后来转到其他公司工作,成为那里备受尊敬的贡献者。公平地说,他们是优秀的工程师。</p><p>回顾我的同龄人、学员和我自己的旅程,成为一名优秀的工程师似乎比以往任何时候都更难。</p><p>定义一个好的工程师</p><p>成为一名工程师意味着什么?作为软件工程师,我们是:</p><p>负责将复杂问题转化为高效且可扩展的解决方案</p><p>负责分析用户需求、设计软件架构、编写代码以及测试和调试软件</p><p>有望紧跟趋势,寻求新的商机和改进现有产品的方法</p><p>所以不,工程不等于编程。有时,这是最小的部分。随着经验的增加,它确实如此,如下图所示。</p><p>按角色划分的工作分配</p><p>来源:工程领导技能组合重叠</p><p>成为一名优秀的工程师意味着什么?基于多次采访,并支持我的学员的进步,我注意到具有不同专业水平的人可能会给出不同的答案。</p><p>刚起步的人可能会认为这是开发人员知道的语言和框架的数量。更有经验的工程师甚至可能不关心他们使用的语言,而是强调代码质量——遵守所有编码原则并进行 QA,同时迅速行动。</p><p>经验丰富的工程师非常注重创造价值。有时我们会快速编写打破所有规则的一次性代码来证明假设<span style="color: #6a9955;">;有时我们会花几天时间编写几行关键任务代码。但大多数时候,我们都在做出架构决策、讨论关键任务问题、改进流程等。因为通常,这会带来最大的价值。</span></p><p>尽管规则总是有例外,但我们可以说,一个好的工程师是有效地集中精力在实现目标时带来最大价值的工程师。</p><p>不断增长的市场和竞争</p><p>科技市场在不断发展。多年来,我们都看到了巨大的成功:从WhatsApp到Uber,Airbnb和TikTok。虽然这些可能是例外,但这些例子往往为人们设定了北极星——这是他们应该为之奋斗的。这种思维方式给工程师带来了额外的压力。他们感到来自内部的压力,认为自己做错了什么,而从外部来看,人们将他们的公司与许多竞争对手进行比较。</p><p>科技总市值</p><p>资料来源:公共技术市场的健康状况如何?</p><p>为了在这样的环境中取得成功,公司需要“快速行动,打破常规”,正如著名的Facebook座右铭所说。今天,这一点比以往任何时候都更加明显——几乎每家公司都在成为“人工智能公司”。每个人都在整合 ChatGPT,通常没有真正的原因,没有关于它将如何带来价值的策略。</p><p>通过摒弃核心原则——我们如何为客户带来更多价值——并朝着在炒作列车上击败竞争对手的方向发展,我们让工程师构建注定要失败的功能。</p><p>世界是一个令人困惑的地方</p><p>像我这样的爱好者应该怎么做才能成为一名更好的工程师?除了通过改进干净的代码和架构理念来完善编码技能的明显选择外,如今还有很多诱惑潜伏着。学习 TypeScript 和改变一切的最新框架,潜入区块链和加密世界,尝试无数的 AI 产品......选择是无穷无尽的。</p><p>所有 javascript 库</p><p>说实话,在这个行业这么多年,我仍然感到受到 ChatGPT、GitHub Copilot 和其他新兴技术带来的新一轮变革的威胁。我的大脑开始想象我在很多事情上脱节的场景。我是否专注于正确的事情来带来价值?我是否发挥了我的最大潜力?</p><p>一段时间后,很明显我们正处于炒作之中。这也将过去,只剩下创造长期价值的人工智能公司。在过去 5 年中,美国的 AI 公司数量翻了一番,许多初创公司只是在当时新发布的 GPT-3 之上添加了一项功能。他们后来会随着 ChatGPT 或 GPT-4 的发布而消亡,它们可以做同样的事情,但更好。但这并不能阻止Twitter和其他平台的炒作大军宣布新的世界秩序。</p><p>即使我在科技行业工作了这么多年,我还是被卷入了炒作中。菜鸟失误!</p><p>编程语言和新框架的不断发布也加剧了混乱。Tailwind、TypeScript、Haskell 和 Rust 都很棒<span style="color: #6a9955;">;他们每个人都有一个角度,这给他们带来了优势。然而,人们经常误以为学习它们会给他们带来优势。它不会,或者至少不应该。它们只是很高兴知道但不能取代经验的工具。这就是为什么我们从不在职位描述中提出语言/框架要求的原因。如果错过一个有才华的工程师,那将是一个傻瓜,因为他们不懂TypeScript、提示工程或微服务。</span></p><p>我的建议是——不要被新趋势和炒作所困扰,以至于你失去了对带来价值的关注。</p><p>快节奏和高期望</p><p>在寻求新的挑战时,可能很难在避免消极压力的同时争取积极的压力。积极压力是指我们将压力情况视为带来良好结果的机会,而消极压力是一种可能对身心健康产生不利影响的压力,如下图所示。在紧张的时间表上不断交付结果是有压力的,并且出于错误的原因构建功能会倾向于后者。</p><p>Positive stress vs. negative stress</p><p>无论是作为导师还是勤奋工作的人,我都看到压力会导致倦怠。无一例外,让某人经历倦怠会导致比减少工作量、休息和长期优化更少的产出。这就是为什么我们总是试图通过定期的团队更新、一对一和培养文化,使发出危险信号尽可能简单。</p><p>不过,事情还是会出错。当他们这样做时,我们会缩小范围,让可以提供帮助的人参与进来,或者与我们的客户沟通以推迟发布。</p><p>压力比以往任何时候都高,既来自内部,也来自外部。保持专注,并拥有一支长期优化的支持团队。</p><p>我们怎样才能做得更好?</p><p>我们都有落魄的时刻——感觉自己不够称职的工程师、导师或同事。事情永远不会完美或容易,也不应该。没有犯错误和困难,我们就不会学习。但是我发现有些东西可以提高效率。</p><p>Levels of influence</p><p>就个人而言,忠于真正重要的事情。技术会来来去去,但你为世界带来的价值才是最重要的。很难伪造努力工作和经验。</p><p>作为一家公司,在做出决策时要从为什么开始。这是提供能够带来价值的功能的最佳方式。此外,确保员工知道原因。根据我的经验,他们会做出更好的决定,提供有价值的反馈,并且更快乐。</p><p>在文化上,建立支持员工的流程,进行长期优化。与您的同事一起建立信任、支持和关怀的文化。这样,你们都会得到彼此最好的东西。</p><p><br/></p>

如何在生产环境中将 Vault 与 Kubernetes 的外部密钥一起使用?

<p>今天,我们将讨论如何优化 Kubernetes 中存储机密的流程,并学习授权我们的开发人员查看/修改部署在 Kubernetes 集群中的机密。我们还将根据开发人员所属的 GitHub 团队将访问权限委托给他们。</p><p>因此,让我问你一个基本问题,如何在 K8s 集群中存储密钥?</p><p>如果您回答说您使用的是普通的 base64 编码清单文件并手动管理它们,则:</p><p>当前方法中的问题</p><p>不容易可见 - 没有 GUI 来轻松管理机密</p><p>无版本控制</p><p>如果您想与开发人员共享,则需要将 K8s 凭据公开给他们。(不过,您可以为它们创建和设置适当的 RBAC 权限,但在某些用例中不能使用)</p><p>不支持任何第三方身份验证,例如 - 使用 GitHub Team/Org 授予开发人员预定义的访问级别。</p><p>简单解决方案 - 将 Vault 与外部机密一起使用</p><p>是的,你没听错,一旦设置好了,将访问权限委派给用户将是一件轻而易举的:)</p><p>第1季第3集 GIF by BET Plus</p><p>我们的行动项目</p><p>安装 External Secrets Operator</p><p>安装保管库</p><p>将 Vault 配置为允许使用 GitHub PAT 登录</p><p>为外部密钥配置保管库身份验证</p><p>配置外部密钥以从保管库创建密钥</p><p>在 Vault 中创建一个示例密钥,并查看该密钥是在 K8s 中创建的</p><p>安装 External Secrets Operator</p><p>https://external-secrets.io/latest/introduction/overview/</p><p>它有三个组件 - 外部机密控制器、Webhook 和证书控制器</p><p>您可以使用 Helm 快速安装外部机密!</p><p>https://external-secrets.io/latest/introduction/getting-started/</p><p>values.yaml</p><p><span style="color: #6a9955;">#? count of the controller pods for HA</span></p><p>replicaCount: 3</p><p><span style="color: #6a9955;">#? enable/disable the leader election - at any time, only one active controller is recommended</span></p><p>leaderElect: true</p><p><span style="color: #6a9955;">#? how many secrets to update concurrently</span></p><p>concurrent: 3</p><p><span style="color: #6a9955;">#? PDB configuration - helpful when doing maintenance tasks</span></p><p>podDisruptionBudget:</p><p>&nbsp; enabled: true</p><p>&nbsp; minAvailable: 1</p><p><span style="color: #6a9955;">#? Recommended - Exposes metrics!</span></p><p>serviceMonitor:</p><p>&nbsp; enabled: true</p><p>webhook:</p><p>&nbsp; serviceMonitor:</p><p>&nbsp; &nbsp; enabled: true</p><p>certController:</p><p>&nbsp; serviceMonitor:</p><p>&nbsp; &nbsp; enabled: true</p><p>helm repo add external-secrets https://charts.external-secrets.io</p><p>helm upgrade --install external-secrets external-secrets/external-secrets -f values.yaml -n external-secrets --create-namespace</p><p>部署后,它将如下所示:</p><p>注 - 您可以看到三个部署,但由于我们启用了其中只有一个将处于活动状态并保留租约,其他副本将等待主副本关闭,然后其中一个备用副本将成为领导者。是不是很酷?external-secretsleaderElect</p><p>奖金!- 更多关于K8s领导人选举的信息:https://carlosbecker.com/posts/k8s-leader-election/</p><p>安装保管库</p><p>加工</p><p>Vault的内部工作非常有趣,用几句话总结起来有点复杂,我们需要另一个博客来更详细地解释它。如果您完全一无所知,那么您可以在此处阅读有关此内容的更多信息:</p><p>https://developer.hashicorp.com/vault/docs/what-is-vault<span style="color: #6a9955;">#what-is-vault-1</span></p><p>https://developer.hashicorp.com/vault/docs/internals/architecture</p><p>要安装 Vault,我们将使用 Banzaicloud 的 Vault Operator,又名 Bank Vaults!</p><p>为了在 Kubernetes 环境中部署任何东西并确保其可靠性和可用性,Operator 正在成为事实上的标准。</p><p>您知道吗:Kubernetes Operator 是一个特定于应用程序的控制器,它扩展了 Kubernetes API 的功能,以代表 Kubernetes 用户创建、配置和管理复杂应用程序的实例。</p><p>在这里查看更多: https://operatorframework.io/what/</p><p>使用 Helm 安装 vault-operator</p><p>helm repo add banzaicloud-stable https://kubernetes-charts.banzaicloud.com</p><p>helm repo update</p><p>helm upgrade --install vault-operator banzaicloud-stable/vault-operator -n vault-operator</p><p>设置 RBAC</p><p>rbac.yaml- 需要应用它来为我们的设置提供所需的 RBAC 访问权限。</p><p>&nbsp;kubectl apply -f vault/rbac.yml -n vault-operator</p><p>解释-在这里,我们正在创建一个 Secret vault-sa-token-manual,它将保存名为 vault 的 ServiceAccount 的 Kubernetes 访问令牌(在 Kubernetes v1.24 之前,我们不必手动创建密钥,请参阅 - stackoverflow.com/a/72258300)。此 ServiceAccount 有权读取/更新 Pod 以及对机密的所有访问权限。</p><p>注 - 您还可以通过仅添加必需的谓词/资源名称/命名空间来微调访问。</p><p>另外,您是否注意到我们正在绑定一个名为 ServiceAccount 的默认值?来自官方文档 - 允许委派身份验证和授权检查。ClusterRole 具有调用 Token Review API 的权限。ClusterRolesystem:auth-delegatorVaultsystem:auth-delegator</p><p>Christian Bale GIF by PeacockTV</p><p>使用 CRD 部署 Vault</p><p>现在,由于我们已经使用 Vault Operator 为集群提供支持,因此我们可以使用简单的 YAML 文件部署 Vault。</p><p>vault-deploy.yaml</p><p>身份验证和授权</p><p>在这里,我们使用 GitHub 身份验证后端对用户进行身份验证。他们的访问级别由他们所属的 GitHub 团队定义。</p><p>例如,我的帐户 (k4kratik) 被分配了 admin policy 。同样,我在我的组织中创建了一个 GitHub 团队,该团队将授予其成员在策略中定义的访问权限,并且还为开发人员创建了一个团队,我只想为其配置只读访问权限,该团队将被分配 .vault_adminDEVS_RWrw_access_policyDEVS_ROro_access_policy</p><p>以上可视化如下:</p><p>配置文件说明:</p><p>从 <span style="color: #6a9955;">#1 行到 #102 行,我认为这几乎是不言自明的。让我们从第 #106 行开始。(externalConfig 开始的位置)</span></p><p>externalConfig.policies</p><p>就像任何其他设置一样,我们在这里定义 IAM 策略,这些策略将分配给用户/团队。</p><p>ro_access_policy:仅权限。read</p><p>rw_access_policy:RW 权限。[“读取”, “列表”, “更新”]</p><p>vault_admin:仅使用动词定义并不能授予所有权限。因此,我们已显式定义了所有管理员级别的访问权限。*</p><p>为什么?: 更多信息 : https://discuss.hashicorp.com/t/vault-admin-policy/39803/2</p><p>管理员所需的访问权限:https://developer.hashicorp.com/vault/tutorials/policies/policies<span style="color: #6a9955;">#write-a-policy</span></p><p>externalConfig.auth:kubernetes</p><p>type:当我们将其设置为在 Kubernetes 上运行时,它的值应该是external-secretskubernetes</p><p>path:保管库中此身份验证条目的标识符。</p><p>config</p><p>token_reviewer_jwt:ServiceAccount 的 JWT Token,因为它具有角色,可以帮助我们使用 K8s 的 API 来验证其他 JWT。若要获取其值,请运行以下命令,如博客前面部分所示,我们已经设置了所需的 RBAC。vaultsystem:auth-delegatorTokenReview</p><p>命令(此命令并替换为TOKEN_REVIEWER_JWT_TOKEN_HERE )</p><p>&nbsp; kubectl get secret vault-sa-token-manual -n vault-operator -o <span style="color: #569cd6;">go-template</span>=<span style="color: #ce9178;">&#39;{{.data.token}}&#39;</span> | base64 --decode</p><p>kubernetes_ca_cert:PEM 编码的 CA 证书,供用于与 Kubernetes API 通信的 TLS 客户端使用。</p><p>命令</p><p>&nbsp; kubectl get secret vault-sa-token-manual -n vault-operator -o <span style="color: #569cd6;">go-template</span>=<span style="color: #ce9178;">&#39;{{index .data &quot;ca.crt&quot;}}&#39;</span> | base64 --decode</p><p>kubernetes_host:的端点。确保可从 Vault Pod 访问它。Kubernetes API server</p><p>&nbsp; kubectl config view --minify --output <span style="color: #569cd6;">jsonpath</span>=<span style="color: #ce9178;">&quot;{.clusters[*].cluster.server}&quot;</span></p><p>disable_issuer_verification: - 禁用颁发者验证。true</p><p>roles - 定义附加到此身份验证机制的角色</p><p>name:角色的名称</p><p>bound_service_account_names: - 我们只想允许外部机密 SA,所以只添加它。[<span style="color: #ce9178;">&quot;external-secrets&quot;</span>]</p><p>bound_service_account_namespaces [<span style="color: #ce9178;">&quot;external-secrets&quot;</span>]- 我们只想允许外部机密命名空间,所以只添加它。</p><p>token_policies:-重要!- 要附加的策略的名称,我们的外部密钥只需要读取访问权限即可读取密钥。ro_access_policy</p><p>token_max_ttl:令牌到期时间。</p><p>外部配置.auth:github</p><p>type:由于我们正在通过 GitHub 设置身份验证,因此其值应为github</p><p>path:保管库中此身份验证条目的标识符。</p><p>config</p><p>organization:您的 GitHub 组织的名称。(用这个替换GITHUB_ORGANIZATION_NAME_HERE)</p><p>注意!- 您必须是此组织的一员,否则您将无法登录,并且您将收到以下错误:Configuration is not set!</p><p>token_ttl:生成的令牌的生存期。</p><p>map(GitHub 的映射)</p><p>teams(映射具有保管库策略的 GitHub Teams)</p><p>格式:</p><p>TEAM_NAME : POLICY_NAME</p><p>例如</p><p>DEV_RW:rw_access_policy</p><p>DEV_RO:ro_access_policy</p><p>users(使用 Vault 策略的 GitHub 用户的映射)</p><p>例如:k4kratikvault_admin</p><p>externalConfig.secrets</p><p>path: - Vault 将挂载此秘密引擎的路径。secret</p><p>type: - 秘密引擎类型:键/值kv</p><p>options:</p><p>version: 2 (推荐)</p><p>startupSecrets(启动密钥)</p><p>测试密钥,将在启动时创建。</p><p>审计</p><p>审核设备是保险柜中的组件,它们共同保留对保险柜的所有请求的详细日志。</p><p>文件审计设备将审计日志写入文件。https://developer.hashicorp.com/vault/docs/audit/file<span style="color: #6a9955;">#configuration</span></p><p>部署 Vault</p><p>kubectl apply -f vault/vault-deploy.yml</p><p>它将部署 Pod,如下所示:</p><p>登录到 Vault UI</p><p>让我们公开用于登录的Vault UI</p><p>&nbsp; kubectl port-forward svc/vault -n vault-operator 8200:8200</p><p>您将受到以下屏幕的欢迎:</p><p>使用 GitHub PAT(个人访问令牌)登录</p><p>生成至少具有权限的 GitHub PAT(指南在这里read:org)</p><p>我们将使用该 PAT 登录 Vault</p><p>注意 - 记住我们创建的身份验证策略,根据我们的 GitHub 用户名、组织或团队,我们将获得相关访问权限。</p><p>检查引擎,你会发现我们的测试秘诀:secretTEST_PROJECT_ONE/test</p><p>使用 Root Token 登录 [不推荐]</p><p>获取根令牌</p><p>&nbsp; kubectl get secrets vault-unseal-keys -o <span style="color: #569cd6;">jsonpath</span>={.data.vault-root} | base64 --decode</p><p>使用此令牌登录,如下所示</p><p>检查我们配置的内容:</p><p>检查我们定义的身份验证 - <span style="color: #ce9178;">&#39;github&#39;</span> 和 <span style="color: #ce9178;">&#39;k8s-one&#39;</span></p><p>让我们检查一下 auth 方法,我们的角色是否存在k8s-onek8s-one-external-secrets-role</p><p>这总结了基本的保管库身份验证和授权设置 + 外部机密。</p><p>Jimmy Fallon GIF by The Tonight Show Starring Jimmy Fallon</p><p>但要抱住你的马!我们仍然需要使用外部密钥从 Vault 创建密钥。如果博客看起来太长,我们深表歉意,但相信我,最终这一切都是值得的。</p><p>Season 1 GIF by Showtime</p><p>设置外部机密</p><p>外部机密有两种重要的对象类型</p><p>SecretStore(或) - 它定义如何访问外部 API 密钥提供程序。(例如 Vault、AWS Secrets Manager)ClusterSecretStore</p><p>ExternalSecret(or ) - 它描述了应该获取哪些数据,应该如何转换数据并将其保存为 K8s 。ClusterExternalSecretSecret</p><p>让我们创建一个群集范围的密钥存储,以将其与保管库连接。</p><p>&nbsp; kubectl apply -f external-secrets/secret-store.yml</p><p>它如下所示</p><p>在创建 之前,让我们在 Vault 中创建一些测试密钥ExternalSecret</p><p>现在,让我们创建一个 to use our 并使用它创建一个 k8s 密钥。ExternalSecretClusterSecretStore</p><p>sample-external-secret.yaml (GitHub的)</p><p>&nbsp; k apply -f external-secrets/sample-external-secret.yaml</p><p>让我们通过检查密钥来验证它</p><p>瞧!我们可以看到我们的秘密被创建了,我们也可以看到我们在 Vault 中的值经历了</p><p><br/></p>