18/03/2021, 09:43

Hai kiểu lập trình viên

Bài viết được sự cho phép của tác giả Huy Trần Luôn có hai dạng lập trình viên, một dạng luôn nắm vững lý thuyết, dạng còn lại thì không. Những người nắm vững lý thuyết thì luôn có năng suất làm việc cao hơn hẳn những người không học lý thuyết, vì không phải tốn thời gian để thử sai (trial ...

Bài viết được sự cho phép của tác giả Huy Trần

Luôn có hai dạng lập trình viên, một dạng luôn nắm vững lý thuyết, dạng còn lại thì không.

Những người nắm vững lý thuyết thì luôn có năng suất làm việc cao hơn hẳn những người không học lý thuyết, vì không phải tốn thời gian để thử sai (trial and error), cũng không cần tốn thời gian tra cứu lại kiến thức.

  10 câu nói cực hay về lập trình
  10 kỹ năng quan trọng để tìm công việc lập trình viên frontend dễ dàng hơn

Một ví dụ đơn giản về CSS, chúng ta có class .gift-image có thuộc tính top = 10px, và chúng ta muốn class này có thuộc tính top = 0 trên các thiết bị có màn hình nhỏ hơn 600px:

.gift-box {
    .gift-image {
        &.openned {
            position: absolute;
            top: 10px;
            ...
        }
    }
    
    @media (max-awidth: 600px) {
        .gift-image {
            top: 0;
        }
    }
}

Nhưng đoạn code trên sẽ không chạy, và trên mobile, class .gift-image vẫn có thuộc tính top = 10px.

Một frontend developer không nắm vững kiến thức sẽ fix vấn đề trên như sau:

@media (max-awidth: 600px) {
    .gift-image {
        top: 0 !important;
    }
}

Hoặc tốn 10 phút để search Google với một vấn đề không liên quan: position absolute top not change in media query.

Ngược lại, một frontend developer nắm vững kiến thức về CSS specificity [1] [2] sẽ fix vấn đề trên một cách dễ dàng mà không cần dùng tới !important:

@media (max-awidth: 600px) {
    .gift-image.openned {
        top: 0;
    }
}

Và thậm chí còn đạt tới cảnh giới code xong không cần test, sure đúng 100%, push lên thẳng master luôn, rồi để cho junior nó fix =)))

Ví dụ trên chưa có phần giải thích, để dành cho anh em đọc xong tự giải thích 

Đọc thêm:

  1. Calculating a selector’s specificity, https://www.w3.org/TR/selectors-3/#specificity ↩
  2. MDN CSS, Specificity, https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity ↩

Bài viết gốc được đăng tải tại thefullsnack.com

Có thể bạn quan tâm:

  • Lập trình viên và hội chứng Tự kỷ
  • 9 lỗi JavaScript các lập trình viên hay gặp
  • Từ lập trình viên Junior, cùng mình trở thành 1 lập trình viên mid-level nhé

Xem thêm Việc làm Developer hấp dẫn trên TopDev

0