읽은 좋은 글들 (~21.7.5)
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 사용 시 state
나 action
에 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 뱅크샐러드 개발 문화
뱅크샐러드의 코드 리뷰 문화가 정리되어 있는 글이다. 잘 읽히는 상세한 글이다.
목차