Developer

SVG 图像入门教程

一、概述 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。 SVG 文件可以直接插入网页,成为 DOM 的一部分,然后用 JavaScript 和 CSS 进行操作。 上面是 SVG 代码直接插入网页的例子。 SVG 代码也可以写在一个独立文件中,然后用、、、等标签插入网页。 CSS 也可以使用 SVG 文件。 .logo { background: url(icon.svg); } SVG 文件还可以转为 BASE64 编码,然后作为 Data URI 写入网页。 二、语法 2.1 标签 SVG 代码都放在顶层标签之中。下面是一个例子。 的width属性和height属性,指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。除了相对单位,也可以采用绝对单位(单位:像素)。如果不指定这两个属性,SVG 图像默认大小是300像素(宽) x 150像素(高)。 Read more…

By RSSBot, ago
Developer

CSS 的空格处理

一、空格规则 HTML 代码的空格通常会被浏览器忽略。 ◡◡hello◡◡world◡◡ 上面是一行 HTML 代码,文字的前部、内部和后部各有两个空格。为了便于识别,这里使用半圆形符号◡表示空格。 浏览器的输出结果如下。 hello world 可以看到,文字的前部和后部的空格都会忽略,内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。 如果希望空格原样输出,可以使用 标签。 ◡◡hello◡◡world◡◡ 另一种方法是,改用 HTML 实体 表示空格。   hello  world   二、空格字符 HTML 处理空格的规则,适用于多种字符。除了普通的空格键,还包括制表符(t)和换行符(r和n)。 浏览器会自动把这些符号转成普通的空格键。 hello world 上面代码中,文本内部包含了一个换行符,浏览器视同为空格,输出结果如下。 hello world 所以,文本内部的换行是无效的(除非文本放在 标签内)。 helloworld 上面代码使用标签显式表示换行。 三、CSS 的 white-space 属性 HTML 语言的空格处理,基本上就是直接过滤。这样的处理过于粗糙,完全忽视了原始文本内部的空格可能是有意义的。 CSS 提供了一个white-space属性,可以提供更精确一点的空格处理方式。该属性共有六个值,除了一个通用的inherit(继承父元素),下面依次介绍剩下的五个值。 3.1 white-space: normal white-space属性的默认值为normal,表示浏览器以正常方式处理空格。 ◡◡hellohellohello◡hello world 上面代码中,文本前部有两个空格,内部有一个长单词和一个换行符。 然后,容器 指定一个比较小的宽度。为了便于识别,背景色设为红色。 p { Read more…

By RSSBot, ago
Developer

JSON Web Token 入门教程

JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案,本文介绍它的原理和用法。 一、跨域认证的问题 互联网服务离不开用户认证。一般流程是下面这样。 1、用户向服务器发送用户名和密码。 2、服务器验证通过后,在当前对话(session)里面保存相关数据,比如用户角色、登录时间等等。 3、服务器向用户返回一个 session_id,写入用户的 Cookie。 4、用户随后的每一次请求,都会通过 Cookie,将 session_id 传回服务器。 5、服务器收到 session_id,找到前期保存的数据,由此得知用户的身份。 这种模式的问题在于,扩展性(scaling)不好。单机当然没有问题,如果是服务器集群,或者是跨域的服务导向架构,就要求 session 数据共享,每台服务器都能够读取 session。 举例来说,A 网站和 B 网站是同一家公司的关联服务。现在要求,用户只要在其中一个网站登录,再访问另一个网站就会自动登录,请问怎么实现? 一种解决方案是 session 数据持久化,写入数据库或别的持久层。各种服务收到请求后,都向持久层请求数据。这种方案的优点是架构清晰,缺点是工程量比较大。另外,持久层万一挂了,就会单点失败。 另一种方案是服务器索性不保存 session 数据了,所有数据都保存在客户端,每次请求都发回服务器。JWT 就是这种方案的一个代表。 二、JWT 的原理 JWT 的原理是,服务器认证以后,生成一个 JSON 对象,发回给用户,就像下面这样。 { "姓名": "张三", "角色": "管理员", "到期时间": "2018年7月1日0点0分" } 以后,用户与服务端通信的时候,都要发回这个 JSON 对象。服务器完全只靠这个对象认定用户身份。为了防止用户篡改数据,服务器在生成这个对象的时候,会加上签名(详见后文)。 服务器就不保存任何 Read more…

By RSSBot, ago
Developer

DDOS 攻击的防范教程

一个多月前,我的个人网站遭受 DDOS 攻击,下线了50多个小时。这篇文章就来谈谈,如何应对这种攻击。 需要说明的是,我对 DDOS 并不精通,从没想过自己会成为攻击目标。攻击发生以后,很多素昧平生的朋友提供了各种帮助和建议,让我学到了很多东西。这里记录的就是对我最有帮助的一些解决方案。 一、DDOS 是什么? 首先,我来解释一下,DDOS 是什么。 举例来说,我开了一家餐厅,正常情况下,最多可以容纳30个人同时进餐。你直接走进餐厅,找一张桌子坐下点餐,马上就可以吃到东西。 很不幸,我得罪了一个流氓。他派出300个人同时涌进餐厅。这些人看上去跟正常的顾客一样,每个都说”赶快上餐”。但是,餐厅的容量只有30个人,根本不可能同时满足这么多的点餐需求,加上他们把门口都堵死了,里三层外三层,正常用餐的客人根本进不来,实际上就把餐厅瘫痪了。 这就是 DDOS 攻击,它在短时间内发起大量请求,耗尽服务器的资源,无法响应正常的访问,造成网站实质下线。 DDOS 里面的 DOS 是 denial of service(停止服务)的缩写,表示这种攻击的目的,就是使得服务中断。最前面的那个 D 是 distributed (分布式),表示攻击不是来自一个地方,而是来自四面八方,因此更难防。你关了前门,他从后门进来;你关了后门,他从窗口跳起来。 二、DDOS 的种类 DDOS 不是一种攻击,而是一大类攻击的总称。它有几十种类型,新的攻击方法还在不断发明出来。网站运行的各个环节,都可以是攻击目标。只要把一个环节攻破,使得整个流程跑不起来,就达到了瘫痪服务的目的。 其中,比较常见的一种攻击是 cc 攻击。它就是简单粗暴地送来大量正常的请求,超出服务器的最大承受量,导致宕机。我遭遇的就是 cc 攻击,最多的时候全世界大概20多个 IP 地址轮流发出请求,每个地址的请求量在每秒200次~300次。我看访问日志的时候,就觉得那些请求像洪水一样涌来,一眨眼就是一大堆,几分钟的时间,日志文件的体积就大了100MB。说实话,这只能算小攻击,但是我的个人网站没有任何防护,服务器还是跟其他人共享的,这种流量一来立刻就下线了。 本文以下的内容都是针对 cc 攻击。 三、备份网站 防范 DDOS 的第一步,就是你要有一个备份网站,或者最低限度有一个临时主页。生产服务器万一下线了,可以立刻切换到备份网站,不至于毫无办法。 备份网站不一定是全功能的,如果能做到全静态浏览,就能满足需求。最低限度应该可以显示公告,告诉用户,网站出了问题,正在全力抢修。我的个人网站下线的时候,我就做了一个临时主页,很简单的几行 HTML 代码。 这种临时主页建议放到 Github Pages Read more…

By RSSBot, ago
Developer

Systemd 定时器教程

Systemd 作为 Linux 的系统启动器,功能强大。 本文通过一个简单例子,介绍 Systemd 如何设置定时任务。这不仅实用,而且可以作为 Systemd 的上手教程。 一、定时任务 所谓定时任务,就是未来的某个或多个时点,预定要执行的任务,比如每五分钟收一次邮件、每天半夜两点分析一下日志等等。 Linux 系统通常都使用 cron 设置定时任务,但是 Systemd 也有这个功能,而且优点显著。 自动生成日志,配合 Systemd 的日志工具,很方便除错 可以设置内存和 CPU 的使用额度,比如最多使用50%的 CPU 任务可以拆分,依赖其他 Systemd 单元,完成非常复杂的任务 下面,我就来演示一个 Systemd 定时任务:每小时发送一封电子邮件。 二、邮件脚本 先写一个发邮件的脚本mail.sh。 #!/usr/bin/env bash echo "This is the body" | /usr/bin/mail -s "Subject" someone@example.com 上面代码的someone@example.com,请替换成你的邮箱地址。 然后,执行这个脚本。 $ bash mail.sh 执行后,你应该就会收到一封邮件,标题为Subject。 Read more…

By RSSBot, ago
Developer

HTTP/2 服务器推送(Server Push)教程

HTTP/2 协议的主要目的是提高网页性能。 头信息(header)原来是直接传输文本,现在是压缩后传输。原来是同一个 TCP 连接里面,上一个回应(response)发送完了,服务器才能发送下一个,现在可以多个回应一起发送。 服务器推送(server push)是 HTTP/2 协议里面,唯一一个需要开发者自己配置的功能。其他功能都是服务器和浏览器自动实现,不需要开发者关心。 本文详细介绍服务器推送的原理和配置方法。 一、传统的网页请求方式 下面是一个非常简单的 HTML 网页文件index.html。 hello world 这个网页包含一张样式表style.css和一个图片文件https://0x1024.com/wp-content/uploads/2018/03/example.png。为了渲染这个网页,浏览器会发出三个请求。第一个请求是index.html。 GET /index.html HTTP/1.1 服务器收到这个请求,就把index.html发送给浏览器。浏览器发现里面包含了样式表和图片,于是再发出两个请求。 GET /style.css HTTP/1.1 GET /https://0x1024.com/wp-content/uploads/2018/03/example.png HTTP/1.1 这就是传统的网页请求方式。它有两个问题,一是至少需要两轮 HTTP 通信,二是收到样式文件之前,网页都会显示一片空白,这个阶段一旦超过2秒,用户体验就会非常不好。 二、传统方式的改进 一种解决办法就是把外部资源合并在网页文件里面,减少 HTTP 请求。比如,把样式表的内容写在 标签之中,把图片改成 Base64 编码的 Data URL。 另一种方法就是资源的预加载(preload)。网页预先告诉浏览器,立即下载某些资源。比如,上例可以写成下面这样。 对于上例来说,preload命令并没有什么帮助。但是,如果前一个网页就使用这个命令,预加载后一个网页需要的资源,那么用户打开后一个网页时,就会感觉速度飞快。 这两种方法都有缺点。第一种方法虽然减少了 HTTP 请求,但是把不同类型的代码合并在一个文件里,违反了分工原则。第二种方法只是提前了下载时间,并没有减少 HTTP 请求。 三、服务器推送的概念 服务器推送(server push)指的是,还没有收到浏览器的请求,服务器就把各种资源推送给浏览器。 比如,浏览器只请求了index.html,但是服务器把index.html、style.css、https://0x1024.com/wp-content/uploads/2018/03/example.png全部发送给浏览器。这样的话,只需要一轮 Read more…

By RSSBot, ago
Developer

Nginx 容器教程

春节前,我看到 Nginx 加入了 HTTP/2 的 server push 功能,就很想试一下。 正好这些天,我在学习 Docker,就想到可以用 Nginx 容器。万一哪里改乱了,直接删掉,再重启一个容器就可以了。 下面就是我搭建 Nginx 容器的过程,以及如何加入 SSL 证书。你会看到 Docker 用来测试软件的新功能,真的很方便,很值得学习。如果你还不会 Docker,可以先看《Docker 入门教程》,非常简单,半小时以内就能学会。 一、HTTP 服务 Nginx 的最大作用,就是搭建一个 Web Server。有了容器,只要一行命令,服务器就架设好了,完全不用配置。 $ docker container run -d -p 127.0.0.2:8080:80 --rm --name mynginx nginx 上面命令下载并运行官方的 Nginx image,默认是最新版本(latest),当前是 1.13.9。如果本机安装过以前的版本,请删掉重新安装,因为只有 1.13.9 才开始支持 server push。 上面命令的各个参数含义如下。 -d:在后台运行 -p :容器的80端口映射到127.0.0.2:8080 Read more…

By RSSBot, ago
Developer

Docker 微服务教程

Docker 是一个容器工具,提供虚拟环境。很多人认为,它改变了我们对软件的认识。 站在 Docker 的角度,软件就是容器的组合:业务逻辑容器、数据库容器、储存容器、队列容器……Docker 使得软件可以拆分成若干个标准化容器,然后像搭积木一样组合起来。 这正是微服务(microservices)的思想:软件把任务外包出去,让各种外部服务完成这些任务,软件本身只是底层服务的调度中心和组装层。 微服务很适合用 Docker 容器实现,每个容器承载一个服务。一台计算机同时运行多个容器,从而就能很轻松地模拟出复杂的微服务架构。 上一篇教程介绍了 Docker 的概念和基本用法,本文接着往下介绍,如何在一台计算机上实现多个服务,让它们互相配合,组合出一个应用程序。 我选择的示例软件是 WordPress。它是一个常用软件,全世界用户据说超过几千万。同时它又非常简单,只要两个容器就够了(业务容器 + 数据库容器),很适合教学。而且,这种”业务 + 数据库”的容器架构,具有通用性,许多应用程序都可以复用。 为了加深读者理解,本文采用三种方法,演示如何架设 WordPress 网站。 方法 A:自建 WordPress 容器 方法 B:采用官方的 WordPress 容器 方法 C:采用 Docker Compose 工具 一、预备工作:image 仓库的镜像网址 本教程需要从仓库下载 image 文件,但是国内访问 Docker 的官方仓库很慢,还经常断线,所以要把仓库网址改成国内的镜像站。这里推荐使用官方镜像 registry.docker-cn.com。 打开/etc/default/docker文件(需要sudo权限),在文件的底部加上一行。 DOCKER_OPTS="--registry-mirror=https://registry.docker-cn.com" 然后,重启 Docker 服务。 $ sudo Read more…

By RSSBot, ago
Developer

Docker 入门教程

2013年发布至今, Docker 一直广受瞩目,被认为可能会改变软件行业。 但是,许多人并不清楚 Docker 到底是什么,要解决什么问题,好处又在哪里?本文就来详细解释,帮助大家理解它,还带有简单易懂的实例,教你如何将它用于日常开发。 一、环境配置的难题 软件开发最大的麻烦事之一,就是环境配置。用户计算机的环境都不相同,你怎么知道自家的软件,能在那些机器跑起来? 用户必须保证两件事:操作系统的设置,各种库和组件的安装。只有它们都正确,软件才能运行。举例来说,安装一个 Python 应用,计算机必须有 Python 引擎,还必须有各种依赖,可能还要配置环境变量。 如果某些老旧的模块与当前环境不兼容,那就麻烦了。开发者常常会说:”它在我的机器可以跑了”(It works on my machine),言下之意就是,其他机器很可能跑不了。 环境配置如此麻烦,换一台机器,就要重来一次,旷日费时。很多人想到,能不能从根本上解决问题,软件可以带环境安装?也就是说,安装的时候,把原始环境一模一样地复制过来。 二、虚拟机 虚拟机(virtual machine)就是带环境安装的一种解决方案。它可以在一种操作系统里面运行另一种操作系统,比如在 Windows 系统里面运行 Linux 系统。应用程序对此毫无感知,因为虚拟机看上去跟真实系统一模一样,而对于底层系统来说,虚拟机就是一个普通文件,不需要了就删掉,对其他部分毫无影响。 虽然用户可以通过虚拟机还原软件的原始环境。但是,这个方案有几个缺点。 (1)资源占用多 虚拟机会独占一部分内存和硬盘空间。它运行的时候,其他程序就不能使用这些资源了。哪怕虚拟机里面的应用程序,真正使用的内存只有 1MB,虚拟机依然需要几百 MB 的内存才能运行。 (2)冗余步骤多 虚拟机是完整的操作系统,一些系统级别的操作步骤,往往无法跳过,比如用户登录。 (3)启动慢 启动操作系统需要多久,启动虚拟机就需要多久。可能要等几分钟,应用程序才能真正运行。 三、Linux 容器 由于虚拟机存在这些缺点,Linux 发展出了另一种虚拟化技术:Linux 容器(Linux Containers,缩写为 LXC)。 Linux 容器不是模拟一个完整的操作系统,而是对进程进行隔离。或者说,在正常进程的外面套了一个保护层。对于容器里面的进程来说,它接触到的各种资源都是虚拟的,从而实现与底层系统的隔离。 由于容器是进程级别的,相比虚拟机有很多优势。 (1)启动快 容器里面的应用,直接就是底层系统的一个进程,而不是虚拟机内部的进程。所以,启动容器相当于启动本机的一个进程,而不是启动一个操作系统,速度就快很多。 (2)资源占用少 容器只占用需要的资源,不占用那些没有用到的资源;虚拟机由于是完整的操作系统,不可避免要占用所有资源。另外,多个容器可以共享资源,虚拟机都是独享资源。 Read more…

By RSSBot, ago
Developer

持续集成服务 Travis CI 教程

编写代码只是软件开发的一小部分,更多的时间往往花在构建(build)和测试(test)。 为了提高软件开发的效率,构建和测试的自动化工具层出不穷。Travis CI 就是这类工具之中,市场份额最大的一个。 本文介绍 Travis CI 的基本用法。用好这个工具不仅可以提高效率,还能使开发流程更可靠和专业化,从而提高软件的价值。而且,它对于开源项目是免费的,不花一分钱,就能帮你做掉很多事情。 一、什么是持续集成? Travis CI 提供的是持续集成服务(Continuous Integration,简称 CI)。它绑定 Github 上面的项目,只要有新的代码,就会自动抓取。然后,提供一个运行环境,执行测试,完成构建,还能部署到服务器。 持续集成指的是只要代码有变更,就自动运行构建和测试,反馈运行结果。确保符合预期以后,再将新代码”集成”到主干。 持续集成的好处在于,每次代码的小幅变更,就能看到运行结果,从而不断累积小的变更,而不是在开发周期结束时,一下子合并一大块代码。 二、使用准备 Travis CI 只支持 Github,不支持其他代码托管服务。这意味着,你必须满足以下条件,才能使用 Travis CI。 拥有 GitHub 帐号 该帐号下面有一个项目 该项目里面有可运行的代码 该项目还包含构建或测试脚本 如果这些条件都没问题,就可以开始使用 Travis CI 了。 首先,访问官方网站 travis-ci.org,点击右上角的个人头像,使用 Github 账户登入 Travis CI。 Travis 会列出 Github 上面你的所有仓库,以及你所属于的组织。此时,选择你需要 Travis 帮你构建的仓库,打开仓库旁边的开关。一旦激活了一个仓库,Travis 会监听这个仓库的所有变化。 三、.travis.yml Travis Read more…

By RSSBot, ago