Google 족집게 검색 요령

Notes 댓글이 없음 »

실생활에서 어떤 것에 대한 궁금증으로 관련 정보를 얻으려고 할 때 가장 먼저 취하는 행동이 인터넷 검색이고 여기서 가장 적합한 정보를 효율적으로 빨리 취하는 것도 그만큼 중요할 것이다. 대부분 직접적이고 효율적인 관련 검색어의 선택만으로도 원하는 정보를 얻을 수 있지만, 좀 더 정교하게 추려낸 검색 결과를 원한다면 특별한 요령이 필요하다.

그래서 대표적으로 Google에서는 효율적인 정보 검색을 도와주는 몇 가지 요령을 담은 문서를 제공하고 있다.

다음은 개인적으로 몇 가지 몰랐던 내용:
검색 결과에서 특정 단어의 배제 (-) – 특정 검색어 앞에 마이너스 사인을 붙이면 해당 단어가 포함된 페이지는 솎아내고 나머지의 검색 결과를 보여준다. 마이너스 사인 바로 앞에 다른 글자가 붙어 있으면 안 되고 검색어 사이엔 공백으로 띄워져 있어야만 제대로 인식된다.
동의어 검색 (~) – 검색어와 더불어 해당 동의어도 함께 포함된 검색 결과를 얻으려면 검색어 앞에 물결무늬 사인(~)을 붙여주면 된다.

이 밖에도 Google 검색 요령에 관한 더 자세한 내용을 담은 cheat sheets:

이렇게 요긴한 검색 요령만 잘 알고 있으면 다음과 같은 족집게 검색도 가능하다.

site:nytimes.com filetype:html ~college intitle:"test scores" intext:"new york city" -SATs 2010..2011
꼬리표:

IE10부턴 Conditional Comments는 그냥 무시할 거라는 소식

Notes, Web Development 댓글이 없음 »

→ HTML5 Parsing in IE10 – IEBlog – Site Home – MSDN Blogs
그래서 종전처럼 아래와 같은 Conditional comments로는 IE10만을 위한 처방을 내릴 수가 없게 되었다.

<!--[if IE]>
  This content is ignored in IE10 and other browsers.
  In older versions of IE it renders as part of the page.
<![endif]-->

특별한 처방이 딱히 필요 없어지면 좋겠지만, 과거 병력으로 보면 진짜 그렇게 되길 간절히 바라는 소망으로 바뀌지. 지금은 두 번째 IE10 Platform Preview가 배포되고 있는 상황.

꼬리표:

Google Chrome extensions 개발 시 iframes에 접근하는 방법

Notes, Web Development 댓글이 없음 »

Safari extension으로 먼저 나온 바른 말씨를 Google Chrome 용으로도 배포할 목적으로 개발하면서 부딪혔던 문제로, 대부분의 extension APIs와 그 구조는 서로 닮았기 때문에 코드 이전에는 별다른 어려움은 없었다. 그런데 한 가지 커다란 장벽과 마주쳤으니.

보통 extensions에 의해 페이지에 삽입되는 Content Scripts는 독립적인 sandbox 환경에서 실행되면서 원래 웹 페이지에 존재하는 스크립트와의 간섭을 걱정할 필요 없이 DOM을 만질 수 있게 되는데, 불행히도 Google Chrome extensions에선 iframes 접근이 차단되어 있어서 window.frames 값으로 undefined를 돌려준다. 이 문제는 알려진 버그로, 해결책으로 다음과 같이 Background Page에서 chrome.tabs.executeScript() 명령으로 해당 사이트의 DOM에다 직접 script tag을 생성해서 Chrome의 Sandbox 밖에서 실행되는 스크립트를 삽입해 주는 것이다.

chrome.tabs.executeScript(null, {file: 'scriptInjecting.js'}, scriptInjected);

script tag를 만들고 Sandbox를 탈출해서 실행될 스크립트를 삽입하는 scriptInjecting.js 파일의 내용은 다음과 같다.

(function(doc) {
  var s = doc.createElement('script');
  s.type = 'text/javascript';
  s.src = chrome.extension.getURL("escapedFromChromeSandbox.js");
  var x = doc.getElementsByTagName('script')[0];
  x.parentNode.insertBefore(s, x);
})(document);

이렇게 해서 삽입된 escapedFromChromeSandbox.js 파일에선 iframes의 속 내용을 들여다볼 수 있게 된다.

여기서 얻어진 정보는 가령, hidden input을 만들고 이놈의 value나 title 혹은 data 속성에다가 저장해 놓기만 하면, 나머진 종전처럼 해당 페이지의 DOM 접근이 가능한 Content Scripts에서 이곳에 저장된 정보를 읽고 message passing을 통해 background pages에 전달해주면 된다.

이 밖에도 사소한 것으로, 검사 결과를 보여주는 창을 마우스로 잡아서 이동시킬 수 있도록 하는 기능을 구현하는데, Safari에선 별문제 없던, HTML5의 Drag and Drop 기능을 빌려 쓰려 하였으나 drag시 마우스의 위치 값을 제대로 돌려받지 못하는 문제도 있어서 결국 약간 소모적일 수도 있는 Mouse events를 써야만 했다.

최근 많은 브라우저가 extensions 혹은 add-ons 형태로 사용자 입맛에 맞는 추가 기능을 제공하는 추세이고 또 각 브라우저가 가지고 있는 고유 API와 그 구현 방식도 서로의 차이점이 줄어들고 있기는 하지만, 아직은 개발자에게 혼동을 일으킬 수 있는 미묘한 차이를 보이면서 앞으로 어떤 통합된 개발 환경이 제공되었으면 하는 바람도 가지게 된다.

꼬리표:

호환성을 높인 새 @font-face 문법

CSS, Notes 댓글이 없음 »
@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot?') format('eot'),
       url('myfont-webfont.woff') format('woff'),
       url('myfont-webfont.ttf') format('truetype'),
       url('myfont-webfont.svg#svgFontName') format('svg');
}

새 @font-face 문법은 전에 문제가 되었던 Android 플랫폼에서도 잘 보인다고 함.
The New Bulletproof @Font-Face Syntax

꼬리표: