[HN Gopher] Show HN: Ray.so - Create beautiful images of your code
___________________________________________________________________
Show HN: Ray.so - Create beautiful images of your code
Author : thomaspaulmann
Score : 213 points
Date : 2021-02-17 16:35 UTC (4 hours ago)
(HTM) web link (ray.so)
(TXT) w3m dump (ray.so)
| dwwoelfel wrote:
| If you're looking for this, but with an API, I built
| https://sourcecodeshots.com to power syntax highlighting and Open
| Graph images of code for https://essay.dev.
|
| I initially used carbon.now.sh, but they don't have an API, and
| the community-provided API is pretty slow because it uses a
| headless browser to generate the image.
|
| Source Code Shots uses VSCode's syntax-highlighting engine, so
| the highlighting is about as good as you can get and I can fully
| support a lot of languages that CodeMirror or Highlight.js
| haven't gotten to.
|
| The docs, https://sourcecodeshots.com/docs, have plenty of
| examples of how to use it as an API. You can email me at
| daniel@onegraph.com if there's something you need that it doesn't
| support.
| notafraudster wrote:
| This is pretty cool but I notice the default R fibonacci code
| is like comically non-idiomatic (or poorly linted, even).
|
| Since I suspect the cause here is copy-pasting off of an
| algorithms/code gallery, my guess is that there are examples
| across other languages. I checked everything I feel
| idiomatically comfortable enough and the others all seemed
| fine, but there are a lot of options here so who knows.
| dwwoelfel wrote:
| If you have a good recursive version of Fibonacci for R, I'd
| love to swap it out for what I currently have.
|
| For the languages I don't know, I looked at the code people
| posted on rosettacode.org
| asidiali wrote:
| This is awesome! Would love the ability to alter the background
| of the window beyond light & dark.
| thomaspaulmann wrote:
| We wanted to keep a native-like feel. Anything specific in
| mind? More color ranges?
| asidiali wrote:
| Makes sense - I specifically want some darker shade of blue
| or purple, but that's because I want the window to match the
| colors from my brand palette, and not just be grayscale.
|
| The dark/light definitely look good on most palettes
| regardless, so great defaults.
| kaeruct wrote:
| Really hard to use for me on mobile Chrome. Is it supposed to
| work on mobile?
| neilpanchal wrote:
| There is a certain level of straightforwardness that I gravitate
| towards when it comes to engineering graphics. Purple/Megenta
| gradients are the 2020 era Stripe/Apple-inspired aesthetic.
| Obviously, I am an outlier here and I do not want to diminish
| your efforts the slightest!
|
| Beauty is subjective and I do not resonate with the cliche
| aesthetic (gradients, flat UI, soft pastel colors, rounded
| corners). It's a trend and it will come and go. I am inclined
| towards the timelessness of the International Style, Swiss
| Graphics, Brutalism, ultra modernist and offensively low-
| aesthetic-value aesthetics such as:
| https://git.sr.ht/~sircmpwn/core-go/tree/master/item/server/...
| leifg wrote:
| I love it. Will definitely use this for presentations.
|
| The only missing feature I really need is Elixir syntax support
| (even though Ruby works for most examples)
| mechero wrote:
| Really nice project! This could be very useful for technical /
| programming blogs. Are you planning to offer a REST API?
| thomaspaulmann wrote:
| Yeah, we wanted to add an API at some point and also provide a
| deeper integration with Raycast. What would you like to build
| with the API?
| mechero wrote:
| Say I have code snippets I want to include in a Jekyll blog
| for example. I could call your API from a pipeline process,
| store the images and link them from the posts. A plugin would
| be deeper integration, but an API would just work and would
| be great already.
|
| I guess a similar process could work for other blogging
| platforms.
| thomaspaulmann wrote:
| Love the CI integration. A simple API should allow to build
| plugins for blogging platforms.
| kaeruct wrote:
| Wouldn't this make the code snippets completely
| inaccessible since you cannot copy text from an image?
| mechero wrote:
| Indeed, but I'd link the GitHub code sources below each
| picture and provide good alt descriptions. JS plugins
| like Highlight or Prism end up building massive HTML
| making e.g. google's pagespeed tools complain about DOM
| sizes.
|
| And, anyway, most people would rather clone the public
| repo or use GitHub for copy/paste purposes.
| WORMS_EAT_WORMS wrote:
| Love it! Congrats and cool project. I think you killed this and
| have something awesome in your portfolio for a long time.
|
| My only suggestion is these code snippets are fire on Twitter for
| a lot of people getting their RT/likes/following on.
|
| Specifically, that means maybe adding an option for forcing some
| sizes that are ideal for share graphics (width/height, auto font-
| size, auto centering, etc..). Take the guess work out of it. Good
| luck!
| thomaspaulmann wrote:
| Great one! We want to add a share on Twitter function and then
| the sizes matter. For now we went with the simple approach but
| definitely up for improvements.
| WORMS_EAT_WORMS wrote:
| Dope. Automatically like this goes a long way I'd say:
|
| Before: https://ibb.co/ZYxxFY5
|
| After: https://ibb.co/PC98vDr
| alpaca128 wrote:
| I may be rather opinionated on this, but there are literally
| community efforts to transcribe memes and other pictures
| containing text so visually impaired people get access to
| content, and meanwhile about every 3-4 weeks HN features yet
| another web app that basically takes human readable text and
| stores it in one of the most inefficient and inaccessible ways
| possible. It becomes invisible to screenreaders, impossible to
| copy-paste like you'd otherwise expect from text based content.
|
| I don't want to come across as all too negative, but it somehow
| feels really strange to have so many websites that basically just
| take a fancy screenshot of text. To me it kind of comes across
| like a developer version of those Instagram pictures of meals at
| restaurants.
| Lorkki wrote:
| > a developer version of those Instagram pictures of meals at
| restaurants
|
| I guess those pictures are popular because food is easy to
| relate to, and people build lots of social interactions around
| eating. Developers also relate to things about code, and like
| to share those relations among each other.
|
| I feel some puzzlement about the format too, though. These days
| it's so easy to make text on the web look nice, and it's easily
| accessible, copyable and searchable.
| jeswin wrote:
| If you're seeing many people building the same thing, it's
| probably because there's a need that you might have overlooked.
|
| Here's one: people want to share formatted snippets on Twitter.
| They often post a link to the code below the pic, but being
| able to see it within the tweet is quite useful.
| strangetortoise wrote:
| I think one of the problems here is that people wanna share
| code snippets on social media, where generally, the other
| approaches mean linking to an external github gist or similar,
| which isn't as visible. I'm not sure if I see a good solution,
| other than suggesting that the "link previews" for social media
| sites display the code snippet inline, if it's a link to a
| pastebin/github gists page.
|
| Edit: Perhaps something can be done by somehow embedding the
| content into the image (EXIF?) Metadata?
| abc_lisper wrote:
| Is there way to keep it as text, but make it uneditable?
| Ohh.. wait!
| f-word wrote:
| It's not like the alt attribute stopped existing or anything.
| This simply lets you make what amounts to pretty screencaps of
| your code
| jaegerpicker wrote:
| Some people love the text from an aesthetic view. I don't think
| we should be against that but rather to advocate the
| improvement of accessible technology.
| neilpanchal wrote:
| Engineering documentation shouldn't be about making pretty
| pictures, it should be about functionalism and putting that
| at the top of the list just below accessibility.
|
| What do you know, people love fancy and decorative things.
| Just human nature.
| jaegerpicker wrote:
| I'm not sure this is about Engineering documentation. I
| mean is that the purpose of the site? I agree Documentation
| should put function first but this is more about Aesthetics
| then documentation. A form of art if you will.
| wongarsu wrote:
| We have great accessible technology for colored text with
| background images.
| whimsicalism wrote:
| Just not a valid concern in 2021
| xwdv wrote:
| Just throw it in the alt text
| jeffalyanak wrote:
| What would be great is if it generated an SVG with the screen-
| reader accessible title and description built in.
|
| <svg role="img" aria-label="[title + description]">
| <title>[title]</title> <desc>[long description]</desc> ...
| </svg >
| riedel wrote:
| Good point. Totally agree. SVG would be nice way out but it is
| also hard to make accessible in comparison to pure html.
| Another example are badges. Even shields.io SVG badges are hard
| to make screen reader compatible (personally gave up on this
| some time ago). In the end inclusive design will make the web
| better for everyone beyond the short wow effects.
| offtop5 wrote:
| This looks really cool, I would love some way to integrate it
| with a program tutorial.
|
| Anyway you can use some type of cloud IDE to run these examples.
| For JavaScript that should be pretty easy
| shuntress wrote:
| Not trying to be argumentative but this is completely over my
| head and I do not understand the purpose.
|
| Is there some way to get a CSS snippet out for publishing in a
| blog/article/presentation or is it only images?
|
| edit: is this purely to add a rounded border/pad that you
| wouldn't get with WND+SHIFT+S / CMD+SHIFT+4 for sharing on sites
| where you don't control the style?
| redisman wrote:
| I'd love this if it was a CSS thing like when people embed
| Twits. I'm just not sure when you would want an image of code.
| Most likely use case seems like a README on github or your
| product page but then you'd want it to be plain text right?
| whalesalad wrote:
| Fun to play with. Most surprising is the auto-indent when typing
| Clojure code.
|
| The #1 missing feature is the ability to select a different
| typeface. #2 would be the ability to serve up an image from a URL
| like a pastebin or a-la speedtest.net speed test
| (https://www.speedtest.net/result/10946633415.png)
| thomaspaulmann wrote:
| The URL with a preview is on our radar. Gonna look into it when
| we have some spare time. This is a side project of our team
| that came out of a hackathon.
| thomaspaulmann wrote:
| We wanted to keep the customisations simple that's also why we
| have curated colors.
| RocketSyntax wrote:
| font size =)
| thomaspaulmann wrote:
| Wanna change it? We curated the themes to make it easy to use.
| Maybe some small/medium/large setting for fonts could help.
| r1ch wrote:
| Very pretty, though syntax highlighting for HTML seems to be
| conspicuously absent.
| thomaspaulmann wrote:
| Thanks for reporting. We need to add it for sure!
| zardinality wrote:
| Similar website: https://carbon.now.sh/ . They probably have more
| themes but I like this conciseness.
| 112 wrote:
| Carbon is awesome, works offline, and can be integrated with
| any decent editor, so you can just select code and press a
| keybind to get the image on your clipboard.
| jimmy2020 wrote:
| I didn't know there's an editor integration to Carbon. Is
| there a specific extension for VScode?
| swrj wrote:
| yes - https://marketplace.visualstudio.com/items?itemName=e
| ricadam...
| jimmy2020 wrote:
| thank you!
| curun1r wrote:
| Also: https://github.com/Aloxaf/silicon
| kirktrue wrote:
| Looks great!
|
| I know it should have been more obvious, but I didn't realize the
| text was editable. I was looking for an 'upload your code'
| button. Maybe put one of those "Try Me!" badges with an arrow
| pointing to the code like on toy boxes?
| umvi wrote:
| It's par for the course with Apple-esque UIs. Like the classic
| "invisible scrollbar"[0] that prevents you from knowing you can
| scroll something down and see more. Form > Function
|
| [0] https://svenkadak.com/blog/scrollbar-blindness
| chrisseaton wrote:
| How can you make text look editable?
| zardinality wrote:
| Blink the cursor at the end or highlight the text area
| sound reasonable to me
| bikeshaving wrote:
| Trying to get an input to autofocus with any reliability
| in browsers is the third hardest problem in computer
| science.
| airstrike wrote:
| Fake the cursor if needed
| lights0123 wrote:
| You can make an (obviously) fake blinking cursor at the
| end possibly with a label showing that it's editable.
| jstanley wrote:
| Put it inside a textarea, and don't break the textarea
| styling.
| umvi wrote:
| My point is that when you focus too much on beauty, you
| tend to sacrifice some functionality. There are tons of
| ways to signal that text is editable, but most of them are
| "ugly" or not elegant. To go to the opposite extreme, you
| could build a functionally equivalent website that is super
| basic and has no CSS - literally just a textarea to edit
| the code, checkboxes for the options, and buttons to
| generate the image. You get the same output, but it's not
| as pleasing to look at - but hey, it's highly functional
| and you know everything you are allowed to do at a glance.
|
| The goal for most people is to strike a balance between
| form and function. In my opinion, I personally think you
| should always err on more function than form, but the
| Apple-esque UI design philosophy tends to favor form over
| function - you know, getting rid of "ugly" UI elements that
| traditionally telegraphed functionality.
| thomaspaulmann wrote:
| Good feedback! We got a similar request for the title. Gonna
| look into how we can improve it
| paveloom wrote:
| Why? There is already Carbon (https://carbon.now.sh) for that.
| jack_riminton wrote:
| I said the same about the wheel. We were perfectly ok with Oxen
| umvi wrote:
| Why not? Competition is healthy!
| jimmy2020 wrote:
| It is but maybe for a more wider area
| da_big_ghey wrote:
| I like it, thanks for making this. Any chance you could add an
| option to remove the three dots in the top-left?
| thomaspaulmann wrote:
| We wanted to achieve some native looking windows therefore the
| three dots. Though, it's very macOS specific. We want to keep
| the configurations to a minimum to get quickly good looking
| results. Maybe some minimal theme could work where we strip
| away most of the stuff. Just thinking out loud...
| FunnyLookinHat wrote:
| Neat! This solves a problem for me with generating slides that
| include code snippets. I'm sure it helps with social media images
| and whatnot as well. It'd be great if you could also get a HTML
| snippet to embed into a site that would be a11y friendly!
| thomaspaulmann wrote:
| a11y was mentioned a bunch of times and we'll take a look into
| how do better support it.
| ironmagma wrote:
| Feature request: This seems half-the-way there to a site I've
| been wanting for a long time, one that will give you a printer-
| friendly syntax highlighted view of a codebase.
| Shared404 wrote:
| That sounds like a cool tool. It seems like Web is probably not
| the way to go for that though, as printing even just vanilla
| web pages can be a pain.
|
| I could see something like automating a typesetting tool
| working however.
|
| Edit: Side note, I'm kinda an idiot, so I could be wrong about
| web not being the right platform.
| [deleted]
| psz wrote:
| It begs for SVG export.
| thomaspaulmann wrote:
| Yeah popped up in our Slack community. Seems to be handy to
| embed it into READMEs?!
| pmarreck wrote:
| Unless it's Elixir.
|
| Elixir's notably missing ;)
| 0xDEEPFAC wrote:
| Cool, but.... no Ada, Pascal, or Delphi...
|
| R.I.P. : (
| tkzed49 wrote:
| Would be awesome if this supported SVG for better
| accessibility/making code copyable!
| thomaspaulmann wrote:
| Seems like a lot of folks wanna have SVG support. We'll take a
| look on how to support it. Do I understand it correctly that
| this is better to add it to a README?
| JarekS wrote:
| Or to a website - scales much better!
| simooooo wrote:
| Make a visual studio plugin with this, that lets you use your
| current theme, so you can make best use of VS Code's syntax
| highlighting
___________________________________________________________________
(page generated 2021-02-17 21:00 UTC)