by gpnt on 12/8/20, 10:33 PM with 229 comments
by bogidon on 12/9/20, 2:06 AM
- 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 they'll just skip over your document till they find pieces of html
- the JS made by the author is the part that parses the json as json, and it uses the #render key as its metadata section
You can try opening a file like this to test for yourself to get a sense of just the browser-parsing part, test.html:
{
"test": "hello",
"myHtml": "<html><meta charset=utf-8><h1>Hello World</h1></html>"
}
> The character encoding declaration of the HTML document was not found when prescanning the first 1024 bytes of the file. When viewed in a differently-configured browser, this page will reload automatically. The encoding declaration needs to be moved to be within the first 1024 bytes of the file.
I'm guessing differently-configured means not in quirks mode? Does quirks mode just make the browser extra fault tolerant?
by habitue on 12/9/20, 12:49 AM
> 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 tag that points to an XSLT document, and the browser will use the transform on your document automatically. If the resulting output is renderable XHTML, it'll display it like a regular webpage.
That being said, I wouldn't recommend doing that, since XSLT is a programming language whose syntax is XML itself. Apparently web standards folks in the early 2000s thought the future was XML all the way down.
by fps_doug on 12/9/20, 7:47 AM
The only advantage I see is that you can actually support markdown like you do in your page, since it's less verbose than HTML-tags and doesn't make the text unreadable if you read it as plain text.
But with HTML5 you can introduce arbitrary tag names to pretty much get the same with an XML-like structure instead of json. Just use <subtitle> <what> <description> and supply CSS for it. If you want to consume it with something else, swap out the JSON parser for an XML one, navigate to the body tag and from there on it's the same thing.
I mean it's a cool trick you came up with, but it doesn't seem worth the effort, and relying on quirks mode seems brittle.
by jstrieb on 12/9/20, 3:26 AM
<form method="POST" enctype="text/plain" action="http://example.com">
<input name='{"key1":"val1","params":{"input":"value","list":[],},"dummy":"' value='"}' hidden>
<button>Submit</button>
</form>
There might be a clever way to get it to submit dynamic JSON that changes based on user input without JavaScript, but I haven't thought enough about it.
This technique is sometimes useful for CSRF attacks.
by minikomi on 12/9/20, 2:26 AM
{
"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?"]]]]]]]};by spondyl on 12/9/20, 1:31 AM
I didn't create the project mind you, it was some NPM package back when I was a fresh 'un who didn't have thoughts on using a billion subdependencies
Anyway, I was nearly broke and when I went to apply for the benefit, I was asked for my resume as a word doc
Clearly, you can imagine how this conversation went down but I had brought a PDF on a USB which I offered to print out instead.
The clerk refused to let me plug in my USB for fear I was going to "hack" her and the HTML page, saving as a PDF with Chrome, took some convincing to ask her to navigate to so it could be printed
I guess the lesson here is that if you expect to run out of funds, make sure you have your most essential documents stored via Microsoft Word?
by quineoa on 12/9/20, 2:06 AM
by lqet on 12/9/20, 9:33 AM
This is a nice project, but it isn't valid HTML.
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwebdatarender...
by gpnt on 12/8/20, 10:37 PM
Any feedback is appreciated!
by ipsum2 on 12/9/20, 12:42 AM
> The JSON must contain only pure information without any concern about design or markup. All the design and markup required to render the page must be inside the rendering script.
The source code has markup in the form of Markdown, e.g. ## or * text
by russellbeattie on 12/9/20, 2:54 AM
The index page at this point is mostly just a DOM skeleton on which to hang references to CSS, media, scripts and metadata. We might as well cut out the last step already.
If there was an official HTML-to-JSON format, we could even use that as well. It would probably already exist, but the question is always what to do with node attributes, text nodes and child-nodes. There's a dozen ways to organize them in JSON.
by jhgg on 12/9/20, 6:36 AM
tldr: the html is stuffed in the exif data!
by amanzi on 12/9/20, 1:14 AM
by Animats on 12/9/20, 6:13 AM
by tyingq on 12/9/20, 4:21 PM
HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "<!DOCTYPE html>". webdatarender.com (2,0)
HTML1513: Extra "<html>" tag found. Only one "<html>" tag should exist per document. webdatarender.com (86,15)
SCRIPT1002: Syntax error render-basic-1.0.3.js (1,4)
HTML1506: Unexpected token. webdatarender.com (86,104)
by ajxs on 12/9/20, 1:18 AM
by lxe on 12/9/20, 3:54 AM
Cool, but why?
by beshrkayali on 12/9/20, 12:51 PM
by trevor-e on 12/9/20, 2:55 AM
> An object is an unordered set of name/value pairs.
But this site seems to be assuming that the key/value pairs are parsed in their original ordering for everything to display properly. Is it safe to assume JavaScript will always parse the keys in order?
by fanick on 12/9/20, 7:44 AM
by Gollapalli on 12/9/20, 2:16 AM
You could use this to syndicate blog posts, sort of like RSS, except each entry is JSON and could be viewed as it's own page rendered by it's own renderer (carried by a CDN and cached by the browser), or by the renderer of the users choice.
by stephenr on 12/9/20, 1:56 PM
I know it's a complex idea, and it's hard to grasp ideas when they're first proposed, but the payoff is often worth the time invested. Even though it's only been <checks notes> 24 years since the RFC defining the Accept header was published, maybe it'd be worth spending say, 10 minutes reading about what it is, rather than however long it took you to write this abomination?
by thomasfromcdnjs on 12/9/20, 1:04 AM
by rognjen on 12/9/20, 9:09 AM
My immediate thought for a use case is to debug APIs. Pass in a param that adds this to the response and get it in a more human readable form. Will test it out.
by znpy on 12/9/20, 1:25 PM
Wasn't XHTML (and thus html5) supposed to be parsable, since it's basically XML (specifically, the html spec redefined as XML) ?
by wgx on 12/9/20, 9:02 AM
https://wgx.github.io/anypage/
(It's the world's worst CMS)
by sonicrocketman on 12/9/20, 6:22 PM
As a blogging platform, please don't do this. It breaks all SEO, microformats, RSS feed discovery, rel=me ties, and much, much more.
HTML is great. Please use it for your websites.
source: runs a open-web friendly microblogging platform
by neolog on 12/9/20, 12:57 AM
by bsldld on 12/9/20, 1:28 PM
Nice project though!
by max_ on 12/9/20, 2:54 AM
Only that my goal was to create a browser for that an alternative to the web.
It would work on the same principle of separating data from information
by gwbas1c on 12/9/20, 1:19 AM
Meaning: If the javascript (and other content) loaded via #render is highly cacheable, can this lead to pages that display as soon as the JSON is loaded?
by bikamonki on 12/9/20, 2:15 AM
by tiborsaas on 12/9/20, 2:43 PM
by gildas on 12/9/20, 9:51 AM
by allenu on 12/9/20, 1:11 AM
by z3t4 on 12/9/20, 9:48 AM
by adibalcan on 12/9/20, 10:30 AM
by baddate on 12/9/20, 2:52 AM
by durnygbur on 12/9/20, 9:21 AM
by otabdeveloper4 on 12/9/20, 8:35 AM
That's what HTML and CSS is, no?
by raoof on 12/9/20, 7:56 AM
by cocktailpeanuts on 12/9/20, 12:58 AM
by nkjoep on 12/9/20, 9:41 AM
by Asmod4n on 12/9/20, 2:01 PM
by SrslyJosh on 12/10/20, 3:11 AM
by whereistimbo on 12/9/20, 8:29 AM
by User23 on 12/9/20, 4:56 AM
by crb002 on 12/9/20, 2:27 AM
by outsomnia on 12/9/20, 8:57 AM
by parisianka on 12/9/20, 7:13 PM
by tunnuz on 12/9/20, 10:38 AM
by minho-comcom-ai on 12/9/20, 2:25 PM
by brianzelip on 12/9/20, 12:20 PM
```html
{
"#info": {
"title": "WDR"
},
"subtitle": "Web Data Render",
"title": "# WDR",
"what": {
"title" : "## What is WDR?",
"description": [
"This website is a valid **[JSON](//www.json.org/)**!",
"Check the source code. Instead of the habitual HTML and CSS, you will see just a plain JSON with the website's information.",
"WDR is a format to separate the website's **information** and **design**.",
"The website is readily available to be consumed outside the browser via JSON, but also still presentable to users accessing through the web browser."
]
},
"subscribe": "I'm creating a **blog platform** using this concept. Follow me on [Twitter](//twitter.com/gpiresnt) to be notified when is ready! ",
"how": {
"title": "## How it works",
"description": [
"It works by embedding a small initiator at the end of the JSON file.",
"For example, this is a valid JSON and web page:",
"```{\n \"title\": \"Example Page\",\n \"description\": \"This is an example.\",\n \"#render\": \"<html hidden><script src=/render.js></script></html>\"\n}```",
"The script `render.js` receives the JSON as input and is responsible to render the page."
]
},
"usage": {
"title": "## Usage",
"description": [
"First create an HTML file with the JSON information:",
"```{\n \"title\": \"Example Page\",\n \"description\": \"This is an example.\"\n}```",
"Include the initiator at the bottom:",
"```{\n \"title\": \"Example Page\",\n \"description\": \"This is an example.\",\n \"#render\": \"<html hidden><meta charset=utf-8><script src=/render.js></script></html>\"\n}```",
"The next section explains how to create the `render.js`."
]
},
"only-data": {
"title": "** Pure information **",
"description": [
"The JSON must contain only pure information without any concern about design or markup. All the design and markup required to render the page must be inside the rendering script."
]
},
"create-render": {
"title": "## Creating a render",
"description": [
"Create a new javascript project and install the package `wdr-loader`:",
"```npm install wdr-loader```",
"Call the `loader` function to retrieve the JSON:",
"```import loader from 'wdr-loader';\nloader(data => render(data));```",
"Create a `render` function to handle the data and render the HTML. Below is an example using simple `innerHTML`:",
"```function render(data) {\n document.head.innerHTML = `\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <title>${data.title}</title>`;\n\n document.body.innerHTML = `\n <section>\n <h1>${data.title}</h1>\n <p>${data.description}<p>\n </section>`;\n}```",
"The `wdr-loader` code is available on [GitHub](//github.com/webdatarender/wdr-loader) with an example."
]
},
"basic-render": {
"title": "## Basic render",
"description": [
"If you don't want to create a render right now, it is available a basic render (used on this very website) to immediate use:"
],
"download": "[render-basic-1.0.3.js](//webdatarender.com/dist/render-basic-1.0.3.js)",
"instructions": [
"Just download the script and include it on the initiator directly:",
"```{\n \"title\": \"# Example Page\",\n \"description\": \"This is an example.\",\n \"#render\": \"<html hidden><meta charset=utf-8><script src=/render-basic-1.0.3.js></script></html>\"\n}```",
"The code is available on [GitHub](//github.com/webdatarender/wdr-render-basic)."
]
},
"remarks": {
"title": "## Remarks",
"description": [
"• The page is rendered in [quirks mode](//developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) and can present some layout differences on different browsers.",
"• Although javascript is necessary to render the page, most search engines, like [Google](https://developers.google.com/speed/pagespeed/insights/?url=webdatarender.com) or [Bing](https://www.bing.com/webmaster/tools/mobile-friendliness), will be able to read the page correctly.",
"• If you want to display the JSON for users that have javascript disabled, you can include `noscript` at the initiator: ```<noscript><style>html{display:block !important; white-space:pre}</style></noscript>```"
]
},
"support": {
"title": "## Need Help? ",
"description": "If you need help, have any feedback or just want to say hi, send me an [email](mailto:gpiresnt@gmail.com)."
},
"about": {
"creator": "Created by [@gpiresnt](//twitter.com/gpiresnt)",
"logo": ""
},
"#render": {
"_": "<html hidden><meta charset=utf-8><script src=/dist/render-basic-1.0.3.js></script></html><noscript><style>html{display:block !important; white-space:pre}</style></noscript>",
"css": "css/main.css"
}
}
by FriedrichN on 12/9/20, 9:11 AM
by pixelbreaker on 12/9/20, 2:51 PM
by zelly on 12/9/20, 3:48 AM