JSer.info #283 - jQuery 3.0가 정식으로 릴리즈됐습니다.
3.0에는 몇가지 호환되지 않는 부분이 포함돼 있으며 jQuery 1.x이나 2.x에서 업데이트하는 경우 참고할 수 있는 문서도 공개됐습니다.
기본적으로 jQuery Migrate라는 마이그레이션용 플러그인을 넣어 경고를 출력하고, 경고에 해당하는 코드를 수정하는 방법으로 업데이트해 나갑니다.
또, jQuery 3 릴리즈와 동시에 ajax와 effect를 제거한 slim 빌드 버전도 함께도 공개됐습니다.
Firefox 47이 릴리즈됐습니다.
Widevine CDM(DRM스트리밍) 지원, Service Worker/Push API 기능 개선, about:debugging 추가, ES2017의 Object.values()와 Object.entries()를 구현하는 등 다양한 변경 사항이 있습니다.
개발자 도구와 관련된 변경 사항은 아래 문서에 잘 정리돼 있습니다.
web audio lesson(일본어)에는 Web Audio API의 기본적인 개념부터 응용하는 방법까지를 레슨 방식으로 소개하고 있습니다.
작성돼 있는 예제 코드를 브라우저 내에서 바로 실행해 볼 수 있도록 돼 있으며, 각각의 레슨마다 과제가 부여돼 있습니다.
Web Audio API에 관심있는 사람에게 좋은 자료가 될 것 같습니다.
헤드라인
jQuery 3.0 Final Released! | Official jQuery Blog
blog.jquery.com/2016/06/09/jquery-3-0-final-released/
jQuery 3.0이 릴리즈 됐습니다.
ajax와 effect를 제거한 slim 빌드 버전이 공개됐습니다.
jQuery.Deferred가 Promise A/+를 호환하도록 변경됐고, 비권장 이벤트가 삭제됐습니다. 또, 다시 requestAnimationFrame를 이용하도록 변경하는 등 다양한 변경 사항이 있습니다.
- jQuery Core 3.0 Upgrade Guide | jQuery
- jquery/jquery-migrate: APIs and features removed from jQuery core
- 【번역정리】jQuery 3.0 업데이트 가이드 - Qiita(일본어)
Firefox 47.0 릴리즈 노트
www.mozilla.jp/firefox/47.0/releasenotes/
Firefox 47이 릴리즈됐습니다.
Widevine CDM(DMR스트리밍) 지원, Service Worker/Push API의 디버깅 기능 개선, about:debugging 추가, ES2017의 Object.values()와 Object.entries()를 구현하는 등 다양한 변경 사항이 있습니다.
- Mozilla To Test Widevine CDM in Firefox Nightly | Future Releases
- Firefox 47 for developers - Mozilla | MDN
- Firefox 47 사이트 호환성 정보 | Firefox 사이트 호환성 정보(일본어)
- Firefox 47 릴리즈, CSS Mask Image 프로퍼티 대응 및 VP9 코덱 활성화 등 | WWW WATCH(일본어)
Release v6.10.0 · babel/babel
github.com/babel/babel/releases/tag/v6.10.0
Babel 6.10.0이 릴리즈됐습니다.
--watch 시, 최초엔 빌드하지 않는 --skip-initial-build 옵션이 추가됐고, 버그 수정 등이 이뤄졌습니다.
ESLint v2.12.0 released - ESLint - Pluggable JavaScript linter
eslint.org/blog/2016/06/eslint-v2.12.0-released
ESLint v2.12.0이 릴리즈 됐습니다.
JSCS 호환 규칙 추가, 모든 빌트인 규칙을 불러오는 eslint:all 설정 추가, 성능 개선이 이뤄졌습니다.
- Utilize glob ignore option for massive perf win by samccone · Pull Request #6215 · eslint/eslint
- ESLint v2.12.0 - Qiita(일본어)
Release Notes for Safari Technology Preview 6 | WebKit
webkit.org/blog/6531/release-notes-for-safari-technology-preview-6/
Safari Technology Preview 6가 릴리즈됐습니다.
함수의 인수에 trailing commas 드래프트를 지원하고, CSS의 normal 속성 값을 지원합니다.
Dev.Opera — What’s new in Chromium 51 and Opera 38
Opera 38(based on Chromium 51)이 릴리즈됐습니다.
ES6 Symbol.hasInstance와 Symbol.species 지원, 함수식에 fn.name 속성 대응, querySelector의 반환 값이 iterable로 변경、KeyboardEvent#key 지원 등 다양한 변경 사항이 있습니다.
Chromium Blog: Chrome 52 Beta: CSS containment, simpler performance measurement, streamable responses from service workers, and more options for web push
blog.chromium.org/2016/06/chrome-52-beta-css-containment-simpler.html
Chrome 52 Beta가 릴리즈됐습니다.
CSS contain 프로퍼티와 PerformanceObserver 지원하며 Fetch API가 referrer policy를 지원하도록 변경됐고 meta 태그의 X-Frame-Option을 더이상 지원하지 않습니다.
- CSS Containment in Chrome 52 | Web Updates - Google Developers
- Fetch Referrer Policy Sample
- CSS Containment Module Level 3 (일본어버전)
아티클
Open Sourcing CloudFlare’s UI Framework
작은 사이즈의 React Component를 monorepo로 관리하고 공개하는 방법을 이야기합니다.
컴포넌트의 크기(입도), 테스트 방법, 디버그, 접근성 등에 관해 작성돼 있습니다.
DOM Features You Didn’t Know Existed (Video & Slides) | Impressive Webs
www.impressivewebs.com/dom-features-you-didnt-know-existed-video-slides/
여러가지 DOM API를 소개하는 문서입니다.
Passive Event Listeners을 이용해 스크롤 개선 | blog.jxck.io(일본어)
blog.jxck.io/entries/2016-06-09/passive-event-listeners.html
addEventListener(type, handler, options)의 세번쨰 인수로 추가된 passive 옵션에 관해 이야기합니다.
passive: true로 설정한 경우의 효과, 세번째 인수를 Feature detect 방법 등을 소개합니다.
- addEventListener()의 세번째 인수의 의미를 제대로 이해하기 위한 메모 - 오늘도 스미마셍
- Add feature test for passive event listener support · Issue #1894 · Modernizr/Modernizr
Performance Observer - Efficient Access to Performance Data | Web Updates - Google Developers
developers.google.com/web/updates/2016/06/performance-observer
PerformanceObserver에 관해 설명하는 아티클입니다.
브라우저가 idle 일때 비동기로 Timing 정보를 얻을 수 있습니다.
Memory Debugging with Web Inspector | WebKit
webkit.org/blog/6425/memory-debugging-with-web-inspector/
Safari TP(Technology Preview) 버전에 공개된 새로운 메모리 프로퍼일러에 관해 소개합니다.
슬라이드, 영상
Practical React with MobX - YouTube
www.youtube.com/watch?v=XGwuM_u7UeQ
MobX에 관한 스크린캐스트 입니다.
MobX를 사용해 어떻게 State를 관리하는지, 어떠 사이클로 상태 변화를 표현하는지에 관해 설명합니다.
사이트, 서비스, 문서
web audio lesson
mohayonao.github.io/web-audio-lesson/
Web Audio API의 기초부터 응용까지 과제와 함께 배울 수 있는 튜토리얼입니다.
예제 코드를 브라우저에서 바로 실행할 수 있도록 구성돼 있습니다.
npms
백엔드에 Elasticsearch를 사용한 npm 패키지 검색 서비스입니다.
검색 결과에 Quality, Maintenance, Popularity, Personalities(미구현) 지표도 함께 출력합니다.
소프트웨어, 도구, 라이브러리
airbnb/hypernova: A service for server-side rendering your JavaScript views
Airbnb의 React 서버 사이드 렌더링 모듈입니다.
Rails 환경에서 사용할 수 있는 방법도 공개돼 있습니다.
Kakapo.js
HTTP 목(Mock) 라이브러리입니다.
목 데이터를 가지는 개발 서버를 만들 수 있는 라이브러리입니다.
rill-js/rill: Isomorphic web application framework.
Browser, Node.js에서 동작하는 isomorphic한 HTTP 미들웨어 라이브러리입니다.
benjamn/reify: Enable ECMAScript 2015 modules in Node today. No caveats. Full stop.
ECMAScript module을 Node.js로 런타임 변환하는 도구입니다.
도서
CSS시크릿 - 웹디자이너가 알아야 할 47가지 키포인트 : Lea Verou, 마키노 사토시 : 책 : Amazon.co.jp(일본어)
2016년 6월 25일 출간되는 CSS Secrets의 번역서입니다.
