Canvas 绘制 2D 图形
Canvas 是可以通过 JavaScript 脚本来绘制图形的 HTML 元素。我们可以使用 Canvas 绘制各种图形，包括线条、矩形、圆形、文本等。下面是一个简单的 Canvas 绘制图形的教程，包括基本的绘制操作和一些常见的用例。
Canvas 最早由 Apple 引入 WebKit，用于 Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。
在我们开始画图之前，我们需要了解一下画布栅格 canvas grid 以及坐标空间。我们假设一个宽度为 width，高度为 height 的 canvas 标签元素。canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素（坐标为（x,y））
创建元素1<canvas id="emooa-canvas" width="400" h ...
如何快速实现一个拥有炫酷动画的 Switch 组件
不记得从哪儿看到这张动图了，这个 Switch 开关有两个主题，明亮，黑暗。当我们点击组件时候，会在太阳+白云和月亮+星星的不断切换来呈现，并且伴随着炫酷的动画。不得不说这个看起来十分的炫酷，但是通过 CSS 实现起来也是真的费劲，比较耗头发。【在线预览】
组件定义我们可以定义一个 button 按钮，添加 aria-checked=true、aria-checked=false 来代表当前是开、关的状态。
通过给 button 设置圆角 border-radius 和光晕 box-shadow 可以很好的实现外框样式。注意注意的是，按钮实际是一个内凹的细节，所以我们在配置光晕的时候应该设置为 inset。
123456789101112131415button { margin-top: 100px; margin-left: 50%; width: 390px; height: 146px; transform: translateX(-50%); box-shadow: 0 10px 8px 0 rgba(51, 83, 113, 0.26) inse ...
通过 Github Action 自动化部署网站到远程服务器
通过上篇【通过域名+服务器搭建一个最基础的网站】 我们知道了如何通过搭建自己的博客，接下来稍微介绍下如何通过工作流做自动化部署。
开始上篇中，已配置好 Nginx，并且当我们访问 https://blog.emooa.com 时，可以正确的访问到网站资源。
123456789101112131415161718192021server { listen 443 ssl; server_name blog.emooa.com; // 替换成实际的域名地址 ssl_certificate cert/blog.emooa.com.pem; // 替换成实际的 pem ssl_certificate_key cert/blog.emooa.com.key; // 替换成实际的 key ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SH ...
通过域名和服务器搭建一个最基础的网站
前期准备域名购买我目前主要是在这两个域名注册商购买域名。
国内域名需要实名购买，国外域名不需要。
用国内域名搭建网站，如果服务器在国内，需要备案，在国外或香港等地不需要备案。
用国外域名不需要备案。
国内域名
万网（阿里云）
官网地址：https://wanwang.aliyun.com商家介绍：万网依托于阿里云旗下，以前只要说起域名基本就是万网，相当靠谱。
国外域名
Dynadot
官网地址：https://www.dynadot.com商家介绍：国外域名注册商首选，有中文网站，支持支付宝付款，客服响应及时，免费隐私保护。
服务器购买
白嫖服务器
阿里云服务器
学生认证
9.9 元
亚马逊香港服务器
1 核 1GB 内存
免费 12 个月
注册需要绑定银行卡
racknerd
挺贵的，我买了。。
现在开始nginx
我安装的是ubuntu，打开命令行窗口，登录到服务器，比如当前为 root 用户，如果是其他用户记得加上 `sudo``
1ssh root@*.*.*.* // 根据提示输入密码，建议注册新用户
安装ngi ...
WebGL 学习
常用方法
getWebGLContext // 获取 WebGL 绘图上下文
12const canvas = document.getElementById('webgl');const gl = getWebGLContext(canvas);
clearColor // 指定清空 canvas 颜色
1gl.clearColor(0,0,0,1)
clear // 清空
gl.COLOR_BUFFER_BIT // 颜色缓存区
gl.DEPTH_BUFFER_BIT // 深度缓冲区
gl.STENCIL_BUTTFER_BIG // 模版缓存区
1gl.clear(gl.COLOR_BUFFER_BIT) // 清空颜色缓存区，不是绘图区的canvas，clear 继承自OpenGL，基于基本缓存区模型。
initShaders // 初始化着色器
VSHEADER_SOURCE // 顶点着色器程序
FSHEADER_SOURCE // 片元着色器程序，可以理解成像素
1initShaders ...
Mac 如何正确安装 Git
在 Mac 上安装 Git 可以通过以下几种方式：
通过 Xcode Command Line Tools 安装幸运的是，Mac 自带 Xcode Command Line Tools，其中包含 Git。打开终端 Terminal, 首次运行 git 命令即可。
12git --version
如果没有安装过命令行开发者工具，将会提示你安装，点击确认即可。
使用 Homebrew 安装如果您已经安装了 Homebrew，可以直接在终端中运行以下命令来安装 Git：
1brew install git
如果您还没有安装 Homebrew，请参考 Mac 安装 Homebrew 的正确姿势
从官方网站下载安装包您可以从 Git 官方网站下载安装包并按照安装向导进行安装。下载地址：https://git-scm.com/downloads
安装完成后，您可以在终端中运行 git --version，来验证 Git 是否成功安装。
Mac 安装 Homebrew 的正确姿势
Homebrew 是 mac 的包管理器，仅需执行相应的命令,就能下载安装需要的软件包，可以省掉自己去下载、解压、拖拽(安装)等繁琐的步骤。 比如安装服务器 nginx，打开终端执行以下命令即可安装。
那么，要在 Mac 上安装 Homebrew，您可以按照以下步骤进行操作：
在终端中，复制粘贴以下命令并按下回车键：
12/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
这个命令会下载并运行一个安装脚本，根据提示进行安装。
安装完成后，可以运行以下命令来验证 Homebrew 是否成功安装：
1brew --version
如果成功安装，会显示 Homebrew 的版本号。
现在，您已经成功在 Mac 上安装了 Homebrew。您可以使用 Homebrew 来安装各种软件包，例如 Git、Python 等。例如，要安装 Git，可 ...
Ubuntu 安装 Nginx
要在 Ubuntu 上安装 Nginx，你可以按照以下步骤进行操作：
更新包信息：打开终端窗口，并在其中运行以下命令来确保包信息是最新的：
1sudo apt update
安装 Nginx：在终端中运行以下命令来安装 Nginx：
1sudo apt install nginx
安装过程中，系统会要求你确认是否要安装 Nginx。输入Y来继续安装。
启动 Nginx：安装完成后，Nginx 会自动启动。如果没有自动启动，你可以使用以下命令手动启动 Nginx：
1sudo systemctl start nginx
设置 Nginx 自动启动（可选）：如果你想要 Nginx 在系统启动时自动启动，可以使用以下命令启用自动启动：
1sudo systemctl enable nginx
检查 Nginx 状态：确保 Nginx 正在运行，可以使用以下命令：
1sudo systemctl status nginx
如果 Nginx 正在运行，你将会看到相关信息。
配置防火墙（可选）：如果你的系统启用了防火墙（如 UFW），你可能需要允许 HTTP（端口 80）流量，以便外 ...
通过 code 命令快速打开 VS Code
Windows 操作系统默认支持使用 code 命令在命令行中打开 VS Code，然在 MacOS 系统上，我们需要手动安装 code 命令，来支持该操作。
前提默认已安装 VS Code，未安装可前往 【Visual Studio Code】 下载安装。
安装 Code
打开 VS Code
键盘按下 Command + Shift + P
输入 install code
选择 Shell Command: Install 'code' Command in PATH
安装成功后，出现弹框提示
使用在你的工作文件夹中，打开 Terminal 终端，并输入 code path，如下：
123code ./或code ./blog
TODO: 如果提醒你需要授权给终端操作应用的权限，确认即可。
如何正确使用 Git rebase 指令
理解 Rebase 变基git rebase 命令的文档描述是 Reapply commits on top of another base tip，从字面上理解是「在另一个基端之上重新应用提交」，这个定义听起来有点抽象，换个角度可以理解为「将分支的基础从一个提交改成另一个提交，使其看起来就像是从另一个提交中创建了分支一样」，如下图：
假设我们从 Master 的提交 A 创建了 Feature 分支进行新的功能开发，这时 A 就是 Feature 的基端。接着 Matser 新增了两个提交 B 和 C， Feature 新增了两个提交 D 和 E。现在我们出于某种原因，比如新功能的开发依赖 B、C 提交，需要将 Master 的两个新提交整合到 Feature 分支，为了保持提交历史的整洁，我们可以切换到 Feature 分支执行 rebase 操作：
123git pull origin master --rebase或git rebase master
rebase 的执行过程是首先找到这两个分支（即当前分支 Feature、 rebase 操作的目标基底分支 Master） ...
