19 ms·
Show HN: This website is valid JSON
- gpnt 6y agoHello 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.
- ipsum2 6y agoI'm confused about: > 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
- gpnt 6y agoYes, this is a good catch. The reason for this is the basic render that I created is generic, and it is not what you should do to render your JSON. The render should fit perfectly with the JSON. The basic render is just for a quick start. For example, the basic render "# Title" creates an h1 header, but if you created the render, you know the internal schema of the JSON, so you can use the correct HTML element for that without recurring to this hack. But the principle is important: try not to use markup on the JSON, because this would make it difficult for others to consume your website with JSON.
- jerf 6y ago"try not to use markup on the JSON, because this would make it difficult for others to consume your website with JSON." Since there is no standard for representing rich text in JSON, if you want rich text, this is simply an unavoidable problem. At least Markdown is semi-standard and people can get libraries for it. Embedded HTML would also work. Defining an ad-hoc rich text embedded would be worse.
- gpnt 6y agoYou are correct. Sometimes, some markup is inevitable. You can try to break down the information to render separately, but it is not always possible. So I think a little bit of markdown would be an acceptable compromise.
- habitue 6y agoThis 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 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.
- np_tedious 6y agoI had a college course that burned way too much time on XSLT. This was 2008 I think. Needless to say I haven't used it since
- gpnt 6y agoYeah, I thought about using XML/XSLT too, but I think JSON would be more aligned with today's tools. Also, the render could be written in React or Vue, and add all the functionalities of a modern web app, for example, not just HTML.
- habitue 6y agoDefinitely your tooling is better incarnation of the idea, XSLT is kind of an abomination
- gpnt 6y agoYeah, I don't have very fond memories about it.
- crdrost 6y agoI love XSLT in theory. It had the daring to say that the most frequently programmed thing that we do is just translate data structures of one shape into data structures of a slightly different shape, and it said “That is what I shall focus on, doing just that.” And the way that it produced that, by “just start writing your output document and insert XSLT when you finally need to loop or query the input” seemed quite nice too, a sort of PHP dialect which didn't have to “escape” out of the document type and resort to echoing raw text. There is a pure functional programming language waiting to be resurrected from the ashes of XSLT, following Haskell's original idea that a program is a pure function from a stream of inputs to a stream of commands. I just hope that someone removes the XML from it, to save on the pain of my pinkies mashing those greater-than and less-than signs. I like the abstract idea that XML is recursively embeddable, and even the radical suggestion that maybe XSLT should be involved in metaprogramming its own syntax trees, but I am not sure that this is worth it. Maybe if we blur the lines between our code editor and a generic UI, someday?
- neolog 6y agoI wonder is it possible to do this without running any javascript, only HTML5/CSS?
- loa_in_ 6y agoYou can use XML+XSLT
- unnouinceput 6y agoNo, you can't. Or create your own browser that can. Remember, HTML, JavaScript, CSS, XML, JSON, etc etc - are only instructions for an interpreter (or even compiler/linker if you feel the need).
- cocktailpeanuts 6y agowhat kind of sorcery is this...
- thomasfromcdnjs 6y agoNot related to the project but I'm working on jsonblog.com, your whole blog can be rendered from a blog.json file. Will look into WDR to see if it could be relevant.
- allenu 6y agoI love this. I read through the page source before reading the content of the blog fully to work out what it does. Really simple idea, but clever!
- amanzi 6y agoThis is an interesting technical hack, but I have to ask what problem this is aiming to address?
- chii 6y agoa (neat) solution in search of a problem tbh.
- gpnt 6y agoI created this tool with a very odd necessity: I hate animations and overlay ;). I would like to have access to the website data directly and build my own interface, but for this, I would have to have access to the information only. I know that the website could expose an API, but WDR feels much more natural and easy (try to do a `fetch` on the page and get the JSON instantly). Now that I have built and have played around a bit, I don't see how can I build a website in any other way. For me, the website's information is important, not the design. WDR exposes that.
- szhu 6y agoThis makes a lot of sense and I agree with this need! I want to throw in a healthy dose of skepticism about whether your solution can address that need -- only because I hope that hearing it early can increase your chances of success! I think a hard problem ahead would be how to convince other people to also adopt this framework, and how to make sure that people are using the same JSON keys to mean the same thing. I'm a little skeptical that this can happen on its own, because we've already tried a standard that was supposed to designed to convey just the content of the website without the presentation -- HTML. I'm curious how you plan to prevent your JSON format from being (ab)used for presentation purposes, where people add extra content to make the page display a certain way. And if you have a plan, is this plan feasible using HTML as well?
- gpnt 6y ago>I think a hard problem ahead would be how to convince other people to also adopt this framework, and how to make sure that people are using the same JSON keys to mean the same thing. At first, I was thinking to use some kind of general schema, but those things never work. So I decided something much simpler: the render determines the schema. This is an important aspect that I am working on. If you choose some specific render, your JSON will have a specific shape. For example, if the render is for a landing page, the JSON could be something like "about", "products", "team", etc. (never <section>, <h1>, etc...). But it is too soon to tell I'm still thinking about it. (but an interesting corollary is that the render could be also a program with the "config" part. It would be an alternative to website builders. Every render would be a different WB tailored for the website) > I'm curious how you plan to prevent your JSON format from being (ab)used for presentation purposes, where people add extra content to make the page display a certain way. And if you have a plan, is this plan feasible using HTML as well? I don't have a plan for that yet, and it will be difficult because we are accustomed to mixing data+markup. But I think the mindset is to stop thinking the website for just the browser. The website could be information first, presentation later.
- ajxs 6y agoIt's a neat trick using the Browser's Quirks Mode to load JSON that can bootstrap a framework, I'm not sure I really understand the benefit though. In order to actually get to the point of bootstrapping, the server has already transferred all of the content, plus the bootstrapping Javascript in a single payload. It seems like this implementation has the weaknesses of using a Javascript framework, without the benefits. Together with all of the weaknesses of static content, without the benefits. All the while depending on a quirk of the browser for support, which not all browsers may support.
- gpnt 6y agoThe idea is to separate the data in JSON completely to be consumed outside the browser if needed, but still render correctly in the browser. The traditional javascript framework only solves the latter. I tried to solve the quirks mode, but it is kind of hilarious that the browser needs the odd <!doctype html> to flip to standard mode. There are ways to inform the doctype on the headers or XHTML, but this would complicate a simple solution. But I was quite surprised how consistent is the look on different browsers, at least in the modern ones.
- ajxs 6y ago> The idea is to separate the data in JSON completely to be consumed outside the browser if needed, but still render correctly in the browser... I'll accept that answer. As controversial as this comment may be, XML/XSLT is a very good fit for this purpose. It might not be particularly modern, however it's almost universally supported.
- gwbas1c 6y agoI'm curious about caching potential with this approach. 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?
- gpnt 6y agoI tested only on small websites, but the performance that I am experienced surprised me a bit. The render is very small and fast and as you said, like the JSON page (that it is also very small because there aren't any HTML tags), very cacheable. More testing is needed.
- spondyl 6y agoYou know, I once had a resume powered by JSON. It was rendered to a PDF (and HTML) but the syntax was backed by JSON. This was years back and I shudder to even recall the idea. 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?
- vlovich123 6y agoI’ve generally saved my HTML resume to PDF without any major issues as a professional SWE for the past ~15 years or so, although I’ve been dealing primarily with SV tech companies and not government agencies in the UK. Microsoft Word is fine too but I would still use something like PDF for export and sharing (still not sure how Microsoft Word solves the usb problem for you). Generally though I like something text-like that I can revision control more easily/edit in vim. Maybe I’ll switch to something like pan doc going forward (then you can generate word if they really want it).
- spondyl 6y agoPandoc can even generate Word docs?! Well dang
- throwaway2245 6y agoThis seems more about putting barriers up to make it difficult for people to collect benefits. If you had this experience again, there would likely be some other barrier.
- spondyl 6y agoThe real head scratcher is that after all that, they said "Ah, you have rent of $160/week? We're glad to offer you $110. Perhaps I misunderstood but paying rent is very much a binary situation so I wondered what was even the point of such a system
- darig 6y agoGreat idea if you want to make every request for a web page result in an additional request to the JavaScript renderer, and then embed markup hacks within both the JSON and the renderer to style anything. Slower and harder to maintain! You're welcome!
- bogidon 6y agoFor 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 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>" } I do however get this warning in FireFox so perhaps this is pretty fragile: > 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?
- pjgalbraith 6y agoIn regards to the character encoding issue, I wonder if they could just move the #render to the top of the object by inserting it as the first property.
- mstade 6y agoI'm guessing there might be issues with the streaming nature of html parsers then. If you put it at the top and the JSON is of any non-trivial size you might end up with the script trying to read invalid JSON since it's not fully loaded yet.
- jammaloo 6y agoThe script could be tied into the global onload event, so that it will only attempt to parse the JSON after the page has been fully loaded. Likely the HTML block is just placed at the bottom of the JSON for aesthetic reasons.
- quineoa 6y agoIsn'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 https://www.reddit.com/r/pics/.json
- zdragnar 6y agoIf you go back to the web as a bunch of file servers, where every URL ended in the extension type of the document you wanted, this is what you get. Then MVC frameworks said "hey, if the URL represents some semantic aspect of the View, we can show off the power of MVC by letting users swap out the view by changing the extension!" And voila, some.com/url.html for HTML and some.com/url.xml for XML and, later, some.com/url.json for JSON Most of the big MVC frameworks offered this out of the box at some point, which made life easier before dedicated RESTful APIs became a thing.
- Felk 6y agoThe 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.
- deleted 6y ago[deleted]
- gpnt 6y agoYeah, it is kind the same, but with the same page.
- bikamonki 6y agoHipsterism 3.0 Love it!
- Gollapalli 6y agoI love this! 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.
- gpnt 6y agoThis is cool, an adaptive feed!
- minikomi 6y agoWow, 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?"]]]]]]]};
- gpnt 6y agoThis 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.
- minikomi 6y agoDon't worry mate, just mucking about. https://en.wikipedia.org/wiki/SXML https://en.wikipedia.org/wiki/SXML
- escherize 6y agoWe do basically this. [0][1] [0] escherize.com/w/hiccup.space [1] escherize.com/w/cljsfiddle
- bhl 6y agoThis is pretty close to how ProseMirror, a rich-text editor, manages its content state. Example of a schema: https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.js https://github.com/ProseMirror/prosemirror-schema-basic/blob... Example of a document converted to JSON: https://tiptap.dev/export https://tiptap.dev/export
- crb002 6y agoThis perversion needs a Qt example. Any takers?
- baddate 6y agoThis is an amazing idea, but this is very complicated to write ,I think, because you need to write html lines.
- russellbeattie 6y agoAt this point, browsers should allow non-markup files - specifically JS or WASM - to be the base of a web page. Browsers will already automatically add in <html> and <body> into the DOM if they're missing on a page, so literally, you could have a website that's just a <script>//do DOM stuff</script> and it'd be parsed and run without issues. 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.
- max_ 6y agoWow. Hacker News is really the place to be I was just thinking of a project like this. 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
- trevor-e 6y agoThe json.org description of an "object" is: > 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?
- ceejayoz 6y ago> Is it safe to assume JavaScript will always parse the keys in order? Technically, no. Functionally, probably yes. Any browser vendor that decides to muck with the current status quo would likely break enough code to be a non-starter.
- gpnt 6y agoThe website uses the basic render, that is just a start to make it easy to create a page quickly. But ideally, you create a custom render, that will not depend on the order.
- chrismorgan 6y agoECMAScript 2015 defines object iteration order as: number keys in ascending order, then other string keys in insertion order, then symbol keys in insertion order. See https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order https://stackoverflow.com/questions/5525795/does-javascript-.... And then JSON.parse is defined as doing the obvious and only sane thing, setting each property as it goes. Consequently, so long as your keys are not numeric, yes, JavaScript guarantees that it will all be in order. But that’s for JavaScript. It is incorrect to treat JSON objects as ordered, because various libraries in various languages will discard the order for various reasons (e.g. efficiency, DoS resistance), since it is defined as being not significant. If you care about the order of things, use an array instead.
- jstrieb 6y agoFun fact: for servers that are not too particular about the Content-Type they receive or the presence of extra object attributes, it is also possible to submit (fixed) well-formed JSON using HTML forms with no JavaScript and a dash of hackery. <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> The important bit is to include a "dummy" key at the end of the JSON object, and an input value that closes the quotes and any open curl braces. That way the "=" character sent in the encoding of the form elements doesn't interfere with the meaningful JSON content. 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.
- ohmaigad 6y agoWhat exactly is the point of this when you could have pure JSON as a hidden form value without any of the "hacks" or worries about content type...
- jstrieb 6y agoIf I understand what you're asking: this trick is useful for submitting data to API endpoints that expect the entire request to be well-formed JSON, rather than just a small part. The (pretty-printed) POST body from the example form in my previous comment will look like a regular JSON request as far as the destination server is concerned, with the addition of a "dummy" key: { "key1": "val1", "params": { "input": "value", "list": [] }, "dummy": "=" } If the JSON is just a hidden form value as you suggest, the request as a whole will not be treated as JSON data. Then invalid characters will (usually) be added to the request body by the browser, and the server will (probably) be unable to parse it, causing the request to fail. This is due to how forms are encoded for POST requests. On the other hand, if you're wondering why anyone would ever do this, then I do not have a good answer for you :)
- zelly 6y agoRIP SEO
- gpnt 6y agoNot really, Google and Bing will read the page correctly with Javascript. Check the page insight: https://developers.google.com/speed/pagespeed/insights/?url=webdatarender.com https://developers.google.com/speed/pagespeed/insights/?url=... But it would be even better if they could get the information directly on JSON. So much carbon saved ;)
- zelly 6y agoIt's not simply about speed. The page looks like spam.
- lxe 6y agoHTML is a markup/description language JSON is a markup/description language Cool, but why?
- deleted 6y ago[deleted]
- User23 6y agoThat I use noscript made this much more amusing.
- deleted 6y ago[deleted]
- Animats 6y agoI think someone just re-invented XSLT.
- flyx86 6y agoOkay so I wondered whether we can leverage XSLT in order to render the JSON without quirks mode. The idea is: * We have an XSL stylesheet that ignores input and renders out the HTML contained in "#render" * Along with the JSON file, we send a header `Link </stylesheet.xsl>; rel="stylesheet"; type="text/xsl"` * We send the JSON with `Content-Type application/xml` * Browser renders the HTML via the stylesheet and then the JavaScript takes over and renders the page without quirks mode Sadly, this doesn't work because when the browser can't parse the JSON as XML, it stops processing and doesn't call the stylesheet :(
- jhgg 6y agoPrior art (rather similar, but instead of being json, it's a JPEG): https://news.ycombinator.com/item?id=12262470 https://news.ycombinator.com/item?id=12262470 tldr: the html is stuffed in the exif data!
- lifthrasiir 6y agoA similar approach is (over)used for codegolfing, namely the PNG bootstrapping method [1] [2] [3]: your code is compressed into a PNG image and the bootstrap in HTML gets appended to the PNG file to decompress and eval the code. The exact method requires some experiments, as browsers change their rules to determine which is a valid image and which is a valid HTML. [1] https://gist.github.com/gasman/2560551 https://gist.github.com/gasman/2560551 [2] https://github.com/codegolf/zpng https://github.com/codegolf/zpng [3] https://xem.github.io/terser-online/ https://xem.github.io/terser-online/ (If you pick the packing method "Zopfli (DEFLATE)", open the zopfli options and change the format to "zpng", you can write directly to the "Minified (Terser)" input to download the optimized PNG. Yes I wrote that part of code and that required way too much algorithm: https://github.com/xem/terser-online/blob/5cc33125/compress.js#L114-L309 https://github.com/xem/terser-online/blob/5cc33125/compress....)
- fanick 6y agoAt my previous job I worked at a whole UI framework (server side) based on XSLT transformations. We built kind of abstraction layer on top of ExtJS,HighCharts and some 3D rendering lib at that time. It was hell to debug anything in there because the output was HTML sprinkled with JavaScript and it was not always easy to identify what part of XML and XSLT was responsible for given part of output. It was quite successfully used in one internal ERP mashup app that sucked data out of some SAP system. Learning XSLT actually helped me understand C++ templates (big aha moment). So we had this XSLT monster crunching on XML files but what we really needed was JSX which probably wasn't a thing until few years into the project.
- fps_doug 6y agoYes yes, sperate content and markup/style. But you can already do this with HTML? 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.
- whoomp12342 6y agoa huge advantage is that you could begin webdesign anew without all the baggage from old html standards
- 93po 6y agoI would love an internet that provides content as JSON in a consistent format. No longer are we restricted to the often awful UI and UX choices and unnecessary stylistic overhauls that make everything more difficult to access. No more pop up banners. No scroll jacking. It sounds like bliss.
- gpnt 6y agoThis is the exact motivation of the project. One of the next steps is to provide a global user preference to signal the render. One step at a time.
- raoof 6y agoif you put the initiator at the top and also add "<script> window.stop();</script>" the page start rendering immediately. I have the same idea but for running simple x86 linux binary in the browser. anybody interested?
- whereistimbo 6y agoThanks a lot! Totally find this useful for my single page diary!
- otabdeveloper4 6y ago> WDR is a format to separate the website's information and design. That's what HTML and CSS is, no?
- outsomnia 6y agoStrict CSP or this... pick one...
- wgx 6y agoThis is neat! Like a much more advanced, polished version of the thing I made a month or so ago: https://wgx.github.io/anypage/ https://wgx.github.io/anypage/ (It's the world's worst CMS)
- rognjen 6y agoVery interesting. 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.
- gpnt 6y agoEmbed the initiator that could be as complex as you like to make senses on-the-fly to the JSON. Very cool!
- FriedrichN 6y agoCool, you made a blank web page!
- durnygbur 6y agoMarkup-inside-data instead of markup-inside-logic? (JSX). You are more elegant than Facebook, Sir.
- lqet 6y ago> For example, this is a valid JSON and web page This is a nice project, but it isn't valid HTML. https://validator.w3.org/nu/?doc=https%3A%2F%2Fwebdatarender.com%2F https://validator.w3.org/nu/?doc=https%3A%2F%2Fwebdatarender...
- deleted 6y ago[deleted]
- nkjoep 6y agoIt doesn't work on my Chrome 87.0.4280.88 MacOS. It works on Safari though.
- gpnt 6y agoThis is odd. This is my version and OS too. What error is showing to you?
- z3t4 6y agoThis reminds me of the semantic web / structured data problem that we all have been trying to solve for the last 20 years.
- gildas 6y agoCool hack! Similarly, this page is valid ZIP https://gildas-lormeau.github.io/ https://gildas-lormeau.github.io/
- adibalcan 6y agoI think that the advantage of this approach is that same output can be consumed either by browser or an API consumer.
- tunnuz 6y agoThis is so cool!
- brianzelip 6y agoHere's the page source: ```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" } } ```
- beshrkayali 6y agoFrom what I can see, your JSON still contains "style" information in the form of Markdown. So this doesn't really separate information from design. If we're going to accept Makrdown as minimal styling, why not just use regular HTML. Which technically is already separating between information (HTML markup) and design (CSS).
- znpy 6y ago> The website is readily available to be consumed outside the browser via JSON, but also still presentable to users accessing through the web browser. Wasn't XHTML (and thus html5) supposed to be parsable, since it's basically XML (specifically, the html spec redefined as XML) ?
- bsldld 6y agoNot excatly like this, but there is another project, https://jasonelle.com https://jasonelle.com, that renders JSON to Android and iOS applications :) Nice project though!
- stephenr 6y agoOr you could... you know.. do type negotiation per-request based on the Accept header, and serve the rendered markup sans JSON bullshit to clients requesting markup, and the JSON data to clients requesting JSON. 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?
- Asmod4n 6y agoThis is the most far away thing possible from server side rendering, correct?
- minho-comcom-ai 6y agothat's why we got user-agent.
- tiborsaas 6y agoIt would be neat to auto load HTML templates from files since if you edit them like this, you lose all the great tooling your IDE can provide to edit HTML.
- pixelbreaker 6y agowhy? whyyyyy?
- tyingq 6y agoIE11 doesn't render anything. Console errors: 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)
- sonicrocketman 6y agoAs a silly concept, I approve. 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
- parisianka 6y agoSeen this on on IH
- SrslyJosh 6y agoRelying on the order of keys in an object seems like a bad idea.