DEV Community

loading...
Cover image for dev.to Repo Recap from the Past Two Weeks
The DEV Team

dev.to Repo Recap from the Past Two Weeks

andy profile image Andy Zhao (he/him) ・7 min read

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

{% spotify spotify:episode:5V4XZWqZQJvbddd31n56mf %}
Enter fullscreen mode Exit fullscreen mode

  • @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!
  • Thanks to @link2twenty refactored the StackBlitz Liquid tag, and added the ability to choose a default view along the way!

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

  • 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!

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

Bug Fixes / Other Contributions

New Issues and Discussions

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

Add google login #1595

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

  • @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

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!

  • @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

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.

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

Support Codepen Prefill Embeds #1620

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/

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

Delayed Job Errors #1621

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.

Reading position indicator #1626

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;
    }
});
Enter fullscreen mode Exit fullscreen mode

Screenshot andd GIF explanation Gif link

image

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

Deleted posts still appear in the reading list #1641

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

  • @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

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}`);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

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

    Milestone notifications #1647

    • 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>
    
    Enter fullscreen mode Exit fullscreen mode



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


  • Share on whatsapp for posts #1654

    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.

    New post default template can be improved #1655

    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 !! 
    
    
    • @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

    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 bug_css_devto_28012019

    Desktop (please complete the following information):

    • OS: Ubuntu 16.04
    • Browser : Chrome
    • Version : Version 71.0.3578.98 (Official Build) (64 bits)
    • @jess requested a feature where we add the tag moderators to sidebar of a tag page.

    Add tag moderators to sidebar #1677

    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.

    Post with multiple embedded gists have order mixed up #1679

    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

    Improve accessibility of code snippets #1685

    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 captura de pantalla 2019-01-29 a la s 9 39 41 a m

    captura de pantalla 2019-01-29 a la s 9 42 28 a m captura de pantalla 2019-01-29 a la s 9 41 50 a m captura de pantalla 2019-01-29 a la s 9 41 27 a m

    Desktop (please complete the following information):

    • OS: MacOS Mojave
    • Browser: Chrome
    • Version: 72.0.3626.81
    • @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

    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 4-post-area

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

    Following / Not Following status icon is confusing #1701

    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. image image

    Additional context n/a

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

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

    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?

    • @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

    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()
    Enter fullscreen mode Exit fullscreen mode

    Describe alternatives you've considered

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

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

Discussion

pic
Editor guide
Collapse
Collapse
rhymes profile image
rhymes

Thank you Andy for setting up these posts! I'm sure it takes more than a minute to track all changes, summarize the contributions and write the post! 💪

Collapse
andy profile image
Andy Zhao (he/him) Author

It does take a while! I'm glad you enjoy reading it :) I'll be posting how I do it soon, especially because I've FINALLY automated it! It took me a while to get around to doing it, but I'm really glad I did.

Thread Thread
link2twenty profile image
Andrew Bone

Yes, I'd noticed the recap issues 😉

Collapse
deyshin profile image
Daniel Shin

I did not expect to be recognized. Fill little childishly happy to be recognized :D
Thank you for putting this together!

Collapse
sleeve profile image
Steve Morris

Wow, I love this! Every team should do this!

Collapse
thomasbnt profile image
Thomas Bnt

Thanks you for recap! 🙌

Collapse
itsjzt profile image
Collapse
aligoren profile image
Ali GOREN

Thank you, Andy. I’m so happy because being part of the dev contributor.

Collapse
somedood profile image
Basti Ortiz (Some Dood)

Oh, wow. That's a lot of contributors compared to the previous weeks. This is great!

Collapse
andy profile image
Andy Zhao (he/him) Author

Yeah it's great. Big turnout for these two weeks!

Collapse
itsasine profile image
ItsASine (Kayla)

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).

Woo! 🎉

Collapse
aligoren profile image
Ali GOREN

@andy , @ben , @rhymes , @jess

I need the advice to improve this project.

aligoren.github.io/dev-recap/

Repo Page: github.com/aligoren/dev-recap

This Vue project fetches issues and pulls requests of the current week using Github API.

I think it just needs UI improvement :)

Collapse
rhymes profile image
rhymes

Hi Ali, what kind of advice do you need? Do you have specific questions?

BTW There's no code nor I can see the website :D I can imagine you took it down between then and now

A little bit of advice: to maximise your chances to get fruitful answers from people on personal project is probably better if use this technique: "hey, i did this and that, but i was wondering if this other thing or that other thing would be better, what do you think?" or "i did this and that, i'm stuck on this line, do you have any ideas?"

Better yet if you submit it to the DEV community with a post, you never know who might have the answer you're looking for ;)

Good luck with your project in the meantime!

Collapse
aligoren profile image
Ali GOREN

Thanks, I republished the repo :)

I also published a discussion topic dev.to/aligoren/i-need-advice-for-...

Collapse
ben profile image
Ben Halpern

Damn, epic post Andy!