Couple issues with Opera’s current implementation of CSS transforms. I’m looking at this with version 10.62

• Re-renders texts with poor anti-aliasing
• A space in the value of transform functions will be thrown. So scale( 0.5) will not work, but scale(0.5) will. This goes for any transform function, translate(), rotate(), etc.

Live example:

-o-transform: translate( 20px, 10px) Value function has leading space. Transform will not be recognized. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-o-transform: translate(20px, 10px) No leading space. Transform re-renders text with poor anti-aliasing. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Screenshot:

Regarding a better way to hide MAMP:

MAMP > Preferences > Start/Stop > Un-check Stop servers when quitting MAMP > Quit MAMP

Via the following smartypants: Mario Estrada, Jay Robinson, Adrian with a W., Warren Black, and Lord Arthouse

Along with being the file to store your Terminal aliases, ~/.profile also allows you to color the Terminal prompt. This article has the particulars: BASH Shell change the color of my shell prompt under Linux or UNIX

First take a look at the current prompt with echo $PS1. It should return with \h:\W \u\$ . The articles above detail what those variables represent, and it translates to host:directory username$. Color syntax starts with [\e[0;31m\] and ends with \[\e[m\]. The color code itself is 0:31, where 31 is the color (in this case red) and 0 being the equivalent of font-weight (bold is 1).

I am currently rocking:

export PS1="\[\e[0;31m\]\h:\[\e[m\]\[\e[0;34m\]\W\[\e[m\] \[\e[0;30m\]\u\[\e[m\]\[\e[0;33m\]\$\[\e[m\] "

Which is the same host:directory username$ but now red:blue darkgray and a beige $.

UPDATE 16 Nov 2010 Revised opening and closing tags to \[\e[0;31m\] and \[\e[m\]. Previous version didn’t close tags properly and messed up line breaks. Removed link to erroneous article.

John Schulz continues to do my job for me.

re: putImageData is a complete jerk I don’t know if this has been suggested already, but use drawImage instead http://jsfiddle.net/JFSIII/Ga5jf/

— John Schulz

The thing pulling it all together is converting the canvas into a data URL and using that as an image:

var img = new Image();
img.src = canvas2.toDataURL('image/png');
ctx2.drawImage(img, 30, 10);

Gonna have to give him a back rub one of these days.

I use MAMP everyday, nearly all day to simulate running a server on my Mac. It’s awesome. Once I start up MAMP, I rarely have the need to use the application window. One more window means messier Exposé reveals and more dock clutter. There’s no need to have it around. But (I believe as a way to incentivize you upgrading to MAMP Pro) you cannot close the application window. This means that the window is always present, either on your desktop, or minimized in the dock.

Here’s how I hide the application altogether: Dock Dodger removes the application icon from the doc. Then hide the window with Cmd + H. If I ever need to get back to the application, I can do it via Quicksilver or Spotlight.

Overwriting

Using canvas’ putImageData() method completely overwrites the pixels it replaces. Take a look.

Each canvas has a yellow background to exhibit transparency. The first canvas has the same three circles overlaid on top of each other. As their fillStyle color has partial opacity, the red color is built up.

The second example uses getImageData() to capture a snapshot of the current canvas context. That image is then re-rendered at an offset position. Instead of three circles overlapping one another, the area of the putImageData output blows out the pixels underneath.

Unaffected by manipulation methods

Neither translate() nor rotate() will have any effect on subsequent putImageData() calls.

Breaks Firefox if bleeds outside canvas bounds

Also of note is that Firefox with throw an error if the output of putImageData() extends outside the bounds of the canvas. In this example, I had to crop the dimension of getImageData() so the putImageData() output would fit inside the canvas. If I kept getImageData to the original canvas dimensions, Firefox returns with An invalid or illegal string was specified" code: "12.

jerk.

Collectively, this is all pretty disappointing, as putImageData had tremendous potential. It would be especially useful to use putImageData as a way of reproducing Photoshop layers, or brushes, or all sorts of wondrous techniques that will have to be hacked together.

Today, Paul Irish released mothereffingtextshadow.com. In typical Paul Irish fashion, it is a remarkable delight. Mr. Irish was kind enough to leave a comment in the markup:

all <3 goes to david desandro, who popularized this and many other amazing things.

The <3 is felt, bro.

But if anyone deserves <3, it would be David Cole. I first found the technique employed in his work for Sleepover’s Chunky Tumblr theme. Mr. Cole’s original implementation generated a triple offset border, an incredible innovation. While numerous others have picked up on my derivatives, I rarely see anyone use text-shadow the way he first did.

I needed a function that converted an integer of milliseconds into a string of a human-readable time. This is based off the multiple responses from StackOverflow: How to convert milliseconds into human readable form?

// converts milliseconds to '3:45' or if hours > 0, '2:01:23'
getTimeFromMillis = function( ms ) {
  var seconds = ~~( ( ms / 1000 ) % 60 ),
      minutes = ~~( ( ms / ( 1000 * 60 ) ) % 60 ),
      hours   = ~~( ( ms / ( 1000 * 60 * 60 ) ) ),
      twoDigit = function ( n ) {
        return n < 10 ? '0' + n : n;
      },
      seconds = ':' + twoDigit( seconds );

  return hours > 0 ? hours + ':' + twoDigit( minutes ) + seconds : minutes + seconds;

};

It’s up on Git, so please fork, revise and put me in my place.

adam j.sontag:

just found dropshado.ws via @paul_irish …. pretty sure you need an “e” on that “minutia” ;)

Several items of note on this one.

• Mr. Sontag is correct. Minutia is the singular form. Minutiae is plural. I wish to use the plural form in the subtitle.
• After reading several thousand pages worth of the work of Neal Stephenson, I will pounce on any opportunity to use a word which has a derivation with æ.
• The HTML entity for æ is æ.
• Tumblr appropriately parsed the HTML entity from the subtitle field into the markup of the template.
• In the title field for this post, I had to enter Minutiæ. When I first tried Minutiæ the HTML entity was not parsed.
• While æ is a ligature of sorts, it is more appropriately considered a character like other vowels A, E, I, O, U. Wikipedia classifies Æ as a grapheme. I’m sure any typophile can put me in my place about this.

From John Resig’s Pretty Date script

var date = new Date( ( isoTime || '').replace(/-/g,'/').replace(/[TZ]/g,' '));

ISO 8601 time formats look like 2010-09-24T03:05Z

http://www.maxnov.com/getimagedata/

John Schulz, regarding using getImageData() on remote images:

See http://bit.ly/cTS0Vd for ideas on loading remote images. It uses jQuery, but loading img-to-json URL+cb as script should work.

From the $.getImageData page:

$.getImageData allows anyone to get an image from another domain and have pixel level access to it using the getImageData() method. It works by sending a request with the URL of the image to google’s servers via the Google App Engine. The server then converts the image into base64 encoded data URL and sends the image back as a JSON object. This means that the image can be locally included on the website and therefore it can be edited by the canvas tag.

4.8.10.2 Security with canvas elements — HTML5

Information leakage can occur if scripts from one origin can access information (e.g. read pixels) from images from another origin (one that isn’t the same).

To mitigate this, canvas elements are defined to have a flag indicating whether they are origin-clean. All canvas elements must start with their origin-clean set to true. The flag must be set to false if any of the following actions occur:

• The element’s 2D context’s drawImage() method is called with an HTMLImageElement or an HTMLVideoElement whose origin is not the same as that of the Document object that owns the canvas element.

…

Whenever the toDataURL() method of a canvas element whose origin-clean flag is set to false is called, the method must raise a SECURITY_ERR exception.

Whenever the getImageData() method of the 2D context of a canvas element whose origin-clean flag is set to false is called with otherwise correct arguments, the method must raise a SECURITY_ERR exception.

I was pretty jazzed to get Close Pixelate working on all over the web. Dynamically pulling in images from Flickr would have been fun. Turns out the HTML5 Spec explicitly disallows using getImageData or toDataURL() on images not hosted on the same domain of the current page.

The iPhone 4 got me thinking about pixel density a couple months back. I feel like I’ve mislead, thinking that “72 DPI” was the standard “resolution” for digital screens. Of course I know now this metric is merely a misunderstood concept I must have inherited from print designers trying to equate screens to physical paper.

At work, I typically have 3 screens at my disposal: a 15.4” screen on my 15” MacBook, a 3.5” screen on my iPhone 3GS, and 23” Cinema Display (2006 Model). Looking at the same view between these screens, the difference in pixel density is fairly visible. If you use an additional display with your laptop, try dragging a window in between the screens and compare how the window lines up.

Pixels per inch (Shouldn’t it be pixels-per-inches-squared?) is calculated by the square root of horizontal pixels squared plus vertical pixels squared divided by the diagonal screen size. Or in Javascript terms:

Math.sqrt( px*px + py*py ) / diag

With that, you can calculate the PPI for a number of devices.

• iPhone 3G: 165
• iPhone 4: 330
• iPad: 132
• 15” MacBook Pro: 110
• 23” Cinema Display (2006 Model): 98
• Motorola Droid & Droid 2: 265
• HTC Evo 4G: 217
• BlackBerry Storm: 185

So yeah, you can forget about 72 DPI for screens.

Odd that Apple advertises the iPhone 4 as having PPI of 326. I’m not sure where the other 4 PPI went, unless the screen diagonal is actually greater than 3.5”.