Carbon: Create and share images of source code
carbon.now.sh
carbon.now.sh
Now it looks like https://user-images.githubusercontent.com/8397708/63456416-b... complete with weird cursive font and all.
IMO this niche obsession with cursives, ligatures and stuff in programming fonts actually hurts first impression for a significant percentage of people landing on this README.
I disagree. When working at night, even with indoor lighting; pastel colors and lower intensity of darker themes reduce eye-strain significantly. Daily eye-strain takes its toll at night even if you didn't code or use screens during the day.
I personally don't like ligatures as much too but, it's a choice after all. People shall enjoy the work they do, shall customize their working environment to reduce friction as much as possible for them.
This is an extension of desktop customization and I look some of them with awe. I don't spend that much time customizing my coding environment and terminals. I also don't share some of the choices they make but, as I said, environment is a personal thing after all.
> Whoever came up with the idea that blue on black was a good color for displaying code on a screen, or dark green on black was a good idea for comments should just stop using computers together with everyone who installs and uses those themes.
Instead, we can use the themes which we like and suit us best, can't we?
My monitor has a blue blocking filter and I personally keep it enabled 7/24 but, reducing the overall light intensity via dark themes works better for me especially, when coupled with the blue blocking filter of my monitor.
OTOH, it's important to note that I always preferred darker themes on my systems since I started to use computers.
Was probably working at night and didn't want to be surrounded by lights 24/7...
$ poetry init
This command will gide you through creating your ~invisible text~ configBut yeah, using ligatures in code that’s meant to be shared isn’t a great idea.
I find ligatures more readable because for example I read the => ligature faster than the two-character equivalent. I find it less precise because someone who sees the ligature may not be clear what it's supposed to be (when I first saw a ligature font, I thought it was a unicode character).
I wonder why physical keyboards lack unicode support. Virtual keyboards often have great support for this. Older keyboards could also input a lot of symbols:
https://upload.wikimedia.org/wikipedia/commons/4/47/Space-ca...
For instance, look at the list of ligatures for Fira Code[1] and without referencing the monospace counterparts on the right, tell me if you can tell how to reproduce each one without a lot of guesswork.
Edit: I’m blind and didn’t see the comment on the bottom :/ This is the cursive font I’m talking about.
Edit: Okay, it's Dank Mono. Should have checked the font options on the website.
Edit: In case it wasn't clear, only the font used for the comment is cursive.
“style of penmanship in which some characters_are_written_joined_together in a flowing manner, generally for the purpose of making writing faster, in contrast to block letters.“
https://en.wikipedia.org/wiki/Block_letters:
“a sans-serif. (or "gothic") style of writing Latin script in which the letters_are_individual_glyphs, with no joining”
Here, the s and the l look like they are cut out of some cursive text, but even they clearly are individual glyphs. The other letters in this example to me clearly are block letters.
Examples of truly cursive fonts are Lucida Handwriting and Zapfino.
Having said that, Wikipedia (https://en.wikipedia.org/wiki/Italic_script) describes italic as semi-cursive, and https://en.m.wikipedia.org/wiki/Cursive_script has a few other ‘cursives’, some of which don’t connect letters.
What do you think cursive means? It means joined up writing. All the letters in this entire screenshot are separate - not joined up.
This is especially annoying because it implies the user is not part of the software's target audience. The developers use Apple and everyone who doesn't is an afterthought.
https://en.wikipedia.org/wiki/Affordance
Best example of affordance is handles on doors: horizontal spanning the whole door for push to open and vertical for pull to open.
> "In 1988, Donald Norman appropriated the term affordances in the context of human–machine interaction to refer to just those action possibilities that are readily perceivable by an actor."
Putting a door handle on a door is an affordance: you can see how to open the door (action).
Putting window controls on something that's not a window and can't be controlled as such is not an affordance: it's misleading. There's no action to be perceived here.
edit: i can't believe i have to explain this. the window serves exactly the same purpose as offsetting code blocks in text in a different font, in a different color, with a different background: it's to indicate that there's something meta-semantically distinct about this block of text from other blocks of text. to contextualize the code even moreso accomplishes the same goal - implicitly communicating distinction.
And what perception is that?
The macOS semaphore controls make the square look like a macOS window. Not all windows are text editors: people still have to look at the content of the window in order to understand it. Not all text editing is source code editing: people still have to read the text in order to realize it's source code. The Carbon twitter contains images of error logs and ASCII art.
Monospaced typefaces and syntax highlighting of the text are the design features that truly denote source code. A container with contrasting background color distinguishes the source code from the other elements on the page or slide.
> the window serves exactly the same purpose as offsetting code blocks in text in a different font, in a different color, with a different background: it's to indicate that there's something meta-semantically distinct about this block of text from other blocks of text.
They don't have the same purpose. The information conveyed by all of those elements are completely different. Monospaced, syntax highlighted text looks like source code to any programmer. Placing that text inside a container allows it to be quickly distinguished from the surrounding prose.
Adding macOS controls to this design makes it look like source code that's being edited in macOS. Why convey those additional bits of information? Does the code not work outside of macOS? Are users of other systems not part of the target audience? Is the author subtly signaling their use of macOS to other macOS users in the audience?
Regarding Carbon, it's obvious to readers that the image is just that—an image—and that the buttons cannot be interacted in any way and don't afford the reader to perform any action.
At best, it suggests that the content initially lived within an OS window, with some buttons that afforded some interaction. But so does your browser and music player and every other app that have nothing to do with editing source code. The monospaced font, syntax highlighting, and context are more than enough anyway.
IMO it has nothing to do with affording anything and the goal is just to look fancy (which is fine since that's explicitly the goal). Try to picture for a second the same screenshots but with Microsoft Windows-style buttons and it's obvious that nobody would use it since it would look low-rent and clash with the "crafted with <heart_emoji> in San Francisco" footer.
you could easily have a bar across the width of the door that's narrow and protrudes and affords the ability to clasp it. no the real intent is to communicate to you that amount/direction of force that you need to apply; a bar across the width communicates push hard because the door opens away from you while a handle at the edge communicates pull moderately because you have lots of leverage and the door opens towards you (because if it were at the center you would open the door onto yourself).
>But so does your browser and music player and every other app that have nothing to do with editing source code
it is obviously emulating vscode/monaco editor that the maintainer assumes most people are familiar with. like there's literally a vscode extension that produces almost the same exact images
https://marketplace.visualstudio.com/items?itemName=adpyke.c...
We have a MediaWiki and, for some reason, the administrator wouldn't be bothered to set up syntax highlighting correctly. So, after asking a number of times, I thought I would just use Carbon and be done with it and have the docs looking a bit nicer.
Immediately, I thought about the issue of having code as images. You put an example in the docs but the developers can't just copy and paste it into their code. But then I realized I actually wanted this. I didn't want them to continue copy&pasting code without understanding a single thing they do, like they have been doing for the last twelve years.
I have it set up to remove the window frame and background, and use Iosevka. It's much less noisy that way.
In this case though, as I said, the setting is very controlled (internal, temporary docs) and I explicitly did not want it to be easy to copy.
Thanks.
Update: Still seems that it does (scroll down) [0]
Edit: Oops, I just remembered that HackerNoon moved off Medium to their own CMS, but those Gists did used to work on Medium too, complete with code formatting.
[0] - https://hackernoon.com/building-a-face-recognition-web-app-i...
I get embedding Codepens and stuff for rendered code. Embedding gists for static, verbatim code is just sad. (Not saying it doesn't have its uses, but having to use it is another matter.)
But this is far from the most annoying thing about Medium, so meh.
To begin a code block, go to a new line and type ``` (triple backtick).
For inline code in a paragraph, type a single backtick ` to begin and end your code.
Or highlight some text and press the backtick key.Looking for a way to copy the code, eg. https://carbon.now.sh/#code-ID
You can also get a link if you choose "Export -> Open". It will open a new window/tab with the URL of the generated image.
I see a lot of people complaining about not being able to copy-paste code. That's a legitimate issue. As chrisma0 pointed out, the URLs can have a one-to-one correspondence with gists, so in blog posts you can just link directly to gists with little loss of convenience. Also note that it seems to use Twitter's alt text correctly at least.
An even better option would be to use a steganographic technique like pico-8 carts do to embed the text and then use an extension (or oembed or something) to surface that where appropriate.
pico-8 cart details:
[1] https://marketplace.visualstudio.com/items?itemName=adpyke.c...
You can see how it works in the Tweet where I announced it.
Now that I think about it I should probably have some example or something to see what it's about because I am realising it's not really clear when you open the page
Maybe through some accessibility feature it's possible?
If you are looking for other methods for creating images, you can always go simple screenshotting. For my research, I use a combination of Dom-to-image [2] and CodeMirror [3] so that I can generate images from the CodeMirror interface which students also use to retype the code.
[1] https://go.ncsu.edu/typing-exercises
It’s my favourite typeface for code by far. I enjoy the sort of 1980s “Unix Manual” width of it. Sort of like the writing on architecture plans, which in the last would have been drawn by a plotter.
The face in Carbon is close but had too many distracting letter forms for presenting content.
Inside the article, all source code is posted as images using Carbon. That way, your readers can follow along and understand what you're doing.
But you didn't have to give away the source code, so you can still ask people to sign up for your $5 monthly membership which grants access to all source code projects as downloads.
Of course, your dear readers could also manually type in all the source code shown in the Carbon images, but at that point lazyness kicks in and they pay the $5.
My personal opinion is that knowledge should be shared, so I'm not sure if I consider such an approach good for our craft. But I can understand the business model that is created by having a tool such as this, which allows indie developers to earn a passive income from tutorials.
The next logical iteration is then to put your source code screenshots into a video, e.g. https://gorails.com/
It should smartly take my screen size into consideration and find a optimal balance between font size, line breaks and readability. I'm fine doing some small horizontal scrolling if that would improve readability. Kind of a "prettier" for sharing code automatically running when a reader reads it on any device.
I especially like that it works directly with GitHub gist IDs (https://carbon.now.sh/c4ad9e84088d867a2b4670c3dc50e67a) and that the tool considers making the image accessible for people through image descriptions: https://help.twitter.com/en/using-twitter/picture-descriptio...
EDIT: Seems to output SVGs, they just aren't well supported right now: https://github.com/carbon-app/carbon/issues/943
For a demo.
Wasn’t clear from readme on quick blush that there was a live demo.
Copy and paste aside, it is ideal for showcasing important bits of code such as variable or function names that you want to stand out for illustrative purposes. It is a wonderful teaching tool.
In any case - who wants to be a copy and paste programmer?? </wink>
[0] https://developer.paciellogroup.com/blog/2015/09/short-note-...
And at least you've got the original markdown and PDF/HTML exports for extra accessibility.
1. With the current design standards, "beautiful code" just means lots of useless whitespace everywhere. Code should be compact and functional, not airy.
2. It breaks copy & paste, so this is really only useful for showing off, but not for actually communicating about code or writing tutorials.
3. This tool has lower contrast and lower readability than black text on a white background.
Combined, it's a tool for bragging about the wrong metric while excluding the elderly.
I would have to disagree for similar reasons to fooker.
> It breaks copy & paste, ... not for actually communicating about code or writing tutorials.
I posted it in another respond, but my research shows retyping code can be beneficial for learning. This extends to pre-internet coding books where that was the only way to recreate the code and Zed Shaw's "Learn Python the Hard Way" [1] where he explicitly states "You must type each of these exercises in, manually. If you copy and paste, you might as well not even do them."
Airy and functional seems better for readability.
So my personal preference is strongly against airy and more like "cram what you can into one line".
But given the quick downvotes to my parent post, it seems I'm in the minority with my view that source code should be first and foremost useful.
This is how code gets thrown away and rewritten. Fixing bugs in dense code is a nightmare, if the code was written by someone else.