Show HN: Ctxt.io – share context of whatever you see with others in seconds | Hacker News Reader

Show HN: Ctxt.io – share context of whatever you see with others in seconds

ctxt.io

174 pointskahseng80 comments

Built this when I was looking for a rich-text pastebin and couldn't really find any around. This works instantly in seconds without any account and prioritizes just giving you a link to share.

Ended up being really useful whenever I wanted others to see what I had experienced on personalized websites (e.g. ranked feeds that would look different on different accounts, or change if reloaded e.g. https://ctxt.io/2/AAAAiPRWFg), interview feedback, or even paywalled content if I just wanted to share a little snippet for fair-use and keep the HTML styles, https://ctxt.io/2/AAAAACI6FQ. Scroll to the bottom of the page for these examples.

The main technical difficulty here was in trying to get all the CSS styles to be as accurate as possible, and the browser extension solves many of these, including proxying requests whenever necessary to bypass some restrictions. The browser extension doesn't request any permissions, and won't inject any content scripts on your page, so as someone who cares about security, is what I wouldn't mind installing personally.

One cool thing I've discovered after building it is that it's super useful for web developers to modify the DOM of pages and redo mockups and then use Context to re-share them with others for them to also modify: e.g. https://ctxt.io/2/AAAA0KGcFA

Everything is free for now (don't worry about the $ signs), mainly interested in feedback. Thanks in advance!

Pretty cool. Similar to www.archive.is.

But it also looks like it A) emphasises the important bit and B) expires after a while to minimise leaks.

I've built something similar https://richie.stormconcept.de [0], but the proxying is what amazes me:

How do you proxy the requests?

I think it's a great idea and incredibly useful.

[0]: uploaded it to https://github.com/samuelantonioli/richie (added "expires", good idea)

p.s.: I've solved the problem with fixed headers using a fixed header with a high z-index (unfortunately this hides the fixed header of the copied website).

p.p.s.: Maybe it's possible to build it as a small community-maintained project, that would be great.

Cool yup that's how it all first started, a single page and trying to use JS to capture content editable.

Happy to think of ways to collaborate.

https://ctxt.io/2/AAAAAHJkFA

"I was looking for a rich-text pastebin and couldn't really find any around. This works instantly in seconds without any account and prioritizes just giving you a link to share."

You should say this on your site. Found it rather confusing until I read your reply here.

done! (although still below the fold)

I didn't realize the page scrolled (due largely to the static footer) until I read this comment

How does this work? When I copy past above comment, it preserves the font, background, and other things. Does that mean clipboard always captures these data but other things discard them?

Of course. That's why “Ctrl + Shift + V” exists — to paste plain, non-formatted text.

Your TLS configuration is broken, in a way that often happens:

You aren't serving the appropriate intermediates. It's only serving the leaf certificate, but should also serve intermediates that get us to a trusted root.

Because browsers cache intermediates, this obscures the problem much of the time.

This is pretty amazing though. I copied some Go code from Gogland and got it in a browser, syntax highlighting and all! https://ctxt.io/2/AAAAwO9VEA

Thanks for this great feedback and TLS tip. I'm using GAE to host this, and it only has these options https://ctxt.io/2/AAAAACLGEg. Do you think this is broken or how I generated the cert?

I think I followed instructions from here to get the certs: https://github.com/arkarkark/letsencrypt-nosudo but I can try all this again.

edit: Looks like this is the solution, thanks for pointing this problem out: http://stackoverflow.com/questions/17746643/how-to-set-the-i...

Wow, this is amazing. Seems like magic once I wonderstood what it does.

Like others here, at first I thought it was just another pastebin. I didn't realize what it could do until I read your comment here in this thread. Seems dumb, but I didn't notice I could scroll down for examples, and I also would have had no idea about the browser extension. I would have dismissed this almost immediately had I just visited the page. Perhaps you can make this things more obvious?

Also, any plans for a Firefox extension?

Note: "Wonderstood" was a typo, but I'm leaving it because I like it :)

Point taken and thanks for the positivity! Had been balancing utility and explanation, and can swing more a little to the latter.

Yes Firefox shouldn't be too hard, I don't use anything too Chrome specific, and I have built extensions for FF and Safari prior (wink wink).

[this is an explicit upvote re: Firefox extension]

Firefox extension done and under review: https://addons.mozilla.org/en-US/firefox/addon/context-ctxt-...

I also came to the comments for examples because I didn't realize there was anything below the fold, FWIW

Firefox extension out soon: https://addons.mozilla.org/en-US/firefox/addon/context-ctxt-...

It was harder that I thought, lots of quirks and behavioral differences even though the APIs used were relatively simple. Needed for example `e.preventDefault()`, requiring `<all_urls>` (unfortunately! - but that might allow me to allow copying styles from selection) and a bunch of style fixes just to get to parity.

Couldn't help myself... http://imgur.com/a/7j5RH

Kidding aside, this is a cool idea

Heh you should share that contexption!

Context all the way down

I still don't get it. Every page I try to contextify (wat) is looking like pasted in a 1999 WYSIWYG editor. How do you all get the correct styling etc with you? I'm using Firefox with uBlock and Disconnect.

Example page: https://www.golem.de/ticker/ - I tried to copy some listed links but they just look like standard Times New Roman after contextification: https://ctxt.io/2/AAAAAPxhEA

Anyway, nice idea. I have ever used screenshots so far.

I believe ctxt.io requires Chrome extension to work properly. It does seam like a good method for sharing web pages, but, as I too use Firefox, not the thing for me (for now).

It doesn't. It works well for me (using Chrome 56.0.2924.87) and I don't have the extension.

Same. Something is broken. Also using FireFox...

Yep, discovered Firefox doesn't copy styles the same way as other webkit-based browsers like Chrome/Safari. Working on a Firefox extension which will solve all this, but even that has been a ton of quirks to deal with. 7% of my visitors used FF, 20% Safari and 66% Chrome, so I think my prioritization so far made sense. Will keep you posted on an FF extension.

Wow, didn't know that the usage of Firefox is that low. Thanks for clarification - makes sense.

Yeah strangely Firefox has these design decisions on how to handle copying out styles (doesn't pick up from stylesheets unlike Webkit): https://bugzilla.mozilla.org/show_bug.cgi?id=116083#c3 https://github.com/textAngular/textAngular/issues/534 https://bugzilla.mozilla.org/show_bug.cgi?id=1273836

Firefox extension or the bookmarklets on https://ctxt.io/faq would solve this and the former should be out soon: https://addons.mozilla.org/en-US/firefox/addon/context-ctxt-...

Oh, an extension already :) Excellent.

Although, at this moment, my Firefox (52.0.1 on GNU/Linux) says the extension cannot be installed because it is faulty what ever that might mean.

The extension needs to be reviewed by Mozilla and signed unfortunately. 80% get done within 5 days but unclear if this will be the case here. Meanwhile you can use the bookmarklets at https://ctxt.io/faq but those won't work on CORS/CSP restricted sites.

Pro-tip: be careful when you copying websites you are logged into as you could leak CSRF/authentication tokens.

Good point, I'll work on stripping these where possible. No cookies are obtained and I would hope CSRF tokens expire quickly.

> CSRF tokens expire quickly

Dangerous guess.

Took a little while to work out how cool this is, initially just thought it was just-another-pastebin.

Thanks! Exactly... it's not and you should really give the browser extension a go if you enjoy it. It has 70% of the features coded up and works the best.

I really like the clean UI first layout, but it could use an arrow/indicator to emphasize the content below the fold; especially for first time visitors. I wish more sites prioritized their layout like you did. The core functionality seems solid, Nice work!

So I tried copying the site with fixed header and it broke the layout of your site - http://imgur.com/a/OADih

Otherwise, I like it for its simplicity.

Heh thanks yeah the nature of content editable. If you can still submit (use keyboard to tab-enter), it'll hopefully preserve that fixed hleader in the paste.

I don't think I quite get this. Everything I paste here shows up in plain text. It doesn't automatically do any syntax highlighting; it only seems to work if you're already copying rich text to begin with.

I guess I have to do better on the value proposition. Yes, there are many other of pastebins that work on code or plaintext for syntax highlighting (which might be the use case you're thinking of), but there is virtually no solution that works on rich text. Pasting rich text into any of these solutions wouldn't work, and many times I would love to keep the styles and just make the content readable (e.g. tables, paragraphs, headers, stay the same etc.)

Does Sublime Text's syntax highlighting count as rich text for this?

Not by default.

But you can install a plugin: http://monkeyhacks.com/post/sublime-text-3-copy-as-rtf-and-h...

This. There's absolutely no formatting, and pictures don't get pulled if I simply copy & paste. E.g. https://ctxt.io/2/AAAAwO8FEw

Which page did you do this on? You might need to use the browser extension for some pages. Some styles do not transfer without it. I can show you what it looks like with my browser extension if you let me know the URL you tried this on?

Not the person you replied to, but it's this article:

http://www.pcgamer.com/why-the-creator-of-dwarf-fortress-is-...

I get similar results when copy&pasting.

This is how it looks with the extension used: https://ctxt.io/2/AAAA4BMMFw

Still needs fixing some image proxying bugs, will work on it, thanks!

You can paste snapshots / screenshots. With mezer tools, I can do a quick Win S, two clicks, one paste, copy/paste the URL and you get https://ctxt.io/2/AAAA4MNyFw .

Same for me, copying out of a variety of editors/IDEs and it doesn't retain the font/syntax highlighting at all.

Does your IDE/editor support copying out as rich text? The ones I tried did and it worked. Maybe there's a setting for copying out with styles. If not, this isn't a use case I've primarily worked on yet, but I can try to support it later.

I can't see any such option in Atom, Sublime, or Eclipse to copy as rich text.

To be fair I didn't really expect it to work with automagically copying the syntax highlighting from my IDE, but it made it sound like it could.

It's definitely a useful project, and surprising that nothing else like it exists, but may be worth making it clearer that it's designed for rich text, and may or may not work with formatting when pasting for various programs.

Fair, I think I extrapolated too eagerly. Will think of a solution, including dropping the code use case. Terminal and web based output works at least.

Here are some extensions needed for this.

Atom: https://atom.io/packages/copy-with-syntax

VS Code: https://marketplace.visualstudio.com/items?itemName=atian25....

Sublime Text: https://github.com/n1k0/SublimeHighlight

Here's an example. Using Chrome on OSX I did a quick `select-all` then `copy`, switched to the ctxt.io tab, gave the text area focus then `paste`. I ended up with this - https://ctxt.io/2/AAAAYGAfEw

I think "only works if you're copying rich text to begin with" is the kinda the point.

(I'm not affiliated with ctxt.io at all, just trying to understand it like you are.)

Is this the best site ever? Scrolled a bit and I completely got what it does

I'm not quite sure I understand how you've done it but it's really nice (although I'm also concerned about cookie, csrf token issues as well).

Working well, thanks!

Do you have any plans to release the source code?

Thanks!

Is this because you would rather verify things are what I say they are (no content stored elsewhere) and use this service, or to run your own, or just learn?

Right now, code quality isn't in a state to open-source, but I'm thinking about it.

The first two for me ;)

To understand your stance here: What would it take for you to trust this service without running your own?

Good question- would like to know more what are good practices in such cases w/o making your work open sourced.

I would like to learn how you did it, plus seeing the source code is usually very enjoyable for me, you learn a lot of things from it.

A side project of mine requires similar functionality in terms of copying and pasting text. I would like to see how you implemented it.

>Right now, code quality isn't in a state to open-source, but I'm thinking about it.

I see lots of people mentioning this, but imo, it doesn't matter much. You can definitely upload your work and later change it as you work.

Isn't that how it should be done.

Interesting and simple concept, works great. Reminds me of a similar service I saw a few weeks ago, txt.fyi.

Yep, I saw that and this was about 80% built at the time. Was still wrangling with all the style capture and couldn't capitalize on all the attention it was getting then. ;-)

But this has a different primary use-case, more on transient context sharing, and caring about accuracy in the short term. And not about publishing per se.

You're right, the transient nature of this service sets it apart from other similar offerings. I like your monetization approach and how you tied it to a useful feature. Great implementation.

This is very well made, I'm going to add this to my bookmarks. Thank you & good job!

Anyone else getting a certificate warning on mobile Chrome?

I used Let's Encrypt and don't see the error myself on mobile Chrome (latest version).

I'm seeing it too. Chrome on Android.

Just checked and it worked on my Android's Chrome too. Any details on what the error message says?

Net::err_cert_authority_invalid

Yup this should be fixed now, thanks to https://news.ycombinator.com/item?id=13945560.

> the hassle of secure clean-up within minutes.

The people that professionally create a hassle of security will beg to differ.

Edit: So just ignore them when they do that.

> share context of whatever you see with others in seconds

ITYM "within seconds, share with others the context of whatever you see". Yes?

Look idea, but I think it needs a better explanation, its a relatively complicated concept.

Woah! What sorcery is this?

Yea, could someone give a good explanation of what's happening here.

Basically this

http://stackoverflow.com/a/29094545

Rich text format supports font colors, images etc

Pasting this in a browser is explained well here

http://stackoverflow.com/a/30904519

Reply on news.ycombinator.com