2013년 가족들 모두 건강하고 행복한 한 해가 되길 바라며, 올 한 해 뱀처럼 요리조리 잘 헤쳐가며 꼼꼼하게 익히고 싶은 것들의 목록을 적어본다.

• CSS preprocessors (SASS, Compass) – CSS 작성의 효율성을 올리고 동시에 성가신 반복 작업을 없애주면서 CSS의 재미 재발견.
• Node.js, Backbone.js – JavaScript에 의한 Web App full stack에 도전.
• 그래픽 도구를 맘대로 주무를 수 있을 만큼 익숙해지기. (Pixelmator, Sketch)
• PHP(>=5.4) 기초 제대로 다지기 – 요즘 뜨고 있는 Laravel 간 좀 보고 싶은 요량인데 다만, 과거 여러 가지 이유로 Rails처럼 간만 보다 멈춰버리는 일이 없길 바란다. (이놈의 팔랑귀…)
• iOS 앱에 이은 Mac 애플리케이션 개발도 도전해보고 싶다.

올 한해, 예상치 못한 즐겁고 놀라운 일들이 많이 생기길 바라며.

CSS를 작성할 때마다 보통 CSS properties를 정의하는 순서는 개인마다 자기만의 어떤 정해진 규칙이 있을 것인데, 여기서 중요한 것은 그 어떤 규칙의 세세한 내용보다도 이런 규칙을 일관성 있게 따른다면 차후 관리와 유지보수 측면에서 더 효율적일 것이고, 또한 팀원의 일원으로서 작업할 때는 이런 일관된 규칙을 정하고 따르게 하는 것이 더 중요해지기 마련이다.

여기에 도움을 줄 수 있는 도구로 여러 개발자로부터 권장된 기준과 이 기준에 맞는 순서를 자동으로 정리해주는 CSScomb이 있다. CSScomb Online 도구도 있지만, 여러 text editors 안에서 사용할 수 있는 plugin 형태로도 제공하고 있다.

현재 최신 버전은 2.11인데, 위에서 제공하는 text editors 용 plugin이 최신 버전이 아닐 땐 직접 소스를 내려받아 컴파일해서 설치할 수도 있다.
CSScomb – CSS properties의 순서를 단정하게 정리해주는 도구(이)란 제목의 글 마저 읽기 →

function clearAllCookies(domain, path) {
  var doc = document,
      domain = domain || doc.domain,
      path = path || '/',
      cookies = doc.cookie.split(';'),
      now = +(new Date);
  for (var i = cookies.length - 1; i >= 0; i--) {
    doc.cookie = cookies[i].split('=')[0] + '=; expires=' + now + '; domain=' + domain + '; path=' + path;
  }
}

다만, HttpOnly cookie는 지울 방법이 없다.
단순히 쿠키에 남겨진 방문 흔적을 지우는 데 사용될 수도 있다.

웹에 접속하는 장비의 다양한 화면 크기와 점점 높아지는 pixel density에 맞춰서 상황에 따라 적당한 이미지를 전달해 주는 일은 어렵지만 당장 해결해야 할 시급한 문제였다.

이 문제를 적절히 대처하고자 여러 개발자들이 responsive images의 문제에 대응하는 많은 방법을 제시하고 있지만, 각각의 장단점을 고려하기 이전에 어차피 과도기적인 꼼수에 지나지 않는다는 문제를 공통으로 안고 있다.

그래서 이 문제를 해결할 장기적인 표준안을 도출해 내려고 Responsive Images Community Group에 모여서 지금까지 제시된 다양한 방법에 대한 서로의 의견을 교환하고 가장 이상적인 방법을 도출하고자 머리를 맞대고 있는 사이, 이 문제를 해결해 줄 또 하나의 방법으로 며칠 전 Apple에서 WHATWG list에 제시했던 img의 srcset attributes이, 외부에서 보면 갑작스러울 수도 있게, WHATWG 표준 draft에 바로 추가되는 일이 발생하였다. 그래서 그동안 머리를 맞대고 고민했던 많은 개발자들을 발끈하게 만들었고, 다수의 지지를 받으며 새로 도출해낸 <picture> element가 그냥 무시되었다는 점에서도 큰 허탈감을 표시하고 있다.

이런 사태는 개발자와 WHATWG 간의 원만한 소통 창구의 혼돈에서 비롯되었다는 얘기가 나오는데, 지금까지의 진행 상황은 Jeremy Keith씨가 올린 글에 자세히 나와 있다.

과연 이제 막 HTML draft에 추가된 srcset attribute이 앞으로도 그 자리를 지킬 수 있을지 모르는 일이고 또 몇 번의 수정안으로 대체되겠지만, 그 사용법을 보면 다음과 같다.

<h1><img alt="The Breakfast Combo"
         src="banner.jpeg"
         srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"></h1>

Responsive images를 위한 img element의 srcset attributes(이)란 제목의 글 마저 읽기 →

IE6,7,8에게 새 HTML5 elements를 인식시켜주는 html5shiv를 문서에 추가하는 방법으로 보통 head에서 다음과 같이 불러온다.

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

문젠 그냥 이렇게 html5shiv를 googlecode에서 불러오면 성능상 별로 안 좋다는 얘기.
이렇게 추가된 script는 HTTP compression 되지도 않았거니와 CDN을 사용하면 당연히 얻겠거니 하는 cache 적용도 되어있지 않다. (현재 겨우 180초뿐이다.)

더군다나, 현재 공식 배포 채널로 사용되긴 하지만, 버그도 잡고 성능이 향상된 최신 버전으로의 적용도 더뎌서 github에서 활발히 개발되고 있는 html5shiv의 최신 버전(현재 Tag 3.5)을 내려받아 compress(minified)한 후 직접 호스팅하는 편이 여러모로 더 이롭다는 얘기.

참고로, Modernizr를 쓴다면 이미 core에 포함되어 있기 때문에 따로 추가할 필요는 없으며, 최신 버전도 곧 적용될 예정이란다. 끝으로 “절대 다른 사람의 source code repository에 있는 리소스에 직접 링크를 걸지는 마라”는 경고로 말을 맺고 있음.