Under-Engineered Select Menus | Adrian Roselli

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

---

• How to Build an Accessible Custom Dropdown Select Element
• Custom and Accessible Select Menus Aren't Easy: Part One – Chris Henrick

Building a multi-select component

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

aside {
  counter-reset: filters;

  & :checked {
    counter-increment: filters;
  }

  &::after {
    content: counter(filters);
  }
}

@media (pointer: coarse) {
  //
}

---

• React-ComboBox-Select-Only-with-Tippy - Codesandbox
• Combobox Pattern | APG | WAI | W3C

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

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

---

• How do I make a placeholder for a ‘select’ box?

매니페스트 V3로 마이그레이션¹

• host_permissions으로 분리
• action으로 통합(두군데 수정이 필요하다)

Footnotes

1. https://github.com/cbcruk/webext/commit/cbb36355871fb36d5f6c21752aae3400d2a97abf#diff-0f354ef5fd807996fa3f5a7a83ceb74025aa8f85862e321b8938988031e99711L3-L25 ↩

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

JSON.stringify(dude, (key, value) =>
  value instanceof Set ? [...value] : value
);
JSON.stringify(dude, null, "🍆");

• Tilted Angles in Sass - SitePoint
• Inverse trigonometric functions with Sass – TheSassWay.com

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)}%`;
}

인라인 요소에 bold 스타일이 적용될 경우 레이아웃 시프팅 현상이 발생하기 때문에 해당 이슈를 해결하는 방법들.

• html - Inline elements shifting when made bold on hover - Stack Overflow¹
• Bold on Hover… Without the Layout Shift | CSS-Tricks²

---

Footnotes

1. text-shadow로 우회하는 방법이 주 해결방법으로 올라왔다. ↩

2. content 속성과, grid 레이아웃을 이용한 방법. ↩

discard¹

git checkout -- <file>

git restore <file>

git reset --hard

리모트 브랜치 가져오기

git remote update

---

Footnotes

1. 명령어로 discard를 하려면 ↩