자바스크립트로 세상을 구하기 위한 퀘스트

이번 주 에피소드

서비스 워커는 Firefox Nightly를 사용하고, 매일 DevTools 팁을 받은편지함에서 사용하고, Chrome에서 IE 디버깅, RWD용 Flexbox 사용, 1,000개의 자바스크립트로 세상을 구하고, IE 및 Spartan용 생성기가 작동 중입니다.

개발자 일일 활동량

매일 받은편지함으로 전달되는 유용한 도움말을 참고하여 작업 속도를 높이세요. 우마르 한사가 애니메이션 GIF 형식으로 매일 한 가지 DevTools 팁을 보여줍니다. 소스 패널에서 줄 번호로 점프하거나 cURL에서 네트워크 요청을 재생하는 것을 예로 들 수 있습니다.

https://www.google.com/url?q=https%3A%2F%2Fumaar.com%2Fdev-tips%2F&sa=D&sntz=1&usg=AFQjCNGgWKnyERWpWflwl-7sk6qV4gngmg

Chrome의 Internet Explorer 디버그

Chrome에서 Internet Explorer를 디버그할 수 있다면 어떨까요? IE 팀에서 최근 오픈소스로 공개한 IE 진단 어댑터는 Internet Explorer가 Chrome 원격 디버깅 프로토콜과 통신할 수 있도록 하는 브리지입니다. 이 프로젝트는 아직 실험 단계이지만, 이미 기본 스크립트 디버깅이 가능한 상태이며, 팀에서는 곧 Spartan으로 이 프로젝트를 포팅할 계획입니다.

http://blogs.msdn.com/b/ie/archive/2015/04/02/introducing-the-ie-diagnostics-adapter-for-third-party-developer-tools.aspx

서비스 작업자

Firefox Nightly에 서비스 워커가 도입되기 때문에 오프라인 경험을 더욱 쉽게 빌드할 수 있을 것입니다. W3C 사양에 따라 서비스 워커는 개발자가 네트워크 요청을 다시 라우팅하고, 캐시에서 리소스를 제공하고, 푸시 알림을 보낼 수도 있으므로 페이지에 대한 더 많은 제어 기능을 제공합니다. 서비스 워커는 이미 Chrome에서 제공되고 있으며, Firefox 팀은 버전 41이 출시될 것으로 예상하고 있습니다.

https://blog.wanderview.com/blog/2015/03/24/service-workers-in-firefox-nightly

http://www.w3.org/TR/service-workers/

https://jakearchibald.com/2014/offline-cookbook/

RWD용 Flexbox

Flexbox로 사이트를 개선하여 반응형 레이아웃을 개선하세요. 개발자인 조 길렌워터가 기존 브라우저를 지원해야 하는 사이트에서 Flexbox를 점진적 향상으로 사용하는 방법을 설명합니다. 종합적인 슬라이드는 다양한 Flexbox 속성을 기억하는 데 도움이 되는 요약본으로도 사용할 수 있습니다.

https://vimeo.com/124796320

http://www.slideshare.net/zomigi/enhancing-responsiveness-with-flexbox-smashing-conference

JS1K 경쟁

단 1,000개의 자바스크립트로 얼마나 많은 외계인을 물리칠 수 있을까요? Keith Clark의 'Defender'가 올해의 JS1K 대회에서 우승했습니다. 참가자들은 1,024바이트의 자바스크립트로 매력적인 환경을 구축해야 합니다. 올해의 준우승에는 미스터리 모노레일과 불가능한 롤러코스터가 있습니다.

http://js1k.com/2015-hypetrain/demo/2306

http://js1k.com/2015-hypetrain/demo/2322

http://js1k.com/2015-hypetrain/demo/2364

아일랜드/스파탄의 생성기

IE 팀에서 생성기가 개발 중이라고 발표했기 때문에 콜백은 옛말이 되었을 수 있습니다. ES6의 일부인 생성기는 일시중지했다가 나중에 다시 시작할 수 있는 특수 함수로, 동기식으로 비동기 코드를 작성할 수 있습니다. 생성기는 이미 Chrome과 Firefox에서 제공되고 있으며 현재 Safari에서 개발 중입니다.

https://wpdev.uservoice.com/forums/257854-internet-explorer-platform/suggestions/6263797-generators

https://www.youtube.com/watch?v=rT-1ZxhjzBw

https://www.chromestatus.com/features/4959347197083648

제이슨의 3D 스케치

http://codepen.io/loktar00/full/DphFg/

6면으로 된 18/100 위상 고리

http://codepen.io/sixsided/full/qEeEYm/

프랭크 듀몬트의 물리학을 통한 가우시안 분포

http://codepen.io/fdumont/full/CvdDI/

Abhijit Hota의 PArticleS OF MATTER처럼 통일하세요

http://codepen.io/XDBoy018/full/JodWKN/

트위터 #LazyWebShow에서 의견을 보내 주세요.