Eli Grey

HTML 5 dataset support

Update: Getting (not setting) data-* attributes through Element.dataset now works in IE8 with the help of Xccessors.

I have made an implementation of HTML 5 dataset (data-* attributes) support that almost conforms to the HTML 5 spec* and works in Firefox 1.5+, Opera 9.5+, Safari, and Google Chrome. It uses getters and setters to simulate a psuedo-native HTML 5 dataset API. The code is licensed CC GNU LGPL and can be downloaded here. I have uploaded a demo (also in XHTML 5) that you can try out. The script includes these extra functions: Element.removeDataAttribute(name), Element.setDataAttribute(name, value), and Element.setDataAttributes() (all explained below).

*You cannot set new items the standard way like Element.dataset.name = value (already existing items can though). You either have to add new items by doing Element.setDataAttribute(name, value) for single additions and Element.setDataAttributes(object full of {name, value:String} pairs) to add multiple items at once. Instead of delete element.dataset[name], you must use element.dataset[name] = undefined or Element.removeDataAttribute(name) to remove data-name. Example of setting values:

var foo = document.createElement('div');
foo.setDataAttributes({'bar':'blah', 'lorem':'Lorem ipsum.'});
foo.dataset.bar == 'blah';
foo.dataset.bar = 'eligrey.com';
foo.dataset.bar == 'eligrey.com';
foo.setDataAttribute('foobar', foo.dataset.lorem);
foo.dataset.foobar == 'Lorem ipsum.'

CiteDrag drag and drop script

Firefox 3.1 beta 2 recently added support for the standard drag and drop model (also with some extra Mozilla-only ones). I had an idea to automatically add citation info to text dragged from websites to plain and rich text editors using this newly supported API. I named the finished script CiteDrag, which requires no setup other than adding a single script tag anywhere in your website’s page. CiteDrag is licensed GNU LGPL and free to download in two flavors: CiteDrag and CiteDrag + Drag Image. CiteDrag + Drag Image is all of the normal CiteDrag code with some additional code to give a fancy canvas-generated drag image that shows the text content being dragged. CiteDrag is mostly useful for when someone blogs about another person’s blog post. Having the text automatically go into a cited blockquote and having a link back is very useful. I have installed CiteDrag on this blog and I have a demo of it and a rich text area you can use to test out CiteDrag fully.

Here are some examples of what it does when you drag various data types to various input areas: (Note wherever it says title, it will be replaced with the host name of the source page if there is no page title)

  • Drag a link or image (or linked image) to a normal text input: { [link URI] or [image URI] } via {source title} ( {source URI} )
    • Example:  http://example.com/ via Foobar ( http://foo.bar/post/example.com-ftw/ )
  • Drag a link or image (or linked image) to a rich text input: { [clickable link to link URI] or [image URI] or [clickable image linked to link URI] } via {clickable link to source page with title as text}
  • Drag formatted or non-formatted text to a normal text input: “{Text dragged}” ― {source title} ( {source URI} )
    • Example:  “Lorem ipsum dolor sit amet.” ― Eli Grey ( http://www.eligrey.com/ )
  • Drag formatted or non-formatted text into a rich text input: The dragged text goes into a <blockquote cite=”{source URI}”> and after the blockquote is ― {clickable link to source page with title as text}
    • Example:

      Lorem ipsum dolor sit amet.

jData – publicly share data

jData is a new (extremely tiny) library for sharing data about yourself everywhere without a website needing permission/URIs/ect. It is like having a globally accessible localStorage. It is accessible at jdata.eligrey.com in two different API flavors: postMessage and HTTP queries. It only works in browsers that support window.postMessage (ie. advanced browsers like Firefox 3 and the WebKit nightlies) and sorta works in IE 8 beta 2. I may add Google Gears support someday.

What is jData? – Think of the data stored on jData like cookies with no size limit; cookies that can be accessed by any website on the internet. It’s so lightweight that the postMessage API is exactly 300 bytes.
Why make this? – This would be a good resource for storing info about yourself that you are okay with any website on the internet knowing.

Hypothetical situation: Facebook started storing your name (with your permission) to jData.fullname. Then the people who run MySpace think this is a good idea and implement it too. Then other websites start checking jData and see if jData.fullname has been set already and pre-fill the corresponding input text box with your name on a sign up page.

(more…)

More rotⁿ fonts

I previously made two rot13 DejaVu fonts (rot13 DejaVu Sans and rot13 DejaVu Serif) so I thought I might as well make fonts for the other less-widely used rotn ciphers. All of these fonts are based on the open source DejaVu fonts. These are by no way official DejaVu fonts and are just remixes by me under the same license as the normal DejaVu fonts. If you want to distribute the fonts on your website, feel free to do so, and you could optionally link back to me if you want. I don’t care what you do with them. As with all the rotn ciphers, using them twice (ie. using the rot47 font to view rot47 encoded text) will result in the unciphered text. It’s a cipher that decodes what it encodes by doing the same rotations. The example pages require a modern browser that supports webfonts, such as Firefox 3.1 beta or Safari 3.1.2.

Noteboard tweaks and Safari support

I am happy to say that Noteboard now supports Firefox 3+ AND Safari. It doesn’t support the current release of Safari so you have to use the Safari 3.1.2 nightlies since those builds include localStorage. Technically, I should be also be able to make Noteboard work with IE 8 beta 2 due to it supporting localStorage too, but I don’t want to waste my time making fixes for IE.

Now on to the tweaks for version 2.0.1:

  • Documents can now have custom titles instead of having the document name be the title.
  • The title quickly changes to “Noteboard” and changes back when you push Ctrl + D to bookmark Noteboard.
  • I stopped using uneval function built-into Firefox and took part of the JSON.stringify function from json.org’s JavaScript JSON script.
  • I added and changed these keyboard shortcuts:
    • Import is now Ctrl + Alt + 1
    • Export is now Ctrl + Alt + 2
    • To change the current document’s title, push Ctrl + Alt + T
  • Starting the open a document prompt (Ctrl + Alt + O), clicking OK, and leaving it blank opens up the shortcuts page.
  • The shortcuts page is no longer stored on your localStorage and is now a protected static document that can’t be edited/deleted.
  • A lot of code tidying up.