Added stack images #89
Conversation
Add stack images for android, c/c++, go, java, node.js, php, sql, swift.
|
Thanks!!! These are very helpful. I added samples of each new image on the staging site. I vote we merge all these and slightly edit the C++ logo. The logo doesn't make it clear the stack is C or C++, and the shape is a bit small. Maybe we could make the hexagon shape the same size as the C# logo and put something like 'C/C++' on it? Just a suggestion, not sure how else to make it clear that C is also covered. @edroman @prtkgpt @paulocheque What do you guys think? Go to this page for a sample of all the images. |
|
Same here. I would improve the C#, C++ and PHP logos. Maybe it would be better to resize the image to the final size, instead of using SVG or let the browser resize the image. When the image is small in the browser, the font lose quality. But the other images are perfect for me. |
|
Thanks @durden and @paulocheque. What do you think about these versions? For the C/C++ logo, I divided the hexagon into two parts and make it a little bigger than the C# logo. I think they look better, but feel free to tell me if they need more changes. |
|
I think we should avoid having two sizes if we can. The svg icons work On Tuesday, June 14, 2016, Prateek Gupta notifications@github.com wrote:
|
|
On second thought, that JS image is blurry as @prtkgpt mentioned regardless of the thin border around it. Any ideas on how to clean this up? I really like the idea of using just 1 SVG icon instead of separate image sizes. However, I'm not front-end expert so I'm not sure the best practices for letting the browser resize, controlling the size in the layout so all images are roughly the same size, keeping the image from looking bad when growing, etc. I think the images look pretty good when small but don't scale to well when used in the 'featured' section. @paulocheque could you try some of your suggestions of letting the browser resize it and see if that helps? @eh3rrera do you have any suggestions? Maybe the best approach is to have separate sizes? |
|
One downside of using SVG images is Facebook's Open Graph sharing mechanism doesn't support them. I manually tested this just to make sure it's still the case, and it's still doesn't work. For reference, I've been testing using the stack images as the Is this a big enough downside to warrant using png/jpg and multiple sizes for the stack images? |
|
I remade the C# and JS logos and they look much better now: However, most of these images are not "true" SVG, they just "wrap" a PNG image (for example, open the Go and the Python logos in a text editor and compare them). So if SVG images are not supported by Facebook's Open Graph sharing mechanism maybe it's a good idea to use PNGs directly. I'm not front-end expert either, but if we have a big enough image, we can scale down the image with no loss in quality. The feature guide image is 99x104 and the other size is 40x43, so all images, for example, can be PNGs of size 200x210 at just a few KBs. I'll wait for your comments to update the PR. Thanks. |
|
Awesome. The new images look great. I'd say we go with your suggestion of On Tuesday, June 14, 2016, Esteban Herrera notifications@github.com wrote:
|
…ide pages
- Add explicit width/height and description to satisfy open graph debugger warnings
- This will fallback to the user's avatar image if the stack image isn't the
right format.
- We're planning on transitioning to png for stack images so this should
automatically work once that change happens.
- Follow #89 for more discussion on that topic.
Converted all logos to 200x210 PNGs and updated models/article.py to render PNGs instead of SVGs
|
I changed all logos to PNG. Tested locally and everything looks good. Comments or modifications are more than welcome. |
|
Thanks @eh3rrera! I'll test it this week and post feedback. Really appreciate all the help! |
|
Great, thanks! |
|
The small icons look great! Again, really appreciate all your help! I noticed a small thin white border around the image when we size it up for the 'featured' guide section. I tested it with images for python and nodejs. Here are some screenshots to show this.
I'm guessing this shows up on the smaller version too, but it's too small to notice. Can anyone else see this or are my eyes deceiving me? |
|
I'm guessing that could be fixed by using SVG's, assuming you aren't already Otherwise, it should just be fixed by exporting to PNG without a background from Illustrator |
|
Our current approach is using SVGs. However, there are downsides so we're going to be switching to PNGs, which is part of this PR. You can read above to see more on the discussion of SVG vs. PNG. |
|
Yeah, some browsers don't like SVG's and they are problematic when scaling |
|
Hey @durden My mistake, I exported the images with the wrong settings. They're already corrected. I also added the logos for the rest of the stacks:
For the following, as they don't have logos, I just put the words over a background inspired by the Pluralsight logo colors:
What do you think? The only missing category is Others, but I can't think of anything... |
|
Probs just a toolbox or gears would work. Otherwise, maybe just a generic bit of code, with a nice background |
|
Thanks @MicroTransactionsMatterToo, great idea, a gear works great! I'm no completely certain about the APIs, NoSQL, and Software Engineering logos, so I created another version: So overall, what do you guys think? |
|
Looks great @eh3rrera! I had to rename the file for nosql slightly so it showed up, but that's nothing compared to the amount of work you did! |
|
I've created sample guides for every stack on the staging site for everyone to see. |
|
These changes are now on the production site. |
Added stack images for android, c/c++, go, java, node.js, php, sql, swift.
I tested the images locally and they looked good on 99x104 (for feature guides) and 40*43 (for the guide list).
Let me know if you need any modification.