Add retina support (banner)

[equinusocio]

Add a retina ready quality banner. Now the banner looks like a s**t on retina display :)

[alexfernandez]

Care to propose a patch?

[equinusocio]

How?

[alexfernandez]

We would need to know why it looks wrong. The existing banner is a SVG so it should scale nicely.

Can you attach a screenshot and a link so we can diagnose the problem first?

[equinusocio]

Not the shield, i mean the banner, this png:

http://packagequality.com/#?package=material-theme

The png should be exported @2x on retina display. You can also always use the @2x on a retina/normal display density, for an easy fix. Instead of check the screen density you can always return the @2x (or @3x) png with the @1x size, so you don't have to worry about densities.

[alexfernandez]

Wow, you are right. @tufosa Do you think we can improve it?

[tufosa]

Looks pretty bad. It wasn't me who implemented the client side. Let me have a look at how it's done and see if There is an easy fix.

On Wed, Sep 14, 2016 at 1:27 AM, Alex Fernández notifications@github.com wrote:

Wow, you are right. @tufosa https://github.com/tufosa Do you think we can improve it?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/alexfernandez/package-quality/issues/46#issuecomment-246858414, or mute the thread https://github.com/notifications/unsubscribe-auth/AFq7RGcWoMPl5EZrRaH9NL4wYkoEQAn4ks5qpzFygaJpZM4J4xsZ .

[alexfernandez]

Was it @sgmonda? What do you think, Sergio?

[DiegoTUI]

@alexfernandez @sgmonda it seems like we need a higher quality app/img/badge2.png, as well as higher quality stars. As @equinusocio pointed out, an easy fix would be to replace our current image resources by 3x quality resources and serve them for all devices. A fine tune of this approach would be to have several quality of images for several resolutions, read the user-agent of the request and serve accordingly. @sgmonda can you provide higher quality images of the badge and stars?

[sgmonda]

@DiegoTUI @alexfernandez @tufosa I've added x2 and x3 versions for badge and stars, and I've implemented a simple way to serve x2 and x3 images, just adding an optional argument size=X to the badge URL. Example:

http://npm.packagequality.com/badge/material-theme.png

http://npm.packagequality.com/badge/material-theme.png?size=2

http://npm.packagequality.com/badge/material-theme.png?size=3

I'll leave checking the user agent (or other tricks to avoid having to write the "size" argument) in your hands. NOTE I'm not able to deploy to production. This improvement is pushed but not deployed. Please do it for me. Thanks.

[DiegoTUI]

thanks @sgmonda. I just deployed this last version. Closing the issue.

[DiegoTUI]

Well, I can't close the issue ;-)) @alexfernandez please, test the new features and close it.

[alexfernandez]

I cannot test it, @equinusocio can you let us know if it works for you, or do you need anything else?

[equinusocio]

I still see the non-retina banner.

[DiegoTUI]

@equinusocio are you adding the size parameter to your request? I just checked right now and it seems like it's working:

http://packagequality.com/badge/async.png?size=3

[equinusocio]

But shouldn't be automatic?

[thecotne]

why not serve svg?

[alexfernandez]

Not sure that we have svg for that particular image, but it might be a good solution. @sgmonda, what do you think?

[thecotne]

to help decide about svg here are benefits of it

• Extremely High Quality (Retina ready, One Size fits all)
• Extremely Low Size
• Easy to generate with script

[equinusocio]

• Extremely Low Size

False. It is not always so.

[thecotne]

minimize "any" svg with svgo take that svg and convert to png and compere size

svg is always smaller then png/jpeg

if you have vector graphics in first place (like stars and check mark ...) i am not saying converting png/jpeg to svg will save you size

[thecotne]

if you drow this in illustrator/inkscape it will be much smaller and much better quality

[equinusocio]

@thecotne But with png you can use compression to get a nice output that can save a lot of KBs, compared to a full detailed SVG. In some cases, when the svg is structured and complex, exporting to jpg (not png) can save a KBs.

There are svg and svg, but in this case you're right. 👍 We can close here this OT. :D

[alexfernandez]

Good idea. Any takers? @equinusocio @thecotne?

[thecotne]

@alexfernandez everything looks simple in badge2.psd but logo is not vector do you have vector version of logo? svg or ai format?

@equinusocio you can minimize svg with svgo and compress with gzip

[alexfernandez]

I do not think we have a SVG version, but I will let @sgmonda answer the question.

[thecotne]

ping @alexfernandez @sgmonda

[sgmonda]

There is no svg version of our image resources. Even if we create it, we cannot support svg badges right now, unless we change the way we build them. We're using a virtual canvas which needs the width and height to compute the final image. That is the reason we've added support for size argument, which just multiplies by 2 or 3 the original size.

Supporting svg badges is a good feature, but nothing trivial right now.

[thecotne]

If you guys provide vector logo i can create svg version of badge and generator script for that

On Mon, Oct 17, 2016, 14:10 Sergio Garcia Mondaray notifications@github.com wrote:

There is no svg version of our image resources. Even if we create it, we cannot support svg badges right now, unless we change the way we build them. We're using a virtual canvas which needs the width and height to compute the final image. That is the reason we've added support for size argument, which just multiplies by 2 or 3 the original size.

Supporting svg badges is a good feature, but nothing trivial right now.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/alexfernandez/package-quality/issues/46#issuecomment-254167322, or mute the thread https://github.com/notifications/unsubscribe-auth/ABiFUT2KHarPRlXfUC5OOYuun4L2H3Zsks5q00migaJpZM4J4xsZ .

[alexfernandez]

@thecotne We just don't have it. Is anyone able to replicate it in vector form? That would be cool!

[Wandmalfarbe]

I created the logo in vector format (Inkscape-SVG) here #48.

[alexfernandez]

Thanks, @Wandmalfarbe, merged now! @thecotne can you pick it up from here?

[thecotne]

working on it ...

[thecotne]

sorry for delay ...

so far i have this -> https://gist.github.com/thecotne/2a0776c6849cee2ddfbb3b35bc7ac119

(half star has different style)

i could not start package quality locally ... it wants some mongodb running ...

[Sun Apr 09 2017 22:19:53 GMT+0400 (+04)] NOTICE local-config.js not found
[Sun Apr 09 2017 22:19:54 GMT+0400 (+04)] INFO Server listening on port 8080
[Sun Apr 09 2017 22:19:54 GMT+0400 (+04)] ERROR Could not connect to MongoDB: MongoError: failed to connect to server [localhost:27017] on first connect

[alexfernandez]

Not bad. Can you send a PR?

[equinusocio]

@thecotne The green mark is not vertically centered :)

[thecotne]

@equinusocio updated ...

green color was also wrong