JSer.info #503 - Firefox 80이 릴리스 됐다.

ES2020의 export * as namespace 문법을 지원하고 CSS의 appearance 프로퍼티를 prefix 없이 지원한다.
또, window.open()가 outerWidth와 outerHeight를 무시하도록 변경됐고 Cache-Control이 설정돼 있는 경우 Pragma 헤더가 무시 되도록 변경됐다.

D3.js 6.0.0이 릴리스됐다.

ES2015의 네이티브 Iterable, Map, Set을 사용하도록 변경됐다.
d3.event 전역을 경유해 이벤트를 받는 게 아닌 listner 함수의 첫번째 인수로 event를 전달받을 수 있도록 하는 등 이벤트 구조가 변경됐다.

그 외에도 일부 패키지 비권장(삭제)이나 비호환성 변경이 이뤄졌다.

d3-collection 삭제 → Map이나 Set 네이티브나 d3-array 사용
d3-voronoi 삭제 → d3-delaunay 사용
d3.mouse, d3.touch, d3.touches, d3.clientPoint 삭제 →　d3.pointer, d3.pointers 사용

이전 가이드도 함께 공개 됐으니 살펴보길 바란다.

D3 6.0 migration guide / D3 / Observable

Chrome 85가 릴리스 됐다.

JavaScript에는 ES2021에 들어갈 예정인 Promise.any와 AggregateError, String.prototype.replaceAll, Logical assignment operators를 지원한다. 관련 기능의 문법은 V8 8.5 블로그에 정리돼 있다.

V8 release v8.5 · V8

CSS content-visibility 구현, CSS Properties를 CSS로 정의하는 @property 구현, AVIF 이미지를 지원한다.
Fetch API의 Streaming requests, WebHID, Declarative Shadow DOM, Portal를 Origin Trial로 지원한다.
또, Referrer Policy 기본값이 strict-origin-when-cross-origin으로 변경됐고 Secure 속성 없는 SameSite=None 지원이 종료됐다.

theheadless.dev - Learn Puppeteer & Playwright

이 사이트에는 Puppeteer와 Playwright의 기본적인 사용 방법부터 E2E 테스트 및 스크래핑 등의 유스케이스가 정리돼 있다.

이어서 같은 시점에 Testim에서 testimio/root-cause라는 Puppeteer와 Playwright에서 좀 더 효율적인 E2E 테스트를 지원하는 프레임워크를 공개했다.
testimio/root-cause는 각 실행 단계를 스크린샷으로 저장하고 콘솔 로그나 네트워크(HAR) 파일을 저장해 직관적으로 테스트의 흐름을 보여주며 어디에서 테스트가 실패했고 원인은 무엇인지 분석할 수 있도록 한다.
독자적으로 실행할 수 있는 방법과 Jest나 Mocha 등의 테스크 프레임워크를 통합할 수 있는 관련 라이브러리도 함께 제공하고 있다.

헤드라인

Firefox 80.0, See All New Features, Updates and Fixes

www.mozilla.org/en-US/firefox/80.0/releasenotes/

Firefox ReleaseNote

Firefox 80.0이 릴리스 됐다.
ES2020의 export * as namespace 문법 지원한다.
window.open()가 outerWidth와 outerHeight을 무시하도록 변경됐고 Cache-Control이 지정돼 있는 경우 Pragma 헤더가 무시되도록 변경됐다.

Release v6.0.0 · d3/d3

github.com/d3/d3/releases/tag/v6.0.0

d3.js JavaScript library

D3.js 6.0.0이 릴리스 됐다.
ES2015의 Iterable, Map, Set을 사용하도록 변경, bower 지원 삭제.
d3-selection 등 이벤트 구조 변경, d3-collection 비권장.

d3/CHANGES.md at master · d3/d3

New in Chrome 85 | Web | Google Developers

developers.google.com/web/updates/2020/08/nic85

Chrome ReleaseNote

Chrome 85 릴리스 됐다.
CSS content-visibility 구현, CSS Properties를 CSS로 지정하는 @property 구현, AVIF 이미지 지원.
Fetch API의 Streaming requests, WebHID, Declarative Shadow DOM, Portal을 Origin Trial로 지원.
또, Referrer Policy의 기본값이 strict-origin-when-cross-origin로 변경됐다.

V8 release v8.5 · V8

v8.dev/blog/v8-release-85

V8 ReleaseNote

V8 8.5가 릴리스 됐다.
ES2021에 도입될 예정인 Promise.any과 AggregateError, String#replaceAll, Logical assignment operators 지원.
WebAssembly의 baseline compiler인 Liftoff가 모든 플랫폼에서 사용되도록 변경.

Yarn 2.2 🚅🌟 Dedupe, Faster, Lighter, ... - DEV Community 👩‍💻👨‍💻

dev.to/arcanis/yarn-2-2-dedupe-faster-lighter-ha5

yarn ReleaseNote

Yarn 2.2가 릴리스 됐다.
yarn dedupe 추가, 성능 개선, 옵트아웃 방식으로 Yarn의 이용 정보를 Datadog로 전송.

berry/CHANGELOG.md at master · yarnpkg/berry

아티클

content-visibility: the new CSS property that boosts your rendering performance

web.dev/content-visibility/

CSS article Chrome performance

Chrome 85에 구현된 CSS content-visibility 속성 소개.
CSS Containment에 의존한 사양.
DOM의 서브 트리에 예측 가능한 공간을 정의하여 브라우저가 렌더링을 생략하고 최적화하기 위한 구조.
display: none, visibility: hidden와의 차이, content-visibility 프로퍼티의 유스케이스 중 하나로 무한스크롤 기능 소개.

Introducing Danfo.js, a Pandas-like Library in JavaScript — The TensorFlow Blog

blog.tensorflow.org/2020/08/introducing-danfo-js-pandas-like-library-in-javascript.html

MachineLearning JavaScript library article

Pandas에 영감을 받아 개발된 라이브러리인 Danfo.js 소개.
TensorFlow.js와 조합해 사용할 수 있다.

opensource9ja/danfojs: danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

슬라이드, 영상

Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11 - Speaker Deck(일본어)

speakerdeck.com/potato4d/vue-dot-js-with-tsx-from-vue-2-dot-x-to-vue-3-number-v-tokyo11

Vue jsx TypeScript slide

Vue에서 TSX 사용 방법 소개.
Vue2 / Vue3에서의 TSX 사용 방법과 제한, Vue의 SFC와 TSX 비교.

사이트, 서비스, 문서

gluesql/gluesql: GlueSQL is quite sticky, it attaches to anywhere.

github.com/gluesql/gluesql

Rust JavaScript DB

SQL 기반 데이터베이스 라이브러리.
Rust와 WebAssembly(JavaScript)로 구현 및 제공된다.
JavaScript 버전은 InMemoery, LocalStorage 에서 동작.

testimio/root-cause

github.com/testimio/root-cause

JavaScript browser library Tools testing

Puppeteer와 Playwright을 사용한 E2E 테스트 보조 도구.
각 실행 스텝을 스크린샷으로 저장, 콘솔 로그나 네트워크(HAR) 파일을 저장하여 보고서를 통해 테스트가 실패한 원인을 분석할 수 있다.
독자적으로 실행하는 방법과 Jest나 Mocha 등 테스트 프레임워크와 조합해 사용할 수 있는 라이브러리도 제공한다.