matttrix1999/jpeg.codes

jpeg.codes's Issues

Pipe forward operator in Swift

最近，Ruby2.7 加入了 |> 操作符，在这之前，Ruby2.6 可以用 .then 实现类似的逻辑

Swift 这门编程语言可以实现类似 Ruby 的 5.times {} 语法

extension Int {
  func times(block: () -> ()) -> Int {
    for _ in 0..self {
      block()
    }
    return self
  }

  func times(block: (Int) -> ()) -> Int {
    for i in 0..self {
      block(i)
    }
    return self
  }
}

5.times { (i: Int) in println("[\(i)]") }

那么，Swift 也可以实现类似 Ruby 的 .then 语法，不过 Swift 支持自定义操作符

infix operator |>

func |> <A, B>(a: A, fn: (A) -> B) -> B {
  return fn(a)
}

func next(_ x: Int) -> Int {
  return x + 1
}

func pred(_ x: Int) -> Int {
  return x - 1
}

let num = (0 |> pred) |> next

设置操作符的优先级

precedencegroup ForwardApplication {
  associativity: left
}

infix operator |>: ForwardApplication

let num = 0 |> pred |> next

Webpack 简易指南

简单来说，Webpack 是一个前端打包工具。随着众多 JavaScript 框架流行起来，Webpack 成为目前最受欢迎的模块化构建工具

运行以下命令安装 Webpack

npm install webpack webpack-cli --save-dev

创建入口文件 entry.js，运行 Webpack

./node_modules/.bin/webpack entry.js

Webpack 默认输出内容到 dist/main.js，如果想输出到 assets/application.js，可以运行

npx webpack entry.js -o assets/application.js

创建 Webpack 配置文件 webpackfile.js

const { join } = require('path')

module.exports = {
  entry: './entry.js',
  output: {
    filename: 'application.js',
    path: join(__dirname, 'assets')
  }
}

现在，运行 Webpack 的命令简化为

npx webpack --mode development

Webpack 的 mode 选项有三个可选值：development、production 和 none，编译时，如果 mode 的值为 production，输出的内容会被简化（压缩）

Webpack 配置文件还支持以下写法

const { join } = require('path')

module.exports = (environment) => {
  return {
    entry: './entry.js',
    output: {
      filename: 'application.js',
      path: join(__dirname, 'assets')
    }
  }
}

代码中 environment 这个变量的值可以通过以下命令设置

npx webpack --mode development --env development

Webpack 允许开发者在配置文件中设置 mode 的值

const { join } = require('path')

module.exports = (environment) => {
+ const mode = environment || 'development'
+
  return {
+   mode,
    entry: './entry.js',
    output: {
      filename: 'application.js',

代码中 mode 这个变量的默认值为 development

现在，运行 Webpack 的命令简化为

npx webpack

发布生产环境版本时，可以运行

npx webpack --env production

接下来，可以定制 package.json 的 scripts 字段

  "scripts": {
+   "watch": "webpack --watch",
+   "build": "webpack --env production"
  },

Webpack 的 --watch 选项表示启动监听模式

现在，运行 Webpack 的命令简化为

npm run watch

发布生产环境版本时，可以运行

npm run build

Webpack 自定义输出还支持以下写法

module.exports = (environment) => {
  const mode = environment || 'development'
+ const devMode = mode === 'development'

  return {
    mode,
    entry: './entry.js',
    output: {
-     filename: 'application.js',
-     path: join(__dirname, 'assets')
+     path: join(__dirname, 'assets'),
+     filename: devMode ? 'application.js' : 'application-[hash:12].js'
    }
  }
}

这样一来，发布生产环境版本时，Webpack 输出文件的名称会加上长度为 12 的特征值（字符串）

在 Webpack 中，资源即模块，它们可以像 JavaScript 一样被引用

资源位置	引用语法
styles/index.js	require('babel-loader!./styles')
node_modules/bulma/css/bulma.css	require('css-loader!bulma/css/bulma.css')
node_modules/lodash/capitalize.js	const capitalize = require('lodash/capitalize')

不难看出，Webpack 对资源的处理依赖于各式各样的加载器

运行以下命令来安装 babel-loader 和 css-loader

npm install babel-loader @babel/core @babel/preset-env --save-dev

npm install css-loader mini-css-extract-plugin --save-dev

在 Webpack 配置文件中创建资源（模块）匹配规则

const { join } = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')

  output: {
    path: join(__dirname, 'assets'),
    filename: devMode ? 'application.js' : 'application-[hash:12].js'
-  }
+  },
+  module: {
+    rules: [
+      { test: /\.css$/, use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader'] },
+      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: devMode ? 'application.css' : 'application-[hash:12].css'
+    })
+  ]

其中，MiniCssExtractPlugin 告诉 Webpack 样式内容要独立出来

由于 Webpack 会根据定义的规则自动选择加载器，为了避免歧义，以上语法简化为

资源位置	引用语法
styles/index.js	require('./styles')
node_modules/bulma/css/bulma.css	require('bulma/css/bulma.css')
node_modules/lodash/capitalize.js	const capitalize = require('lodash/capitalize')

使用 html-webpack-plugin 生成 index.html

npm install html-webpack-plugin --save-dev

在 Webpack 配置文件中加入这个插件

const { join } = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')

  plugins: [
+  new HtmlWebpackPlugin({
+    filename: '../index.html'
+  }),
   new MiniCssExtractPlugin({
     filename: devMode ? 'application.css' : 'application-[hash:12].css'
    })
  ]

为了在浏览器访问 Webpack 生成的静态资源，安装以下工具

npm install serve --save-dev

serve 提供一个简单的静态资源服务

启动服务器

serve -l 4300

现在，访问 http://localhost:4300 可以看到我们预想的效果

macOS 常用软件

浏览器

• Google Chrome

输入法

• RIME

编辑器

• Atom
• Xcode

终端命令行

• iTerm2
• Homebrew

网络调试

• Insomnia

播放器

• IINA

设计

• Sketch

解压

• The Unarchiver

PostgreSQL 数据备份

创建 matttrix1999 和 development_database

CREATE USER matttrix1999 WITH PASSWORD '********';
CREATE DATABASE development_database OWNER matttrix1999;
GRANT ALL PRIVILEGES ON DATABASE development_database TO matttrix1999;

psql -U matttrix1999 -d development_database -h 127.0.0.1 -p 5432

导出

pg_dump -W -U matttrix1999 -h localhost development_database > development_database_20190616.sql

导入

dropdb -W -U matttrix1999 -h localhost development_database
createdb -W -U matttrix1999 -h localhost development_database

psql -W -U matttrix1999 -h localhost development_database < development_database_20190616.sql

学习 GitHub 的 API 设计

GitHub 的 RESTful API 设计的相当友好，非常值得学习

当你访问 https://api.github.com 时，它给出了一系列接口链接，可以容易地发现 rate_limit_url

RateLimit 的信息同样也在 Headers 中

X-RateLimit-Limit: 60
X-RateLimit-Remaining: 59
X-RateLimit-Reset: 1560689511

版本号和 RequestId

X-GitHub-Media-Type: github.v3; format=json
X-GitHub-Request-Id: 13B3:7A30:986223:CBC9B2:5D06302C

分页信息放到 Headers 里

Link: <https://api.github.com/repositories/191588242/issues?page=1>; rel="prev", <https://api.github.com/repositories/191588242/issues?page=1>; rel="last", <https://api.github.com/repositories/191588242/issues?page=1>; rel="first"

以资源为中心设计接口

• https://api.github.com/users/matttrix1999/repos
• https://api.github.com/repos/matttrix1999/jpeg.codes

我关注的 GitHub 项目

https://github.com/matttrix?tab=stars

document.querySelector('ul.filter-list.small').innerText.split(String.fromCharCode(10))

items.group_by.with_index { |_, index| index - (index % 2) }.values.each { |_| puts "#{_[1].ljust(20)}#{_[0].rjust(4)}" }

Shell                  2
JavaScript            21
Ruby                 102
C++                    1
Python                 9
C                      7
Arc                    1
Java                   3
Clojure                3
Go                     7
Fancy                  1
Rust                   3
Elixir                 3
Julia                  1
TypeScript             5
CSS                    5
TeX                    2
Crystal                2
Swift                 81
Makefile               1
HTML                   6
Jupyter Notebook       2

Ubuntu 简单设置（服务端）

大约在 2014 年的时候，我拥有了第一台 macOS 设备，在那之前使用的是 Ubuntu 系统

服务端 Ubuntu 的设置多数情况下和本机操作是一致的

安装 Ruby

apt update
apt-add-repository ppa:brightbox/ruby-ng -y

apt update
apt install ruby2.6 ruby2.6-dev -y
gem install bundler

安装 NodeJS

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
apt install nodejs -y

安装 oh-my-zsh

apt install zsh -y
curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh
chsh -s /bin/zsh

安装 PostgreSQL

apt install postgresql libpq-dev

添加新用户

adduser matttrix1999
usermod -a -G sudo matttrix1999

修改用户密码

passwd matttrix1999

Nginx 常用命令

sudo nginx -t
sudo nginx -s reload

sudo service nginx start
sudo service nginx reload
sudo service nginx restart

端口设置

sudo ufw status
sudo ufw enable

sudo ufw deny 4321
sudo ufw allow 4567
sudo ufw allow 'OpenSSH'
sudo ufw allow 'Nginx Full'

编写可配置的 RubyGems

在 Ruby 开发中，有以下常见的配置模式

Papago.configure do |config|
  config.api_key = ENV['PAPAGO_API_KEY']
end

从语法可以看出，Papago 的 #configure 方法接收一个代码块

module Papago
  def self.configuration
  end

  def self.configure
    yield configuration
  end
end

代码中 #configuration 的返回值期望是一个可以作为数据容器的对象

module Papago
+ class Configuration
+ end

  def self.configuration
+   @configuration ||= Configuration.new
  end
end

其中，@configuration 作为模块的实例变量，#configuration 始终返回同一个 Configuration 实例

最后，@configuration 需要响应 api_key 和 api_key=

module Papago
  class Configuration
    attr_accessor :api_key
  end
end

Hi there!

几年前，有一段时间，写了好几篇技术文章，当时用的是 Farbox

Farbox 的工作原理：利用 Dropbox 授权内容读取权限进行模板渲染。相比一些静态博客构建工具，编译过程从本地换到了服务端，确实是一个很不错的思路

GitHub Pages 支持自定义域名，对于习惯命令行界面的开发者来说，本地编译加版本控制或许更有意思。随着前端框架的流行，构建过程中视图渲染部分似乎可以被省略，仅输出 JSON 数据也是可行的

有一段空余时间，我尝试用 NodeJS 实现一个 Markdown 到 JSON 的工具，似乎还够用（由于 NodeJS 写起来比较随意，我又用 Ruby 实现了一次）

相比自己实现的工具，Jekyll 支持自定义模板标签，例如可以嵌入 YouTube 视频、网易云音乐播放器等，功能相当全面。利用其插件系统，可以生成指定的 JSON 文件。另外一个思路是：利用 Nokogiri 解析 _site/ 目录下的 .html 文件，从中提取出标题和正文

除此之外，利用 GitHub 的 Issues API 也是不错的方案，但需要考虑频率限制问题

技术类写作平台很多，例如掘金社区，还有小专栏，但我能写的文章不会很多，目前就先把想法放在这里

Why not Redux!

在一开始学习 React 的时候，我并没有使用 Redux，在使用 Redux 之后，我并没有感受到它的优势，直到我开始使用 Mobx，才感觉到状态管理的重要性。可能我对 Redux 的理解还不够深刻，但从解决问题的角度思考：相比 Redux，Mobx 在组织代码方面更为人性化

如果用 React 构建应用程序的话，我想路由和状态管理必不可少，即使是一个简单的博客应用。路由管理可能没有太多选择，方式上也区别不大。状态管理除了 Redux 和 Mobx 外，最近更新的 storeon 也值得关注

如果用 Vue 构建应用程序的话，官方的 Vue-Router 和 Vuex 是绝对的首选。在尝试了一段时间 Vue 开发，我觉得目前这两大前端框架各有优势，不过从状态管理来说，我会选择 Vuex

抒库

抒库可能是我第一个相对完整的小程序，也可能是我最后一个开发的小程序。我正在使用的小程序不多，除了「一条视频」外，其它几乎都是生活类的应用。对于我个人来说，想象不出什么有趣的应用必须使用小程序来开发

Ruby 图像处理

在 Ruby 开发中，如果需要合成图片，可以使用 mini_magick 这个库

require 'mini_magick'

image_a = MiniMagick::Image.open('image_a.png')
image_b = MiniMagick::Image.open('image_b.png')
image_c = image_a.composite(image_b) do |image|
  image.geometry '+0+0'
  image.compose 'Over'
end

image_c.combine_options do |image|
  image.font 'faster_one.ttf'
  image.gravity 'center'
  image.pointsize 24
  image.draw %{text 0,0 'MiniMagick'}
end

image_c.write('image_c.png')

文件系统权限

macOS 系统中，运行 ls -al 命令可以查看文件及其权限相关的一些信息

以 drwxr-xr-x 为例，第一个字符 d 表示 directory，剩余 9 个字符可以拆分为以下三个部分

.
├── User
│   .
│   └── r[4] + w[2] + x[1] = [7]
│
├── Group
│   .
│   └── r[4] + -[0] + x[1] = [5]
│
└── Others
    .
    └── r[4] + -[0] + x[1] = [5]