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.

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

Contributor profile pages #1195

Open
rviscomi opened this issue Aug 10, 2020 · 16 comments
Open

Contributor profile pages #1195

rviscomi opened this issue Aug 10, 2020 · 16 comments
Assignees
Labels
design Creating the Almanac UX development Building the Almanac tech stack enhancement New feature or request good first issue Good for newcomers
Milestone

Comments

@rviscomi
Copy link
Member

I'd like to pitch an idea for discussion: year-agnostic profile pages for each contributor.

For those who contribute to multiple annual editions, some of their metadata is duplicated across the config files, like name and social links. Authors also have bios in the year's base template. It may be useful to deduplicate the metadata about a contributor that doesn't change over time, like their name, social links, and bio, from the metadata that is year-specific, like the teams and chapters.

So for example, I could add basic metadata about myself to /src/config/contributors/rviscomi.json (or .yaml):

{
  "name": "Rick Viscomi",
  "avatar_url": "https://avatars0.githubusercontent.com/u/1120896?v=4&s=200",
  "github": "rviscomi",
  "twitter": "rick_viscomi",
  "bio":  "Rick Viscomi is[...]"
}

Then in 2019.json and 2020.json I only need to map my contributor ID rviscomi to the teams I contributed to those years. We could also get info about which chapters I contributed to from the YAML in the chapter markdown files.

All of this contributor info could be made publicly available via endpoints like /<lang>/contributors/<id>, eg https://almanac.httparchive.org/en/contributors/rviscomi. I imagine the page being somewhat similar to dev.to/rick_viscomi:

image

  • profile photo
  • name
  • bio
  • social links
  • snippets of chapters I've contributed to (as an author, reviewer, analyst, editor, or translator)
  • badges representing teams I've been on and the number of years I've been a contributor (gotta catch 'em all!)

Right now only authors have bios and they're only visible on the chapter pages. This proposal would enable all contributors to have bios on their personal profile pages and it'd be easier to go back through all of their contributions over the years.

Curious to hear if this is something contributors want, whether there are any unforeseen technical complexities, or if there are any other ideas for ways we could utilize a page like this to showcase contributors' work.

@rviscomi rviscomi added the question Further information is requested label Aug 10, 2020
@tunetheweb
Copy link
Member

tunetheweb commented Aug 10, 2020

Good idea. I’ve been thinking our contributor page is a bit light and think we should have links back to chapters they worked on. Saying someone was an author isn’t much use, without saying what chapter(s) they authored on!

However I still think it’s good to highlight the contributors for each year. To say we 96 contributors to 2019 edition (and who they were), and that there were 116 contributors for 2020 (and who they were). So I’d probably keep the contributors page as it is now as well and link to the individual profile pages from it. Maybe also have an /en/contributors for all years? Or alternatively have just that one page but allow it to be filtered by year as well as team.

But definitely agree we should avoid repeating data across years. Not sure individual files per contributor are a great idea - could slow things down to read many of them either at start up or dynamically when a page is requested, e.g. if we keep the contributors page, or in chapters with lots of contributors - unless we have name as well as if in the 2019.json / 2020.json and accept that repetition. So I’d probably go with three files:

  • 2019.json - remove contributor info except ids
  • 2020.json - remove contributor info except ids
  • contributors.json - full details keyed by id

With the linting we have, the chance of bad config getting I there is very low, so think maintaining in combined files like this is fine. Maybe if we start to get a lot of extra meta-data to build full profile pages, so we get concerned about size of JSON file, then that can go in individual files and contributors.json is just the core info needed for each contributor.

@rviscomi
Copy link
Member Author

However I still think it’s good to highlight the contributors for each year. To say we 96 contributors to 2019 edition (and who they were), and that there were 116 contributors for 2020 (and who they were). So I’d probably keep the contributors page as it is now as well and link to the individual profile pages from it.

+1 let's keep the existing /<lang>/<year>/contributors pages. We should also think about how to link the Contributors and chapter pages to the profile pages.

Not sure individual files per contributor are a great idea - could slow things down to read many of them either at start up or dynamically when a page is requested, e.g. if we keep the contributors page, or in chapters with lots of contributors - unless we have name as well as if in the 2019.json / 2020.json and accept that repetition. So I’d probably go with three files

Either way. With contributor-specific files, it's easier to maintain. At deploy time we can run a script to bundle them up into a single config, or "hydrate" the year-specific config files with the perennial metadata. Having files for each contributor enables us to render the profile pages based directly on "file_exists" checks rather than loading all contributor data and testing whether a contributor key exists. Tradeoffs with each approach, but I'll defer to you on implementation.

@rviscomi rviscomi added this to the 2020 Backlog milestone Nov 10, 2020
@rviscomi rviscomi added enhancement New feature or request development Building the Almanac tech stack and removed question Further information is requested labels Nov 10, 2020
@rviscomi rviscomi changed the title Contributor profile pages? Contributor profile pages Nov 10, 2020
@rviscomi
Copy link
Member Author

I started looking into this and I'm feeling more enthusiastic about going in this direction. I like the idea of a page where contributors could list all of their multi-year contributions across the entire project.

A few concrete suggestions:

  • Give each contributor a src/config/contributors/<id>.json file and document all of the required/optional fields in the wiki
  • Remove the contributors object from the annual config files, instead annotate team memberships in the teams object with a members array
  • At build time, compile all contributors into a config file consumable by the server and use it for validating and serving requests to the /<lang>/contributors/<id> path
    • This should be done at the same time as chapter generation (or at least reusing parts of its pipeline) so that we can map contributors to chapters and their roles, and also inject author bios into the generated chapter templates
    • <year>.json config files should also be processed so that each contributor can have details about when they contributed and what teams they were on
  • Create a new year-agnostic Jinja template and implement a design (TBD) that showcases their contributions

@tunetheweb tunetheweb added the design Creating the Almanac UX label Apr 27, 2021
@rviscomi rviscomi added the good first issue Good for newcomers label Apr 28, 2021
@rviscomi
Copy link
Member Author

@HTTPArchive/developers is anyone interested in building the infrastructure and UX for contributor profile pages?
@HTTPArchive/designers is anyone interested in designing the UI for the profile pages? It's very open ended at this point and you can take it in any direction.

@GeekBoySupreme
Copy link
Member

I can pick this up

@GeekBoySupreme
Copy link
Member

GeekBoySupreme commented May 14, 2021

Made a version of the contributors' page for desktop. Mobile incoming - https://www.figma.com/file/Q9Zu4uLTtzLQT1TqVG4OiS/Web-Almanac?node-id=0%3A1

image

@rviscomi
Copy link
Member Author

rviscomi commented May 14, 2021

Looks great thanks @GeekBoySupreme!

@tunetheweb any general feedback? I'm also curious how you feel about developers/designers not having any specific "contributions" to list and if there's anything we can do to mitigate that.

Any other feedback from @HTTPArchive/designers?

Miscellaneous feedback:

If someone contributes to the CSS chapter all three years in a row, would they have the 2019, 2020, and 2021 labels under the CSS chapter, or would it be listed three times?

I think we can remove the next/previous buttons since I expect most users to directly access contributor pages rather than browse through them.

Could we incorporate the same box-shadow and rounded corners style here as on the Contributors page for a bit of visual continuity? I think it could work as a wrapper around the bio area at the top.

Similar to the floating buttons in #1617/#2196 should we have an "Edit this page" floating button so anyone could quickly submit a PR to change a contributor's metadata? Similarly, if we support translations for everyone's bio, should we have a "Translate this page" button?

@shantsis
Copy link
Contributor

I like how clean it looks :) What are the 2 images on the page (e.g. the tent)?
Maybe development/design contributions are their own bullet points

@tunetheweb
Copy link
Member

Initial feedback are that it looks great! This is definitely doable.

Should we make the contributions more like “Author 2021 CSS” that clicks through to those chapters? That would handle multiple years, different roles in each year and also different roles in same year (e.g. I might have “Author 2021 CSS”, “Analyst 2021 CSS” and “Author 2020 CSS” buttons - though first two would both link to the same chapter).

Not sure we need the chapter paragraph. It does looks nice but difficult to fit with the above suggestion and shouldn’t this page be more about the contributor than the chapter?

For Development maybe they click through to GitHub commits.

For design more difficult but maybe GitHub issue comments? Though previous years designers have not communicated via GitHub. If not GitHub profile then not link. Should that be greyed our colour?

I’d probably remove the roles from the top section. It’s repetitive of the buttons below and think this top bit should be about the contributors profile and social buttons, and the bottom section about their Web Almanac contributions.

Will think some more…

@GeekBoySupreme
Copy link
Member

GeekBoySupreme commented May 16, 2021

Thanks for the feedback folks.

@rviscomi for same roles across multiple years on same chapters, I would stack the years against the role name, that would prevent scrolling a lot.
If they have worked on different chapters, that warrants its own section with a repetition of the role and year badges.

The segmentation becomes -

Same chapter, multiple years.
Multiple chapters, same/multiple years
Different role, different chapters

Would post iterations for these.

Plus, we can simply replace the next and prev buttons with Edit Page and Translate.
For devs and designers, have to figure out a content that goes in.

@shantsis the images are representative of badges that @rviscomi had proposed we might add. They're just placeholders for now, would design the badges sometime else.

@tunetheweb agree with your suggestions.
The paragraphs don't fit in with that paradigm. What if we allow the contributors to add their favorite bits from the chapters?
Would that be interesting enough?

@rviscomi
Copy link
Member Author

rviscomi commented Oct 1, 2021

Revisiting this old feature request. @GeekBoySupreme do you have any time this month to get this page over the finish line? I'd love to be able to launch the 2021 edition with contributor profile pages and we're so close!

@GeekBoySupreme
Copy link
Member

Definitely yes.
Would have some bandwidth this week and would polish this page up

@rviscomi
Copy link
Member Author

This FR came up recently. I'm still very interested to see this implemented, even if we just start with splitting out contributor configs into their own files.

I'm also open to revisiting whether to use JSON or YAML for the config files, the latter having the advantage of being able to use inline comments.

@yuseyhan
Copy link

yuseyhan commented Oct 15, 2022

Hey :)

I just made a draft here for the desktop and mobile versions. Can you check and give me feedback if it is something you are looking for?

https://xd.adobe.com/view/fb42d3df-2310-4da6-8050-73f14184b350-ae11/

@rviscomi
Copy link
Member Author

Sorry for the delay, I'm traveling for the perfnow conference this week. I'll be sure to turn around my feedback to you next week!

@rviscomi
Copy link
Member Author

Sorry again for the delay @yuseyhan, but thank you for taking the time to work on this design. I really like the direction and I have a few notes to refine it a bit more.

Right now the chapter metadata is very prominent. What if we collapsed that in a way that lets us pack more contributions onto the screen, like a grid view? So we would only show the top-level info, like the chapter title. Maybe it could be interactive in a way that expands the card to show more of that metadata, like a modal or something.

Also, rather than grouping by year, what if we group by chapter? So for example, we could have something like a "card" for a chapter, and the contents of the card include the chapter title and all the ways the person contributed to it over the years. We'd need a way to distinguish between year-specific contributions, for example in 2022 I was an author of the Performance chapter, but in 2021 I was only a reviewer. Not totally sure of the best way to do that, open to ideas.

I'd also like to find a way to keep the idea of having "collectable" badges on a contributor's profile page. Like, if I've ever been an author, I earn the "Author" badge. If I contributed in any way to the 2022 edition, I earn the "2022" badge. Each one would need its own illustration but we can use placeholders or text for now.

Anyway, thank you again for working on this. I'd love to hear your ideas.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design Creating the Almanac UX development Building the Almanac tech stack enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

5 participants