luminescente

Impressões

CSS, Programming — Pedro Cardoso on June 15, 2007 at 10:32 pm

Três coisas relacionadas com impressão, vagamente relacionadas:

- Segundo o post aqui do colega no Planeta, a Epson meteu em tribunal fabricantes de tinteiros compatíveis. Por acaso até tenho Epson (uma C62 com uns aninhos), e sempre usei tinteiros de marca branca. São baratos, funcionam, e não há chip para chatear. Que raio de coisas inventam. Afinal de contas, é tinta, não é Chanel nº5 . Nem se vê gasolina da BMW ou da Ferrari…
- Spam postal do Carrefour tinha um multifunções Lexmark (com leitor de cartões) por 25 euros. Não, obrigado. Lexmark nem para esquartejar para peças.
- Pessoal, estamos em 2007. Para imprimir conteúdo de páginas HTML também se pode usar CSS. Leiam como no sempre actual A List Apart. Apenas com CSS (e a função normal de imprimir do browser) desliga-se o que não interessa aparecer na versão impresa (menus, navegação), além de redimensionar containers, aplicar um tipo de letra melhor para o papel, “ligar” secções escondidas na versão normal do site. E se o browser for decente (ie: não-IE), até se fazem malabarismos como meter o URL de um link a seguir ao próprio link e coisas ainda mais catitas. Poupa-se o servidor, cliente e o utilizador que tem menos um popup para gerir.

load “”

Programming — Pedro Cardoso on April 23, 2007 at 6:46 pm

10 PRINT "Muitos parabéns, speccy, e muito obrigado.”

20 GOTO 10

run

Javascript/CSS Image Reflection

CSS, Hack, Javacript, Programming, Projects — Pedro Cardoso on April 24, 2006 at 11:07 pm

reflex demoHere 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! :)

input type=search - Extreme overhauling

Programming, Projects — Pedro Cardoso on March 26, 2006 at 6:38 pm

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

Safari Input Search

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.

Input Search Test

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.

Small things

Apple, Programming — Pedro Cardoso on March 15, 2006 at 12:37 am

Pretty PHP code instantly

Have some ugly PHP code you need to beautify? Install the PEAR php_beautifier package and with Mac OS X’s pbcopy/pbpaste commands you’re ready to go.

Copy the source you’re dealing with to the clipboard, and on the command line do this:


$ pbpaste | php_beautifier | pbcopy

Tada! Paste it back into the editor and it’s certainly a lot prettier.

While you’re at the command line, do a man pbcopy for more information about this amazing utility on OSX.

And now, something different. Reading Russell Beattie’s feed today and came across box.net, a online storage thingy. Seemed cool, complete with some public features so you can share files with others (or other share files with you), and as such I’ll provide you with a link, complete with my email address on it so you can refer me on it. :)

« Previous PageNext Page »
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License. | luminescente