JSer.info #468 - Ember 3.15가 릴리스 됐습니다.

• Ember.js - Ember 3.15 "Octane" Released

Ember.js 3.15의 큰 변경 사항으로 Octane Edition이 릴리스에 포함됐습니다.
Edition은 Ember의 프로그래밍 모델을 나타내는 개념으로 현재는 Octane Edition 만 추가됐습니다.

An edition represents a cohesive programming model, and releasing a new edition represents a shift in the programming model due to new features and concepts being added to Ember. Ember Octane is the first new edition that was added to Ember.

-- https://emberjs.com/editions/octane

Octane Edition의 큰 변경 사항으로는 다음 세 가지가 있습니다.

• Glimmer Components 도입
  • Before: Classic Components(component.extend)
• Element Modifiers의 동작 구현
  • Before: mixin
• @tracked를 사용한 Reactive한 모델 구현
  • Before: computed 함수

이번 Octane Edition 릴리스에 맞춰 튜토리얼 등도 개편됐으며 Dev Tools의 갱신도 이뤄졌습니다. 자세한 내용은 다음 글을 참고하시기 바랍니다.

• Ember.js - Octane is Here

공개 된지 좀 된 글로 JSMonday - Publishing a TypeScript Library에는 라이브러리를 npm에 공개하고 테스트 까지의 과정이 튜토리얼 방식으로 소개돼 있습니다.

디렉터리 구조나 tsc(TypeScript Compiler)로 컴파일하면 어떻게 되는지, Jest를 사용한 테스트나 Coverage를 높이는 방법 등 대략적인 흐름이 정리돼 있습니다.

이어서 package.json 필드와 기본적인 npm 명령어 사용 방법, Semver 등에 대해서 살펴보고 싶은 분은 다음 기사를 찾고하면 도움이 될 것 같습니다.

• 초심자 용 package.json 핸즈온 - Qiita(일본어)

헤드라인

Ember.js - Ember 3.15 "Octane" Released

blog.emberjs.com/2019/12/20/ember-3-15-released.html

Ember ReleaseNote

Ember 3.15가 릴리스 됐습니다.
Ember Octane가 정식으로 릴리스돼 ember new의 기본이 됐습니다.
또, Component#isVisible, partial, window.ENV가 비권장 됐습니다.

• Ember.js - Octane is Here

아티클

New WebKit Features in Safari 13 | WebKit

webkit.org/blog/9674/new-webkit-features-in-safari-13/

safari article

iOS / iPad / macOS 각 환경에 대한 Safari 13의 변경 사항이 소개돼 있습니다.
Pointer Events, Visual Viewport API, ITP(Intelligent Tracking Prevention), FIDO2, WebDriver의 지원 등에 대해서 이야기합니다.

JSMonday - Publishing a TypeScript Library

www.jsmonday.dev/articles/18/publishing-a-typescript-library

TypeScript library

TypeScript로 라이브러리를 작성하고 npm publish 하기까지의 과정을 튜토리얼 방식으로 소개합니다.
TypeScript 도입, Jest 테스트, Codecov 커버리지, npm run-script 설정 등에 대해서 작성돼 있습니다.

Making of: Best of 2019 – Johan Ronsse

johanronsse.be/2019/12/28/making-of-best-of-2019/

article Development

Best of 2019이라는 사이트를 어떻게 만들었는지 소개하는 글입니다.
Svelte와 CSS 프레임워크 Ygdir를 사용해 개발, Figma를 사용한 디자인, Notion을 사용한 컨텐츠 관리 방법에 대해서 이야기합니다.

• Ygdir - Documentation

Discovering Svelte: Adding, Editing and Estimating Tasks In The Pomodoro Technique App | Barbarian Meets Coding

www.barbarianmeetscoding.com/blog/2019/12/29/discovering-svelte-adding-some-tasks-and-pomodoros

Svelte JavaScript article

TODO 애플리케이션을 만들어 보면서 Svelte에 대해서 학습하는 글입니다.
Svelte의 LifeCyle hook, $: 라벨을 사용한 Reactive한 구조에 대해서 설명합니다.

초심자 용 package.json 핸즈온 - Qiita(일본어)

qiita.com/segur/items/6eebb70ec2de03016dde

node npm article

npm 명령어와 package.json에 대해서 초심자를 대상으로 작성한 튜토리얼 글입니다.
패키지 설치와 제거, SemVer, Lock 파일에 대해서 소개합니다.

Node.js에서 CLI를 만드는 방법과 편리한 라이브러리 정리 - Qiita(일본어)

qiita.com/toshi-toma/items/ea76b8894e7771d47e10

node console Tools article

Node.js로 CLI를 만들 경우 개발 방법과 CLI 용 라이브러리가 소개돼 있습니다.

React.memo를 사용한 성능 최적화에 대해서 - 30세 부터 프로그래밍(일본어)

numb86-tech.hatenablog.com/entry/2019/12/20/222412

React article performance

React.memo와 useCallback를 사용한 메모화와 성능 최적화에 대해서 소개돼 있습니다.

Base Web - Visual Regression Testing

baseweb.design/blog/visual-regression-testing/

browser testing article

Visual Regression Testing을 소개하는 글입니다.
Visual Regression Testing의 목적, 도입 방법, 워크플로우 등에 대해서 이야기합니다.

Ember.js - Octane is Here

blog.emberjs.com/2019/12/20/octane-is-here.html

Ember article

Ember 3.15에 도입된 Octane을 소개합니다.
Glimmer Components 도입, Element Modifiers에서 LifeCyleHooks를 사용한 동작 구현, @tracked를 사용한 Reactive한 모델 구현 등이 이뤄졌습니다.
그 외 튜토리얼 개편, Dev Tools가 갱신됐습니다.

• Ember.js Classic vs Octane: a cheat sheet
• Glimmer

소프트웨어, 도구, 라이브러리

bbc/peaks.js: JavaScript UI component for interacting with audio waveforms

github.com/bbc/peaks.js

JavaScript sound library

음성의 파형을 출력하는 UI 컴포넌트입니다.
Web Audio 기반으로 파형을 생성하거나 audiowaveform을 사용해 미리 음성 파형을 생성해 사용할 수 있습니다.

• bbc/audiowaveform: C++ program to generate waveform data and render waveform images from audio files

ganapativs/react-spectrum: Generate colorful text placeholders 🎨

github.com/ganapativs/react-spectrum

React library

다채로운 텍스트 자리표시자(placeholder)를 생성하는 React 컴포넌트입니다.

saitoeku3/use-lazyload-ref: 🖼️Custom hook to use lazy load easily

github.com/saitoeku3/use-lazyload-ref

React library JavaScript

ref와 data-src 속성을 지정하여 src 속성의 지연 로드를 할 수 있는 React Hooks를 사용한 라이브러리입니다.

• React에서 간단하게 지연 로드할 수 있는 라이브러리를 만들었습니다 - 명랑한 사이와 익스트림!(일본어)

Release Tesseract.js v2.0.0 · naptha/tesseract.js

github.com/naptha/tesseract.js/releases/tag/v2.0.0

JavaScript OCR library WebAssembly

Emscripten를 사용한 OCR라이브러리 Tesseract.js 2.0이 릴리스됐습니다.
tesseract　v4.1로 갱신, 여러개 원어 인식 지원, 이미지 포맷(png, jpg, bmp) 지원, WebAssembly나 WebWorker를 지원하여 성능 개선이 이뤄졌습니다.

• Why I refactor tesseract.js v2? - Jerome Wu - Medium