”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > Hacktoberfest 周深入探讨代码贡献

Hacktoberfest 周深入探讨代码贡献

发布于2024-11-01
浏览:444

Hacktoberfest Week Diving Deeper into Code Contributions

大家好!今年的 Hacktoberfest 怎么样?就我个人而言,到目前为止我真的很享受。我们现在已经进入 10 月的第二周,这意味着是时候提出完成挑战所需的四个拉取请求 (PR) 了。本周,我决定进一步推动自己,为项目的代码库做出贡献,而不是像第一周那样只关注文档。

第一周回顾

在 Hacktoberfest 的第一个 PR 中,我致力于改进项目文档。作为一个初学者,我想通过较小的、可管理的任务来轻松进入这个过程。然而,在第二周,我决定做一些更具技术性的事情:为 GitExplorer 项目做出贡献。

项目概述:GitExplorer

GitExplorer 是一个 Web 应用程序,可简化顶级 GitHub 存储库的发现和探索。它允许用户根据编程语言、主题和其他排序标准来过滤存储库。虽然 UI 仍在开发中,但该项目为贡献者(尤其是初学者)提供了宝贵的学习机会。存储库中的许多问题都被标记为“好第一个问题”,使其成为一个很好的起点。

为了做出贡献,我选择实现一个导航功能,以增强浏览存储库时的用户体验。

确定问题

该项目最初有一个用于导航到存储库下一页的按钮,但它缺乏完整的分页系统。用户无法轻松地在页面之间来回导航或跳转到特定页面,这带来了可用性问题。我注意到了这个限制,并要求项目维护人员将问题分配给我。

在我从事该项目期间,突出的一个方面(但不是很好)是代码库的结构方式。该项目将所有逻辑写入单个 script.js 文件中,随着项目的增长,该文件可能会变得难以维护。虽然我不想在此 PR 中进行重大更改(因为它仅关注分页按钮),但我计划建议在未来的问题中重构代码结构。

实际上,在此之前,还有另一个开发人员创建了一个导航到下一页的按钮,但是当他们想要来回导航以及特定页面时,这对用户体验不好。由于这个原因,我评论要求维护者为我分配这个问题。
当我从事这个项目时,有一点我不喜欢它。这是维护者构建代码库的方式,因为他将每个逻辑仅写入 1 个 script.js 文件。但是,我不想对此问题进行太多修复,因为它只要求分页按钮。我将创建一个新问题,要求稍后重新构建代码库。

新功能:增强分页

现有功能只有一个按钮可以在页面之间导航,每页显示 10 个存储库。我的目标是实现一个更加用户友好的分页系统,其中包含“上一页”、“下一页”和编号页面按钮。这将允许用户直接跳转到他们感兴趣的页面,使导航体验更加流畅。

执行

GitHub API 约束

在实现分页时,我遇到了 GitHub API 的限制,它将结果限制为 1,000 个项目。如果搜索生成超过 1,000 个存储库,则尝试超出此限制会导致错误,并返回未定义的数据。鉴于设计每页显示 10 个存储库,我将页数限制为 100 以避免遇到此问题。

代码更改

  • 我在 script.js 中引入了一个新的

    部分用于分页。这使我能够添加一些 CSS 样式来改善按钮美观和用户体验。
  • 分页的核心逻辑被封装在两个新函数中:

    • createButton()
    • renderPagination() 这些函数根据可用页面动态生成分页按钮并应用样式来禁用当前页面按钮,防止用户意外地重新单击它。我还为按钮添加了悬停效果,以获得更精美的外观。
  • CSS 改进

    对于分页设计,我确保当前页面按钮被禁用,并以不同的样式来指示其状态。其他页面按钮获得悬停效果,以增强交互性并改善用户体验。

    结论

    我对 Hacktoberfest 第二周的贡献就到此结束。我现在正在寻找下周可以贡献的另一个存储库。理想情况下,我希望找到一个更具挑战性的项目,这样我就可以继续鞭策自己并逐步提高我的技能。

    感谢您的阅读,我期待分享更多有关我的 Hacktoberfest 之旅的信息!

版本声明 本文转载于:https://dev.to/anhchienvu/hacktoberfest-week-2-diving-deeper-into-code-contributions-12g1?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 对象拟合:IE和Edge中的封面失败,如何修复?
    对象拟合:IE和Edge中的封面失败,如何修复?
    To resolve this issue, we employ a clever CSS solution that solves the problem:position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)...
    编程 发布于2025-03-15
  • 我可以将加密从McRypt迁移到OpenSSL,并使用OpenSSL迁移MCRYPT加密数据?
    我可以将加密从McRypt迁移到OpenSSL,并使用OpenSSL迁移MCRYPT加密数据?
    将我的加密库从mcrypt升级到openssl 问题:是否可以将我的加密库从McRypt升级到OpenSSL?如果是这样,如何?答案:是的,可以将您的Encryption库从McRypt升级到OpenSSL。可以使用openssl。附加说明: [openssl_decrypt()函数要求iv参...
    编程 发布于2025-03-15
  • PHP阵列键值异常:了解07和08的好奇情况
    PHP阵列键值异常:了解07和08的好奇情况
    PHP数组键值问题,使用07&08 在给定数月的数组中,键值07和08呈现令人困惑的行为时,就会出现一个不寻常的问题。运行print_r($月份)返回意外结果:键“ 07”丢失,而键“ 08”分配给了9月的值。此问题源于PHP对领先零的解释。当一个数字带有0(例如07或08)的前缀时,PHP将...
    编程 发布于2025-03-15
  • 为什么我的CSS背景图像出现?
    为什么我的CSS背景图像出现?
    故障排除:CSS背景图像未出现 ,您的背景图像尽管遵循教程说明,但您的背景图像仍未加载。图像和样式表位于相同的目录中,但背景仍然是空白的白色帆布。而不是不弃用的,您已经使用了CSS样式: bockent {背景:封闭图像文件名:背景图:url(nickcage.jpg); 如果您的html,css...
    编程 发布于2025-03-15
  • 如何干净地删除匿名JavaScript事件处理程序?
    如何干净地删除匿名JavaScript事件处理程序?
    删除匿名事件侦听器将匿名事件侦听器添加到元素中会提供灵活性和简单性,但是当要删除它们时,可以构成挑战,而无需替换元素本身就可以替换一个问题。 element? element.addeventlistener(event,function(){/在这里工作/},false); 要解决此问题,请考虑...
    编程 发布于2025-03-15
  • 大批
    大批
    [2 数组是对象,因此它们在JS中也具有方法。 切片(开始):在新数组中提取部分数组,而无需突变原始数组。 令ARR = ['a','b','c','d','e']; // USECASE:提取直到索引作...
    编程 发布于2025-03-15
  • 为什么Microsoft Visual C ++无法正确实现两台模板的实例?
    为什么Microsoft Visual C ++无法正确实现两台模板的实例?
    The Mystery of "Broken" Two-Phase Template Instantiation in Microsoft Visual C Problem Statement:Users commonly express concerns that Micro...
    编程 发布于2025-03-15
  • 哪种方法更有效地用于点 - 填点检测:射线跟踪或matplotlib \的路径contains_points?
    哪种方法更有效地用于点 - 填点检测:射线跟踪或matplotlib \的路径contains_points?
    在Python Matplotlib's path.contains_points FunctionMatplotlib's path.contains_points function employs a path object to represent the polygon.它...
    编程 发布于2025-03-15
  • 为什么PYTZ最初显示出意外的时区偏移?
    为什么PYTZ最初显示出意外的时区偏移?
    与pytz 最初从pytz获得特定的偏移。例如,亚洲/hong_kong最初显示一个七个小时37分钟的偏移: 差异源利用本地化将时区分配给日期,使用了适当的时区名称和偏移量。但是,直接使用DateTime构造器分配时区不允许进行正确的调整。 example pytz.timezone(...
    编程 发布于2025-03-15
  • 如何使用组在MySQL中旋转数据?
    如何使用组在MySQL中旋转数据?
    在关系数据库中使用mySQL组使用mySQL组进行查询结果,在关系数据库中使用MySQL组,转移数据的数据是指重新排列的行和列的重排以增强数据可视化。在这里,我们面对一个共同的挑战:使用组的组将数据从基于行的基于列的转换为基于列。 Let's consider the following ...
    编程 发布于2025-03-15
  • 如何在JavaScript对象中动态设置键?
    如何在JavaScript对象中动态设置键?
    在尝试为JavaScript对象创建动态键时,如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正确的方法采用方括号: jsobj ['key''i] ='example'1; 在JavaScript中,数组是一...
    编程 发布于2025-03-15
  • 可以在纯CS中将多个粘性元素彼此堆叠在一起吗?
    可以在纯CS中将多个粘性元素彼此堆叠在一起吗?
    [2这里: https://webthemez.com/demo/sticky-multi-header-scroll/index.html </main> <section> { display:grid; grid-template-...
    编程 发布于2025-03-15
  • Android如何向PHP服务器发送POST数据?
    Android如何向PHP服务器发送POST数据?
    在android apache httpclient(已弃用) httpclient httpclient = new defaulthttpclient(); httppost httppost = new httppost(“ http://www.yoursite.com/script.p...
    编程 发布于2025-03-15
  • 为什么我会收到MySQL错误#1089:错误的前缀密钥?
    为什么我会收到MySQL错误#1089:错误的前缀密钥?
    mySQL错误#1089:错误的前缀键错误descript [#1089-不正确的前缀键在尝试在表中创建一个prefix键时会出现。前缀键旨在索引字符串列的特定前缀长度长度,可以更快地搜索这些前缀。了解prefix keys `这将在整个Movie_ID列上创建标准主键。主密钥对于唯一识别...
    编程 发布于2025-03-15
  • 为什么不使用CSS`content'属性显示图像?
    为什么不使用CSS`content'属性显示图像?
    在Firefox extemers属性为某些图像很大,&& && && &&华倍华倍[华氏华倍华氏度]很少见,却是某些浏览属性很少,尤其是特定于Firefox的某些浏览器未能在使用内容属性引用时未能显示图像的情况。这可以在提供的CSS类中看到:。googlepic { 内容:url(&#...
    编程 发布于2025-03-15

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3