
Carbon – Create images of your source code - netgusto
https://github.com/dawnlabs/carbon
======
tarboreus
Ugh, making accessible plain text into inaccessible images. As a blind person
I really hate this.

~~~
lisowski
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
>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).

~~~
tedmielczarek
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.

~~~
colemickens
Hyperlinks work just fine though. Who saves an image of code? For what?

------
onion2k
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
Yes! Did not know that plugin. Just tested it, seems to work really well.
Thank you.

------
fake-name
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
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
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
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.

------
jazzyjackson
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
You will be losing the audience though

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

------
jedimastert
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.

------
themadcreator
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
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
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-c...](https://social.technet.microsoft.com/Forums/en-
US/768bd013-cff9-4a80-a3f9-5ca04340871e)

~~~
pjc50
Yes, there's something horribly persistently wrong there; all Metro apps
render conspicuously ugly fonts for me now.

------
FridgeSeal
Really? This honestly has to be one of the most useless things I've seen
implemented.

Legitimately what is the point?

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

~~~
tinus_hn
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
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
So it’s the same, except it’s something else completely.

------
person_of_color
How does this project have 13k stars?!

~~~
onion2k
13,000 people clicked on the star button.

------
cyberferret
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
Do you have PrintScreen key on your keyboard?

~~~
Dzugaru
Please, don’t ever print screen any code you want to share with someone, it’s
really bad for your karma.

------
altbdoor
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/)

------
adeora
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?

------
sbr464
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.

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

~~~
aiNohY6g
Just like TermToSVG ?
[https://github.com/nbedos/termtosvg](https://github.com/nbedos/termtosvg)

------
simplysimple
just...take a screenshot of your editor

~~~
adamzochowski
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.

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

~~~
klmr
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).

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

