v2 discussion

[daKmoR]

We have been working some time now to improve on our catalog and make it "real"... still a POC for gathering info but feedback is much appreciated.

This shows the overall idea

• you can index your packages (if they have a custom-elements.json) and then you can search
• show possible multiple filters
• shows mobile behaviour for filters, list, detail view
• shows details for readme, demo, links, source
• only the dependencies filters are implemented
• in alpha you need to manually index via ./add.html.
• demos are a demo/index.html or any url specified in package.json as (demoUrl)
• demos are served directly from unpkg no code changes are done (e.g. it will need to run natively)

=> styling is basically non-existing

See it in action
https://catalog.open-wc.org/

See the items docs
https://catalog.open-wc.org/storybook/?path=/docs/item--single

and all the other parts
https://catalog.open-wc.org/storybook

For now please no design feedback - we are still trying to find out which information we should gather and display. Also, which filters are most useful.

So if you could publish and index a test package, or a fork or your real component and provide feedback that would be super nice.

Also what do you think of the mobile behavior?

[starryeyez024]

I think this is really great, thank you for working on this! :D

Some thoughts / questions:

• Do you think it's worthwhile to maybe also include the info about usage stats for a component?
• On mobile, I didn't know what the time (ms) stat was about til I inspected the source and saw the label of "download time". Is that super useful (i.e. are there components that are so large that that would put people off from downloading them? I think file size communicates the same basic info, and is more obvious.
• The size slider filters: I could see these being very handy.
• "Has demo" would be fabulous -- how do you check for this? Does NPM have a specific place for demo links?
• Should there be a checkbox filter for "no dependencies"?

My suggestion for mobile would be to stack the filters above the list, in an accordion. Also to bring back the label for the time ago, and drop the download time entirely:

[LarsDenBakker]

@starryeyez024 thanks for you comments, that sounds really good we will look into them

We definitely need to look into the design, we didn't do any work on that yet. If you're interested, we could definitely use some help there.

[daKmoR]

Do you think it's worthwhile to maybe also include the info about usage stats for a component?

you mean the npm downloads per week? sounds like a good idea 👍

On mobile, I didn't know what the time (ms) stat was about til I inspected the source and saw the label of "download time". Is that super useful (i.e. are there components that are so large that that would put people off from downloading them? I think file size communicates the same basic info, and is more obvious.

sadly we see that developer in a lot of cases do not take size into consideration... apparently, size in kb is not meaningful enough?

Pika also uses in a very visual way (the bars on the right) https://www.pika.dev/search?q=test

still it seems not "imporant" enough so we wanted to try something different - the idea is actually from bundlephobia https://bundlephobia.com/[email protected]

but yeah I agree that it's 2 times the same info and it takes quite some space :/

So if there is any other idea of how to bring more awareness to size we are all yours 🤗

the importants for this is quite well demonstrated by Alex Russell https://youtu.be/wsdPeC86OH0

"Has demo" would be fabulous -- how do you check for this? Does NPM have a specific place for demo links?

we check for demo/index.html and demoUrl in package.json... if one of those is available then the package has a demo

there is some more info if you scoll down to "Demo" under
https://catalog.open-wc.org/storybook/?path=/docs/item--demo

Should there be a checkbox filter for "no dependencies"?

very good idea 💪 also probably add an extra banner for this special case (e.g. similar to [lib|lit-element] there could be [lib|0 dependencies] or so)

My suggestion for mobile would be to stack the filters above the list, in an accordion. Also to bring back the label for the time ago, and drop the download time entirely:

we probably could replace the download time with the npm downloads per week?
showing the filter button styled as a dropwdown sounds good 👍 still opening full screen is probably needed - some of those filter will need some space 🙈

for putting results in boxes on mobile... it probably reduces the available space too much so I think keeping a line or different colour between them should be fine

it's quite inspired by https://www.checkfelix.com the way filters are used there is quite nice imho :)

[daKmoR]

so I played around with adding boxes for mobile and you are absolutely right it's nicer 🤗
I added them now 👍

=> also added full-screen detail view 💪

and in this view, you can swipe left/right to go the next/previous result 🎉

for what to display as the main metrics I'm still unsure 😅
how about

• add: count dependencies (incl. nested dependencies)
• remove: download time
• add: downloads last week?

so it would be

• count dependencies
• last released on
• size gezipped
• github stars
• downloads last week? (hmmm 5 items is probably too much...)

[DanielTurner]

Is size going to be total size including dependencies, is that even possible to grab?

[daKmoR]

yes the size will be including dependencies :)

info is courtesy of bundlephobia which as far as I know does npm install and bundles main/module entry point to get the real size.

example:
https://bundlephobia.com/[email protected]

[petecarapetyan]

Size!

Example: Which router to use?

Better featured router comes in at 8k, but I can squeeze by with 1k, I think maybe?
So that becomes a game, for me - size v DX.
Maybe everyone doesn't play this silly game, but if they did, we'd have a faster web.

[daKmoR]

quite a big update for mobile 💪

• we now have 5 metrics arranged nicely 🤗
• and the details view is fully swipeable 🎉
• currently, also smooth scroll is activated (but I guess that will get disabled at some point... for now it's nice to give a hint that you can scroll)
• when you click on the heading in detail view then it goes back to the overview and you can scroll down through the list again

[jorenbroekema]

I was messing about with Adobe XD and took your starting page of the catalog to practice, here's the result, maybe cool for inspiration:

Not exactly refined or anything but I think the idea is pretty fun to play with the open-wc logo colors as a gradient :D

Cool project btw :)!

[starryeyez024]

Wow you guys move fast! A response to one of your questions, if its not too late:

So if there is any other idea of how to bring more awareness to size we are all yours 🤗
What if you displayed the size in KB, but changed the color or better yet put a colored icon next to it based on a general sm, md, lg, xl kind of general ranking? The "download time" is almost too specific because it also depends on the speed of the connection which isn't listed. So maybe if they click on the icon, it could take them to a page (or show a modal popover) which gives the detail about the connection speed and the general benchmarks used for those labels. This might be complicated enough to not implement in the MVP, but just throwing ideas around.

Thanks again, this is great!

[daKmoR]

Wow you guys move fast!

thhxxx 🤗

based on a general sm, md, lg, xl kind of general ranking?

yeah I think we will need to tackle it when we will think about the actual design (which we will start soonish) - e.g. we will need to make sure it visually gets the attention it deserves 💪

Updates:

• added "pills" as tabs so you have a navigation when swiping through the results
• pills now indicate the current shown result
• clicking pills will not trigger vertical scroll
• made sure POC works at least in latest chrome/safari and android/iphone

Without further input - this will be considered the end of the technical POC and we will swich focus to design soonish.

PS: added a nice gif to webcomponents/webcomponents.org#1250 (comment)