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

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

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

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

Footnotes

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

#extensions
#128

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

텍스트 ellipsis 처리. 컨텍스트(table-cell, flex, multiline)에 따라 패턴이 다름.

table cell

display: table-cell은 width 제약 없이 content 크기에 맞게 늘어남. overflow: hidden이 동작하려면 명시적 width bound가 필요한데, table 기본 레이아웃이 그것을 허용하지 않음.

/* ❌ 아무 효과 없음 */
td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

해법: table-layout: fixed + max-width: 0.

table {
  table-layout: fixed;
  width: 100%;
}

col:nth-child(1) { width: 30%; }
col:nth-child(2) { width: 40%; }
col:nth-child(3) { width: 30%; }

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

max-width: 0이 실제 0px이 되는 게 아님. table-layout: fixed 컨텍스트에서 “이 셀은 content 기반으로 너비를 주장하지 않는다”는 시그널로 작동하여 colgroup/th에서 받은 너비 안에서 overflow가 동작. 둘은 반드시 함께 있어야 함.

컬럼별 선택적 적용

td:not(.col-action) {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

td.col-action {
  white-space: nowrap;
}

셀 안에 복합 요소

버튼/배지 등이 텍스트와 함께 있을 때 inner wrapper에 위임.

td {
  max-width: 0;
}

td > div {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

td > div > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

React 컴포넌트 패턴

TanStack Table size 옵션과 조합.

const columns = [
  columnHelper.accessor('name', {
    size: 200,
    cell: ({ getValue }) => (
      <span style={{ display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        {getValue()}
      </span>
    ),
  }),
]

<table style={{ tableLayout: 'fixed', width: '100%' }}>
  <colgroup>
    {table.getFlatHeaders().map(header => (
      <col key={header.id} style={{ width: header.getSize() }} />
    ))}
  </colgroup>
  ...
</table>

재사용 셀 래퍼:

function EllipsisCell({ children }: { children: React.ReactNode }) {
  return (
    <td style={{ maxWidth: 0 }}>
      <div style={{
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      }}>
        {children}
      </div>
    </td>
  )
}

flexbox / multiline 참고

Footnotes

  1. flexbox | 파일명에 ellipsis 효과 적용, 단 파일 확장자는 제외. ↩

  2. :truncated 개념이 없기 때문에 ResizeObserver와 영역값을 체크해서 구현. ↩

#css#ellipsis#table#text-overflow#layout
#108

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

Footnotes

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

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

#css#layout shift#bold
#107

최신 CSS 기능 및 트렌드

레이아웃과 반응형 디자인

CSS 애니메이션 및 효과

텍스트 및 타이포그래피

스타일 가이드 및 접근성

CSS와 JavaScript의 조합

CSS 아키텍처 및 모듈화

background

#css#bookmarks
#106

discard1

git checkout -- <file>

git restore <file>

git reset --hard

리모트 브랜치 가져오기

git remote update

Footnotes

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

#git
#105
# 마지막 커밋 해시
git log --pretty=format:'%h' -n 1
# 유저정보
git config user.name
git config user.email
#git
#101

Using Slack Slash Commands to Send Data from Slack into Google Sheets

  1. 사람들이 추천한 책을 기록한다
  2. 슬랙 -> 구글시트
  3. 슬랙 커맨드 설정 /book + 구글앱스 스크립트 url 연결1
  4. POST로 전송 받은 데이터값을 기반으로 데이터 처리 완료

Footnotes

  1. 꿀벌개발일지 :: 구글 앱스 스크립트에서 비동기 작업 추가하기 doPost에서 비동기 처리 ↩

#google-apps-script#slack
#97
26 중 20페이지
이전 페이지다음 페이지