모바일 웹페이지 디버깅에 적합한 weinre

메모차원의 포스팅입니다.

모바일쪽 웹페이지를 조금 만지작거리면서 불편한 것이 PC처럼 브라우저를 통해 디버깅을 하기가 수월하지 않다는 점입니다.

(맥을 사용하는 관계로…)맥 + 아이폰 + Safari의 경우는 맥과 케이블을 연결하여 맥용 Safari의 디버깅 툴을 통해 가능하지만…맥 + 아이폰 + Chrome의 경우는 전혀 어떻게 해볼 방법이 없습니다. Chrome을 통해서 어느정도는 가능하지만, 실제 단말기가 아닌이상 제대로 된 동작확인은 하기가 힘든 현실입니다. 안드로이드도 마찬가지고..

결국, 예전부터 언젠가는 한번 사용해 봐야지 했었던 weinre 를 사용하여 작업해 보게 되었습니다. 결론적으로는 덕분에 풀리지 않던 문제도 한가지 풀었고 상당히 마음에 드는 툴입니다.

Install node.js

Node.js

(더 보기…)

코딩의 작업효율을 올려주는 Sublime Text Package

sapjil-sublimetext

최근의 많이 사용되고 있는 에디터중에는 Brackets, Sublime Text가 가장 많이 사용되고 있지 않나 생각됩니다. 이상하게도 한국에서는 Editplus가 많은데 그 이유는 잘 모르겠습니다만.. 저는 Sublime Text를 애용하는 편입니다. 개인적으로 Coda를 주로 사용했었는데 Sublime을 접한 후로는 메인으로 사용하고 있습니다.

초반에는 그저 가볍고 좋아보여서 사용하기 시작했지만 사용하다보니 이것 저것 플러그인을 깔고 몸집이 커지는 느낌도 들고.. 이번기회에 실제로 사용하지 않는 플러그인을 삭제도 할겸, 정리하고 나니 지우지 않게 되는 몇가지가 있어 정리를 해 보았습니다. (더 보기…)

네이티브앱과 같은 동작을 구현해주는 slideout.js

Slideout.js - A touch slideout navigation menu for your mobile web apps.
모 프로젝트를 진행하면서 스마트폰용 사이드메뉴에 사용가능한 몇가지 jQuery라이브러리를 사용해 본적이 있습니다.

별 문제가 없는줄 알았었는데 이상하게도 단순링크를 통해 새창을 띄운후, 부모창으로 돌아와서 메뉴를 클릭하면.. 먹통이 되는 이유를 알 수없는 에러로 결국 가장 최근(?)에 나온 라이브러리인 slideout을 급하게 사용하기로 했습니다. 페이스북이나 여타 네이티브앱과 같이 페이지를 스와이프 시키면 사이드 메뉴가 나오는등 사용성 면에서 좋아 보여 도입을 결정했습니다.

(더 보기…)

어쩌면 !important가 필요없을지도? CSS의 우선순위

css

얼마전 스터디에서 처음배우는 HTML, CSS라는 주제로 강의를 할일이 있었는데 듣던 분중에서 포인트에 대해서도 언급을 하면 좋을것 같다는 의견을 주신 분이 계셨었습니다. 당시에는 기억나는것도 없고해서 모른다고 했었는데 어디서 주워 들었던 것 같기도 한 가물가물한 기억이 있어 찾아보게 되었고 다행하게도 지금까지 가지고 있던 CSS의 룰과 다른점은 없었으나 ‘점수’로 구분을 주는 방식은 생각지 않았었기에 새롭게 알 수 있는 부분이 있었습니다.

(더 보기…)

CSS3로 가능한 움직임을 쉽게 찾아보고 사용할 수 있는 AniCollection

비슷한 서비스가 몇군데 있습니다만, CSS3로 표현 가능한 애니메이션을 손쉽게 찾아보고 실제로 움직임을 확인, 마음에 들 경우에는 바로 소스를 확인하여 사용할 수 있는 AniCollection이라는 서비스가 있습니다. 페이지에 표시되어 있는 요소들에 마우스를 가져다 대면 기분좋게 움직이는 요소들을 확인할 수 있습니다.

 

AniCollection - The easiest way to find, use and share CSS3 animations.

(더 보기…)