Like a tree, like a breeze.

[senxation]

NYT에서 공개한 2가지 오픈소스 - PourOver, Tamper

PourOver

대량의 콜렉션을 필터링/정렬할 때 사용 http://nytimes.github.io/pourover/

Tamper

단정적인 데이터를 위한 직렬화 프로토콜. 각 범주를 표현가능한 가장 작은 이진표현으로 압축하여 보관해준다. http://nytimes.github.io/tamper/

Browser에서 대량의 데이터를 시각화할때 사용하면 좋을 듯

[senxation]

JavaScript Weekly #151 - 20131011

원문 : [http://javascriptweekly.com/archive/151.html]

특집 기사

Brendan Eich의 자바스크립트 책임

자바스크립트의 창시자가 자바스크립트의 현재 상황과 다음에는 무엇이 추가될 것인지, 그리고 어떤 것들이 필요한 지에 대해 JSConf EU에서 이야기했습니다. 30분에 걸쳐 자바스크립트 언어와 문법에 대한 많은 기술적인 요소들을 즐길 수 있습니다.

Brendan Eich : 자바스크립트의 창시자이며 현재 Mozilla Corporation의 CTO입니다.

Yeoman과 Polymer를 활용하여 Web 애플리케이션 제작하기

Addy Osmani는 Yeoman(웹 애플리케이션 제작을 간소화하기 위한 워크플로우 도구)과 Polymer(웹 컴포넌트을 이용하여 애플리케이션들을 개발하기 위한 폴리필 라이브러리)에 대해 간단히 설명합니다.

Ecma에서 JSON을 위한 ECMA-404표준 1판 출시

JingJS: 중국의 자바스크립트 컨퍼런스(베이징, 11월 9일 ~ 11월 11일)

읽을 거리

Array.prototype.reduce를 사용해 검색하기

'reduce' 메서드를 사용하여 배열안의 특정 아이템들을 검색하는 흥미로운 방법.

Node.js란 무엇인가?

Node.js가 무엇이고, 왜 모두들 사용하는 지에 대해 확실히 알지 못하는 개발자들을 위한 폭넓고 통찰력있는 해답.

자바스크립트의 Try/Catch 다시 생각해보기

Ryan Morr는 더 좋은 성능을 제공하고 커스터마이즈 가능한 자바스크립트 try/catch의 대안을 공유합니다.

자바스크립트 기초

Azat Mardanov는 어떤 점이 자바스크립트를 독특하게 표현력이 높은 언어로 만드는지, 그리고 가끔씩 좌절스럽게 만드는지에 대해 조사합니다.

힙 스냅샷과 Node.js 메모리 누수 처리하기

Node의 핵심 공헌자이자 StrongLoop 팀의 멤버인 Ben Noordhuis는 V8 힙 스냅샷을 찍기위한 간단한 메커니즘을 개발자들에게 제공하기 위해 heapdump 모듈을 만들었습니다.

js-git을 개발하고 있는 Tim Caswell

js-git은 Git 소스 코드 제어 시스템의 자바스크립트 구현체입니다. Pluralsight의 Geoffrey Grosenbach는 그 제작자와 작업이 어떻게 진행되고 있는지에 대해 이야기를 나누었습니다.

자바스크립트로 Brackets 코드에디터 확장하기

Alessandro Artoni는 자바스크립트만 사용해서 Brackets 코드 에디터의 확장을 만드는 방법을 설명합니다.

자바스크립트로 'Maybe'를 만들기위해 ES6 제네레이터 가지고 놀기

Maybe

SpiderMonkey의 ES6 제네레이터와 이터레이션

파이어폭스의 자바스크립트 엔진인 스파이더몽키(SpiderMonkey)는 이제 ES6 제네레이터와 이터레이션을 지원합니다. 이 글은 그들이 어떻게 동작하는지 살펴봅니다.

왜 Asm.js는 게임 개발자에게 대단한 것인가

자바스크립트 콘솔 API

대부분의 자바스크립트엔진에는, 로그와 디버깅을 위한 메서드를 가지는 전역 객체 console이 있습니다. 이 객체는 언어의 일부는 아니지만, 사실상의 표준이 되었습니다.

동영상

Angular, Ember 그리고 Knockout에서의 양방향 바인딩(The Two-way Binding)에 대한 비교

JSconf EU에서 그들의 비슷한 점과 다른 점을 통해 라이브러리들의 장점과 단점에 대해 이야기합니다.(19:16)

자바스크립트에서 단계별로 간단한 게임 만들기

(28:59)

나비의 처지: Object.observe()

Object.observe는 자바스크립트 객체가 변화되었을 때 모니터링을 위해 제안된 메커니즘입니다. Addy Osmani가 43분의 이야기를 통해 그것이 어떻게 동작하는지 설명합니다.

나비의 처지(Plight Of The Butterfly): 몇몇 사람들은 나비가 몸에 앉을 때 행운이라고 생각합니다. 하지만 영국에서는 전통적으로 그 해 첫번째로 본 나비는 죽여야지만, 불행을 피할 수 있다고 생각합니다. 이 세션에서는 Object.observe()에 대해 알고 있다고 생각했지만 아니었던 부분에 대해 설명합니다. Object.observe()를 나비에 비유해서 좋을 수도 있지만 누군가는 없애버려야한다고 생각할 수도 있다고 이야기한 것 같습니다.

어떻게 친구를 얻고, 표준단체에 영향을 끼칠 것인가

LXJS 2013에서 있었던 25분간의 영상으로 Domenic Denicola이 웹 플랫폼의 다양한 기술안에서 활동하고 있는 표준단체들에 대해서 이야기합니다. (25:32)

LXJS 2013: 포르투갈 리스본에서 2013년 10월 2-3일에 열린 자바스크립트 비영리 커뮤니티 주최의 국제 컨퍼런스입니다.

Promise들로 중첩된 콜백들 지우기

12분간의 스크린캐스트입니다. (12:33)

클로져스크립트(ClosureScript): David Nolan의 Lisp의 복수

Web Rebels 컨퍼런스에 있었던 40분간의 이야기입니다.(41:35)

MEAN 가져오기(Mongo, Express, Angular, Node)

MEAN은 MongoDB, Express, Node.JS와 그리고 AngularJS를 이용한 애플리케이션의 전체 개발 스택입니다. 그리고, 구글의 Brad Green이 그것들에 대해 개발자의 선택에 대해 이야기했습니다.(57:17)

중요 릴리즈

Backbone.js 1.1 릴리즈

세부변경과 최적화, 버그수정이 대부분입니다.

SproutCore 1.10.0 릴리즈

YUI 3.13.0 릴리즈

특히 리치 텍스트 편집기에 많은 수정과 세부변경이 있었습니다.

Knockout 3.0 릴리즈 후보 사용가능

주요 구조적인 라이브러리들을 위한 한 주인 것 같습니다.

코드, 라이브러리들과 도구들

Prerender: 검색 엔진에 잘 검색 되도록 AngularJS, Backbone 그리고 Ember 앱 만들기

검색 엔진 크롤러를 감지하면 이에 적합한 정보를 제공하고 싱글 페이지 자바스크립트 앱도 잘 크롤링 되도록 동작하는 노드(또는 레일즈) 미들웨어

Dropzone.js: 이미지 프리뷰를 제공하는 드래그 앤 드롭 파일 업로드

amdclean: AMD 코드를 표준 자바스크립트로 변환해주는 빌드 툴

QuestionMark.js: 단축키를 보여주는 모달(Modal) 윈도우

BubbleChart: 버블 차트로 이차원 데이터를 시각적으로 비교해주는 자바스크립트 모듈

Dolly.js: 테이블에 엑셀같은 복사 기능을 추가해 주는 jQuery UI 위젯

Arg.js: 가벼운 URL 인자(argument)와 매개변수(parameter) 파서

textAngular: 양방향 바인딩을 지원하는 가벼운 Angular.js 텍스트 에디터

일자리

Turn사의 소프트웨어 엔지니어 @ 실리콘 밸리

빅 데이터, 머신 러닝, 분산 시스템. 이런 기술에 흥미가 있으며 자바스크립트에 능숙하다면 턴의 프론트엔드 애플리케이션 팀에 합류하는 일에 대해 이야기하고 싶습니다.

Weebly에서 프론트 엔드 자바스크립트 전문가를 찾습니다!

YCombinator가 지원하는 Weebly의 작으면서도 재능있는 개발팀에 합류하세요. 수천만명이 사용하게 될 기능을 직접 만드세요.

Booking.com의 UX/Web 디자이너 @ 네덜란드 암스테르담

세계 제일의 숙박 웹사이트인 Booking.com에서 제일 스마트한 디자이너를 찾습니다. HTML과 CSS에 능숙한가요? 수백만명의 사람들에게 영향을 주는 중요하고 확인 가능한 개선사항을 자유롭게 만들 수 있을 것입니다. 암스테르담으로의 이주도 지원하고 있습니다.

마지막으로,

대용량 객체 힙 밀집화(compaction): 과연 사용해야 할까요?

크리스가 LOH(Large Object Heap) 파편화와 밀집화를 살펴봅니다. 언제 밀집화를 사용해야 할지 그리고 왜 때때로 밀집화하면 안되는지 이유를 알아볼 것입니다. 이 외에도 더 많은 정보를 얻을 수 있을 것입니다.

[senxation]

JavaScript Weekly #150 - 20131004

원문 : [http://javascriptweekly.com/archive/150.html]

특집 기사

당신은 자바스크립트를 압박받는 조건에서는 하기 어려울 것이다

5개의 함수들을 채워야 합니다. 시간이 흘러갑니다. 얼마나 빨리 코드를 완성할 수 있을까요? 저는 7분 45초나 걸렸습니다. 하지만 트위터에서 본 바로는 평균 이상의 기록입니다. 만약 당신이 3분 안에 완성할 수 있다면 자신을 슈퍼영웅이라고 생각해도 됩니다.

Reg Braithwaite가 '자바스크립트 Allongé'라는 책을 무료로 공개

자바스크립트 Allongé는 함수 프로그래밍에 대한 책입니다. 왜냐하면 자바스크립트는 유연하고 강력한 함수들이 내장된 언어이기 때문입니다. 자바스크립트 Allongé는 값과 표현식으로부터 시작하여, 자바스크립트의 자료형과, 동일(identity), 함수, 클로져, 스코프뿐만아니라 클래스와 인스턴스와 함께 동작하는 많은 주제들로 이루어져 있습니다.

identity : 동일(==), equality : 항등(===) 연산자. Allongé : 늘리고 크게 펼치는 동작을 뜻합니다.

JSHint(자바스크립트 코드품질도구)의 새로운 디자인

자바스크립트 코드 품질도구로 유명한 JSHint의 웹 사이트가 새로운 디자인으로 변경되었습니다.

스폰서기사

여러분의 모바일 웹사이트가 중학생이 만든 HTML5 프로젝트처럼 보이지 않으려면

개발자와 디자이너를 이틀간의 DBConf로 보내어 영감을 불어넣어주고 모바일 웹사이트 전략, 코드, UI/UX, 디자인과 관련있는 사람들과 관계를 맺을 수 있게 하세요. 중학교 2학년도 여러분과 경쟁할 수 있는 사이트를 만들 수 있지만 여러분의 사이트는 그것 보다는 더 좋아질 것입니다. BNACMA2 코드를 사용하면 등록시 100불의 할인이 제공됩니다.

읽을 거리

크롬 개발자도구로 자바스크립트 메모리 프로파일링하기

Addy Osmani는 크롬 개발자도구를 사용해 메모리 누수를 막기 위한 새로운 가이드를 작성했습니다. 이 문서는 객체 할당 추적기, 타임라인 메모리, 힙 프로파일등을 다룹니다.

AngularJS를 하루만에 배우기 위한 궁극의 가이드

Todd Motto는 인터랙티브하게 임베딩된 JSFiddle를 포함한 훌륭한 따라하기 예제를 제공합니다.

Node.js로 20분만에 트위터 봇 만들기

Node를 사용한다면, Node Weekly 최신호를 살펴보고, 가입을 고려해보세요.

자바스크립트의 '안전한' Integer

자바스크립트는 integer를 특정 범위 안에서만 '안전하게' 표현할 수 있습니다. 이 글은, Mark S. Miller가 es-discuss 메일링 리스트에 보낸 이메일을 토대로 왜 그런지, 그리고 '안전하게 표현'한다는 의미가 무엇인지에 대해 설명합니다.

Pub/Sub으로 Backbone.js 애플리케이션 디커플링하기

정적 메모리 자바스크립트의 즐거움

‘정적 메모리 자바스크립트(Static memory JavaScript)’는 앱을 시작할 때 생애주기동안 필요한 모든 메모리를 사전-할당하고, 실행중 객체가 더 이상 필요하지 않을 때까지 관리하는 기법입니다.

Istanbul과 Karma를 사용한 Jasmine 테스트의 코드 커버리지

인기있는 Jasmine 테스트 라이브러리를 사용하여 작성된 테스트들의 코드 커버리지를 확인(즉, 얼마만큼의 코드가 실제로 테스트되는지)하는 쉬운 방법은 Istanbul과 Karma 테스트러너를 사용하는 것입니다.

자바스크립트로 구현한 함수형 반응적 프로그래밍

Sean Voisen은 반응적 프로그래밍의 컨셉과, 어떤 이점이 있는지, 자바스크립트로 어떻게 구현할 수 있는지를 Bacon.js 예제를 사용해 설명합니다.

AngularJS의 Directive를 만드는 방법 (간단하게)

BrowserSwarm을 사용한 자동화된 자바스크립트 테스팅

BrowserSwarm은 자바스크립트 테스팅을 여러 브라우저에 꽤 간단하게 실행하는 새로운 클라우드 기반 시스템입니다.

AngularJS의 미래: 슬라이드

Node.js와 Socket.IO로 멀티플레이어 게임 만들기

Eric Terpstra는 Node.js와 Socket.IO를 사용해 멀티플레이어 게임을 만드는 방법을 간단하지만 재미있는 단어 게임을 예로 들어 설명합니다.

TypeScript로 3D 소프트 엔진을 처음부터 작성하기

프로토타입은 내 친구(성능에 신경쓴다면)

동영상

Node.js: 개발을 위해 시동걸기

하나의 크기로 시작할 수 있게하는 노드에 대한 소개가 10개의 짧은 스크린캐스트로 준비되어 있습니다. 저는 이런 형식을 좋아합니다.

자바스크립트 인터프리터, 해석하기

19분에 걸쳐서 Martha Girdler가 자바스크립트 코드의 실행과 동작에 포함된 몇 가지 개념을 살펴봅니다. (19:17)

1024+초 간의 자바스크립트 묘기

2013년 JSConf EU에서 발표된 30분의 재미있는 발표입니다. 이 이야기에서는 트윗할 수 있는 작은 사이즈의 게임들을 해킹하고, 단지 6개의 문자로 구성된 코드를 작성하며, 스스로를 변경하는 "Hello World" 프로그램을 만듭니다. 단지 재미삼아 했을 뿐입니다.(31:01)

자바스크립트 테스팅 전략

이 이야기에서는 훌륭한 자바스크립트 테스트들을 작성하기 위한 "the missing manual"에 대해 주장합니다. 한 시간동안 확실히 많은 부분을 다룹니다. * 주의 : 커피스크립트 기반입니다. (1:08:04)

코드, 라이브러리들과 도구들

Conzole: 페이지 위에 표시할 수 있는 자바스크립트 디버깅 패널

페이지 내의 패널에 네이티브 console 메서드와 기능을 추가합니다.

Opentype.js: 트루타입과 오픈타입 폰트의 자바스크립트 파서

브라우저와 node.js에서 텍스트의 글자체에 접근할 수 있게 해줍니다.

984바이트짜리 자바스크립트 Raytracer

Ray tracing

FastActive: 웹 앱을 좀 더 네이티브처럼 느끼게 만들어주는 자바스크립트 코드

FastActive는 사용자 터치가 가능한 어디라도 활성 클래스 이름을 넣었다 뺍니다. 이러한 방법으로 개발자는 사용자에게 시각적인 피드백을 즉시 제공할 수 있는 간단한 CSS를 작성할 수 있습니다.

COLT: 자바스크립트 라이브 코딩 툴

Bret Victor의 이야기를 발췌한 동영상을 통해 강력한 라이브 코딩 예제를 살펴봅니다. Code Orchestra에서는 자바스크립트 라이브 코딩이 단지 재미난 장난감인지 아니면 진정한 툴인지에 대해 생각해봅니다.

당신의 웹 어플리케이션에 텍스트 편집 기능을 추가할 수 있는 다섯가지 자바스크립트 라이브러리

Ideal Forms 3: 강력하고 유연한 웹 폼 jQuery 플러그인

일자리

2x 자바스크립트 프론트엔드 개발자 (선임과 중간급), 런던 중심부

(센차와 유사한) 자바스크립트 프레임워크, Angular, CoffeeScript, LESS, Ruby, Node, Agile. 특출난 자바스크립트 역량을 갖고 있으며 전세계적으로 고객을 갖고 있는 SaaS 비디오 플랫폼 기업에서 일하고 싶다면 이 혁신적인 프론트엔드 애플리케이션 팀에 합류하시기 바랍니다.

마지막으로,

에어브레이크를 사용하여 예외를 잡으세요

에어브레이크(Airbrake)를 사용하여 에러가 발생한 앱에서 예외를 잡고 더 빠르게 해결하세요. 5만명 이상의 개발자가 믿고 사용하고 있습니다. 새로운 버전에서는 더 빠르게 에러를 해결할 수 있도록 깃헙(GitHub), 피보탈(Pivotal)과 같은 수 많은 워크플로우 도구와의 통합 기능을 제공합니다.

[senxation]

JavaScript Weekly #149 - 20130927

원문 : [http://javascriptweekly.com/archive/149.html]

특집 기사

BrowserSwarm: 브라우저들을 교차하여 자바스크립트 테스팅 자동화

클라우드 상에서 당신의 Github 저장소로 접속 한다음 13개의 다른 브라우저 버전(최신 크롬, 파이어폭스, 사파리, 오페라,IE6~10)에서 자바스크립트 코드를 실행할수 있습니다. 마이크로소프트 인터넷익스플로러 팀과 Sauce Labs에 의해 만들어졌습니다.

2013년 Reject.JS에서 있었던 8개의 이야기들

Reject.js 는 JSConf.EU와 함께 열린 자바스크립트 컨퍼런스입니다. 모바일의 60 FPS 복고풍 게임과 EcmaScrpt 5부터 깔끔한 콜백들까지 그리고 적응형 웹 디자인을 주제로 담고 있습니다.

동영상으로 되어있습니다. : Reject.js는 독일 베를린에서 9월 12일에 개최되었습니다.

스폰서기사

여러분의 모바일 웹사이트가 중학생이 만든 HTML5 프로젝트처럼 보이지 않으려면

개발자와 디자이너를 이틀간의 DBConf로 보내어 영감을 불어넣어주고 모바일 웹사이트 전략, 코드, UI/UX, 디자인과 관련있는 사람들과 관계를 맺을 수 있게 하세요. 중학교 2학년도 여러분과 경쟁할 수 있는 사이트를 만들 수 있지만 여러분의 사이트는 그것 보다는 더 좋아질 것입니다. BNACMA2 코드를 사용하면 등록시 100불의 할인이 제공됩니다.

읽을 거리

자바스크립트와 asm.js로 웹에서 네이티브의 속도를

Mozilla의 Emscripten의 메인 개발자 Alon Zakai가 이해를 돕기위해 작성한 슬라이드로 웹상에 트랜스파일된 네이티브 코드에 네이티브같은 성능을 얻기 위한 트릭과 기법들에 대해 파헤칩니다.

자바스크립트 모듈, AMD 그리고 앞으로의 길

함수형 반응적 프로그래밍을 사용하여 협연 피아노 만들기

예제를 통해 함수형 반응적 프로그래밍 (Functional Reactive Programming, FRP)을 설명합니다. FRP는 함수형 프로그래밍과 반응적 프로그래밍을 조합하는 선언형 프로그래밍(declarative programming) 패러다임으로, 신호, 즉 계속해서 변하고 연결되어있는(데이터 바인딩과 유사) 값으로 동작합니다. FRP는 GUI를 구현하는데 적합합니다.

TodoMVC 구현체들은 얼마나 복잡한가

몇가지 메트릭를 사용하여 다양한 프레임워크(jQuery, AngularJS, Ember.js, Backbone.js, 기타 등등)로 구현된 TodoMVC의 복잡도를 비교합니다. 어떤 프레임워크가 더 간단한 개발을 돕는지 알아보기위한 방법을 제공합니다.

Array#filter로 배열을 필터링하기

Josh Clanton은 내장 배열 메서드의 동작에 대해 설명합니다.

자바스크립트로 CSS 작성하기

David는 자바스크립트로 스타일시트를 동적으로 작성하는 흥미로운 라이브러이인 'absurd.js'의 사용방법을 보여줍니다.

Canvas와 자바스크립트로 진짜같은 비오는 효과 만들기

Marek Brodziak은 HTML canvas에 진짜같은 비오는 효과를 보여주는 RainyDay.js를 만드는데 사용한 기법들을 설명합니다.

유니코드와 자바스크립트

Axel Rauschmayer는 우선 유니코드의 간단하지만 전체적인 개요를 보여주고, 그리고나서 자바스크립트로 적절하게 사용하는 방법을 설명합니다.

자바스크립트 Y 컴비네이터

Michael Hurley는 람다 계산법(lambda calculus)의 고정-점 컴비네이터(fixed-point combinator)인 Y 컴비네이터를 설명하기 위해 자바스크립트 코드를 사용하였습니다.

FlowType.JS와 함께하는 반응형 웹 타이포그래피 소개

글꼴 크기는 웹 페이지가 표시되고 있는 디바이스의 크기에 맞게 적용시키는(반응형 디자인이 이미지에 적용하는것과 유사하게) jQuery 플러그인

ServiceWorkers 설명

HTML5 애플리케이션 캐시는 웹 앱이 오프라인으로 실행될 수 있도록 도와줍니다. 하지만, 이 API는 잘 알려진 제약들이 있습니다. 따라서, Alex Russell은 개발자들에게 저-수준의 프리미티브를 제공하여 이런 제약들을 피할 수 있는 ServiceWorkers API를 제안합니다.

웹 컴포넌트와 Polymer.js 시작하기

Grunt와 커스텀 태스크로 복잡한 워크플로우 자동화하기

Ben Farrell은 복잡한 워크플로우에 사용될 수 있는 Grunt 커스텀 태스크를 작성하는 방법을 설명합니다. 예제에서 그는 비디오에서 오디오를 추출합니다.

백엔드 없이 프로토타입 Angular UI를 만드는 방법

Chaos 가지고 놀기: 자바스크립트로 프랙탈(Fractals)과 Strange Attractors 프로그래밍하기

Keith Peters의 킨들 책.

동영상

A Knockout.js를 위한 스크린캐스트 시리즈

Knockout.js MVMM 라이브러리를 설명하고 홍보하기 위한 5분에서 13분 분량의 아주 작은 크기의 스크린캐스트 15개가 있습니다. 이미 9개 부분이 활성화 되어있습니다.

스크린캐스트 : 화면을 녹화하면서 설명하는 방식의 동영상 강좌입니다. 지금 시점으로 14편까지 공개되었습니다.

Backbone.js Routers

Backbone.js routers는 당신의 어플리케이션의 상태를 기록, 추적하는데 사용됩니다. Routers는 URL을 가지고있는 어플리케이션에서 URL의 경로, 해쉬를 변환해줍니다. 다시 말하면, Routers는 함수에 경로를 기록합니다. Andy Appleton이 8분의 스크린캐스트를 통해 어떻게 사용 하는지에 대해 보여줍니다. (08:19)

Polymer와 함께 하는 99초간의 웹 컴포넌트 여행

Polymer는 웹을 위한 새로운 타입의 라이브러리입니다. 웹 컴포넌트 기반으로 구축되었고, 점진적으로 진화하는 웹 플랫폼으로 설계 되었습니다.

코드, 라이브러리들과 도구들

pace.js: 자동 페이지 로드 진행 막대

Ajax 요청을 포함해 웹앱의 로딩 진행 상황을 표시합니다. 진행 상황은 자동으로 감지합니다.

ngStart: 새로운 AngularJS 프로젝트 스켈레톤

Bower, RequireJS, JSLint, Grunt, Karma 등을 사용합니다.

jQuery 1.11 and 2.1 베타 1 릴리즈

커스텀 Ember 컴포넌트 만들어 보기

이 템플릿은 Ember를 위한 커스텀 컴포넌트 라이브러리를 만들 수 있도록 기본적인 프로젝트 구조와 설정, 명령어를 제공합니다.

Drawingboard.js: 간단한 캔버스 기반의 드로잉 위젯

당신의 사이트에서 손 쉽게 사용할 수 있는 HTML5 캔버스 기반의 드로잉 위젯입니다.

JavaScript Is Jarig (256 바이트도 작은 사이즈로 음악 만들기)

웹 사이트에는 또한 비슷한 방식의 다른 프로젝트들의 목록이 있습니다. 예를 들어 256바이트 이내로 "2D 캔버스를 사용한 signed distance field raymarcher"는 데모와 동작 방식에 대한 설명이 있는 페이지가 있습니다.

distance field raymarcher ?

Lo-Dash 2.0의 커스텀 빌드

steganography.js: 자바스크립트를 통한 정보 은닉

이미지의 알파 채널에 텍스트 메시지를 숨기는 라이브러리 입니다.

손쉰게 다른 .npmrc 파일을 변경하기

generator-polymer: Polymer 앱을 스캐폴딩하기위한 Yeoman 제네레이터

generator-mobile: 모바일-우선 웹 앱을 위한 Yeoman 제네레이터

일자리

프론트 엔드 엔지니어 @ Orchestrate.io (포틀랜드 또는 재택)

Orchestrate의 미션은 데이터베이스의 어려움을 없애 개발자들이 창조적인 일에 몰두할 수 있도록 돕는 것입니다. 이런 역할은 개발자들이 데이터베이스를 활용하는 방법을 다시 상상하는데 도움이 될 것이며 우리 회사의 브랜드를 만들 것입니다. 경험 많고 자금이 풍부한 스타트업과 함께 하세요. 우리에 대해 더 많은 것을 알아보기 바랍니다.

자바스크립트 개발자 @ 암스테르담 (비자와 이주 지원 가능)

수백만명의 고객이 사용하는 최고의 숙박 웹사이트에서 일하는데 흥미가 있나요? JS/HTML/CSS를 사용한 개발 경험이 있으신가요? Booking.com에서 숙련된 프론트 엔드 개발자를 찾고 있습니다. 이 비디오를 확인하시면 우리 회사에 대해 더 많은 것을 알 수 있을 것입니다.

OrgSync사의 소프트웨어 개발자 (텍사스, 댈라스)

350여개의 대학에서 2백만명이 넘는 사람이 사용하는 애플리케이션을 만들고 확장하세요. 잘 만들어진 소프트웨어와 훌륭한 사용자 경험을 만드는 일에 많은 관심이 있다면 이 자리가 딱 맞는 자리가 될 것입니다.

[senxation]

JavaScript Weekly #148 - 20130920

원문 : [http://javascriptweekly.com/archive/148.html]

특집 기사

US에서 열린 JSConf의 27개의 프리젠테이션들

2013 US에서 열린 JSConf에서 의 27개의 플레이 리스트들은 (36개이지만 몇 개는 중복입니다.) Peter Flynn이 설명하는 자바스크립트 성능 튜닝비법, Seb Lee-Delisle이 설명하는 브라우저에서 예술을 만드는 법, Peter van der Zee의 실시간 재컴파일, 그리고 Angelina Fabbro의 중급 개발자로서 전문가가 되기 위한 노력과 같은 내용들이 포함되어 있습니다.

Higgs: 흥미로운 새로운 자바스크립트 가상머신과 컴파일러

D에서 만들어진 자바스크립트 인터프리터와 JIT 컴파일러는 x86-64 플랫폼을 타겟팅하여 왔고, 그것들은 동적언어의 최적화 연구에 한 부분으로 발전되어 왔습니다. 이것에 관련하여 Dan Glasperlensiel이 Higgs FFI를 이용한 자바스크립트로부터 C 코드를 호출 하는 법에 대해 재미있는 포스트를 작성했습니다.

스폰서기사

여러분의 모바일 웹사이트가 중학생이 만든 HTML5 프로젝트처럼 보이지 않으려면

개발자와 디자이너를 이틀간의 BDConf로 보내어 영감을 불어넣어주고 모바일 웹사이트 전략, 코드, UI/UX, 디자인과 관련있는 사람들과 관계를 맺을 수 있게 하세요. 중학교 2학년도 여러분과 경쟁할 수 있는 사이트를 만들 수 있지만 여러분의 사이트는 그것 보다는 더 좋아질 것입니다. BNACMA2 코드를 사용하면 등록시 100달러 할인이 제공됩니다.

읽을 거리

자바스크립트의 뚱뚱한 화살표(=>) 함수(Fat Arrow Functions)

버전 22부터, 파이어폭스는 ECMAScript 6의 화살표 함수를 지원해오고 있습니다. 이 블로그 글은 함수 표현식에 비해 그들의 이점이 무엇인지 설명합니다.

Node.js의 의존성 주입에 대한 소개

"의존성 주입" 프로그래밍 디자인 패턴에 대해 설명하고, 이를 구현하는데 도움을 주는 Dependable 라이브러리에 대해 소개합니다.

자바스크립트로 CSS 애니메이션과 트랜지션 제어하기

약간의 자바스크립트과 CSS 애니메이션과 트랜지션을 결합하면 하드웨어-가속 애니메이션과 인터랙션을 대부분의 자바스크립트 라이브러리보다 더 효과적으로 달성할 수 있습니다.

컴퓨터 프로그램의 구조와 해석 (자바스크립트 버전)

“컴퓨터 프로그램의 구조와 해석” (Harold Abelson과 Gerald Sussman, Julie Sussman의 저서)는 최고의 프로그래밍 교재 중 하나입니다. 이 책은 Scheme를 사용하고, 특히 Scheme이 자바스크립트에 얼마나 많은 영향을 주어왔는지 알려주기 때문에, 자바스크립트 프로그래머에게 강력하게 추천하는 도서입니다. 이 버전은 자바스크립트로 된 예제와 함께 원본의 일부 섹션을 포함합니다.

모두를 위한 JS: 다음 자바스크립트 워크샵을 위한 자료들

Pam Selle은 자바스크립트 기초 워크샵을 위해 PhillyJSDev에서 사용된 자료들을 공개했습니다.

자바스크립트 코드를 위한 스코프 분석

스코프 분석이 무엇인지 설명하고 자바스크립트 코드에서 이를 수행하는 Escope 라이브러리에 대해 설명합니다.

프레임워크없는 자바스크립트: Angular, Ember 또는 Backbone를 왜 사용하지 않는지

FruitJS 맛보기

Andrew Hushbeck는 마크다운 형식으로 작성된 문서를 HTML 사이트로 변환하는 Node.js 유틸리티인 FruitJS를 어떻게 사용하고 빌드하는지에 대해 설명합니다.

동영상

Bocoup에서의 TC39 자바스크립트 패널

TC39 (Ecma 기술위원회 39)는 ECMAScript 언어에 대한 표준을 발전시키고 유지하는데 책임을 가지고 있습니다. 9월 18일 Bocoup에서 Rick Waldron의 진행하에, Allen Wirfs-Brock, Douglas Crockford, Brendan Eich외 몇몇으로 이루어진 TC39 패널을 초대하였습니다. 해당 자리에서는 자바스크립트에 관한 다양한 이슈들과 미래에 대해 논의하였습니다.(1:10:13)

[TC39는 자바스크립트 언어의 변화를 최종적으로 결정하는 ECMA그룹입니다.] [Douglas Crockford: JSON의 창시자이며, 자바스크립트로 가장 유명한 개발자라고 할 수 있습니다. ] [Bocoup은 개방형 웹기술 업체로 2012년에는 페이스북과 Rinmark.io라는 브라우저 테스트 도구를 오픈 하기도 하였습니다.]

Backbone.js 기초

Thomas Hunter II 가 높은 수준의 Backbone.js의 프리젠테이션을 보여줍니다. 해당 영상에는 Thomas의 책과 비슷한 주제가 많이 담겨 있습니다.(36:33)

자바스크립트 Jabber: Nicholas Zakas와 함께 하는 유지보수가능한 자바스크립트

이번 팟캐스트에서는 6명(Nicholas Zakas, Joe Eames, AJ O'Neal과 몇몇들)으로 이루어진 패널들이 "자바스크립트 유지보수"에서 Zakas가 가지고있는 개념에 관련된 이슈에 대해 논의 합니다.(57:41)

대화록도 포함되어있습니다.

자바스크립트와 웹보안

약 49분의 대화에서는 보안패스워드저장과 인증, SRP프로토콜, 그리고 통상적인 자바스크립트 보안 위험과 주입기술이 포함된 자바스크립트와 웹 보안에 대해 얘기 할 것입니다. (48:33)

Adobe의 포토샵CC를 스크립트화 하기 위해 포토샵 생성기와 Node.js를 사용 하는법

(25:12)

Tom의 블로그 포스트에 글로도 설명되어 있습니다.

코드, 라이브러리들과 도구들

svg.js: 확장 가능한 벡터 그래픽의 애니메션과 제어를 위한 자바스크립트 라이브러리

Raphael 보다 훨씬 가볍지만 하위버전에 대한 지원이 조금 부족합니다. 문서 잘 만들어져 있습니다.

BladeRunnerJS: 대규모 HTML5 앱을 위한 모듈화된 프레임워크

대규모 싱글 페이지 웹 앱의 개발, 테스트, 배포, 유지보수를 쉽게 만들어주는 툴과 라이브러리에 더해 관례들의 집합으로 구성되어 있습니다.

TogetherJS: 사이트에 실시간 협업 요소를 추가하기

RedScript: 루비식 자바스크립트 실험

좀 더 네이티브한 모듈 경험, 더 쉬운 상속 그리고 루비 스타일 문법을 제공하기 위해 트랜스파일러(transpiler - CoffeeScript 같은)를 만들었습니다.

Ember 앱 키트 소개

엠버 앱 키트(EAK)는 Grunt, JSHint, Qunit, Karma(테스트 러너), ES6 모듈 그리고 Bower를 포함한 Ember.js 프로젝트를 위한 툴셋입니다. EAK는 최근에 엠버 코어 팀으로부터 승인을 받았습니다. EAK는 기본 프로젝트 레이아웃을 명시하고 결과적으로 엠버 프로젝트를 관리하고 생성하기 위한 실행 가능한 상태로 성장할 수도 있습니다. Matthew Beale은 EAK의 다른 소개를 사파리 북스 온라인에 작성하였습니다.

JSModeler: 3D 모델을 시각화하고 만들기 위한 자바스크립트 프레임워크

3D 모델을 만들고 Three.js 기반의 뷰어에서 이를 보여줍니다. 다른 요소 : STL과 OBJ 포맷으로 내보내기와 기하학 함수(2D와 3D)

Vex: 현대적이고 유연한 대화상자 라이브러리

대화상자마다의 모든 옵션 설정과 모든 UI 엘리먼트, 테마, 행동, 애니메이션 그리고 효과의 스타일링을 포함하는 높은 수준의 변경을 지원합니다. 유연한 API를 가지며 7KB보다 작은 용량입니다.

TripleSec: Triple-Paranoid Symmetric 암호화 라이브러리

브라우저와 Node.js용 오픈 소스 라이브러리입니다. TripleSec은 Salsa 20, AES, Twofish로 데이터를 암호화 하기 때문에 한 두 개의 암호화 조합으로는 어떤것도 노출 시키지 않을 것입니다.

Jor1k: 자바스크립트로 작성된 OpenRSC 1000 에뮬레이터, 리눅스에서 실행

Mapael: 인터랙티브한 벡터 지도를 위한 jQuery 플러그인

jQuery Mapael은 raphael.js를 기반으로하는 jQuery 플러그인입니다. 이것은 동적인 벡터 지도를 표시할 수 있게 만들어줍니다.

OJ: API 호출을 통해 웹 사이트를 만드는 프레임워크

양방향의 모델, 컬렉션 바인딩과 함께 백본을 지원합니다.

LeapTrainer.js v0.2 출시

LeapTrainer.js는 Leap Motion용 제스쳐 학습과 인식 프레임워크입니다. 이 비디오는 새로운 학습 UI와 업그레이드된 제스쳐 인식을 소개합니다.

completely.js: 의존성없는 자동완성 라이브러리

FireShell: 프론트엔드 표준 코드와 워크플로우 프레임워크

더 나은 워크플로우를 가지려는 팀과 개인 개발자를 위한 독단적인 프레임워크입니다. HTML5 표준 코드 프레임워크와 감싸진 자바스크립트 태스크 실행, 프로세스 빌드, 자동 최소화와 파일 병합 기능을 가지고 있습니다.

Phaser: 모바일과 데스크톱을 위한 HTML5 게임 프레임워크

WebGL과 캔버스를 기반으로 스프라이트, 사운드, 디바이스 입력, 애니메이션, 파티클, 카메라등을 지원합니다.

DataTables: jQuery용 테이블 플러그인

페이지네이션, 필터링, 멀티 컬럼 정렬등의 기능을 가지는 계속적으로 확장하는 테이블. DOM, 자바스크립트 배열, Ajax 등의 다양한 소스로부터 데이터 입력이 가능합니다.

일자리

시니어 웹 엔지니어, 코어 엔지니어링 (캘리포니아, 오클랜드)

판도라에서 소비자 웹 애플리케이션을 설계하고 만들 혁신적이고 영감있는 웹 엔지니어를 찾고 있습니다. 매우 협동적이고 재미있는 팀의 일원으로 복잡하지만 재미있는 문제를 해결할 기회를 갖게 될 것입니다.

소프트웨어 엔지니어 @ 턴 (실리콘 밸리)

Angular, Node, Bootstrap. 빅 데이터, 머신 러닝, 분산 시스템. 이런 기술에 관심이 있고 자바스크립트에 능숙하다면 턴의 프론트엔드 애플리케이션 팀에 합류하는 것에 대해 이야기해보고 싶습니다.

프론트엔드 개발자 @ The Nerdery

The Nerdery에서 오래된 브라우저를 지원할 수 있는 역량을 가지고 있으면서도 최신의 웹 개발 기술을 배우고자 하는 열정을 가진 재능있는 프론트엔드 개발자를 찾고 있습니다. 최고의 지원자는 의욕이 넘치고 항상 배우면서 한계에 도전하는 사람입니다.

마지막으로,

배포 과정을 자동화하세요

레드 게이트(Red Gate)의 Deployment Manager를 사용하여 빠르고 반복 가능한 배포를 진행하세요. .NET 애플리케이션, 서비스, 데이터 베이스를 하나의 프로세스로 배포하고 공유 대시보드에서 여러분의 환경을 살펴보고 모든 배포 작업을 한 곳에서 관리하세요. 지금 바로 시작하세요.

[senxation]

JavaScript Weekly #147 - 20130913

원문 : [http://javascriptweekly.com/archive/147.html]

특집 기사

O'Reilly 의 Fluent 컨퍼런스 Call for Proposals 오픈

O'Reilly 가 웹플랫폼, 자바스크립트, 그리고 연관 기술에 대한 컨퍼런스로 2014년 3월에 샌프란시스코에 다시 돌아옵니다. 이번년도는 거의 1200명의 참석자가 있었으며, Fluent는 이제 해당 분야를 대표하는 행사중에 하나입니다. 9월 30일에 Call for Proposals가 종료 되니 많이들 제출 해주시고 워크샵에 참석 해주세요.

Eloquent 자바스크립트 개편을 위한 펀딩

Marijn Haverbeke에 의해 쓰여진 Eloquent 자바스크립트는 무료 자바스크립트 입문서 및 책 중에 가장 유명한 것 중에 하나입니다. Marijn은 2판을 새롭게 쓰길 원하며, 최근에 해당 작업을 위해 펀딩을 받고 있습니다.

자바스크립트 개론 : 체계적인 프로그래밍 수련법이란 이름으로 번역 되었습니다.

스폰서기사

여러분의 모바일 웹사이트가 중학생이 만든 HTML5 프로젝트처럼 보이지 않으려면

개발자와 디자이너를 이틀간의 DBConf로 보내어 영감을 불어넣어주고 모바일 웹사이트 전략, 코드, UI/UX, 디자인과 관련있는 사람들과 관계를 맺을 수 있게 하세요. 중학교 2학년도 여러분과 경쟁할 수 있는 사이트를 만들 수 있지만 여러분의 사이트는 그것 보다는 더 좋아질 것입니다. BNACMA2 코드를 사용하면 등록시 100불의 할인이 제공됩니다.

읽을 거리

ECMAScript 6의 화살표 함수 (Arrow Functions) 이해하기

ECMAScript 6의 가장 흥미로운 새로운 부분중 하나는 '화살표' 함수입니다. 행운인 점은, 여기 Nicholas C Zakas가 이 함수의 동작방식과 사용방법에 대해 설명해주고 있다는 것입니다.

AngularJS에서의 D3

D3는 문서기반의 데이터를 조작하고 HTML, SVG와 CSS로 렌더링하는 유명한 라이브러리이지만, D3와 Angular를 조합하는 것은 까다로울 수 있습니다. 이 글은 다양한 접근방법에 대해 공유합니다.

안티-패턴: prototype 프로퍼티에 데이터 넣기

Axel은 prototype 프로퍼티에 데이터를 넣어두는 것이 왜 좋은 아이디어인것처럼 보이는지, 하지만 실제로는 그렇지 않은지에 대해 설명합니다.

jQuery 컨퍼런스 오스틴 토크의 대략적인 노트

jQuery 컨퍼런스 오스틴(Austin)이 이번주 초에 열렸고, Neil Dahlke는 각 세션에 대한 기본적인 노트를 적어두었습니다.

Node.js, Express, MonghDB로 시작하기

‘Node.js, Expree, Express, Jade와 MonghDB를 시작하고 실행하려고하는 프론트엔드 개발자를 위한 매우 간단한 단계별 가이드’라고 묘사되는, 포괄적인 단계별 튜토리얼입니다. Node Weekly 3호에서도 언급되었습니다.

three.js 초보자 가이드

three.js를 사용하여 WebGL로 표현되는 3D 로고를 생성하는 단계별 가이드입니다.

Promise 패턴

Promises는 콜백으로 일반적인 비동기 패턴을 구현하기 쉽게 만들어주는 패턴입니다. Rhys는 몇가지 사용법에 대해 설명합니다.

RequireJS를 사용할 때 도움이 될만한 5가지 팁

"JS 파일과 모듈 로더"인 RequireJS는 여러분의 앱에서 자바스크립트를 구성하고, 관리하고, 빌드하고 로드하기 위한 강력한 방법을 제공합니다. 여기서 Jim Cowart는 사용하기 전에 알아두었다면 정말로 좋았을 법한 다섯가지 팁을 공유합니다.

jQuery로 커스텀 필터 만들기

Aurelio De Rosa는 jQuery로 DOM 엘리먼트를 위한 커스텀 필터를 만들고 사용하는 새로운방법과 오래된 방법을 보여줍니다.

채팅 서비스를 만들기 위해 Node.js와 웹 소켓 사용하기

Mutation 옵저버 알아보기

때론 DOM 노드 트리가 언제 변경되는지, 또는 뷰가 로드되거나 언로드되었는지 알고 싶을 수도 있습니다. DOM 레벨 4 스펙에 정의된 Mutation 옵저버는 이런 작업을 비동기적으로 할 수 있게 해주며, 최신 버전의 오페라, 크롬, 파이어폭스에서 사용할 수 있습니다.

더 명백한 Backbone 믹스인 전략

웹 오디오와 Band.js를 사용한 레트로 게임 음악

Brian Rinaldi는 젤다의 음악을 재탄생시키는 것을 예로들어, Band.js 라이브러리가 자바스크립트와 웹 오디오 API를 사용해 어떻게 8비트 게임 음악을 만드는지 보여줍니다.

자바스크립트와 AngularJS로 서버 의존성 흉내내기

Cliff Meyers는 예제 애플리케이션을 통해 서버측 의존성을 흉내내어 SPA 로컬 개발을 단순화하는 방법을 다룹니다.

크롬에서 디버깅할때 라이브러리 코드를 자동무시하기

코드, 라이브러리들과 도구들

Hapi: Node.js를 위한 서버 프레임워크

웹 애플리케이션과 서비스를 위한 리치 프레임워크. Hapi는 입력값 검증, 캐싱, 인증과 같은 여러가지 기본적인 기능들을 지원하고 이러한 기능들을 설정을 통해 간단히 사용할 수 있는 설정 중심 프레임워크입니다.

CLNDR.js: 더 나은 jQuery 달력 플러그인

Falcon.js: Knockou.js를 위한 프레임워크

Falcon.js는 Knockout.js를 통해 싱글 페이지 앱 개발을 수월하게 할 수 있도록 모델, 컬렉션 그리고 뷰 구조를 추가합니다. 많은 문서가 있습니다.

Formbuilder.js: 사용자가 폼을 만들 수 있게 해주는 인터페이스

사용자가 자신의 웹폼을 만들 수 있게 해주는 그래픽 인터페이스입니다. Wuffo나 Google 폼을 생각하면 됩니다. 하지만 여러분의 애플리케이션에서 사용할 수 있는 컴퍼넌트 같은 것 입니다. Formbuilder는 손쉽게 사용할 수 있도록 구조화된 JSON 표현을 반환합니다.

FilmRoll: jQuery 캐러셀

화면의 중심에 놓여진 하나의 아이템에만 집중 할 수 있는 가볍게 사용할 수 있는 캐러셀(carousel)입니다. 비슷한 종류의 많은 것이 있지만 이것은 매우 멋집니다.

포토샵 CC를 위한 새로운 Adobe Generator는 스크립트 언어로 Node.js를 사용한다

고급 jQuery Boilerplate: 확장 가능한 jQuery 플러그인을 만들기 위한 jQuery 플러그인

MurmurHash3.js: MurMurHash3 해싱 알고리즘의 JS 구현체

favico.js: 뱃지, 이미지, 비디오를 파비콘으로 사용할 수 있게 해 주는 라이브러리

일자리

시니어 자바스크립트 엔지니어 (샌프란시스코 - SOMA)

자금력이 충분한 빅데이터 회사에 근무하면서 세상에서 가장 어려운 자바스크립트 문제를 최신 기술을 사용하여 해결하고 싶지 않으신가요? 급격한 성장을 하고 있는 재능있고 성공적으로 일을 완수하는 팀에 합류하여 빅 데이터 분야에서 미래로 가는 길을 같이 만들길 바랍니다.

자금력과 경험이 많은 팀에서 사람을 찾습니다.

어서 링크를 클릭하세요. 그러면 모든 것이 바뀔 것입니다.

마지막으로,

핵 리액터의 샌프란시스코 엘리트 프로그래밍 부트 캠프에 참가하세요.

핵 리액터(hackreactor)는 21세기를 위한 컴퓨터 과학 학위를 개발했습니다. 졸업자의 98%가 취업에 성공했으며 평균 초임은 11만불입니다. 또한 와이어드와 테크크런치에 소개되기도 했습니다.

에스프루이노: 사물 자바스크립트

에스프루이노(espruino)는 누구라도 주변의 사물을 컨트롤 할 수 있는 작은 컴퓨터입니다. 에스프루이노의 자바스크립트 해석기를 사용하면 바로 반응을 확인할 수 있어 여러분이 원하는 것을 실험하고 개발할 수 있습니다. 현재 킥스타터에서의 두각을 나타내고 있으며 자금 목표를 이미 달성한 상태입니다.

[senxation]

JavaScript Weekly #146 - 20130906

원문 : [http://javascriptweekly.com/archive/146.html]

특집 기사

Ember 1.0 출시

첫번째 커밋 이후에 2.5년이나 지난 인기있는 자바스크립트 웹 어플리케이션 프레임워크 Ember가 1.0을 출시하였습니다. Ember 1.0에서 2.0이 될때 까지 더 이상 큰 변화를 하지 않겠다고 약속했습니다. 1.0을 출시한 Ember의 모든팀을 축하 해주세요

Node Weekly 2호: 생성자, 비동기 패턴, 홈 오토메이션와 그 이상의 것들

Node Weekly를 지난주 뉴스레터에서 출시했습니다. Node Weekly 가 다루고 있는 분야를 확인 해보세요

스폰서기사

Frontend Masters: 이안 존슨(Ian Johnson)이 직접 진행하는 D3.js를 사용한 데이터 시각화 실시간 온라인 워크샵

이번 워크샵에서는 D3의 API를 살펴보고 D3 설계에서 쉽게 알아내기 힘든 부분에 대해 알아볼 것입니다. 표현해야 할 다양한 데이터에 적용할 수 있는 여러 가지 패턴을 살펴볼 예정입니다. 9월 20일 금요일 온라인 생방송을 기대하세요.

읽을 거리

AngularJS 지침서: 최신 웹 앱을 만드는 방법 배우기

AngularJS, Node, Express와 MongoDB를 사용해 완전한 애플리케이션을 만들기위한 대규모의 지침서/가이드

점진적인 향상: Zed는 죽었다

Tom은 "브라우저는 놀라운 인터랙티브 문서 뷰어가 되는것에서 세상에서 가장 진보되고, 널리 배포된 애플리케이션 런타임으로 변모하고 있다"고 언급합니다. 그리고 100% 자바스크립트 애플리케이션을 만드는데 부끄러워할 필요가 없다고 말합니다.

ECMAScript 6 초안 스펙 리비전 18

리비전 18은 리비전 17에 비해 새로운 기술적인 내용은 없지만 완전히 재구성되었습니다. ES6 스펙이 중요하다고 생각한다면, 이 문서에 익숙해지를 원하시겠죠.

ES6 반복자, 제네레이터, 그리고 Iterables

ES6의 반복과 관련된 개념에 대한 용어들에 대한 간단한 가이드문서입니다.

API를 위해 Express.js 사용하기

예제 앱과 함께, Express.js로 RESTful API를 만들고 문서화하기 위한 몇가지 팁과 라이브러리를 공유합니다.

Node.js에서의 ES6

최신 버전의 Node에서 다양한 ECMAScript 6와 Harmony 기능들을 사용하는 방법을 살펴봅니다.

Angular의 방식

Nicolas Bevacqua는 그의 웹 애플리케이션이 "Angular의 방식"으로 처리했을 때 더 개선되었다고 말하면서 AngularJS의 이점을 대부분 이용하는 팁들을 공유합니다.

자바스크립트의 변수와 함수 호이스팅

새로운 자바스크립트 개발자들에게 자바스크립트의 교묘한 점중 하나는, 변수와 함수가 "호이스팅"된다는 사실입니다. 초보자들을 위해 호이스팅이 어떻게 동작하는지 간단하게 살펴봅니다.

5가지 실질적인 예제로 AngularJS 배우기

자바스크립트의 감싸진 고차함수(Nested Higher-Order Functions)

자바스크립트 200줄로 만든 VNC

ES6 스타일 자바스크립트 LINQ

CoffeeScript는 미래가 있을까?

자바스크립트 디버깅에 대한 초보 개발자 가이드

동영상

Ember.js 애플리케이션 제작하기

Ember.js 1.0을 사용하여 블로그 리더 어플리케이션을 제작하는 과정을 담은 27여분의 영상입니다.

Bower에 대한 간단한 소개

자바스크립트 라이브러리들의 디펜던시 관리와 패키징을 해주는데 유명한 Bower의 간단한 소개입니다. Egghead.io 개발자 John이 3분의 짧은 영상에 담았습니다.

QUnit을 이용한 동기/비동기 자바스크립트 콜백 테스트 하기

자바스크립트 단위 테스트 프레임워크인 QUnit을 이용하여 자바스크립트 콜백 테스트를 하는 밥업에 대한 영상 입니다. 약 5분의 영상입니다.

코드, 라이브러리들과 도구들

jquery-textcomplete: Textarea를 위한 자동완성

GitHub의 코멘트 폼과 같이 textarea 필드에서 사용할 수 있는 자동완성 기술입니다.

스탠포드 자바스크립트 암호 라이브러리

자바스크립트에서 암호 작성시 안전하고 강력하며 빠르고 사용하기도 쉬운 크로스 브라우저 지원 라이브러리를 만드는 프로젝트입니다.

parse5: Node를 위한 빠르고 완전한 기능을 갖춘 HTML5 파서

WHATWG HTML5 스펙을 기반으로 하며, Node Weekly에도 소개되었습니다.

xdomain: 순수 자바스크립트를 이용한 CORS의 대안

Cleaver: 해커를 위한 30초 슬라이드쇼

마크다운으로 만드는 깔끔하고 빠르며 훌륭한 슬라이드덱입니다.

dna.js Template Cloner: jQuery를 위한 DOM 템플릿 엔진

JSON 객체 형식의 데이터에서 DOM 엘리먼트를 동적으로 만들어 주는 자바스크립트 템플릿 엔진입니다.

LeapTrainer.js: Leap Motion을 위한 제스쳐를 학습하고 인식시키는 프레임워크

Fortune.js: 리치 하이퍼미디어 API 프로토타이핑을 위한 웹 프레임워크

Histogram.js: 배열 정보의 빈도수 정렬

일자리

Backbase에서 근무할 시니어 프론트엔드 웹 개발자 @ 네덜란드, 암스테르담

Backbase는 암스테르담에 본사를 둔 국제적으로 빠르게 성장하고 있는 포털 소프트웨어 판매사입니다. 암스테르담의 팀에서 근무할 시니어 프론트엔드 웹 개발자를 찾고 있습니다. 자바스크립트, CSS, HTML5을 능숙하게 사용할 수 있나요? Backbase로 오세요.

소프트웨어 개발자 (자바스크립트 또는 자바) - 연구/개발직 @ 오스트리아 비엔나

젊고 여러 분야의 인력들로 구성된 팀에서 수상 경력이 있는 연구 프로젝트에 참여하세요. 풀타임/파트타임 근무 가능하며 시각적 분석, 웹 인텔리전스, 공동 지식 창출에 집중할 혁신적인 자바(스크립트) 개발자에 지원할 박사 과정 지원자를 찾습니다.

OrderGroove에서 근무할 자바스크립트 제다이 (프론트엔드 기술 리더) @ 뉴욕주, 뉴욕시

OrderGroove는 구독방식의 e커머스 혁명을 주도하고 있습니다. 우리는 애자일 팀으로 세계 최대의 브랜드를 판매하고 수백만 사용자의 삶을 변화시킬 우리의 구독 방식 소매 플랫폼을 만들 수 있는 '포스'를 지니고 있는 월드클래스의 JS 해커를 찾고 있습니다.

마지막으로,

무료 e북: 더 빠른 ASP.NET 애플리케이션의 25가지 비밀

여러분의 ASP.NET 애플리케이션의 속도를 개선하길 원하시나요? 개발 커뮤니티와 ASP.NET MVP로부터 여러분이 만든 웹 애플리케이션의 최대 성능을 이끌어낼 수 있는 25가지 팁을 추려 Red Gate사의 새로운 e북에 담았습니다. 무료 e북을 다운로드 하세요.

console.logtro: 세계 최초의 console.log 데모

자바스크립트 콘솔에서 실행되는 작은 컴퓨터 아트 스타일의 데모입니다.

[senxation]

JavaScript Weekly #145 - 20130830

원문 : [http://javascriptweekly.com/archive/145.html]

특집 기사

Ember.js 1.0 의 전망: 마침내 이번 주에 출시?

만약 당신이 Ember 의 팬이라면 다음주 JavaScript Weekly를 살펴 보세요. 마침내 Ember 1.0 이 릴리즈 됩니다. (8/31). 해당 포스트에서 Ember의 메인 개발자인 Tom Dale이 방대해진 1.0에 다가서기 위해 필요한 모든 것들을 공유합니다.

Yeoman 1.0 출시: 최신 WebApp들을 위한 워크플로우

yo 는 독립적인 스캐폴딩(개발의 기본이 되는 뼈대와 환경을 구축해주는 기술) 툴 입니다. 더 나은 generator 시스템, 성능 향상, 설치 과정의 자동화가 추가 되었습니다. 단지 yo 를 실행하는 것 만으로 새로운 도움말 프롬프트 시스템을 사용할 수 있습니다. (generator를 업데이트 하거나, 설치하거나, 도움말을 찾는 기능을 가집니다.) 예전 버전에 비하여 추가된 부분은 위 링크의 Hightlights를 보시면 됩니다. Addy Osmani가 5분 분량의 발표영상을 통해서 Yeoman의 미래에 대해 공유 합니다.

읽을 거리

ECMAScript 국제화 API

ECMAScript 국제화(Internationalization) API (ECMA-402)가 ECMAScript 5.1이나 그 이후버전에서 동작하도록 설계되었습니다. 이 API는 collation(문자열 비교), 숫자 포맷팅, 그리고 날짜와 시간 포맷팅 같은 로케일-특화 서비스를 제공합니다. 이 글은 해당 API에 대해 소개합니다.

자바스크립트에서 객체 보호하기

자바스크립트에서 객체가 어떻게 보호될 수 있는지에 대해 환기시킵니다. 총 3가지 수준의 보호단계가 있습니다. 확장을 방지하는 가장 약한 수준, 씰링(sealing)은 조금 강한 수준, 그리고 프리징(freezing)은 가장 강한 수준입니다.

문자열이 하위문자열을 포함하는지 확인하기

문자열이 하위문자열을 포함하는지 확인하기위해 String.prototype.indexOf()와 정규 표현식을 사용하는 방법을 설명합니다.

아웃라이닝(Outlining): JIT와 큰 함수를 위한 제2의 해결책

자바스크립트 엔진과 같은 JIT(Just In Time) 컴파일러는 동일한 크기로 조합된 짧은 함수보다 긴 함수를 컴파일하는데 더 많은 시간이 걸립니다. 이 블로그 글은 긴 함수를 쪼개어 컴파일시간을 줄이는 기법인 아웃라이닝(outlining) (인라이닝(inlining)의 반대)에 대해 설명합니다.

클라이언트측 의존성 관리: npm, Bower와 컴포넌트중에 선택하기

자바스크립트의 스코프와 컨텍스트에 대해 이해하기

Ryan Morr는 자바스크립트에서 스코프(지역 변수)와 컨텍스트(this)의 차이와, 그 차이가 왜 여러가지 공통 디자인 패턴에서 중요한지에 대해 설명합니다.

즉시 실행되는 함수 표현식(IIFE) 소개

블록 스코프지정을 시뮬레이션하기위해 공통 자바스크립트 패턴을 설명합니다.

ES6 제네레이터는 Go 스타일의 동시성을 제공합니다

David Nolen은 자바스크립트에서 Go 스타일의 동시성(커뮤니케이팅 시퀀셜 프로세스(Communicating Sequential Processes, CSP)에 기반한)을 제공하기위해 ECMAScript 6의 제네레이터를 사용하는 방법을 보여줍니다.

최신 웹 애플리케이션 디버그하기 Part 1

크롬의 개발자도구를 통해 루비온레일즈 웹 애플리케이션의 클라이언트측 코드를 디버깅하는 방법을 설명합니다. 총 3부중 1부에서는 크롬을 IDE로 사용하고 콘솔을 이용해 마크업과 CSS를 디버깅합니다.

커다란 Backbone 애플리케이션 만들기

웹 컴포넌트 자료들

Eric Bidel은 웹 컴포넌트에 대한 자료들에 대한 페이지를 만들었습니다.

아주 작은 테이블 정렬기 혹은 '자바스크립트로 LINQ를 작성할 수 있습니다’

기본 DOM 조작과 map()이나 sort()같은 배열 메서드를 사용해 HTML 테이블을 정렬하는 방법을 설명합니다.

주목할만한 React

Stoyan Stefanov는 페이스북의 UI라이브러리인 React에 대해 간략하게 소개합니다.

자바스크립트 개발자는 반드시 '진짜' 물건을 만들어야 하나?

자바스크립트를 하드웨어를 프로그래밍하는데 사용하는 최근의 경향에 대한 포괄적인 분석글

이미 존재하는 Backbone.js 프로젝트를 Require.js로 변환하기

Mocha 테스트를 Node의 표준 디버거로 디버깅하기

Yeoman, Grunt와 Bower로 AngularJS 개발 킥스타트하기

동영상

WDCNZ 2013 의 The Loading Point: 얼마나 작은 모듈들이 큰 차이를 만들어낼 수 있는지 (00:45)

Walter Rumsby는 WDCNZ 2013에서 모듈들로 개발하기 위한 YUI, RequireJS, Ext JS, Browserify의 최선의 실천사례와 테크닉에 대해 소개합니다.

WDCNZ 2013 의 Data Driven Delirious: D3.js를 사용한 데이터 시각화 소개 (00:31)

크롬 개발툴 Flame 차트로 자바스크립트 프로세싱 시간 시각화 (02:30)

코드, 라이브러리들과 도구들

jsPDF: 클라이언트측 PDF 생성 솔루션

즉각적인 문서 생성시 사용합니다(티켓, 보고서 등등...). IE6+, 파이어폭스 3+, 크롬, 사파리 3+, 오페라에서 동작합니다.

D3.js 3.3 릴리즈

크롬과 Node.js를 위한 자바스크립트 디버거 'Theseus(테세우스)'

"Theseus"는 Brackets 코드 에디터를 위한 자바스크립트 디버거로 크롬과 Node.js에서 실행되는 자바스크립트를 디버깅이 가능하게 해줍니다. 한 가지 흥미로운 기능은 모아진 디버그 정보를 에디터 내에서 이용 할 수 있다는 점입니다.

Sifter.js: 자동 완성 검색 라이브러리

속성 값을 이용해 배열과 해쉬로 구성된 정보 객체를 텍스트 검색하는 CommonJS 라이브러리입니다. Sifter는 자동완성 기능을 위해 설계되었고 데이터셋 테스트를 위한 커맨드 라인 인터페이스도 제공합니다.

Hopscotch: 웹 페이지 안의 내용 설명을 위한 프레임워크

Hopscotch는 JSON 객체로 투어 정보를 받습니다. 그리고 투어 진행과 화면을 관리할 수 있는 API를 제공합니다. 기능 : 투어 이벤트에 대한 콜백(onNext 등...)를 제공하고 여러 페이지에 걸쳐 사용 할 수 있으며 국제화 지원 등의 다양한 기능을 제공합니다.

웹페이지 내의 내용을 설명하기 위해 요소 사이를 이동하는 것을 'tour'라 칭함.

RequireBin: Node.js 모듈을 이용하여 브라우저 코드를 공유하기

Node.js 모듈을 사용하여 클라이언트측 코드를 공유하고 편집할 수 있는 웹앱니다. 코드는 browserify를 통해 변환되고 Gist에 저장됩니다.

mdn.io: MDN을 위한 간접적인(passive) URL 단축기

웹 서비스의 URL을 모질라 개발 네트워크 사이트로 한정하여 구글링 한 후 첫 번째 검색 결과로 이동시켜 줍니다. mdn.io/defineproperty와 같은 단축 URL 표시를 가능케 해줍니다.

원문의 'passive'라는 의미는 1:1 매칭의 URL 단축서비스가 아닌 url을 구글링하여 검색 결과를 통해 redirect 시켜주는 방식에 대한 의미로서 사용된 듯 합니다.

url-to-screenshot: PhantomJS를 이용하여 웹 페이지의 스크린샷을 캡쳐하기

XHook: XHR 요청과 응답을 가로채고 변경하기

Ajax 요청을 조작 할 수 있게 도와주는 XMLHttpRequest 패치입니다.

JsDebuggr: Sublime Text에서 자바스크립트 브레이크 포인트를 추가하고 제거하기

Backbone.Modal: modal 창을 간편하게 만들수 있게 도와주는 플러그인

wu.js: 자바스크립트에서 지연 함수 프로그래밍을 지원하는 라이브러리

이 라이브러리는 map()과 filter()등에 반복자(iterator)를 적용하여, 지연되어 처리되는('just-in-time') 일련의 요소를 만들 수 있게 해줍니다.

Antycs: 분석 이벤트 수집 관련 코드를 단순화하고 조직화 하기

Hammer.js: 멀티 터치 제스쳐 라이브러리

탭, 더블 탭, 스와이프, 드래그, 핀치 그리고 로테이트 제스쳐를 지원합니다. 각 제스쳐는 이벤트를 발생시킵니다.

Minivents: 아주 작은 자바스크립트 이벤트 라이브러리

Flipload: 로딩 중 화면을 보여주기 위해 HTML 엘리먼트를 뒷면으로 뒤집기

일자리

소프트웨어 엔지니어 @ Turn (실리콘 밸리)

Angular, Node, Bootstrap, Big data, machine learning, 분산 시스템. 여러분이 이런 기술에 관심을 갖고 있고 자바스크립트 실력이 좋다면 턴(Turn)의 프론트 엔드 애플리케이션 팀에서 같이 일하는 것에 대해 이야기를 나눠보고 싶습니다.

웹 디자이너 @ Booking.com (네덜란드 암스테르담)

세계 1위의 숙박 웹사이트인 Booking.com은 세계에서 가장 스마트한 디자이너를 찾고 있습니다. 웹의 무한한 잠재력과 환상적인 HTML & CSS를 만드는 일에 홀딱 빠져 있나요? 수백만명의 사람들에게 도움이 되는 중요하고 거대한 혁신을 직접 만들어보세요.

마지막으로,

더 간단한 배포 방법

레드 게이트(redgate)에서 만든 Deployment Manager 2를 사용하여 컴포넌트와 컴퓨터에 관계 없이 배포하세요. 하나의 프로세스에 SQL 서버 데이터베이스와 .NET 애플리케이션을 함께 제공하세요. 바로 지금 시작하세요.

[senxation]

JavaScript Weekly #144 - 20130823

원문 : [http://javascriptweekly.com/archive/144.html]

특집기사

Brendan Eich: 언어-중립적인 브라우저 VM을 향해

Brendan Eich는 자바스크립트의 부분집합으로 컴파일(Emscripten과 asm.js에 의해 실행)하여 웹에 언어 중립적인 가상 머신을 제공하는 접근방법을 설명합니다.

JS Bin 5주년 & 뉴스

JS Bin의 5번째 생일을 축하하여, Remy Sharp는 JS Bin 대회(상품이 걸린)에 대한 소식과 Pro 사용자 계정으로 수입을 얻어 앞으로는 풀타임으로 작업하게 될 것이라는 뉴스를 전했습니다.

Bootstrap 3 릴리즈: 모바일 우선 개발을 실천하는 인기있는 프론트엔드 프레임워크

읽을 거리

ExpressJS로 완전한 MVC 웹사이트 만들기

ExpressJS는 Node.js에 기반한 프레임워크입니다. 이 글은 ExpressJS를 사용해 MVC 구조를 가지는 서버사이드 애플리케이션을 어떻게 작성하는지 설명합니다.

ECMAScript 6 지원여부 추적

ECMAScript 6를 지금 사용하기 위해, 얼마나 많이 지원되고 있는지 (네이티브로) 추적하기 위한 자료들.

Array.prototype.some으로 검색하기

some() 은 편리한 forEach()* 메서드와 유사하게 동작합니다. 하지만 언제든지 반복을 종료할 수 있게 해줍니다.

Ractive.js 표현식과 반응하는 프로그래밍의 새로운 물결

Rich Harris는 반응하는 프로그래밍이 효과적인 자바스크립트를 작성하는데 어떻게 도움을 주는지와 Reactive.js 표현식이 어떻게 동작하는지에 대해 설명합니다.

Promises/A+: 구현을 통해 명세 이해하기

구현체를 작성하는 방법을 통해 Promises/A+ 명세를 설명합니다.

jQuery data() 함수 사용하기

Dan Wahlin는 DOM 노드에 데이터를 붙일 수 있게 해주는 jQuery의 data() 함수가 어떻게 동작하는지에 대해 설명합니다.

자바스크립트 + 다른 언어

Alon Zakai(Emscripten의 개발자이자, asm.js의 공동개발자)의 발표 슬라이드로 웹에 여러 언어를 통합하고 실행하는 접근방법에 대한 개요를 설명합니다.

Node 테스트에서 API 요청 가짜로 만들기(Mocking)

모든 브라우저에서 동작하는 Web Audio API 코드 작성하기

브라우저들의 Web Audio API 지원여부가 다양하지만, 크로스 브라우저 코드를 작성하기 쉽게 해주기 위해 인터페이스를 일반화하는 방법이 있습니다.

필터링된 Backbone.Collection 렌더링하기

자바스크립트 최선의 실천방안 (1부)

이 가이드문서는, 2부작 중 첫번째이고, Christian Heilmann의 슬라이드쇼에서 차용되었습니다.

숨겨진 클래스 vs. jsPerf

Vyacheslav Egorov(“Mr. Aleph”)는 V8의 숨겨진 클래스(hidden class)를 통해 생성자가 언제 최적화될 수 없는지를 설명합니다.

자바스크립트 콜백은 꽤 괜찮다

콜백을 통한 비동기 프로그래밍이 항상 추하지는 않다고 주장합니다.

완전 초보자를 위한 Node.js 가이드

ECMAScript 6의 Destructuring Assignment

Ember 애플리케이션 테스트하기: 통합과 단위 테스트

200줄로 자바스크립트 입자 시스템 만들기

vanilla 자바스크립트와 Canvas를 사용해 다수의 방사체와 전자기장를 가져 수천 개의 입자를 끌어당기거나 밀어내는 유동적인 입자 시스템을 만드는 방법을 설명합니다.

크롬으로 머리가 없는 Selenium 실행하기

구글 크롬에서 자동화된 테스트를 실행하기위해 Selenium을 머리가 없는(headless) 모드로 사용하는 방법을 설명합니다. 결론부에 이 설정을 위한 사용 예제를 보여줍니다.

Firefox OS 앱을 프로토타이핑하기 위해 JSFiddle 사용하기

동영상

Nicholas Zakas: 자바스크립트는 이미 충분하다

Nicholas Zakas는 웹 애플리케이션에 필요한 자바스크립트의 실행 시간과 크기를 최소화하는 방법을 설명합니다. 슬라이드도 있습니다.

더 나은 자바스크립트를 작성하기 위한 Angus Croll의 세가지 팁

Scott Hanselman이 말하는 마이크로소프트의 자바스크립트 전략

구글 클라우드 저장소: 자바스크립트 예제 애플리케이션과 함께 시작하기

코드와 라이브러리들과 도구들

Brick: 모던 웹 앱을 위한 UI 컴포넌트

Web Components 표준을 준수하고 x-tags 라이브러리로 구현된 모질라의 UI 컴포넌트.

SimpleSlideView: 가장 단순한 슬라이딩 뷰 플러그인

더 큰 장치에서도 보기좋게 적용되는 휴대전화스타일의 메뉴로, jQuery와 Zepto에 적용되는 플러그인입니다.

FlowType.JS: 반응형 웹 타이포그래피 (엘리먼트 너비에 따른 글자크기와 행높이)

HTML기반 슬라이드에서 잘 동작하는 것을 볼 수 있습니다.

Mr. Data Converter: 엑셀 데이터를 웹친화적인 형식으로 변환

엑셀 데이터를 HTML, JSON과 XML같은 웹친화적인 몇가지 형식중 하나로 변환해줍니다. 특히 빠르게 JSON 데이터로 변환하는데 편리합니다.

app.js: ECMAScript 6로 작성된 TodoMVC

Addy Osmani와 다른 개발자들이 작성한 이 데모 앱은 ECMAScript 6 코드에 대한 좋은 인상을 줍니다. ECMAScript 5 버전의 코드도 함께 제공합니다.

NProgress: 자바스크립트로 만든 얇은 가로형 페이지-상단 진행막대

AngularJS 웹캠 지시어

웹캠의 상태를 라이브로 페이지에 표여주고 스냅샷을 찍을수 있게 해주는 AngularJS 지시어(directive). WebRTC API에 기반하여, 현재 Firefox와 크롬에서 동작합니다.

Medium.js: 'contenteditable'을 아름답게 만들어주는 라이브러리 (Medium.com의 에디터처럼)

일자리

프론트엔드 개발자 @ Booking.com (네덜랜드 암스테르담)

수 백만명의 고객들이 사용하는 최고의 숙박시설 웹사이트를 만드는데 흥미가 있나요? HTML/CSS/JS에 탄탄한 경험을 가지고 있나요? Booking.com은 경험많은 프론트엔드 개발자를 찾고 있습니다. 우리에 대해서 더 알고 싶다면 비디오를 참고해 주세요.

프론트엔드 웹 개발자 @ Discogs.com (오리건주 포틀랜드)

음악을 사랑하나요? 가장 방대한 음악 정보 데이터베이스와 1,300만에 가까운 아이템 판매 시장을 가진 Discogs에서 음악을 사랑하는 프론트엔드 개발자를 구하고 있습니다. 우리는 모든 팀 멤버가 영향력을 떨칠 기회가 있는 작고 창조적인 회사입니다.

마지막으로,

프로페셔널 웹 개발자가 되는 방법 배우기

우리는 프로페셔널 개발자가 사용하는 툴과 프로세스와 방법을 가르칩니다. 모든 내용들은 온라인을 통해 강사에게 배우며 뜻이 비슷한 학생집단과 함께합니다. TDD와 이커머스 통합과 같은 고급 주제를 통해 경험을 쌓습니다. 프로 개발자와 같이 코딩하고 제품을 실행해보며 실력을 향상시킵니다. 경력 전환 중이든 사업을 시작하는 중이든 당신은 색다른 경험을 하게 될 것입니다.

[senxation]

JavaScript Weekly #143 - 20130816

원문 : [http://javascriptweekly.com/archive/143.html]

특집 기사

BackboneConf 2013 동영상이 온라인으로 제공됩니다

BackBoneConf 2013 (7월 31일부터 8월 1일까지 보스톤, 메사추세츠)의 14개 연설 동영상이 온라인으로 제공되고 있습니다. Jeremy Ashkenas의 키노트, Pamela Fox의 "jQuery 위젯을 넘어서: JS UI 라이브러리 설계", Ben Vinegar의 "Disqus에서 사용한 Backbone: 포스트모텀" 등을 제공합니다.

Node.js 프로그래밍의 미래

Node.js의 수문장 Isaac Schlueter의 말을 인용하면 이렇습니다. "최근까지 있어온 Node.js의 코어 API 패턴에 대한 수 많은 논쟁과 이론, 그리고 요청이 이 목록에 정리되어 있습니다. 이런 요점에 대한 Node.js 프로젝트의 실제 계획을 명확히하고 싶습니다."

js13kGames HTML5 게임 개발 대회 시작

Js13kGames는 HTML5 게임 개발자를 위한 자바스크립트 코딩 대회입니다. 현재 진행중이며 9월 13일에 종료됩니다. 다양한 상품이 걸려있으니 참여하세요.

스폰서기사

프론트엔드 마스터즈: 라이브 무료 강의 - 자바스크립트 오류 처리와 Node.JS 훓어보기

좋아하는 음료수를 하나 사들고서 이번 주 일요일 저녁(8월 18일)에 있을 온라인 강의에 참석하세요. 두 명의 훌륭한 연사가 자바스크립트 오류 처리와 Node.JS에 대해 강연합니다. 이번주 일요일 6:00PM - 6:30PM CST에 라이브에 참석하세요… 완전히 무료입니다.

읽을 거리

ECMAScript 6와 함께 최신 웹 앱을 향해

Ariya Hidayat이 ECMAScript 6 (ES6)의 개요에 대해 설명합니다. 이번 주 ES6에 대한 더 많은 자료들: Axel Rauschmayer의 “ECMAScript 6에서 호출가능한 엔티티들”, Jeff Walden의 “Firefox Aurora:2진, 8진 숫자지원”.

자바스크립트가 엔터프라이즈의 지배적인 프로그래밍 언어가 될 이유

3가지 요인들에 대해 고려합니다. "유동성 & 클라이언트측 개발", "클라우드 & 서버측 개발", 그리고 "리소스 & 스킬 셋".

관점 지향 프로그래밍(AOP) 소개

AOP는 큰 변화 없이 함수와 메서드에 동작방식을 추가하는 기법입니다. 이 블로그 포스트는 AOP가 어떻게 동작하는지 설명하고 대체제들의 접근방법(상속을 사용하는것 같은)과 비교합니다.

HTML에서 애니메이션 적용방법 소개

Krasimir Tsonev는 HTML에서 자바스크립트, CSS와 Animate.CSS 라이브러리를 포함한, 애니메이션을 구현하기 위한 여러가지 기법들을 자세하게 다룹니다.

자바스크립트 웹 앱의 “개발 문제점”

클라이언트측 자바스크립트는 흔히 서버측 개발을 선호하는 사람들에게 비판을 받곤 합니다. 이 글은 이런 몇가지 비판들에 대한 대답을 보여줍니다.

Web Audio API를 사용한 자바스크립트의 커스텀 오디오 효과

WebGL로 절차적 도시를 100라인으로 구현하는 방법

filter와 map을 reduce로 줄이기

Elijah Manor는 배열의 메서드 reduce()를 사용하여 배열에 filter()와 map()를 적용하는 것과 동일하게 구현하는 방법을 설명합니다.

Boris Smus의 'Web Audio API'

온라인으로 무료로 읽을 수 있습니다.

반응하는(reactive) 자바스크립트

반응하는 프로그래밍은 데이터의 흐름과 변화의 전파에 기반한 프로그래밍 패러다임입니다. 이 글은 이에 대해 간단하게 설명하고 자바스크립트 라이브러리를 통해 어떻게 프로그래밍하는지 설명합니다.

Polymer에서 통신하고 메시지 전달하기

Eric Bidelman이 구글의 Polymer 프레임워크에서 DOM 엘리먼트 간에 정보를 전달하는 몇가지 기법에 대한 개요에 대해 설명합니다. 이 기법들의 대부분은 Polymer에 국한된 것이 아니라, 엘리먼트간에 서로 상호작용하기위한 표준 방법들입니다.

Angular 앱을 단위 테스트하는 방법

애드온과 플러그인을 비-AMD 라이브러리에 주입하기위해 RequireJS 사용하기

수시 배포: Apache Cordova가 어떻게 그리고 왜 PhoneGap이 되는지

동영상

Ilya Grigorik와 함께하는 웹 성능 뽀개기 코스

4편의 동영상으로, 총합 거의 3시간 정도의 분량입니다. 네트워크 병목과 문서 파싱과 평가 파이프라인, 비주얼 레이아웃, 자바스크립트 등을 다룹니다.

새로운 장르를 위한 논쟁: "자바스크립트 저널리즘"

사진에 능숙한 사람들 때문에 사진보도는 저널리즘의 새로운 영역이 되었습니다. 워싱턴 포스트의 Ray Daly는 자바스크립트에 능숙해지는 것 또한 새로운 영역을 만들어 낼 것이라고 주장합니다.

이 글도 함께 읽어보시면 좋습니다 'Snowfall'하다 - 온라인 저널리즘의 미래를 쓰다

파이어폭스 OS를 위한 앱을 만드는 방법

파이어폭스 OS 앱을 배포하는 방법과, 테스트 작성법, Gaia의 빌딩 블록 사용법 등을 설명합니다. 16분짜리 스크린캐스트를 포함합니다.

코드와 라이브러리들

Ember 1.0 RC7 릴리즈

AngularJS 1.2.0-rc1: spooky-giraffe

Tessel: 자바스크립트로 프로그래밍가능한 인터넷에 연결된 마이크로컨트롤러

USB선을 연결하거나 와이파이를 통해 원격으로 자바스크립트 코드를 배치할 수 있습니다. 이 장치는 npm 패키지를 지원하여, HTTP와 웹 서버, 트위터 등을 지원할 수 있게 해줍니다.

Steps: 자바스크립트 코드 Step Through JavaScript Code

자바스크립트 코드를 각각의 표현식 다음에 yield하는 제네레이터로 재작성합니다. 결과는 비교적 간단한 가상 머신에서 실행되어지고, 실행과정을 관찰할 수 있습니다. 사용 예: 강의. 파이어폭스의 (비-ES6) 제네레이터에 의존하지만, ES6 제네레이터로도 포팅되었습니다. (Chrome Canary에서 지원합니다)

HTML(.js) – DOM과 친구가 되다!

참신한 API 디자인을 가지는 DOM 탐색과 조작을 위한 라이브러리입니다. F.A.Q.에 "DOM을 확장하는 것은 좋은 아이디어가 아니지 않나요?"라는 중요한 질문에 대한 해답이 있습니다.

웹에서의 초음파 네트워킹

Boris Smus는 sonicnet.js라는 라이브러리를 만들었습니다. 이 라이브러리는 2개의 장치간에 오디오(웹 오디오 API)를 사용해 데이터를 전송합니다.

botdylan: 자바스크립트를 통한 자동 Github 프로세스

SourceMaps의 간단한 시각화

색상-코드가 원본 소스와 생성된 자바스크립트가 어떻게 연관되어있는지 보여줍니다. 데모를 통해 어떻게 동작하는지 볼 수 있습니다.

node-validator: 자바스크립트 문자열 유효성검사와 처리

jquery-tiny-pubsub: jQuery를 위한 아주 작은 pub/sub 구현

Harp: 내장 전처리를 지원하는 웹서버

Harp 서버는 Jade, Markdown, EJS, CoffeeScript, LESS와 Stylus를 HTML, CSS와 자바스크립트로 제공합니다. 아무런 설정이 필요없습니다. 부가적으로 개발을위해 사용되거나 다양한 플랫폼(Heroku, GitHub, Amazon S3, PhoneGap Build, 등)에 배치하는데 도움을 줍니다.

Plasmid: 멀티-디바이스 동기화를 지원하는 브라우저 저장소

jQuery Tag-It: 자동완성을 지원하는 태그 편집 위젯

Ground 자바스크립트 프레임워크

Ground는 TypeScript와 Node.js (서버측 기능)에 기반합니다. 기능: URL 라우팅, 클라이언트와 서버에서 사용되는 모델, 데이터 바인딩, 클라이언트-서버 동기화, 오프라인 지원, 등.

일자리

시니어 자바스크립트 개발자 @ Uber

Uber는 자바스크립트에 정열적인 시니어 엔지니어를 찾고 있습니다. backbone을 잘 다루나요? node를 꿈꾸나요? 팀에 합류하여 어려운 문제해결을 도와주세요. 우리 회사는 40개의 도시에 위치하고 전세계로 이동하고 있습니다.

자바스크립트 개발자 @ Avid Life Media (토론토, 캐나다)

JS에 흥미가 많으신가요? 영국의 우스갯소리처럼 DRY(Don't Repeat Yourself)하게 코드를 작성하는 것을 좋아하시나요? 우리 회사의 모바일 팀은 단일페이지 앱을 만드는 경험을 가진 또 다른 열정적인 JS 개발자가 합류하기를 기다리고 있습니다. 자세한 내용은 업무 설명을 참고하세요.

시니어 또는 주니어 엔지니어 @ View The Space (뉴욕, 뉴욕주)

마지막으로,

DreamFactory - 자바스크립트 개발자를 위한 오픈소스

DreamFactory 플랫폼은 어떤 클라우드에서도 동작합니다. REST API와 SQL 데이터, NoSQL 데이터, BLOB 저장소, 인증, 사용자 관리, 그리고 외부 API 접근을 위한 서비스들을 제공합니다. 웹사이트에 가입해 AngularJS와 jQuery, 그리고 Sencha Touch를 위한 예제를 살펴보세요.

[senxation]

20130821 광화문 on Flickr.

[senxation]

20130803 last shower of the longest monsoon on Flickr.

[senxation]

20130803 passing cloud on Flickr.

[senxation]

JavaScript Weekly #142 - 20130809

원문 : [http://javascriptweekly.com/archive/142.html]

특집 기사

jQuery Boilerplate: jQuery 플러그인 개발에 시동걸어주기

정확히 2년 전에 39호에서 처음 언급한 jQuery Boilerplate 사이트가 새로 디자인되었습니다. boilerplate 코드는 계속해서 업데이트되어왔고, 즐겨볼만한 새로운 유용한 자료들이 있습니다.

Node.js 개발자를 위한 MongoDB 온라인 코스

MongoDB 개발자들인 10gen은 8월 12일부터 시작하는 무료 온라인 코스를 운영하고 있습니다. 지금 바로 등록할 수 있습니다.

많은 개발자들이 (제대로) 사용하지 않고 있는 7가지 자바스크립트 기본

String.prototype.replace 와 /g와 /i 플래그. 그리고 유사배열 객체를 복사하기 위한 Array.prototype.slice 등등을 다룹니다.

HTML로 제공되는 최신 ECMAScript 6 명세서 초안

읽을 거리

Polymer 엘리먼트와 AngularJS 디렉티브의 차이점은 무엇인가?

스택 오버플로우에 올라온 질문으로, Polymer 팀원인 Eric Bidelman의 자세한 답변을 볼 수 있습니다.

왜 Angular.js(와 Ember.js)가 최고인가?

Jesus Rodriguez가 작성한 “왜 Angular.js가 최고인가?”라는 글은 Angular.js 프레임워크에 대해 둘러 보았습니다. Kerrick Long이 작성한 응답글은 Ember.js를 위한 동일한 목적의 글입니다.

모바일 웹 성능에 대한 5가지 신화

웹 앱 성능 문제를 분석하는 상세한 기사로 자바스크립트는 보통 성능 병목이 아니며, 모바일 웹 브라우저는 여전히 최적화를 위한 공간이 남아있고, 가비지 컬렉션이 꼭 문제가 되는 것은 아니라는 등의 내용을 포함합니다.

인터뷰: Yehuda Katz

인용구: “지난 10년 동안 두가지 가장 영향력있는 웹 프레임워크 [jQuery and Ember.js]의 코어 팀 멤버가 되는 것 말고도, Yehuda Katz는 또 다른 자랑할만한 이유를 가지고 있습니다. 그는 GitHub의 4번째 사용자였습니다."

HTML, CSS, 자바스크립트로 하는 윈도우즈 스토어 앱 개발 미리보기 (두번째 에디션)

PDF 직접 다운로드 (첫번째 미리보기는 PDF로만 제공되지만, 마지막 릴리즈는 다른 형식으로도 제공될 것입니다.)

당신의 타임존은 어디입니까?

날짜를 저장하고 표시하기 위한 팁을 제공합니다. 날짜를 GMT로 저장하고 장치별 타임존 설정을 사용하여 자바스크립트를 통해 날짜를 표시합니다.

Backbone.js 팁과 패턴

자바스크립트 Promise

jQuery와 AngularJS에서 구현한 방법을 통해 Promise 디자인 패턴(비동기 프로그래밍을 위한)을 소개합니다.

Ember.js 라우팅: 언제 그리고 왜 감싸기를 써야하는가

몇가지 AngularJS의 함정

깜빡거리는 UI, jQuery 대 jqLite, 압축 등등을 다룹니다.

AngularJS로 애니메이션 적용하기

Holly Schinsky는 예제 앱을 통해 AngularJS의 내장 CSS3 트랜지션과 애니메이션 지원을 어떻게 사용하는지를 보여줍니다.

아마존 앱 스토어가 웹 앱을 받아들이다

아마존의 자바스크립트 API를 통해 앱내 구매를 구현할 수 있습니다. 자세한 내용은 CNET 뉴스와 ZDNet을 참고하세요.

자바스크립트 메타 스타일 가이드

검색가능한 Ember.js 문서

자바스크립트 암호화 방어하기

JSCover로 자바스크립트 테스트 커버리지 조사하기

JSHint: npm과 더 잘 통합하기

여러분은 이제 JSHint 옵션을 package.json 파일에 넣을 수 있습니다.

Ember.js로 앱 만들기 (a Postmortem)

소개와 모범 사례

웹 워커 패턴

키네틱 스크롤링 (in vanilla JavaScript): 1부

Bower로 하는 클라이언트측 의존성 관리 (소개)

Promises: 소개와 관련자료

동영상

Grunt와 Bower를 Polymer와 함께 사용하는 방법에 대한 Addy Osmani의 9분간의 자세한 설명

코드와 라이브러리들

scaleApp: 단일 페이지 앱을 위한 아주 작은 프레임워크

scaleApp은 Nicholas Zakas의 이야기 "확장가능한 자바스크립트 애플리케이션 아키텍쳐"에 영감을 받은 디커플된, 이벤트기반 아키텍쳐를 가집니다. 플러그인(DOM 조작, MVC, 다국어지원, 등)은 조그마한 코어를 확장합니다.

Cal-HeatMap: 시간 연속 데이터를 위한 달력 히트맵 위젯

D3.js 시각화 라이브러리에 의존합니다.

TodoMVC 1.2

Addy Osmani의 TodoMVC 프로젝트의 새로운 릴리즈로, 이제 TasteJS의 산하에 있습니다. 주요 내역: Bower 통합; 추가적인 프레임워크를 위한 예제 (Polymer, Enyo, vanilla JavaScript, 등.)와 프레임워크를 배우기 위한 리소스를 보여주는 "정보 막대"

차트와 그래프를 만들기 위한 11가지 자바스크립트 툴킷

Conditioner.js: 동작을 실행환경의 상태에 기반해 로딩하거나 언로딩하기 위한 라이브러리

RequireJS와 AMD 모듈에 기반합니다.

Winston: Node.js를 위한 다중-전송 비동기 로깅 라이브러리

JointJS: 자바스크립트 다이어그램 라이브러리

JointJS는 스태틱 다이어그램을 만드는데 사용할 수도 있고 완전히 인터렉티브한 다이어그램 툴이며 애플리케이션 빌더입니다. jQuery, Underscore, Backbone과 SVG에 기반합니다.

Chartbuilder와 Gneisschart: 간단하고 아름다운 차트를 쉽게 만들기

D3.js기반 프론트엔드 차트 애플리케이션으로 Chartbuilder는 사용자와 export 인터페이스이고 Gneisschart는 차트 프레임워크입니다. Chartbuilder는 구글 스프레드시트나 데이터 분석툴을 대체하지는 않습니다. 대신에, 차트를 만드는 마지막단계로 데이터를 붙여넣거나 미리 지정된 스타일을 적용하여 SVG나 PNG파일형식으로 export합니다.

Init.js: 풀 스택 자바스크립트를 왜, 어떻게 해야하는지에 대한 가이드

새로운 프로젝트를 위한 템플릿으로, Backbone, Marionette, Node.js, Express, MongoDB와 몇가지 도구(Grunt, Mocha 등)에 기반합니다.

Arachnid: 클라이언트사이드 앱을 검색 엔진에 인덱싱되게 하기

Arachnid는 PhantomJS기반 서버앱으로 동적으로 조립된 웹페이지를 정적인 HTML로 변환합니다. 검색 봇이 이곳으로 리바이렉트되도록 여러분의 앱을 변경하기만하면 됩니다.

dblite: gyp 문제 없는 Node.js를 위한 SQLite

node-gyp를 통해 설치할 필요없이 SQLite를 Node.js에서 사용할 수 있게 해줍니다.

일자리

시니어 또는 주니어 엔지니어 @ View The Space (뉴욕, NY)

View The Space는 빠르게 성장하고 있는 스타트업으로 상업적인 부동산 브로커를 위한 임대 플랫폼을 만들고 있으며 당신의 도움이 필요합니다. 이상적인 후보로 자바스크립트와, Rails, iOS, TDD 또는 이 모든것에 대한 경험을 갖고 있으면 좋습니다.

시니어 자바스크립트/HTML5 개발자 @ Appsmakerstore

15만명 이상의 전세계 사용자가 모바일 앱을 만들기위해 우리의 플랫폼을 사용하고 있고, 우리는 백엔드 Ruby 개발자를 도와줄 자격이 있는 시니어 자바스크립트/HTML5 개발자를 한명 더 찾고 있습니다. 자세한 정보는, 이메일 [email protected]로 연락 바랍니다.

마지막으로,

DreamFactory - 자바스크립트를 위한 오픈 소스 REST & JSON 서비스

DreamFactory플랫폼은 어떤 클라우드에서도 동작합니다. REST API와 SQL 데이터, NoSQL 데이터, BLOB 스토리지, 인증, 사용자 관리, 그리고 외부 API접근 서비스를 제공합니다. 웹사이트에 가입하고 AngularJS, jQuery 그리고 Sencah Touch를 위한 예제를 살펴보세요.

Nodechecker: 노드 모듈을 24/7으로 테스트하기

모든 npm 패키지를 반복하여 테스트를 실행하는 웹서비스입니다. 현재까지는, 얼마나 성공하고 실패했는지를 보여주는 파이차트를 포함합니다.

[senxation]

JavaScript Weekly #141 - 20130802

원문 : [http://javascriptweekly.com/archive/141.html]

특집 기사

JSConf US 2013 동영상 8편 공개

Raquel Vèlez의 “AI.js: 인공지능을 가진 로봇!”, Angelina Fabbro의 “자바스크립트 마스터클래스” 그리고 Remy Sharp의 “실험적인 최신 기술에서 배울점들” 같은 이야기들을 포함합니다.

Node를 사용해 커맨드라인 유틸리티 작성하기

Jonathan Fielding이 Node를 사용해 커맨드라인 유틸리티를 직접 만드는 과정을 단계별로 보여줍니다.

ECMAScript 6 모듈: 지금이 바로 그 미래다

ECMAScript 6(자바스크립트의 다음 버전)에서 모듈이 어떻게 동작하는지 설명하고, 지금 바로 사용할 수 있는 도구들에 대해 설명합니다.

이벤트

ng-conf 2014: 세계에서 처음으로 열리는 Angular 컨퍼런스

2014년 1월 16일부터 17일까지 유타주의 솔트레이크 시티(Salt Lake City, Utah)에서 열립니다. 현재는 참석이나 발표에 관심이 있는 사람들의 이메일 주소만 받고 있습니다.

jQuery 컨퍼런스 오스틴(Austin): 2013년 9월 10일–11일 - Austin, TX

컨퍼런스 전 9월 9일에 Bocoup이 교육도 실시합니다. Bocoup은 JavaScript Weekly 독자들에게 50달러 할인 티켓을 제공한다. 코드 JSWKLY50 를 사용하면 됩니다.

영국 Node 컨퍼런스 – 런던, 2013년 8월 8일

읽을 거리

Three.js와 WebGL로 3D 게임 만들기

Nikhil Suresh는 인기있는 Three.js 라이브러리를 통해 WebGL을 사용하여 브라우저에서 3D 장면을 만들어내는 실용적인 예제를 소개합니다. 그리고나서 간단한 방망이와 공을 이용한 게임플레이를 추가합니다.

프론트엔드 의존성 체크인하기

패키지 매니저로 설치된 의존성들을 소스 컨트롤에 추가해야만 할까요? Addy Osmani가 작성한 이 글은 Bower를 위한 의존성 체크인에 대한 선택사항들을 훓어봅니다.

자바스크립트로 하는 포토샵 스크립팅 소개

프로파일을 통한(Profile-Guided) 자바스크립트 최적화

Profile-guided 최적화(PGO)는 컴파일러가 최선의 프로그램 컴파일방법을 결정하기 위해 대표 입력값으로 테스트 실행하는 기법입니다. 이 블로그 포스트는 직접 자바스크립트 코드를 최적화할때 이 기법을 사용하는 방법을 보여줍니다.

jQuery와 Promin으로 다단계 입력양식 만들기

Tim Severien은 jQuery Promin 플러그인으로 사용자 친화적인 다단계 입력양식을 쉽게 만드는 방법을 설명합니다.

AngularJS로 ui-router를 사용하는 기본방법

URL 라우터는 웹 애플리케이션의 URL을 사용자 인터페이스의 상태와 동기화하여 유지시켜줍니다. 이 블로그 포스트는 AngularJS를 위한 새로운 URL 라우터에 대해 설명합니다.

Shadow DOM 사용하기

사용자정의 위젯을 위한 현재 진행중인 HTML5 표준이자, Web Components의 구성 요소중 하나인, Shadow DOM에 대한 소개서

AngularJS의 지원을 받는 SVGs

간단한 차트를 만들기위해, 완전한 SVG 라이브러리가 필요하지는 않습니다. AngularJS의 내장 기능으로도 충분할 수 있습니다.

AngularJS 모범 사례

표준 프로젝트 디렉토리 구조를 유지하고, 의존성 주입(dependency injection)등을 사용하세요.

Ember.js의 모든 것을 파악할 수 있게 해줄 11가지 자료들

PhantomJS 웹서버 사용하기

PhantomJS로, (GUI가 없는)진짜 웹브라우저가 (자바스크립트를 포함한)페이지를 평가하게 만들 수 있습니다. 이 기사는 페이지를 평가하고 클라이언트에 그 결과, 예를 들면, 동적인 웹페이지의 최종 HTML, 스크린샷, 등등을 서빙하는 PhantomJS기반 웹 애플리케이션을 만드는 방법을 보여줍니다. 이렇게 만든 웹 애플리케이션은 간단하게 Heroku에 배포할 수 있습니다.

Backbone 앱을 만들기 위한 가이드 @ Coursera

Coursera가 Backbone을 사용하는 모범 사례

OOP가 만능은 아니다

John Hann은 (기본적인) 객체-지향 프로그래밍(OOP)가 항상 최선의 해결책은 아니라는 점을 설명하고 두 가지 대안, 즉 이벤트와 관점-지향 프로그래밍 (AOP)에 대해 살펴봅니다.

Handlebars.js: 내부동작 살펴보기

60분만에 배우는 AngularJS [PDF]

Dan Wahlin이 자신의 발표자료를 PDF 파일로도 변환하였습니다.

Chris Williams와의 인터뷰

Rey Bango는 Chris Williams(JSConf의 설립자이자 운영자)와 JSConf의 역사와 목표부터 로보틱스까지의 주제에 대해 인터뷰를 진행했습니다.

jQuery를 사용해왔다면, 어떻게 "AngularJS의 방식으로 생각"할 수 있을까?

동영상

튜토리얼: TypeScript로 네이티브 윈도우즈 8.1 앱 작성하기

AngularJS, Bootstrap과 BankersBox를 사용합니다.

7분만에 배우는 Jasmine을 이용한 자바스크립트 테스팅

코드와 라이브러리들

jspm: 쉬운 브라우저 패키지 관리

JSPM은 두 가지 요소로 구성됩니다. 첫 번째, JSPM 로더를 통해 세 가지 모듈 형식(ECMAScript 6 모듈, AMD, CommonJS)을 로드할 수 있습니다. 두 번째, JSPM CDN을 이용하여 GitHub에 있는 npm 패키지와 모듈을 로컬에 설치하지 않고도 로드할 수 있습니다.

자바스크립트를 위한 NoFlo 비주얼 개발 환경

JavaScript Weekly의 지난 87번째 이슈에서 노드를 지원하는 흐름 기반의 프로그래밍도구인 NoFlo를 소개했습니다. NoFlo는 계속 발전하고 있습니다. 흐름 기반 프로그래밍 도구는 애플리케이션의 로직을 시각적인 그래프로 설계하는 방법입니다. 개발팀은 전체 기능을 갖춘 비주얼 개발 환경을 만들고자 킥스타터를 통해 돈을 모으고 있습니다. (그들의 자세한 전망은 여기서 확인) 그들이 원하는 목표를 달성한다면 Objective C와 Java에 대한 지원도 추가될 것입니다.

throat: Promise-Returning 함수의 개수를 제한합니다

동시에 실행되는 promise-returning 함수의 개수를 관리합니다.

Grunt-Notify: Grunt 작업이 실패했을 때 자동 알림

JSHint와 같은 grunt 작업이 실패했는지, 실패했다면 그 이유를 확인하기 위해 명령어 입력줄로 계속 되돌아 가는 일에 지쳤나요? grunt-notify를 Gruntfile에 추가하면 자동으로 알림을 받을 수 있습니다. OS X, 윈도, 리눅스에서 동작합니다.

Overload: 자바스크립트 함수를 오버로드하는 간단한 방법

다중 디스패치를 수행하는 라이브러리: 어떤 (제네릭) 함수가 호출될 때 인수의 숫자나 종류에 따라 다양한 구현 내용 중 하나를 실행시킬 수 있습니다.

Handlebars-Helpers: 100개 이상의 다양한 핸들바 헬퍼 라이브러리

Alert: 브라우저에서 경고음 내기

Table-to-JSON: HTML 테이블을 JavaScript 객체로 변환해주는 jQuery 플러그인

Bindr: 작은 크기의 자바스크립트 의존성 주입 프레임워크

Transit: jQuery와 함께 사용할 수 있는 부드러운 CSS 트랜지션과 트랜스포메이션

iCheck: jQuery와 Zepto에서 사용할 수 있으며 입맛에 맞게 수정할 수 있는 체크박스와 라디오 버튼

일자리

시니어 Javascript Engineer @ Spotify 뉴욕

뉴욕에 있는 팀과 함께 일할 능력이 뛰어난 시니어 자바스크립트 엔지니어를 찾고 있습니다. 자바스크립트로 리치 앱을 만들 수 있는 전문 지식을 가지고 있으며 HTML5, CSS3와 같은 웹 기술을 사랑하는 사람은 바로 지원하기 바랍니다.

YouNeedABudget.com에서 자바스크립트 개발자를 구합니다. (재택 근무)

"You Need a Budget" (YNAB)라는 개인 재정 소프트웨어를 만들고 있습니다. 그리고 웹으로 서비스를 확장할 것입니다. 작지만 열정적인 우리의 팀과 협업하여 당신의 경력에서 최고의 앱을 만들어보기 바랍니다. (근무 위치와 관계 없이 재택 근무 가능합니다.)

네덜란드 암스테르담의 Booking.com에서 근무할 프론트 엔드 개발자

수백만명의 고객이 이용하는 숙박 웹사이트를 만드는 일에 대한 흥미가 있나요? HTML/CSS/JS로 개발한 많은 경험이 있으신가요? Booking.com에서는 능숙한 프론트 엔드 개발자를 찾고 있습니다. Booking.com에 대한 자세한 정보를 이 비디오에서 확인하세요.

JavaScript Weekly에 구인 광고를 올리세요

마지막으로,

배포 프로세스를 자동화 하세요

Red Gate의 배포 관리자를 사용하여 빠르고 반복적인 배포를 손쉽게 진행하세요. .NET 앱, 서비스, 데이터베이스를 한 번의 과정으로 전송하고 공유 대시보드에서 여러분 환경의 상태를 확인하고 한 곳에서 모든 배포를 관리하세요. 지금 바로 시작하세요.

[senxation]

JavaScript Weekly #140 - 20130726

원문 : [http://javascriptweekly.com/archive/140.html]

특집 기사

Bower 1.0.0 릴리즈

트위터의 자바스크립트 기반 웹 패키지 매니저인 Bower가 1.0버전이 되었다. 더 깔끔한 아키텍쳐와 더 빠르고 좋은 충돌 해결 전략, 버그수정등에 주목할만하다. 별도 문서에서 재작성된 코드의 개선사항을 상세하게 설명한다.

객체 놀이터: 객체-지향 자바스크립트 완벽 가이드

잘 제작된 27분짜리 스크린캐스트로 자바스크립트의 객체지향에 관련된 다양한 사항들을 다룬다. 또한 자바스크립트 객체 관계를 실험하고 시각화하는 도구를 포함한다. 인상적이다.

자바스크립트의 생성자를 지키기 위하여

최근 몇몇 똑똑한 사람들이 생성자에 대해 언쟁을 했다. 이 블로그 포스트는 그들 입장에서 몇가지 주장에 대해 다룬다.

스폰서 기사

프론트엔드 마스터: 6개의 프론트엔드 개발 워크샵 라이브 온라인에 참석하세요

8월 23일에 시작하는 워크샵 시리즈를 통해 극적으로 여러분의 기술을 업그레이드하세요. 이 워크샵은 Backbone.JS, Angular.JS, D3.js (인터랙티브 데이터 시각화), 웹 애니메이션, 도구(Yeoman, 개발 도구, 등)와 HTML5 미디어 API의 전문가들이 특별히 함께합니다. .JavaScript Weekly 독자는 8월 2일까지 얼리버드 세션 티켓을 45% 할인 받을 수 있다.

읽을 거리

자바스크립트 웹앱에서의 검색엔진 최적화

검색엔진이 자바스크립트 웹앱에 접근할 수 있게 만들기 위해 구글의 Ajax 크롤링 명세서를 어떻게 사용하는지 설명한다.

Express 소개

Raymond Camden는 Node.js 의 프레임워크 Express를 소개한다.

Backbone.js 해체 (1부)

"Backbone.js 해체"는 Cody Lindley가 작성한 2부로 나뉘어진 기사(작은 e-book에 가깝다)로 Backbone.JS에 대해 상세히 설명한다. 이 기사는 1부다.

표준 HTML 태그를 오버라이딩하는 AngularJS 디렉티브

Joel Hooks는 "a"나 "form" 같은 표준 HTML 태그를 오버라이딩하는 디렉티브를 살펴보기위해 AngularJS의 내부를 파헤친다.

'yield'는 어떻게 Node.js를 변화시킬것인가

Node.js는 0.11.2 버전을 시작으로 ECMAScript 6 제네레이터를 포함한다. 이 블로그 기사는 제네레이터가 Node.js에서 더 동기적인 코딩 스타일을 가능하게 해준다는 사실을 보여준다. 관련자료: Monocle에 올라온 이 기사에 대한 토의

PouchDB, 동기화되는 자바스크립트 데이터베이스

외부 데이터베이스(다른 PouchDB 인스턴스나 CouchDB 데이터베이스)와 동기화를 지원하는 클라이언트사이드 데이터베이스 라이브러리인 PouchDB의 튜토리얼자료다.

Voyeur를 통한 DOM 탐색과 조작

Brian Rinaldi는 DOM 탐색과 조작을 위한 대체 문법을 제공하는 Voyeur.js 라이브러리의 사용방법을 상세히 다룬다.

HTML5 API와 오픈소스 폴리필로 HTML5 컴포넌트 구현하기

David Geary는 Polymer와 모질라 X-Tags 프로젝트와 함께 초기 HTML5 컴포넌트 명세서를 사용해 HTML5 컴포넌트를 구현하는 방법을 보여준다.

AngularJS로 커스텀 디렉티브 만들기

Ajax와 xhr.responseType='json'으로 JSON-포맷 데이터 로딩하기

Mathias Bynens는 Ajax를 통해 JSON 데이터를 받고 파싱하는 프로세스를 간편하게 해주는 XMLHttpRequest 표준의 숨겨진 보석에 대해 설명한다.

PDF.js를 이용해 자바스크립트로 PDF에서 테이블 추출하기

임의의 객체의 프로퍼티 변경에 브레이크걸기

John K. Paul은 ECMAScript 5 getter와 setter를 사용해 프로퍼티 변경이 발생할때마다 디버거로 진입하는 방법을 설명한다.

JS에서의 값 객체: ECMAScript 7가 진행중인 작업

Brendan Eich의 슬라이드

Node.js 10단계로 독학하기

자바스크립트와 캔버스로 DOOM의 화면이 녹아내리는 효과를 모사하기

동영상

Ember를 배워보자

짧은 스크린캐스트로 제공되는 14개의 강의

AngularJS를 위한 테스트 전략

Protractor, Testem과 Jasmine 테스트도구를 통한 AngularJS의 테스트 전략을 살펴보는 스크린캐스트.

Ember.js 앱을 QUnit과 Karma로 통합 테스트하기

유닛 테스트: 지금의 몇 분이 나중의 몇 시간을 줄일 것이다

Eric Mann은 Grunt와 PhantomJS를 통해 보이지 않게 QUnit테스트를 실행하는 방법을 설명한다. 슬라이드도 공개되어있다.

내 워크플로우 v3: 전체 코딩 스택

Remy Sharp는 Node.js 프로젝트 개발을 위한 그의 워크플로우를 스크린캐스트로 설명한다. 그는 100% 크롬의 개발자도구내에서 작업한다. 크롬의 새로운 기능 "workspaces"가 디스크의 파일을 수정할 수 있게 해준다.

릴리즈

다양한 Ember 1.0 RC 릴리즈

가능한 XSS 보안 이슈를 해결한 릴리즈

Adobe PhoneGap 3.0 릴리즈

HTML5로 네이티브 모바일 앱을 개발할 수 있게 해주는 인기있는 프레임워크인 폰갭이 새로운 릴리즈를 내어 놓았다. 주요 새로운 기능으로 변경된 플러그인 아키텍쳐, 더 좋은 도구, 곧 나올 플랫폼(iOS7, Firefox OS와 Ubuntu)과 새로운 API를 지원한다. 두 번의 인터뷰(하나는 .net magazine, 다른 하나는 InfoQ)에서, 폰갭 프로덕트 매니저 Brian LeRoux가 이번 릴리즈에 대해 더 자세히 설명한다.

qooxdoo 3.0 릴리즈

사용자 인터페이스 프레임워크 qooxdoo는 데스크탑 앱, 모바일 앱과 "웹사이트"처럼 다른 HTML5 환경을 대상으로 한다. 버전 3.0의 핵심은 데스크탑 앱이 더 간단한 위젯을 갖게되고 터치 지원이 더 좋아졌으며, 모바일앱은 더 많은 플랫폼을 지원하고 위젯들이 고해상도 디스플레이에 최적화되었다. "웹사이트"를 위해서는 더 많은 샘플과 REST 지원을 통합하였다.

코드와 라이브러리들

새롭게 개선된 Node.js 디버거 소개

Node Inspector는 크롬 개발자도구를 사용해 Node.js 애플리케이션을 디버그할 수 있게 해준다. 최근에, 새로운 메이저 버전이 릴리즈되었다. 새로운 Blink 개발자도구에서 사용할 수 있으며, 소스 맵을 지원하고 브레이크 포인트를 더 잘 다룰수 있는 등의 개선사항이 있다.

VerbalExpressions: 자바스크립트 정규 표현식을 쉽게 만든다

유창한 API(체이닝된 메서드)를 호출하여 정규 표현식을 조립할 수 있게 해주는 라이브러리. 궁극적으로 가독성과 문서화에 도움을 준다.

Ajax Replay: 브라우저에서 Ajax 호출을 캐시하고 미래에 이를 재실행한다 (테스트를 위해)

처음 실행하는 동안, 이 라이브러리는 모든 XMLHttpRequest와 그 결과를 로컬스토리지에 기록한다. 그리고나서, 서버에 접근하지 않고 그 결과를 받아 테스트 속도를 높일 수 있다. 이 기법은 모든 테스팅 프레임워크에서 잘 동작한다.

David: Node.js 프로젝트를 위한 의존성 관리 도구

David는 프로젝트 의존성과, 현재 사용하는 버전, 그리고 최신의 이용가능한 버전에 대한 개요를 보여준다. 이는 모든것이 얼마나 최신인지 보여준다. 결과값은 뱃지로 요약되고 이를 여러분의 사이트에 임베딩할 수 있다.

grunt-express: Grunt.js를 사용해 Express.js 웹 서버를 시작하기

파일의 변경을 감시한다.

leap.js: Leap 모션 컨트롤러를 위한 API

Leap Motion 3D 모션 컨트롤러를 위한 라이브러리. 이 라이브러리는 웹 소켓(디폴트로 localhost)을 통해 장치와 연결한다. 이 페이지의 우측상단의 링크는 API 문서와 다른자료들을 제공한다.

lz-string: 빠른 자바스크립트 압축

이 라이브러리는 문자열을 압축하여 로컬스토리지에 가능한 많은 데이터(많은 기기들이 5MB로 제한되어있다)를 저장할 수 있게 도와준다.

Inquirer.js: Node.js를 위한 커맨드라인 사용자 인터페이스

커맨드라인 Node 앱에서 사용하기 위한 일반적인 인터랙티브 커맨드라인 사용자 인터페이스의 모음(예를 들면, 목록, 확인, 비밀번호 입력)

ChessBoardJS: 자바스크립트 체스판 위젯

일자리

시니어 프론트엔드 개발자 @ WizeHive

WizeHive는 AngularJS 프론트엔드를 플러그인 아키텍쳐로 해킹하고 있습니다. 우리의 미션이요? 비지니스 사용자에게 비지니스 앱을 커스터마이즈할 수 있는 권한을 주고 한시간내에 실행할수 있게하는 것입니다. 우리 팀에 합류하여 이를 현실이 되도록 도와주세요.

자바스크립트 해커와 탁구의 달인을 구합니다 @ Weebly

Weebly는 천만명의 사용자가 활용할 기능을 만드는데 도움을 줄 프론트엔드 전문가를 찾습니다! 다양한 프로젝트와 플랫폼에서 훌륭한 동료와 함께할 수 있는 창의적인 환경에서 일할 수 있습니다. 이메일 주소 [email protected]로 직접 연락하셔도 됩니다.

UI 엔지니어 @ Yahoo!

이 업무를 통해서 세상에서 가장 발전된 온라인 미디어 판매와 캠페인 관리 시스템, 그리고 진보된 시각화분석 프로덕트를 개발하는데 기술적으로 핵심 역할을 맡게 되며, 성장할 수 있는 기회를 가지게 될 것입니다.

마지막으로,

SPA 개발에 대해 궁금하나요? Kendo UI로 스스로 SPA를 만드는 방법을 배우세요

여러분의 웹 앱에서 최종사용자에게 더 우아한 UX를 제공하세요. Kendo UI의 HTML5/자바스크립트 프레임워크는 이런 리치 클라이언트사이드 웹애플리케이션의 개발을 간단하게 하여, SPA 개발을 어느때보다 더 쉽게 해줍니다.

SPA (Single Page Application)

[senxation]

JavaScript Weekly #139 - 20130719

원문 : [http://javascriptweekly.com/archive/139.html]

특집 기사

ES6 모듈, 빌드 도구와 브라우저 앱 배포

현재, 자바스크립트 모듈의 풍경은 나뉘어져있다. 여러개의 모듈 포맷과 패키지매니저가 서로 경쟁하고 있다. 장기적으로, ECMAScript 6 모듈은 이런 분리현상으로부터 우리를 이끌어내 줄 것이다. Ryan Florence는 단기적인 보완책을 제안했는데, 지금 바로 ES6 모듈을 작성하고 (더 추하지만) 보편적인 모듈 형식으로 컴파일하고, 배포하는 것이다.

Johnny-Five와 함께 자바스크립트로 구동되는 아두이노

Node.js 기반의 Johnny-Five 라이브러리 덕분에, 여러분의 컴퓨터에서 자바스크립트를 작성하고, 그 코드를 아두이노 기반의 하드웨어 구성의 거의 모든 측면을 제어하고 조작하는데 사용할 수 있다. Deric Bailey가 작성한 이 기사는 이런 일련의 작업을 어떻게 시작하는지에 대해 설명한다.

스폰서 기사

오픈 클라우드 아카데미: 클라우드 컴퓨팅 기술의 간극 메우기

클라우드 컴퓨팅은 현재도 그렇고 앞으로도 IT업종에서 핵심 기술 셋이 될 것이다. 하지만 기업들은 사업에 필수적인 클라우드 컴퓨팅 기술을 가진 인력을 고용하는데 힘쓰고 있다. Rackspace는 이런 차이에 대해 고심하여 오픈 클라우드 아카데미라는 교육프로그램을 개설하였다. 이 프로그램은 IT 자격증을 얻기 원하는 학생들을 위해 설계되었다. 더 많은 정보를 확인하려면 여기를 클릭하라.

읽을 거리

SVG로 인터랙티브한 그래프 만들기

두 블로그 포스트 연재 (파트 1 과 파트 2)에서 SVG, CSS와 자바스크립트로 인터랙티브한 그래프를 만드는 방법을 살펴본다.

ECMAScript 6와 프록시

ECMAScript 6 프록시는 객체에서 수행되는 연산을 가로챌 수 있게 해준다. 이 블로그 포스트는 프로퍼티에 할당된 값을 로깅하는 예제를 제공한다.

왜 나는 자바스크립트에서 비공개 함수를 테스트하는가?

지난 주, Phil Walton은 “자바스크립트에서 비공개 함수를 테스트하는 방법”이라는 블로그 포스트를 작성했다. 댓글 중에, 몇몇 사람들은 비공개 함수를 절대 유닛테스트하지 말아야한다고 주장했다. 이 후속 포스트는 비공개 함수 테스트가 왜 그리고 언제 유용한지에 대해 설명한다.

커스텀 jQuery 이벤트로 디커플링하기

Simon Smith는 커스텀 jQuery 이벤트를 사용해 이벤트 핸들러를 디커플링하면 어떻게 자바스크립트코드가 유지보수하기 쉬워지는지에 대해 설명한다.

조그만 Lisp 인터프리터

Mary Rose Cook은 lightining talk를 위한 조그만 Lisp 인터프리터를 자바스크립트로 작성했다. 이 포스트는 Lisp과 (단지 116줄 밖에 되지 않는)인터프리터 둘다에 대해 설명한다.

왜 자바스크립트 웹 애플리케이션은 반드시 전통적인 URL을 수용해야하는가

이 블로그 포스트는 최신 웹 애플리케이션이 서버사이드전용 애플리케이션과 클라이언트사이드전용 애플리케이션의 이점을 반드시 결합해야하는지에 대해 주장한다. 이를 위해, 반드시 전통적인 URL을 사용해야 한다.

Yeoman, Grunt 그리고 Bower로 앱 만들기

잠시만.. 어쩌면 자바스크립트는 최고의 프로그래밍 언어일수도 있어

어디서나 사용가능한 유비쿼터스 언어인 자바스크립트는 최근 프로그래밍 언어 랭킹중 몇몇에서 높은 자리를 차지했다.

GitHub에서 Node.js 개발을 위한 도구와 전략

Aura와 Node.js로 처리하는 Server Sent Events)

대략적으로 말하면, Server Sent Events는 웹소켓의 가벼운 대안이다. 주로 알림을 보내기를 원한다면 말이다. 이 기사는 Node.js로 SSE를 구현하는 방법을 다룬다.

TypeScript에 대한 나의 경험

Peter Hausel spent the first half of this year building a fairly big Node.js application with TypeScript. This blog post describes his experiences.

Promises: 비동기 자바스크립트의 대체 접근방법

jQuery UI Widget과 Grunt로 모듈화된 jQuery 플러그인 만들기

동영상

안녕 Polymer: 구글의 새로운 웹 프레임워크에 대한 Q&A 동영상

Polymer는 Web Components에 기반하고, 전적으로 그 설계를 실현하기 위해 만들어졌다. 지난 화요일, Polymer 팀은 온라인 Q&A를 열었다. 이벤트는 동영상으로 저장되었다. Axel Rauschmayer가 작성한 동영상의 요약글도 볼 수 있다.

jQuery는 맥가이버칼이다. (그리고 괜찮다!)

Adam J. Sontag는 jQuery가 무엇인지 그리고 무엇이 아닌지에 대해 설명하고 사용팁을 제공한다.

Angular, Yeoman과 크롬 앱 소개

코드와 라이브러리들

ESLint 소개

ESLint는 Nicholas C. Zakas가 만든 새로운 린트 도구다. 이 도구는 추상 문법 트리에 기반해 사용자가 스스로의 린트 규칙을 사용해 구현할수 있게 하는데 초점을 맞추었다. 이런 지나친 설정이 필요없다면, JSLint나 JSHint가 더 나을 것이다.

JS 웹 앱에서 Ajax 요청을 큐에 쌓기

순서대로 처리됨을 보장하는 서버요청을 큐잉하는 jQuery 플러그인 (중요한 예제. 데이터베이스 업데이트를 보낼 때) A jQuery plugin that queues requests to a server, ensuring that they are handled in order (important e.g. when sending database updates).

structured.js: 자바스크립트 코드의 구조를 입증한다.

sturctured.js 는 Khan 아카데미의 CS 커리큘럼의 일부분으로 개발되어왔다. 코드의 일부가 주어진 패턴에 매칭되는지 확인하고 사람들이 제출한 코드를 입증하는데 사용할 수 있다.

Date: 사람처럼 날짜를 쓴다

이 라이브러리는 날짜를 “10 minutes from now”, “tomorrow night at 5”, “next week saturday morning” 처럼 자연스러운 언어(영어)로 파싱한다.

Sublime-JSHint: Sublime Text 2와 3를 위한 JSHint Gutter

Sublime의 gutter영역에 JSHint 경고를 표시하기위해 Node.js를 사용한다.

Spectacular: 루비의 RSpec을 자바스크립트로 가져온 BDD 프레임워크 Framework

Amplify.js에 사용하는 클라이언트사이드 저장소

Amplify 라이브러리의 저장 컴포넌트로 로컬스토리지나 세션스토리지 같은 표준을 사용하고, 구형 브라우저에는 비표준 폴백을 사용하여 영속적인 클라이언트사이드 저장소를 다룬다. 이 블로그 포스트는 어떻게 사용하는지 설명한다.

Daux.io: 문서 생성기

간단한 폴더 구조와 마크다운 파일을 사용해 사용자지정 문서를 즉시 만들어낸다.

SlimerJS: 웹 개발자를 위한 스크립팅 가능한 Gecko기반 브라우저

자바스크립트 코드로 웹페이지를 조작할 수 있게 해준다. 기능 테스트, 페이지 자동화, 네트워크 모니터링, 화면 캡쳐 등등에 유용하다. PhantomJS와 비슷하지만, Gecko를 사용하고, 내부 브라우저 엔진은 웹킷 대신 파이어폭스를 사용한다.

please.js: 간단한 postMessage() 통신 라이브러리

서로 다른 도메인의 프레임간에 통신을 도와주는 라이브러리

데이터를 시각화하기 위한 25개의 자바스크립트 시각화 라이브러리

Operative: 매끈하게 웹워커를 생성하는 스크립트

웹워커를 생성하고 사용하기 더 편리하게 만들어주는 라이브러리

NodeICO: npm 패키지를 위한 그래픽 뱃지

S Gallery: CSS3 애니메이션을 사용한 반응형 jQuery 갤러리 플러그인

Imagefill.js: 이미지를 컨테이너에 가득 채우기 (jQuery 플러그인)

일자리

시니어 자바스크립트 엔지니어 @ State (런던, 영국)

글로벌 스케일의 새로운 인터넷 서비스인 opinion 네트워크를 개발하는데 도움을 주십시오. 우리는 Node.js와 모듈화된 프론트엔드 코드 아키텍팅, Ember와 같은 최신 프레임워크, 클라이언트사이드의 직접 코딩한 컴포넌트에 많은 경험이 있는 자바스크립트 전문가를 찾고있다.

시니어 JS 프론트엔드 개발자 @ Backbase(포털 소프트웨어), 암스테르담, 네덜란드

Backbase는 네덜란드의 암스테르담에 본사를 두고있는, 세계적으로 빠르게 성장하고있는 포털 소프트웨어 업체다. 현재 암스테르담의 R&D 팀에 시니어 프론트엔드 웹 개발자를 찾고있다. 자바스크립트, CSS, HTML에 전문가라면 Backbase에 합류에주세요!

Ember.js 개발자 @ VerticalResponse (샌프란시스코)

자바스크립트 락스타를 찾고있습니다. 아름다운 자바스크립트코드와 간결한 테스트를 작성하고, 소프트웨어 스택에서 복잡한 문제를 찾아내왔고, 오픈소스 프로젝트에 Pull 요청을 보내어, 수정사항이나 개선사항이 받아들여진적이 있어야합니다.

프로덕트 개발자 @ Iam150 (런던, 영국)

마지막으로,

필수 자바스크립트 읽을거리

Rey Bango은 자바스크립트에 속도를 높이기 위한 가장 좋아하는 책과 온라인 자료들을 공유한다.