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).
-
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
initialpathandmoduleoptions to the CodeSandbox embed! Check out the PR for more details. -
You can now mute notifications for your own articles and comment threads you've commented on! More details in the changelog post and PR:
- @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
-
@link2twenty continues the work of adding CSS variables for the dark theme:
-
Thanks to @lightalloy for refactoring the
stories view, which is the main way we handle most pages. -
@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!
-
@archiet added two Mastodon instances to the allowed list. Thanks @archiet!
-
@aspittel fixed a bug with typing in the v2 editor's tag field. Thanks, Ali!
-
@mariocsee fixed a small CSS issue with large screens. Thanks. Mario!
-
@vinistock upgrade Rubocop, our Ruby linter and style guide gem, and fixed a few offenses along the way. Thanks @vinistock!
-
@link2twenty refactored the
initializeUserSidebarfile. Thanks, Andrew! -
@mariocsee fixed an issue in Connect where the width of the containers would jump. Thanks, Mario!
-
@lightalloy also added
erb_lintto our pre-commit hooks to check for.html.erb(HTML with embedded Ruby) template files. Thanks, Anna! -
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}` -
@gregbrimble corrected the front end validations for profile fields to match our back end max length validation. Thanks, Greg!
-
@rhymes fixed a small bug with comment templates where the notorious
undefinedwould show up. Thanks, @rhymes! -
@nickytonline upgraded our husky config. Thanks, Nick!
-
We've updated our issue level to be more intuitive. This is mostly internal vocabulary, but feel free to check it out:
-
@seanmfox corrected some grammar and punctuation in 'Getting API Keys for Dev Environment' documentation. Thanks, Sean!
-
@rhymes added default locale to i18n fallbacks. Thanks, @rhymes!
-
@aligoren fixed an issue where long lines don't wrap bug in a person's profile. Thanks, @aligoren!
-
@jess updated a bunch of our internal tooling. Thanks, Jess!
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:
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:
- Go to 'Settings'
- Scroll down to 'Mastodon URL'
- 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.
- @sabatesduran requested a feature where we have a reading position indicator. Thanks, @sabatesduran!
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;
}
});
Screenshot andd GIF explanation Gif link
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}`);
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:
-
@ben detailed a feature where we send positive notifications when you hit a new milestone:
Milestone notifications
#1647
benhalpern posted on- 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 onCurrently 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.
-
@pranayairan brought up the point that the
/newpost default template can be improved. Thanks, @pranayairan!
New post default template can be improved
#1655
pranayairan posted onIs 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.
- Put a sample example in the help, with a hello world text and everything that is possible.
- 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
thomasbnt posted onDescribe the bug The hover of the button in the sidebar is a little under pressure .
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)
- @jess requested a feature where we add the tag moderators to sidebar of a tag page.
Add tag moderators to sidebar
#1677
jessleenyc posted onDescribe 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.
- @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 onDescribe 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.
- Go to https://dev.to/rasmusvhansen/rxjs-transducer---harness-the-power-of-rxjs-operators-1ai8
- Check order of gists
- Reload and check if order is the same
- 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
- @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 onDescribe 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
- @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 onDescribe 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
- @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 onIs 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
followingright next to the icon. It still is confusing unless otherwise noted though.
Additional context n/a
Dev.to better site ranking (SEO)?
#1707
Aracki posted onI 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
aligoren posted onIs 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.
That's it for the past two weeks! Thanks for reading!
Top comments (16)
Thanks @rhymes , @kyleboe , @davefollett , @ben , @liana , @link2twenty , @juanmanuelramallo , @aspittel , @lightalloy , @kenbellows , @archiet , @mariocsee , @vinistock , @gregbrimble , @nickytonline , @seanmfox , @aligoren , @jess , @prathaprathod , @zcdunn , @sabatesduran , @itsjzt , @pranayairan , @thomasbnt , @rasmusvhansen , @jahirfiquitiva , @giorgosk , @deyshin , and @aracki for your contributions!
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! 💪
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.
Yes, I'd noticed the recap issues 😉
I did not expect to be recognized. Fill little childishly happy to be recognized :D
Thank you for putting this together!
Wow, I love this! Every team should do this!
Thanks you for recap! 🙌
🙏
Thank you, Andy. I’m so happy because being part of the dev contributor.
Oh, wow. That's a lot of contributors compared to the previous weeks. This is great!
Yeah it's great. Big turnout for these two weeks!
Woo! 🎉
@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 :)
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!
Thanks, I republished the repo :)
I also published a discussion topic dev.to/aligoren/i-need-advice-for-...
Damn, epic post Andy!