Replicating Reddit’s best feature on other forums

在其他论坛上复刻 Reddit 的最佳功能

The most underrated Reddit feature is the ability to mark an account as a “friend”. There’s no approval or notification or anything. You just hit a button and their username will light up any time you come across one of their posts or comments: Recognizing users is the difference between attending a party where you don’t know anyone and bumping your friends in a crowd. It goes a long way to making a site feel like a community, not just a bunch of people talking at each other.

Reddit 最被低估的功能就是将账号标记为“好友”的能力。这不需要对方批准，也不会有任何通知。你只需点击一个按钮，每当你看到该用户的帖子或评论时，他们的用户名就会高亮显示：识别用户就像是在参加聚会时，从“谁也不认识”变成“在人群中偶遇好友”。这对于让一个网站感觉像是一个社区，而不是一群人自说自话，有着巨大的作用。

It’s a simple feature and I’m always surprised other online communities like Lobsters and Tildes haven’t cribbed it. And, with the recent announcement that Tildes was officially in maintenance mode, it was time to implement this myself. In a world that feels increasingly inauthentic, making human connections online feels more important than ever.

这是一个简单的功能，我很惊讶像 Lobsters 和 Tildes 这样的在线社区竟然没有借鉴它。随着 Tildes 最近宣布正式进入维护模式，是时候由我自己来实现这个功能了。在一个感觉越来越虚假的世界里，建立在线人际连接显得比以往任何时候都更加重要。

User styles to the rescue! There’s a class of browser extension that let you apply custom CSS to any website (originating with Stylish, but there are lots of options today; I prefer Stylus). If we wrote styles that targeted links to the profile of any user we wanted to follow, then we could highlight them everywhere they appear on each site.

用户样式（User styles）来救场了！有一类浏览器扩展程序允许你为任何网站应用自定义 CSS（起源于 Stylish，但现在有很多选择；我更喜欢 Stylus）。如果我们编写样式来定位我们想要关注的用户的个人资料链接，那么我们就可以在他们出现的任何地方高亮显示他们。

So, I made a tool for exactly that! It’s called rolodex. It’s a little CLI that reads a toml file full of usernames:

# tildes.toml
users = [
  { username = "a-favorite-user" },
  # ...
]

and generates all the CSS needed to highlight when that user authors something:

/* THIS IS A GENERATED FILE */
/* Any manual changes will be overwritten */
.comment-header > a.link-user[href$="/a-favorite-user"],
.topic-info-source > a.link-user[href$="/a-favorite-user"],
.topic-full-byline > a.link-user[href$="/a-favorite-user"] {
  color: #ff4500;
}

所以我为此制作了一个工具！它叫 rolodex。这是一个小型命令行工具（CLI），它读取一个包含用户名的 TOML 文件，并生成所有必要的 CSS，以便在该用户发布内容时进行高亮显示。

Once you paste the file into Stylus, that user is highlighted as you browse: Right now, it works with Tildes and Lobsters, but I’ll likely add HN support as well.

一旦你将生成的代码粘贴到 Stylus 中，当你浏览时，该用户就会被高亮显示。目前它适用于 Tildes 和 Lobsters，但我很可能会增加对 Hacker News (HN) 的支持。

Build your own: This project started as a way to track these users lists for myself, but I realized pretty early that I wanted to separate my personal user list from the code responsible for processing it. To that end, I’ve also got a template repo with starter toml files and a little wrapper script to install the CLI, run the build, & copy the results: xavdid/rolodex-template

构建你自己的工具：这个项目最初是我为了追踪这些用户列表而创建的，但我很快意识到，我希望将个人的用户列表与处理它的代码分离开来。为此，我还准备了一个模板仓库，其中包含初始的 TOML 文件以及一个小型包装脚本，用于安装 CLI、运行构建并复制结果：xavdid/rolodex-template

We haven’t won yet: While this slightly cumbersome process is better than nothing, it does have some drawbacks:

• changing highlighted users means editing a local file, running a script, and uploading the result. That’s cumbersome at best and many users won’t bother at all.
• there are limited syncing options.
• mobile support isn’t great.
• reddit builds you a feed for all the posts / comments by users you follow. That doesn’t happen with pure CSS.

我们尚未完全成功：虽然这个略显繁琐的过程总比没有好，但它确实存在一些缺点：

• 更改高亮用户意味着需要编辑本地文件、运行脚本并上传结果。这充其量是很麻烦的，许多用户根本不会去折腾。
• 同步选项有限。
• 移动端支持不太好。
• Reddit 会为你构建一个包含你关注用户所有帖子/评论的订阅源。纯 CSS 无法实现这一点。

Nothing beats a native implementation, so if you’re building / maintaining a social network, please consider adding following as a feature!

没有什么比原生实现更好，所以如果你正在构建或维护一个社交网络，请考虑将“关注”作为一项功能添加进去！