Archive for June, 2010

How To Phish, Protect Your Email, and Defeat Copy-And-Paste with CSS

Wednesday, June 16th, 2010

It’s not often that you learn something from spam, besides that there are an extraordinary number of generous Nigerians (replete with theme song) and amazing number of variations in the spelling of viagra. Yet, I recently got spam where the offer was written in pristine English: no numbers replacing letters, no images, and no misspellings. How had such a brazen piece of spam got through my filters? The answer, it turns out, was some clever CSS that caused the HTML markup to be garbled but its visual rendering to be readable. I’ll show you how to use this for both good and evil.

(more…)

Animation with CSS Transitions Made Easy

Friday, June 11th, 2010

There are currently two proposed additions to CSS to make animating easier and with better performance: CSS Transitions and CSS Animations. Both are unfortunately named. The later is complicated, overkill, and probably won’t be supported by non-Webkit browsers, which leaves CSS Transitions as becoming the de-facto way to natively animate on the Web. Besides reducing power-hungry Javascript-based animation, the declarative CSS Transitions opens the door for hardware acceleration and commercial quality games. iOS devices and Safari already do so for buttery smooth results, and hardware acceleration just might make it into Firefox 4.

How Do CSS Transitions Work?

Normally, when you change the value of a CSS property, it changes instantly. With CSS Transitions, they automagically animate over time. Imagine you want to have a rollover indication for links where, on hover, the link changes its background color and jigs up a bit. With CSS Transitions instead of having the effect happen instantly, it can smoothly animated. Here’s how you’d do it.

You’ll have to use the -moz and -webkit prefixes for these properties until the CSS transitions specification is finalized.


a{
  transition-property: all;
  transition-duration: 350ms;
  transition-timing-function: ease-in-out;
  position: relative;
  background-color: white;
  color: black;
}

a:hover{
  top: -2px
  background-color: black;
  color: white;
}

(more…)

Macintosh Project Genesis and History

Friday, June 4th, 2010

I was recently looking at some of my father’s, Jef Raskin, old documents and came across his February 16, 1981 memo detailing the genesis of the Macintosh. It was written in reaction to Steve Jobs taking over managing hardware development. Reading through it, I was struck by a number of the core principals Apple holds now that were set in play three years before the Macintosh was released. Much of this is particularly apropos in understanding Apple’s culture and why we have the walled-garden experience of the iPhone/iPad and the App Store.

Even better, I found some sometimes-snarky annotated comments Jef made to the memo as part of the Stanford Computer History project. The annotated memo follows my commentary.

(more…)