Join Us For the First DEV Community Bug Smash! HTML is stripped from runkit source #1228 Code blocks get breaks added between each line #1446 Modal appears under the navbar #13195 Tag "taggings_count" are not always updated correctly #6586 Error in date display on comment #7561 "Follow back" button has no text in notification at times #6377 Incomplete surrogate-key cache invalidation logic #6417 Error when submitting a comment on a recently deleted post #6610 Runkit - indentation in the first line of a block #4948 users' profile photos are not showing on the dockerized installation #4955 Left-To-Right-Override, invisible unicode chars #4969 Keep getting notifications on previous email address #11494 Themes (aka Dark Mode) not respected on first page loads #12455 "Unable to load Comment Subscription component" #12545 Comment box not shrinking on submit #13298 Refactor `/search/chat_channels` endpoint #13277

2025-06-04

加入我们,参加第一届 DEV 社区 Bug Smash!

HTML 从 runkit 源中剥离 #1228

代码块在每行之间添加换行符 #1446

模态框出现在导航栏下方 #13195

标签“taggings_count”并不总是正确更新 #6586

评论日期显示错误 #7561

“关注回来”按钮有时在通知中没有文字 #6377

不完整的代理键缓存失效逻辑 #6417

在最近删除的帖子上提交评论时出错 #6610

Runkit - 块第一行的缩进 #4948

用户的个人资料照片未显示在 dockerized 安装中 #4955

从左到右覆盖,不可见的 Unicode 字符 #4969

继续接收有关先前电子邮件地址 #11494 的通知

主题(又名黑暗模式)在首页加载时不受尊重 #12455

“无法加载评论订阅组件” #12545

评论框在提交时不会缩小 #13298

重构 `/search/chat_channels` 端点 #13277

Team Forem 很高兴与大家分享我们的第一个社区 Bug Smash 的消息!

加入我们,参与这场 DEV 范围的合作,旨在改进 Forem 存储库,鼓励社区做出更多贡献,并在此过程中享受乐趣。🐛

细节

它是什么?

DEV 社区 Bug Smash 挑战我们社区的成员解决 Forem 代码库中的一个(或多个!)预定错误,换取开源社区的参与、符合条件的贡献者的限量版个人资料徽章和贴纸包!

Bug Smash 什么时候上线?

我们的首届 Bug Smash 活动将于今天(2021 年 5 月 4 日)至 5 月 28 日举行。我们计划在月底评估整体体验,以便将来再次举办此活动或可能立即延长该活动。

谁可以参加?

Bug Smash 面向社区中所有有意参与的人士开放。我们bug smash为所有符合条件的问题添加了通用标签,同时,我们将其中一些问题细分为以下两个不同的类别,以帮助您选择最适合您经验水平的 Bug。

我会在哪里消灭虫子?

在 Forem 代码库中!
在 Bug Smash 中,您将bug smash在我们的代码库中处理带有(您猜对了)标签的问题(点击此处查看完整列表)。我们在下方“符合条件的 Bug 示例”中列出了其中一些问题。任何未带有标签的问题bug smash均不属于DEV 社区 Bug Smash 的范畴。

我为什么要参加?

理由太多了!如果你是新手开发者,DEV 社区 Bug Smash 活动是让你在 GitHub 上练习解决问题的好机会。如果你经验更丰富,这项活动也是一个绝佳的机会,可以帮助你熟悉和热爱的社区(DEV!),同时帮助 Forem 工程团队解决他们目前可能无力解决的问题。

最好的部分?我们将向提交bug smashPR 并获得批准的任何人颁发限量版 DEV 个人资料徽章和贴纸包。

TL;DR:更环保的 GitHub 贡献历史、社区情谊和酷炫的奖励😎


如何参与,分步说明

  1. 请阅读我们的Forem 贡献指南,了解贡献指南、规则以及与我们代码库相关的礼仪。此外,请重新阅读我们的行为准则,了解彼此相处的总体要求。
  2. 根据您的经验水平,通过评论来声明标有的问题。bug smash
  3. 如果您已被指派处理该问题,我们的团队将向您发送确认通知。如果该问题已被处理,我们会回复并建议您处理其他问题
  4. 一旦您被分配了一个错误,请创建一个拉取请求(PR)(不要忘记链接到原始问题!)
  5. 在您为所指派的 Bug 提交拉取请求 (PR) 后,我们的团队会通知您该 Bug 是否获得批准。一旦获得批准 (🎉),请使用此模板在 DEV 上撰写一篇关于您所修复 Bug 的反思帖子!
  6. 在 DEV 上找到另一篇名为devbugsmash 的帖子,并留下评论或提问!请保持鼓励、友善和协作的态度。
  7. 完成第 1-6 步后,我们会与您联系,告知您如何获取贴纸包。届时,我们还会颁发徽章。

注意:无论您消灭多少个虫子,我们只会为每个参与者颁发一枚徽章和一包贴纸。

提前感谢您在 DEV 上发布 Bug Smash 帖子后的耐心等待。Forem 工程团队规模虽小,但实力雄厚,我们会集中精力审核 Bug Smash 的 PR。

符合条件的 Bug 示例

这是您可以消除的虫子的不完整预览!

第一个问题中的错误

以下是一些非常适合早期职业开发人员和学习编码的人的问题。

HTML 从 runkit 源中剥离 #1228

描述错误HTML 被错误地从 runkit 代码块中剥离。

复制

  1. 点击WRITE A POST
  2. 粘贴到正文中:
{% runkit %}
const { ValueViewerSymbol } = require("@runkit/value-viewer");

const myCustomObject = {
    [ValueViewerSymbol]:{
        标题:“我的第一个观众”,
        HTML:“ <marquee> 🍔Hello , World ! 🍔 </marquee> 
    }
};
{% endrunkit %}
Enter fullscreen mode Exit fullscreen mode
  1. 点击SAVE POST
  2. 查看 runkit 中的代码(错误地)翻译为:
const { ValueViewerSymbol } = require("@runkit/value-viewer");

const myCustomObject = {
    [ValueViewerSymbol]:{
        标题:“我的第一个观众”,
        HTML:“🍔Hello, World!🍔”
    }
};
Enter fullscreen mode Exit fullscreen mode

预期行为代码预计保留<marquee>标签。

附加信息我可以通过编码我的 HTML 来欺骗解析器。

这有效:

{% runkit %}
const { ValueViewerSymbol } = require("@runkit/value-viewer");
const atob = require('atob-lite')

const myCustomObject = {
    [ValueViewerSymbol]:{
        标题:“我的第一个观众”,
        HTML: atob('PG1hcnF1ZWU+SGVsbG8sIFdvcmxkITwvbWFycXVlZT4=')
    }
};
{% endrunkit %}
Enter fullscreen mode Exit fullscreen mode

奇怪的是,这不起作用:

{% runkit %}
const { ValueViewerSymbol } = require("@runkit/value-viewer");

const myCustomObject = {
    [ValueViewerSymbol]:{
        标题:“我的第一个观众”,
        HTML:[“ < ”,“m”,“a”,“r”,“q”,“u”,“e”,“e”,“ > ”,“🍔”,“H”,“e”,“l”,“l”,“o”,“,”,“”,“W”,“o”,“r”,“l”,“d”,“!”,“🍔”,“ <”,“ / ”,“m”,“a”,“r”,“q”,“u”,“e”,“e”,“ > ”].join('')
    }
};
{% endrunkit %}
Enter fullscreen mode Exit fullscreen mode

因为它(错误地)导致了这样的结果:

const { ValueViewerSymbol } = require("@runkit/value-viewer");

const myCustomObject = {
    [ValueViewerSymbol]:{
        标题:“我的第一个观众”,
        HTML:[“”,“🍔”,“H”,“e”,“l”,“l”,“o”,“,””,“”,“W”,“o”,“r”,“l”,“d”,“!”,“🍔”,“”].join('')
    }
};
Enter fullscreen mode Exit fullscreen mode

代码块在每行之间添加换行符 #1446

描述错误。代码块有时会在每行之间添加换行符。您可以在Flutter 一个月回顾<br>中的某个代码块中看到它。这似乎与代码块后面的标题有关。

复制

创建新帖子,输入以下 markdown 并点击“预览”。

~~~
function hello() {
  console.log('hello');
}
~~~

~~~
function goodbye() {
  console.log('goodbye');
}
~~~

# header

预期行为

代码块中每行代码之间不应该有任何空行。

截图

# header不包含时的正确显示:

2019-01-02 14-17-11 的截图

# header包含时显示不正确:

2019-01-02 14-17-00 的截图

桌面(请填写以下信息):

  • 操作系统:Ubuntu 18.10
  • 浏览器:
    • Chrome 72.0.3626.28
    • Firefox 64.0

附加背景信息

只有当标题位于代码块之后时,才会出现显示中断的情况。如果我将标题移动到代码块之间或之前,就不会出现显示中断的情况。我使用的是编辑器的 v2 版本,尚未使用 v1 版本进行测试。


模态框出现在导航栏下方 #13195

描述错误

文章左侧三个点触发的模式似乎卡在了网站的导航栏下方,完全无法阅读。

复制

提交文章后,发布前。点击文章左上角的三个点。模态框会显示出来,但部分内容隐藏在导航栏后面。

预期行为

模态框应该完整显示,以便查看所有链接。它可以显示在导航栏下方,也可以显示在导航栏上方。

截图

图像

桌面(请填写以下信息):

  • 操作系统,版本:MacOS Catalina 10.15.7
  • 浏览器版本:Chrome 版本 88.0.4324.192(官方版本)(x86_64)

附加上下文按钮 id="article-show-more-button"

常见错误

如果您在软件开发和 GitHub 工作方面有更多经验,您可能需要查看以下几个问题

标签“taggings_count”并不总是正确更新 #6586

描述错误

每个标签都有一个关联taggings_count,其中包含与其关联的项目的数量(在我们的例子中是文章或列表)。

问题在于数据库中的一些计数不正确。

我通过玩 Tags API 发现了这一点,它返回taggings_count按降序排序的标签

例如:

  1. archlinux根据 API(https://dev.to/api/tags)显示,archlinux 是第三大常用标签,但这不太可能。它的标签页面(https://dev.to/t/archlinux)列出了 50 篇文章,即使算上所有可能用到它的条目,也显得不合逻辑。
  2. https://dev.to/api/tags?per_page=15显示它比devops 页面devops更受欢迎,showdev但devops 页面包含 2917 篇文章,showdev 页面包含 3110 篇文章。同样,我认为没有足够的标签列表来解释差异devops

因此,出现了错误。

该计数器由acts-as-taggable-on gem自动管理。

预期行为

我希望计数器能够反映出已标记的正确物品数量。

我认为有两种可能的解释:

  1. 我们的设置存在错误,与使用指南有关
  2. 它与标签别名有关(?)
  3. 这个 gem 本身有个 bug。我找到了一些问题单,或许能帮我们找到这个方向:

评论日期显示错误 #7561

描述错误

评论上的日期标签是“4 月 27 日”,但悬停时显示的文本是“2020 年 4 月 28 日,星期二,00:01:19”。

在 HTML 中,日期时间内容是2020-04-27T22:01:19Z 🤔

复制

悬停此评论的日期

预期行为

标签上的日期和悬停时的日期应该相同。

截图

图像

图像

桌面(请填写以下信息):

  • 操作系统:Xubuntu
  • 浏览器:Firefox
  • 版本:75.0

“关注回来”按钮有时在通知中没有文字 #6377

描述错误:当有人关注我时,我会收到一条通知,其中包含“关注回我”按钮。但在某些情况下,该按钮没有任何文字。因此,我不清楚该按钮的功能。

复制

  1. 前往“通知”
  2. 找到“$USER 关注了你”通知
  3. 如果按钮中的“FOLLOW BACK”文本可见,请刷新并检查。

注意:我知道这些步骤并非重现问题的理想方法,但很遗憾,我只有这些步骤。我不确定在哪些情况下文本可见,哪些情况下文本不可见。但如果需要,我很乐意提供相关信息。

预期行为:按钮上的“跟随”文字应始终可见。对我来说,它仅在随机时间可见。按钮上没有文字的概率更高。

截图 图像

桌面(请填写以下信息):

  • 操作系统:Windows
  • 浏览器:Firefox/Chrome
  • 版本:73.0.1/80.0.3987

不完整的代理键缓存失效逻辑 #6417

目前,我们使用代理键来确定何时应该清除某些端点的缓存,例如这样的文章 API 端点……

set_surrogate_key_header Article.table_key, @articles.map(&:record_key)

然后我们调用article.purge它,神奇地使任何具有该文章的端点的record_key边缘缓存过期。

有关代理键的更多信息...

https://docs.fastly.com/en/guides/getting-started-with-surrogate-keys

上述逻辑的问题在于,如果文章应该成为该端点的一部分,即使创建了缓存也不会清除。因此,除非另一篇符合上述条件的文章@articles被清除,否则它不会出现在该端点上。这使得确定它何时会被收录变得有点随机。

article.purge是一种创建使用适当代理标头的清除 ping 的神奇方法。

解决这个问题的方法可能是像这样的代理键......

set_surrogate_key_header Article.table_key, "tag-index-endpoint-#{tag}", @articles.map(&:record_key)

然后,当有新文章需要清除时(例如purge("tag-index-endpoint-#{tag}"创建文章时),我们会发出特定的清除调用。

我们目前的情况并没有导致任何根本错误的行为,而且“随机”清除工作正常,但我们在进行更大的改变时应该对此进行调查。


在最近删除的帖子上提交评论时出错 #6610

描述错误

按照电子邮件中的链接,尝试回复评论,收到错误There was an error in your markdown: undefined method ID' for nil:NilClass',评论未发布。

复制

按照电子邮件中的链接,尝试回复评论。

预期行为

评论已发布。

截图

图像

桌面(请填写以下信息):

  • 操作系统:MacOS 10.15.3
  • 浏览器:Chrome 80.0.3987.87

Runkit - 块第一行的缩进 #4948

描述错误

文本块的第一行不能缩进。

复制

  1. 创建新帖子
  2. 添加以下内容,确保所有行都缩进。
{% runkit %}
    console.log('BAD CODE')
    console.log('OK CODE')

    // BAD COMMENT
    // OK COMMENT
{% endrunkit %}
  1. 保存帖子

预期行为

RunKit 嵌入中的所有行都应缩进。

截图

图像

桌面(请填写以下信息):

  • 操作系统:Windows 10 Pro
  • 浏览器:Opera
  • 版本:65

附加背景信息

https://dev.to/tomaszrydzewski/runkit-indentation-2n9c-temp-slug-526549?preview=b14fe31c6205719176ea1eb56003f5a280d576a6c6e235a8587e6669eef1c45774687968a6bb6b677f09c7fc6a84289a59ceeb548b7d896fe1e94793


用户的个人资料照片未显示在 dockerized 安装中 #4955

描述错误按照docker 指南进行安装并访问本地托管的应用程序后,用户的个人资料照片没有显示。

web_1        | Cannot render console from 172.20.0.1! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
web_1        | GET /uploads/user/profile_image/6/7a1aba89-1d79-486f-8c82-ab7a8f8a58c2.png completed with 404 Not Found in 0.677355ms
web_1        | Cannot render console from 172.20.0.1! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
web_1        | GET /serviceworker.js completed with 304 Not Modified in 15.124716ms

复制

1- 按照docker 指南进行安装。2- 访问 127.0.0.1:3000

预期行为

截图

1- 12- 23-3

桌面(请填写以下信息):

  • 操作系统:Ubuntu 18.04
  • 浏览器:firefox
  • 版本:70

智能手机(请填写以下信息):

  • 设备:
  • 操作系统:
  • 浏览器:
  • 版本:

附加背景信息


从左到右覆盖,不可见的 Unicode 字符 #4969

描述错误看起来目前我们可以使用“U+202D”(从左到右覆盖)和其他不可见的 Unicode 字符创建帖子

这是帖子

复制

  • 复制 U+202D Unicode 字符
  • 创建新帖子并将标题设置为 U+202D 字符
    • 与标签、规范 URL 和系列相同。

预期行为不应该允许那些不可见的 Unicode 字符

截图 图像

桌面(请填写以下信息):

  • 操作系统:Windows 7 64位
  • 浏览器:Chrome
  • 版本:

我还从这里复制粘贴了其他上下文字符http://emptycharacter.com/


继续接收有关先前电子邮件地址 #11494 的通知

描述错误如果您更改个人资料中的电子邮件地址,即使您确认了新地址,您仍会继续收到有关先前地址的电子邮件通知

复制

  1. 前往“设置 > 个人资料”
  2. 在“用户”部分下,更改电子邮件
  3. 打开发送到新地址的电子邮件并点击“确认我的帐户”
  4. 查看错误 -> 继续在之前的地址获取电子邮件通知

预期行为确认新电子邮件地址后,所有电子邮件通知都应发送到该地址,而不是之前的地址

桌面(请填写以下信息):

  • 操作系统,版本:Linux Mint 19.3
  • 浏览器,版本:78.0.1(64位)

主题(又名黑暗模式)在首页加载时不受尊重 #12455

描述错误

首次打开 Dev.to(包括移动设备和桌面版)或首次访问新区域(例如从主页进入仪表盘或开始新文章)时,会显示默认主题。此主题会持续刷新几次页面,然后才会显示我选择的主题(夜间主题)。

复制

  1. 打开私人/隐身浏览器窗口
  2. 登录
  3. 显示默认主题(而不是设置中的主题)

预期行为

登录后将显示设置中选择的主题。

截图

登录后的第一个屏幕:屏幕截图 2021-01-27 上午 10:09

设置页面(登录前始终设置为夜间主题):屏幕截图 2021-01-27 上午 10:09:21

桌面(请填写以下信息):

  • 操作系统,版本:macOS Catalina 10.15.7
  • 浏览器,版本:Vivaldi 3.4.2066.90(稳定频道)(x86_64)

智能手机(请填写以下信息):

  • 设备:三星 Note 10+
  • 操作系统,版本:Android 11.0
  • 浏览器,版本:Chrome 88.0.4324.93

“无法加载评论订阅组件” #12545

描述错误

图像

最近这种情况经常发生,但我不知道该如何复现。刷新页面后可以正常使用,但当我打开其他帖子时,它又坏了。

此外,控制台中还发生了以下情况:

图像

复制

参见上文。

预期行为

为了使该组件正常工作:)

截图

参见上文。

桌面(请填写以下信息):

智能手机(请填写以下信息):


评论框在提交时不会缩小 #13298

描述错误评论框随着您输入的内容而变大,但是当您按下提交时,它们会保持有内容时的大小。

复制

  • 转到帖子
  • 写一个长评论
  • 发表评论
  • 看到评论框还是很大。

预期行为我希望评论框缩小回到其原始大小。

截图 图像

桌面(请填写以下信息):

  • 操作系统,版本:Windows 10
  • 浏览器,版本:Chrome 89.0.4389.114

附加背景另一个小错误实际上不会造成任何危害。


重构 `/search/chat_channels` 端点 #13277

https://github.com/forem/forem/pull/13235中,我们重构了其/search/chat_channels工作方式,移除了“搜索”功能,并将其更像一个“过滤器”。正如 PR 中所述

你会注意到,我把所有东西都留在了 Search 命名空间里(路由、控制器和服务命名)。我最初打算把 chat_channels 从搜索中全部移除,因为它的行为更像是一个过滤器,而不是搜索。

然而,我发现有些 JS 组件正在使用这个端点作为“索引”。我开始重构所有内容,但很快就失控了,超出了此 PR 的预期范围。我还意识到,最好将所有内容保留在搜索命名空间中,这样以后我们重新搜索 Connect 时,体验会更流畅。

话虽如此,由于我们有 ChatChannelsController 和 ChatChannelMembershipsController,每个都有索引操作,我认为正确的做法是将这些 JS 组件移动到它们,这样我们就不会有多个控制器执行相同的操作。

此问题本质上是更新前端的所有 JS 组件,使其使用新重构的端点,该端点位于比 更合适的位置(即ChatChannelMembershipsControllerChatChannelsControllerSearchController。此问题完成后,chat_channels操作将不再存在于 中SearchController,而新的端点应该能够处理 JS 组件执行的任何“过滤”和“索引”操作。

完整列表请点击此处


我们非常高兴看到您的贡献!我们的团队感谢您的合作以及您对改进我们代码库的投入💖

如果您是第一次提出拉取请求,我们建议您查看以下一些资源:

附言:除了少数例外,Forem 团队支持现实世界的实体虫子,我们绝不容忍破坏它们!#TakeSpidersOutside

文章来源:https://dev.to/devteam/join-us-for-the-first-dev-community-bug-smash-3plm
PREV
加入我们,参加下一届前端挑战赛:十二月版!
NEXT
加入我们的 DevCycle 功能标志挑战赛:奖金 1,000 美元!