Add logo style badges

[RedSparr0w]

This PR adds 2 new style badges which emphasize the logo on the badge:

• popout
• popout-square

These allow for a query parameter called logoPosition:
(By default the logo is centered)
negative numbers moves the badge down/logo up:
-5:

positive numbers move the badge up/logo down:
5:

If a logo is not specified it will automatically fallback to serve the flat or flat-square style badge

Examples:

popout	popout-square

[shields-ci]

	Messages
📖	✨ Thanks for your contribution to Shields, @RedSparr0w!

Generated by 🚫 dangerJS

[paulmelnikow]

Wow, neat, these are really cute!

I wonder if anyone else would like to weigh in on the design. Did you experiment with the logo centered over the bar instead of at the top? I wonder how that would look.

[paulmelnikow]

Do you think popout and popout-square might be clearer names for these formats?

[RedSparr0w]

Yeah good idea, i couldn't think of what to call them, but popout is a great choice.

[RedSparr0w]

Did you experiment with the logo centered over the bar instead of at the top?

Never thought of that,
Added a few example badges with centered logo,
Not really sure which ones i prefer now though 😆

[PyvesB]

Not sure which ones I prefer either. When it comes to objects or geometric logos, the centered ones look better in my opinion, but for instance you get the impression that the Linux penguin is "sitting" on the badge, it's quite quite a neat effect as well. Possibly we could give users two options popout and popout-centered (and the square variants of these two)?

[bkdotcom]

They are pretty, but....

seems to break the non-promotional mission statement of the project
https://github.com/badges/shields/blob/master/spec/SPECIFICATION.md

[paulmelnikow]

Not sure which ones I prefer either. When it comes to objects or geometric logos, the centered ones look better in my opinion, but for instance you get the impression that the Linux penguin is "sitting" on the badge, it's quite quite a neat effect as well. Possibly we could give users two options popout and popout-centered (and the square variants of these two)?

I like the penguin sitting on the floor! For all the rest I prefer the centered. Let's definitely support that one.

Actually, I'd be curious to see what the penguin looks like centered. If it looks decent I would say, let's support centered and not floored. If it looks bad, and you're up for doing the work, we could support both logo placement options.

It might be better for the user to choose between them using a parameter like ?logoAlign=bottom.

seems to break the non-promotional mission statement of the project

That's true of all the logos. I don't think we're veering so far afield by supporting these.

[RedSparr0w]

Or what about if i did default centered, and had ?logoAlign as an int:
?logoAlign=10

?logoAlign=6

?logoAlign=-10

?logoAlign=-7

possibly swap around the positive/negative, not sure which makes more sense

Edit: also linux penguin centered:

[paulmelnikow]

How about logoTop=10 moving it down, logoTop=-10 moving it up?

Or logoPosition=10/logoPosition=-10?

Penguin looks cuter at =10 or =6 than centered!

[RedSparr0w]

logoPosition sounds good.

I almost think the param shouldn't include the word logo at all, as the logo won't move, just the badge does.
Possibly something like popoutPosition as it will currently only be used for the popout style badges,
But probably better to future proof it with a more generic parameter.

Definitely looks a lot better with the badge underneath the penguin! 😄

I also need to update the example badge to use a logo, perhaps the shields favicon?
(once it's updated to be a little higher res)

[paulmelnikow]

perhaps the shields favicon

I like your examples better!

While technically it's true that the badge is moving, I don't think people will necessarily see it that way. Since it goes with the logo= parameter I think it's good to be named with that. Also it's similar, in a way, to logoWidth=. I think popoutPosition could work too, though you're probably right that the position parameter could potentially apply to other badges someday.

[RedSparr0w]

I like your examples better!

Thanks 😄
Tried a shields logo, and it blends into the badge way too much aswell:

Have updated to use logoPosition
negative numbers moves the badge down/logo up:
-5:

positive numbers move the badge up/logo down:
5:

Still not sure what logo to use in the examples as all the logos in the folder don't fit too well:
(lighter logos on the white background, darker logos on the grey of the badge)





Think the twitter or bitcoin probably look best from the available logos.

[paulmelnikow]

That sign for logoPosition feels flipped from what I'd expect. Most 2D canvases put the origin at the top left and use positive numbers to mean down – including CSS, HTML5 Canvas, and SVG – and as I mentioned I think people will think of the logo as the thing that's moving, not the badge. That's pure intuition, though, so if you feel strongly I'll defer.

Think the twitter or bitcoin probably look best from the available logos.

Agreed!

[RedSparr0w]

I've reversed logoPosition (have edited above post & first post to reflect latest changes).
But I am unsure how to get the logo in the styles example.

[paulmelnikow]

Making this change in renderStyleExamples() in usage.js should do the trick:

const logo = style.startsWith('popout') ? 'data:something-cool-here' : undefined;
const badgeUri = staticBadgeUrl(
  baseUri,
  'style',
  style,
  'green',
  { longCache, style, logo });

I'm wondering though, if we should add a separate heading, and show a few examples showing logos, so people are seeing e.g. flag-square, social, and also popout. That way, people are less likely to conflate a badge with a logo with popout.

[paulmelnikow]

We should get this merged! Is it just waiting for usage instructions to be updated?

[paulmelnikow]

If it is just usage, let's merge it, and then add the docs in a follow-on PR.

[RedSparr0w]

Missed your last comment sorry,
Yeah that sounds good, not too sure where to start on the docs for this.
I'll merge master into this branch and make sure everything is still working as intended.

[RedSparr0w]

All working with latest changes merged.
Could you give it a quick look over before merge @paulmelnikow

[shields-deployment]

This pull request was merged to master branch. Now this change is waiting for deployment.
Deploys usually happen every few weeks. After deployment changes are copied to gh-pages branch.

This badge displays deployment status:

[olivierlacan]

Do we really seriously honestly need to keep adding exotic styles like this?

The inbalance in the design due to the logos breaking out of the container means that these are going to be a mess on any page that includes more than one of them.

This project is not an emoji or trading card collection, it's a serious attempt at meaningful standardization of metadata for open source projects. It's a regression to the exact issue that prompted me to create Shields in the first place: inconsistency, visual noise for no other purpose than being louder than other badges, all in service of a superficial aesthetic pursuit that frankly looks shoddy most of the time.

Sorry if this feels like a strong diss, and I know the project is in your care now @paulmelnikow but at the risk of looking like I'm swooping in after everyone's done with the hard work, I wish we could put our collective foot down on these alternative designs.

Paralysis of choice is a real problem. Offering a million design alternatives means that we're destroying the useful standardization we've worked so hard to achieve for years. Let's be brave and deprecate designs if we believe we've found a better one, but at this cadence we'll have 30 different styles in a few years and we'll be back in a visual mess where badges are shouting against each other for attention rather than showcasing useful information at a glance in a succinct a clear manner.

[paulmelnikow]

Hi Olivier, thanks for sharing that post! Most of what I’ve learned about the origin of this project has been through issue discussion and I'd never actually seen that. (We should link to it from the history section, and also expand that with whatever else you can think to add.)

I appreciate your input that Shields should offer less customization. I didn’t push back in this instance, though I often do, and tend feel like the sole voice.

It’s important for its sustainability that Shields be community-driven. While I see badges as a bit more "serious" and tend to aim for consistency and very limited customizability (a la Apple), some users are badge lovers who come here to make their open-source work more fun. Some of them do want emoji and trading cards. I'd tend to think this project is large enough for both perspectives that fractionalization would make things even more divergent… so I steer toward consistency, but don't impose it. I welcome the discussion.

Among @RedSparr0w’s other contributions as a maintainer (perhaps most impactful being the dynamic badge) he’s put a lot into maintaining both the templates and logos. In two years he's added two new styles, so we’re not on a slippery slope to offering dozens of them. We document the styles but don’t push them, so I don’t perceive paralysis of choice being a huge concern.

I’m open to revisiting this style – which I haven't seen used in the wild – and the styles and design in general. I’ve been meaning to propose changing the default to flat-square, and perhaps dropping plastic. It would be helpful to write some design guidelines for the project, both to guide developers in maintaining consistent badge URLs, and to shaping the way we deal with styles. A guideline is a good way to put down our collective foot.

Something else that could have a big impact on the signal-to-noise ratio of badges would be a “badge best practices” page for developers. Amazingly, there has been some serious research done about badges + projects based on signaling theory and gamification:

• https://cmustrudel.github.io/papers/icse18badges.pdf
• https://cmustrudel.github.io/projects/badges/

Developers are meritocratic by nature and I imagine would be persuaded by that kind of research, and I think it would be an ideal place to convey the principles behind the Shields origin-vision and encourage them to play along. Along the way, we could give good examples of customization, guiding them how best to use the choice they have.

[olivierlacan]

@paulmelnikow I'm so glad you're shepherding this project. Apologies to @RedSparr0w for the drive-by cranky post. I realize I'm singling you out to make a point and that can't feel fair when you've worked your ass off.

The last thing I want is to add some gatekeeping antics to this healthy blossoming community. I love your suggestion for best practices @paulmelnikow. This is basically what I moved toward with https://keepachangelog.com/. I'm really hopeful the generator ideas related to the #1899 redesign will facilitate this, since it would make sense to guide people through the process of creating quality badges.

I could swear there was an old discussion somewhere around changing the default to flat when flat design started becoming real trendy. Yep, there is is.

It's my job to make sure the original rationale behind Shields is clear and documented. I think we had it in the original repo and it might have gotten lost in the weeds of time.

Here are some fun historical items I managed to dig back up:

• https://github.com/badges/shields/blob/master/spec/SPECIFICATION.md
• https://github.com/badges/shields/blob/historical/static/shields_white%402x.png
• https://github.com/badges/shields/blob/historical/static/proportions.png
• https://github.com/badges/shields/tree/historical#guidelines
• https://github.com/badges/shields/tree/historical#examples

[RedSparr0w]

No worries, I definitely understand your point of view, and if we decide to downsize the current styles i'm fine with that.

It would be helpful to write some design guidelines for the project, both to guide developers in maintaining consistent badge URLs, and to shaping the way we deal with styles. A guideline is a good way to put down our collective foot.

👍

I’ve been meaning to propose changing the default to flat-square, and perhaps dropping plastic

It would be great if we had some metrics on the styles of badges being used.

The inbalance in the design due to the logos breaking out of the container means that these are going to be a mess on any page that includes more than one of them.

The main kind of use case I imagined with this badge would have been something similar to:

My Project

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra non eros sit amet rutrum. Curabitur ut dictum mi, a pulvinar odio. Praesent rhoncus justo augue, at euismod felis porttitor eu. Sed auctor leo sit amet lobortis elementum. Fusce eu nulla sit amet dui rhoncus cursus. Ut accumsan, urna ut.

Downloads:

Something Else

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non sem enim. Suspendisse vitae nisl aliquet, laoreet erat quis, blandit turpis. Mauris vel luctus diam. Duis neque quam, ornare vel aliquam et, tristique quis risus. In tincidunt enim a sapien suscipit, ut malesuada tortor iaculis. Proin cursus, tortor vel commodo.

Donate:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in pellentesque est. Nullam elementum leo at tempor dictum. Donec commodo commodo mauris ut laoreet. Curabitur.

-END-

---

Similarly with the for-the-badge style, If the user is already going to be using these i feel it would be better to allow them to match our badges with those to maintain some degree of consistency.

I guess the thing to decide now is where we go from here,
It may be worth opening an issue so we can keep track of this for future reference and gather some more discussion.