📎

Amazon CloudFront Developer Guide

docs.aws.amazon.com
#aws#cloudfront#download
#141

Under-Engineered Select Menus | Adrian Roselli

  • font, letter-spacing, word-spacing 상속
  • appearance 화살표 수정
  • 상태(focus, required, invalid)에 따른 스타일 추가
#select#css
#134

Building a multi-select component

다중 선택 UI를 구현하기위해서 checkbox, select 두가지 방법으로 작업하는 방식을 소개하고 있다. 그외 선택된 상태값을 얻기위한 counter() 함수, 모바일 체크를 위한 미디어쿼리도 알려주고 있다.

aside {
  counter-reset: filters;

  & :checked {
    counter-increment: filters;
  }

  &::after {
    content: counter(filters);
  }
}
@media (pointer: coarse) {
  //
}
#select#css#uistackblitz.com
#133

디자인 된 <select />에 placeholder 개념이 있어서 어떻게 하면 좋을지 찾아봤다. 간략하게 설명하자면 선택이 불가능하게 disabled 추가하고 hidden으로 숨김 마지막으로 selected로 디폴트값을 처리하면 완성.

function Select({ placeholder, children }) {
  return (
    <select>
      <option value="" disabled hidden selected>
        {placeholder}
      </option>
      {children}
    </select>
  )
}
#html#select
#132
📎

WebExtensions

developer.mozilla.org

Footnotes

  1. 새롭게 문서사이트가 개편되면서 현실적인 도움이 된다. ↩

  2. v3로 이전하기 위한 대략적인 가이드. 직접 옮겨보니 host_permissions으로 분리, action으로 통합(두군데 수정이 필요하다) — webext 커밋 ↩

  3. service_worker로 변경되면서 추가적으로 가이드 문서가 새로 생겼다. ↩

  4. mdn 스타일이 좋다면 이쪽 문서도 괜찮다. ↩

  5. next 구성으로 익스텐션 만들기 ↩

#extensions#cookies#i18n
#127

TIL — The power of JSON.stringify replacer parameter | pawelgrzybek.com

JSON.stringify(dude, (key, value) =>
  value instanceof Set ? [...value] : value
);
JSON.stringify(dude, null, "🍆");
#json
#124
function getTiltedHeight(angle) {
  const a = 100;
  const A = 90 - angle;
  
  const c = a / Math.sin(Math.PI * A / 180);
  const b = Math.sqrt(Math.pow(c, 2) - Math.pow(a, 2));
  
  return `${Math.abs(b)}%`;
}
#angle#math
#122
📎

<img>: The Image Embed element

developer.mozilla.org

Footnotes

  1. alt ↩

  2. 최신 이미지 형식(AVIF 또는 WebP)이 압축을 최대 50%까지 개선하고 시각적으로 매력적으로 보이면서도 바이트당 더 나은 품질을 제공할 수 있는 방법을 강조 ↩

  3. 이미지 사용 및 최적화는 복잡하다. 그래서 개발자가 성능과 품질사이의 균형을 잘 조절해야 한다. 그래서 매번 자체적으로 개발하는 문제 대신 프레임웤 레밸에서 모범사례를 만드는게 중요하다. ↩

  4. css에서 사용가능한 image-set(). type 기능은 아직 진행중. ↩

  5. 반응형 이미지 대응을 위한 가이드 ↩

  6. webp 기능탐지 방법을 가이드하고 있다 ↩

#image#img#cloudflare
#121
📎

CSS containment

developer.mozilla.org

Footnotes

  1. 초기로딩 속도를 개선하기 위한 content-visibility: auto 적용에 관한 글. ↩

  2. 접근성관련 스크린리더에서 혼란스러울수도 있는 부분에 대한 설명이 추가되어 있다. ↩

  3. 성능관련 css 속성을 언제(계속 권장인지, 문제가 있을때인지) 써야 맞는건가에 대한 의문이 담긴 의견. ↩

#css#content-visibility#contain#performance
#117
📎

CSS masking

developer.mozilla.org

mask — 현재 개체를 배경으로 합성하기 위한 알파 마스크를 정의

Footnotes

  1. clip-path: inset(0 0 0 0); 방향에 따라서 버튼 배경색이 확장되는 모션. 방향은 삼각형(polygon()) 4개를 각 방향에 맞춰 위치시키면 된다. ↩

  2. 화살표 모양 그리기와 filter: drop-shadow로 그림자 효과 생성하기 ↩

#css#clip-path#mask#svg
#116
33 중 26페이지
이전 페이지다음 페이지