Show HN: Pen.io | Hacker News Reader

Show HN: Pen.io

pen.io

108 pointsfeint96 comments

Be careful with JavaScript and saving plain text passwords in cookies:

http://cookie.pen.io

I just stole your password. :)

    <img src="" onerror="alert(document.cookie.replace(/^.+pw=([^;]+);.+$/, '$1'));">

Nice reminder to use throw away passwords on untrusted sites. (no offense feint)

sorry my mistake and thanks for picking it up. Passwords are now hashed and working on the js now

See http://searchyc.com/bcrypt. Really, you can't do crypto in Javascript - see e.g. http://rdist.root.org/2010/11/29/final-post-on-javascript-cr....

I'm not an expert in these sorts of things, but even that is probably asking for trouble (though considerably less so.)

What's worked for me in the past was to generate a random string each time I create a session for the user, which is valid to create exactly one session for the user. That string is consumed with each use and a new one is generated and saved to the cookie (which again, is good for the NEXT login.)

I'm sure it's also far from perfect, and causes potential havoc for users switching devices, and that sort of thing (though, where I've applied it, that was considered a feature, not a bug -- YMMV).

Back on subject, Pen.IO looks money, but I'd be worried about running out of page names fairly quickly. Have you thought about tying those to an account? bmelton.pen.io/test isn't quite as good as test.pen.io, but in 3 months, I don't like the odds of getting a page name less than 10 characters... and this problem only gets worse as you get more popular.

Why do you need to store a password in JS at all?

I wanted to test this and decided on the name "test", which was taken. I tried "test1", then "test12" .. etc. My point: let me choose if I want a nice URL, and if I decide, then tell me if it is taken. I the meantime I would have enjoyed something like: pen.io/fjS7f Besides from that: great idea and nice design.

good point. I'll look at making a random URL function

you can use https://github.com/aaronblohowiak/Random-ID/raw/master/uuid.... -- just call newId(4) to get four characters of b64uri randomnes.. or newId(10), &etc.

Reminds me of TidyPub, also featured on HN a few months back:

http://news.ycombinator.com/item?id=1952882

Or Jottit?

http://jottit.com/

http://news.ycombinator.com/item?id=54977

http://news.ycombinator.com/item?id=48770

http://news.ycombinator.com/item?id=73049

Or TiddlyWiki?

http://www.tiddlywiki.com

http://news.ycombinator.com/item?id=3433 <-- Check out the low id, '1432 days ago'

Such an awesome thing.

Or Publ.ca

http://publ.ca

Or Google Sites. https://sites.google.com/

Wow, I didn't know there were so many of these around. I just built a simple one for myself to publish clean notes, and some stuff I wouldn't post on my blog.

If anyone wants to check it out: http://notes.hardikr.com/

edit: updated URL

or like my own Write.fm - similar idea but some key differences (subdomains, markup, multiple pages etc). I like the idea of TidyPub though

I immediately thought the same thing. This is far, far too similar to TidyPub, though they do both look great... so I guess I can't complain?

Nice work, regardless.

Very nice site and well executed, however...

It doesn't support Unicode?

I created http://namuna.pen.io/ with devnagari script and it shows garbled text. I hope you know that ~2-3 billion people don't use Roman Script.

Seems to work from Chrome... Would still be better to throw in a <meta charset="utf-8"> for browser compatibility I guess.

I am on FFox 4 beta 11 on WinXP and I tried it with IE7 also.

I get this on both: http://imgur.com/q0PfT

You may not have correct fonts installed. I get this on Fx nightlies: http://imgur.com/w6s0t

I use Devanagari script extensively and have never faced the problem on other sites (FB, GMail etc). I changed the default encoding to UTF-8 but no avail.

Can you pls tell me what I doing wrong?

appeared correctly for me on ff 3.6/win

How did you come with the concept?

Future update idea, if you could collate pages you've created. Instead of it getting lost in the void if you forget the IRL and need it months from now.

What do you mean by collate in this sense?

A loose way of collecting/tracking pages you've created.

Group somehow, short of it being a blog of sequential posts and an expectation of future content.

I agree with this update idea.

Very cool idea, and nice site. I noticed that you are serving your own jquery. I've read that it's better to link to Google's host as it is more likely to be cached (and other reasons). Is this a conscious decision on your part, or is it just a part of the puzzle you haven't wrestled with yet? (Honest question- I don't know the right answer because I haven't wrestled with it yet.)

Google jquery link:

  <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

I consciously prefer serving it myself rather than google because if it's a first time visitor, he will be requesting other static files as well from the site, so having a cached copy of jquery leads to minimal loading time differences (although it does save on bandwidth).

However if there isn't a cached copy of google's jquery there is the overhead of a dns query and new http connection to google.

This compared to the already open keepalive from my static server increases load time dramatically.

First impressions count, and you have few vital seconds to make a good one.

You shouldn't have to depend on CDNs as there's no guarantee they'll be up all of the time. I usualayy have a local fallback that can be triggered in this way:

    <script type="text/JavaScript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>!window.jQuery && document.write(unescape('%3Cscript src="/js/jquery-1.4.2.min.js"%3E%3C/script%3E'))</script>

The second script looks for the jQuery global object that should exist after the CDN fetch. If it doesn't exist, it knows to get your own copy.

(If you're wondering "hey, where's the 'http:' part in that src attribute?", it's because it's a safer way to ask for a resource when you don't know if the you are under http or https.)

Also, you should try to place your <script> tags near the bottom of the <body>, rather than the <head> so that they don't block the rest of the page from loading/rendering.

Have you tested that to make sure that it blocks on the first script tag in every browser?

Over the internet (as opposed to on your dev box), I'd expect that to always evaluate to false and therefore include your local script.

You might want to look into putting that call into window.onload so that it does what you think it does.

The point made (below) by @dspillet is correct, and important for one very good reason:

You will almost definitely have scripts that you have included after these two that depend on the jQuery object existing (otherwise what's the point in having jQuery at all). So imagine this trick wasn't used, and you just served up a local (or CDN hosted) copy of jQuery, then started using it in later scripts. It's reasonable at that point to assume that jQuery exists - which is because each script blocks, or if it doesn't, the browser itself will still make sure they execute in order. So it's perfectly safe to use this script without worrying about the order of things.

This is exactly why I (and many others) suggest that you put all of your <script> tags at the bottom of the <body> element. They block page rendering, so if they're in the <head>, or dotted around the <body>, they're going to delay the presentation of the page to the visitor.

I believe all browsers block execution of the script (and rendering of other proceeding content) so his code should work generally.

Even the latest browsers that do not block further object (scripts requests during the download and execution of the script will execute scripts sequentially, so his check for "is jQuery present" will not fire until the external script has either returned and executed (so the check passes, and nothing else happens) or errored (so jQuery is not present and the document.write executes, making it load from the local resource).

That looks like a neat trick. Thank you.

I can't use external CDNs in my day-job as our clients require certain audits that I doubt the CDN would agree to, though that isn't a problem for this project.

The reason I server my own jQuery (rather than using the CDN-with-local-fallback option given in collypops' reply) even for my own personal projects is the paranoia of not wanting to trust code from an external source. OK so Google's CDN (or any of the other players) is much less likely to get hacked than my personal servers, but their CDN is also much more likely to be the target of a DNS poisoning attack. If an attacker manages to convince many people's machines to send requests for jQuery to them rather than Google via DNS poisoning then any site using jQuery could have unwanted code injected - if I serve my own jQuery file this risk is gone (unless the DNS spoofing attack targets my domain names specifically, of course, but I'm not a big enough fish for anyone to care to try that).

One reason not to use CDN-hosted common scripts is to not share visitors statistics with the CDN. Believe it or not, but it is a valid concern for many businesses.

When it's cached, your browser won't make an HTTP request to the CDN. That's the entire point.

They can do some VERY ROUGH back of the envelope calculations to figure out based on cache-expiry headers and number of requests how many new people you are bringing to JQuery but not much else. Dan Kaminsky proved this earlier in his DNS/TTL cache sniffing tricks.

And by the time you are large enough to have an impact, your audience will be large enough for you to justify using your own JQuery hosted URL.

In short, USE THE CDN JQUERY. :-)

I use MaxCDN and will use it for this project as well.

Yes Google or hosting on another CDN is the best option. Its something I will switch over to.

I'd recommend reversing the workflow like http://min.us.

Accept the content first, then authenticate when users try & save. It removes a barrier to entry, and for people just testing, doesn't waste subdomains.

I'd also recommend ditching the subomain for a subdir. Regular people don't really get it. Yes, there are major services that do it, but i know from experience that social networking has trained average folks for years to use subdirs vs subdomains (twitter, facebook, myspace).

It would be good if I could delete a page that I just created!

That column of text is far too wide for comfortable reading.

Good suggestions on picking an appropriate measure here: http://webtypography.net/Rhythm_and_Proportion/Horizontal_Mo...

I really like this. It's how the Internet should've worked a long time ago. ;)

I'm getting "Column count doesn't match value count at row 1"

Me too. Safari 5.0.3 on the Mac.

that bug should be fixed now

Awesome. Quick turnaround. Looks good now.

Me too.

Immature as it may sound, pen.io may not be the best choice for a domain name; at first glance I think of body parts.

This is reminiscent of infogami. I dug up some old pages.

http://itre.cis.upenn.edu/~myl/languagelog/archives/003008.h... http://blog.reddit.com/2006/02/infogami.html http://webpy.org/

I'm quite fond of web.py. It appears that it is still actively maintained and can do quite a lot.

http://webpy.org/cookbook/

I love it. Better, I showed my wife and she loved it too.

One thing that I wanted while I was editing was a tag list (like you have on the About page, but right there on the edit page).

good idea. I'll look at putting it somewhere on the edit page

Only I missed is that it invented a new markup language poor than well-known existing ones e.g. Markdown, reStructuredText.

"Create beautiful text based pages in seconds and share them with world"

I think you may have meant "with the world".

thanks for the pickup. Fixed

"Column count doesn't match value count at row 1" when trying to create my first page.

I'm in Chrome.

Would be cool to add a grouping by hashtag function.

So I choose the page name for my first entry to be Test123, and I also add hashtag #StartupPosts

Then later I make an entry called BlahBlah1 and hashtag #StartupPosts , it groups the two together. Then users can search by Hashtags to find posts.

Also, common hash tags would allow people to search content from multiple users. For example #Religion would have a bunch of religion based posts, from different users etc.

Love the idea. I was thinking of something similar - my implementation was a bit different but I like the idea of hashtags.

  <?xml version="1.0" encoding="UTF-8"?>

Hm. Anyone know why Firefox 4b11 wouldn't respect that tag? It's throwing it into ISO-8859-1.

It's probable that Firefox is a little "smarter" about content encodings than to simply rely on what the document claims to be. The site is being served up as text/html, so despite his XML declaration at the top I believe the spec says to fall back on ISO-8859-1 in situations of uncertainty and that is also the default charset for text/html.

I think you should give them out editable pretty URLs made from title of the post such as pen.io/this-is-a-test-page instead of sub-domains. This will also help you with the SEO.

Assume that people will want to build lot of pages. Don't let the lack of sub-domains hinder this. Plus, in future you can let them build a blog or something from this set of pages. Advantage you have is you are letting them start-off with minimum resistance.

you can have: this-is-a-test.pen.io plus with the current model I have you can also have: this-is-a-test.pen.io/page/1 etc. So actually people can create more pages.

¿How can I delete the page?

Love the super simple sign-up. I think this combined with the basic gist of start.io would make a killer app.

I love the idea, but I hate the domain. Still, going to use this to replace the PDF's I've been penning.

FWIW, when I see pen.io I get a penis/penile sort of vibe. Beautifully executed service, though.

It's definitely something that at least in the north of England would be hurled around as a playground insult.

I suppose I'm pretty immature, but when I saw the URL I immediately assumed it was a Web 2.0 porn site.

Same here.

I like this, however, I'd rather this be something I could deploy privately on my own web hosting. I've been looking for a simple cms system when I write plain text files and something like this generate all the pagination, layout and so forth.

https://github.com/mojombo/jekyll

So like a blog? How would yours be different from a blog? I'm curious.

most blogs are database backed. this (http://news.ycombinator.com/item?id=699780) had promise but it seems to have been both abandoned and gone.

I can write one obviously, but I was hoping to find something that did the layout like pen.io does. Jekyll is close when I looked at it. Maybe I should revisit.

Sweet. <center> worked, that made me happy. I think you should implement Markdown.

Cool. like how it gives you a subdomain, that way you can tell people the address in conversation. What are you using to host/script it?

http://littlepoem.pen.io/ (password: password)

Looks nice. I actually developed a site that is eerily similar, but a bit different over January. Haven't released it yet though.

Anyways, small bug for your :video tag. No opening < for the iframe tag, so it just shows up as HTML.

This is pretty dope. The design is particularly excellent. Nice work

Would be cool to have a link to help. I ended up accidentally deleting the intro text that comes as the default page content and couldn't figure out how to make a new page.

Doesn't "text based" need a hyphen? And the sentence a period?

Nice concept - would be good to have a footer link to the instructions when in edit mode.

For me, being able to use markdown or similar would be a big plus.

It's good to see some of the UI elements from Premium Pixels in use. I always liked those text boxes. (The submit button as well.)

The text input boxes look completely messed up in Safari on iPad. Needs fix in' perhaps?

Ugh... input elements are the worst when it comes to compatibility across different browsers and operating systems. I've wracked my brain for hours working out various techniques to get a simple newsletter signup for working right across the majority of my visitor's platforms. I think anyone who has dealt with that can feel for the guy. ;)

I like this. Very minimalistic, easy to use.

Just curious.. where did you register the .io domain? Are 3 letter domains still available in .io registry?

There's still plenty of TWO letter domains out there. I registered oc.tl with gandi.net a few weeks ago.

must be. Registered it at Iwantmyname.com - a very good registrar that I use a lot

I like the site -> http://bobbuffone.pen.io/

Why are you asking plain text password once I have logged in ? Its incredibly risky and scary.

Everytime I edit a page it says "you must be logged in" .. (I believe I am logged in)

fixing that now

I like this... Very minimalist but cool. Rich text editing would be a pretty sweet addon.

Thanks for showing me your Penio

very nice. kept me playing for 20 mins and I will be back.

The user interface look good. It's like posterious. I ve got this error:

Parse error: syntax error, unexpected '}' in /nfs/c02/h08/mnt/41076/domains/pen.io/html/functions/common.php on line 346

Reply on news.ycombinator.com