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

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

Description

Add Twitch to the list of profile links. For implementation, I followed the pattern for other profile links to include twitch.

Related Tickets & Documents

Resolves #2505

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added to documentation?

• [ ] docs.dev.to
• [ ] readme
• [x] no documentation needed

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

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

Description

This commit adds timestamps to the comment and post notifications. Instead of using strftime and ordinalizing the date I decided to use the time_ago_in_words methods. I think that this looks better and is more accurate when it comes to notifications recently received. The final say is up to the main contributors though, if you would like me to change it back let me know.

Related Tickets & Documents

https://github.com/thepracticaldev/dev.to/issues/2010

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

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

Description

Disabled the no-console rule for a line where we use console.log to report errors.

Related Tickets & Documents

#2501, #1828

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added to documentation?

• [ ] docs.dev.to
• [ ] readme
• [x] no documentation needed

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

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

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

Description

Added a section on troubleshooting rbenv failing to install v. 2.6.1 of ruby. I haven't had the application running locally since Christmas (v. 2.5.1), so I ran rbenv install 2.6.1 only to get the following error:

ruby-build: definition not found: 2.6.1
See all available versions with `rbenv install --list'.                       If the version you need is missing, try upgrading ruby-build:

The update to the docs explains how to fix this. Feel free to change the wording as you see fit.

Added to documentation?

• [x] docs.dev.to
• [ ] readme
• [ ] no documentation needed

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

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

• [x] Refactor
• [x] Bug Fix

Description

A quick fix for the #2124 , since the #2213 takes a long time to merge This pr should fix creating notifications with empty json_data, the change is:

• make 1 create query on creating reaction notification instead of 2 (create + update)

Related Tickets & Documents

#2124

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

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

Description

I can't find a place where the gem fake_stripe is used, it has likely been completely replaced by stripe-ruby-mock but left behind.

Added to documentation?

• [ ] docs.dev.to
• [ ] readme
• [x] no documentation needed

• creation of welcome notification is in own service
• which is called by an active job

Resolves: #1996

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

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

Description

Move Welcome Notification to Active Jobs

Related Tickets & Documents

Issue #1996

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added to documentation?

• [ ] docs.dev.to
• [ ] readme
• [x] no documentation needed

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

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

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

Description

I was planning to upgrade ahoy_email to its latest version, which contains breaking changes, so I thought it would be better to make sure there were tests in place for mailer tracking before attempting to do so.

In the process I removed new_report_email and reporter_resolution_email because they have no templates associated and weren't used anywhere.

I also added .html_safe in the direct message email to display the actual HTML, not the tags.

The additions to the seeds.rb are so that the preview mailers don't fail on local, because the requirements for them to render were not present.

Added to documentation?

• [ ] docs.dev.to
• [ ] readme
• [x] no documentation needed

What type of PR is this?

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

Description

This commit updates the sidebar widget links to apply the appropriate theme color. This will prevent the links from being hard to read due to low contrast in night theme.

• Removed clear fix div
• Removed floating properties
• Added Flexbox properties to parent container
• Added media queries for screens smaller than 426px and adjusting styles accordingly
• Stretched and centered upload a video & sort select. Tested on Chrome and Firefox.
• Adjust sort select box's font-family according to other elements.

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

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

Description

I used Flexbox to fix the positioning issue since it was already used for other elements in the dashboard UI. The two element are stretched and centered on small screen devices which to me looked a lot better than being centered and occupying half the width of the screen. select element has been centered which works fine on Chrome and Firefox but it may not work on Safari or Edge.

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

How this fix looks on large screen

How it looks right after 426px breakpoint

How it looks before 426px breakpoint

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

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

Description

Small UI fix

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

• [x] Refactor
• [x] Bug Fix

Description

• added specs for BlackBox and FunctionCaller
• created an Aws::FakeClient not to make actual calls to the aws lambda in non-production enviroments I could use webmock or VCR to mock calls in the test environment, but the actual calls shouldn't be done in the dev environment as well.
• fixed the bug when nil was returned from the aws lambda function
• this pr also fixes the opening the /settings/membership page being logged in as the sustaining member in the dev environment

Related Tickets & Documents

#2524

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

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

Description

In #2157 followed organizations was added as a separate category to the following page but the count wasn't added to the total following count.

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Before:

After:

Added to documentation?

• [ ] docs.dev.to
• [ ] readme
• [x] no documentation needed

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

• [x] Bug Fix

Description

Issue described here: #2445

Currently, comments in the /readinglist?v=comments are loaded through initializeCommentsPage.js.erb. The method initializeCommentsPage() looks for an element with the ID comments-container with attributes data-commentable-id and data-commentable-type, but that element doesn't exist in the reading list page.

When looking at other pages with comments, they have an element like this:

<div class="comments-container" id="comments-container" data-commentable-id="23" data-commentable-type="Article">
...
</div>

That allows initializeCommentsPage() to attach the proper onClick listener to each comment reaction.

Currently experimenting how to go about solving this. Will update!

Update (4/22):

• adjusted how the reading list comments HTML is built by adding data-commentable-id=reading_list_ids and class and id equal to "comments-container" i.e. ->
  `
• adjusted initializeCommentsPage() method to handle parsing multiple ids as in the div above and had to scope the async request to get the proper reactions from each id
• by adding class="comments-container" the reading list comments have styles now
• comments have proper like count, reacted states and onclicklisteners and works how they should

Related Tickets & Documents

Resolves #2445

Mobile & Desktop Screenshots/Recordings (if there are UI changes)



Added to documentation?

• [x] no documentation needed

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

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

Description

If a spam account does not have an email address, do not try to unsubscribe them from mailchimp.

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

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

Description

The Rails server complains with a warning that there's a double initialization for the constant AWS_LAMBDA:

./config/initializers/aws_sdk.rb:1: warning: already initialized constant AWS_LAMBDA
./config/initializers/aws_sdk.rb:8: warning: previous definition of AWS_LAMBDA was here

This fixes it

Added to documentation?

• [ ] docs.dev.to
• [ ] readme
• [x] no documentation needed

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

• [x] Refactor

Description

Cleaning up after the #2542

• remove unused vcr cassette
• remove an empty constructor

Related Tickets & Documents

#2542

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

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

Description

I've noticed a statement like this during a review, I checked around and they seem to be copy and pasted in a few places but never used.

Added to documentation?

• [ ] docs.dev.to
• [ ] readme
• [x] no documentation needed

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

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

Description

As discussed in #2573 about with @jessleenyc I'm sending a small PR to remove some (already ignored) tests that were using Flipflop which has been since removed in https://github.com/thepracticaldev/dev.to/pull/1358 by @Zhao-Andy

Related Tickets & Documents

References #2573

Added to documentation?

• [ ] docs.dev.to
• [ ] readme
• [x] no documentation needed

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

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

Description

Sidebars don't update when users are merged. This should update the rails cache in these areas.

Is your feature request related to a problem? Please describe.

On the heels of Thoughts on migrating to TypeScript and improving the overall quality of the frontend DEV codebase, DEV Notes: Don't Forget To Clear Cache! and https://github.com/thepracticaldev/dev.to/issues/2499 I thought it'd be nice and useful if there was some kind of overview of how the frontend pieces (especially the JavaScript layer) all fit together.

I know there are two sets of JS code bases, the "legacy" in app/assets/javascripts managed by Rails's sprockets and the one in app/javascript managed by webpack.

Other than that I'm not sure how everything works (I admit I haven't spent much time in the frontend, other than the occasional bug fix or small feature).

A few questions that a docs/frontend/javascript.md might answer:

• How does initialization work?
• Is the Preact layer totally ignorant of the vanilla JS layer?
• Do the two JS code bases interact with/call each other?
• How are they attached to the template pages? Does each webpage serves two sets of packed/minified JS files?
• What does the service worker do in the context of dev.to? Is it registered on the whole page? Is there more than one?
• How does edge caching fit in all of this?
• How does instant click fit in all of this?

Plus anything else deemed important. It doesn't have to be super in depth, just a treasure map to know what does what and how everything fits together.

Describe the solution you'd like

A documentation file that contains a description of how the JS frontend works

Describe alternatives you've considered

I haven't considered alternatives TBH, the status quo is okay, it's just going to be easier for contributors if there's some onboarding documentation about the code base, especially if the goal is to refactor it, modernize it or even adapt with TypeScript or other solutions.

Describe the bug When on https://dev.to/new, if enough vertical space is occupied, you can use arrow keys to navigate cursor behind the navbar.

To Reproduce Steps to reproduce the behavior:

1. Go to https://dev.to/new
2. Add a few paragraphs of text (enough that you can scroll the "Title" input off the screen - Might I recommend https://www.lipsum.com/feed/html)
3. Scroll down as far as you can
4. click in the input and use the arrow keys to move cursor up and behind the navbar.

Expected behavior The navbar should not overlap the input box (and doesn't if page is refreshed without being saved).

Desktop (please complete the following information):

• OS: Windows & Chrome OS
• Browser: Chrome
• Version: 73.0.3683.88 (Official Build) (64-bit) [Chromebook] -- Not sure on windows, but should be most recent version.

As an organization, I can add a CTA to my sidebar. However, if I've previously published a post and I proceed to add a new CTA or update a previous one, it may not show up in my previous posts.

We might want something like:

class OrganizationsController
   # ... etc code
  def update
    organization = Organization.find(params[:id])
    ActiveRecord::Base.transaction do
      organization.update(org_params) # etc etc
      cb = CacheBuster.new
      organization.articles.pluck(:path).each { |path| cb.bust(path) }
    end
  end
end

Or we could add Rails.cache timestamps to the organization sidebar.

Describe the bug When editing a post within the v2 editor, the text within the save changes button spills out of the button.

To Reproduce Steps to reproduce the behavior:

1. Switch to v2 editor
2. Click Edit for an existing post or publish a post and then click edit
3. You will notice the save changes button below has the 'S' completely out of the button

Expected behavior Expected the save changes text wrapped within the button.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Chrome
• Version 73.0.3683.103

Additional context Add any other context about the problem or helpful links here.

Some of the Notifications::NewReactionJobs fail with Validation failed: User has already been taken on save! in the Notifications::Reactions::Send#call

Maybe it happens when a user creates several reactions on an article, several jobs are created, and those jobs run simultaneously.

Describe the bug Some sponsor images have a white background, which clashes with night theme and possible future themes. Viewers who use night theme to browse in darker environments may be bothered by the white background.

Though you can hide sponsors in settings/misc, I imagine that sponsor messaging fitting well with the styling would allow for a smooth experience while supporting the organizations that help DEV.

To Reproduce Steps to reproduce the behavior:

1. Set your settings/misc to night theme
2. Go to the home page
3. Look at sponsors portion

Expected behavior If the sponsors have them, ask for additional images (clear background or light text/dark background) that fits with night theme page (and other themes on the darker side). Swap sponsor images based on theme.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Sponsor image with white backgrounds stand out.

• OS: MacOS
• Browser Chrome
• Version 73

e.g.

$ curl https://dev.to/api/articles/101813
{"status":500,"error":"Internal Server Error"}

It is not clear whether this indicates that the content will be accessible later or if there is a genuine server error.

In Safari desktop (13 inches or greater, not sure what the pixel limit is) the article sidebar looks a bit off:

Safari

Chrome / Firefox

The most notable issues are that the buttons are less wide and the menu pops out further than Chrome / Firefox.

Is your feature request related to a problem? Please describe. Not a user problem, but more of a suggestion for a better developer experience. Fallbacks can be forgotten and no one likes typing more than they have to. 😉

Currently if adding themeable styling, you write it like so

  box-shadow: $bold-shadow; /* the fallback */
  box-shadow: var(--theme-container-box-shadow, $bold-shadow); /* modern css */

Describe the solution you'd like Consider using a SASS mixin to handle themeable style.

@mixin themeable(
  $property,
  $cssVariable,
  $fallback) {

  #{$property}: #{$fallback};
  #{$property}: var(--#{$cssVariable}, #{$fallback});
}

.some-class {
 @include themeable(box-shadow, theme-container-box-shadow, $bold-shadow)
}

would generate

.some-class {
  box-shadow: $bold-shadow;
  box-shadow: var(--theme-container-box-shadow, $bold-shadow);
}

Describe alternatives you've considered N/A

Describe the bug

I think the "recent comment activity" styling is a little off

To Reproduce Steps to reproduce the behavior:

1. Save an article with comments
2. Go to 'https://dev.to/readinglist?v=comments'
3. See the problem

Expected behavior

I think some spacing between the post title, the "VIEW COMMENT TREE" section and the actual comment is needed.

Screenshots

(Ignore the search bar in the middle, it's just an issue with the screenshotting tool)

Desktop (please complete the following information):

• OS: macOS 10.14.4
• Browser Firefox
• Version 67.0b12

Is your feature request related to a problem? Please describe. I love the idea of saving an article to read later, but the list grows fast and I can't keep up. The reason for saving articles is because they are interesting and I might not have time to read it thoroughly at that moment.

Describe the solution you'd like I reminder that works like a notification and asks me if I have (x minutes) free. Clicking on that reminder would take me to a saved article, with estimated reading time x minutes. I do from time to time have x minutes, but I'd probably just save more articles to the list if manually visiting dev.to Describe alternatives you've considered Increase my self-discipline.

Is your feature request related to a problem? Please describe.

This is how series work, they are a series of dots.

Describe the solution you'd like see on the left-hand side where I highlight in red. This would be more ideal because than I can publish a full course exclusively on DEV.to

Describe alternatives you've considered

Additional context

Describe the bug Most/all liquid tags render through markdown parser in the same preparation step articles/comments go through before saving and rendering. Content such as some code, HTML, etc. gets removed in the process, and methods are created to circumvent the parsing (typically using Regex). By using views to render liquid tags, we would not need such methods and methods that help with security can be imported and handled within the xyz_tag.rb.

Expected behavior Changing how liquid tags render -- from going through markdown parser and the same process as how an article/comment is rendered to separately rendering on html.erb view. There are a few open liquid tag related issues that will and may be solved by this refactor.

Liquid Tag Tracker

• [x] dev.to Comment #2554 merged
• [x] dev.to Article/Post #2619 merged
• [x] dev.to User #2621
• [x] dev.to Tag #2641 merged
• [x] StackBlitz #2664 merged
• [x] dev.to Podcast #2644
• [x] Twitter #2721
• [x] Runkit #2723
• [x] Youtube and Vimeo #2728
• [x] Repl.it
• [x] JS Fiddle
• [x] Codesandbox
• [x] Codepen
• [x] Instagram
• [x] Speakerdeck
• [x] Soundcloud
• [x] Spotify
• [x] Blogcast

I noticed that the sail is listed in the Gemfile but it's never actually used.

There's still a table:

https://github.com/thepracticaldev/dev.to/blob/a711e2246e7f4ca87afcd247a63d5f0f773836f8/db/schema.rb#L681-L689

but the route is not activated, nor there's any other code that references it.

I've checked the git history and I found these three commits:

1. Sail replaces FlipFlop: https://github.com/thepracticaldev/dev.to/commit/21870e805a5d1e11790bfc356b4c5c4ea817ba98 from https://github.com/thepracticaldev/dev.to/pull/841
2. The previous commit is reverted: https://github.com/thepracticaldev/dev.to/commit/06e0cbabbbf9a7f0517cabb532de3e5ebdd4d66c
3. FlipFlop is removed from the code: https://github.com/thepracticaldev/dev.to/commit/88cd4c13f31a1fd76002529c78835018a71d618f

To recap: currently there are a few references in the code of "Flipflop" though the gem is not present (mainly in skipped tests that should also probably be removed) and there's still the "sail" table in the database in addition to the gem.

If these are remnants from features that are never used I'd be happy to submit a PR to clean it up, but maybe DEV is using the Sail table externally.

Sometimes ExportJob fails with the following error:

--- !ruby/object:ActiveJob::QueueAdapters::DelayedJobAdapter::JobWrapper
    job_data:
      job_class: ExportContentJob
      job_id: some_id
      provider_job_id: 
      queue_name: export_content
      priority: 
      arguments:
      - id
      executions: 0
      locale: en

Last Error
    Toggle full message

    undefined method `new' for Articles:Module
    /app/app/services/exporter/service.rb:21:in `block in export'
    /app/app/services/exporter/service.rb:20:in `each'
    /app/app/services/exporter/service.rb:20:in `export'
    /app/app/jobs/export_content_job.rb:6:in `perform'

This is probably related to #2031 Inside the Exporter::Service there is a reference to Articles , which is resolved to an Articles module. But it should be resolved to Exporter::Articles.

Is your feature request related to a problem? Please describe. The app currently does not notify users that they have received a notification.

Describe the solution you'd like This seems to require combination of JavaScript injection and 3rd party service like Firebase. It should also allow user to change their notification preference.

Describe alternatives you've considered n/a

Additional context DEV's connect's message notification should be treated separately from a normal notification.

Describe the bug We use Web Share API to simplify sharing. It current works on browser but not in the app.

To Reproduce Steps to reproduce the behavior:

1. Open the app.
2. Click on any article.
3. Click on triple dot on lower right corner.
4. The Web Share API is not activated.

Expected behavior A clear and concise description of what you expected to happen.

Screenshots

Left: When WebShare isn't working. Right: When it is

Smartphone (please complete the following information):

• Device: OnePlus 6T
• OS: 9.0 "Pie"
• Version: 1.0

Additional context The pull request for the implementation

Current Behavior

If my default browser is Firefox and I attempt to sign in on the DEV Android app, it opens a new tab in the actual Firefox app that's waiting to be opened.

Expected Behavior

I should be able to properly go through the OAuth sign in flow with any browser.

Describe the bug Reported to yo@dev.to:

Found a bug, your adaptive icon has a no bueno background!

Ideally your background should be completely black and your foreground should be transparent with white DEV text. Otherwise when I shake the app on the home screen the attached happens, haha

Screenshots

f-droid is an open source alternative to the playstore. many users which don't want to install google play services or love open source software use it.

https://f-droid.org/en/docs/Submitting_to_F-Droid_Quick_Start_Guide/

UI bug MY READING LIST (EMPTY) text is clipped on the navigation menu in Pixel 2.

Steps to Reproduce

1. Open the app
2. Click on the top left hamburger button or swipe from the left edge of the screen to open the navigation menu
3. See screenshot section

Expected behavior Either the text show flow to the next line or set the text pixel size based on the device's scale factor.

Screenshots

Smartphone (please complete the following information):

• Device: Pixel 2
• OS: 9.0 "Pie"

Describe the bug The option to update the profile picture on the app is not responding.

To Reproduce Steps to reproduce the behavior:

1. Go to 'Settings/Profile Image'
2. Click on 'Choose File'
3. See error

Expected behavior The button does not respond.

Smartphone (please complete the following information):

• Device: [Tenor G by Amazon]
• OS: [e.g. 8.0 "Oreo"]