今天启动我一个Rails App的时候遇到错误： connection to server at "::1", port 5432 failed: Connection refused Is the server running on that host and accepting TCP/IP connections? 看来是psql没有运行起来，或者是被谁shutdown了，执行 postgres -D /usr/local/var/postgres 出现以下提示 2022-02-11 20:29:45.999…
最近把打卡团服务器从Rails6升级到了Rails 7。其中一个改动是，将webpacker改成esbuild。改动本身其实并不难，将jsbunding-rails和 cssbundling-rails 两个gem加到Gemfile里面。 然后执行各自的install task，照着网上的一些教程基本上就能搞定，这里不作详细的赘述。 在这个过程中，因为某个依赖不支持Node 15，于是升级到了node 16。但是在部署的时候，遇到一个问题，报了一个错： In file included from /home/username/.cache/node-gyp/16.13.2/include/node/v8.h:30:0, from /home/username/.cache/node-gyp/16.13.2/include/node/node.h:63, from ../../nan/nan.h:58, from ../src/binding.cpp:1: /home/username/.cache/node-gyp/16.13.2/include/node/v8-internal.h: In function ‘void v8::internal::PerformCastCheck(T*)’: /home/username/.cache/node-gyp/16.13.2/include/node/v8-internal.h:492:38: error: ‘remove_cv_t’ is not…
时隔一年半，期待已久的Rails 6.1 终于发布了。趁着双休，给 GeekWeibo 从Rails6.0 升级到了6.1。 升级主要有三步。 一、升级Gemfile里面各个gem的版本 为了避免一些gem版本的不兼容，我先本地gem install rails把系统的rails版本升级到6.1。然后使用 rails new demo61 创建了一个新app叫demo61。接着对比 demo61/Gemfile 和 geekweibo/Gemfile 里面各个gem的版本号，相应的升级一下版本号。主要diff如下： 然后执行 bundle update。 二、执行 rails app:update 前几天才知道原来还有 rails app:update这个命令，用于app升级。执行一下，按照提示，相应的覆盖或忽略一些文件更新。执行完了之后，很多bin文件和config文件都更新了。同时会生成两个新的active_storage的migration file。一个是给 active_storage_blobs…
这两周给自己的开源项目极客微博加上了发微博带图片的功能（作为一个“微博”app，怎么能没有发图片微博的功能呢？）。没想到，做这个小功能的折腾程度，超出了我的预期。 其实如果是纯Rails MVC，那么给微博加上图片功能，简直不要太简单。后端两行核心代码： # tweet.rb has_many_attached :images # tweet_controller.rb params.require(:tweet).permit(:body, images: []) 然后前端相关的template 文件里面，相应的加上文件选择控件，和显示图片的相关代码就搞定了，毕竟ActiveStorage什么都帮你做好了。 可是极客微博前端用了Vue。发微博的时候，是通过前端发POST Ajax请求的方式发的，所以事情就变得复杂了。首先，你没有办法像文本字段一样，给json body加一个file字段，然后POST给后端。所以想要在前端用Ajax发请求上传图片，就剩下两种办法： 在前端先把图片上传到图片存储服务（我用的是阿里云OSS），拿到上传后的图片url，然后把url传给后端。 使用FormData。这是经过一些搜索，以及在微信群里面请教后，得到的方案。 我不是特别想使用第一种方式，原因有多个。其一，这种方式的实现成本不小，这个可以在Rails ActiveStorage的官方文档里面了解到。其二，这种方式的用户体验也不是很好，因为上传需要一个过程，如果上传的图片比较大的话，用户等待的时间就会有点长。先压缩再上传？那又增加了一点工作量。最后，如果用户想换一张图片的话，那之前的上传和等待就都浪费了。出于这几点考虑，我决定使用第二种方式。 但是使用FormData，其实就相当于使用表单提交的方式发请求。出于安全考虑，为了防止CSRF攻击，Rails默认需要验证表单提交的请求的CSRF token。在使用 form_for, form_with这些rails view helper构造表单的时候，rails会自动生成csrf tag field，然后在表单提交的时候，自动带上这个field。然而现在，我们的表单是自己构造的（记住这里，后面要考），不是使用Rails的view…
自从10月17日对外发布了自己的业余项“极客微博”以来，至今过去了两个星期。看了下GitHub的统计，这段时间共commit了刚好50次。 主要的一些更新如下。 生成分享图片 这是这段时间工作量最大的一个更新。你可以点击微博卡片右下角的分享按钮，来生成一张分享这条微博的图片。 点击后，出现一个预览界面 点击底部的下载图标，即可以下载这张分享的图片。 技术实现上，主要的方案是使用html2canvas这个library。遇到的坑非常多，比如说跨域啊，图片缓存啊，滚动条啊等等。后面会专门写一篇技术文章，来细说一下这个事情。总之，费了好大劲。 回复评论 现在，你可以通过点击某一条评论，来回复这条评论。如下面的动图演示：  回复出来的样式，现在设计的比较简单，主要是参考朋友圈的样式，没有做成树状的嵌套结构。 技术实现方面也比较简单。DB里面comments table加了一个parent_comment_id字段。然后通过Rails的has_many和belongs_to，自动就呼应上了。 用户默认头像 目前极客微博只支持通过GitHub登录。其实系统的设计是，当用户通过GitHub登录之后，会自动使用GitHub的头像。然而由于国内的网络原因，GitHub的头像不一定能下载成功。因为server端无法连接raw.githubusercontent.com这个域名。这就会导致很多用户登录之后，没有头像。 忘了在哪里看到的启发，后面决定使用用户昵称的第一个字符，来生成一个头像。效果如下： 技术上，使用的是ui-avatars这个服务。它可以根据你传的参数，自动的生成首字符的头像。比如https://ui-avatars.com/api/?name=创哥&length=1这个链接将返回 这样一张图像。 当然，你可以通过参数来控制很多样式，比如：背景颜色、字体样式（颜色、大小、粗细等）、图片大小、圆角等。非常不错的一个服务，推荐！ UI上面的优化 其他还有一些UI的优化，比如把右下角三个图标对齐。之前如果其他的微博有点赞、评论的数字的话，会跟它上面或下面的微博，对应的几个图标在垂直方向上不对齐。如下图所示： 现在把它对齐了。 类似的对齐问题发生在评论列表里面。评论列表里，评论作者的头像跟上方，发评论的form的左边界是对齐的，但是没有跟form里面，当前用户的头像对齐，如下： 后面让几个头像对齐了。 发布时间：本来在每条微博的左下角加上了发布时间，如下图所示。 但是后来觉得没有意义。（至少现阶段）很少有人会关注某一条技术微博是什么时候发布的，更多的是关注这条微博对自己是否有用，所以后面又去掉了。 技术侧 防止XSS 根据ruby-china上面@pynix大神的提醒，给极客微博加上了防止XSS攻击的处理。…
昨天把自己业余时间写的web app极客微博放出来之后，自己又点了好几次进去看。然而每一次都觉得很慢，有一次使用Chrome DevTools查看，居然花了30秒多，这无论如何也是无法接受的。刚开始以为是我家里的网络原因，换成4G之后，确实有所提升，打开速度大概在3秒作用。然后查看资源文件，发现最大的js bundle有200多KB： 这还是太慢了，于是使用Google PageSpeed Insights分析，并根据里面的几个建议调整了一下。目前，我自己使用Cmd+Shift+R（跳过缓存）试了几次，都可以算是“秒开”了。 Google PageSpeed Insights desktop速度也达到了100分 具体来说，只做了两件事情。 缩减图片的大小 根据Google PageSpeed Insights的提示，在展示一条微博的时候，geekweibo.com使用的是图片的原始尺寸： 我自己的头像达到500多K，这无疑增加了加载时间。 我的图片是放在阿里云OSS上面的，根据阿里云的api文档，加上自动裁剪的参数，就搞定： <img :src=“${tweet.user.avatar}?x-oss-process=image/resize,m_fill,h_100,w_100” /> 启用gzip压缩 在nginx config里面加上： location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { gzip_static on;…