[Feature] Add filtering to Who's Using page #1826

[ymschaap]

Re: #1826

To keep momentum, I did some work on my own feature proposal #1826. This is a work in progress, but it works. Live branch.

Design

I tried to match the design in the mockup. Big difference is that most existing logo's are logo's including wordmarks, hence having the Mozilla logo and the name Mozilla underneath is double. Vice versa: having an unknown logo, with no name is also confusing. I'll find a solution.

Also needs some more work in the details.

Code

No React or Less/Sass on the frontend, so wrote vanilla JS code. I embedded the user data as a JSON object in the html.

Data

Also migrated the HAML data format to a JS format, which is both readable, while native to the environment (read Node + React).
I added some mockup attribute values for a set of companies.

Questions

1. Migrate all existing users, or start fresh.
2. What attributes to display for each company, and what filters to show. See the image above for my proposal.
3. Adding a company asks for a PR now. But I was looking for way to use a normal 'add your company' form, that a github bot translates to a nice PR. Even build something as a test.

Other features like lazy load images can easily be added. But don't want to make this to big right now.

[babel-bot]

Deploy preview for babel ready!

Built with commit 5468d84

https://deploy-preview-1834--babel.netlify.com

[ymschaap]

Another update. I did some work on the styling, and made all filter options work. Especially legacy added users (without any details) look nice now as well.

Preview

Re my question above:

1. Any input?
2. I made sort by number of employees work as example, to show it surfaces a user like Microsoft (which is else burried in the middle).
3. I did some work on the Github bot, and added a quick frontend form mockup. Continue?

[endiliey]

This looks awesome. We will somehow port this for default users page for Docusaurus 2. @amyrlam I think this is great https://deploy-preview-1834--babel.netlify.com/en/users

cc @yangshun @JoelMarcey

[ymschaap]

Based on the Slack #website channel feedback:

Remove attributes (by @existentialism / @hzoo)

• number of employees (idea was to surface someone like Microsoft, no support, also remove sort by employees)
• location (idea was to add a filter between Asia/Europe/USA, no support)
• market/industry (idea was to show a broad usage across markets, no support)
• dev story link (idea was to trigger companies to mention Babel, no support)

Add attributes (by @hzoo)

• testimonial blurb (I will need to mockup this, how it would fit in)

Keep attributes

• open source flag (e.g. Ember, NPM)
• contributor flag
• sponsor flag
• enterprise flag?

Also @endiliey would be happy to help with porting.

[wip]

[existentialism]

Looks nice, could even minimize it further by spotlighting users who provide testimonials, quick and dirty mockup:

I like the new, contributor, and sponsor flags. Unsure about the open source/enterprise, as a company could potentially have all of them, which might be visually noisy?

[ymschaap]

Updated the branch to be minimal + testimonials:

[jannaee]

@ymschaap in regards to the mockup form:

3. I did some work on the Github bot, and added a quick frontend form mockup. Continue?

I think this all looks pretty pretty nice! I had a few UX suggestions to tighten up your mockup form. I'm not sure what the limitations are, but I noticed that you don't have any required fields either. Perhaps a few for some of the most basic information you want to capture.

[ymschaap]

@jannaee fixed it:

[jannaee]

Hey nice @ymschaap and I like the notifications pop up bar too!

[hzoo]

Nice, thanks for the review as well @jannaee!

In terms of info:

Company using it is great but yeah I don't know how much information we want until it gets to cluttered (at least on the website): maybe just testimonial, link to site/usage, and if they are supporting us in some way.

---

Aside: I would like to know a few things (it doesn't have to be reflected on the page): how you use it (for what reason, what plugins), do they use any 3rd party plugins, do they have their own custom plugins, have they written any posts/talks/docs about Babel or using it (would they like to contribute that back), and are they willing to sponsor the project (did you know it was all volunteers), or are their people at the company willing to get involved more, or would they like to have paid support/consulting/workshops/talk. Maybe it should be a follow up, or we should ask if they want to video chat.

[ymschaap]

@hzoo did you see my latest commits: preview

It is what you describe (testimonial only, no clutter view).

The things in your aside would be something to easily add to the bot form. Is it an idea discuss that in a separate thread (e.g. where to store those reactions, etc.)?

I've now build the features and views as proposed and discussed. Let me know what else to do to finish this up.

[ymschaap]

I've removed test data from the migrated dataset (which had some fake testimonials and flags).

• testimonial: is there a way to get a few testimonials from known partners before merging @JoelMarcey might know somebody at FB?
• sponsor: I looked at Opencollective and found a few matches and flagged those by hand. Are there more that should be flagged?
• contributors: Are you aware of any corporate contributors to Babel? Facebook?

[hzoo]

Testimonials: yeah I suppose but it would probably take time to get responses, but we could reach out to people.

sponsors: are just those on https://babeljs.io yeah

contributors? don't really have regular ones at the moment: although recently bloomberg (https://babeljs.io/blog/2018/09/17/7.1.0#private-static-fields-stage-3), and also @jridgewell who works on AMP/Google so I would consider that sponsored work. I guess that section is different because it's going to be for a certain time. Like Adobe/Behance sponsored my time there while I worked there. And Facebook sponsored time previously but not at the moment (Sebastian for Babel 6, Amjad/Juriy for minify).

[ymschaap]

Tagged Behance as sponsor. Adobe, Google aren't listed yet in the (migrated) users list. And Facebook is tagged as sponsor/contributor.

I think what we have now is an improvement of the existing Users list. And expect testimonials to come in over time.

Now up to the maintainers to decide on to merge or not 👍

[ymschaap]

This #1834 PR is stuck for a while now. Please lets decide on supporting to merge it or not (and move on).

[ymschaap]

I re-based the PR hoping to pick up any interest. before -> after.