dev-weekly 2023-03-18


CSS

Ten Tips for Better CSS Transitions and Animations

  • CSS Transition, Animation을 더 잘 만들기 위한 팁들
  • 애니메이션 중 요소가 많이 변경되면 전환이 과도해 보일 수 있음
  • 브라우저 내장 곡선(ease, ease-in, ease-out, ease-in-out 등)을 피하고 cubic-bezier 곡선 사용하기 (VSCode 내장이 있어서 자동 완성 제공)

Node

Shell-Free Scripts with Execa 7.1

  • shell 없이 스크립트 만들기 - 컨셉 및 예제
  • 모든 명령에 대해 모든 플랫폼의 쉘을 만드는 것은 비용인데 Execa 는 로컬에 설치된 바이너리를 직접 실행

10 years of Electron

  • 일렉트론의 10번째 생일 (2013년 3월 13일 첫 커밋) 을 맞이하여 회고
  • atom shell로 시작했으나 이후 Electron으로 이름 변경. 거버넌스 모델로 전환할즈음 Electron 소유권을 Github에서 OpenJS 재단으로 이전.
  • 컴파일, 인증, 권한 관리 등 다양한 영역을 자동화 해온 과정 소개

How to Debug Node Segmentation Faults

  • Segmentation fault 에 대한 소개 및 발생 원인
    • 잘못된 메모리 주소 읽기쓰기, Stack(Buffer) over flow, 내 것이 아닌 메모리 읽기쓰기 등
  • 포인터, 메모리 이슈 등은 로우 레벨이라 JS는 발생하지 않지만, Node에서 Seg fault 가 발생하는 경우
    • 네이티브 에드온에서 발생, 노드 객체의 내부 비공개 상태를 조작하는 경우, NodeJS 자체 버그 등

Introducing Mongoose 7: The MongoDB ODM for Node

  • Mongoose 7.0 릴리즈.
  • 콜백 제거 - 콜백을 한 번도 사용해본 적 없는 세대의 등장.
  • strictQuery false를 기본값으로 복원, orFail, updateOne, add 등 새로운 기능들 추가

Find My Way: Fast HTTP Router That Uses Radix Trees

  • 내부적으로 Radix tree를 사용했고 프레임워크와 독립적인 매우 빠른 http router

Javascript

Transformers.js: Running ML Models in the Browser

  • 자연어 처리, 시각 처리에 주로 사용되는 ML 모델의 일종. 브라우저에서 실행하게 해주는 도구

Announcing TypeScript 5.0

  • TS 5.0 릴리즈
  • RC, 베타와 차이점
    • export 전후에 데코레이터 배치
    • 새로운 번들러 모듈 레졸루션 옵션은 —module 이 esnext로 설정된 경우만 사용 가능
    • package.json에서 nodejs 최소 12.20 지정

Chrome 111 Gains a ‘View Transition’ Feature for SPAs

  • 페이지 전환 애니메이션 view transition 크롬 111에 추가 (현재 플래그 활성화 필요)
  • 아직 다른 브라우저는 지원할지 알 수 없으나 점진적 향상 기법으로 도입 가능
  • same origin에서 작동하고 meta tag에서 제어중이지만 CSS로 전환할 수 있음

JS Library Chore

React ProseMirror: Integrate the ProseMirror Editor with React

  • React와 ProseMirror 통합하는 라이브러리. useEditorEffect, useEditorEvent 등 제공

Recharts 2.5

  • Rechart 2.5 릴리즈

ETC

Design First, Then Build”: Let’s Bury This Myth Forevermore

  • 디자인 후 개발에 대한 대안
    • Mantra 1. 지금 당장 필요한 것만 디자인하기
    • Mantra 2. 디자인 즉시 구현 - 제품이 복잡해지면 추적해야 할 맥락이 복잡해짐
    • Mantra 3. 디자인 단계에서 큰 기능을 작은 작업으로 나누기
    • Mantra 4. 디자인과 개발간 커뮤니케이션 체계화

The first version of your favorite digital products.

  • 유명한 제품들(스포티파이, 트위터, 에이비앤비, 왓츠앱, 슬랙, 깃헙, 링크드인, 넷플릭스 등)의 초기 버전 UI 모음 서비스