-
Node.JS용 Scribd 모듈 배포
역시나, 기업 요구사항은 파일 교환보다는 문서 관리 쪽으로 많이 치우쳐져 있더군요. 그래서 문서관련 기능을 강화하기 위해 매시업할 수 있는 서비스들을 찾아보던 중 Scribd라는 서비스를 알게 되었습니다. 이 ...
Category: 자료 - 웹개발, Reactions: 4, Views: 312,774, Author: 파이어준
-
CodeMirror 3으로 업그레이드하기
CodeMirror는 웹 브라우저에서 코드 편집 기능을 제공할 수 있게 하는 자바스크립트 컴포넌트입니다. 자바스크립트, CSS, HTML은 물론 C, Java, PHP, Python, Ruby 등 50여 종의 언어 모드(Mode)를 지원하며, 문법 강조, 단축키, 자...
Category: 자료 - 웹개발, Reactions: 4, Views: 111,305, Author: 파이어준
-
Analytics 자바스크립트 페이지 트래킹
Google Analytics에서 제공하는 기본 트래킹 코드는 정적인 페이지에서 사용하기 적합하며 Ajax나 history. pushState를 이용하여 컨텐츠를 갱신하는 동적인 사이트는 필요한 경우 추가적인 작업을 해야 합니다. Analytics는 페...
Category: 자료 - 웹개발, Reactions: 5, Views: 107,036, Author: 파이어준
-
MongoDB용 ObjectID의 길이 줄이기
MongoDB의 ObjectID는 12바이트짜리 BSON타입 UUID를 사용합니다. 4-byte timestamp, 3-byte machine identifier, 2-byte process id, 그리고 3-byte counter로 구성되어 합이 12바이트인 것입니다. 데이터를 쓰기도 전에 ID를 생성하며 ID만으로 ...
Category: 자료 - 웹개발, Reactions: 6, Views: 120,339, Author: 파이어준
-
자바스크립트 1.8.5(ES5)의 새 기능
신경 안 쓰는 사이에 거의 모든 브라우저가 ECMAScript 5를 지원하게 되는 황금기를 맞는군요. NodeJS에서 다른 사람이 짠 코드를 참고할 때 종종 보이던 ES5의 새 기능을 눈여겨 두었다가 드문드문 써먹곤 했었는데 이...
Category: 자료 - 웹개발, Reactions: 13, Views: 101,838, Author: 파이어준
-
The Velox 프로젝트 공개 그리고 클로즈 베타
입사 후 처음으로 수행한 웹 프로젝트가 1년만에 슬슬 마무리 단계에 접어들고 있습니다. 개발자라고는 저 혼자인 상황에서 막연하게 시작했던 프로젝트입니다. 백-엔드 개발자 뽑느라고 4개월 허송세월 보내고,...
Category: 자료 - 웹개발, Reactions: 27, Views: 229,662, Author: 파이어준
-
PrismJS 문법 강조 언어 추가하기
얼마 전 소개했던 PrismJS는 아직 HTML, CSS, JS만을 지원하고 있습니다. 지금 즈음 다른 언어를 지원하지 않을까 해서 살펴보니 역시나 있더군요. 제가 발견한 현재 확장 가능한 언어는 JAVA, PHP, Bash 그리고 모든 C 스타...
Category: 자료 - 웹개발, Reactions: 2, Views: 85,501, Author: 파이어준
-
정말 놀라운 WebGL FPS 게임- BananaBread
BananaBread는 얼마전 MDN(Mozilla Developer Network) 데모에 제출된 WebGL을 이용하여 구현한 FPS 게임입니다. C++과 OpenGL로 작성된 Cube 2: Sauerbraten 엔진을 Emscripten을 이용하여 자바스크립트와 WebGL로 컴파일하여 모던 브라우저...
Category: 자료 - 웹개발, Reactions: 6, Views: 127,674, Author: 파이어준
-
Prototype.js에서 SVG 요소에 DOM 메서드 적용하기
Prototype.js에서 SVG 요소에는 DOM 메서드가 적용되어 있지 않아 몇 줄을 수정해서 사용하고 있었다는 사실을 잊고 있었습니다. 그래서 이번에 업데이트된 1.7.1에도 적용했습니다. 이게 되면 무엇이 가능하냐고요? SVG...
Category: 자료 - 웹개발, Reactions: 1, Views: 62,997, Author: 파이어준
-
쩌는 jQuery 모달 플러그인 - Avgrund
Avgrund는 Dmitri Voronianski씨가 작성한 모달 박스를 출력하는 jQuery용 플러그인입니다. 모달 박스가 출연할 때 원래 페이지와의 깊이를 표현하는 흥미로운 개념을 도입했습니다. 이는 CSS에서 transition 그리고 transform 속...
Category: 자료 - 웹개발, Reactions: 16, Views: 97,997, Author: 파이어준
-
크로스-브라우저 자바스크립트 데이터베이스 - TaffyDB
TaffyDB는 크로스-브라우저를 지원하는 자바스크립트 데이터베이스입니다. HTML5의 WebSQL이나 IndexedDB를 바인딩한 것으로 생각했는데 localStorage를 이용한 것이더군요. 마치 MongoDB와 같은 쉬운 사용성을 제공하는 것이...
Category: 자료 - 웹개발, Reactions: 6, Views: 57,501, Author: 파이어준
-
레티나 그래픽을 당신의 웹사이트에 - Retina.js
Retina.js는 사용자 기기의 레티나 디스플레이 지원 여부를 구분하여 이에 맞는 고해상도 이미지가 있는지를 확인한 후 교체해주는 스크립트입니다. 레티나 디스플레이용 고해상도 이미지를 준비하는 규칙은 애플...
Category: 자료 - 웹개발, Reactions: 16, Views: 81,553, Author: 파이어준
-
18개월만에 업데이트된 Prototype 1.7.1
죽은 줄로만 알았던 Prototype 라이브러리가 지난 8월 8일, 1.7.1버전이 GitHub에 태그되었습니다. 이는 무려18개월만의 업데이트입니다. 주요한 변동사항은 DOM 라이브러리를 다시 작성했고, ECMAScript 5와 호환성을 가지도...
Category: 자료 - 웹개발, Reactions: 9, Views: 60,934, Author: 파이어준
-
섹시한 문법 강조기 - Prism.js
PrismJS는 모던 웹 표준에 기반을 두었으며 가볍고 확장 가능한 문법 강조기입니다. 3가지 테마를 제공하며 위에 기본으로 적용된 테마는 "Funky"에요. 위와 같이 "prism.js"와 "prism.css"를 HTML에 코드를 추가하고 코드가 ...
Category: 자료 - 웹개발, Reactions: 6, Views: 53,581, Author: 파이어준
-
클라우드9 IDE 0.7.x 업데이트와 애플리케이션 모드
얼마 전(지난 오월 초) 웹 기반 IDE인 클라우드9(개인 사용자용)의 코드베이스의 아키텍처가 업그레이드되는 대대적인 마이너 업데이트가 있었습니다. 설치방법과 실행방법 그리고 소소하게 UI 등에 변동사항이 있...
Category: 자료 - 웹개발, Reactions: 6, Views: 149,746, Author: 파이어준
-
CSS 3D Transform 기반의 작은 3D 엔진 - Sprite3D.js
Sprite3D.js는 CSS 3D Transforms 속성을 이용하여 3D를 구현하는 작은 자바스크립트 3D 엔진 라이브러리입니다. 체이닝 형식의 섹시한 구문을 사용하여 HTML 요소(<div>)를 간단하게 3D 객체로 래핑할 수 있습니다. CSS 3D ...
Category: 자료 - 웹개발, Reactions: 5, Views: 118,688, Author: 파이어준
-
HTML5 History/State API를 이용한 Ajax 히스토리 구현
HTML5의 History/State API를 이용하여 브라우저의 히스토리를 조작하는 방법에 대해 알아보겠습니다. 그동안 location.hash로 꾸리 하게 밖에 구현할 수 없었던 브라우저 히스토리를 대체할 수 있는 명세로서, Ajax로 호출한...
Category: 자료 - 웹개발, Reactions: 12, Views: 129,865, Author: 파이어준
-
JSBin 2.9.8 커스토마이즈
그동한 소스분석 용도로 잘 사용해 오던 JSBin을 새로운 버전으로 업데이트 하려다가 커스토마이즈 하는 기쁨에 쉼취해 회사일도 마다하고 최근 3주간 불꽃 코딩을 작렬했습니다. 애용중인 맥용 소스코드 편집기인...
Category: 자료 - 웹개발, Reactions: 21, Views: 149,724, Author: 파이어준
-
HTML5 Canvas 기반 이미지 비교 - JS-ImageDiff
얼마 전 Flotr2를 배포한 Humble software development에서 만든 JS-ImageDiff는 HTML5 Canvas 요소를 이용하여 이미지의 변동사항을 비교할 수 있게 하는 자바스크립트로 작성된 작은 유틸리티입니다. Node.JS용으로도 배포되었으...
Category: 자료 - 웹개발, Reactions: 5, Views: 82,195, Author: 파이어준
-
내용이 긴 싱글 페이지의 멋진 전환효과 - Curtain.js
Victor Coulon씨가 작성한 Curtain.js는 긴 내용을 다루는 싱글 페이지로 구성된 웹 페이지에 멋진 전환 효과를 부여하는 jQuery 플러그인입니다. 문서의 섹션을 패널들로 화면에 고정하고 해당 패널을 스크롤 하면 마치 ...
Category: 자료 - 웹개발, Reactions: 8, Views: 65,623, Author: 파이어준
-
EVE 온라인 - WebGL 모델 뷰어 서비스 시작
EVE 온라인의 제작자인 CCP 게임은 WebGL을 이용하여 그들의 게임에 등장하는 우주선과 지형 등을 3D로 관찰할 수 있고 관련 정보를 제공하는 웹페이지를 서비스하기 시작했습니다. 이제 WebGL을 실제 서비스에 적용하...
Category: 자료 - 웹개발, Reactions: 2, Views: 58,791, Author: 파이어준
-
파비콘을 이용하여 새소식을 알리는 - Tinycon
Tinycon은 현재 웹사이트에서 사용 중인 파비콘에 작은 번호를 동적으로 표시되도록 조작하여 사용자에게 새 소식을 알리는 작은 라이브러리입니다. HTML5 캔버스 요소를 지원하는 브라우저에서만 작동합니다. 구...
Category: 자료 - 웹개발, Reactions: 6, Views: 57,131, Author: 파이어준
-
Node.JS와 드랍박스 연동하기
클로즈 베타를 앞두고 있는 코드명 벨록스 프로젝트에 킬러 피쳐를 추가하는 과제를 두고 고민하다가 개발자 답게 드랍박스와 연동하여 기존 사용자들을 흡수하는 방향으로 진행하기로 했습니다. 테스터들에게...
Category: 자료 - 웹개발, Reactions: 0, Views: 52,011, Author: 파이어준
-
한 문서를 실시간으로 여럿이 동시에 편집하는 - ShareJS
Joseph Gentle씨는 Operational Transform(운영변환) 알고리즘을 구현한 Node.JS용 모듈인 ShareJS를 배포했습니다. 이 모듈은 여러명의 사용자가 웹브라우저에서 하나의 문서를 실시간으로 동시에 편집 할 수 있는 애플리케이...
Category: 자료 - 웹개발, Reactions: 11, Views: 93,220, Author: 파이어준
-
D3.js 기반 실시간 시계열 데이터 그래프 - Rickshaw
사진 서비스인 Shutterstock에서 만든 Rickshaw는 시계열(Time-Series) 데이터를 웹페이지에 그래프로 그려주는 도구입니다. 히스토리컬 한 정적인 데이터 셋을 실시간으로 지속해서 갱신해 줍니다. 커브, 바, 라인, 퍼센트...
Category: 자료 - 웹개발, Reactions: 3, Views: 136,241, Author: 파이어준
-
자바스크립트가 비활성화 되었다면 리디렉션
이제는 좀처럼 자바스크립트가 없는 웹페이지를 찾아보기 힘들 정도로 자바스크립트는 대중화되었습니다. 그러나 웹브라우저에는 자바스크립트를 비활성화하는 기능이 존재하기 때문에 모든 사용자가 자바스크...
Category: 자료 - 웹개발, Reactions: 4, Views: 92,683, Author: 파이어준
-
인상적인 오디오 신디사이저 - Morning Star Synth
Cristiano Belloni씨는 순수 HTML5만을 이용하여 스텝 시퀸서에 의해 제어되는 Monophonic Bassline 신디사이저인 Morning Star를 만들었습니다. 모질라가 밀고있는 Audio Data API와 구글이 밀고있는 Web Audio API를 모두 지원하는 Kiev...
Category: 자료 - 웹개발, Reactions: 0, Views: 63,410, Author: 파이어준
-
WebRTC 데모 - 포토부스 스타일 라이브 비디오 이펙츠
애플의 기본 프로그램인 포토부스의 멋진 그래픽 필터 효과들을 사용해 본 경험이 있으세요? Paul Neave씨는 브라우저만으로 이와 유사한 기능을 제공하는 HTML5 비디오 이펙츠 데모를 선보였습니다. 아쉽게도, 지금...
Category: 자료 - 웹개발, Reactions: 0, Views: 88,548, Author: 파이어준
-
CSS3와 자바스크립트를 이용한 프리젠테이션 impress.js
사내 개발자가 아닌 분들을 대상으로 하는 HTML5 발표가 있어서 자료를 조사하던 중 Bartek Szopka씨가 만든 impress.js를 발견하고 소개했습니다. 보시던 분들의 반응이 아주 좋더군요. impress.js는 CSS3와 자바스크립트를 ...
Category: 자료 - 웹개발, Reactions: 11, Views: 176,211, Author: 파이어준
-
앱셀러레이터 타이타니움을 이용한 앱개발 - 아이콘
타이타니움을 이용하여 아이폰 또는 아이패드 애플리케이션을 구축하다 보면 탭바(탭 표시줄)에 표시될 아이콘 사용법에 대하여 의문이 생길 것입니다. 애플은 이러한 목적으로 사용할 수 있는 내장 시스템 아이...
Category: 자료 - 웹개발, Reactions: 2, Views: 80,174, Author: 파이어준
-
앱셀러레이터 타이타니움을 이용한 앱개발 - 변수 전달
앱셀러레이터 타이타니움에서 여러 화면으로 구성된 앱을 구축할 때 화면전환에 사용되는 코드를 크게 두 가지로 방법으로 작성할 수 있습니다. 하나의 큰 덩어리로 작성하거나, 전환될 화면 단위로 기능들을 모...
Category: 자료 - 웹개발, Reactions: 2, Views: 103,141, Author: 파이어준
-
앱셀러레이터 타이타니움을 이용한 앱개발 그 첫 경험
이 포스팅을 막 하려던 찰나, 떄늦은 사랑에 중독되어 만사를 제쳐두고 햄볶는 시간들을 흘려 보낸지도 벌써 한 달째 접어들었군요. 이제서야 이리저리 흩뿌려 놓았던 정신줄들을 긁어 모아야겠다는 생각이 들었...
Category: 자료 - 웹개발, Reactions: 11, Views: 90,518, Author: 파이어준
