Fork me on GitHub

2024-03-12: Tailwind CSS v4.0 alpha, TypeScript 5.4, Speedometer 3.0

Translator: rewrite0w0 Edit on GitHub See Revisions

JSer.info #684 - Tailwind CSS v4.0 alpha가 출시됐어요.

Rust로 작성된 Oxide 엔진 추가, Lightning CSS 삽입함으로 성능, 빌트인 지원하는 구문 개선되었어요. 또한 글에서는 v4 로드맵에 대해서도 다루고 있어요.


TypeScript 5.4가 출시됐어요.

Beta나 RC에서 큰 기능 추가는 없어요.
클로저에 의한 Narrowing 결과 개선, NoInfer Utility Type 추가,
--module preserve 추가가 있었어요.
또한, ES2024 Object.groupBy/Map.groupBy 지원, Import Attributes 지원이 추가되었어요.
5.4는 target: "ES3"out 옵션 같은 비권장 기능 지원되는 마지막 버전이 될 예정이에요.
이 옵션은 5.5에서 삭제될 예정이에요.


브라우저 엔진 퍼포먼스 측정하는 벤치마크 도구 Speedometer 3.0가 출시됐어요.

Speedometer는 주로 브라우저 엔진 개발자가 브라우저 퍼포먼스 측정 벤치마크로 이용하고 있어요.
이번 업데이트에서 동기, 비동기 처리 실행 시간을 보다 더 정확히 측정, HTTP Archive나 npm 다운로드 수 기반으로 이용하고 있는 프레임워크 조절 등이 있어요.
또한, 지금까진 TodoMVC 이용했지만, Next.js/Nuxt 사용한 미디어 사이트나 그래피컬한 대시보드, CodeMirror나 TipTap 사용한 에디터도 테스트에 추가되었어요.

Speedometer 3.0 벤치마크에서는 다음 프레임워크가 테스트에 포함되어 있어요.


To support JSer.info


헤드라인


Release v8.0.0 · pixijs/pixijs

github.com/pixijs/pixijs/releases/tag/v8.0.0

JavaScript game library ReleaseNote

PixiJS v8.0.0 출시.
pixi.js 하나의 패키지에 통합, 초기화가 비동기로 변경, Graphiscs API 변경


Node.js — Node v21.7.0 (Current)

nodejs.org/en/blog/release/v21.7.0

nodejs ReleaseNote

Node.js v21.7.0 출시.
util.styleText(format, text) 함수 추가, process.loadEnvFile(path)util.parseEnv(content) 추가.
.env 복수행 값 지원, node:sea에 API 추가, node:vmimportModuleDynamically 옵션 추가, crypto.hash() 추가


Open-sourcing our progress on Tailwind CSS v4.0 - Tailwind CSS

tailwindcss.com/blog/tailwindcss-v4-alpha

CSS ReleaseNote

Tailwind CSS v4 alpha 출시.
Rust로 작성된 Oxide 엔진 추가, Lightning CSS 사용하도록 변경.
v4 로드맵 언급


WebKit Features in Safari 17.4 | WebKit

webkit.org/blog/15063/webkit-features-in-safari-17-4/

safari ReleaseNote

Safari 17.4 변경점에 대해.
HTML, <input type="checkbox" switch> 지원, 폼 세로 표시에 대응, <select> 구분에 <hr> 사용 가능.
CSS, @scope 지원, ::spelling-error::grammar-error 추상 요소 지원, content: "foo" / "alt" 대체 텍스트 지원.
Web API, element.checkVisibility() 지원, AbortSignal.any() 지원.
JS, ES2024 Promise.withResolvers()/Object.groupBy()/Map.groupBy() 지원.


Biome v1.6 | Biome

biomejs.dev/blog/biome-v1-6/

JavaScript Tools ReleaseNote

Biome v1.6 출시.
Astro/Svelte/Vue 파일 내 JS/TS 분석 지원, biome.jsonc 지원.
atributePosition 옵션 추가, 규칙 업데이트


Announcing TypeScript 5.4 - TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-5-4/

TypeScript ReleaseNote

TypeScript 5.4 출시.
클로저로 인한 Narrowing 결과 개선, NoInfer Utility Type 추가,
--module preserve 추가.
ES2024 Object.groupBy/Map.groupBy 지원, Import Attributes 지원.
target: "ES3"out 옵션 같은 비권장되어있는 옵션은 5.5에서 삭제 예정.


WinterJS 1.0 · Blog · Wasmer

wasmer.io/posts/winterjs-v1

JavaScript WebAssembly ReleaseNote

Spidermonkey 기반 WinterJS-compatible한 JavaScript Runtime인 WinterJS 1.0 출시.


Release v4.1.0 · honojs/hono

github.com/honojs/hono/releases/tag/v4.1.0

Hono JavaScript server library ReleaseNote

Hono v4.1.0 출시.
WebSocket Helper 추가, Body Limit Middleware 추가, 출력 타겟 ES2022으로 변경


읽을거리


풀스크래치로 이해하는 OpenID Connect (1) 인가 엔드포인트 편 - 엠스리테크블로그

www.m3tech.blog/entry/2024/03/05/150000

OpenID TypeScript article

OpenID Connect의 ID Provider를 TypeScript로 구현하며 연재


"react-strict-dom", why it's so great? | Szymon Rybczak

szymonrybczak.dev/blog/react-strict-dom

React HTML iOS Android article

react-strict-dom에 대해.
React Native for Web 접근에는 React Native의 primitive를 웹에 맞게 변환하는 호환 Shim이 상당히 큼.
react-strict-dom은 역으로 접근하는 것을 선택해し, DOM API 서브셋를 네이티브 츠겡서 다룸.


Why Should You Care About Package Metadata Interoperability? | OpenJS Foundation

openjsf.org/blog/package-metadata-interoperability-collab-space-intro

nodejs npm article

OpenJS에서 package.json 메타데이터 호환 운용성 향상하기 위한 워킹 그룹 발족.


Ultimate Guide to Visual Testing with Playwright

www.browsercat.com/post/ultimate-guide-visual-testing-playwright

browser test article

Playwright 사용한 Visual Regression Testing에 대하여


Speedometer 3.0: The Best Way Yet to Measure Browser Performance | WebKit

webkit.org/blog/15131/speedometer-3-0-the-best-way-yet-to-measure-browser-performance/

browser benchmark performance article

웹브라우저 엔진 벤치 마크 Speedometer 3.0 출시.
동기와 비동기처리 실행 시간을 보다 더 정확히 측정, HTTP Archive나 npm 다운로드 수 기반으로 이용되고 있는 프레임워크 조절.
또한, 지금까지는 TodoMVC 이용했지만, Next.js/Nuxt 사용한 미디어사이트나 그래피컬한 대시보드, CodeMirror와 TipTap 사용한 에디터도 테스트 가능


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


rolldown-rs/rolldown: Fast Rust bundler for JavaScript with Rollup-compatible API.

github.com/rolldown-rs/rolldown

rollup Rust vite library

Rollup 호환을 목표로하는 JavaScript Bundler.


edmundhung/conform: A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.

github.com/edmundhung/conform

React Next.js Remix library

Remix나 Next.js에서 서버 처리 대응한 폼 라이브러리.
Zod 같은 것과 조합함으로 서버측에서 검증이나 React의 useFormState와 조합해 동작


도서


Eloquent JavaScript

eloquentjavascript.net/

JavaScript book

Eloquent JavaScrip 4판(2024) 공개


Pull Request to this article
JSer.info Slackに参加する