Photoshop 编辑 GIF

录制 GIF 推荐使用 LICEcap 小巧好用。 GIF 查看方法 在 Mac 上双击 GIF 将是按帧查看一幅一幅的图片,按住 空格 可以动起来。也可以选择 GIF 图片直接点击空格预览。 GIF 编辑 预览 在 Mac 中可以直接使用 预览 对 GIF 进行删除帧的操作。但是发现再次保存的 GIF 只播放一次,不会循环播放。 Photoshop 使用 Photoshop 打开 GIF,点击 窗口 -> 时间轴,可在时间轴中对图片进行编辑。文件 -> 导出 -> 存储为 Web 所用格式 然后在 循环选项 选择 永久。 在这里也可以降低 图像大小 对图片进行压缩。 点击 存储 导出新的 GIF。 – EOF –

November 23, 2017 · 1 min · 56 words · Me

关于 GitHub README.md 中图片加载失败

遇到的问题 在编写 GitHub 的 README.md 后,其中引用的网络图片无法正常显示,点击 alt 的文字提示:Content length exceeded。 分析 根据 About anonymized image URLs 这篇文章:上传的图片 URL 将被修改,所以个人信息将不会被跟踪。GitHub 将使用 开源项目 Camo。Camo 将为每一个图片生成一个以 https://camo.githubusercontent.com/ 匿名代理 URL 同时隐藏来自其他用户的浏览器详细信息和相关信息。 我引用的 GIF 图片有 7MB 多,那么图片大小的限制是多少? camo - server.coffee#L18 content_length_limit = parseInt(process.env.CAMO_LENGTH_LIMIT || 5242880, 10) 换算后大小正好是 5MB。 References 关于 GitHub 无法图片加载的问题

November 22, 2017 · 1 min · 47 words · Me

Git checkout --theirs --ours 解决冲突文件

在代码合并时遇到 conflict 是常有的事情,有些内容是自动生成的资源文件,手工处理起来很麻烦,某一文件如何全部以某一分支的内容为准? 使用 checkout --theirs . checkout --ours .。 场景实例 Engineer A、B 同时从 master checkout 自己的功能分支: # Engineer A git checkout -b feature-a # Engineer B git checkout -b feature-b Engineer A 开发比较快先进行了 push: git add . git commit -m "feat: feature-a" git checkout master git merge feature-a git push Engineer B 再 push 前需要拉最新的 master,因为改到了同一行代码,出现代码冲突。 merge 合并代码 使用 merge 命令导致的代码冲突。 git checkout master git pull git merge feature-a 在处理冲突的过程中: ...

August 30, 2017 · 1 min · 136 words · Me

【Git 权威指南】读书笔记 - 独奏 - Part 3

主要内容:【Git 基本操作】 Git 基本操作 先来合个影 在 Git 里,“留影”用的命令叫做 tag,更加专业的术语叫做“里程碑”(打 tag,或打标签)。 git tag -m "Say bye-bye to all previous practice." old_practice 里程碑无非也是一个引用,通过记录提交 ID(或者创建 Tag 对象)来为当前版本库状态进行“留影”。 git rev-parse refs/tags/old_practice 41bd4e2cce0f8baa9bb4cdda62927b408c846cd6 git describe 显示当前版本库的最新提交的版本号。格式:最近的 tag - 距离此 tag 的个数 - 该提交的 SHA1 git describe old_practice # .. commit something git describe old_practice-2-g8861c65 删除文件 rm *.txt 针对的是 工作区,对 暂存区 和 版本库 没有任何影响。 git rm detached-commit.txt hack-1.txt new-commit.txt welcome.txt 删除动作加入了暂存区,commit 后在版本库罪行提交中删除了,在历史提交中尚在。 ...

August 3, 2017 · 2 min · 308 words · Me

IMOOC React 入门

【注意】内容不再维护。 React 介绍 初识 React React 不是一个完整的 MVC、MVVM 框架,其只负责 View 层,MVC 已经不适用于某些场景的开发 React 跟 Web Components 不冲突 React 的特点就是“轻”,数据单向绑定,独立、小巧、快速、创新 组件化的开发思路,小组件构成大组件,高度可重用 React 应用场景 复杂场景下的高性能 重用组件库,组件组合 “懒”,少做无用功 你总是这样轻言放弃的话,无论过多久都只会原地踏步。 —— 多啦 a 梦 前置知识 JS CSS Sass Compass Yeoman Grunt Webpack CommonJS NodeJS Git GitHub To Be A Better Engineer 无论知识有多新、项目有多难,只要来了什么姿势都要上 没人疼、没人爱,团队中没人可以帮上忙,要学会借助外力,视频、Google、开源项目 积极要求进步 React 的 JSX 与 Style 官网:React - A JavaScript library for building user interfaces 罐头是 1810 发明出来的,可是开罐器呢,却在 1858 年才发明出来。有时就是这样,重要的东西可能迟来一步,但却一定会到。生活和爱情,都是如此。程序,当然也不例外。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Hello World</title> <script src="https://unpkg.com/react@latest/dist/react.js"></script> <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <style> .fontcolor { color: blue !important; } </style> </head> <body> <div id="root"></div> <script type="text/babel"> var Hello = React.createClass({ render: function () { return <div className="fontcolor">Hello {this.props.name}!</div>; }, }); class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } ReactDOM.render( <div> <Hello name="World" /> <Welcome name="World" /> </div>, document.getElementById("root") ); </script> </body> </html> 添加组件属性,有一个地方需要注意:class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。然后,属性名都是驼峰命名法。 ...

July 20, 2017 · 2 min · 260 words · Me

【Git 权威指南】读书笔记 - 独奏 - Part 2

主要内容:【Git 重置】、【Git 检出】、【恢复进度】 Git 重置 分支游标 master 的探秘 git log --graph --oneline * e695606 which version checked in? * a0c641e who does commit? * 9e8a761 initialized. 引用 refs/heads/master 就好像是一个游标,在有新的提交发生的时候指向了新的提交。 Git 提供了 git reset 命令,可以将“游标”指向任意一个存在的提交 ID。注意下面的命令中使用了 --hard 参数,会破坏工作区未提交的改动,慎用。 git reset --hard HEAD^ HEAD is now at e695606 which version checked in? 用 reflog 挽救错误的重置 通过 .git/logs 目录下日志文件记录了分支的变更。默认非裸版本库(带有工作区)都提供分支日志功能,这是因为带有工作区的版本库都有如下设置: git config core.logallrefupdates true 查看一下 master 分支的日志文件 .git/logs/refs/heads/master 中的内容。 tail -5 .git/logs/refs/heads/master Git 提供了一个 git reflog 命令,对这个文件进行操作。 ...

July 20, 2017 · 3 min · 619 words · Me

【Git 权威指南】读书笔记 - 独奏 - Part 1

主要内容:【Git 初始化】、【Git 暂存区】、【Git 对象】 Git 初始化 设置一下 Git 的环境变量,这个设置是一次性的工作。即这些设置会在全局文件(用户主目录下的 ~/.gitconfig)或系统文件(/etc/gitconfig)中做永久的记录。 配置的用户名和邮件地址将在版本库提交时作为提交者的用户名和邮件地址。 git config --global user.name "Jiang Xin" git config --global user.email jiangxin@ossxp.com 设置一些 Git 别名,以便可以使用更为简洁的子命令 只在本用户的全局配置中添加 Git 命令别名: git config --global alias.br branch git config --global alias.ci "commit -s" git config --global alias.co checkout git config --global alias.st "-p status" 版本库的初始化 mkdir demo cd demo git init 初始化空的 Git 版本库于 /path/to/my/workspace/demo/.git/ git init 命令的后面直接输入目录名称 cd /path/to/my/workspace git init demo ls -aF ./ ../ .git/ 这个隐藏的 .git 目录就是 Git 版本库(又叫仓库,repository)。 ...

July 19, 2017 · 5 min · 898 words · Me

【Git 权威指南】读书笔记 - 初识 Git

Git 是一款分布式版本控制系统,有别于 CVS 和 SVN 等集中式版本控制系统,Git 可以让研发团队更加高效地协同工作、提高生产率。使用 Git,开发人员的工作不会因为频繁地遭遇提交冲突而中断,管理人员也无须为数据的备份而担心。经过 Linux 这样庞大的项目的考验之后,Git 被证明可以胜任任何规模的团队,即便这个团队的成员分布于世界各地。 Git 是开源社区奉献给每一个人的宝贝,用好它可以实现个人的知识积累、保护好自己的数据,而且还能与他人分享自己的成果。 版本控制的前世和今生 即便是在 CVS 出现之前的“史前时代”,也已经有了非常好用的源码比较和打补丁的工具:diff 和 patch,他们今天生命力依然顽强。 对这 hello world 两个文件执行 diff 命令,查看两个文件的差异。如下所示: diff -u hello world | less -N 上面执行 diff 命令的 -u 参数很重要,使得差异输出中带有上下文。管道后面带有 -N 参数的 less 命令(按字母 q 退出)会在输出的每一行前面添加行号,便于对输出结果进行说明。 命令 patch 相当于 diff 的反向操作 分布式版本控制系统最大的反传统之处在于,可以不需要集中式的版本库,每个人都工作在通过克隆操作建立的本地版本库中,也就是说每个人都拥有一个完整的版本库。分布式版本控制系统的几乎所有操作包括查看提交日志、提交、创建里程碑和分支、合并分支、回退等都直接在本地完成而不需要网络连接。每个人都是本地版本库的主人,不再有谁能提交谁不能提交的限制,加之多样的协同工作模型(版本库间推送、拉回,及补丁文件传送等)让开源项目的参与度有爆发式增长。 爱上 Git 的理由 每日的工作备份。鸡蛋不全放在一个篮子里。 异地协同工作。通过一个远程版本库,同步数据。 现场版本控制。在部署的现场,进行源代码的修改,能够将修改结果甚至修改过程一并带走,并能够将修改结果合并至项目对应的代码库中。 避免引入辅助目录。只在工作区的顶级目录下创建名为 .git 的目录(版本库目录),如果认为唯一的一个 .git 目录也过于碍眼,可以将其放到工作区之外的任意目录。一旦这么做了,你在执行 Git 命令时,要通过命令行 --git-dir 或环境变量 GIT_DIR 为工作区指定版本库目录,甚至还要指定工作区目录。 重写提交说明。这个命令如果不带 -m 参数,会进入提交说明编辑界面。 git commit --amend 想吃后悔药。假如提交的数据中不小心包含了一个不应该检入的虚拟机文件——大约有 1 个 GB。 git rm --cached winxp.img git commit --amend 更好用的提交列表。正确的版本控制系统的使用方法是:一次提交只干一件事。而不要在下班时才想起来要提交,那样的话版本控制系统就被降格为文件备份系统了。 更好的差异比较。git diff 工作进度保存。 git stash git checkout <new_branch> # do something git checkout <orignal_branch> git stash pop 代理 SVN 提交实现移动式办公。 无处不在的分页器。-p 快。Git 作为分布式版本控制系统几乎所有的操作都在本地进行。 安装 Git sudo aptitude install git sudo aptitude install git-doc git-svn git-email gitk 软件包 git-svn、git-email、gitk 本来也是 Git 软件包的一部分,但是因为有着不一样的软件包依赖(如更多 perl 模组,tk 等),所以单独作为软件包发布。 ...

July 12, 2017 · 1 min · 162 words · Me

NGINX 启用 HTTP/2

简介 HTTP/2(RFC 7540,2015 年发布)是自 1999 年 HTTP/1.1 以来的第一次重大升级,目标是在 不改变应用语义 的前提下,改善延迟、并发和网络效率。浏览器端基本只在 TLS 上启用(h2),明文版本 h2c 仅用于内部服务间通信。 h2:HTTP/2 over TLS(最常见,浏览器只支持这一种) h2c:HTTP/2 over TCP(无加密) 设计背景 移动端和富媒体时代,请求量激增,HTTP/1.1 的队头阻塞、多个 TCP 连接并行带来的 慢启动/拥塞竞争 成为瓶颈。 谷歌的 SPDY 原型验证了“单连接、多路复用、压缩头部”等思路;IETF 在 SPDY 3.1 基础上标准化为 HTTP/2。 核心特性 特性 作用 二进制分帧 (Binary Framing) 把 HTTP 报文拆成小型 Frame;机器易解析、可并行 多路复用 (Multiplexing) 多个请求/响应 共享一个 TCP 连接,互不阻塞 流与优先级 (Stream & Priority) 每个请求是双向 Stream,可指定权重与依赖 头部压缩 (HPACK) 静态 Huffman + 动态表,大幅减少重复的 Header 字节 服务器推送 (Server Push) 服务器可在请求外预送资源 (已被多数浏览器弱化/关闭) 流量控制 端到端窗口,避免单个大文件占满带宽 开始实验 启用 HTTP/2 需要使用 HTTPS,请先参考 在本地环境使用 HTTPS | ZYF.IM。 ...

June 6, 2017 · 1 min · 196 words · Me, LLM

PHP 中获取 Nginx 使用反向代理或 CDN 后的客户端真实 IP

获取 Nginx 反向代理后的客户端 IP,基本是按一定顺序检测以下参数中的信息: HTTP_CLIENT_IP HTTP_X_REAL_FORWARDED_FOR HTTP_X_FORWARDED_FOR REMOTE_ADDR 在未使用 CDN 和反向代理情况下 当业务服务器直接暴露在公网上,并且未使用 CDN 和反向代理服务器时,可以直接使用 remote_addr: $_SERVER['REMOTE_ADDR'] 这时候 HTTP_X_FORWARDED_FOR 和 HTTP_X_REAL_IP 都是可以被伪造的,但 REMOTE_ADDR 是客户端和服务器的握手 IP,即 client 的出口 IP,伪造不了。 在使用 CDN 和反向代理情况下 铁律 当多层代理或使用 CDN 时,如果代理服务器不把用户的真实 IP 传递下去,那么业务服务器将永远不可能获取到用户的真实 IP。 如果 WEB 服务器上层也是使用 Nginx 做代理或负载均衡,则需要在代理层的 Nginx 配置中明确 XFF 参数,累加传递上一个请求方的 IP 到 header 请求中。以下是代理层的 Nginx 配置参数。 proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-NginX-Proxy true; 只有一层代理的情况 我们按上面的配置发起一个伪造请求,10.100.11.25 是我电脑的 IP,链路为: ...

June 2, 2017 · 3 min · 438 words · Me