Hacker News Reader

Comment by gpnt | Hacker News Reader

Hello everyone, I created a simple script that allows a website to be a valid JSON and still be able to present the information on the browser.

Any feedback is appreciated!

View on HN

It's a fun hack! The website could make it clearer that it only works because browsers tend to be very fault tolerant, and the JSON itself is by no means a valid "web page" (i.e. there are no guarantees it'll render properly).

You may also be entertained by my http://github.com/shadowcat-mst/App-plx/ project which has a script that produces a documentation page that's both valid HTML and a valid perl bootstrap installer for 'curl | perl -' purposes.

An example of the output is at http://trout.me.uk/perl/plx.html (that one's actually served over http, it's a demo, please don't blindly run it).

Thanks for sharing, this is very cool. I'm also working on a Perl-HTML project, and I may reuse some of this :)

The HTML is just plain pod2html output, I should probably steal the mojolicious.org or perldoc.perl.org POD rendering to make it looks actually decent.

Feel free to drop by #perl and/or #mojo on freenode if you're interested in chatting more :D

Looks great, reminds me of jasonette http://jasonette.com/. Good luck with your blogging platform!

Thanks, appreciated! About the jasonette, WDR is not a markup language. Actually it is the opposite. It tries to not use markup on the data but put everything related to the design and markup inside the render.

So you have to put the render part at the bottom? Most JSON serializers don't guarantee order in an object, so are you constructing this JSON by hand?

I think a great use case for this is for working with files locally. I had to change the script tag to use a relative link, but then it opens up fine as a local file. Now I can share those files via DropBox or the like, so it's very end-user friendly.

If you were writing a desktop application, you could be saving user data as this JSON-HTML quine (JHQ?), so it's automatically accessible on any device, but also still accessible to e.g. the jq utility.

Since any modification is liable to move the "_" field, you might address that by using an array envelope instead; [{"real": "data"}, "<html><footer>"]

For a production site, I think you ought to, server-side, check the Accept header and pre-render the conversion.

Another note: if I do Save Page As in Firefox, it saves the page as standard HTML, losing the JSON.

Is the initiator documented anywhere? How come the browser uses it to draw the page?

yes, the initiator is a valid HTML with a `<script>` pointing to the script that receives the JSON and render the page. The interesting part is you can `fetch` the page directly and it will respond a valid JSON.

Once that script is kicked off it can get the current body of the page (the JSON) and replace it with html with:

    JSON.parse(document.body.innerText);
    document.body.innerText=""
    etc...

While the source looks like JSON, the page is still sent by the server as text/html. Browsers are so resilient to malformed markup that actually parse the content inside the <html> tag at the end of the document (firing the JS script that render the actual page), ignoring all the (pseudo) JSON around.

The page is rendered in QUIRKSMODE because the source is missing the <!DOCTYPE html> at the beginning of the document, to resemble valid JSON.

Well, at least that's clever!

Thanks for the explanation. It makes sense, but sounds very fragile.

This is super cool and clever. I’m working on a personal site where I’ve been trying to build in some unexpected fun. If I borrow from your technique I’ll be sure to credit you!

Thank you very much. Check the GitHub, the loader, basic render, and the website itself are there: https://github.com/webdatarender

Also, send me a link, I would love to check it out!

Reply on news.ycombinator.com