介绍 TypeScript是 JavaScript 的类型化超集，可编译为纯 JavaScript。让我们分解一下这到底意味着什么： typed – 您可以定义变量、参数和返回数据类型。 superset -TypeScript 在 JavaScript 之上添加了一些附加功能。所有有效的 JavaScript 都是有效的 TypeScript，但反之则不然。 编译为纯 JavaScript – TypeScript 无法由浏览器运行。因此，可用工具负责将您的 TypeScript 编译为 JavaScript，以便浏览器能够理解。 在本教程中，您将在 Visual Studio Code 中使用 TypeScript，探索将它们结合使用的好处。 先决条件 对于这个项目，你需要： 对 JavaScript 的有效理解。您可以查看如何在 JavaScript 中编码系列以获取更多信息。 Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。 已下载并安装Visual Studio Code (VS Code)。 第 1 步 – 安装和编译 TypeScript 使用 TypeScript 的第一步是在您的计算机上全局安装包。typescript通过在终端中运行以下命令来全局安装包： ..
Category : 教程系列
介绍 在本教程中，您将一个容器化的 Django 轮询应用程序部署到 Kubernetes 集群中。 Django是一个强大的 Web 框架，可以帮助您快速启动 Python 应用程序。它包括几个方便的功能，例如对象关系映射器、用户身份验证和应用程序的可自定义管理界面。它还包括一个缓存框架，并通过其URL 调度程序和模板系统鼓励干净的应用程序设计。 在How to Build a Django and Gunicorn Application with Docker 中，Django Tutorial Polls 应用程序根据用于构建可扩展的云原生 Web 应用程序的十二因素方法进行了修改。这个容器化设置通过 Nginx 反向代理和 Let’s Encrypt-signed TLS 证书进行了扩展和保护，如何使用 Docker、Nginx 和 Let’s Encrypt扩展和保护Django 应用程序。在使用 Django 从容器到 Kubernetes系列的最后一个教程中，现代化的 Django 轮询应用程序将部署到 Kubernetes 集群中。 Kubernetes是一个强大的开源容器编排器，可自动部署、扩展和管理容器化应用程序。像 ConfigMaps 和 Secrets 这样的 Kubernetes 对象允许您将配置与容器集中和分离，而像 Deployments 这样的控制器会自动重启失败的容器并实现容器副本的快速扩展。TLS ..
使用 ES2015 (ES6)，获得对 JavaScript 模块的内置支持。与 CommonJS 一样，每个文件都是它自己的模块。要使外部世界可以使用对象、函数、类或变量，只需导出它们，然后将它们导入到其他文件中需要的位置即可。Angular 2 大量使用 ES6 模块，因此使用 Angular 的人会非常熟悉其语法。语法非常简单： 出口 可以一一导出成员。未导出的内容将无法直接在模块外部使用： export const myNumbers = [1, 2, 3, 4]; const animals = [‘Panda’, ‘Bear’, ‘Eagle’]; // Not available directly outside the module export function myLogger() { console.log(myNumbers, animals); } export class Alligator { constructor() { // … } } 或者您可以在模块末尾的单个语句中导出所需的成员： export ..
HTML 标签是一种标记语言，用于指示HTML 文档中HTML 元素的开始和结束。 作为 HTML 元素的一部分，HTML 标签可帮助 Web 浏览器将 HTML 文档转换为网页。例如，<p>标签用于将文本内容组织成段落元素，<img>标签用于嵌入图像元素。 许多标签（尽管不是全部）使用开始标签和结束标签来环绕它们用于修改的内容。结束标签用这样的反斜杠表示：</tag_name>。HTML 标签在浏览器中不可见。 下图说明了标签在 HTML 元素中的常用用法： 有关 HTML 元素的更多教育资源，请访问： 如何查看 HTML 文档的源代码 如何使用和理解 HTML 元素 如何使用 HTML 教程系列构建网站 如何使用 HTML 构建网站：DigitalOcean Workshop Kit 如何使用 HTML 电子书建立网站 我们的HTML页面上提供了与 HTML 相关的教育资源的完�..
*“Property Initializer Syntax”* 听起来比实际更花哨。在这个简短的教程中，了解这种编写事件处理程序的替代方法将如何帮助消除您的样板文件，constructor并防止渲染中的琐碎内存使用。 在 Facebook 文档中，你会看到事件处理是这样完成的： // option 1 class Thing extends React.Component { constructor() { this.handleSmthng = this.handleSmthng.bind(this) } render() { <input onChange={this.handleSmthng}/> } handleSmthng(e) { // … } } ES6 类不会自动赋予this作用域handleSmthng，并且由于您通常想要调用this.setState或可能调用组件中的另一个方法，“官方”约定是始终在构造函数中绑定所有事件处理程序。这有效，但很快就会感觉像样板代码。 // option 2 class Thing extends React.Component { render() { <button onClick={() => this.handleSmthng(‘foo’)}> ADD </button> } handleSmthng(arg1) { // … ..
字体变体是一组新的特性，定义为 OpenType 规范的一部分。它允许字体文件在单个文件中包含多种字体变体，称为可变字体。这反过来又允许在网络上使用一个可以实现多种字体样式的字体文件。 除了显着节省需要通过线路发送以在页面上显示文本的数据轮流之外，可变字体还支持动画或转换字体样式和自定义字体样式等功能，而静态字体则无法实现这两种功能字体。 让我们回顾一些使用可变字体的示例，然后分解如何在今天的网络上使用它们。 可变字体示例 请注意，您需要使用支持的浏览器才能正确查看以下示例。 源无变量 Source Sans 是一种流行的免费字体，现在带有可变版本。将鼠标悬停在文本上以查看如何font-weight转换for 的值： 这是使用一些非常简单的 CSS 规则实现的： @font-face { font-family: ‘Source Sans’; src: url(‘/assets/fonts/variable/SourceSansVariable-Roman.ttf’) format(“truetype-variations”); font-weight: 1 999; } .source-sans, .source-sans2, .source-sans3 { font-family: ‘Source Sans’; transition: font-weight .45s ease-out; } .source-sans:hover, .source-sans2:hover { font-weight: 999; } .source-sans3:hover { font-weight: 200; } 自定义字体样式 以下是一些使用相同字体Decovar 的示例，这是一种定义自定义轴并允许使用独特风格化文本的可变字体： 这是用于此的 CSS ..
数据包是通过 TCP/IP 网络传输的数据的基本单位。最初被认为是一种无需预先建立连接即可传输数据的方式，数据包使动态数据传输成为可能。 数据包数据分为两类：控制信息（源和目的网络地址、序列信息和错误检测代码）和用户数据（消息本身的内容）。 要了解有关数据包的更多信息，请查看我们的文章“网络术语、接口和协议�..
介绍 在验证前端输入字段的内容时，现在的事情比以前容易多了。我们可以使用:required、:optional、:valid和:invalid伪类与 HTML5 表单验证属性（如required或pattern）相结合，以创建非常具有视觉吸引力的结果。这些伪类适用于input、textarea和select元素。 输入伪类 这是工作中的伪类的示例。让我们从这个 HTML 标记开始： <form action=”#”> <input type=”text” placeholder=”First Name” required> <input type=”email” placeholder=”Email” required> <input type=”text” placeholder=”Nickname”> <input type=”text” placeholder=”Favorite pizza topping”> </form> 让我们应用以下样式： input { border: 2px solid; border-radius: 4px; font-size: 1rem; margin: 0.25rem; min-width: 125px; padding: 0.5rem; transition: background-color 0.5s ease-out; } input:optional { border-color: gray; } input:required ..
介绍 构建 Web 应用程序通常涉及为用户交互做准备。为用户交互做准备的重要方式之一是通过表单。不同的表单组件用于从用户那里获取不同类型的输入。例如，密码组件从用户那里获取敏感信息并将其屏蔽，使其不可见。 大多数时候，您需要从用户那里获取的信息是类似布尔值的——例如，是或否、真或假、启用或禁用、开或关等。传统上，复选框表单组件用于获取这些类型的输入。然而，在现代界面设计中，拨动开关通常用作复选框替代品，尽管存在一些可访问性问题。 在本教程中，您将看到如何使用 React 构建自定义切换开关组件。在本教程结束时，您将拥有一个演示 React 应用程序，该应用程序使用您的自定义切换开关组件。 这是您将在本教程中构建的最终应用程序的演示： 先决条件 在开始之前，您需要以下内容： 您的机器上安装了Node.js和 npm 5.2 或更高版本。要安装 Node 并检查您的 npm 版本，请参阅如何安装 Node.js 并为您的环境创建本地开发环境指南。使用 npm 5.2 或更高版本将允许您利用该npx命令。npx将允许您在create-react-app不全局下载包的情况下运行。 本教程假设您已经熟悉 React。如果没有，您可以查看如何在 React.js教程系列中编码或阅读React 文档以了解有关 React 的更多信息。 第 1 步 – 入门 首先，使用npx和创建一个新的 React 应用程序create-react-app。您可以随意命名应用程序，但本教程将使用react-toggle-switch： npx create-react-app react-toggle-switch 接下来，您将安装应用程序所需的依赖项。使用终端窗口导航到项目目录： cd react-toggle-switch 运行以下命令安装所需的依赖项： npm install [email protected] [email protected] [email protected] [email protected] [email protected] 注意：node-sass通过参考最低支持的快速指南，确保您安装的版本与您的环境兼容。 ..
介绍 TLS或“传输层安全”——及其前身SSL——是用于将正常流量包装在受保护的加密包装器中的协议。使用这项技术，服务器可以安全地向其客户端发送信息，而不会被外界拦截或读取其消息。 在本指南中，我们将向您展示如何在 Ubuntu 20.04 上通过 Apache Web 服务器创建和使用自签名 SSL 证书。 注意：自签名证书将加密您的服务器和任何客户端之间的通信。但是，由于它不是由 Web 浏览器和操作系统中包含的任何受信任的证书颁发机构签署的，因此用户无法使用该证书来自动验证您的服务器的身份。因此，您的用户在访问您的网站时会看到安全错误。 由于此限制，自签名证书不适用于为公众服务的生产环境。它们通常用于测试或保护单个用户或一小群用户使用的非关键服务，这些用户可以通过备用通信渠道建立对证书有效性的信任。 如需更适合生产的证书解决方案，请查看Let’s Encrypt，一个免费的证书颁发机构。您可以在我们的如何在 Ubuntu 20.04 上使用 Let’s Encrypt 保护 Apache教程中了解如何下载和配置 Let’s Encrypt 证书。 先决条件 在开始本教程之前，您需要以下内容： 使用非root 用户、启用 sudo 的用户访问 Ubuntu 20.04 服务器。我们的Ubuntu 20.04 初始服务器设置指南可以向您展示如何创建此帐户。 您还需要安装 Apache。您可以使用apt. 首先，更新本地包索引以反映最新的上游更改： sudo apt update 然后，安装apache2软件包： sudo apt install apache2 最后，如果您ufw设置了防火墙，请打开http和https端口： sudo ufw allow “Apache Full” ..