作者选择Creative Commons接受捐赠，作为Write for DOnations计划的一部分。 介绍 React是一种流行的 JavaScript 框架，用于创建前端应用程序。它最初由 Facebook 创建，通过允许开发人员使用直观的编程范式创建快速应用程序而广受欢迎，该范式将 JavaScript 与称为JSX的类似 HTML 的语法联系起来。 启动一个新的 React 项目曾经是一个复杂的多步骤过程，包括设置构建系统、将现代语法转换为所有浏览器可读的代码的代码转译器以及基本目录结构。但是现在，Create React App包含运行 React 项目所需的所有 JavaScript 包，包括代码转译、基本 linting、测试和构建系统。它还包括一个带有热重载的服务器，它会在您更改代码时刷新您的页面。最后，它将为您的目录和组件创建一个结构，以便您可以在几分钟内进入并开始编码。 换句话说，您不必担心配置像Webpack这样的构建系统。你不需要设置Babel来将你的代码转换为跨浏览器可用。您不必担心现代前端开发的大多数复杂系统。您可以通过最少的准备开始编写 React 代码。 在本教程结束时，您将拥有一个正在运行的 React 应用程序，您可以将其用作任何未来应用程序的基础。您将对 React 代码进行第一次更改、更新样式并运行构建以创建应用程序的完全缩小版本。您还将使用具有热重载功能的服务器为您提供即时反馈，并将深入探索 React 项目的各个部分。最后，您将开始编写自定义组件并创建一个可以扩展并适应您的项目的结构。 先决条件 要学习本教程，您需要具备以下条件： 您的计算机上安装了Node.js版本 10.16.0。要在 macOS 或 Ubuntu 18.04 上安装它，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境或如何在 Ubuntu 18.04 上安装 Node.js 的使用 PPA 安装部分中的步骤进行操作。 它还有助于对 ..
Category : 教程系列
HEX, RGB(a) & HSL(a) are all great, but with can also use keyword names for 140 colors. Here’s a reference for all of them, along with their HEX equivalent, in alphabetical order. Note that there’s really 147 in there, but 7 of them have duplicates (grey and gray for example). Everything is included along with ..
介绍 在使用Gatsby.js 时，我们不断地使用其内置的命令行界面(CLI)。这个必不可少的工具使我们能够执行诸如从初学者创建新项目、通过热重载启动开发服务器以及生成生产等操作建立。这是帮助您使用它的快速参考指南。 安装 如果您尚未执行 的全局安装gatsby-cli，则需要先执行此操作： npm install -g gatsby-cli 随着gatsby-cli全球的装机量，您现在可以从你的机器上的任何地方运行所有盖茨的命令。现在让我们介绍可用的命令！ 创建新项目 该new命令会创建一个新的 Gatsby 站点，安装其所有依赖项，并使用初始提交在本地初始化一个新的 git 存储库。 运行不带参数的命令将提示输入文件夹名称和可选的启动程序： gatsby new 可用参数： site directory: 可选，指定安装目录。 starter: 可选，这可以是 repo URL 或 Github 用户名/repo 字符串。如果未设置，则自动使用gatsby-starter-default。 这是一个安装到my-site文件夹中的示例，并使用gatsby-starter-blog作为启动器： gatsby new my-site gatsbyjs/gatsby-starter-blog 本地开发服务器 该develop命令通过热重载启动本地开发服务器。 gatsby develop 可用选项： -H, –host: 设置主机 URL/IP。默认为localhost. -p, –port: 设置应用端口。默认为8000. -o, –open：在您的（默认）浏览器中自动打开站点。 -S, –https: 使用HTTPS。（更多信息可以在这里找到。） 这是一个http://0.0.0.0:8888在浏览器中运行并自动打开的附加示例： ..
客户端 URL 或 cURL 是用于在系统之间传输数据的库和命令行实用程序。它支持许多协议，并且往往默认安装在许多类 Unix 操作系统上。由于它的普遍可用性，当您需要将文件下载到本地系统时，它是一个很好的选择，尤其是在服务器环境中。 在本教程中，您将使用该curl命令从 Web 服务器下载文本文件。您将查看其内容，将其保存在本地，并告诉curl在文件移动时遵循重定向。 从 Internet 下载文件可能很危险，因此请确保从信誉良好的来源下载。在本教程中，您将从 DigitalOcean 下载文件，并且不会执行您下载的任何文件。 启动互动终端！ 步骤 1 — 获取远程文件 开箱即用，没有任何命令行参数，该curl命令将获取一个文件并将其内容显示到标准输出。 让我们通过robots.txt从 Digitalocean.com下载文件来试一试： curl https://www.digitalocean.com/robots.txt 您将看到文件内容显示在屏幕上： OutputUser-agent: * Disallow: sitemap: https://www.digitalocean.com/sitemap.xml sitemap: https://www.digitalocean.com/community/main_sitemap.xml.gz sitemap: https://www.digitalocean.com/community/questions_sitemap.xml.gz sitemap: https://www.digitalocean.com/community/users_sitemap.xml.gz 给出curl一个 URL，它将获取资源并显示其内容。 保存远程文件 获取文件并显示其内容是很好的，但是如果您想将文件实际保存到系统中怎么办？ 要将远程文件保存到本地系统，使用与您下载的服务器相同的文件名，添加–remote-name参数，或使用-O选项： curl -O https://www.digitalocean.com/robots.txt 您的文件将下载： Output % Total % Received % Xferd Average Speed ..
作者选择Open Sourcing Mental Illness接受捐赠，作为Write for DOnations计划的一部分。 介绍 Vue.js是一种流行的JavaScript框架，用于创建用户界面。Vue.js 于 2014 年由 Evan You（原 Google）创建，经常被描述为React和Angular的结合，借用了React的道具驱动开发和Angular的模板能力。这使得 Vue 成为初学者容易上手的框架，特别是因为它专注于传统的HTML和CSS，而不是像 React 这样的CSS-in-JS框架，或者像 Angular 那样依赖TypeScript（JavaScript 的超集）。 开始一个新项目时，最好熟悉该技术的工具和功能。Vue.js 开发的一项重要工具是其命令行界面 (CLI)，称为Vue CLI 3。该Vue的CLI提供了许多增强的Vue公司的发展经验有用的功能，但主要的特点是它的产生和预先配置了新的能力，单页的应用程序与vue create命令。 在本教程结束时，您将拥有一个在本地Node服务器上运行的 Vue.js 应用程序。这个本地服务器通过Webpack使用热模块重新加载来提供即时反馈，并在您工作时在浏览器中呈现。在此过程中，您将创建.vue单文件组件 (SFC)，例如页眉和页脚。所有这些都可以作为未来任何 Vue 项目的坚实基础。 先决条件 要遵循本教程，您将需要以下内容： 10.6.0您的计算机上安装了Node.js版本或更高版本。要在 macOS 或 Ubuntu 18.04 上安装它，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境中的步骤或如何在 Ubuntu 18.04 上安装 Node.js 的使用 PPA部分进行安装 您还需要具备 JavaScript、HTML 和 CSS ..
介绍 在 React 中，数据通过 props（父组件到子组件）从上到下流动是很常见的，但这并不总是理想的。在某些情况下，您的数据需要可用于不同深度的许多嵌套组件，并且传递道具变得难以维护且容易出错。 在这种情况下，使用Redux来管理状态似乎是个好主意，但许多人认为它不应该是您的首选。 React Context是跨组件共享数据的替代解决方案，而无需在每个级别手动传递 props。 在本文中，您将探索 Context API 并了解如何使用它来管理用户状态。 先决条件 要阅读本文，您需要： 熟悉 React 基础知识，如嵌套组件、道具和状态将是有益的。 本教程已通过 Node v15.3.0、npmv6.14.9 和reactv17.0.1 验证。 了解问题 下面是一个Page传递 auser和avatarSizeprop的组件示例： <Page user={user} avatarSize={avatarSize} /> 它呈现一个PageLayout组件： <PageLayout user={user} avatarSize={avatarSize} /> 它呈现一个NavigationBar组件： <NavigationBar user={user} avatarSize={avatarSize} /> 渲染 aLink并且Avatar使用userandavatarSize道具： <Link href={user.permalink}> <Avatar user={user} size={avatarSize} /> </Link> 在上面的例子中，只有Avatar组件实际使用了userprop。然而，它的每个祖先组件（父、祖父等）都会接收user并传递它。这意味着如果Avatar组件将来需要另一个 prop，你必须确保它的每个祖先组件接收并传递它。 实际上，user状态将需要在许多不同的组件之间共享，因此将它作为 prop 传递将导致它比上面的示例嵌套更深。 创造 ..
该系列的一部分： 如何使用 CSS 构建网站 本教程是使用 CSS创建和自定义此网站的系列的一部分，CSS 是一种用于控制网站呈现的样式表语言。您可以按照整个系列重新创建演示网站并熟悉 CSS 或将此处描述的方法用于其他 CSS 网站项目。 在继续之前，我们建议您了解一些 HTML 知识，HTML 是用于在 Web 浏览器中显示文档的标准标记语言。如果您不熟悉 HTML，可以在开始本系列之前先阅读我们如何使用 HTML 构建网站系列的前十个教程。 介绍 在本教程中，您将使用 CSS重新创建演示网站的第二部分。如果您想个性化尺寸，请随意将 Sammy 的信息换成您自己的信息。您在此处学习的方法可以应用于其他 CSS/HTML 网站项目。 站点的第二部分包含两个内容框，一个包含文本，一个包含大头像： 先决条件 要遵循本教程，请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的上一个教程中的说明设置必要的文件和文件夹。 您需要将个人资料图片放置在右侧的内容框中。如果您没有个人资料图片，您可以使用此图片进行演示。 注意：要下载大的个人资料图片，请访问此链接并单击CTRL + Left Click（在 Mac 上）或Right Click（在 Windows 上）图像并选择“将图像另存为”并将其另存为large-profile.jpeg您的images文件夹。 在继续之前，请确保您选择的图像images以large-profile.jpeg. 为文本和图像内容框创建样式规则 要创建这两个内容框，您将首先在styles.css文件中定义一个列类，用于为此设置框样式。然后将文本和图像内容添加到 HTML 文档中。 返回styles.css文件并将以下规则集复制并粘贴到文件底部： 样式文件 . . . /* ..
本系列的一部分： 如何使用 Laravel 和 Docker Compose 在 PHP 中构建链接登陆页面 Laravel是一个开源 PHP 框架，它提供了一组工具和资源来构建现代 PHP 应用程序。在这个基于项目的教程系列中，您将使用 Laravel 框架构建一个Links Landing Page应用程序，使用由 Docker Compose 管理的容器化 PHP 开发环境。 最后，您将拥有一个使用 Laravel 构建并通过 Artisan 命令管理的单页网站，您可以在其中将相关链接分享给社交渠道和演示文稿上的受众。 如果到目前为止您一直在学习本系列，那么您的数据库表应该已经全部设置好了。但是，您仍然需要实现一种方法来让用户在links表中插入新条目。 为了限制本系列的范围，同时使应用程序功能齐全，您将设置 Artisan 命令来创建和删除数据库中的链接。Artisan 是 Laravel 附带的命令行工具，提供了许多实用程序来加速开发过程，从生成样板代码到删除和重新创建应用程序的数据库。 使用命令行界面来管理您的应用程序可以替代 Web 表单和安全区域，因为它需要用户登录到服务器才能执行此类命令，而不是通过浏览器进行身份验证。如果您稍后决定为您的应用程序创建一个安全区域，您可以创建 Web 表单以允许注册用户提交到数据库的新链接。 Artisan 命令通常用于执行应在后台运行的应用程序任务，手动或通过调度机制（如 Crontab）自动执行。它们还可用于促进需要动态配置的新应用程序功能的原型设计，具体取决于来自授权用户的输入。 首先，使用make:command帮助程序创建一个新的 Artisan 命令： docker-compose exec app php artisan make:command LinkNew OutputConsole command ..
作者选择/dev/color接受捐赠，作为Write for DOnations计划的一部分。 介绍 处理图像在构建网站中起着举足轻重的作用，但处理起来也具有挑战性。未优化的图像会降低网站的速度，而且许多在桌面上看起来很合适的图像很难缩小到移动设备上。视觉处理图像也可能很乏味且难以维护。 所有这些孤立的问题都不是什么大问题。主要问题是当您必须跟踪所有这些规则和图像缩放技术时。谈到Gatsby.js 项目，这就是Gatsby Image API派上用场的地方。通过使用GraphQL查询，您可以使用 Gatsby Image API 来处理图像压缩、使图像具有响应性，甚至处理基本的图像样式。 在本教程中，您将使用 Gatsby Image API 和 GraphQL 查询来压缩、转换和样式化图像。 先决条件 您的计算机上安装了Node.js版本 10.16.0。要在 macOS 或 Ubuntu 18.04 上安装它，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境或如何在 Ubuntu 18.04 上安装 Node.js 的使用 PPA 安装部分中的步骤进行操作。 已安装Gatsby.js和 Gatsby CLI 工具。您可以在如何设置您的第一个 Gatsby 网站教程中找到如何安装它。 熟悉使用 HTML 构建网站和使用 CSS 设置样式会有所帮助，您可以在如何使用 CSS 构建网站系列中了解更多信息。 对 JavaScript 的理解会很有用。您可以在我们的如何在 ..
介绍 Calibre 是一个免费的开源电子书管理器。 尽管 Calibre 可能以其桌面客户端而闻名，但它也可以充当强大的服务器，让您可以从世界任何地方访问您的电子书（或与朋友分享您的收藏）。将您的电子书保存在服务器上非常棒，因为您无需依赖于在您想阅读时随身携带相同的阅读设备。如果您去旅行，您无需担心随身携带您的电子书收藏！ 该服务器包括一个简单而优雅的浏览器前端，允许您从图书馆搜索和下载书籍。它还内置了一个适合移动设备的网站，可以很容易地将书籍直接下载到电子阅读器——即使是那些只有最基本的网络功能的人。 例如，Calibre 的浏览器与 Kindle Touch 配合使用，即使该设备只有电子墨水显示屏和实验性浏览器，它也可以直接下载书籍。 在本教程中，我们将了解如何在 Ubuntu 14.04 服务器上安装、设置和使用 Calibre。我们还将了解如何使用该calibredb命令直接从服务器创建、自定义和维护您的电子书数据库。 在本教程中，我们将介绍： 安装口径 创建电子书库，或导入现有的电子书库 使 Calibre 服务器成为后台服务 自动将新书添加到图书馆 在本教程结束时，您将拥有一个小的初始图书馆，您可以轻松地向其中添加新书！ 先决条件 请确保您具备以下先决条件： Ubuntu 14.04 Droplet 一个sudo 用户 本教程中的示例是针对运行全新安装的 Ubuntu 14.04 的 Droplet 显示的，但它们应该很容易适应其他操作系统。 第 1 步 – 安装 Calibre Calibre 可从 APT 软件存储库中获得，但正如其创建者所建议的那样，从其网站上提供的二进制文件安装要好得多。Calibre 更新非常频繁，repos 中的版本往往滞后。 幸运的是，Calibre 的创造者让这一切变得非常简单。只需在您的服务器上运行以下 Python 命令。在运行命令之前，请仔细检查官方 Calibre ..