Showing an image when dragging any tag in HTML

Chrome and Safari support displaying a ghost image for draggable objects out of the box, Firefox does not. It's not a big deal, I'd say a matter of one event handler.

This is a sample HTML:

Drag Me!

and JavaScript code:

$(function () {
    var dragImage = document.createElement("img");
    dragImage.src = "/image/to/show/when/dragging.jpg";
    function handleDragStart(e) {
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setDragImage(dragImage, e.layerX, e.layerY);
    }

    $("#draggableObject").get(0).addEventListener('dragstart', handleDragStart, false);
});

Native HTML5 Drag and Drop

MDN::dataTransfer

Make string html-safe

To make a string HTML-safe (convert & to &, > to > and so forth):

>>> import cgi
>>>
>>> test_string = "This is <unsafe> string & it contains wrong symbols"
>>>
>>> print cgi.escape(test_string)
This is &lt;unsafe&gt; string &amp; it contains wrong symbols

Force FF not to fill up input by its 'memorized' state after refresh

If it is a very annoying thing for you, use autocomplete="off" for every input you want to avoid memorizing.

XPath at HTML in Python

This technique allows to treat HTML code as XML (if even HTML is not totally valid) and use XPath expressions over it.

from lxml import etree

content = '... some html ...'
# use the HTML parser explicitly to provide encoding
parser = etree.HTMLParser(encoding='utf-8')
# load the content using the parser
tree = etree.fromstring(content, parser)
# we've got a XML tree from HTML
# now get all links in the doc
links = tree.xpath(".//*/a")
for link in links:
    href = link.get('href') # get tag's attribute
    name = link.text() # text between open and close tags

Some links:
API reference
Usage tutorial