Conversation
in package cards, lists of labels, and detail page but no underneath the search box
|
For your consideration, a second commit that moves the important labels to the front. That way they stand out more, and makes lists of similar packages easier to scan. It also just looks a bit cleaner. The handpicked labels are sorted to the front of the list, and our "synthetic" labels (ST2/3, MIA, RIP) are inserted at the front of the list. Before: 
After: 
Also: 
|
| if (supportsModernSublime && doesNotSupportNewestSublime) labels.push('ST3') | ||
| let labels = pkg.labels?.slice() ?? [] | ||
| labels = labels.sort((a) => { | ||
| if (['language syntax', 'snippets', 'linting', 'auto-complete', 'color scheme', 'theme'].includes(a)) { |
There was a problem hiding this comment.
Do you want to change the sort to have these labels in a predictable order rather than just reversed-but-at-the-front?
There was a problem hiding this comment.
Yeah I was thinking about that and couldn't decide really... I think I'd want to keep labels in the order they were applied to the package by the author, but these 6 in front of all the others.
|
That's interesting. Bold/Italic is usually used to emphasize something in a sea of content, but then you move it at the front and you have something like a gradient. E.g. first the synthetic red labels, then bold then normal. Since I always wondered about the sorting here, it falls naturally: sort by "popularity" of the label. They fade out to the right, if not visually -- In real typography you could make the font actually thinner and thicker gradually -- then semantically. Doesn't have to be in this PR as while we have the data (label => usage count) somewhere to render the Labels page I'm not sure exactly where. Is the implementation hacky or clever? Well, are these hand-picked or not really the six most used labels? Very likely I would have defined a LGTM, good idea. However, on low DPI screen the (bold) font is a bit too packed/cramped/noisy: 
and 13px would be easier to read: 
|
Well, they're also the most used. But that there are 6 is almost random. And the selection is hardcoded and not based on the actual usage stats. The bold font does gets a bit chunky, let's see if I can tweak that. |
|
Yeah, I don't hate it at 13 at all. Even the stats are more readable and less overly tiny. Let's go with 13: 
By the way, as to this:
That would perhaps have been better, but it would have to be done in both eleventy and JS and just feels "hard". Labels have a very predictable href, so I like to go with "clever" over "proper" sometimes 😄 |
|
On low-DPI the right top corner is actually a drastic change: 
The proportion to the icons change drastically; also the vertical whitespace between the two lines. That's risky. |
|
Can you actually simulate low-DPI, @braver? I learned that while doing the SVG charts (install and status chart); the rounding glitches are huge, e.g. you draw vertical lines for the grid and suddenly the lines have different widths or even have a slight angle. |
I don’t know that I can. All my devices and everything at the office are at least @2x so stuff just gets blurry in weird ways. |
|
On those screenshots of yours though, the line height change and alignment shift is unfortunate but the the text looks a lot sharper at 13? |
I just took these ☝️ and honestly they all look blurred when pasting it here and better on the site. The first is with 11px for the top right stats which is probably even the best choice on my setup. With low-DPI (and on my setup then) the font does not grow proportionally at all and on the second pic (12px) the 3.3K looks compressed, I just never noticed it before. This is basically our font, other fonts (e.g. the one here on GitHub) scale better. FWIW. |
3 participants
The discussion in #82 ended up going towards "just" using bold (and a slight color contrast adjustment) to highlight the hand-picked labels. We've gone a few steps way from colorful lately and I think that's a good thing after all. Also, the language icons/logos already add color. Bold does what it needs to do while also being completely inoffensive.
I considered adding LSP to that list, but it feels a bit random because that's not part of the selected labels we put under the search field. Besides, all LSP packages already have LSP- in their name, so LSP is written all over them to the point that highlighting the label feels unnecessary.
I also considered adding AI to that list, but IMO it's not that kind of label right now. We're in the middle of the hype cycle, perhaps we'll end up with more of a SublimeLinter/LSP kind of situation around interacting with LLMS and agents. Right now it can mean anything.
So, tiny little PR: