나같으면 플래쉬로 처리해버리고 싶은 유혹을 뿌리치지 못했을듯.

소스를 보면서 html5의 간단한 doctype을 보고 있자니 xhtml의 doctype을 외워서 사용하는 사람의 퍼센트가 얼마나 될지 궁금해졌다. 누가 이렇게 복잡하게 만들어 놓은거야?

wordpress 2.3이후로 Canonical URLs 기능이 추가되서 여러가지 퍼머링크로 접속해도 자동으로 기본 퍼머링크로 리다이렉트시켜주는데 이전에 사용하던 퍼머링크에서 날짜를 빼버린탓인지 계속 404에러가 나서 손놓고있다가 태영님이 아파치세팅을 바꿔주셔서 기존 퍼머링크에서 새로운 퍼머링크로 리다이렉트도 완료했습니다.

그런데 이스크립트는 타임존을 처리하는부분에서 문제가 있기에 이부분을 수정하려다가 아예 jquery용으로 다시 만들어보았다.

짜집기코드이므로 퀄리티를 논하지 말자!

html, CSS

<style type="text/css">
.friendfeed {}
.friendfeed li {}
.friendfeed_icon {
	float: left;
	width: 16px;
}
.friendfeed_text {
	display: block;
	padding-left: 24px;
}
.friendfeed_text img {}
.friendfeed_date {
	display: block;
	margin: .5em 0;
}
</style>
...
<div id="friendfeed-badge"></div>

javascript

/* calculate our timeZone */
var d = new Date();
var offset = (d.getTimezoneOffset()/60);             

// Used internally, takes ISO timestamp, makes it pwetty
// http://ejohn.org/projects/javascript-pretty-date
function prettyDate(time){
	var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," "));

	date.setHours(date.getHours()-offset);
	diff = (((new Date()).getTime() - date.getTime()) / 1000);
	day_diff = Math.floor(diff / 86400);

	if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
		return;

	return day_diff == 0 && (
			diff < 60 && "just now" ||
			diff < 120 && "1 minute ago" ||
			diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
			diff < 7200 && "1 hour ago" ||
			diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
		day_diff == 1 && "Yesterday" ||
		day_diff < 7 && day_diff + " days ago" ||
		day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
}
 
$(document).ready(function() {
	// Friendfeed User Settings
	var settings = {
		userName : 'gtgrf', // user name
		nam : 'gtgrf',
		itemsToShow : 10, // Number of items to retrieve
		imageSize : 70 // thumbnail size
	}

	$.getJSON('http://friendfeed.com/api/feed/user/' + settings.userName + '?num=' + settings.itemsToShow + '&callback=?',
		function(data) {
			$('#friendfeed-badge').append('<ul class="friendfeed"></ul>');
			var container = $('#friendfeed-badge ul')

		// loop for each friendfeed entry retrieved
		$.each(data.entries, function(i, entry) {
			if (entry.hidden != true) {
				var svc = entry.service;

				var t = '';

				t += '<li>';
				t += '<a href="'+svc.profileUrl+'" title="View '+settings.nam+'\'s profile on '+svc.name+'" class="friendfeed_icon">';
				t += '<img src="'+svc.iconUrl+'" alt="'+svc.name+'">';
				t += '</a>';
				t += '<span class="friendfeed_text">';
				t += '<a href="'+entry.link+'" title="'+entry.title+'">';
				if (/flickr|tumblr|youtube/i.test(entry.service.id)) {
					if (entry.media.length > 0) {
					t += '<img width="'+settings.imageSize+'" src="'+entry.media[0].thumbnails[0].url+'" alt="'+entry.title+'" />';
					}
					else {
					t += entry.title;
					}
				}
				else {
					t += entry.title;
				}
				t += '</a>';
				t += '<span class="friendfeed_date">';
				t += prettyDate(entry.published);
				t += '</span>';
				t += '</span>';
				t += '</li>';

				// append content to container
				container.append(t);
			}
		});
	});
});

참조 스크립트

• Read Friendfeed Using jquery
• Friendfeedbadge
• Javascript Pretty Date

그런데 작업후반 호환성테스트를 하면서 opera, ie8 rc1에서 렌더링문제가 있는것을 발견했다.

오페라에선 .load()를 이용한 페이지로딩시 제대로 작동하지 않고, 대부분의 페이지에서 빈페이지로 렌더링이 되어버렸으며, ie8 rc1에선 margin이 적용이 안된것처럼 렌더링이 되는 경우가 발생했다. 이경우 마우스로 그부분을 드래그해서 선택해주면 제대로 렌더링이 되기는 한다.

현재 버그리포팅이되어있기는 하지만 뚜렷한 원인이 밝혀지지 않은듯하여 수정에는 조금 시간이 걸릴것으로 보이기때문에 당분간은 1.2.6버젼을 사용하는게 좋을것이다.

그런데 언제부터인가 과열로 인한 자동 잠자기때문에 사용이 불가능할 지경이 됐는데 초반에는 작업(WOW)을 심하게 할때만 그랬지만 요즘은 파일 권한체크만 해도 중간에 시퓨온도가 90°C를 넘어가며 잠자기로 들어가버린다.

그래서 지금 진행중인 작업이 끝나면 분해해서 팬청소라도 해줄까 하고 생각하고 있었는데 여기저기 글을 읽어보니 내가 사용중인 모델은 분해가 아주 까다로운데다가 분해해봤자 의외로 먼지가 없다는 반응이 대부분이었다.
인텔맥이라면 Fan Control 프로그램으로 과열을 어느정도 막을수 있지만 PPC기반은 System Management Controller (SMC)가 없기때문에 프로그램을 이용한 방법은 사용할수도 없다.
그러다 발견한 방법이 Fan Speed를 조절하는 kext파일을 수정하는 방법인데 과정은 상당히 간단했다.

/System/Library/Extensions/AppleFan.kext/Contents/Info.plist파일을 root계정으로 열어서 fan-hysteresis-temp와 fan-speed-table의 값을 원하는 온도(°C)의 값만큼 낮춰주면 된다. 이 값은 온도(°C)x256으로 되어있다.
예를들면 fan-hysteresis-temp (fan이 돌아가는 온도?)는 14080/256 즉 55°C이다.

이걸 수정하면 팬이 엄청 시끄러워질테고, 자칫하면 컴사망의 원인이 될수도 있기때문에 최후의 보루로 남겨둘 생각이다.

.pngbg { background-image: url(bg.png); }

* html .pngbg {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg.png", sizingMethod="crop");
}

이 방식은 지금까지 수도없이 사용했던 방식이었고 테스트서버에서도 아무런 문제가 없었는데 본서버로 데이터를 옮기자 ie6에서 png이미지가 아예 로딩되지 않는 문제가 발생했다.

1. 동일한 파일인데도 특정서버에서는 png이미지가 로딩되지 않는다.
2. filter를 지우고 저장한뒤 페이지를 리로드해보면 hack이 적용안된 이미지가 보인다.
3. 다시 filter를 주고 저장한뒤 페이지를 리로드하면 제대로 png hack이 적용이 된다.
4. 페이지를 이동한뒤 다시 확인해보면 이미지가 사라져있다.

아마 서버상의 캐쉬관련 세팅문제일거라고 추측은 되는데 확인할 재주가 없어 gif노가다로 처리할 수 밖에 없었다.

황금같은 주말이브를 말아먹어주신 ie6 ㄱㅅ

ps. png8을 이용한 크로스브라우저를 지원하는 투명png를 만드는 방법이 있긴하다. (링크수정)

그런데 새로운 기능이 다 좋은것만은 아니다.

크롬스타일의 새로운 탭바는 자리를 덜 차지하고 조금더 직관적인 인터페이스를 보여주지만 파일을 드래그해서 새탭을 만들수있는 방법이 없어져버렸다.
snapback버튼은 검색창에만 남아있고 주소창에선 사라져버렸으며 아직까지는 되돌릴수 있는 방법도 없다.
snapback버튼과 로딩바를 밀어내고 주소창안으로 이동한 reload,stop,loading 겸용 버튼은 눈에 띄지않는다. 페이지로딩이 빨라졌다는걸 강조하고싶은 마음은 이해하지만 기존의 로딩바가 훨씬 직관적이고 눈에 잘 띈다.

이런점들과 도저히 타협할 수 없는 사람들을 위해 새로운 기능들을 제거하는 방법이 올라왔다. 그중에 위에 말한 내용을 되돌리는 방법은 다음과 같다.

탭바를 원래위치로 되돌리기

$ defaults write com.apple.Safari DebugSafari4TabBarIsOnTop -bool NO

주소창 원래대로 되돌리기 (snapback은 되돌릴수 없다)

$ defaults write com.apple.Safari DebugSafari4IncludeToolbarRedesign -bool NO
$ defaults write com.apple.Safari DebugSafari4LoadProgressStyle -bool NO

3D레이어역시 비디오카드가 지원하지 않으면 소프트웨어 렌더링으로 인해 모델을 움직일수도 없을만큼 버겁다. 대신 렌더링 품질은 상당히 좋아졌고 최종렌더링옵션까지 생겼다.

기존 cs3에서 레오파드의 space를 사용하면 윈도우따로 툴팔레트 따로 움직이던 현상이 있었는데 이번버젼에선 아예 화면이동이 불가능하다.

새로운 adjustment pallete는 엄청나게 편리하다. 화면 오른쪽에서 엄청난 공간을 차지하긴 하지만…

Content-Aware Scaling은 이것하나만으로도 cs4로 업데이트 할만한 가치가 있을만큼 편리하다.

여러파일을 작업할때 탭으로 인한 작업효율이 좋아졌다. 윈도우,탭사이의 이동역시 이젠 osX의 기본단축키를 지원한다.

한글입력으로 되어있을경우 아무런 단축키도 먹히지 않는다.

하지만 막상 다운로드하러 가보면 아직 준비중이라며 연락처를 기입하라는 페이지가 나타나는데 파일의 주소만 알고있다면 이를 회피할 수 있다.

adobe사이트의 트라이얼 다운로드 페이지에 들어가서 Lightroom같은 다운로드가 가능한 제품의 “Try It”을 선택해서 들어간다. 로그인하라는 페이지가 나오는데 이곳에서 로그인하면 시스템선택페이지가 나타난다.

이때 받고자 하는 파일의 주소를 현재 브라우저 주소창에 입력하면 받을수 없게 되어있는 제품도 트라이얼을 받을 수 있다.

mac용 cs4 masters collection
http://trials.adobe.com/Applications/MastCol/CS4/Mac/ADBESTAMCS4_LS1.dmg

win용 cs4 masters collection
http://trials.adobe.com/Applications/MastCol/CS4/Win/ADBESTAMCS4_LS1.7z

리만브라더스와 애플코리아의 콤비플레이로 멋진 작품이 하나 등장했다.

벤치마크에 따르면 safari3보다 3배이상 빠르다고 하는데 다른 사이트의 테스트에 의하면 구글크롬보다도 빠른 벤치마크를 기록했다고 한다.

그 글에 삘받아서 바로 다운로드 받아서 사용해보고 있는데 속도면에선 구글크롬과 비슷한 체감성능을 보여주고 있다. 한번 켜보고선 기본 브라우저로 체크

CSSEdit에서 선보였던 라이브프리뷰 기능을 사용해서 Espresso에서는 데이터베이스 프로그램이나 복잡한 스크립트환경에서도 저장이나 업로드없이 실시간으로 프리뷰가 가능하다고 한다.

기본적으로 html, xml, css, javascript를 기본적으로 지원하지만 다른언어나 코드센스의 추가도 sugars라는 확장기능을 사용하여 한줄의 코드만 넣으면 된다고 하니 textmate나 coda에 한계를 느꼈던 많은 개발자들에게 좋은 소식이 될거라고 본다.

베타테스트 기간이 끝나고 얼마만큼의 완성도로 나올지 기대되는 프로그램이다.

컬러 IQ 테스트라는 아리송한 제목인데 정확히는 색감테스트다. 왼쪽과 오른쪽의 색상이 자연스럽게 이어지게 순서대로 색을 맞추는 테스트인데 점수가 낮을수록 좋은점수다.
제대로 맞췄다고 생각했는데 점수는 11점;

눈알빠지게 심각하게 하니 짜잔~