웹기술 도감
브라우저에서 지금 쓸 수 있는 웹 기능 1,679개 — Baseline 지원 상태와 Chrome 신기술 단계를 한눈에. “이렇게까지 된다.”
🧭 구조 레퍼런스 — 실제 사이트는 페이지를 어떻게 나눌까 →🔥 이렇게까지 된다
브라우저에서 실제로 돌아가는 감탄 데모 — 매주 갱신
수많은 CSS 색상을 시각적으로 정렬해 보여주는 아름다운 색상 도감이다.
Show HN: Sorted CSS Colors – Sort the named CSS colors in a nice way
평범한 웹 페이지를 학술 논문처럼 격조 있는 LaTeX 스타일로 바꿔준다.
Show HN: LaTeX.css – Make your website look like a LaTeX document
CSS 선택자만으로 어떤 웹사이트든 RSS 피드를 생성하는 기발한 도구다.
Show HN: RSS feeds for arbitrary websites using CSS selectors
웹 디자인 경험을 완전히 바꿀 정도로 강력하고 직관적인 인브라우저 에디터다.
Show HN: I made CSS Pro, a re-imagined Devtools for web design
논리 게이트를 조합해 GPU를 직접 설계하는 경이로운 브라우저 게임이다.
Show HN: I made puzzle game IT THINKS – you build a GPU from logic gates
복잡한 CSS 속성을 시각적으로 한눈에 확인하는 인터랙티브 가이드다.
Show HN: A visual guide to the most popular CSS properties
카운터 스트라이크 1.6의 추억을 웹 UI로 완벽하게 재현했다.
Show HN: Cs16.css – CSS library based on Counter Strike 1.6 UI
클릭 한 번으로 즉시 복사해 쓰는 고퀄리티 인터랙션 효과 모음이다.
Show HN: CSSFX – Click-to-copy CSS effects
브라우저에서 직접 제어하는 실시간 DSP 사운드 시뮬레이션이다.
Show HN: Yagi DSP Modulation SIM
복잡한 논리 퍼즐을 브라우저상에서 완벽하게 인터랙티브하게 풀어낸다.
Show HN: A puzzle I couldn't solve for a year – cubers cracked it in an hour
브라우저 확장 기능을 활용해 보안과 AI를 긴밀하게 연결했다.
Show HN: Confidential AI browser extension – alternative to OpenAI Atlas
고가의 산업용 신호 제어 장비를 웹앱만으로 놀랍게 대체해버렸다.
Show HN: Replacing $5K industrial signal towers with a webapp [video]
1,679개 · 1/84 페이지
:state()
:state() CSS 의사 클래스는 ElementInternals.states API로 설정한 커스텀 상태를 기준으로 커스텀 요소와 일치한다.
<input type="file" webkitdirectory>
<input type="file" webkitdirectory> HTML 요소는 사용자가 폼과 함께 업로드할 폴더를 고를 수 있는 파일 선택기를 표시한다.
AbortSignal.timeout()
AbortSignal.timeout() 정적 메서드는 지정된 시간이 경과한 후 자동으로 중단되는 중단 신호를 반환한다.
Active view transition
:active-view-transition CSS 의사 클래스는 뷰 전환이 활성 상태일 때 루트 요소와 일치하며, :active-view-transition-type() CSS 의사 클래스는 활성 뷰 전환이 지정된 타입으로 시작되었을 때만 일치한다.
Animation accessors
The animation property of an AnimationEvent or TransitionEvent object is the Animation object that represents the animation (and thus the element) that fired an animation event.
Async clipboard
navigator.clipboard API는 시스템 클립보드를 비동기적으로 읽고 쓴다.
Asynchronously iterable streams
스트림의 비동기 순회를 사용하면 for await … of 루프로 스트림의 수신 데이터를 순회할 수 있다.
Branch hinting (WebAssembly)
WebAssembly의 분기 힌트는 분기가 특정 경로로 진행될 가능성이 높을 때 브라우저가 성능을 최적화할 수 있게 한다.
CSP violation reports
CSP 위반 보고는 페이지가 콘텐츠 보안 정책을 위반할 때 Reporting-Endpoints 헤더 또는 ReportingObserver API로 지정한 URL에 보고서를 보낸다.
ClipboardItem.supports()
ClipboardItem.supports() 정적 메서드는 브라우저가 "image/svg+xml" 같은 데이터 타입이나 기타 사용자 지정 형식을 시스템 클립보드에 쓰는 것을 지원하는지 확인한다.
Color management for WebGL
WebGLRenderingContext의 drawingBufferColorSpace와 unpackColorSpace 속성은 "srgb"나 "display-p3"처럼 버퍼와 가져온 텍스처의 색 표현을 설정한다.
Color management for WebGL2
WebGL2RenderingContext의 drawingBufferColorSpace와 unpackColorSpace 속성은 "srgb"나 "display-p3"처럼 버퍼와 가져온 텍스처의 색 표현을 설정한다.
Custom highlights
사용자 지정 하이라이트는 DOM에 요소를 추가하지 않고 임의의 텍스트 범위에 스타일을 적용한다.
EXT_texture_compression_rgtc WebGL extension
WebGL 1.0 및 2.0 컨텍스트용 EXT_texture_compression_rgtc 확장은 RGTC 압축 텍스처 형식을 추가한다. RGTC는 부호 없는 및 부호 있는 red 및 red-green 텍스처에 적합한 블록 기반 텍스처 압축 형식이다. Red-Green Texture Compression이라고도 한다.
Event timing performance entries
event 또는 first-input 성능 항목은 마우스 클릭이나 키 입력 같은 사용자 입력 이벤트의 지연 시간을 측정한다. 이는 체감 응답성의 일반적인 지표인 INP(Interaction to Next Paint)를 계산하는 데 사용된다.
Exception references with exnref (WebAssembly)
예외가 잡히면 예외는 새로운 타입 exnref의 값인 예외 참조로 구체화(reify)된다.
Fetch priority
fetch() priority 옵션과 fetchpriority HTML 특성은 같은 유형의 다른 요청보다 먼저 수행할 요청이 무엇인지 브라우저에 힌트를 준다.
Garbage collection (WebAssembly)
가비지 컬렉션은 WebAssembly에서 실행되는 가비지 컬렉션 언어의 메모리 관리를 개선하기 위해 참조를 추적한다.
Invoker commands
<button> HTML 요소의 command와 commandfor 특성은 버튼이 (클릭이나 키 입력으로) 호출될 때 요소에 동작을 전달하며, addEventListener() 호출이나 onclick 특성 핸들러의 선언적 대안이다.
JavaScript modules in service workers
navigator.serviceWorker.register() 메서드는 { type: "module" }을 받아 import와 export를 사용하는 스크립트를 불러온다. 서비스 워커의 ECMAScript 모듈 또는 ESM이라고도 한다.