말장난으로 시작한 제목과는 달리 역설적으로 JavaScript에선 global space를 더럽히는 일은 죄악처럼 여겨진다. 특히나 통제할 수 없는 다른 사람이 작성한 JavaScript 코드가 섞여들어 갈 가능성이 큰 Client-Side JavaScript에선 더욱 그러하다.
그래서 뜻하지 않는 이런 실수를 저지르지 않으려면 변수가 global 해지는 경우를 정확하게 알고 있어야 하는데, 그 예로 다음과 같은 몇 가지 경우가 있다.

var로 시작되지 않는 변수 선언.

잘 알려진 내용으로 var 없이 선언된 변수는 global object의 properties에 붙게 된다.
참고로, 이렇게 만들어진 property는 var 선언문으로 생성된 property와는 다르게 다시 나중에 delete로 지울 수 있다.

var x = 1;      // A properly declared global variable, nondeletable. 
y = 2;          // Creates a deletable property of the global object. 
this.z = 3;     // This does the same thing. 
delete x;       // => false: variable not deleted 
delete y;       // => true: variable deleted 
delete this.z;  // => true: variable deleted 

다음은 JavaScript의 delete operator 작동 원리에 대한 자세히 설명해놓은 글. – Perfection Kills – Understanding delete

JavaScript에서 global 해지는 법(이)란 제목의 글 마저 읽기 →

HTML5 Boilerpate가 탄생 1주년을 맞아 2.0으로 갱신되었다.

눈에 띄게 바뀐 점이라면 모든 스타일을 기본적으로 밋밋하게 밀어버리는 CSS의 불도저라고 볼 수도 있는 일반 CSS Reset 스타일시트를 버리고 normalize.css로 갈아탄 것. 브라우저별 공통분모는 건드리지 않고 차이를 보이는 놈들만 꼭 집어서 일관성 있게 바꿔준다.
다음 링크로 가면 예전 Reset CSS 스타일을 쓴 것과 새로운 nomalize 스타일을 입힌 후 바뀐 각 element의 차이점을 확인해 볼 수 있다. – HTML5 Boilerpate CSS 변화로 각 엘르먼트의 기본 스타일 차이점

또, Build Script에는 offline 앱을 위한 appcache manifest 파일 자동 생성 기능도 새로 추가되었는데, 빌드 스크립트를 쓰지 못할 상황이라면 사이트 주소만 입력해주면 자동으로 해당 사이트의 appcache 파일을 생성해주는 Cache Manifest Validator도 유용할 것이다. 이 사이트에선 Textmate Bundle도 함께 제공하고 있음.

그리고 이미 예상된 것이지만, 이제 기본적으로 IE6 사용자에겐 Chrome Frame 설치를 권고하게 된다.

더불어 Modernizr 2 안에 respond.js도 함께 추가되면서 요즘 새로 시작되는 웹 프로젝트에는 거의 필수가 되어버린 Responsive Web Design과 ‘Mobile First’ 디자인을 적용해 볼 수 있는 기본 밑바탕도 마련되었다.

– From Me To You – Caught in the rain

Safari 5.1부터 지원하기 시작한 Popover 기능(Chrome에선 이 기능이 예전부터 있었으며 Popup이라고 불림) 덕분에 이젠 웹페이지에 있는 글뿐만 아니라 맞춤법 검사를 하고자 하는 글을 도구막대 버튼을 누르면 뜨는 작은 Popover/Popup 창에다 직접 입력해서 검사를 수행할 수 있게 되었다.

겸사겸사 Safari와 Chrome 익스텐션을 함께 갱신하게 되었는데 둘의 창 모양까지 닮았으니 Safari가 Chrome의 것을 많이 참고한 것 같지만, 그래도 개발 문서만은 Safari에게 더 후한 점수를 주고 싶다.

참고로, Safari와 Chrome의 Popovers/Popups 구현에는 약간의 차이가 있는데, Safari에선 웹페이지에서 글자를 선택하지 않은 경우에만 Popovers 창을 보여주지만, Chrome에선 popups 창 기능을 구현했을 때는 도구막대 버튼에 심어둔 onClicked event를 그냥 무시하고 무조건 Popups 창을 보여준다. 따라서 상황에 맞춰 웹페이지에서 선택한 글에 대한 검사 개시 방아쇠(trigger)로서 선택적으로 도구막대 버튼을 사용할 수 없게 되었다는 아쉬움이 있다. (이것은 manifest 파일에 popups html 파일을 지정하지 않은 채 setPopup() method를 써도 마찬가지.)

어차피 선택한 글에 대한 검사 개시의 방아쇠로 단축키(Option + Q/ㅂ) 혹은 Contextual 메뉴를 주로 쓰기 때문에 이에 따른 큰 불편은 없을 것이다.

오로지 CSS만으로 어떤 사물을 그럴듯하게 표현해 놓은 것을 보면 항상 신기해하는데 이번에 목격한 것(WWDC 2011 Session Video 중)은 오직 CSS의 Linear Gradient property를 써서 리본(ribbon)을 그려낸 것으로 다음과 같이 쓰였다.

.ribbon {
  background-image: 
    -webkit-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -webkit-linear-gradient(135deg, transparent 25%, red 25%); /* Chrome 10+, Saf5.1+ */
  background-image: 
    -moz-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -moz-linear-gradient(135deg, transparent 25%, red 25%); /* FF3.6 */
  background-image: 
    -ms-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -ms-linear-gradient(135deg, transparent 25%, red 25%); /* IE10 */
  background-image: 
    -o-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -o-linear-gradient(135deg, transparent 25%, red 25%); /* Opera 11.10+ */
  background-image: 
    linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    linear-gradient(135deg, transparent 25%, red 25%);
}

앞으론 CSS property만으로 어떤 형태를 표현하고 있는지 짐작이나 할 수 있을까?(이)란 제목의 글 마저 읽기 →