5 ms·
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
by gpnt 6y ago
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!
- deleted 6y ago[deleted]
- lrossi 6y agoIs the initiator documented anywhere? How come the browser uses it to draw the page?
- gpnt 6y agoyes, 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.
- bluehex 6y agoOnce 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...
- achairapart 6y agoWhile 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!
- lrossi 6y agoThanks for the explanation. It makes sense, but sounds very fragile.
- ilovefood 6y agoLooks great, reminds me of jasonette http://jasonette.com/ http://jasonette.com/. Good luck with your blogging platform!
- gpnt 6y agoThanks, 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.
- eyelidlessness 6y agoThis 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!
- gpnt 6y agoThank you very much. Check the GitHub, the loader, basic render, and the website itself are there: https://github.com/webdatarender https://github.com/webdatarender Also, send me a link, I would love to check it out!
- cortesoft 6y agoSo 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?
- enw 6y agoIt'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).
- mst 6y agoYou may also be entertained by my http://github.com/shadowcat-mst/App-plx/ 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 http://trout.me.uk/perl/plx.html (that one's actually served over http, it's a demo, please don't blindly run it).
- forgotmypw17 6y agoThanks for sharing, this is very cool. I'm also working on a Perl-HTML project, and I may reuse some of this :)
- mst 6y agoThe 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
- ben509 6y agoI 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.