Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: thanking contributor (#2632) #2635

Merged
merged 10 commits into from
Jan 31, 2020
Merged

feat: thanking contributor (#2632) #2635

merged 10 commits into from
Jan 31, 2020

Conversation

KeziahMoselle
Copy link
Contributor

@KeziahMoselle KeziahMoselle commented Oct 1, 2019 •
edited by XhmikosR
Loading

This PR aims to add a card which thank random Node.js contributors.

To Do

  • Contributor card UI
    • Show loading spinner
  • Fetch 1 random contributor
  • Optimize / Errors handling / Refactor
    • Handle requests errors
    • Use IntersectionObserver if available
    • Cache the response of the first request in localStorage and update it every month
  • Use s=80 for the avatar image
  • Remove the period before the contributions (maybe wrap it in parens)
  • Maybe use textContent instead of innerText?
  • Move .hidden to a general utility class
  • Fix IE >= 10 support
  • Fix IE <= 10 styling

Preview

preview

Fixes #2632

Live preview: https://amazing-volhard-25db2f.netlify.com/en/

@KeziahMoselle
Copy link
Contributor Author

KeziahMoselle commented Oct 1, 2019 •
edited
Loading

Update :
preview

@XhmikosR
Copy link
Contributor

XhmikosR commented Oct 1, 2019

As I recently learned the hard way, the CSS is currently used by other nodejs sites.

So, this shouldn't land until that's solved.

Also, I'm not very keen of using non standard attributes even if Chrome has the biggest market share.

@KeziahMoselle
Copy link
Contributor Author

Thank you, i'll change that tomorrow !

@phillipj
Copy link
Member

phillipj commented Oct 3, 2019

Woohoow this is cool, looking forward to seeing this in action 💯

@Trott Trott mentioned this pull request Oct 3, 2019
Closed
@XhmikosR

This comment has been minimized.

Sign in to view
@KeziahMoselle

This comment has been minimized.

Sign in to view
@XhmikosR

This comment has been minimized.

Sign in to view
@KeziahMoselle

This comment has been minimized.

Sign in to view
@KeziahMoselle
Copy link
Contributor Author

Update (after HTML cleanup) :
preview

@XhmikosR

This comment has been minimized.

Sign in to view
@XhmikosR
Copy link
Contributor

XhmikosR commented Oct 4, 2019 •
edited
Loading

Also do note height: 0 is bad. IMO you should occupy the exact dimensions to avoid reflows.

@XhmikosR

This comment has been minimized.

Sign in to view
@XhmikosR

This comment has been minimized.

Sign in to view
@KeziahMoselle

This comment has been minimized.

Sign in to view
@Wai-Dung Wai-Dung requested a review from XhmikosR October 9, 2019 09:40
Wai-Dung
Wai-Dung reviewed Oct 9, 2019
View reviewed changes
Copy link
Contributor

@Wai-Dung Wai-Dung left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice feature!!! +100

Update :
preview

I tend to use this because I think it will balance the layout with a random image, however if I use something like
image, which makes me feel making head to the wall because the left side is too crawded. That's only my opition ;)

@XhmikosR
Copy link
Contributor

XhmikosR commented Oct 9, 2019

This needs to wait until we have PR previews. And see if we can make only one API request instead of 2, see if we should cache this or not and so on.

Currently this slows down the page a lot that I'm personally not sure if we should move with this.

@phillipj
Copy link
Member

phillipj commented Oct 9, 2019

Currently this slows down the page a lot that I'm personally not sure if we should move with this.

How do you see this slowing down the page a lot?

To me it looks like the JavaScript introduced here is mostly asynchronous, in other words not blocking rendering. And the Intersection usage supported by near 90% of users even tries to avoid triggering much of the added code until the <footer> is getting close to the viewport. Therefore I've convinced myself it shouldn't have much impact on slowing down the rendering or execution of the other parts of the website.

But you might be considering something that hasn't caught my eye yet 🤷‍♂

@KeziahMoselle
Copy link
Contributor Author

Adding the intersection observer was the idea of @XhmikosR, the home page is slowed down a lot by these 2 requests even with the IO :/

Should I cache the response of the first request to localStorage if supported ? If so how long ?

@phillipj
Copy link
Member

phillipj commented Oct 9, 2019

the home page is slowed down a lot by these 2 requests even with the IO

This makes me really curious.. Could you describe concretely what you mean by "slowing down" and "a lot"? E.g. is it the actual rendering of the entire webpage we're talking about here? How are you measuring before / after times?

@XhmikosR
Copy link
Contributor

XhmikosR commented Oct 9, 2019 •
edited
Loading

This makes 2 XHR requests, and also fetches the avatars.

All this doesn't come for free :) An example https://gtmetrix.com/compare/OUjbjkwL/BXCUZpol

Note that the Netlify preview doesn't have the IO patch.

@phillipj
Copy link
Member

phillipj commented Oct 9, 2019

Yeay, great to have some insights to base discussions around 👍

Personally think the fact that it takes more time to wait for the browser to finish all its potential HTTP requests (+ followed by some code execution) is less important, and surely not a surprise as you're hinting at.

What is actually important is how quickly visitors gets the website rendered onto their screen. The fact that some parts gets rendered later or even not at all because of network failures etc, may or may not be a problem, it completely depends on what gets rendered later. What Google says about User-centric Performance is spot on IMO:

Web pages almost always have parts that are more important than others. If the most important parts of a page load quickly, the user may not even notice if the rest of the page doesn't.

In this particular scenario we're talking about nice-to-have content in the website's footer. Surely not critical for the visitor to do what they came to the website to do. The rendering of the main content will surely not be postponed significantly because of the changes added here.

Chrome's Performance-part of Devtools shows a few important stages related to User-centric Performance metrics that's really valuable. This is the results I got when measuring the nodejs.org vs these changes on netlify:

nodejs.org

Screenshot 2019-10-09 at 13 43 01

netlify

Screenshot 2019-10-09 at 13 42 14

Bottom line; I don't think the changes purposed in this PR will negatively affect nodejs.org visitors.

@XhmikosR
Copy link
Contributor

Maybe we could do a compromise by rebasing and squashing adjacent commits by the same author into each other? So it's only 7 commits instead of 21?

That I can try for sure.

But see if we can get someone to help us move with the build PR.

KeziahMoselle and others added 7 commits January 20, 2020 18:40
@KeziahMoselle @XhmikosR
feat: contributor card
a1e2a3c
@XhmikosR
More progress
5a4ab2e 
* return early
* hide the block by default
* remove function used only once
* remove `height: 0`
* add dns-prefetch for api.github.com
@KeziahMoselle @XhmikosR
More progress
a8065f5 
* fix: check for the card instead of the avatar
* feat: add intersection observer support
* feat: localstorage caching
  - set 2 keys : max_contributors and fetch_date
  - if max_contributors is set : refetch max contributors
  - if fetch_date is 1 month old : refetch max contributors
  - if max_contributors is set and fetch_date is less that one month old : fetch only the contributor
* feat: style contributor card, avatar and contributions links
* feat: loading spinner
* feat: handle requests error by removing the card
@XhmikosR
Use addEventListener and remove redundant assignment
d70fee6
@KeziahMoselle @XhmikosR
fix: rel nofollow, textcontent, image parameter, text wrapping
aa06d21
@XhmikosR
More tweaks and fix IE >= 10 JS.
3edc273 
Also, move `.hidden` to utils.
@MartijnCuppens @XhmikosR
IE fixes
edbae36
@KeziahMoselle
Copy link
Contributor Author

Thank you for your help @MartijnCuppens and @XhmikosR !
I'm sorry if I commited errors that you needed to fix 🙏

Wai-Dung
Wai-Dung approved these changes Jan 25, 2020
View reviewed changes
Copy link
Contributor

@Wai-Dung Wai-Dung left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this be merged?

@XhmikosR
Copy link
Contributor

@MaledongGit no. Please don't bother with this PR. I will merge it when we are ready.

@XhmikosR XhmikosR removed the on hold label Jan 31, 2020
@XhmikosR XhmikosR merged commit cb4ad74 into nodejs:master Jan 31, 2020
@XhmikosR XhmikosR deleted the feat-thanking-contributors branch January 31, 2020 06:01
@KeziahMoselle
Copy link
Contributor Author

Thank you so much for merging this PR !
A big thanks to @XhmikosR who helped a lot on this 🙏
Thank's to all the reviewers and the Node team, keep it up !
This merging made my day !

@XhmikosR
Copy link
Contributor

XhmikosR commented Feb 2, 2020

Thanks for sticking with the patch till the end :)

@tniessen
Copy link
Member

If so, I'd prefer we squash and add co-author metadata.

👍

This breaks if going to a 404 URL, because the language picker function throws, and this code never runs, leaving the user with a spinner and placeholder text.

@XhmikosR
Copy link
Contributor

@tniessen can you share the stacktrace please? Because when developing locally I don't get the 404 page.

@XhmikosR
Copy link
Contributor

BTW ideally you should make a new issue.

@XhmikosR
Copy link
Contributor

NVM, I saw the error on the live site. It's unrelated to this PR so please make a new issue. It has to do with the language toggler.

@Trott Trott mentioned this pull request Feb 25, 2020
Closed
@Trott
Copy link
Member

Trott commented Feb 25, 2020

Issue for toggler code failure: #2984

@snyk-bot snyk-bot mentioned this pull request Nov 22, 2022
Open
@Redwoodtj Redwoodtj mentioned this pull request Nov 22, 2022
Open
This was referenced Nov 26, 2022
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@XhmikosR XhmikosR XhmikosR left review comments

@MartijnCuppens MartijnCuppens MartijnCuppens left review comments

@osk2 osk2 osk2 approved these changes

@keywordnew keywordnew keywordnew approved these changes

@ryzokuken ryzokuken ryzokuken approved these changes

@aymen94 aymen94 aymen94 approved these changes

@3imed-jaberi 3imed-jaberi 3imed-jaberi approved these changes

@Wai-Dung Wai-Dung Wai-Dung approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Thanking contributors