首字下沉已在印刷媒体中使用了很长时间，以使部分或章节的第一段的第一个字母显得华丽。这些首字下沉有助于吸引注意力并吸引读者，通常是使用非常风格化字体的好时机，因为它只应用于一个字母，因此不会影响文本的可读性。可以使用::first-letter伪元素和新的initial-letter属性通过 CSS 实现相同的首字下沉效果。 ::首字母伪元素选择器 ::first-letter是一个类似于::before和::after的伪元素选择器，它有效地使元素的第一个字母具有样式，就好像它是它自己的独特元素一样，而无需向页面添加任何额外的标记。 这是一个简单的例子，我们为第一段或文章元素的第一个字母设置样式： article p:first-child::first-letter { color: hotpink; padding: 0 .3rem; margin: 0 .3rem 0 0; border: 2px solid; border-radius: 8px; font-family: “IBM Plex Mono”, monospace; } 有了这个，我们得到了这样的东西： Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英。Suspendisse ante turpis、rhoncus vel nisi eu、congue iaculis neque。Nunc bibendum dui felis，et auctor mi maximus in。Vestibulum porta orci et ..
Category : 教程系列
介绍 Font Awesome是一个提供图标和社交标志的网站工具包。React是一个用于创建用户界面的编码库。虽然 Font Awesome 团队制作了一个React 组件来促进集成，但仍有一些基础知识需要了解 Font Awesome 5 及其结构。在本教程中，您将探索如何使用 React Font Awesome 组件。 先决条件 本教程不需要编码，但如果您有兴趣尝试一些示例，您将需要以下内容： Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。 创建 React App，您可以按照如何设置 React 项目来完成。 第 1 步 – 使用 Font Awesome Font Awesome 团队创建了一个React 组件，因此您可以将两者结合使用。使用此库，您可以在选择图标后按照教程进行操作。 在本例中，我们将使用home图标并执行App.js文件中的所有操作： 源代码/App.js import React from “react”; import { render } from “react-dom”; // get our fontawesome imports import ..
介绍 Angular CLI 可以创建一个新的 Angular 项目，它将处理 webpack 配置。但是，在某些情况下，您需要添加自定义 webpack 功能。 出于本文的目的，您将学习如何使用该moment.js库并删除未使用的语言环境以创建更小的包大小。 注意： moment.js是处理日期和时间的流行库。但是，当前的项目状态表明，根据您的目标受众，可能还有其他采用现代方法的库可能更适合您的项目。出于减少捆绑包大小的教育目的，本文将继续使用moment.js. 在本文中，您将采用现有的 Angular CLI 生成的项目并@angular-builders/custom-webpack用于自定义 webpack 配置。 先决条件 要完成本教程，您需要： Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。 对设置 Angular 项目有一定的了解。 本教程已通过 Angular v10.2.0、@angular-builders/custom-webpackv10.0.1、moment.jsv2.29.1 和moment-locales-webpack-pluginv1.2.0 验证。 步骤 1 — 设置项目 您可以使用它@angular/cli来创建一个新的 Angular 项目。 在终端窗口中，使用以下命令： npx @angular/cli new AngularCustomWebpackConfig –style=css –routing=false –skip-tests 这将配置一个新的 Angular 项目，其样式设置为“CSS”（与“Sass”、Less 或“Stylus”相反），没有路由，并跳过测试。 导航到新创建的项目目录： cd AngularCustomWebpackConfig ..
在计算中，调试是寻找并解决阻止软件正常运行的问题的过程。 软件错误是指代码库中导致意外结果或意外结果的错误或故障。由于这种命名约定，发现和修复错误的过程称为调试。 将故障称为“错误”的著名历史先例来自计算机先驱 Grace Hopper 对一只飞蛾被困在哈佛 Mark II 机电计算机中，随后被记录在日志中的描述。与工程缺陷有关的“错误”的词源早于 1940 年代的该帐户，但是，至少从 1870 年代起就已成为行话的一部分。 有许多系统和工具可用于解决软件中出现的错误并通过调试解决它们。策略可能包括交互式调试、单元测试、集成测试和监控。软件开发工具、实践和编程语言本身提供调试支持。要了解有关调试的更多信息，您可以在我们的调试 Python 程序系列中阅读如何在 Python 中进�..
下载完整的电子书！ 如何使用EPUB 格式的Ansible电子书管理远程服务器 如何使用PDF 格式的Ansible电子书 管理远程服务器 电子书简介 本书旨在向您介绍使用 Ansible 来管理您的服务器。您将学习如何在控制节点上安装和配置 Ansible，然后如何使用它在远程服务器上配置和运行命令。您还将学习如何将任务收集到完整的 Playbook 中，以从头到尾自动化服务器设置。 本书基于DigitalOcean Community上的How To Manage Remote Servers with Ansible系列教程。它涵盖的主题包括如何： 熟悉配置管理工具和流程，以及使用它们管理基础架构的好处。 在 Ubuntu 20.04 控制节点上安装和配置 Ansible，确保您的服务器设置正确，并且您能够通过 Ansible 执行远程指令。 构建清单文件并将您的服务器组织成组，以有选择地控制 Ansible 命令的运行方式和位置。 运行 Ad Hoc 命令以在一台或多台远程服务器上执行单个任务。 将单个命令打包到 Playbooks 中，您可以使用这些命令自动配置多个服务器，以及如何使用标签在 Playbooks 中运行特定的任务集。 每章都可单独用作参考，或作为学习如何使用 Ansible 管理服务器的渐进指南的一部分。如果您熟悉某个主题，或者对特定部分更感兴趣，请随时跳至最适合您目的的章节。 下载电子书 您可以通过以下链接下载 EPUB 或 PDF 格式的电子书。 下载完整的电子书！ 如何使用EPUB 格式的Ansible电子书管理远程服务器 如何使用PDF 格式的Ansible电子书 ..
作为Write for DOnations计划的一部分，作者选择了技术教育基金来接受捐赠。 介绍 Minecraft是一款流行的沙盒视频游戏。最初于 2009 年发布，它允许玩家在块 3D 生成的世界中构建、探索、制作和生存。截至 2019 年底，它是有史以来第二畅销的视频游戏。在本教程中，您将创建自己的 Minecraft 服务器，以便您和您的朋友可以一起玩。具体来说，您将安装运行 Minecraft 所需的软件包，配置要运行的服务器，然后部署游戏。 或者，您可以探索DigitalOcean 的 One-Click Minecraft: Java Edition Server作为另一个安装路径。 本教程使用Java 版本的 Minecraft。如果您通过 Microsoft App Store 购买了您的 Minecraft 版本，您将无法连接到此服务器。在 PlayStation 4、Xbox One 或 Nintendo Switch 等游戏机上购买的大多数 Minecraft 版本也是 Minecraft 的 Microsoft 版本。这些控制台也无法连接到本教程中构建的服务器。您可以在此处获取 Java 版本的 Minecraft 。 先决条件 为了遵循本指南，您需要： 全新安装 Ubuntu 18.04 的服务器、具有sudo特权的非 root ..
介绍 短语vanilla JavaScript通常用于包含在没有框架或库的情况下编写 JavaScript。虽然许多现代问题可以通过框架和库来解决，但了解 JavaScript 原生可用的内容以及如何以及何时可以依赖它们将帮助您成为更强大的开发人员。 考虑一个场景，您收到不同长度的文本字符串。您的目标是计算字符串中包含的英文元音（“a”、“e”、“i”、“o”和“u”）（大写和小写）出现的次数。 JavaScript包含3个元音。DigitalOcean包含6个元音。Rhythms包含 0 个元音。 在本文中，您将使用迭代循环构建一个解决方案，并使用正则表达式构建第二个解决方案。 先决条件 如果你想跟随这篇文章，你需要： 具有 Web 开发人员控制台或具有REPL实现的沙箱环境的现代 Web 浏览器。 熟悉循环、字符串和数组将大有裨益。 熟悉正则表达式可能会有所帮助，但不是必需的。 此示例使用for…of和includes()在旧版浏览器中不受支持。 使用迭代循环 在迭代方法中，您将遍历传递的字符串的每个字母，然后检查是否有任何字母与任何元音匹配。如果字母与元音的已知可能值匹配，您将增加一个计数器变量。循环完成后，您可以引用此变量，它将显示元音的数量。 花点时间思考如何分解此任务的要求和步骤。 现在，使用 Web 浏览器中的 Web 开发人员控制台或 REPL 的其他实现，让我们为这个问题构建一个解决方案。 首先，让我们定义你所知道的： const vowels = [“a”, “e”, “i”, “o”, “u”] 这段代码声明了一个常量 – vowels– 它包含五个英文元音的数组。 然后，让我们创建一个传递text值的函数： const vowels = [“a”, “e”, “i”, “o”, “u”] function countVowelsIterative(text) ..
介绍 AngularHttpClient有一个测试模块，HttpClientTestingModule可以让您对 HTTP 请求进行单元测试。 注意：由于HttpClient仅从 Angular 4.3 开始可用，因此以下内容适用于 Angular 4.3+。如果您不熟悉 Angular 中的单元测试，请参阅此介绍。 在本文中，您将学习如何使用HttpClientTestingModule. 这将有助于展示测试模块的功能。 先决条件 要完成本教程，您需要： Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。 对设置 Angular 项目有一定的了解。 本教程已通过 Node v16.2.0、npmv7.15.1 和@angular/corev12.0.4 验证。 步骤 1 — 设置项目 对于这篇文章，我们将使用从端点获取数据的服务和调用该服务以填充组件OnInit挂钩中的用户列表的组件。 您可以使用@angular/cli来创建一个新项目： ng new angular-httpclienttest-example 然后，导航到新创建的项目目录： cd angular-httpclienttest-example 创建一个data.service.ts： ng generate service data 并让它与 JSON Placeholder 通信： src/app/data.service.ts import { Injectable } from ..
介绍 结构化查询语言，通常称为SQL，在它允许您如何将数据插入表中方面提供了很大的灵活性。例如，您可以使用VALUES关键字指定单个数据行，使用SELECT查询从现有表中复制整组数据，以及以将导致 SQL 自动将数据插入其中的方式定义列。 在本指南中，我们将介绍如何使用 SQL 的INSERT INTO语法通过这些方法中的每一种将数据添加到表中。 先决条件 为了遵循本指南，您需要一台运行某种类型的使用 SQL 的关系数据库管理系统 (RDBMS) 的计算机。本指南中的说明和示例已使用以下环境进行验证： 运行 Ubuntu 20.04 的服务器，具有管理权限的非 root 用户和使用 UFW 配置的防火墙，如我们的 Ubuntu 20.04 初始服务器设置指南中所述。 在服务器上安装并保护 MySQL，如如何在 Ubuntu 20.04 上安装 MySQL 中所述。本指南已使用非 root MySQL 用户进行验证，该用户使用步骤 3中描述的过程创建。 注意：请注意，许多 RDBMS 使用自己独特的 SQL 实现。尽管本教程中概述的命令适用于大多数 RDBMS，但如果您在 MySQL 以外的系统上测试它们，则确切的语法或输出可能会有所不同。 您还需要一个可以练习插入数据的数据库和表。如果您没有这些，您可以阅读以下连接到 MySQL 和设置示例数据库部分，详细了解如何创建本指南将在整个示例中使用的数据库和表。 连接到 MySQL 并设置示例数据库 如果您的 SQL 数据库系统在远程服务器上运行，请从本地计算机通过 SSH 连接到您的服务器： ..
作者选择了COVID-19 救济基金来接受捐赠，作为Write for DOnations计划的一部分。 介绍 Python 3 有许多内置的数据结构，包括元组、字典和列表。数据结构为我们提供了一种组织和存储数据的方法。该collections模块帮助我们有效地填充和操作数据结构。 在本教程中，我们将通过三个类的collections模块，以帮助您与元组，字典和列表的工作。我们将使用namedtuples命名字段创建元组，defaultdict在字典中简明地分组信息，并deque有效地将元素添加到类似列表的对象的任一侧。 在本教程中，我们将主要处理在虚构的水族箱中添加或移除鱼类时需要修改的鱼类清单。 先决条件 为了充分利用本教程，建议您熟悉元组、字典和列表数据类型，包括它们的语法以及如何从中检索数据。您可以查看这些教程以获取必要的背景信息： 理解 Python 3 中的元组 理解 Python 3 中的字典 理解 Python 3 中的列表 将命名字段添加到元组 Python 元组是不可变或不可更改的有序元素序列。元组经常用于表示列数据；例如，来自 CSV 文件的行或来自 SQL 数据库的行。水族馆可能会以一系列元组的形式跟踪其鱼类库存。 一个单独的鱼元组： (“Sammy”, “shark”, “tank-a”) 这个元组由三个字符串元素组成。 虽然在某些方面很有用，但这个元组并没有清楚地表明它的每个字段代表什么。实际上，元素0是名称，元素1是物种，元素2是储罐。 鱼元组字段说明： 名称 物种 坦克 萨米 鲨鱼 坦克-a 这张表清楚地表明，元组的三个元素中的每一个都有明确的含义。 namedtuple从collections模块中，您可以为元组的每个元素添加显式名称，以在 Python 程序中明确这些含义。 让我们namedtuple用来生成一个类，它清楚地命名了鱼元组的每个元素： from collections import namedtuple Fish = ..