🌤️ “Zịt ngộ ra…”

Zịt nghĩ quặk quặk, hoá ra lại quắk quắk.

Giữa muôn vàn lặng im, tôi tìm thấy một điều

#lesson
#customer-experience
#tâm-sự

Không ai mong một lời xin lỗi, nếu điều xứng đáng đã được hành động thay lời...

Xem thêm

Tailwind CSS !important modifier

#tailwindcss
#css

Hôm qua gõ một dòng CSS tưởng bình thường, ai ngờ debug 3 tiếng mới phát hiện: Tailwind có ! modifier đấy ông cháu ạ!

Dùng ! đầu class để biến utility thành important:

<p class="font-bold !font-medium">
  Text này sẽ medium dù bold viết sau.
</p>
HTML
UTF-8

Lúc crush rep tin nhắn bằng chữ thường, mình rep lại bằng !uppercase cũng không ngầu bằng dòng code này.

Official Docs

nested backdrop-filter

#css

Câu chuyện là làm một modal trong modal, dùng backdrop-filter cho cả hai. Kết quả? Trắng bệch như tâm trạng tôi khi gửi CV không rep.

Turns out: Chrome không support nested backdrop-filter! Nếu parent đã có filter, child sẽ ngơ ngác như crush khi mình ngỏ lời.

issue — workaround

pre overflow: scroll inside flex

#css
#pre
#flex

Dựng blog xịn xò, thấy code block không scroll. Tưởng do thiếu caffeine, ai ngờ là do thiếu min-width: 0.

Cứ để pre trong flex mà thiếu dòng này thì scroll sẽ như cuộc tình không rõ ràng – không đi đến đâu.

Credit

import mdx file sebagai component

#react
#mdx

Cứ tưởng MDX là chỉ viết doc, ai dè import vào như component React luôn:

import Contents from '@/mdx/Contents.mdx';

<Contents />

Lúc biết điều này, mình đã run ra quán trà sữa và nói với chị bán hàng: "Cho em một ly MDX component không đá!"

Doc gốc

:not() pseudo-class

#css
#selector

Dùng :not() mà tách selector ra như chia tay mối tình đầu thì chỉ có bug.

Cách đúng là gom lại – giống như gom hết dũng khí confess:

Don't
:not(pre), :not(.code-block) {
  > code {
    background-color: 'red';
  }
}
Do
:not(pre, .code-block) {
  > code {
    background-color: 'red';
  }
}

Turborepo dependsOn

#turborepo
#monorepo
"build": {
  "dependsOn": ["^lint", "test"]
},

^ là chạy task của package khác – như kiểu bạn phải kiểm tra assignment nhóm trước khi nộp phần mình. Còn không có ^ là task local – như dọn phòng riêng.

e.target.valueAsNumber

#html
#js

Đôi khi chỉ cần một dòng code là đủ để trái tim frontend developer rung rinh:

e.target.valueAsNumber

Không còn parseInt, không còn lỗi NaN khi nhập số. Giống như khi bạn hiểu được ý crush qua ánh mắt – ngắn gọn, rõ ràng, chính xác.