If...Else

어제저녁(25일) undefine:D [7월 오프모임]에 다녀왔다. 크게 세 가지 주제로 공유하는 시간을 가졌다. laravel로 북마크 서비스 만들기 [변용훈님] PHP framework laravel (http://laravel.com)을 이용하여 북마크 서비스를 만들었던 경험을 공유하는 시간이었다. 북마크 화면 캡처를 위한 고민, laravel을 이용한 back-end 구성, backbone을 이용한 front-end 구성, 크롬 확장프로그램을 만들었던 경험을 간략하게 설명해주었다. 부트스트랩밖에 모르던 나에게는 "flat ui kit"의 디자인이 너무 멋져 보였다. 슬라이드 URL : http://www.slideshare.net/yhbyun/ss-24634455 JavaScript 프로젝트 관리..

Handlebars는 유저가 효과적으로 semantic template을 만들 수 있는 필수 기능을 제공한다. Getting Started 작성된 handlebars 템플릿은 Handlebars.compile을 이용하여 컴파일할 수 있다. 컴파일한 후 context를 파라미터로 전달하여 결과물을 얻을 수 있다. context의 key 값에 해당하는 handlebars 정규식 위치에 context의 value 값을 반환한다. "console.log(html);"으로 확인해보면 아래의 결과를 얻을 수 있다. My New Post This is my first post! "{{정규식}}"을 사용하면 escape 된 HTML 문자를 받아 온다. 만약 문자가 escape 되는 것을 원하지 않는다면, 중괄호 세 개..

TDD, BDD TDD(test-driven development) - 테스트 주도 개발 테스트 주도 개발(test-driven development, TDD)은 매우 짧은 개발 사이클을 반복하는 소프트웨어 개발 프로세스 중 하나이다. 개발자는 우선 자동화된 테스트 케이스를 작성하고, 그 케이스를 통과하기 위한 최소한의 코드를 생성, 리팩토링 하는 개발 사이클을 가진다. 테스트를 최우선으로 "작동하는 깔끔한 코드(clean code that works)"를 만드는 것이 테스트 주도 개발의 궁극적인 목표이다. TDD 사이클 red : 실패하는 작은 테스트를 작성한다. green : 테스트를 통과하는 코드를 작성한다. (퀄리티보다는 일단 통과하는 것을 목표로 작성한다.) refactoring : 테스트를 통..

Open Graph? 오픈 그래프는 사람들이 관심 있는 것들을 연결해주는 페이스북의 소셜 그래프이다. 사람들은 앱을 이용하여 음악을 듣고, 책을 보고, 영화를 보는 등 많은 활동을 하고 이야기를 만들어내는데, 오픈 그래프에 연결된 앱은 사람들의 활동들과 이야기들을 친구들과 공유할 수 있게 한다. 이런 활동들을 공유하게 되면 관심 있는 친구들은 앱을 다운받거나 참여하게 되는 기회를 갖게 되고, 이것은 개발자에게도 앱이 더 많이 배포되고 성장할 기회를 제공한다. 사람들이 앱을 타임라인에 추가하거나 오픈 그래프에 맞춰진 앱을 다운로드 하면, 앱은 오픈 그래프를 기반으로 페이스북에 공유하게 된다. 앱은 이런 활동들을 타임라인, 뉴스피드, 티커에 보여준다. 오픈 그래프는 달리기 앱에서는 “run” (action)..

figure 엘리먼트는 문서의 주요 흐름에서 독립적이고 하나의 단위로 참조되는 일부 흐름의 컨텐츠를 나타낸다. 이 엘리먼트는 문서의 메인 컨텐츠에서 참조되는 일러스트레이션, 다이어그램, 사진, 코드 목록 등에 사용될 수 있다. figcaption 엘리먼트는 figure 엘리먼트의 자식 엘리먼트이고 figure 엘리먼트 컨텐츠의 표제를 표현한다. 선택적으로 사용할 수 있다. figure 엘리먼트로 코드 목록을 마크업 한 예시 : In listing 4 we see the primary core interface API declaration. Listing 4. The primary core interface API declaration. interface PrimaryCore { boolean verify..

i 엘리먼트는 글 내에서 다른 음성 혹은 분위기의 텍스트 영역을 나타낸다. 또는 분류학적 명칭, 기술용어, 다른 언어, 생각 등 일반 글에서 다른 품질의 텍스트를 나타내는 방식으로 쓰인다. 메인 글과 다른 언어의 텍스트는 lang 속성을 함께 사용해야 한다. i 엘리먼트의 사용예시: The Felis silvestris catus is cute. The term prose content is defined above. There is a certain je ne sais quoi in the air. i 엘리먼트를 이용하여 꿈의 흐름을 마크업 한 예시: Raymond tried to sleep. The ship sailed away on Thursday, he dreamt. The ship had man..

언제 GPU 가속을 받을까? layout이 일어나지 않는 애니메이션만 GPU로 그린다. layout은 element의 위치와 크기를 정하는 과정이고, reflow와 같은 개념으로 이해하면 될 듯하다. color, opacity 프로퍼티를 바꾸는 애니메이션은 GPU 가속을 받는다. transform은 layout없이 element의 위치, 크기를 바꾸기 때문에 GPU 가속을 받는다. left, top으로 움직이는 애니메이션은 GPU 가속을 받을 수 없다. 어떻게 확인할까? 크롬 브라우저 주소창에 “chrome://flags”라고 입력한다. 리스트 중 “합성된 렌더 레이어 테두리”를 사용을 클릭한 후 하단의 “지금 다시 시작”을 클릭한다. 이 옵션을 사용하면 화면에서 GPU 가속을 받고 있는 element에..

에 padding을 주면 파이어폭스(17.0.1)에서는 다른 브라우저들과 다르게 스크롤바 바깥쪽으로 여백이 생긴다. 매우 오래된(10년…) 이슈이고, 현재까지 완벽한 해결법은 없는듯하다. 작업 시 디자이너와의 협의가 필요해 보인다. 파이어폭스 브라우저에서의 렌더링. 크롬 브라우저에서의 렌더링. 파이어폭스를 제외한 모든 브라우저에서 이처럼 스크롤바 바깥으로 여백이 생기지 않는다. 참조 URL http://forums.phpfreaks.com/topic/201677-firefox-incorrectly-padding-textarea/ https://bugzilla.mozilla.org/show_bug.cgi?id=157846