Welcome back to another Repo Recap. Normally, we cover the previous week's contributions to dev.to's repository and the iOS repo. This week, we'll be covering January 20 to February 2.

Features

• Thanks to @rhymes for reordering the followed tags page in your dashboard to be sorted by descending weight, popularity, and ascending name (in that order).

  • Link to PR

• Thanks to @kyleboe, you can now embed Spotify into your posts and comments!

  • Link to PR Here's an example:

{% spotify spotify:episode:5V4XZWqZQJvbddd31n56mf %}

• Thanks to @davefollett for adding the initialpath and module options to the CodeSandbox embed! Check out the PR for more details.

  • Link to PR

• You can now mute notifications for your own articles and comment threads you've commented on! More details in the changelog post and PR:

  • Mute Notifications for Article PR
  • Mute Notifications for Comments PR

New Feature: Mute Notifications

Andy Zhao (he/him) for The DEV Team ・ Jan 24 '19

#changelog #meta

• @ben added the writing streak badge, as well as the algorithm to reward you automatically! Check out the PR and the changelog post below. Badge thanks to @liana!
  • Link to PR

New badge coming soon: 4 Week Streak

Ben Halpern for The DEV Team ・ Jan 4 '19

#meta #rails #contributorswanted #writing

• Thanks to @link2twenty refactored the StackBlitz Liquid tag, and added the ability to choose a default view along the way!

  • Link to PR

• Thanks to @juanmanuelramallo for adding the ability to convert :colon: emojis in Markdown!

  • Link to PR

• We launched a (closed) beta version of comment templates for post! This will allow you to have a post with a prefilled comment template for people to use. Thanks to @aspittel and @ben for getting it out!

  • Link to PR

• Thanks to @rhymes for activating the eslint-plugin-jsx-a11y! This will lint a11y issues on the fly for us.

  • Link to PR

Bug Fixes / Other Contributions

• @link2twenty continues the work of adding CSS variables for the dark theme:

  • Add --theme-container-color

• Thanks to @lightalloy for refactoring the stories view, which is the main way we handle most pages.

  • Link to PR

• @ben made several improvements to our caching logic. Check out the PRs below if you're interested in how we improve our performance:

  • Modify cache keys which have low hit rate
  • Cache collection so it doesn't have to be re-fetched
  • Remove article collection area caching
  • Add a couple cache optimizations and query guards
  • Modify side stickies and comment.rb caching/touching
  • Add additional home page caching
  • Modify sidebar cache
  • Modify cache keys for well-trafficked views
  • Modify cache key for article-sticky-nav-articles
  • Modify cache on home page

• @kenbellows fixed an issue where the default tab of the CodePen Liquid tag was not parsing properly. Thanks, Ken!

  • Link to PR

• @archiet added two Mastodon instances to the allowed list. Thanks @archiet!

  • Add "bsd.network"
  • Add "101010.pl"

• @aspittel fixed a bug with typing in the v2 editor's tag field. Thanks, Ali!

  • Link to PR

• @mariocsee fixed a small CSS issue with large screens. Thanks. Mario!

  • Link to PR

• @vinistock upgrade Rubocop, our Ruby linter and style guide gem, and fixed a few offenses along the way. Thanks @vinistock!

  • Link to PR

• @link2twenty refactored the initializeUserSidebar file. Thanks, Andrew!

  • Link to PR

• @mariocsee fixed an issue in Connect where the width of the containers would jump. Thanks, Mario!

  • Link to PR

• @lightalloy also added erb_lint to our pre-commit hooks to check for .html.erb (HTML with embedded Ruby) template files. Thanks, Anna!

  • Link to PR

• Code spans now work properly! You should be able to use double backticks to render a single back tick code example. For example: a JS template literal: `cool ${beanFlavor}`

  • Link to PR

• @gregbrimble corrected the front end validations for profile fields to match our back end max length validation. Thanks, Greg!

  • Link to PR

• @rhymes fixed a small bug with comment templates where the notorious undefined would show up. Thanks, @rhymes!

  • Link to PR

• @nickytonline upgraded our husky config. Thanks, Nick!

  • Link to PR

• We've updated our issue level to be more intuitive. This is mostly internal vocabulary, but feel free to check it out:

  • Link to PR

• @seanmfox corrected some grammar and punctuation in 'Getting API Keys for Dev Environment' documentation. Thanks, Sean!

  • Link to PR

• @rhymes added default locale to i18n fallbacks. Thanks, @rhymes!

  • Link to PR

• @aligoren fixed an issue where long lines don't wrap bug in a person's profile. Thanks, @aligoren!

  • Link to PR

• @jess updated a bunch of our internal tooling. Thanks, Jess!

  • Fix Banisher Updates
  • Adds internal/articles input to update author
  • Delete User Functionality
  • Unsubscribe deleted/banished user from Mailchimp newsletters
  • Fix conditional so super admins can ban older spammers
  • Fix /admin tag moderator update
  • Clear profile cache on banish

New Issues and Discussions

• @prathaprathod requested a feature for logging in with Google via OAuth. Thanks @parthaprathod!

Add google login #1595

prathaprathod posted on Jan 20, 2019

Hi , dev team

I am using dev.to community and this website is superb and i need feature add google authentication people who doesn't havd twitter or github those people login through google or add email and password

I hope this feature will consider

View on GitHub

• @ben raised the issue of reducing the number of queries for comments on article show page.

Reduce queries for comments on article show page. #1606

benhalpern posted on Jan 21, 2019

Describe the bug Our worst-case scenario on article show pages is an n+1 problem. We do a fair amount of caching and we have a somewhat efficient approach to not make literally every query. But still, we do extra queries on some requests, and when a page with a lot of comments gets loaded cold, it can be a big outlier in performance.

To Reproduce Create an article in development and add a bunch of comments at different levels. You should see lots of queries happen.

Expected behavior A single query should be enough to load all the comments into memory. All comments that belong to an article have a commentable_id of that article, even sub-comments. We use the ancestry gem to handle the tree logic.

Since we can grab all the comments that would be part of the tree with a single query, we should be able to only ever make a single comments query and then work on that set from there.

I think the solution would be something along these lines:

https://stackoverflow.com/questions/32207398/how-to-perform-eager-loading-on-model-descendants-using-rails-and-ancestry

Thanks!

View on GitHub

• @zcdunn raised the discussion of whether or not the Mastodon label is correct or not. Feel free to chime in:

Incorrect label for profile field #1607

zcdunn posted on Jan 21, 2019

Describe the bug The profile field 'Mastodon URL' is incorrectly labeled.

To Reproduce Steps to reproduce the behavior:

1. Go to 'Settings'
2. Scroll down to 'Mastodon URL'
3. See label

Expected behavior The label should be more general, e.g. 'Fediverse URL' or 'Fediverse Handle'.

Additional context Mastodon is only one software that connects to the network known as the 'Fediverse'. Others include Pleroma, Micro.blog, Microblog.pub, Friendica, Osada, Hubzilla, and Kroeg. See fediverse.network or fediverse.party for more info.

View on GitHub

• @ben requested a feature where we support CodePen Prefill Embeds. Details in the issue:

Support Codepen Prefill Embeds #1620

benhalpern posted on Jan 21, 2019

Is your feature request related to a problem? Please describe. As a user I'd like to be able to embed codepen snippets without having to leave my DEV editor context. Codepen has a cool new feature which supports this:

https://blog.codepen.io/2019/01/17/introducing-prefill-embeds/

Describe the solution you'd like I imagine this would work similarly to how we do the runkit tag.

Something like

{% codepen %}
this is the code
{% endcodepen %}

We get something like that, we'd wrap it with the right html tags as the blog post specifies. I imagine the tag could know the difference between {% codepen appropriate_id %} and the kind with the executable body, similar to how Runkit already works with preamble.

Related, I believe the issue with Runkit not working properly in comments is still going on. Could be simultaneously investigated. https://github.com/thepracticaldev/dev.to/issues/1163

For info on how to work with liquid tags: https://docs.dev.to/liquid-tags/

View on GitHub

• @jess made note of some Delayed Job errors we've been having:

Delayed Job Errors #1621

jessleenyc posted on Jan 22, 2019

Describe the bug

We're seeing this type of error pop up while executing delayed jobs.

Delayed::PerformableMethod (id=#####) FAILED permanently with Delayed::DeserializationError: ActiveRecord::RecordNotFound

Can likely be recreated by deleting an article with lots of comments, anything that triggers a bunch of callbacks.

View on GitHub

• @sabatesduran requested a feature where we have a reading position indicator. Thanks, @sabatesduran!

Reading position indicator #1626

sabatesduran posted on Jan 22, 2019

Is your feature request related to a problem? This is not a problem but I find nice that you have this bar that tells you the amount of scroll left until the end of the article.

Describe the solution you'd like My solution is to add a progress bar inside the #top-bar in nav and depending in the current position of the scroll it will change the percentage of this progress bar. The idea will be also that the bar color is the same as the user profile color, in my case dark green.

How to see an example? (GIF at the bottom) I created this code snippet that you can add in the Chrome Dev Tools > Sources > Snippets, and execute it with Ctrl+Enter (at least in Linux), be aware that you need to be in a post/article page for this to work.

const addProgressBarCSS = () => {
  let css = document.createElement('style');
  css.type = 'text/css';
  css.innerHTML = `
    progress::-webkit-progress-bar {
      background-color: transparent;
    }

    progress::-webkit-progress-value {
      background-color: #0D4D4B;
    }

    progress::-moz-progress-bar {
      background-color: #0D4D4B;
    }
  `;
  document.querySelector("head").appendChild(css);
}

addProgressBarCSS()

let topBar = document.querySelector("#top-bar")
let articleElement = document.querySelector("article");

let readingBarElement = document.createElement("progress");
readingBarElement.id = "reading-bar";
readingBarElement.setAttribute("style", `
    width: 100%;
    position: absolute;
    height: 5px;
    top: 49px;
    bottom: 20px;
    left: 0;
    right: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent;
    color: #0D4D4B;
`);
readingBarElement.setAttribute("value", pageYOffset);
readingBarElement.setAttribute("max", articleElement.getBoundingClientRect().height);

topBar.appendChild(readingBarElement);

window.addEventListener('scroll', () => {
    let currentScrollPosition = pageYOffset;
    let readingBar = document.querySelector("#reading-bar");
    let article = document.querySelector("article");
    let articlePositions = article.getBoundingClientRect();
    let start = articlePositions.y;
    let end = articlePositions.height;

    if (currentScrollPosition >= end) {
        readingBar.value = end;
    } else if (currentScrollPosition > start) {
        readingBar.value = currentScrollPosition;
    } else {
        readingBar.value = 0;
    }
});

Screenshot andd GIF explanation Gif link

View on GitHub

• @rhymes noted that deleted posts still appear in the reading list. Thanks, @rhymes!

Deleted posts still appear in the reading list #1641

rhymes posted on Jan 24, 2019

Describe the bug

A deleted post appears in the reading list and I can't remove it manually.

To Reproduce Steps to reproduce the behavior:

A DEV user creates a post, someone else adds it to their reading list. The post's author deletes the post. The owner of the reading list still sees the post listed.

Expected behavior

A deleted post should be removed from the reading list.

Desktop (please complete the following information):

• OS: macOS
• Browser: Firefox
• Version: 65

Additional context

It might also be related to https://github.com/thepracticaldev/dev.to/issues/1061

View on GitHub

• @ben requested a feature search term autocomplete. There's a cool implementation by one person in the comments; check it out below:

Search term autocomplete #1643

benhalpern posted on Jan 24, 2019

Is your feature request related to a problem? Please describe. Users should be able to get suggested search terms as they type in the main site searchbar.

Describe the solution you'd like We want to show suggested search completions as users type. Once we have this, we could possibly augment it with suggestions for search results right in the dropdown. But what we don't want to do is only show results because we'd like the experience where users can jump to a dedicated results page with additional filters and a list to pick from, ala Google etc. I think if the autocomplete is full of results it will not be obvious that the next page might also be helpful.

Implementation:

We already have a component area for the search bar, and this functionality can be built on top of it there: app/javascript/src/components/Search. CSS for the nav bar is here: app/assets/stylesheets/top-bar.scss

Algolia is currently made available globally outside the context of our componentized JS, so access the Algolia API similar to how we do in the tag autocomplete in the editor:

    const algoliaId = document.querySelector("meta[name='algolia-public-id']")
      .content;
    const algoliaKey = document.querySelector("meta[name='algolia-public-key']")
      .content;
    const env = document.querySelector("meta[name='environment']").content;
    const client = algoliasearch(algoliaId, algoliaKey);
    this.index = client.initIndex(`Tag_${env}`);

On the Ruby side of things, we have a SearchKeyword model we currently only use for a select few purposes, but this is the table we'd like indexed to display. We would need Algolia functionality added via algolia-rails, similar to how we do elsewhere.

This is the data we currently hold on that table:

    t.datetime "created_at", null: false
    t.datetime "google_checked_at"
    t.integer "google_difficulty"
    t.integer "google_position"
    t.string "google_result_path"
    t.integer "google_volume"
    t.string "keyword"
    t.datetime "updated_at", null: false

The Google info is just used for other details related to helping us determine keyword ranking. The "keyword" string is probably most important here.

In addition to this PR, we still have the additional outstanding element of improving functionality on the results page. That can be seen here:

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

View on GitHub

• @ben detailed a feature where we send positive notifications when you hit a new milestone:
  

  Milestone notifications #1647

  

  benhalpern posted on Jan 24, 2019

  • Your post just reached 100 reactions!
  • Your post just reached 1,000 views!
  • Etc.

  As a user I'd like to be notified at certain milestones. In terms of when to notify, I think it would be fun to do it in binary escalation.

  Maybe start notifying people at 64 reactions and then 128, 256, 512, 1,024 etc.

  For view counts, maybe start at 1,024 and work up from there.

  If the odd numbers are too weird, I still think doubling makes sense in terms of frequency. 1000, 2000, 4000, 8000, 16000 etc.

  This could be implemented as a script that gets run after reactions and/or page view update etc. and awards a milestone if the relevant one had rewards the relevant notification.

  This would be a complement to badges, which you can receive once for certain achievements. But this would exist only as a notification.

  </div>
  <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/thepracticaldev/dev.to/issues/1647">View on GitHub</a></div>
  

  
  

  
  
  

• @itsjzt requested a "Share on WhatsApp" button for posts. Thanks, @itsjzt!




Share on whatsapp for posts #1654



itsjzt posted on Jan 26, 2019

Currently we can share posts on Twitter, Reddit, linkedin, Facebook.

Can we have a share on WhatsApp option, WhatsApp have billion users and there will be a lot of people sharing dev.to posts on WhatsApp.

I would love to make that feature myself.

View on GitHub
• @pranayairan brought up the point that the /new post default template can be improved. Thanks, @pranayairan!

New post default template can be improved #1655



pranayairan posted on Jan 26, 2019

Is your feature request related to a problem? Please describe. I recently wanted to add a new post on dev.to, I went to https://dev.to/new and read the help section. I started with the title, tags etc. And I thought the description is the place to add details about my post. I added all details there. But when I clicked on Preview, I was able to see only the title of my post.

I was not able to figure out after trying multiple times on what needs to be done. I reached out to Practical Dev on twitter and after chatting with him, It clicked my that I might need to add those details below the --- line and top section is just metadata and description is not the place to put all your content.

Describe the solution you'd like I can think of 2 things, that can help.

1. Put a sample example in the help, with a hello world text and everything that is possible.
2. Change the default template of the new post to include hello world text below the --- line to let people know that content goes there.

Describe alternatives you've considered Nothing else, either of the above 2 options would work.

Additional context Example template :

---
title: 
published: false
description: 
tags: 
---
Content goes here !! 

View on GitHub
• @thomasbnt reported a bug when hovering over the "CTA" button in a post's right-hand sidebar. Thanks, @thomasbnt!

Hover the button on sidebar #1672



thomasbnt posted on Jan 28, 2019

Describe the bug The hover of the button in the sidebar is a little under pressure .

Link to the post of example

To Reproduce Hover the button.

Expected behavior No bug with the focus and hover.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 16.04
• Browser : Chrome
• Version : Version 71.0.3578.98 (Official Build) (64 bits)

View on GitHub
• @jess requested a feature where we add the tag moderators to sidebar of a tag page.

Add tag moderators to sidebar #1677



jessleenyc posted on Jan 28, 2019

Describe the solution you'd like It would be nice for people to know who the tag moderator(s) of each tag is. We can probably find a place for this on one of the tag sidebars.

View on GitHub
• @rasmusvhansen reported a bug where posts with multiple embedded gists have the order of the gists mixed up. Thanks, @rasmusvhansen!

Post with multiple embedded gists have order mixed up #1679



rasmusvhansen posted on Jan 29, 2019

Describe the bug On my post https://dev.to/rasmusvhansen/rxjs-transducer---harness-the-power-of-rxjs-operators-1ai8 I have 5 gists embedded in the page. I noticed that the order of the gists is not fixed. On some reloads, the first and e.g third gists are swapped.

Other users have also noticed this (see comments on post)

To Reproduce Steps to reproduce the behavior:

Note: It is kind of hard to reproduce. I saw it twice but cannot consistently reproduce.

1. Go to https://dev.to/rasmusvhansen/rxjs-transducer---harness-the-power-of-rxjs-operators-1ai8
2. Check order of gists
3. Reload and check if order is the same
4. Repeat step 3 until error occurs

Expected behavior Order of gists should be as specified in markdown, not random.

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

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 71

Smartphone (please complete the following information):

• Device: iPhone 6.1
• OS: iOS 12.1
• Browser Safari

View on GitHub
• @jahirfiquitiva raised an issue where the accessibility of code snippets could be improved, specifically the text size. Thanks, @jahirfiquitiva!

Improve accessibility of code snippets #1685



jahirfiquitiva posted on Jan 30, 2019

Describe the bug I find the code snippets slightly hard to read, and I, afaik, am not color-blind. I don't imagine how hard it could be for people who actually are.

To Reproduce Basically check any code snippet

Expected behavior Using colors that have a good contrast ratio.

Screenshots

Code snippet



Desktop (please complete the following information):

• OS: MacOS Mojave
• Browser: Chrome
• Version: 72.0.3626.81

View on GitHub
• @giorgosk reported an issue where a post might appears as a related post in the 4-post-related area. Thanks, @giorgosk!

Post itself appears as related post on the 4-post-related area #1697



GiorgosK posted on Jan 31, 2019

Describe the bug Its not a bug per se but I just noticed on this post that the same post appears as a related post for itself.

To Reproduce Try visiting the specific article using the URL above. Perhaps its not reproducible as the next time I visited the URL from a different browser the post was in a different position of the 4-post area.

Expected behavior Perhaps the space would be better used for actual related post

Screenshots

View on GitHub
• @deyshin raised the discussion that the "Following / Not Following" status icon is confusing. Thanks, @deyshin!

Following / Not Following status icon is confusing #1701



deyshin posted on Jan 31, 2019

Is your feature request related to a problem? Please describe. During the signup process, suggested people to follow had + mark next to them. Selecting them changed it to a check mark. To me, personally, opposite status of + is -, and opposite of checked is unchecked. It took me more than enough to make a decision of my own to say what is selected and what is not.

Now I realized that all the profile pages follow the same pattern of + and checked. Can we reconsider this design choice?

Describe the solution you'd like I think it should either be +, - pair or check, unchecked pair. Also, + being san serif, while the check mark is serif style is a bit confusing as well.

Describe alternatives you've considered Just get used to it? Profile page doesn't seem confusing since it says following right next to the icon. It still is confusing unless otherwise noted though.

Additional context n/a

View on GitHub
• @aracki raised the discussion of how to improve dev.to's SEO. Thanks, @aracki!

Dev.to better site ranking (SEO)? #1707



Aracki posted on Feb 01, 2019

I notice dev.to is gaining more and more popularity for devs, but Medium articles still has a lot better rankings on search engines.

What can be done in order to boost site ranking of dev.to?

View on GitHub
• @aligoren raised the discussion of whether or not external links should open in new tab. Thanks, @aligoren!

Add user settings for how external links open #1716



aligoren posted on Feb 02, 2019

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

Some posts like this contain external links. When you're reading an article you click an external link. Before you finish reading the article, you are redirecting to the external link.

If you aren't using a browser extension, this could be a bad experience for you.

Describe the solution you'd like

I'm not good at Ruby. Perhaps this can be easily handled in Ruby. But as I said, I don't have any experience with Ruby. So, my solution will be with Javascript.:

const linksOpenNewTab = () => {
    const links = document.querySelectorAll("#article-body a")
    
    Array
        .from(links)
        .filter(filteredLink => !filteredLink.href.includes(window.location.href))
        .forEach(link => {
            link.setAttribute("target", "_blank")
            link.setAttribute("rel", "noopener noreferrer")
        })
}


linksOpenNewTab()

Describe alternatives you've considered

I've no any idea. But there should be many solution in Rails.

View on GitHub

That's it for the past two weeks! Thanks for reading!