Figma의 TypeScript 전환 여정

Figma의 TypeScript 전환 여정

Figma’s journey to TypeScript | Figma Blog

Figma's team recently converted one of its codebases from a custom programming language to TypeScript without disrupting a single day of development.

심윤섭: Figma에서 Skew언어에서 TypeScript로 변경하였다는 재밌는 글입니다. Skew to TypeScript 프로젝트가 점진적으로 어떻게 이루어져있는지, 트랜스파일러 개념과 소스맵, 트리 셰이킹을 어떻게 해결했는지를 보여줍니다. 단지 점진적으로 TypeScript로 변경하는 프로젝트에 대한 글이지만 안에 들어간 개념을 링크와 함께 설명하고 있으므로 시간을 들여 보시길 추천합니다.

Monkey Patch를 하지 마세요.

Why Patching Globals Is Harmful - kettanaito.com

Why I believe patching globals is a bad API design.

심윤섭: 이전에 가져온 여러 글과 비슷한 주장이 담긴 글입니다(React 18에서의 불만, 추상화는 적절하게). 그 중에서 Monkey patch, 즉 global API(어떻게 보면 플랫폼 API라고 볼 수 있겠네요)를 임의 수정하면 나쁜 점(유지 보수 힘듦, 락인 효과, 추가로 배워야 한다는 점)을 말합니다. 이전의 추상화는 적절하게 글에도 말했듯이 적절한 추상화가 중요하지만.. 어렵습니다. 후에 디자인 시스템이나 공용 라이브러리를 만들 때도 생각해야 할 수도 있기 때문에 이 글을 보시고 한 번 고민해보는게 좋다고 생각합니다.

Submenu의 UX 고려점

Creating a pointer-friendly submenu experience – React Spectrum Blog

We are excited to announce support for submenus in the latest release of React Spectrum and React Aria! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the way.

심윤섭: 이전에 가져왔던 글(상호작용 범위 더 좋게 만들기)중 하나인 submenu 파트를 더 다듬어서 더 다양한 요인을 생각해서 구현한 글입니다. UX 개선에 대한 사고 과정을 엿볼 수 있으므로 UX에 관심이 있다면 보시길 추천드립니다. 아니면 UX를 개선하기 위해 React spectrum을 사용하셔도 되구요.

브라우저를 탐지하지 마세요.

심윤섭: 브라우저 Fingerprinting을 막기 위해 Chrome팀은 User Agent reduction을 적용했습니다. 그 대안으로 나온 User Agent Client Hint가 있지만 아직 이에 대한 논란이 많습니다(Firefox의 의견). 그래서 저자는 브라우저를 탐지하고 지원하지 않는 브라우저를 차단하는 대신 기능을 지원하는지 탐지만 하고 차단하지 않기를 권장합니다.

행동의 지역성

Locality of Behavior in React Components | Alex Kondov - Software Engineer

You don’t need design patterns or principles to build software. You can write everything in a single file that executes from top to bottom and I’ll sure you’ll…

심윤섭: 저자는 자신의 글(리액트에서 아키텍쳐)을 바탕으로 HTMX 개발자가 말한 행동의 지역성을 React에 적용하는 방식을 소개합니다. 저자는 이름 잘 짓는 것만 말하지만 변수와 함수의 이름은 역할을 말하고 있으므로 파일만 보고 판단할 수 있도록 강력하게 도움을 줍니다. 이름에 따라 구현이 변할 수도 있구요. 이름 잘 지어야겠네요.

CSS Specificity에 대한 오해

Misconceptions about CSS Specificity – Bram.us

심윤섭: CSS specificity에 대해 설명하는 글은 매우 많습니다. 많다보면 개인이 해석한 결과가 다를 수도 있고, 그 중에는 다른 개념을 추가로 넣어서 설명하는 경우도 있습니다. 이 글은 CSS Specificity에 대한 잘못된 개념을 바로잡아줍니다. 항상 교차검증을 하는 것은 중요하다고 느낍니다 😂

CSS minify를 신경쓰지 않는 이유

Why don’t we talk about minifying CSS anymore? | Product Blog • Sentry

Remember Grunt files? Gulp files? We rarely need to think about CSS minification, chunking, splitting and post-processing anymore. Here's why.

압축, HTTP2의 다중화가 발달했고, 특히 모던 프레임워크의 code spliting, minify, optimzing을 모두 담당해서 CSS minify에 더 신경쓰지 않을 수 있게 되었다는 글입니다.

Gulp is back.

Announcing Gulp v5. It’s been a long road to gulp 5, but… | by Blaine Bublitz | gulpjs | Mar, 2024 | Medium

It’s been a long road to gulp 5, but we’re finally here! This release contains four years worth of work on over 60 projects. Together, the team has closed over 200 issues and pull requests. 🤯 From…

죽은줄만 알았던 Gulp이 돌아왔습니다. Node 8 안 써도 되겠네요 🎉

Chrome의 사전렌더링 API

Speculation Rules API 개선  |  Blog  |  Chrome for Developers

플랫폼의 문서 규칙, 즉시 설정, 한도, 추측 규칙 지원 등 Speculation Rules API의 최신 업데이트에 관한 세부정보입니다.

Chrome에서는 prerender를 위해 Speculation Rules API를 예전에 만들었고, 그에 대한 업데이트를 발표했습니다. 물론 Chrome 기반 브라우저만 작동하고, 방식은 deprecated되었습니다.

Effect는 함수형 TypeScript의 꿈을 꾸는가

예전의 글(ReScript는 TypeScript의 꿈을 꾸는가)에서 소개한 비슷한 라이브러리지만 Effect는 언어를 새로 만들지는 않고 라이브러리에서 많은 기능을 제공하는 형태로 함수형 프로그래밍과 Type 시스템 강화, 동시성 강화를 구현했습니다. 물론 ReScript와 똑같이 배우는데에 매우 많은 시간이 들고, 이 라이브러리에 크게 종속된다는 점은 단점으로 꼽히겠지만요.

Can I use..?

Can I email… Support tables for HTML and CSS in emails

Support tables for HTML and CSS in emails

Can I use의 Email, Webview판입니다. 나중에 데이터가 모두 모이면 좋은 사이트가 되겠네요. 😃