CSS

Perfect Tooltips With CSS Clipping and Masking

CSS로 말풍선 모양의 툴팁을 구현하는 내용이다. 단순히 네모와 그 아래 세모를 붙이는 것으로 끝나지 않고, 말풍선 모양으로 사진을 클리핑하는 것까지 구현한다. svg(특히 clip-path)를 활용한다.

Using Performant Next-Gen Images in CSS with image-set

이제는 거의 모든 모던 브라우저에 탑재된 image-set 속성에 대해 설명하는 글이다. 간단히 설명하면 모바일 앱처럼 사용자의 해상도나 네트워크 상태에 따라 적절한 이미지를 보여주는 기능이다. 글에서는 다른 비슷한 기능들과 비교하며 사용 예를 설명해고 있다.

Detecting Hover-Capable Devices

hover가 가능한 기기와 그렇지 않은 기기를 구분할 수 있는 미디어 쿼리에 대해 설명하는 글이다.

JavaScript

Modern Javascript: Everything you missed over the last 10 years (ECMAScript 2020)

지난 10년간 있었던 자바스크립트의 새로운 기능들에 대해 간략히 정리한다. 제목의 말마따나 빼먹은 게 있는지 체크해볼 수 있다.

THE REDUX BEST PRACTICE “DO NOT PUT NON-SERIALIZABLE VALUES IN STATE OR ACTIONS” EXPLAINED

Redux 사용 시 stateaction에 non-serializable 데이터를 사용하면 안 되는 이유에 대해 설명한다. (여기서 seriealizable 데이터란 JSON.parse()JSON.stringify()를 차례로 써서 원본 데이터를 얻을 수 있는 데이터라고 이해하면 쉽다.)

당연히 쓰지 않는 게 좋지만 개발자의 판단에 따라 쓰고 싶다면 써도 된다고 말하기도 하는데, 이 글에서 인용한 Redux 공식 문서에 재미있는 말이 나와있다.

If you are okay with things like persistence and time-travel debugging potentially not working as intended, then you are totally welcome to put non-serializable items into your Redux store. Ultimately, it's your application, and how you implement it is up to you.

your application이 강조되어 있는 게 재미있다.

개발문화

페어 프로그래밍이란 무엇 일까?

페어프로그래밍의 장단점, 하는 방법 등이 읽기 좋게 정리되어 있다.

코드 리뷰 in 뱅크샐러드 개발 문화

뱅크샐러드의 코드 리뷰 문화가 정리되어 있는 글이다. 잘 읽히는 상세한 글이다.