Install pngcrush on mac

Steps to install pngcrush:
1.  (precondition for compile pngcrush source code) Installed Xcode, and installed Command Line Tools from Xcode -> Preferences -> Downloads -> Components -> Command Line Tools

2.  Download pngcrush latest version
http://sourceforge.net/projects/pmt/files/pngcrush/

3.  Extract the downloaded package and run "make"

4.  Move or copy pngcrush to one $PATH folder
sudo cp pngcrush /usr/sbin/

5.  Try out
pngcrush -reduce -brute original-image.png new-image.png

Quick notes about image optimization:
When we talk about image optimization for web performance, we usually consider use pngcrush to optimize PNG file, and use Jpegtrans to optimize JPEG file. Usually we automate this in web build. I once wrote a post regarding this topic.

On mac, there is an app called ImageOptim which supports many cool tools.

https://www.xebew.com/xebinders/#join/BlGnxLjLT6f7cOiJgcpCbTC

Detect Retina Display using Javascript

New retina display macbook pro asks web developers to detect retina display using Javascript, so that web server can serve high resolution images for better visual experience on retina display. Today I did some quick test on different browsers and found Safari/Chrome already supports retina display though Chrome doesn't provide window.retina interface to Javascript developers. I believe Firefox will soon add this support in such a browser war.

Firefox 14.0.1
window.retina => undefined
window.devicePixelRatio => undefined

Chrome 21.0.1180.57
window.devicePixelRatio => 2
window.retina => undefined

Safari 6.0 (8536.25)
window.retina => true
window.devicePixelRatio => 2

Based on above experimental result, I suggest to use below Javascript to detect retina display and do corresponding logic (like loading high resolution images). See pseudo codes below.

var retina = (window.retina || window.devicePixelRatio > 1);
if (retina) {
//retina display
//load high resolution picture
$(img).src = 'high-res.jpg';
}
else {
//non-retina display
//load low resolution picture
$(img).src = 'high-res.jpg';
}

Macbook Pro crashed

All of a sudden, my new Macbook Pro started to crash quite often, sometimes one crash every minute, and then crash around 15 minutes. I started my "fix" using different ideas.

First, I tried to recall what kind of changes I had before the crash happens, and consider "dropbox bug when its 2G storage limit is reached", so I quit the app, delete the app, and reboot system. However, crash still happens after few hours.

Second, after some search on google, some people suggest to delete system caches. I had a try to delete most system caches from various cache folders

~/Library/Caches
/Library/Caches
/System/Library/Caches
/private/var/root/Library/Caches
However, this clean up didn't save the crash.

Third, I looked the System Diagnostic Reports from Console application, and found most crashes with below information. It shows that it is Mac OS X system error.


Process:         WindowServer [1458]
Path:            /System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/CoreGraphics.framework/Versions/A/Resources/WindowServer
Identifier:      WindowServer
Version:         ??? (???)
Code Type:       X86-64 (Native)
Parent Process:  launchd [1]
Date/Time:       2012-07-25 15:20:17.888 -0700
OS Version:      Mac OS X 10.7.4 (11E2620)
Report Version:  9
Crashed Thread:  0  Dispatch queue: com.apple.main-thread
Exception Type:  EXC_BAD_ACCESS (SIGSEGV)
Exception Codes: KERN_INVALID_ADDRESS at 0x00007fff00000010



After reading some discussions on apple support site, I tried to disable "Automatic graphics switching" from Apple -> System Preferences -> Energy Saver. After I disable the option for both batter/adapter, so far so good. I am not sure if this configuration change can solve crash issue.

Last, Mountain Lion is released today, so I can upgrade Lion to see if the crash goes aways with latest Mac OS. There are a lot of cool features in Mountain Lion, but I do hope the crash issue is resolved as well.

Sublime Text 2

This is an awesome text editor.

Install Sublime Package Control which is a full-featured package manager that allows for easy discovery, installation, upgrading and removal of packages from various sources. Includes an automatic upgrader to keep your packages up to date.

Lots of plugins http://wbond.net/sublime_packages/community

Customize User Settings:
Copy default settings to User settings (which will not be overridden when upgrade Sublime Text 2)
Sublime Text 2 -> Preferences -> Settings - Default
Sublime Text 2 -> Preferences -> Settings - User

I turned on the following settings to avoid SVN difference caused by extra spaces
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"save_on_focus_lost": true,

Frequently used key sets:
cmd+shift+p