Rev. 2.73

TaffyDB는 크로스-브라우저를 지원하는 자바스크립트 데이터베이스입니다. HTML5의 WebSQL이나 IndexedDB를 바인딩한 것으로 생각했는데 localStorage를 이용한 것이더군요. 마치 MongoDB와 같은 쉬운 사용성을 제공하는 것이 특징입니다. 글로 설명하는 것보다 예제 코드를 보는 게 이해가 빠르겠군요:

// Create DB and fill it with records
var friends = TAFFY([
  {"id":1,"gender":"M","first":"John","last":"Smith","city":"Seattle, WA","status":"Active"},
  {"id":2,"gender":"F","first":"Kelly","last":"Ruth","city":"Dallas, TX","status":"Active"},
  {"id":3,"gender":"M","first":"Jeff","last":"Stevenson","city":"Washington, D.C.","status":"Active"},
  {"id":4,"gender":"F","first":"Jennifer","last":"Gill","city":"Seattle, WA","status":"Active"}	
]);

// Find all the friends in Seattle
friends({city:"Seattle, WA"});

// Find John Smith, by ID
friends({id:1});

// Find John Smith, by Name
friends({first:"John",last:"Smith"});

// Kelly's record
var kelly = friends({id:2}).first();

// Kelly's last name
var kellyslastname = kelly.last;

// Get an array of record ids
var cities = friends().select("id");

// Get an array of distinct cities
var cities = friends().distinct("city");

// Apply a function to all the male friends
friends({gender:"M"}).each(function (r) {
   alert(r.name + "!");
});

// Move John Smith to Las Vegas
friends({first:"John",last:"Smith"}).update({city:"Las Vegas, NV:"});

// Remove Jennifer Gill as a friend
friends({id:4}).remove();

// insert a new friend
friends.insert({"id":5,"gender":"F","first":"Jennifer","last":"Gill","city":"Seattle, WA","status":"Active"});

이걸 어디에 써먹을지 궁리해 보았지만, 막상 적용할 곳이 떠오르지 않습니다.

Comments

CSS3Ps는 포토샵에서 생성한 레이어를 CSS3로 변환해 주는 클라우드 서비스 기반 포토샵 플러그인입니다. 여러 레이어 또는 레이어 그룹을 선택하고 한 번의 클릭으로 변환할 수 있습니다. Gradient, Inner Shadow, Inner Glow, Outer Shadow, Outer Glow등의 CSS3 속성으로 변환해 준다고 합니다. 변환 즉시 브라우저에서 결과를 확인하고 다른 사람들과 공유할 수도 있습니다. 그리고 무료입니다.

Comments

iOS(아이폰/팟/패드) 그리고 안드로이드 기기에서 화면을 던지는 제스처로 화면을 스크롤링(이동)하는 인터페이스는 이제 우리에게 익숙합니다. 물론 전체 웹페이지에도 마찬가지로 적용되지만, 페이지 내 일부 요소가 overflow: auto로 설정되어 요소가 가진 내용이 출력 범위를 초과해서 스크롤바가 나타난 경우는 예외였습니다. 손가락을 움직인 만큼만 스크롤되기 때문에 내용이 길면 짜증이 나곤 했죠.

iOS 5부터 지원되는 webkit-overflow-scrolling 속성을 이용하면 위와 같은 상황에서도 던지는 제스처를 사용할 수 있습니다. 최근에 알게 되었다는 부끄러움을 뒤로 한 체, 여기저기에 마구마구 이 속성을 쑤셔 넣기 시작했는데 안타깝게도 다음과 같은 작은 문제들을 발견했습니다. 분명히 나중에 수정해 줄 것으로 믿고 있지만, 너무 섹시한 기능이라 뿌리칠 수가 없어 당장 대처할 방법을 강구해 보았습니다.

scroll.PNG

처음으로 맞닥뜨린 문제는 스크롤바의 기본 모양을 변경할 수 있는 -webkit-scrollbar-* 속성과 혼용하면 화면이 깨져 보이는 것이었습니다. 터치 후 제스처와 동시에 나타나는 얇고 예쁘장한 스크롤바와 그것을 흉내 내려고 어설프게 커스터마이즈한 스크롤바가 동시에 보이기 때문입니다. 버그일지 몰라도 현재는 혼용하지 않는 것이 좋아 보입니다.

여기에 예로 든 화면은 맘대로 뜯어고쳐 운영중인 JSBin입니다. 모든 섹션이 상대적으로 긴 컨텐츠를 다루기 때문에 webkit-overflow-scrolling 속성을 적용하기에 적합하다고 판단했습니다.

update.PNG

다음으로, 터치 후 던지는 제스처로 페이지가 스크롤 되는 동안 안 보이던 영역의 컨텐츠가 갱신되지 않는 채로 화면이 이동하는 문제가 있습니다. 특히, <ul> 요소가 overflow: auto로 설정된 경우 두드러지게 나타났습니다. 이 문제를 해결하려고 별의별 짓(무작위 속성 조합?)을 시도하다가 우연히 해결법을 발견했습니다. 그것은 <section> 요소로 감싼 다음 <ul> 요소에는 position: relative를 조합(?)한 것이었어요;

수정 전:

<style>
.scrollable {
  position: absolute; top: 0; left: 0; bottom: 0; width: 200px;
  border-right: 1px solid #bbb; background: #eaeaea;
  overflow: auto; -webkit-overflow-scrolling: touch;
}
</style>
.
.
<ul class="scrollable">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  .
  .
</ul>

수정 후:

<style>
.scrollable {
  position: absolute; top: 0; left: 0; bottom: 0; width: 200px;
  border-right: 1px solid #bbb; background: #eaeaea;
  overflow: auto; -webkit-overflow-scrolling: touch;
}
.scrollable ul { position: relative; }
</style>
.
.
<section class="scrollable">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    .
    .
  </ul>
</section>

... 이상입니다. 뻘쭘;

Comments