Ian (Ian)

尊嘟网络科技（深圳）有限公司招聘初/中级 Ruby On Rails 全栈工程师 15k ~ 20k

Ian — Mon, 21 Oct 2024 14:15:04 +0800

公司概述

FRL (https://getfrl.com) 是一家创新型社交电商科技初创公司，专注于欧美市场的社交电商业务，团队创始人都是资深的欧美电商行业从业者。

职位概述：

我们在寻求一位具有经验的初/中级 Ruby on Rails 开发工程师来加强我们的团队。作为团队中的一员，你将参与到项目的各个阶段，负责开发可扩展且稳定的网络应用程序。你也将与团队成员紧密协作，共同促进我们产品的进步和优化。

职位名称：

Ruby On Rails 全栈开发工程师（Hotwire 技术栈）

工作地点：

深圳 · 南山前海

职责和要求：

负责 FRL 平台的设计、开发和维护。
负责编写高质量的，注释完善的代码，确保系统的稳定性、安全性和性能。
参与需求分析、系统设计和技术选型。与团队成员合作，共同解决技术难题，并推动项目进展。
对新技术和工具保持好奇心，不断学习和提升技能。

职位要求：

有 2 年以上的 Ruby on Rails 开发经验。
熟练掌握 Ruby 语言和 Rails 框架。
熟悉 Hotwire 框架 ( Turbo / StimulusJS )。
熟悉 HTML5 + CSS3 , 熟练使用 TailwindCSS。
熟悉常用的数据库系统，如 PostgreSQL、MySQL 等。
能够独立工作，也能作为团队一员有效沟通。
对技术有强烈的热情，乐于学习和接受挑战。
基本的英文读写能力。

加分项：

可做工作语言的英文口语能力。
有跨境电商系统开发经验。
有云平台部署经验。
参与过开源项目或有相应的技术博客。

福利待遇：

薪资范围 15k - 20k。
工资包括基本工资+bonus+Stock Option，具体情况要根据个人背景和能力来定。
弹性工作时间，充分体现工作与生活的平衡。
我们反对 996，主张在工作时间内完成工作任务。
地铁直达办公室。

联系方式：

欢迎发送简历到 jobs@get.frl，我们会尽快和你取得联系。

在 Ruby On Rails 中使用 helper 实现 slot 功能

Ian — Wed, 06 Mar 2024 10:10:25 +0800

Image: https://unsplash.com/photos/oUTugmSkagk

原文： https://mini-geek.com/posts/77

什么是 Slot？

我们这里说到的 slot 是 view 层面的，通常用于组件中。slot 的意思是插槽，同字面上的意思，它们是一些占位符，我们可以在调用到时才决定传递什么样的结构进去，这使得我们可以更加灵活的复用组件。

Slot 用于解决什么样的问题？

举个例子，我们的 web 应用中通常都会使用到 Modal（模态框）这个组件，通常 Modal 都是结构都是固定的。下面是 Bootstrap 中一个 Modal 使用的例子：

<div id="exampleModal" class="modal" tabindex="-1"> <!-- 1. id -->
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5> <!-- 2. 标题 --> 
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p> <!-- 3. 模态框主体 -->
      </div>
      <div class="modal-footer"> 
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <!-- 4. 模态框的操作按钮 -->
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

上面标出来的 4 个部分：id，标题，主体，操作按钮，通常是一个模态框会变动的地方（样式也可能会变，不过样式变化的问题比较容易解决，这里先忽略）。如果在每一个用到模态框的位置都写上这么一大串代码，显然是会影响代码的可读性和可维护性的。这个时候就可以用上我们之前说到的插槽的概念了。

接下来我们以 Modal 为例子，介绍一下如何使用 Rails 的 helper + partial + 一个简单的对象，来将这类代码封装成通用的组件。（ViewComponent 这个 Gem 也提供了 slot 的功能，这里我们介绍如何使用 Rails 原生的方式来实现）

实现

首先我们要初始化一个项目：

$ rails new demo -c bootstrap

初始化完成之后，我们先生成一个控制器用于演示：

$ cd demo
$ rails generate controller home show

这里我们生成了一个只有 show action 的控制器 HomeController，并且生成了对应的页面：

新建 app/helpers/component_context.rb 内容如下：

class ComponentContext < BasicObject  
  attr_accessor :slots  

  def initialize(view_context)  
    @view_context = view_context  
    @slots = {}  
  end  

  private  

    def method_missing(name, *args, &block)  
      @slots[name] = @view_context.capture(&block)  
    end  
end

ComponentContext 是实现 slot 功能的关键。这里简单介绍下 ComponentContext 的作用，这个类首先定义了一个 slots 的 accessor，这里是为了后面我们能保存以及获取到 slot 里边的内容。然后定义了一个 initialize 方法，接收一个 view_context 参数，这个 view_context 可以在 view 或 helper 中直接调用 self 获取到，默认是 ActionView::Base 的实例。接下来定义了 method_missing 方法，这个方法会在对象找不到方法时被调用。里边用到了 helper 里边的 capture 方法，这个方法可以捕捉 block 里边的内容并返回，这里我们用它接受 slot 的传值，这意味着调用 ComponentContext 中任意不存在的方法时，实际上都会往 @slots 里边存传入的 block 里边的内容，键就是调用时的方法名，同时也是相应 slot 的名字。使用 method_missing 是为了能让这个 ComponentContext 可以被所有的组件复用，它可以接受任意的 slot。同时，因为这个类只用于保存 slot 的值，所以使用 method_missing 的副作用也就没那么大了。

新建 app/helpers/components_helper.rb ，内容如下：

module ComponentsHelper

  # Usage:
  #
  # <%= modal id: "modalExample", title: "A simple modal example" do |m| %>
  #   <% m.with_body do %>
  #     <span>Modal content</span>
  #   <% end %>
  #
  #   <% m.with_footer do %>
  #     <button type="button" class="btn btn-primary">OK</button>
  #     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  #   <% end %>
  # <% end %>
  #
  def modal(id:, title:)
    yield component_context = ComponentContext.new(self)
    render "components/modal", id:, title:, **component_context.slots
  end
end

我们可以把需要的组件都放在这个 helper 里边，不过你也可以根据自己的需求决定 helper 方法的位置，毕竟 Rails 中的 helper 是没有命名空间这个概念的。

新建 app/views/components 文件夹

mkdir app/views/components

新建 app/views/components/_modal.html.erb:

<%# locals: (id:, title:, with_body:, with_footer:) %>

<div id="<%= id %>" class="modal fade" tabindex="-1"> <!-- 1. id -->
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><%= title %></h5> <!-- 2. title --> 
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <%= with_body %> <!-- 3. with_body -->
      </div>
      <div class="modal-footer"> 
        <%= with_footer %> <!-- 4. with_footer -->
      </div>
    </div>
  </div>
</div>

这个就是我们的组件模板了，id 和 title 是常规的变量，而 with_body 和 with_footer 就是我们的 slot 了，我们在给 slot 传值的时候也要使用相同的名字。

修改 app/views/home/show.html.erb 的内容为：


<div class="p-5">
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
  </button>

  <%= modal id: "exampleModal", title: "Example modal" do |m| %>
    <% m.with_body do %> <!-- 这里我们给 with_body 这个 slot 传值 -->
      <span>Modal content</span>
    <% end %>

    <% m.with_footer do %> <!-- 这里我们给 with_footer 这个 slot 传值 -->
      <button type="button" class="btn btn-primary">OK</button>
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    <% end %>
  <% end %>
</div>

启动服务：

$ bin/dev

打开浏览器，访问 http://localhost:3000/home/show ，点击按钮，可以看到模态框按照我们预想中的呈现了

总结

在实现 slot 这个功能的过程中，我们使用了 Rails 里边的 helper 和 partial，并且定义了一个名为 ComponentContext 的类来作为 helper 和 partial 中间的桥梁，最终实现了我们期望的效果

Turbo 8 beta 版放出来了

Ian — Mon, 27 Nov 2023 20:10:39 +0800

morph 功能的演示，感觉相当不错啊

Strada 发布了～

Ian — Thu, 21 Sep 2023 21:23:49 +0800

详情：https://strada.hotwired.dev

写了一个打印数据库表结构的 Gem

Ian — Mon, 20 Feb 2023 22:48:49 +0800

之前查看表结构的方式一直都是使用的 annotate 这个 gem，但是将表结构作为注释嵌入在模型里感觉不是很好，而且字段多的时候看起来不太舒服。所以想着能不能在 console 里边打印表结构，然后就有了这个 gem: table_inspector

大概的用法是：

TableInspector.scan [model_class]

输出结果类似：

更多用法写在 README 里边了： https://github.com/otorain/table_inspector

腾讯云的 k8s 集群 tke 开始收费了

Ian — Wed, 23 Feb 2022 19:32:24 +0800

之前看到腾讯云的集群托管 master 节点不收费，所以就买了个 worker 节点建了个，还打算拿来练练手，还没几天就开始要收费了，最低 0.13 元/小时

这操作不是第一次了，去年内网负载均衡不收费改成 0.2 元/小时，公网负载均衡从 0.02 元/小时涨到 0.2 元/小时

真的是怕了，不过有一点腾讯云还是做的不错的，退费还是挺方便的。

社区的手机版页面好像没有找到搜索按钮

Ian — Thu, 17 Feb 2022 00:48:24 +0800

RT，想搜点啥的时候没找到...

Ruby 3.1.0 Preview 1 Released

Ian — Tue, 09 Nov 2021 23:43:46 +0800

YJIT merged，目前是实验性功能。默认禁用，使用 --yjit 开启
添加了语法糖{x: x, y: y} 可写为 {x: , y: }
One-line pattern matching，也就是像{ a: 1, b: 2 } => {a: , b: } 不再是 experimental 的了

其他的自己可以看看官网 https://www.ruby-lang.org/en/news/2021/11/09/ruby-3-1-0-preview1-released

大家对新发布的 mbp 有啥看法

Ian — Tue, 19 Oct 2021 21:23:21 +0800

感觉乔布斯的棺材板快压不住了

Rails 有没有什么好用的 markdown 编辑器

Ian — Mon, 19 Apr 2021 23:08:33 +0800

搜了一下 github，好像没什么比较好的 markdown 编辑器，前几个星星都比较少。因为自己博客（wordpress）用的是 editor.md 这个编辑器，所以对这个编辑器比较有好感，但是用 rails 引入又碰了一鼻子的灰，加上这个编辑器又有两年没更新了，issue 也有四百多个，所以想问下大家有没有什么好点的 markdown 编辑器推荐的，最好对 rails 友好一点

关于 Rails 6 设置 cookie same site 为 None 的问题

Ian — Wed, 07 Apr 2021 15:24:28 +0800

因为前端 axios 请求 Rails api 登录时（登录标识使用 cookie），响应头提示 This Set-Cookie was blocked because it had the "SameSite=Lax" attribute but come from a cross-site response whith was not the response to a top-level navigation。

google 得出的结论是要把 "SameSite=Lax" 改为 "SameSite=None" ，但是我试了几个方法都不管用：

在 config/application.rb 里边添加一行 config.action_dispatch.cookies_same_site_protection = :none ，结果无效
在 config/initializers/session_store.rb 里边设置 same_site: :none

结果运行时报错，提示

ArgumentError (Invalid SameSite value: :none):

rack (2.0.8) lib/rack/utils.rb:260:in `add_cookie_to_header'
actionpack (6.0.1) lib/action_dispatch/middleware/cookies.rb:439:in `block in make_set_cookie_header'
actionpack (6.0.1) lib/action_dispatch/middleware/cookies.rb:437:in `each'
actionpack (6.0.1) lib/action_dispatch/middleware/cookies.rb:437:in `inject'
actionpack (6.0.1) lib/action_dispatch/middleware/cookies.rb:437:in `make_set_cookie_header'
actionpack (6.0.1) lib/action_dispatch/middleware/cookies.rb:423:in `write'
actionpack (6.0.1) lib/action_dispatch/middleware/cookies.rb:653:in `call'

想请教下应该怎样设置 Same-Site

登录的 api 是用 grape api 写的，rails 使用 docker 部署，使用 nginx 做转发，session_store 使用的是 cache_store，但是我改为 cookie_store 也没有用

环境：

ruby 2.6.6
rails 6.0.1
grape 1.5.1