Hacker News new | ask | show | jobs
by sltkr 626 days ago
A very simple alternative is to type "data:text/html," in the URL bar, and then just paste your HTML content after it, generating a URL that looks like this:

    data:text/html,<!DOCTYPE html><html><body>Hello, world!</body></html>
Most browsers don't preserve newlines when pasting (Chrome replaces them with spaces, Firefox seems to remove them) so this occasionally breaks stuff that depends on exact whitespace formatting (like <pre>-blocks or Javascript code without semicolons), but 99% of the time it works just fine.

Rendering SVG can be done exactly the same way, using "data:image/svg+xml," as the prefix. For example:

    data:image/svg+xml,<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg"> <circle r="45" cx="50" cy="50" fill="red" /> </svg>
3 comments
Timwi 626 days ago
Unfortunately, the # character puts a spanner in the works. The browser interprets it as a fragment and thus ignores everything after it. Since # is very common in SVG (color codes, id references), they break more often than I'd like.
link
myfonj 626 days ago
I found typing DataURIs in the location bar to be the "primitive technology" meditation analogue of crafting stuff from flint.

In the spirit of "craftsmen should make their own tools," I've started making an "HTML sandbox" editor with live preview [1] this way, to avoid having to type everything in the URL. It has been fun, and I use it literally daily. It has limited features (no syntax highlighting, for example), but it's super fun to craft that tool in itself.

I dare to bet it has the fastest startup among similar tools. When launched through a keyword "search" bookmark to "seed" the initial content into it, it probably has the fastest "from idea to looking at the outcome" user story of them all. For example, if I have a whim to see whether my browser still can do <blink>, I (alt+)enter "s <blink>foo" into the URL bar and bam, have it loaded, displayed, and can continue editing it in a multiline editor (well, simply a textarea).

[1] https://gist.github.com/myfonj/c8ce74bf549e19600026ce9022388...

link
MarioMan 626 days ago
I've wanted to abuse this to support a static site "hosted" entirely from a QR code, but I haven't found any QR scanners that interpret the data URI as something to open in the browser. And without wide support, that project is hardly worth bothering with.
link
myfonj 625 days ago
Yes, the sad part of this otherwise brilliant feature is how it got butchered "for the sake of security". Reportedly crooks abused dataURIs as hosting for malware and self-hack schemes. Understandable: it sounds "better" to embed the whole phishing page in link inside e-mail, than to operate some ephemeral server serving the phishing page, that could be blocked on firewall, DNS, or whatever.

So in effect, currently no evergreen browser lets us for example do a top-level navigation to dataURI document. The only way you can get top-level dataURI in your browser is either to type it or open from bookmark. Firefox for example has super cool feature to open "Open this frame to a new tab", what only produces new tab with the dataURI in the url bar, but we have to finish the navigation by pressing Enter or in there.

URL shorteners also do not like dataURIs. Also understandable, since they probably do not want to be "hosting". I have one ancient tinyurl link back from days top-level dataURI navigation worked and tinyurl supported it [1]. This document was able to modify itself :]

Ah, days of yore. I would really like to have a pref in browser's options give me (and other power-users) these "dangerous features" back, like "I know what I am doing and I will always check the URL of all pages, now give me unrestricted dataURIs."

[1] http://tinyurl.com/selfcontained-editable-datauri

link