dev-weekly 2025-01-18


CSS

CSS text-box-trim

  • chrome 133에 text-box-tirm 도입
  • half-leading 이슈를 해결하는 기술

A couple CSS tricks for HTML Dialog elements

  • html dialog 트릭

    dialog::backdrop { backdrop-filter: blur(2px); }
    body:has(dialog[open]) { overflow: hidden; }

Javascript

Learn Yjs

  • yjs CRDT 라이브러리를 사용해 실시간 협업 앱 만들기 아티클

ECMAScript feature: regular expression pattern modifiers

  • JS 정규표현식 중 일부 플래그(i, m, s)를 식 전체가 아니라 부분적으로 적용 가능하게 하는 기능

Five years of React Native at Shopify

  • shopify에서 RN으로 전향했던 이유, 레슨런 공유
  • 전환은 성공적이었고 5년동안 모든 앱을 마이그레이션.

ETC

Tight Mode: Why Browsers Produce Different Performance Results

  • 브라우저 Tight Mode - fetch priority 를 트리거하는 브라우저간 동작 방식 차이
    • 사파리와 크롬 모두 우선순위를 구분하지만 크롬은 중간에 medium을 만났을 때 같이 요청, 사파리는 모든 high를 요청 후 응답이 끝나면 medium을 요청
    • 크롬은 <head>만 보고 판단, 사파리는 <body>, css등 문서 전체를 확인

Double-keyed Caching: How Browser Cache Partitioning Changed the Web

  • 2010년대에는 { url: resourceData } 의 형태로 CDN-first CDN-우선 접근 방식(크로스 사이트 캐싱)이었다면, 2020년대에는 동일한 리소스라도 topLevelSite마다 구분하는 double keyed caching(a.k.a cache partioning) 로 변경 (개인정보보호 때문에)
  • 캐싱 정책 변화로 인한 영향

Release