9 ms·

Carbon – Create images of your source code

103 points by netgusto 8y ago

jazzyjackson 8y ago
Are there any twitter-clones that allow you to post markdown? Can't help but weep for the excess bandwidth of sharing code as a .png -.-
- pablasso 8y ago
  You will be losing the audience though
cyberferret 8y ago
Nice work - Just yesterday I tried typing out 5 lines of Ruby code in a Facebook comment in a group I belong to, and the if...end block had all the leading spaces trimmed out, which made it look weird and negated the point I was trying to make. Something like Carbon would have made the illustration a lot better, and only added a few seconds to the process.
- v_lisivka 8y ago
  Do you have PrintScreen key on your keyboard?
  - Dzugaru 8y ago
    Please, don’t ever print screen any code you want to share with someone, it’s really bad for your karma.
tarboreus 8y ago
Ugh, making accessible plain text into inaccessible images. As a blind person I really hate this.
- saidajigumi 8y ago
  I'm not blind, and hate it for the same reason. I could see implementing a code snippet service (ala gist) with Twitter Cards API support. The card image would likewise be useless to folks with vision impairment, and useless to everyone for cut and paste. But the link would at least connect users to an accessible and copyable text version.
- lisowski 8y ago
  It's actually accessible. take a look at this tweet and inspect the image. all the code is in the alt attribute. So they have thought of that. This will only be if you tweet it from their webapp though. It would be cool if there was a way to copy paste the text easier.
  - colemickens 8y ago
    >It would be cool if there was a way to copy paste the text easier. Like, just using text? Maybe even send it through a syntax highlighter first? I can't be the only one that was irked at Amazon for spending years making their product promo pages or prominent buttons as hard-coded images instead of text. Horribly inaccessible, over the top, looks terrible on HiDPI devices, looks terrible on a non-Mac because it was clear that their designers were using OS X font rendering, so it looked totally inconsistent. My favorite part is being on mobile and having to scroll left and right to see the image, or the image has been fit-to-scale is flatly impossibly too small to read. I feel stodgy, but this entire effort is annoying. Just like the stupid GIFs on project READMEs that play too slow or too fast and have to be watched 50 times to grasp what's going on. Meanwhile asciinema exists and is superior in every way (seekable, pausable, text-selectable, etc).
    - sqldba 8y ago
      Too bad asciinema doesn't work on Windows/PowerShell.
    - tedmielczarek 8y ago
      Unfortunately the web platform has failed to provide a sensible way to embed HTML content, so images and videos are how people actually share things. You can take an image and save it to your device and share it to any social media service without doing anything special. You just can't get that experience with asciinema or any other sort of rich format. It's a real bummer.
person_of_color 8y ago
How does this project have 13k stars?!
- onion2k 8y ago
  13,000 people clicked on the star button.
simplysimple 8y ago
just...take a screenshot of your editor
- adamzochowski 8y ago
  Some editors also have option to copy / paste with rich text formatting. This way code can be copied to mail client with all the colors/bold/italics/sizes etc.
platz 8y ago
So basically this adds some skeumorphic mac buttons ??? and a drop shadow?
- jcbrand 8y ago
  Yes, the Mac buttons really seem unnecessary and a subtle advert and bias towards Macs.
- tinus_hn 8y ago
  Skeuomorphic is more than a tired cliche buzzword for pretend designers that want to voice their disagreement. It actually is a style for ornamental designs that mimic real-world things. Three flat-colored circles in a row on a flat surface do not look like realistic items at all, they are actually the opposite, a stylized representation of a real life object.
  - platz 8y ago
    in this context, it's being used more in the "spirit" than in the traditional direct physical resemblance. In this context, the "spirit" is indicating that simulating a "mac window", which serves no major purpose in elucidating source code, which is analogous (but not strictly identical, of course) to simulating physical buttons in another context.
    - tinus_hn 8y ago
      So it’s the same, except it’s something else completely.
themadcreator 8y ago
The quality of the text rendering could really be improved by using subpixel render https://en.wikipedia.org/wiki/Subpixel_rendering https://en.wikipedia.org/wiki/Subpixel_rendering. Most desktop apps do this. Your browser does it. Your terminal probably does it. VSCode does it. Even the canvas tag in browsers supports this. Basically, every place you're likely to read code is going to look better than the images generated with this.
- adamzochowski 8y ago
  Subpixel rendering requires knowing the pixel orientation (are sub pixels left to right or top to bottom) and the order they are in (rgb vs bgr) and finally assume that the display screen is in real full color mode, and not some limit color space like YUV420.
  - tofof 8y ago
    Which is why it's insane that Windows 8.1 broke the cleartype tuner and it's still broken in 10 to this day. See Noel's comment (at the bottom) of https://social.technet.microsoft.com/Forums/en-US/768bd013-cff9-4a80-a3f9-5ca04340871e https://social.technet.microsoft.com/Forums/en-US/768bd013-c...
    - village-idiot 8y ago
      Didn’t they invent sub pixels?
    - pjc50 8y ago
      Yes, there's something horribly persistently wrong there; all Metro apps render conspicuously ugly fonts for me now.
FridgeSeal 8y ago
Really? This honestly has to be one of the most useless things I've seen implemented. Legitimately what is the point?
fake-name 8y ago
Did you feel there were not enough projects out there already named carbon? Jesus, at least change the name. Carbon is [already a thing](https://github.com/graphite-project/carbon https://github.com/graphite-project/carbon).
- tazard 8y ago
  To me Carbon makes sense, since it's like a 'carbon copy' of the code. Most project names are not unique words. And I for one have a hard time picking names for projects. Just curious, but what would you think would be a better name for this project?
  - fake-name 8y ago
    Anything, as long as it has < 100 google results. At least, plonk the project name into the github search, and see if there are existing projects using exactly that name. I found at least EIGHT other projects with more then 100 stars already named "carbon". At least one of them is VERY widely used (carbon, which is the time-series backend for graphite). Basically, you're actively making life harder for users when you decide to name-collide with existing active projects.
    - marmaduke 8y ago
      It would be interesting if Google providing away to search for unlikely phrases. Maybe their data structures would allow some sort of direct enumeration based on inverse tf-idf.
- jwilk 8y ago
  https://news.ycombinator.com/item?id=15619342 https://news.ycombinator.com/item?id=15619342
sbr464 8y ago
This would be good to use for Medium posts, since the built in code formatting is so bad, especially, especially on the mobile app, since it won’t rotate to landscape.
adeora 8y ago
It's quite annoying that the source code editor doesn't display the edit cursor - makes editing text exceedingly difficult. Any chance you could add display of that cursor back in?
altbdoor 8y ago
I did make something similar before, but I guess mine is more inferior in many ways. https://altbdoor.github.io/code-screen/ https://altbdoor.github.io/code-screen/
andrewguenther 8y ago
It would be nice if you could select text in the SVG images.
- aiNohY6g 8y ago
  Just like TermToSVG ? https://github.com/nbedos/termtosvg https://github.com/nbedos/termtosvg
gammatrigono 8y ago
> Image of text This techno-artistic wackiness needs to stop.
GrumpyNl 8y ago
Why not just take a screenshot, i dont get it.
- klmr 8y ago
  I similarly don’t get the enormous popularity of Carbon but it offers two things that a screenshot doesn’t: • It frames the code properly; this is an aesthetic choice, and certainly subjective, but many people seem to prefer it. At the very least, it provides consistent, even margins around the code which are fiddly to achieve with a screenshot. • If you paste a normal PNG screenshot on Twitter, it gets converted to JPEG and downsampled, creating ugly block artefacts around the text and changing the colours. You can avoid this by making at least one pixel of the PNG partially transparent. Carbon does this automatically (but you can of course do it manually with a screenshot).
onion2k 8y ago
The VSCode plugin "polacode" makes nice looking images of code using your current theme. It's really nice. https://github.com/octref/polacode https://github.com/octref/polacode
- netgusto 8y ago
  Yes! Did not know that plugin. Just tested it, seems to work really well. Thank you.
another-cuppa 8y ago
Please show me source code as plain text. My fonts and colour preferences are better than yours.
jedimastert 8y ago
Just so you know, your project has a pretty big name collision with a PHP library (called Carbon)[1]. It extends PHP's DateTime API. I know that there probably aren't a huge amount of PHP devs around here, but one of, if not the most, popular PHP libraries in production. It's not a huge deal I guess, not being in the same space, but I just thought you should know.
viggity 8y ago
what a perfect compliment to yesterday's post about PaintIDE.

103 points by netgusto 8y ago

Are there any twitter-clones that allow you to post markdown? Can't help but weep for the excess bandwidth of sharing code as a .png -.-

pablasso 8y ago
You will be losing the audience though

cyberferret 8y ago

Nice work - Just yesterday I tried typing out 5 lines of Ruby code in a Facebook comment in a group I belong to, and the if...end block had all the leading spaces trimmed out, which made it look weird and negated the point I was trying to make. Something like Carbon would have made the illustration a lot better, and only added a few seconds to the process.

v_lisivka 8y ago
Do you have PrintScreen key on your keyboard?
- Dzugaru 8y ago
  Please, don’t ever print screen any code you want to share with someone, it’s really bad for your karma.

tarboreus 8y ago

Ugh, making accessible plain text into inaccessible images. As a blind person I really hate this.

saidajigumi 8y ago
I'm not blind, and hate it for the same reason. I could see implementing a code snippet service (ala gist) with Twitter Cards API support. The card image would likewise be useless to folks with vision impairment, and useless to everyone for cut and paste. But the link would at least connect users to an accessible and copyable text version.
lisowski 8y ago
It's actually accessible. take a look at this tweet and inspect the image. all the code is in the alt attribute. So they have thought of that. This will only be if you tweet it from their webapp though. It would be cool if there was a way to copy paste the text easier.
- colemickens 8y ago
  >It would be cool if there was a way to copy paste the text easier. Like, just using text? Maybe even send it through a syntax highlighter first? I can't be the only one that was irked at Amazon for spending years making their product promo pages or prominent buttons as hard-coded images instead of text. Horribly inaccessible, over the top, looks terrible on HiDPI devices, looks terrible on a non-Mac because it was clear that their designers were using OS X font rendering, so it looked totally inconsistent. My favorite part is being on mobile and having to scroll left and right to see the image, or the image has been fit-to-scale is flatly impossibly too small to read. I feel stodgy, but this entire effort is annoying. Just like the stupid GIFs on project READMEs that play too slow or too fast and have to be watched 50 times to grasp what's going on. Meanwhile asciinema exists and is superior in every way (seekable, pausable, text-selectable, etc).
  - sqldba 8y ago
    Too bad asciinema doesn't work on Windows/PowerShell.
  - tedmielczarek 8y ago
    Unfortunately the web platform has failed to provide a sensible way to embed HTML content, so images and videos are how people actually share things. You can take an image and save it to your device and share it to any social media service without doing anything special. You just can't get that experience with asciinema or any other sort of rich format. It's a real bummer.

person_of_color 8y ago

How does this project have 13k stars?!

onion2k 8y ago
13,000 people clicked on the star button.

simplysimple 8y ago

just...take a screenshot of your editor

adamzochowski 8y ago
Some editors also have option to copy / paste with rich text formatting. This way code can be copied to mail client with all the colors/bold/italics/sizes etc.

platz 8y ago

So basically this adds some skeumorphic mac buttons ??? and a drop shadow?

jcbrand 8y ago
Yes, the Mac buttons really seem unnecessary and a subtle advert and bias towards Macs.
tinus_hn 8y ago
Skeuomorphic is more than a tired cliche buzzword for pretend designers that want to voice their disagreement. It actually is a style for ornamental designs that mimic real-world things. Three flat-colored circles in a row on a flat surface do not look like realistic items at all, they are actually the opposite, a stylized representation of a real life object.
- platz 8y ago
  in this context, it's being used more in the "spirit" than in the traditional direct physical resemblance. In this context, the "spirit" is indicating that simulating a "mac window", which serves no major purpose in elucidating source code, which is analogous (but not strictly identical, of course) to simulating physical buttons in another context.
  - tinus_hn 8y ago
    So it’s the same, except it’s something else completely.

themadcreator 8y ago

The quality of the text rendering could really be improved by using subpixel render https://en.wikipedia.org/wiki/Subpixel_rendering https://en.wikipedia.org/wiki/Subpixel_rendering. Most desktop apps do this. Your browser does it. Your terminal probably does it. VSCode does it. Even the canvas tag in browsers supports this. Basically, every place you're likely to read code is going to look better than the images generated with this.

adamzochowski 8y ago
Subpixel rendering requires knowing the pixel orientation (are sub pixels left to right or top to bottom) and the order they are in (rgb vs bgr) and finally assume that the display screen is in real full color mode, and not some limit color space like YUV420.
- tofof 8y ago
  Which is why it's insane that Windows 8.1 broke the cleartype tuner and it's still broken in 10 to this day. See Noel's comment (at the bottom) of https://social.technet.microsoft.com/Forums/en-US/768bd013-cff9-4a80-a3f9-5ca04340871e https://social.technet.microsoft.com/Forums/en-US/768bd013-c...
  - village-idiot 8y ago
    Didn’t they invent sub pixels?
  - pjc50 8y ago
    Yes, there's something horribly persistently wrong there; all Metro apps render conspicuously ugly fonts for me now.

FridgeSeal 8y ago

Really? This honestly has to be one of the most useless things I've seen implemented. Legitimately what is the point?

fake-name 8y ago

Did you feel there were not enough projects out there already named carbon? Jesus, at least change the name. Carbon is [already a thing](https://github.com/graphite-project/carbon https://github.com/graphite-project/carbon).

tazard 8y ago
To me Carbon makes sense, since it's like a 'carbon copy' of the code. Most project names are not unique words. And I for one have a hard time picking names for projects. Just curious, but what would you think would be a better name for this project?
- fake-name 8y ago
  Anything, as long as it has < 100 google results. At least, plonk the project name into the github search, and see if there are existing projects using exactly that name. I found at least EIGHT other projects with more then 100 stars already named "carbon". At least one of them is VERY widely used (carbon, which is the time-series backend for graphite). Basically, you're actively making life harder for users when you decide to name-collide with existing active projects.
  - marmaduke 8y ago
    It would be interesting if Google providing away to search for unlikely phrases. Maybe their data structures would allow some sort of direct enumeration based on inverse tf-idf.
jwilk 8y ago
https://news.ycombinator.com/item?id=15619342 https://news.ycombinator.com/item?id=15619342

sbr464 8y ago

This would be good to use for Medium posts, since the built in code formatting is so bad, especially, especially on the mobile app, since it won’t rotate to landscape.

adeora 8y ago

It's quite annoying that the source code editor doesn't display the edit cursor - makes editing text exceedingly difficult. Any chance you could add display of that cursor back in?

altbdoor 8y ago

I did make something similar before, but I guess mine is more inferior in many ways. https://altbdoor.github.io/code-screen/ https://altbdoor.github.io/code-screen/

andrewguenther 8y ago

It would be nice if you could select text in the SVG images.

aiNohY6g 8y ago
Just like TermToSVG ? https://github.com/nbedos/termtosvg https://github.com/nbedos/termtosvg

gammatrigono 8y ago

> Image of text This techno-artistic wackiness needs to stop.

GrumpyNl 8y ago

Why not just take a screenshot, i dont get it.

klmr 8y ago
I similarly don’t get the enormous popularity of Carbon but it offers two things that a screenshot doesn’t: • It frames the code properly; this is an aesthetic choice, and certainly subjective, but many people seem to prefer it. At the very least, it provides consistent, even margins around the code which are fiddly to achieve with a screenshot. • If you paste a normal PNG screenshot on Twitter, it gets converted to JPEG and downsampled, creating ugly block artefacts around the text and changing the colours. You can avoid this by making at least one pixel of the PNG partially transparent. Carbon does this automatically (but you can of course do it manually with a screenshot).

onion2k 8y ago

The VSCode plugin "polacode" makes nice looking images of code using your current theme. It's really nice. https://github.com/octref/polacode https://github.com/octref/polacode

netgusto 8y ago
Yes! Did not know that plugin. Just tested it, seems to work really well. Thank you.

another-cuppa 8y ago

Please show me source code as plain text. My fonts and colour preferences are better than yours.

jedimastert 8y ago

Just so you know, your project has a pretty big name collision with a PHP library (called Carbon)[1]. It extends PHP's DateTime API. I know that there probably aren't a huge amount of PHP devs around here, but one of, if not the most, popular PHP libraries in production. It's not a huge deal I guess, not being in the same space, but I just thought you should know.

viggity 8y ago

what a perfect compliment to yesterday's post about PaintIDE.