Show HN: Times New Bastard 같은 기괴한 글꼴 만들기
Bastardica는 여러 글꼴을 섞어 글자마다 다른 모양이 나타나는 OpenType 폰트를 만드는 브라우저 도구입니다. Pyodide와 fontTools로 로컬에서 작업하며, 결과물은 브라우저와 디자인 도구, 인쇄물에서 쓸 수 있는 일반 OpenType 폰트입니다.
개발·오픈소스 · 최신기사
개발 도구와 언어, 웹 기술과 오픈소스 프로젝트의 변화를 다룹니다.
FxEmbed — Discord·Telegram에서 X와 Bluesky 게시물 미리보기 개선
FxEmbed는 X/Twitter와 Bluesky 게시물을 Discord, Telegram 등에서 이미지·동영상·투표·번역과 함께 표시하는 프로젝트입니다. Cloudflare Worker 기반이라 Docker에서도 Wrangler로 로컬 Workers 런타임을 실행하며, glibc 호환성 때문에 Alpine 대신 Debian 기반 이미지를 사용합니다.
Cloudflare, HTTP의 골칫거리 Vary 지원 시작
Cloudflare가 모든 요금제의 Cache Rules에 HTTP Vary 지원을 추가했습니다. 요청 헤더를 정규화하거나 원본 값을 그대로 비교하고, 변동이 너무 큰 헤더가 포함된 응답은 캐시에서 제외할 수 있습니다. 잘못된 응답 제공을 막으면서 캐시 조각화를 줄이는 것이 목표입니다.
TypeScript 타입과 타입 가드가 조용히 어긋날 수 있습니다
TypeScript의 사용자 정의 타입 술어는 함수 본문이 타입의 모든 필드를 검사하는지 증명하지 않습니다. 글에서는 기존 타입과 가드 정의를 컴파일 시점에 연결하는 is-kit의 typedStruct를 소개하고, 타입 동기화와 런타임 추가 속성 검증은 별개의 문제라고 설명합니다.
프런트엔드 아키텍처를 하나로 설명하는 모델
글은 프런트엔드 구조를 브라우저의 탐색·조정, 서버의 콘텐츠, 클라이언트의 낙관적 UI 상태라는 세 책임으로 나눕니다. 이 관점으로 HTMX부터 SPA까지를 설명하고, Solid 2.0이 같은 모델 안에서 여러 구조를 표현하는 방법을 제안합니다.
DEV.to를 걸어 다니는 3D 도서관으로 만들었습니다 — 디버깅은 악몽이었습니다
Forem API에서 DEV.to의 실제 글 목록을 불러와 탐색 가능한 3D 도서관으로 구현한 과정을 소개합니다. 글이 수천 건으로 늘면서 발생한 위치 이동과 React ref 타이밍 문제를 추적하고, 결정론적 경로와 선반 배치로 해결한 경험을 설명합니다.
모바일 `100vh` 문제를 JavaScript로 고치지 마세요
모바일 브라우저에서 `100vh`는 현재 보이는 화면이 아니라 브라우저 UI가 접힌 상태의 높이를 기준으로 삼을 수 있습니다. 글은 `dvh`, `svh`, `lvh`의 차이를 설명하고, 목적에 맞는 CSS 뷰포트 단위를 쓰면 JavaScript 우회 코드를 없앨 수 있다고 안내합니다.
Impeccable — AI 코딩 도구에 디자인 지침과 검사 기능을 더하는 도구
Impeccable은 AI 코딩 도구에서 프런트엔드 디자인을 계획하고 다듬도록 돕는 스킬과 CLI입니다. 24개 명령과 61개 결정론적 검사 규칙을 제공하며, 브라우저에서 시안을 반복 수정하거나 CI에서 디자인 문제를 탐지할 수도 있습니다.
resize 디바운싱을 멈추세요. 브라우저가 이미 변화를 감지합니다
창 크기 변경 때마다 실행하는 resize 핸들러 대신 matchMedia()의 change 이벤트를 쓰면, 미디어 쿼리 조건이 바뀌는 순간에만 반응합니다. 화면 너비뿐 아니라 prefers-reduced-motion 같은 설정 변화도 감지할 수 있습니다.
NestJS 테스트 모듈의 Provider 교체와 사용법 요약
NestJS의 테스트 모듈은 단순한 mock 저장소가 아니라 실제 애플리케이션과 같은 의존성 주입(DI) 컨테이너를 구성합니다. 글은 provider 교체 방법과 get()·resolve()의 차이, 요청 범위 provider의 컨텍스트 공유, 가드와 파이프를 바꾸는 E2E 테스트 방법을 설명합니다.
Pulsetic RUM — 실제 방문자 경험을 측정하는 모니터링
Pulsetic RUM은 실제 방문자의 Core Web Vitals, 페이지 로딩 시간, JavaScript 오류를 수집하는 모니터링 기능입니다. 합성 가동 시간 검사로는 놓치는 사용자 경험 문제를 파악하며, 기존 모니터링 도구와 함께 사용할 수 있습니다.
PixelCrew — AI 에이전트 팀이 만드는 프로덕션용 디자인
PixelCrew는 여러 AI 에이전트가 조사, 크리에이티브 방향 설정, 와이어프레임, QA를 거쳐 디자인 시스템과 HTML을 만드는 도구입니다. 알파 버전은 무료이며 OpenRouter 키를 연결해 원하는 모델을 사용할 수 있습니다.
차분한 UI를 만드는 간단한 가이드
이 글은 저장·삭제 대화상자의 로딩 상태와 알림 토스트를 줄여 사용자가 작업 결과를 바로 확인하게 하는 방법을 소개합니다. 오류 메시지 위치, 키보드 제출, 입력란 자동 포커스처럼 작은 UI 동작도 함께 다룹니다.
WordPress 비인증 경로 순회 취약점, 조건에 따라 원격 코드 실행 가능
WordPress의 페이지 템플릿 탐색 과정에서 인증 없이 경로 순회를 일으켜 테마 디렉터리 밖의 PHP 파일을 불러올 수 있는 취약점이 발견됐습니다. 테마와 서버 설정 등 조건이 맞으면 원격 코드 실행으로 이어질 수 있으며, WordPress 7.1.2와 4.7 이후 각 브랜치에 수정 사항이 배포됐습니다.
SAML: 나쁜 설계가 반복되는 프로토콜
Trail of Bits는 XML 서명과 정규화, 구현 간 파서 차이, 과도한 명세 범위가 SAML의 보안과 유지보수를 어렵게 만든다고 설명합니다. 새 서비스에는 OpenID Connect(OIDC)를 우선 적용하고, 기존 SAML 연동은 단계적으로 종료하자는 주장입니다.
AI 크롤러 차단용 robots.txt를 붙여 넣다가 기존 규칙을 풀 수 있습니다
robots.txt에 AI 봇 전용 그룹을 추가하면 해당 봇에는 와일드카드(*) 그룹 규칙이 적용되지 않을 수 있습니다. 기존 Disallow 규칙을 유지하려면 현재 파일을 확인한 뒤 바꾸려는 규칙만 수정하고, 같은 사용자 에이전트 그룹은 RFC 9309에 따라 결합해야 합니다.
Laravel은 생각만큼 무겁지 않습니다
Laravel 13의 요청 메모리를 PHP-FPM에서 측정한 결과, OPcache를 켠 기본 경로의 피크는 0.66MB였고 프레임워크 부팅분은 316KB였습니다. 반면 Eloquent 모델 1만 건을 한꺼번에 읽으면 약 18MB가 들었습니다. 메모리를 줄이는 데는 프레임워크 설정 조정보다 조회 결과를 나눠 읽는 일이 훨씬 큰 효과를 냅니다.
Gradio Workflow — 노드를 연결해 AI 파이프라인 구축, Hugging Face 기반
Gradio Workflow는 시각적 캔버스에서 Hugging Face Spaces, 모델, 데이터셋과 Python 함수를 노드로 연결해 AI 파이프라인을 만드는 도구입니다. 중간 입출력을 확인하고 모델을 교체할 수 있으며, 결과물은 URL로 공유하거나 REST API로 실행합니다.
dream-num/univer, AI 에이전트를 위한 Office SDK
Univer는 스프레드시트, 문서, 프레젠테이션을 제품 안에 임베드하는 오픈소스 Office SDK입니다. 플러그인 아키텍처와 Canvas 렌더링, 수식 엔진, Facade API를 제공하며 브라우저와 Node.js의 헤드리스 환경에서 같은 런타임을 사용합니다.
Flicka — Chrome 확장 프로그램으로 바로 만드는 제품 데모
Flicka는 화면 녹화 중 클릭 위치를 따라 자동 확대하고, 타임라인 편집과 주석, 웹캠 레이아웃, MP4·WebM·GIF 내보내기를 제공하는 Chrome 확장 프로그램입니다. 녹화·편집·내보내기가 모두 기기에서 실행되며 계정과 업로드가 필요 없습니다.