계속 개발을 지속하기 위해서.

계속 개발을 지속하기 위해서.

On Long Term Software Development - Bert Hubert's writings

Recently the Dutch Electoral Board (where I am also a very part time advisor) invited me to do a talk reflecting on their open source Abacus vote tabulation software. Much software is now provided as a service, and is typically deployed continuously (CD, continuous deployment), surrounded by enough automated testing (CI, continuous integration) that we can be reasonably sure that a new revision is likely to at least work to some extent.

소프트웨어를 지속적으로 개발하기 위해서 의존성을 항상 고민하고, 종종 해당 의존성이 맞는지 고민해봐야 한다는 권장부터, 여러가지 생각해볼만한 요소를 제시하는 글입니다. 이러한 고민을 항상할 수는 없겠지만, 주기적으로 해야하고 이를 위해서 항상 배워야 한다는 것은 변치 않습니다.

빌드타임 소셜 이미지 생성

Build-time Open Graph Images in Remix - kettanaito.com

Generate Open Graph images in Remix on build time with this neat library.

단순히 OG image를 런타임 생성 대신에 빌드타임에 생성하는 방안을 소개하는 글입니다. 지엽적인 요구사항에서만 사용할 수 있는 아이디어지만, Server Component를 빌드타임에 실행하는 방법과 같이 런타임에 실행하던 과정을 빌드타임으로 옮기는 방식은 장단점을 고려해서 적용해볼만 하겠네요.

글꼴에 숨어있는 것들

Why I’m excited about text-box-trim as a designer - Piccalilli

Jason Bradberry shows us what’s possible in the real world with the new CSS text-box-trim capabilities from a designer’s perspective, and gives us a deep dive into the text spacing and alignment problems it solves.

주 내용은 text-box, text-edge와 같은 신 기능(뉴스레터 배포 당시 draft상태임)이 좋은 이유이지만, 글꼴에 관련된 CSS 속성(거의 line-height)에 숨은 텍스트 정렬에 대한 어려움을 아는데에 도움이 됩니다.

이제 React form 라이브러리가 필요없을지도?

React Form Validation

How to validate forms in React without a form library on the server and the client ...

React 19에서부터 useActionState, useFormStatus와 같은 폼 관련 훅을 제공합니다. 물론 react-hook-form, conform같은 라이브러리는 강력하지만, 다른 시스템과 결합하려면, 기본 기능을 기반으로 훅을 만들어볼 수도 있을 것 같네요.

React와 DOM

Web Performance Calendar » 5 tips to effectively optimize INP in React

In this post, let's consider several optimization techniques for improving Core Web Vitals metrics for sites that are built with React. We are a team of speed consultants from the Czech Republic and in this article we would like to share some experiences from the many front-end performance optimiza

React에서 흔히 고려할 만한 성능이 느려지는 부분, 그리고 가장 중요한 DOM 크기에 대한 부분을 소개합니다. 이를 해결하는 방법은 글에 쓰여진 부분 외에도 원인에 따라 다르지만, 성능을 느리게 하는 원인을 찾기 위해 시작점으로 두고 시작해도 좋아보입니다.

i18n 검증하기

국제화 관련 파일이 유효한지 확인하는 방법을 추가해보는 과정을 적은 글입니다. 자신들의 패키지를 추천하는 글이지만, 아이디어는 여러 방식으로 구현해볼만 하네요.

성능 최적화를 어필하기

Why Your Performance Work Is Not Seen by Vinicius Dallacqua

This Talk discusses the importance of performance work and how to drive performance governance. It emphasizes the need to frame data, set meaningful budgets, and understand both engineering and product perspectives. The Talk also highlights the significance of delivering value, establishing solid performance governance, and gaining buy-in from management. Additionally, it emphasizes the importance of measuring performance, optimizing through data, and collecting performance data using tools like Speedcurve and Bugbear Sentry. The speaker also mentions their training program and expresses gratitude towards the audience.

리팩토링이나 성능 최적화같은 작업을 정당화하기 위해 할 수 있는 작업들을 소개하는 글입니다. Lighthouse와 CrUX 데이터의 차이부터 모니터링 데이터를 쌓는 방식을 구체적으로 소개하는 글이니 성능 최적화에 들어가기 전에 보면 좋은 발표입니다. 비슷하게 web.dev에서 올린 웹 성능을 사업 지표에 연관짓기나 Core Web Vitals 쉽게 이해하기도 보면 좋습니다.

TypeScript 더 잘 쓰기

Dive Into Advanced TypeScript by Luca Del Puppo

Today's Talk discusses TypeScript and its relationship with JavaScript, emphasizing the importance of studying JavaScript first. The Talk explores type guards, runtime type checking, and the use of the 'never' type to handle errors and ensure type safety. It also delves into alternative solutions for type handling, branded types, and schema-based validation using Zod. The Talk concludes with advice on migrating to TypeScript and the need for beginner-friendly documentation and strictness in code.

TypeScript를 더 잘 쓰는 방법을 소개하는 발표입니다. 알 수도 있는 Type Guard부터 런타임 타입 검증, never타입을 기본 값에 넣기, assert... 여러가지 TypeScript를 더 잘 사용할 수 있는 기술을 소개합니다. 모두 적용해보는 건 어렵겠지만, 알아두면 좋습니다.

모를 수도 있는 최신 API들

Install Nothing: App UIs With Native Browser APIs by Scott Tolinski

This Talk introduces real demos using HTML, CSS, and JavaScript to showcase new or underutilized browser APIs, with ship scores provided for each API. The dialogue element allows for the creation of modals with minimal JavaScript and is supported by 96% of browsers. The web animations API is a simple and well-supported solution for creating animations, while the view transitions API offers easy animation workarounds without CSS. The scroll snap API allows for swipers without JavaScript, providing a smooth scrolling experience.

최근 baseline에서 지원하게 된 여러 애니메이션 관련 브라우저 API, HTML 요소, CSS 속성들을 소개하는 발표입니다. 아직 구식 브라우저에 100% 지원을 해야한다면 쓰기 어렵겠지만, 아니라면 사용해볼만합니다.