layerssss (layerssss)

[广东地区优先][远程][兼职][React][Ruby on Rails] 寻一个小伙伴和我一起做项目

layerssss — Thu, 28 Jan 2021 05:47:00 +0800

更新：已经收到挺多简历了，也有看起来不错的人选了，还不止一个，但是只能找一位朋友合作，所以大家暂时不要再发简历了。

=====

是这样子的，这个项目从开始到现在一直是我一个人在兼职给老板做，从 2017 年开始，中途也休息暂停了大半年，不过现在越来越步入正轨，使用量越来越大，也拿到了客户的合同，从去年开始就一直在考虑增加更多开发成员，所以快新年了就来这里寻求一下。

客户目前是一些城市建设方面的政府部门，用来管理他们的一些文档和流程电子化，但是一直按照 Software as Service 的模式去做，为扩增更多客户做准备。老板在这个行业沉浸多年（为政府提供公共建设项目的项目管理服务公司）。

对你的要求：

在广东地区优先（这个不是硬性条件，这是因为客户和老板都在佛山，只是考虑未来如果能偶尔见面讨论能更方便所以优先，不在也可以考虑）
有每周至少 20 小时的时间能用，白天晚上周末都行
有给力的出国网络（这个比较重要，因为我自己人在新西兰，所有开发用的东西和工具，除了生产服务器在国内，其他都在墙外，而且和我语音视频沟通会比较多，没有好点的网络没法玩）
自然要熟练用 React 和 Ruby on Rails，都是兼职，沟通的时间自然没那么多，自己能想办法做当然很重要。

码人说码，顺便分享一下棒棒的项目细节：

软件本身分 Web 和移动端，移动端用 ReactNative(Expo) 做的，仅实现小部分功能所以就没必要多做介绍了。Web 前端后端两个项目分开分别由 Rails 和 create-react-app 驱动，运行在青云上的一个 docker swarm 集群里。

项目代码托管在 GitLab.com 上，使用 GitLab 自带的 CI 测试和发布。测试分两层，底层测试仅测试 Rails 里的单元的逻辑，包括所有 GraphQL mutation / query，还有一些 Model / Job 等上面有独立逻辑的方法；E2E 测试覆盖前端后端所有代码。测试覆盖率由 Codecov 一起统计，总体覆盖率长期保持在 90% 左右，覆盖几乎所有业务代码，没覆盖的大部分都是一些不容易测试的底层代码。

Renovate bot 随时检测并创建 merge request 升级依赖库到最新，加上 CI 里高覆盖率的测试检测出所有升级导致的问题，每次有新版本点击 CI 运行成功后自动合并即可，这样几乎所有的依赖库都能保持到最新的，例如目前：

rails 6.1.1
ruby 2.7.2 (ruby 3 还对有一些 gem 没跟上)
react 17.0.1/create-react-app 4.0.1
material-ui 4.11.3
apollo-client 3.3.7

如图，最近由 Renovate 创建的 merge request:

Rails 中几乎仅包含 GraphQL 的 API 实现，界面逻辑几乎全部在前端代码里 (create-react-app)。

前端界面库使用的是最新的 Material-UI，项目最开始时使用的是 react-bootstrap，现在已经全替换掉了。

React 代码使用 React Hooks 风格，只剩少部分一些旧代码使用 HOC(Higher-Order Components) 风格还未重构。

GraphQL 库使用的是 Apollo Client，这个我觉得国内朋友了解的不多，即使在国外很流行但有机会用的人也不多。这个是 MeteorJS 的团队做的，质量相当好，功能也很强大，而且还不再需要额外的状态管理库（redux，mobx 等）。

感兴趣的朋友可以发简历和联系方式到我邮箱 me at micy.in，麻烦顺便透露一下你当前的薪资，仅用来参考给你发放的时薪，肯定能更高（请得起的话），还有还有预计每周平均可用多少小时，这个是弹性的之后可以按需调整。

CoffeeScript 里 `?=` 这个运算符在 Ruby 里有对应的语法吗？

layerssss — Sun, 31 Aug 2014 19:45:34 +0800

传送门： http://coffeescript.org/#try:a%20%3D%20null%0Aa%20%3F%3D%202%0Aalert%20a%0Aa%20%3D%20false%0Aa%20%3F%3D%202%0Aalert%20a

感觉达到人生巅峰了！

layerssss — Thu, 24 Apr 2014 17:04:57 +0800

图题：「经历过这一个多月的“apcn2 风暴”后，太阳们终于又出来了」

使用又拍云的 API 将 Assets Pipeline 发布到 upyun

layerssss — Wed, 16 Apr 2014 19:08:28 +0800

这个 gem 是又拍云这个开发者大赛的作品，在这里投票啊小伙伴们 >_>： http://upyun.gitcafe.com/projects?category=plugin

故事是这样的：

以前，我一直用 lftp 来自动上传我们的静态资源到又拍云上去

直到有一天我看到这个家伙做了一个很骚的东西

看着这玩意儿我瞬间感到一股共鸣感，于是豪气一发，从我们公司的 ci 里随便拉出了一段日志，直接在 GitHub 的界面上帖给了这货

贴完之后我站起来伸了个懒腰，淫荡的一天又过去了 XD ……突然我虎躯一震，赶紧会过头去看我贴的那段日志：

我们的 UpYun 操作员密码俨然以明文留在里面！

而且我们发布用的操作员密码和主账户的密码是一样的，于是我赶紧把这俩密码都给改了，然后就是各种小伙伴被惊醒：

经过这件事，我学到了一个道理：不要随便把自己的日志贡献给别人……

哈哈哈哈哈好吧，不过用明文的 ftp 来做事情也确实不安全（也不快，还要经常求防火墙放行我们可怜楚楚的数据连接），既然 UpYun 有提供一个带摘要授权又是基于 HTTP REST 的 API，咱就从了呗，大家来看看俺的作品吧：

rails-assets-for-upyun

把预编译好的静态资源发布到又拍云上（用rake）

用法

在 Gemfile 里引用我： gem 'rails-assets-for-upyun', '>= 0.0.3'
首先设置好在生产环境中调用 UpYun 上的资源

# .. config/environments/production.rb
..
# Enable serving of images, stylesheets, and JavaScripts from an asset server.
config.action_controller.asset_host = "awesome-bucket.b0.upaiyun.com"
..

在 Rakefile 里添加一个任务（起一个最酷的名字！）

namespace :assets do
  task :publish_my_holy_shinning_precompiled_miraculous_assets_to_the_almighty_upyun do
    RailsAssetsForUpyun.publish 'awesome-bucket', 'notjustausername', 'thencomesthepassword'
  end
end

然后你就可以在每次发布前（rake assets:precompile之后）运行一遍这个 rake 任务把他们同步到又拍云上去了。

卖点

调用 UpYun 提供的 API 进行增量发布，通过 HTTP 通讯，比 FTP 更加稳定、快速
使用 UpYun API 提供的签名授权，不明文传送密码，更加安全！

详解

RailsAssetsForUpyun.publish(bucket, username, password, bucket_path="/", localpath='public', upyun_ap="http://v0.api.upyun.com")

从剪切版里粘贴图片: HTML5 Clipboard API hacking

layerssss — Fri, 14 Feb 2014 19:09:15 +0800

最近在做一个在线图片编辑器，觉得如果让用户使用剪切板来粘贴图片（而不是将图片保存到本地，然后再选取文件上传）会很方便。在衡量了客户的浏览器状况之后，我决定使用 HTML5 的 local features 来 hack 一下，最终想达到的效果就是：

用户在 photoshop 里编辑好原图（可能是从数码相机里传上来的照片）
然后在 photoshop 里选取一部分图片区域（比如说照片中的人脸）
然后在编辑器里点 Ctrl + V
搞掂!photoshop 可以关了（保存还是不保存就随便用户咯）

想一想，这一个工作用剪切板来代替文件上传是会方便很多（不用再单独将编辑结果保存为另外一个文件）

prepare!

所以，这个想法就从一个 demo 开始了。首先，要做好界面上的其他元素的渲染，这个编辑器的界面是用 canvas 来渲染的，所以要先了解一下 canvas 的世界里图片是怎样表示的。

about canvas

MDN 上的这篇文章列出了一个简单的在 canvas 中使用位图的例子，然而如果不太考虑计算效率，我们能拿到粘贴过来的图像的 dataURL 的话，就最方便了，因为 dataURL 就是一个简单的字符串。

about clipboard

然后还要对“剪切板“这个系统功能有个简单的认识，不管是 OSX, Windows, 还是 Linux 世界里的一堆桌面环境，现在都对剪切板有了以下共识：

剪切板里可以装 1 个或者多个数据项
“粘贴一个图片文件”和“粘贴一块图片”是不同的 (!important)：

图片文件是作为一个文件出现的，它里面的数据可能是任意格式的甚至不是图片。而图片，就肯定是表示图片的数据，它不一定有文件名，而它的数据格式也因不同实现而不同。这篇文章介绍的是第二种情况哦（虽然以后有时间我们也可以把第一种情况给解决掉）。

choose your best favorite weapon!

下一步便是从剪切板里读数据啦。我目前的第一开发浏览器是 chrome，所以就从 chrome 开始边调试边开发吧。对于 chrome，开发者们自己写的教程文章很多，于是我便按照这一篇开始了，总结一下，步骤很简单：

拦截元素的paste事件

可以是可编辑元素：input, [contenteditable]，也可以是全局元素： window，所以只有在这个元素被激活时（例如正在编辑一个 contenteditable 时），你的粘贴动作才会被拦截

从event的数据里判断粘贴过来的内容是不是我们想要的内容（我们想要图片）

window.onpaste = (event)-> # it's coffeescript. don't panic!
  for item in event.clipboardData.items # 如果你是用 jQuery 拦截了 paste 事件，你需要用 event.originalEvent 来代替 event 
    if item.type.match /^image\// # item.type 为粘贴过来的内容的 mime-type，如 image/png
      # ...

是图片！调用FileReader拿到它的 dataURL

reader = new FileReader()
reader.onload = (event)=> # 注意这里是异步的哦
  getImageData event.target.result, (data)->
    console.log data
reader.readAsDataURL item.getAsFile()

faithful gecko

关于在 Firefox 里获取剪切板数据的文章相对要少一些，而且我发现刚才针对 chrome 使用的clipboardData.items其实是 chrome 的私有 API，而不是 HTML5 的标准接口，而 Firefox 实现的才是标准的接口。好吧咱来看看标准里面是怎样说的，其实区别不大：

需要从 event.clipboardData.types (一个类数组) 里判断粘贴过来的数据的类型
需要用 event.clipboardData.getData(type) 方法来获取数据

可是我试了一下后发现一个严重的问题： Firefox 不允许粘贴图片 / 在 Firefox 里粘贴图片时获取不到数据。

ok, 其实以上那个链接中也说得很明白了，想粘贴图片，hack 吧：ff 里编辑[contenteditable]时，粘贴一个图片的话，ff 会把图片当作图文混排的插图将它转化为一个<img />元素插进去（图片数据被转换成 dataURL 作为这个<img />元素的src属性了），所以该 hack 原理为：

激活 (focus()) 一个隐藏的div[contenteditable]
获取paste事件

虽然 ff 不允许粘贴图片，但是paste事件还是能捕获到的，只不过从event.clipboardData获取不到任何数据

setTimeout(..., 1)，等待“下一刻”图片被插入到[contenteditable]里面
在这个[contenteditable]里面找到新添加的<img />元素，并拿到它的src属性（就是我们想要的东西——图片数据的 dataURL）。

Internet Explorer, the troll

IE 也没有实现 HTML5 标准里的 API，但是 IE 有个挺简单的私有剪切板 API，而且是从 IE5.5 就已经实现了的。IE 的私有 API 异常简单——直接访问window.clipboardData.getData(type)就可以获取剪切板里的数据了。btw. 大部分同学应该能马上就想到 HTML5 标准 API 不设计成这样的原因，那就是：如果 API 是这样的，那网页便可以随时访问用户剪切板里的内容，用户的隐私便可能会被泄漏。

不过试了一下后发现了 IE11 和 Firefox 有一样的问题：它不认粘贴来的图片，不过 IE11 的[contenteditable]也支持插入图片并将其转换成<img />，所以用和 ff 同样的 hack 来解决就好了。

old-fashioned Opera

Opera 的情况和 Firefox 类似——实现了 HTML5 标准里的 API，但是不支持粘贴图片。不过比较糟糕的是它的[contenteditable]里也不支持插入图片，所以我也暂时没有找到什么办法让它能支持粘贴图片。

Safari

Safari 的情况也和 Firefox 类似，但是在 Safari 里粘贴至[contenteditable]的图片只会转换为webkit-fake-url://...的形式，而这个数据似乎对我们没有任何用，它只是个本地的临时 url，只能在当前网页的<img />元素里显示图片，用 javascript 也读取不到 (非同源)，所以也暂时没办法让它支持粘贴图片了。

ps. webkit 的 bugzilla 里有一个放了很久的 issue，正是针对这个问题而言的，所以看来从[contenteditable]里粘贴暂时看来是没戏了，有其他办法么？

其实俺一开始也到处搜索了一下，希望有人已经做了一个能实现粘贴图片功能的、支持不同浏览器的小 lib(或者 snippets)，后来发现确实没有，所以俺就来做这个事儿吧，这样我的编辑器也可以简单地引用它来读取剪切板里的图片：

它的代码在这里：https://github.com/Puffant/paste.js
一个简单的演示页面 (先复制一段文字或者图片，然后点击网页四个方框中的任意一个，然后按Ctrl + V粘贴)： http://puffant.github.io/paste.js/

在这过程中我还找到了一些十分有用的资源 (上文中没有提到的)：

Local I/O tests：除了 Clipboard API，这里还包括 Drag&Drop、FileReader、FileSaving、CopyAPI(“点击我拷贝到剪切板”这样的功能) 的原生 JavaScript 实现 demo。
Can I use clipboard API?：标准 Clipboard API 的浏览器兼容性一览。
Firefox 4 – FormData and the new File.url object：想要将粘贴来的图片作为一个文件上传到服务器？用FormData。
JavaScript Canvas to Blob：如题。

碎碎念

其实这个功能对于论坛很有用耶，看：

截图到剪切板
编辑完文字后按一下 Ctrl + V
发帖多么方便，生活多么美好
求又拍云赞助咱 ruby-china 一个免费 bucket 吧 @_@

开什么玩笑，鲁威的源码谁下到了？

layerssss — Sun, 27 Oct 2013 09:06:42 +0800

一大串网址，刚打开电脑就没了。……