hooopo (Hooopo)

我的 side project 成为昨日 Hackernews Top 10

hooopo — Fri, 25 Sep 2020 19:48:51 +0800

昨天晚上本来想在 hackernews上面推广一下新做的一个项目 https://hackershare.dev ，顺便把之前做的一个DrawERD也提交了上去，没想到 hackershare 石沉大海，DrawERD 这个项目被顶了上来，真的是无心插柳...

目前为止，获得了 51 upvote 和 37 comments，最好的时候在首页排到了 top 3 。hackernews 首页的流量确实可以，通过 GA 观察，最高峰差不多 30+ 同时在线人数，然后获得新注册用户几百个，比之前总数还要多...

不过由于英文不是很好，没有很好的和老外在评论里沟通，这点很遗憾，通过他们的回复，总结一些 hackernews 推广经验：

在 hackernews 上发帖的时间很重要，最好选在国内的凌晨左右，因为他们的算法是按时间重力下沉的，时间因素占了很大的比重，时间选不好帖子很快就沉底了
英文语法最好让专业一点的朋友 review 一下，有时候老外读起来真的会感到 confusing
付费业务的话，隐私说明、价格说明这些也是非常重要，老外对这个很苛刻

hackershare: Social bookmarking reinvented!

hooopo — Wed, 23 Sep 2020 07:59:30 +0800

hackershare 是一个书签分享平台，你可以通过 chrome extension 一键分享你正在浏览的网页。与 pocket 之类书签管理工具不同的是，hackershare 鼓励分享你的书签，而不是私藏，独乐乐不如众乐乐。

大众标签是书签工具必备的一个特性，可以便于管理你的书签。成为一个强大的信息组织工具，是 hackershare 的目标，未来在标签上会做很多优化，比如同义词环、优选术语、上位术语等。

hackershare 是一个发现平台，系统通过用户的点击、浏览、收藏、评论等行为对内容进行热度排序，算出每日、每周、每月和总热度排序。目前 hackershare 的内容主要面向编程开发、产品运营、UI 设计、创业思考等。

hackershare 是一个 RSS 订阅平台；系统会定期抓取技术相关的热门 RSS 源，你只需要订阅就可以收到 RSS 更新的通知，效果和 RSS 阅读器一样。同时，你还可以按其他维度来订阅你感兴趣的内容，比如关注用户、关注标签，这样用户和标签相关的内容就会推送给你，一键掌握技术咨询。

未来会支持用户自己提交 RSS 源，你可以用来推广你的博客和产品。

hackershare 是一个开源项目，应用的范围很广，比如：如果拿来放商品链接，就可以成为什么值得买之类的导流站；

如果拿来放新闻咨询就可以成为一个新闻站；

如果团队内部共享资料，就可以成为一个内部知识库。

和普通论坛或 CMS 比，hackershare 更轻量级，SEO 友好，具有更好的信息架构，以及自动化特性，做一些导流站的话，你甚至可以省去写爬虫的时间。

项目地址：https://hackershare.dev
github：https://github.com/hooopo/hackershare
chrome extension：https://github.com/hooopo/hackershare-ext

Rails UJS + Stimulusjs + Turbolinks 5 = ❤️

hooopo — Mon, 24 Aug 2020 14:57:06 +0800

del.icio.us 复活？

最近看到被雅虎收购后关掉的社会化书签网站del.icio.us又更新了内容，一个叫 Maciej Ceglowski 的家伙拥有了 del.icio.us 的域名，估计又要重新搞起？

造个轮子

自从 google reader 被关掉、del.icio.us 被关掉，获取信息的渠道少了，我主要通过 github 和 twitter，用 pocket 来保存书签，但 pocket 更偏向收藏。

由于很久没有写 Web，HTML CSS JavaScript 这些快忘的差不多了，抱着重新学习一下前端和做一个社会化标签网站的想法，注册了一个域名 hackershare.dev.

产品的设计功能点：

可以通过 chrome extension 方便保存网页 URL，类似 pocket 的 chrome extension.
Web 端可以根据用户收藏、分享等对 URL 的热度进行排序，类似 hackernews 和 reddit 的机制
灵活的类目组织，可以对 URL 进行打标签，整理类目
对 URL 进行评论讨论
一点社区化功能，关注用户和类目之类

Rails UJS + Stimulusjs + Turbolinks 5

下面写一下重新使用 Rails 来做 Web 的一些体验，技术栈主要是 Postgresql 12+，Rails6， Turbolinks 5，Rails UJS 和 Stimulusjs

拿收藏功能来举例，使用 stimulusjs+rails-ujs 来演示一下 Rails 的新三板斧。页面效果：

ERB 片段：

<span data-controller="likes" class="relative z-0 inline-flex shadow-sm rounded-md">
  <%= link_to toggle_liking_bookmark_path(bookmark), method: :post, type: 'button', remote: true, data: {type: :json, action: "ajax:success->likes#toggle"}, class: "relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" do %>
    <svg data-target="likes.svg" class="h-5 w-5 <%= bookmark.liked_by?(current_user) ? "text-yellow-300 hover:text-yellow-400" : "text-gray-300 hover:text-gray-400" %>" viewBox="0 0 20 20" fill="currentColor">
      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
    </svg>
  <% end %>
  <button data-target="likes.data" type="button" class="-ml-px relative inline-flex items-center px-3 py-2 rounded-r-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
    <%= bookmark.likes_count %>
  </button>
</span>

首先是 UJS，

<%= link_to toggle_liking_bookmark_path(bookmark), method: :post, type: 'button', remote: true, data: {type: :json, action: "ajax:success->likes#toggle"}

link_to 带 remote: true 之后 ujs 发起一个 ajax 请求，type 是 json，和 jquery-ujs 那时候的写法一致，只不过之前一般都是服务端返回 JavaScript 操作 DOM。现在有了 stimulusjs 层，返回 JavaScript 和 HTML 还有 JSON 都很方便处理。下面说 stimulusjs：

HTML 里的data-controller和data-action还有data-target作用是事件绑定。收藏这个功能就是 ujs 发起 ajax 请求成功之后，我们要更新 button 颜色，更新 likes.data 区域的数量。

// likes_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "data", "svg" ]

  connect() {
  }

  toggle(event){
    let [data, status, xhr] = event.detail;

    if (typeof(data) === 'string') {
      // 这里如果返回的是JavaScript或html，说明是未登录情况，turbolinks直接给跳转了
      return;
    }
    if (data["like"]) {
      this.svgTarget.classList.remove("text-gray-300");
      this.svgTarget.classList.remove("hover:text-gray-400");
      this.svgTarget.classList.add("text-yellow-300");
      this.svgTarget.classList.add("hover:text-yellow-400");
    } else {
      this.svgTarget.classList.remove("text-yellow-300");
      this.svgTarget.classList.remove("hover:text-yellow-400");
      this.svgTarget.classList.add("text-gray-300");
      this.svgTarget.classList.add("hover:text-gray-400");
    }
    this.dataTarget.innerHTML = data["bookmark"]["likes_count"];
  }
}

上面就是 stimulusjs 的全部代码，data: {action: "ajax:success->likes#toggle"} 让 ajax 成功之后调用 likes_controller.js 的 toggle 方法，并且可以取得到 event 对象，这里来处理 ajax 请求之后的页面效果。无论是后端返回 HTML 还是 JSON 还是 JavaScript，相对旧的 jquery-ujs 的方式，在 stimulusjs 这层里处理都非常容易。并且 JavaScript 有了新的组织，统一在 app/javascrips/controllers 目录，每个功能单独一个 controller。

当然，上面的功能还可以用另外的方式来实现，抛弃 rails-ujs，直接 stimulusjs 绑定 link 的 click 事件，在 likes_controller.js 里去做 ajax 请求 + 页面处理的工作，但我觉得 ujs+stimulusjs 这种更简单一些。

下面说一下 turbolinks 5 和 ujs 的一些坑，我们知道使用 turbolinks 之后，内部链接之间切换不会刷新页面，体验要比每次重新刷新页面好很多，但对于服务器端来说，整个页面还是要渲染一遍，相关的查询也要执行一遍，想有更好的体验也需要一些专门的 ajax 的请求，返回局部内容，比如分页和过滤场景。

但目前版本的 rails-ujs 和 turbolinks 5 还不是兼容的很好，拿分页举例，下一页按钮由 rails-ujs 触发，使用 pushState 接口同步 URL 历史，便于收藏，但由于这个请求并不是 turbolinks 参与的，turbolinks 维护的快照会缺失，当浏览器点后退或前进时，rails-ujs 渲染的部分会丢掉，体验很差。一个 hack 的解法是，把浏览器 restoration visit 屏蔽掉，统一 reload，由于浏览器后退的操作其实并不是高频，并不会代理什么影响：

window.onpopstate = function(event) {
  document.location.reload();
};

不知道 Turblinks 6 会不会把这个统一做好，或者抛弃 rails-ujs，让 turbolinks 来完成 ajax 的局部刷新功能。总体来说 rails-ujs+Stimulusjs+turbolinks 5 这套组合拳还是非常棒的，并且是真的渐进增强体验，比如分页和过滤这种，关闭了 JS，页面渲染还是正常，一点不影响 SEO. 只需要一行额外代码：

respond_to do |format|
  format.js { render partial: "bookmarks/bookmarks_with_pagination", content_type: "text/html" }
  format.html
end

DrawERD-在线 ERD 和 DB 文档工具

hooopo — Tue, 07 Jul 2020 19:18:45 +0800

最近做了一个在线 ERD 工具，本来的想法就是 “可以在线协同编辑 ERD 的工具”，写完之后，发现 “导出 DDL”、“生成 DB Doc” 这些真实需求。

但我个人其实主要用来建模，开始想做一个项目的时候，把表结构和实体关系在 DrawERD 上画下来，在界面上迭代，觉得差不多了就导出 DDL，放到 Rails migration 里。

自己这种 workflow 用下来基本上还是挺满意。不过推广上遇到一些问题，这东西有点小众，使用频率也不是很高，所以基本上只有自己用... 不过前段时间论坛上分享了一下，最近看数据陆陆续续还有一些用户注册。

目前的 feature list：

可以导出 SVG
可以生成 SVG 外链
导出 DDL SQL
导出 Markdown 文档：https://gist.github.com/hooopo/f9353f6e10cf31dc4e7593d6b56c1617
生成在线 HTML 文档
实体关系自动检测
分组功能

地址： https://drawerd.com