luminescente

Continua atrasada, como sempre. Ainda não há novidades, como sempre. Vou separar este assunto do blog. A partir de agora (ou daqui a uns dias), podem ler tudo em terracosdaponte.luminescente.com.

Bem, isto possivelmente viola os termos de utilização do Miau e ainda está inacabadíssimo, mas pode ser que seja útil a alguém.

Feito numa noite em que me deu na mona ir procurar um Amiga 500/600/1200 para juntar aqui ao museu.

Aqui vai o link: http://www.luminescente.com/miau/

Alguns feeds (os que saltam para páginas intermédias) não funcionam, mas podem colocar os 3 valores que são passados na função gtc no fim do URL de um qualquer feed, pela ordem da chamada à função gtc.

E quem teve a brilhante ideia de usar forms e submits por POST para fazer uma treta de um link devia ser condenado a passar a eternidade a escrever HTML em Graffiti num Palm.

Here is a new CSS/Javascript hack of mine: transparent image reflection, like it can be seen on the image on the left.
Been toying with this for the last few days and after some testing here it is. It’s slow, not fully tested, and probably not good enough to be used, but this can be something to improve and build on.

The idea itself is not original, as it can be seen in lots of places, from websites to software, but this implementation is as far as I know unique, in the sense it does not require browser support for the Canvas tag, like this implementation.

It’s working with Safari, IE and Firefox. IE and Firefox support animated gifs as background, so if the source image is a animated GIF so is the reflection.

Here it is, play with it, check the source and let me know if you liked!

If you’re using Apple’s Safari browser, you may have noticed the following input element, similar to a text box.

This element was introduced with Tiger (Mac OS X 10.4) integrated with Dashboard and Safari RSS, but it soon started to appear in some other sites. At it’s heart, this is just a special kind of INPUT element, of type “search”, that Safari renders as a Cocoa search field. Other browsers that don’t know what it is (ie, everyone else) default to a normal textbox, with no ill effects, apart from failing validation.

There are several new attributes for this element, documented here, but in short:

• placeholder: the text to be shown in light gray when the box is empty
• autosave: the identifier for auto saving entered values
• results: the number of auto saved searches

What if there was a way to have this kind of element rendering in the other browsers like it does in Safari?

Well, I hacked away and now there is. I’ve been wanting to wait a little more and clean up the code but release early and release often, right?
Just include the code at the end of this post in your HTML, and that’s all, your search input elements will become like this in other browsers.

Under the hood

At startup, all the INPUT elements of type search are parsed and this happens:

• The element we are messing with is hidden, and a new container SPAN is created containing (in this order) the search image, a new textbox and the clear button. These elements are styled to look like a single element. In Mozilla, the corners are rounded using the -moz-corner-radius CSS rule.
• The onBlur/onFocus events are defined so we can automatically clear and set the textbox’s default message (using the attribute placeholder)
• Similar monkey business is done to the onChange so we can show/hide the clear button when appropriate.

Notes: This behaviour can be easily modified to apply this hack to elements with a certain className, instead of applying to elements of input type=search. When in the presence of Safari, replace the text with a search input. This way the (X)HTML could remain standards-compliant.

This code is yours to do as you please, just leave a comment if you like it…

Todo

• Re-use the text element instead of creating a new one and hiding the old one.
• Paste-aware
• Implement auto saving (using client-side cookies?)
• Improve the positioning of the images

The files are here. You need the HTML along with the image files.