DEV Community

Cover image for Hacktoberfest Week Three — Thank you to our Contributors on Forem ❤️
Christina Gorton for The DEV Team

Posted on

Hacktoberfest Week Three — Thank you to our Contributors on Forem ❤️

It’s the third week of Hacktoberfest and we’re continuing to celebrate by highlighting the amazing people in our community who have contributed to Forem's codebase!

We’re thrilled to share that we’ve had over 11 contributors this week commit improvements across the many projects we have in our web, iOS, and Android apps 🎉

Thanks to the help of these wonderful contributors, we’ve merged 15 PRs this week. Forem is still a small team so this amount of feature-building and bug-squashing is truly only enabled because of the community.

As Forem grows, we intend to continue enabling the open source community to improve and expand our offerings with their invaluable help. We appreciate the contributors for helping us sow this open source commitment from day one.

If you are interested in contributing check out our post on Forem projects you can contribute to this Hacktoberfest.

In no particular order, here are the folks who made commits this week, their GitHub profiles, and their merged PRs.

Rachael Wright-Munn

Add twitch liquid tags #10577

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

Related Tickets & Documents

resolves #10475 Twitch Documentation on Embeds Dev.To docs on Liquid Tags

QA Instructions, Screenshots, Recordings

Please replace this line with instructions on how to test your changes, as well as any relevant images for UI changes.

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [ ] no documentation needed

James Cote

Remove code link style so it uses the default link color #10578

Coteh avatar
Coteh posted on

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [x] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

Currently, the link color for the code element within articles is very similar to the color for normal code elements, making it hard to distinguish what is a link and what isn't. My solution is to remove the style that defines code links, so that it falls back to default color for links.

Related Tickets & Documents

Fixes #9603

QA Instructions, Screenshots, Recordings

Screenshots (changes outlined in red box)

Before Screen Shot 2020-10-04 at 2 46 33 PM

After Screen Shot 2020-10-04 at 2 43 40 PM

Steps

Make an article with the following content:

<a href="https://www.php.net/manual/en/function.system.php"><code>system()</code></a>

<code>system()</code>

[`My Example`](https://example.com/)

First and third elements should have the blue link color (or whatever --link-brand-color var is set to) The second element should be black color (assuming --color-body-color was not changed by the tester)

edit: Additional test case:

putting this in an article:

`My Example`

should still render default black color for code elements.

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

Brunno Souza

Refactoring user_controller separating some classes to service #10384

What type of PR is this? (check all applicable)

  • [X] Refactor
  • [ ] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

Remove some methods at controllers/admin/users_controllers.rb to solve a codeclimate issue: over than 20 methods

Related Tickets & Documents

https://github.com/forem/forem/issues/3739

Added tests?

  • [X] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [X] no documentation needed

alt_text


&

Move method #approved_liquid_tags to user service #10663

What type of PR is this? (check all applicable)

  • [X] Refactor
  • [ ] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

Move a method used at articles_controller to a service.

Related Tickets & Documents

https://github.com/forem/forem/issues/3739

Please replace this line with instructions on how to test your changes, as well as any relevant images for UI changes.

Added tests?

  • [X] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [X] no documentation needed

[optional] What gif best describes this PR or how it makes you feel?

alt_text

Drew Bragg

Return if receive own message #10618

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [x] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

If you have dev.to open in multiple tabs and you send a message in a chat channel you will get an unread notification in the other tabs for your own message. This PR fixes that by simply exiting from the receiveNewMessage callback early if the message received is your own (same user id).

Possible related refactoring: the receiveNewMessage function already had a few checks that I think were supposed to solve this exact issue but didn't. We may be able to adjust or remove them completely but I would want someone who is more familiar with this feature (preact & pusher) to look at it first and make sure I'm not messing something else up.

receiveNewMessage = (e) => {
    if (
      (window.location.pathname.startsWith('/connect') &&
        e.user_id === window.currentUser.id &&
        e.channel_type !== 'direct') ||
      window.location.pathname.includes(e.chat_channel_adjusted_slug)
    ) {
      return;
    }
    /// rest of function excluded
}
Enter fullscreen mode Exit fullscreen mode

Basically the function returns if the user: is already in the chat area ('/connect') AND is the same user that sent the message AND the message is for a non-direct channel. I don't see any reason why we wouldn't just return if the user is the same user that sent the message.

receiveNewMessage = (e) => {
    if (
      e.user_id === window.currentUser.id ||
      window.location.pathname.includes(e.chat_channel_adjusted_slug)
    ) {
      return;
    }
    /// rest of function excluded
}
Enter fullscreen mode Exit fullscreen mode

Related Tickets & Documents

Fixes issue #10606

Added tests?

  • [ ] yes
  • [ ] no, because they aren't needed
  • [x] no, because I need help

There aren't any tests for this particular utility yet and I don't fell confident enough to start a test suite from scratch.

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

Lito

feedback_message.message is required on backend but not required on view #10612

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [X] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

feedback_message.message is required on backend validation but not set as required on view https://github.com/forem/forem/blob/0ca4e8b3719995450cec0542ef50268b9bbc3e5c/spec/models/feedback_message_spec.rb#L19

QA Instructions, Screenshots, Recordings

Screenshot from 2020-10-05 18-00-47

Added tests?

  • [ ] yes
  • [X] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [X] no documentation needed

Andrew Bone

Add scroll to Anchor #10464

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [x] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

Anchors are not currently caught by the router

Related Tickets & Documents

closes #10234 Related to #10238

QA Instructions, Screenshots, Recordings

  • Go to this post
  • Click on case study link
  • See anchor be picked up

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

N/A

[optional] What gif best describes this PR or how it makes you feel?

alt_text


&

Change admin password in docs #10735

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [x] Documentation Update

Description

Update default admin password in documentation

Related Tickets & Documents

#10620

QA Instructions, Screenshots, Recordings

N/A

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

N/A

[optional] What gif best describes this PR or how it makes you feel?

enhance


&

Long text goes outside cards #10740

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [x] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

Add word-break to crayons-card this will allow words to be broken if the word is too long but will wrap normally otherwise.

Related Tickets & Documents

closes: #10629

QA Instructions, Screenshots, Recordings

forem__resize-bug

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

N/A

[optional] What gif best describes this PR or how it makes you feel?

fix it with love

Timothy Ng

Connect: Highlight @ mentions to logged in user #10216

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

This PR distinguishes between mentions to the logged in user and mentions to other users by wrapping @-mentions to the logged in user with <mark>.

Based on my understanding, it's not possible to wrap <mark> tags at the time the message's HTML is generated in models/message.rb. Because of this, we'll have to highlight the @-mentions on the client side.

The implementation in this PR makes this feature quite obscure but it happens to be the implementation with the fewest lines of changed code, so I just rolled with it.

Related Tickets & Documents

#9472

QA Instructions, Screenshots, Recordings

  1. Join a group chat
  2. Mention someone else, observe that their link is not highlighted.
  3. Mention yourself, observe that your link is wrapped with <mark>

Screenshot from 2020-09-04 21-39-33

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

Robin Gagnon

fix: Clear chat input after Enter key submit #10487

  • [x] Refactor
  • [ ] Feature
  • [x] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

The chat input value was handled and reset outside of the component. While that is not necessarily a problem, the auto resized Textarea component acted weird when the value was not "controlled" by the Textarea component.

The solution was indeed to hold a state inside the compose component, but also to make sure the only place where the input of the textarea is controlled was inside the component itself, and nowhere else.

Also in the PR:

  • Compose becomes a functional component, which made it easier to manage this particular state and props flow
  • Use 1 textarea instance for both add and edit mode

Related Tickets & Documents

Closes #10480

QA Instructions, Screenshots, Recordings

  • Open chat
  • Make sure the input is cleared when sent with the Enter key
  • Make sure the input is cleared when sent with the send button
  • Make sure the textarea is resized when the input overflows

All of the above should be true in edit mode as well.

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

The tests check for an empty textarea field after the following events:

  • Pressing Enter
  • Clicking Send
  • Clicking Save edit
  • Clicking Close edit

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

Manaswini

Remove tabindex of -1 on upload image input in the write a post editor #10543

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [ ] Bug Fix
  • [x] Optimization
  • [ ] Documentation Update

Description

In the "Write a post" editor, the "Upload Image" button is skipped while tabbing i.e. while navigating with a keyboard, making it inaccessible to keyboard users. This happens due to the tabindex of -1 set on the "Upload Image" input element. Removing it enables tabbing, thus solving the issue.

Related Tickets & Documents

Resolves #10521 (second part of the issue)

This article talks more about how a tabindex of -1 on HTML elements that need to be interacted with, makes them inaccessible to keyboard users

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

Christopher Wray

Add Section for Series/Collections #10719

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [x] Documentation Update

Description

I added a small section in this area of the docs to share some information about collections/ series.

There is not much information in the documentation about collections or series and I felt like this would be beneficial to others looking to help with the Series feature of the website.

Related Tickets & Documents

https://github.com/forem/forem/issues/9658

QA Instructions, Screenshots, Recordings

I am working on updating the series, but when I went through the docs, I didn't find any information on Series which is why I wanted to add this first.

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [x] readme
  • [ ] no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

No

[optional] What gif best describes this PR or how it makes you feel?

Happy

Rafal Trojanowski

Articles API: filtering by tags (#3654) #10614

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

Closes #3654

Related Tickets & Documents

QA Instructions, Screenshots, Recordings

Please replace this line with instructions on how to test your changes, as well as any relevant images for UI changes.

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [x] docs.forem.com
  • [ ] readme
  • [ ] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

Irmela

Allow glitch id starting with ~ #10544

What type of PR is this? (check all applicable)

  • [x] Bug Fix

Description

This PR improved the regex that is used to validate the glitch id to allow ids starting with ~. This PR improves the parse_id method to remove any prefixed ~ before passing it to the template.

Related Tickets & Documents

resolves #10427

QA Instructions, Screenshots, Recordings

Create a new blog post, add {% glitch ~the-super-tiny-compiler %} and save -> no validation error should appear.

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

Thanks again for improving both Forem and the broader open source community by participating in Hacktoberfest. Happy coding!

Top comments (7)

Collapse
 
graciegregory profile image
Gracie Gregory (she/her)

Great job to @chaelcodes , @coteh , @brunnohenrique , @drbragg , @lito , @link2twenty , @timorthi , @reobin , @thisismanaswini , @cwraytech , @rafaltrojanowski , and @irmela — and thank you from all of us here at Forem!

Collapse
 
reobin profile image
Robin Gagnon

Big week @link2twenty !

Collapse
 
link2twenty profile image
Andrew Bone

I didn't set out to do so many 😅

Collapse
 
coffeecraftcode profile image
Christina Gorton

You did great! We really appreciate it.
You are awesome

Collapse
 
lisasy profile image
Lisa Sy (she/her)

Thank you everyone!

Collapse
 
cwraytech profile image
Christopher Wray

Hey, thanks so much for the recognition! I love the cool little badge. (:

Collapse
 
dabjazz profile image
Yash_Jaiswal

Is matt here?? Matt is the best🙌🙌😂👨‍💻🙌