Trang chủ

Chào mọi người, tiếp tục với series's về các dạng layout hôm nay mình sẽ chia sẻ thêm một trick thú vị nữa về layout table.

Đợt này mình ôm 2 project nên hơi sấp mặt, cũng là mấy con admin nhưng design có vẻ hứng thú và bắt mắt hơn mấy cái dashboard trước đây. Trong bài hát"Đường đến ngày vinh quang" của cố nhạc sĩ Trần Lập có câu"chặng đường nào trải bước trên hoa hồng bàn chân cũng thấm đau vì những mũi gai"... đi liền với cái đẹp thường là sự phức tạp, tuy nhiên làm việc với design đẹp và những cái đẹp là điều làm mình hứng thú.

Đâu đó cũng 3 tuần rồi, đang vật lộn với việc estimate task bên dự án khác thì lại bị vỗ vai nhờ support. Lần này không phải em gái xinh xắn bàn bên mà là một em trai cao to da trắng tưởng tới rủ mình đi chơi nhưng lại nhờ fix giúp cái table. Mình không còn sợ chị designer buồn dẫn đến trầm cảm nữa mà mình sợ anh em Backend sấp mặt với đội QA vì dự án sắp release nên mình đã ra tay giúp đỡ.

Chào mọi người, tiếp tụcbài trước hôm nay mình sẽ chia sẻ thêm một trick thú vị nữa về layout.

Vào một buổi chiều tuần trước, một buổi chiều trời nắng đổ lửa thay vì mưa đá vỡ đầu như thời sự nói 2 hôm nay. Đang ngồi lướt fb à không vừa mới support thanh niên bên team khác xong thì đứa em cùng dự án có than thở việc "gọt tròn góc" chotable, tuy nhiên gọt thì gọt được đó nhưng nhìn kỹ thì chưa thật sự trơn tru cho lắm, sợ chị designer buồn dẫn đến trầm cảm. Nên mình dành chút thời gian ngồi gọt giúp em nó để tạo ra chiếc table đẹp thật sự như chị designer đã bỏ công thiết kế.

Bây giờ mình sẽ tái hiện lại chiếc table mình làm hôm trước. Anh em review phát xem có gọn gàng không nhé.

Chào mọi người, hôm nay mình sẽ làm một số ví dụ về layout mà chúng ta thường gặp.

Anh em Backend thường nói "làm ép e dễ mà, chỉ cần nhớ mấy cái thẻHTML với thuộc tínhCSS bỏ vào là xong chứ gì..." à mà câu đó là của mấy bạn mới ra trường thôi, chứ mấy anh Dev từng trải không ai nói vậy. Nếu bạn là một Frontend Developer, những task liên quan đến Markup UI chắc hẳn chúng ta đã từng trải qua nhiều dạng layout, đặc biệt là xây dựng landing page hay web tương tác user. Những website như vậy mình rất hứng thú vì giao diện bắt mắt, hiệu ứng bay nhảy làm mình cũng vui hơn thay vì làm việc với những layout table dữ liệu nhàm chán. Tuy nhiên với những layout đẹp nó lại có độ phức tạp cao trong việc xây dựng và maintain, vì vậy việc đưa ra ý tưởng xây dựng trước khi code là một điều cần thiết.

Chào anh em, như tiêu đề hôm nay mình xin giới thiệu một vài thủ thuật làm việc vớistyled components.

Trong các dự án React mình support, phần lớn đều ứng dụngstyled components để thay thế cho cách viếtCSS haySCSS truyền thống. Đây là thư viện thường dùng để styled cho React App.

Vì sao không dùng SCSS để styled?

Với React, ta viết các style của các component như CSS thông thường làimport file CSS tương ứng này vào ở component đó (hoặc root component chứa nó). Nếu là file SCSS ta có thể dùngnode-sass để import thẳng vào hoặc có thể dùng webpack để build tương tự. Tuy nhiên với React thì cách đó không được khuyến khích, vì nó không thể hiện được CSS nào tương ứng với component nào, style nên đi kèm với component.

Đang ngồi nghĩ cách đặt tên,
Có thằng em đến kêu "ngừng dùng BEM"...

Trong các dự án markup HTML mà mình đang support, ngoại những án React dùngstyled component thì 96,69% thống nhất xây dựng theo kiểu BEMBlock__Element--Modifier - một dạng tổ chức CSS theo kiểu OOCSS tuyệt vời mà mình từng biết. Nhưng trong vòng 1 năm trở lại đây, khái niệm Atomic được léo nhéo bên tai, nó là cái khỉ gì mà giang hồ đồn dữ vậy.

1. Tổng quan Atomic CSS là gì?

Thông thường, khi dùng Bootstrap, Foundation hoặc code CSS truyền thống, trường hợp phải selector đến nhiều cấp là tất nhiên, rồi đau đầu nghĩ đến cách đặt tên biến sao cho ngữ nghĩa... thật là một thảm hoạ.

Chào mọi người, lần này mình xin nối tiếp chủ đề"vở sạch chữ đẹp" như những tiết học trước. Bài viết lần này mình xin chia sẻ vài kinh nghiệm viết code React mà mình đã đúc kết qua một vài dự án.

Cách tổ chức component

Cách đặt tên component và kiểu file

Tên component nên đặt theo chuẩn PascalCaseHeader.jsx

Tên component cần đề cập đúng mục đích của nó, phải rõ ràng và duy nhất trong ứng dụng, để dễ tìm thấy hơn và tránh những nhầm lẫn có thể xảy ra.

Trong mỗi dự án, Frontend Dev có vai trò như lính đánh thuê, cũng giống như người ta thường nói "làm dâu trăm họ". Để hài lòng với mọi gia đình đặc biệt là những "bà mẹ chồng khó tính", chị em chúng ta cần học theo kinh nghiệm đúc kết từ những bậc tiền bối.

Thông thường convention mà các lập trình viên lấy làm chuẩn sẽ là 2 hoặc 4 space tùy theo ngôn ngữ hoặc rules dự án. Bạn có thể tham khảocode style PSR-2.

Khi code bạn thường dùng gì để thụt đầu dòng (indent)?

Có người thích dùng tab, người khác lại dùng 2 hoặc 4 dấu space để thụt dòng. Bên cạnh việc không thống nhất là bao nhiêu space còn có sự tranh cãi giữa dùng tab và dùng space. Vì sao lại xảy ra tình trạng tranh cãi, ai thích dùng gì thì dùng chứ. Đó là vì có ý kiến cho rằng gõ 2 dấu cách mới là code chuẩn, còn dùng tab thì không. Nên dùng 2 spaces hay dùng tab?