HTMLcat, 잊기 쉬운 웹 기능 42가지 정리
Small, native web tricks worth remembering
HTMLcat은 HTML, CSS, JavaScript의 유용하지만 잊기 쉬운 기능을 포스트잇 형태로 정리한 사이트다. 현재 42개의 팁이 있으며, 각각은 기능 설명, 작은 예제, 그리고 지원 범위에 대한 주의사항을 포함한다. 예를 들어, CSS의 :has() 선택자, dialog 요소, Popover API, View Transitions API 등을 다룬다. 실험적이거나 제한적인 기능도 포함되어 있어, 지원 라벨을 확인하고 폴백을 유지하며 실제 브라우저와 보조 기술로 테스트할 것을 권장한다. 개발자라면 한 번쯤 유용하게 참고할 만한 목록이다.
HTML, CSS, JavaScript는 우리가 기억하는 것보다 더 많은 일을 할 수 있다.
HN 토론
58- m-s-y
자동차 대리점에 가서 여러 자동차에 대해 읽을 수 있을 때 좋아요. 특히 차가 실제로 없을 때 말이죠. 사실 차 사진 한 장도 없어요. 그래, 그게 내 취향이야.
- moontear
좋은 설명과 힌트가 몇 가지 있지만, 이 사이트에 정말 필요한 것은 예시입니다. 코드만 보는 것은 별로 도움이 되지 않아요. 설명도 대부분 너무 짧아서 홈페이지의 툴팁으로도 충분할 정도입니다. 이 페이지의 전체 전제는 '기억할 가치가 있는 웹 트릭'의 모음인데, bash(예: `du -hd 1 . | sort -hr`)가 왜 여기 있는지 이해할 수 없습니다.
- zeroq
저만 그런지 모르겠지만, 이건 시간 낭비(또는 긍정적으로 말하면 잠재력)처럼 보입니다. 첫 번째 예시인 'JS에서 기기 유형'만 봐도요. '거친 포인터가 모바일을 의미하지는 않으며, 정밀한 포인터가 데스크톱을 보장하지 않습니다. 사용자 에이전트에서 기기를 추측하는 대신 브라우저에 입력 기능을 물어보세요.'
const input = {
finePointer: matchMedia('(any-pointer: fine)').matches,
coarsePointer: matchMedia('(any-pointer: coarse)').matches,
canHover: matchMedia('(any-hover: hover)').matches,
};
그래서 기기 유형을 식별하는 방법을 알려주지 않습니다. 코드를 실행해서 모바일과 데스크톱 간의 결과를 빠르게 비교하여 기준을 세울 수도 없습니다.
- apples_oranges
스크롤바 숨기지 말아주세요 :)
- herrherrmann
깔끔하네요! 저는 이런 주관적인 목록을 좋아합니다. 특히 탐색하고 유용한 것을 골라내기 쉬울 때요. 하지만 기능의 호환성을 언급하는 것이 매우 좋을 것 같아요. 특히 새로운 CSS 기능의 경우 브라우저 호환성을 과대평가하기 쉽습니다. 이를 위해 관련 MDN 및/또는 caniuse.com 페이지에 대한 링크를 제공할 수 있습니다.