5 ms·

Show HN: Code Hike – More than syntax highlighting

118 points by pomber 5y ago

vivganes 5y ago
As a daily user of Markdown, I was never aware of MDX. Your post helped me understand what it is :) I also like your idea of monetizing by "minimum" sponsors. How do you deal with people not wanting to sponsor because they don't want a monthly commitment but are willing to spend a fixed one-time sponsorship? Also, what tooling do you use to take care of the sponsorships?
- pomber 5y ago
  I use the GitHub API for getting the sponsors info. Some of the sponsors are fixed one-time (or two-times) sponsorships. I add them manually if the contribution is considerable.
pomber 5y ago
Hi! I'm looking for feedback and ideas before making this production-ready. You can see an early ancestor of this project on this post https://news.ycombinator.com/item?id=21536789 https://news.ycombinator.com/item?id=21536789 from two years ago (which had great feedback!). If you want to try it, beware that current docs are minimal. If you have questions or feedback GitHub Discussions is the best place to post them. Thanks!
- smoldesu 5y ago
  Why are certain examples "locked"? Nothing discourages me from using a tool more than an arbitrary popup telling me that I need to spend more money to get an idea of what your product is...
- keyle 5y ago
  I think it's a fantastic idea. Like a few posted, get to the point with the marketing. It's only later that I understood what it does. I'd take one of the more advanced gif, that showed highlights, code coming in, file changing, and I'd make that prominent at the top of the page, next to the tagline or marketing spiel. Remember the What is it, Why do I need it (and is it for me), as people come in and have no idea what it is!
- philipswood 5y ago
  The product looks interesting, I'm bookmarking the site to go checkout on desktop. On mobile (Chrome on Android) the site is super confusing and has a "hotel California"-vibe: "you can enter but never leave". Pressing the back button multiple times didn't work - I had to close the site.
  - pomber 5y ago
    Thanks. I couldn't reproduce the "Hotel California" bug, also Chrome on Android. Let me know if you have an idea of what could be the issue.
    - philipswood 5y ago
      Don't know what happened. Tried reproducing it, but no go. Thanks for checking.
- pieix 5y ago
  On the Lorem Ipsum code blocks: in typesetting Lorem Ipsum exists to provide the shape of text without the content. This seems directly contrary to the goals of your examples. Nobody likes looking at Lorem Ipsum and nobody ever reads Lorem Ipsum.
cdrini 5y ago
The marketing on the homepage needs an overhaul. Took me a really long time to understand the product! The automatic code changing at the top was super confusing. Clicking on the demos didn't work. A lot of the demos had locks on them (???), which is weird -- the demos help me understand the product, why would they be locked? More confusing, a lot of the locked demos had been unlocked by sponsors, so clicking on them worked! So why was the lock still there? Also the tag "more than syntax highlighting" is what threw me off. I thought this would be an IDE extension or something that extended syntax highlighting in some cool way. I thought you were just using markdown as an example. Maybe "supercharged markdown code blocks" might be a better tag line. That's probably the biggest thing I see as a production-ready blocker. The feature itself looks cool based on the few demos I saw.
- NmAmDa 5y ago
  I think the idea of having to sponsor to see the demos which should make people decide to sponsor/invest in the project because they find it useful for them is weird enough.
  - ljm 5y ago
    I'm not going to pay $9 a month to unlock what is effectively documentation. Make the product or library itself paid in some form, sure...but I don't understand why you would hold your own marketing material hostage that way. I also don't understand why there are video-based examples of what looks to be a React component.
- deecewan 5y ago
  > Everyone can see all the demos, but only sponsors can see the code for demos marked with . Locked demos are unlocked for everyone after being sponsored by five sponsors. i think the demos are visible to everyone, but the _source_ is only viewable by sponsors. that said, still seems weird to lock away code that could make people use your product.
- pomber 5y ago
  Thanks for the feedback. > More confusing, a lot of the locked demos had been unlocked by sponsors, so clicking on them worked! So why was the lock still there? I didn't understand this part. Are you seeing locks on the first three demos?
joenr 5y ago
This is great. Dm me on Twitter when it’s ready so I can share it on toolhunt.dev. @jordienr
actually_a_dog 5y ago
Ok, so, real talk (and this isn't meant to be a shallow dismissal -- I'm truly interested in the answer): what can I do with Code Hike that I can't do with Pandoc (possibly with a custom filter or 2)?
- chishaku 5y ago
  I think the feedback loop would be much faster with Code Hike.
cercatrova 5y ago
Quite impressive, I didn't get it at first because I thought it was just MDX. Then I saw that there were changes in the video such as "```js focus=2,4[9:30],6", ans I saw that the code in the video was highlighted differently, then I understood the product. It's a way to annotate code more deeply than just with MDX. You need to make that much more explicit IMO, it needs to be quite clear when people read the site. I recommend a site that is more long form and describes the features well. Also get rid of the weird "sponsorship for unlocking documentation" model. Make the library sponsorware if you need to, as in you can't see the code until you sponsor, but why would you make the docs sponsored? They're what might entice people to actually pay to use your software. As someone else said, you're actually crippling your own sponsorships by hiding marketing material behind a paywall. Marketing should be free so that as many people see it as possible, and some subset will buy. If you cut off the top of that funnel, you just get fewer people buying.
- nmstoker 5y ago
  Agree completely. I could eventually figure out what it was doing but the speed of the videos flipping between examples looks like it was set by people who already knew what the message was, rather than for people who don't know it (yet)
  - cercatrova 5y ago
    Indeed, and that's always the issue with product creators writing their own marketing pages eh? They don't know how to dissociate themselves from the product and to look at it in terms of a normal person with no connection to or knowledge of the product.
  - Noumenon72 5y ago
    Thirded. I came away from this thinking, "Oh, this is a way to make those little code blocks with colored text on black background."
- aarondf 5y ago
  I'd be curious your take on https://torchlight.dev https://torchlight.dev. I went more long form.
aarondf 5y ago
I created a syntax highlighting API earlier this year with some of the same features: https://torchlight.dev https://torchlight.dev. I've got a handful of paying users and a few hundred free. I'm happy to see syntax highlighting being pushed forward! I'll definitely be following along, it's beautiful stuff.
- danielskogly 5y ago
  Just a small heads-up that the first 9 code examples has double scrollbars (see "Scrollbar Blindness" [0]). It's often better with `overflow-x: auto` than `overflow-x: scroll` :) [0]: https://web.archive.org/web/20210226184710/https://svenkadak.com/blog/scrollbar-blindness https://web.archive.org/web/20210226184710/https://svenkadak...
  - aarondf 5y ago
    Ah good note. Thanks.
- ushakov 5y ago
  lol, people paying money for this?
  - isakkeyten 5y ago
    Right? I'm 99% sure this thing uses https://github.com/shikijs/shiki https://github.com/shikijs/shiki
    - orta 5y ago
      I've also made a pretty complex thing with shiki (shiki-twoslash which you could say is similar to torchlight but just for TS/JS) Torchlight definitely a good chunk of work on top of shiki, and as an external API it might be much easier to work with in many non-JS ecosystems.
      - aarondf 5y ago
aphroz 5y ago
Everybody is saying that they didn't got it, but then they got it, and I am still wondering what it does. It looks like Markdown to me. So what is it?
- pomber 5y ago
  Here is an example: This page: https://code-hike-sample.vercel.app/ https://code-hike-sample.vercel.app/ is created entirely from this mdx file: https://raw.githubusercontent.com/pomber/code-hike-sample/main/content/foo.mdx https://raw.githubusercontent.com/pomber/code-hike-sample/ma...
andrewingram 5y ago
Is MDX going to be the only way to use it? I prefer authoring content with WYSIWYG tools (block editors and so on), so would love to be able to use this kind of thing with those.
- pomber 5y ago
  Yes, the stable API will be MDX-only at least for the first version

118 points by pomber 5y ago

As a daily user of Markdown, I was never aware of MDX. Your post helped me understand what it is :) I also like your idea of monetizing by "minimum" sponsors. How do you deal with people not wanting to sponsor because they don't want a monthly commitment but are willing to spend a fixed one-time sponsorship? Also, what tooling do you use to take care of the sponsorships?

pomber 5y ago
I use the GitHub API for getting the sponsors info. Some of the sponsors are fixed one-time (or two-times) sponsorships. I add them manually if the contribution is considerable.

pomber 5y ago

Hi! I'm looking for feedback and ideas before making this production-ready. You can see an early ancestor of this project on this post https://news.ycombinator.com/item?id=21536789 https://news.ycombinator.com/item?id=21536789 from two years ago (which had great feedback!). If you want to try it, beware that current docs are minimal. If you have questions or feedback GitHub Discussions is the best place to post them. Thanks!

smoldesu 5y ago
Why are certain examples "locked"? Nothing discourages me from using a tool more than an arbitrary popup telling me that I need to spend more money to get an idea of what your product is...
keyle 5y ago
I think it's a fantastic idea. Like a few posted, get to the point with the marketing. It's only later that I understood what it does. I'd take one of the more advanced gif, that showed highlights, code coming in, file changing, and I'd make that prominent at the top of the page, next to the tagline or marketing spiel. Remember the What is it, Why do I need it (and is it for me), as people come in and have no idea what it is!
philipswood 5y ago
The product looks interesting, I'm bookmarking the site to go checkout on desktop. On mobile (Chrome on Android) the site is super confusing and has a "hotel California"-vibe: "you can enter but never leave". Pressing the back button multiple times didn't work - I had to close the site.
- pomber 5y ago
  Thanks. I couldn't reproduce the "Hotel California" bug, also Chrome on Android. Let me know if you have an idea of what could be the issue.
  - philipswood 5y ago
    Don't know what happened. Tried reproducing it, but no go. Thanks for checking.
pieix 5y ago
On the Lorem Ipsum code blocks: in typesetting Lorem Ipsum exists to provide the shape of text without the content. This seems directly contrary to the goals of your examples. Nobody likes looking at Lorem Ipsum and nobody ever reads Lorem Ipsum.

cdrini 5y ago

The marketing on the homepage needs an overhaul. Took me a really long time to understand the product! The automatic code changing at the top was super confusing. Clicking on the demos didn't work. A lot of the demos had locks on them (???), which is weird -- the demos help me understand the product, why would they be locked? More confusing, a lot of the locked demos had been unlocked by sponsors, so clicking on them worked! So why was the lock still there? Also the tag "more than syntax highlighting" is what threw me off. I thought this would be an IDE extension or something that extended syntax highlighting in some cool way. I thought you were just using markdown as an example. Maybe "supercharged markdown code blocks" might be a better tag line. That's probably the biggest thing I see as a production-ready blocker. The feature itself looks cool based on the few demos I saw.

NmAmDa 5y ago
I think the idea of having to sponsor to see the demos which should make people decide to sponsor/invest in the project because they find it useful for them is weird enough.
- ljm 5y ago
  I'm not going to pay $9 a month to unlock what is effectively documentation. Make the product or library itself paid in some form, sure...but I don't understand why you would hold your own marketing material hostage that way. I also don't understand why there are video-based examples of what looks to be a React component.
deecewan 5y ago
> Everyone can see all the demos, but only sponsors can see the code for demos marked with . Locked demos are unlocked for everyone after being sponsored by five sponsors. i think the demos are visible to everyone, but the _source_ is only viewable by sponsors. that said, still seems weird to lock away code that could make people use your product.
pomber 5y ago
Thanks for the feedback. > More confusing, a lot of the locked demos had been unlocked by sponsors, so clicking on them worked! So why was the lock still there? I didn't understand this part. Are you seeing locks on the first three demos?

joenr 5y ago

This is great. Dm me on Twitter when it’s ready so I can share it on toolhunt.dev. @jordienr

actually_a_dog 5y ago

Ok, so, real talk (and this isn't meant to be a shallow dismissal -- I'm truly interested in the answer): what can I do with Code Hike that I can't do with Pandoc (possibly with a custom filter or 2)?

chishaku 5y ago
I think the feedback loop would be much faster with Code Hike.

cercatrova 5y ago

Quite impressive, I didn't get it at first because I thought it was just MDX. Then I saw that there were changes in the video such as "```js focus=2,4[9:30],6", ans I saw that the code in the video was highlighted differently, then I understood the product. It's a way to annotate code more deeply than just with MDX. You need to make that much more explicit IMO, it needs to be quite clear when people read the site. I recommend a site that is more long form and describes the features well. Also get rid of the weird "sponsorship for unlocking documentation" model. Make the library sponsorware if you need to, as in you can't see the code until you sponsor, but why would you make the docs sponsored? They're what might entice people to actually pay to use your software. As someone else said, you're actually crippling your own sponsorships by hiding marketing material behind a paywall. Marketing should be free so that as many people see it as possible, and some subset will buy. If you cut off the top of that funnel, you just get fewer people buying.

nmstoker 5y ago
Agree completely. I could eventually figure out what it was doing but the speed of the videos flipping between examples looks like it was set by people who already knew what the message was, rather than for people who don't know it (yet)
- cercatrova 5y ago
  Indeed, and that's always the issue with product creators writing their own marketing pages eh? They don't know how to dissociate themselves from the product and to look at it in terms of a normal person with no connection to or knowledge of the product.
- Noumenon72 5y ago
  Thirded. I came away from this thinking, "Oh, this is a way to make those little code blocks with colored text on black background."
aarondf 5y ago
I'd be curious your take on https://torchlight.dev https://torchlight.dev. I went more long form.

aarondf 5y ago

I created a syntax highlighting API earlier this year with some of the same features: https://torchlight.dev https://torchlight.dev. I've got a handful of paying users and a few hundred free. I'm happy to see syntax highlighting being pushed forward! I'll definitely be following along, it's beautiful stuff.

danielskogly 5y ago
Just a small heads-up that the first 9 code examples has double scrollbars (see "Scrollbar Blindness" [0]). It's often better with `overflow-x: auto` than `overflow-x: scroll` :) [0]: https://web.archive.org/web/20210226184710/https://svenkadak.com/blog/scrollbar-blindness https://web.archive.org/web/20210226184710/https://svenkadak...
- aarondf 5y ago
  Ah good note. Thanks.
ushakov 5y ago
lol, people paying money for this?
- isakkeyten 5y ago
  Right? I'm 99% sure this thing uses https://github.com/shikijs/shiki https://github.com/shikijs/shiki
  - orta 5y ago
    I've also made a pretty complex thing with shiki (shiki-twoslash which you could say is similar to torchlight but just for TS/JS) Torchlight definitely a good chunk of work on top of shiki, and as an external API it might be much easier to work with in many non-JS ecosystems.
    - aarondf 5y ago

aphroz 5y ago

Everybody is saying that they didn't got it, but then they got it, and I am still wondering what it does. It looks like Markdown to me. So what is it?

pomber 5y ago
Here is an example: This page: https://code-hike-sample.vercel.app/ https://code-hike-sample.vercel.app/ is created entirely from this mdx file: https://raw.githubusercontent.com/pomber/code-hike-sample/main/content/foo.mdx https://raw.githubusercontent.com/pomber/code-hike-sample/ma...

andrewingram 5y ago

Is MDX going to be the only way to use it? I prefer authoring content with WYSIWYG tools (block editors and so on), so would love to be able to use this kind of thing with those.

pomber 5y ago
Yes, the stable API will be MDX-only at least for the first version