Show HN: This website is valid JSON • Hacker News Board

Re: Show HN: This website is valid JSON

#51

Post by iamthepieman » Wed, Dec 09, 2020, 2:18 AM UTC

habitue wrote: post #10

This is a really cool hack. > The JSON must contain only pure information without any concern about design or markup. Wellll.. I mean the json has markdown syntax in it. That's a lot nicer than html tags for markup, but it's still markup. In case anyone reading hasn't seen it before, browsers have a thing called XSLT built into them that does something similar for XML documents. You serve up your data as XML, add a t…

Working for a government agency that had bought into MarkLogic in 2004, we built an entire analytical site that used XML from the document server, queried via XPath, and rendered it into web pages via XSLT. The web page was defined entirely in the XSLT transform. Worked great and if you were already righting your data queries in XPath, writing the UI in XSLT kinda made sense.

Re: Show HN: This website is valid JSON

#52

Post by peteretep » Wed, Dec 09, 2020, 2:19 AM UTC

ChrisMarshallNY wrote: post #36

habitue wrote: post #10

This is a really cool hack. > The JSON must contain only pure information without any concern about design or markup. Wellll.. I mean the json has markdown syntax in it. That's a lot nicer than html tags for markup, but it's still markup. In case anyone reading hasn't seen it before, browsers have a thing called XSLT built into them that does something similar for XML documents. You serve up your data as XML, add a t…

I still have nightmares from learning XSLT. It's very cool, but also, very strange, if you come from a procedural language background. Also, XSLT is really given power by being mixed with XPath (which is procedural). I suspect that if I had known more about FP back when I learned it, I would have had an easier time. I wrote up a really long, painful post about XSLT, way back in the early 'oughts.

I learned XSLT twice. The first in the very early 2000s when I was creating a large and mostly static website for a magazine with a lot of content, and mostly just hacked it together. It was ok but mostly I was using it as a simple templating language. The second time was about five years ago, as a module in my MSc, by which time I was well-versed in functional programming — this time it was easy to do all sorts of weird and wonderful stuff, including a TAP-outputting assertion library for templates written in XSLT itself and a library for doing depth-first searches over graphs of nodes.

Re: Show HN: This website is valid JSON

#53

Post by minikomi » Wed, Dec 09, 2020, 2:26 AM UTC

Wow, now we can write pages like

     {
      "content": [
        ["html", {},
         [["head", {}, []],
          ["body", {},
           [["h1", { id: "main-header" }, [
               "Welcome to my",
               ["span", { class: "red-text" },
                ["PAGE"]]]],
            ["h2", { id: "sub-header" }, [
                "It's so cool.",
                ["br", {}, nil],
                "Don't you think?"]]]]]]]};

Re: Show HN: This website is valid JSON

#54

Post by crb002 » Wed, Dec 09, 2020, 2:27 AM UTC

This perversion needs a Qt example. Any takers?

Re: Show HN: This website is valid JSON

#55

Post by gpnt » Wed, Dec 09, 2020, 2:27 AM UTC

bogidon wrote: post #44

For those like me who needed a little help... I do not fully understand the browser rendering process (someone who does please chime in), but what I gather about how this is works is: - the content-type of the page is "text/html", so the browser is trying to render html - there is no special meaning of the #render key to the browser (again the browser doesn't know this is json) - browsers are very fault tolerant so t…

I don't see this error on FF. Are you seeing this on the console?

I put the meta tag to render some special characters without relying on the server, but HTTP header would be a better option (Content-Type: text/html; charset=utf-8).

And you nailed the process.

Re: Show HN: This website is valid JSON

#56

Post by Felk » Wed, Dec 09, 2020, 2:28 AM UTC

quineoa wrote: post #45

Isn't Reddit like this, in a way? You can append ".json" at the end and get the data for a page. Others can build their own UI on top of this, if they don't prefer the first party representation. https://www.reddit.com/r/pics/.json

The same could be achieved by having the server return different views of the data for different HTTP Accept headers, although not as convenient as appending a file extension. I once did this to interpolate REST API responses into dedicated HTML templates if requested with Accept: text/html, which made exploring the API in the browser more enjoyable.

Re: Show HN: This website is valid JSON

#57

Post by gpnt » Wed, Dec 09, 2020, 2:29 AM UTC

minikomi wrote: post #53

Wow, now we can write pages like { "content": [ ["html", {}, [["head", {}, []], ["body", {}, [["h1", { id: "main-header" }, [ "Welcome to my", ["span", { class: "red-text" }, ["PAGE"]]]], ["h2", { id: "sub-header" }, [ "It's so cool.", ["br", {}, nil], "Don't you think?"]]]]]]]};

This is actually the exact opposite of why I have created WDR. The JSON is supposed to be only pure data. All the markup should be inside the render.

Re: Show HN: This website is valid JSON

#58

Post by bluehex » Wed, Dec 09, 2020, 2:35 AM UTC

gpnt wrote: post #6

lrossi wrote: post #4

Earlier quoted context omitted.

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

yes, the initiator is a valid HTML with a ` ` 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...

Re: Show HN: This website is valid JSON

#59

Post by jdeisenberg » Wed, Dec 09, 2020, 2:40 AM UTC

habitue wrote: post #10

This is a really cool hack. > The JSON must contain only pure information without any concern about design or markup. Wellll.. I mean the json has markdown syntax in it. That's a lot nicer than html tags for markup, but it's still markup. In case anyone reading hasn't seen it before, browsers have a thing called XSLT built into them that does something similar for XML documents. You serve up your data as XML, add a t…

There is JSONT (https://goessner.net/articles/jsont/) and JSONPATH (https://goessner.net/articles/JsonPath/); also JUST (https://www.codeproject.com/Articles/1187172/JUST-JSON-Under...)

Re: Show HN: This website is valid JSON

#60

Post by ardy42 » Wed, Dec 09, 2020, 2:40 AM UTC

habitue wrote: post #10

This is a really cool hack. > The JSON must contain only pure information without any concern about design or markup. Wellll.. I mean the json has markdown syntax in it. That's a lot nicer than html tags for markup, but it's still markup. In case anyone reading hasn't seen it before, browsers have a thing called XSLT built into them that does something similar for XML documents. You serve up your data as XML, add a t…

> Wellll.. I mean the json has markdown syntax in it. That's a lot nicer than html tags for markup, but it's still markup.

Isn't markdown literally just HTML shortcuts for a limited set of common markup cases? IIRC, it's not uncommon to have to insert HTML tagging into markdown to get certain things to work.