Chương 53: Tưởng đã “đáp trả”, hóa ra chưa đủ
Enjoy!
------------------------------------
Tưởng đã “đáp trả”, hóa ra chưa đủ
Từ khoảnh khắc nhận được câu “Hoàn toàn không đạt” của Takuya-san và thốt lên “Hả!?”, tôi gần như thức trắng cả đêm.
“Rốt cuộc là không đạt chỗ nào chứ…? Rõ ràng là giống y hệt rồi mà.”
Tôi mở máy tính, xem đi xem lại không biết bao nhiêu lần, nhưng vẫn không tìm ra vấn đề.
Sáng hôm sau, không chịu nổi nữa, tôi gửi LINE hỏi thẳng.
“Yamada-san, rốt cuộc là không ổn ở điểm nào ạ?”
Tin nhắn trả lời đến gần như ngay lập tức.
“Cậu có xem trên điện thoại chưa?”
“Ơ? Nhưng hiện tại vẫn là file local nên em chưa xem được trên điện thoại… em phải kiểm tra bằng cách nào ạ?”
Tin nhắn đã được đọc, nhưng rất lâu sau vẫn không có phản hồi. Và khi câu trả lời cuối cùng xuất hiện, nó lạnh lùng đến đáng sợ.
“Cậu biết ggrks không?”
Rồi… hết.
Cái gì vậy?
Không hiểu nổi, tôi đành tìm kiếm từ khóa “ggrks”.
“ググレカス — gõ Google đi, đồ ngu.”
Khoảnh khắc nhìn thấy kết quả, tôi cảm giác máu nóng dồn lên tận đầu. Hóa ra đó là tiếng lóng trên mạng, ý bảo “tự đi tra Google đi, đồ ngốc”.
Bực đến phát điên. Cái kiểu gì thế này, coi thường người khác vừa thôi chứ.
“Vâng, em sẽ tự tìm hiểu.”
Tôi cắm đầu tìm kiếm: “xem HTML local trên điện thoại”, “kiểm tra giao diện mobile”… Và rồi tôi phát hiện ra một thứ: Chrome Developer Tools.
“Là cái này sao…”
Nhấn phím F12, một màn hình lạ lẫm dành cho lập trình viên hiện ra phía dưới trình duyệt. Trong đó có nút “Toggle device toolbar”. Khi bấm vào, tôi có thể giả lập hiển thị trên smartphone và tablet.
Tôi thử chuyển sang iPhone, rồi iPad, rồi nhiều kích thước màn hình khác nhau. Và rồi—
“À… không thể nào… thật luôn à…”
Bố cục vỡ nát hoàn toàn. Chữ thì nhỏ đến mức không đọc nổi.
Tôi chụp màn hình lại, gửi cho Takuya-san.
“Em đã kiểm tra rồi… giao diện bị vỡ ạ.”
Câu trả lời đến ngay sau đó.
*“Đương nhiên rồi. Không có responsive thì vỡ là phải. Thời buổi này mà website không hỗ trợ smartphone thì coi như vô dụng.
Làm lại đi. Lần này phải hỗ trợ mobile cho đàng hoàng.”*
Chết tiệt… vẫn chưa đủ sao.
Sau giờ học, tôi lại tìm đến phòng tin học.
“Thưa thầy, em muốn làm một website mà vừa hiển thị tốt trên điện thoại, vừa ổn trên máy tính.”
Tôi mở Chrome Developer Tools, cho thầy xem giao diện bị vỡ khi chuyển sang màn hình smartphone.
“À, chuyện responsive design đó mà.”
Tôi kể lại toàn bộ đầu đuôi câu chuyện.
“Thật ra, em cho một đàn anh xem website mình làm thì bị nói là ‘toàn không đạt’…”
“Đến mức này mà đã bắt nghĩ đến smartphone rồi à… đúng là huấn luyện kiểu rất khắc nghiệt đấy.”
Thầy Kobayashi vừa nói vừa gãi đầu xoành xoạch.
“Nhưng mà này, Satou-kun, em đang tiến bộ rất rõ ràng đấy. Nếu đã vậy thì… mình thử dùng Bootstrap xem sao.”
“Bootstrap… ạ?”
Một thuật ngữ hoàn toàn xa lạ.
“Thầy ơi, trước hết ‘responsive’ nghĩa là gì vậy ạ?”
“Responsive design là kiểu thiết kế mà bố cục sẽ tự động tối ưu theo kích thước màn hình—smartphone, tablet hay PC. Chính là để giải quyết vấn đề ‘xem trên điện thoại thì bị vỡ giao diện’ mà em vừa gặp đó.”
Thầy vừa giải thích vừa dùng tay minh họa.
“Còn Bootstrap là một framework giúp em làm responsive một cách dễ dàng hơn. Sau CSS thì đây là bước tiếp theo rất phù hợp để học. Thật ra Bootstrap cũng được xây dựng từ chính HTML và CSS mà em đã học. Nó giống như một tập hợp kỹ thuật—những thứ mà dân chuyên nghiệp đã kết hợp và tinh chỉnh ở mức cao. Nếu có thời gian, em thử đọc code của nó sau này, sẽ học được rất nhiều.”
Nói rồi, thầy mở trình duyệt, truy cập vào trang web chính thức của Bootstrap.
Trước mắt tôi, một cánh cửa mới lại lặng lẽ mở ra— và tôi hiểu rằng, con đường để “đáp trả” người khác bằng kỹ thuật, vẫn còn dài hơn tôi tưởng rất nhiều.
“Bootstrap có ba điểm mạnh rất tiện lợi. Thứ nhất là hệ thống lưới 12 cột. Chỉ cần kết hợp các class như col-sm, col-md, col-lg, em có thể chỉ định bố cục tối ưu cho từng kích thước thiết bị.”
“Vậy tức là nếu thiết kế theo cơ chế này, chỉ một lần là có thể dùng được cho cả tablet lẫn điện thoại đúng không ạ?!”
Tôi hào hứng hỏi lại.
“Đúng thế.
Thứ hai, Bootstrap đã chuẩn bị sẵn các UI component thường dùng như nút bấm, thanh điều hướng, layout dạng thẻ (card)… Không cần phải viết CSS từ đầu, chỉ cần gán class là đã có giao diện đẹp rồi.”
“Tiện thật sự…”
“Và thứ ba là, có rất nhiều template Bootstrap miễn phí do các lập trình viên trên khắp thế giới tạo ra.”
Kobayashi-sensei mở trình duyệt, cho tôi xem một trang giới thiệu template Bootstrap.
“Ồ…”
Cửa hàng, doanh nghiệp, nhà hàng, khách sạn… đủ loại ngành nghề, template xếp hàng dài trước mắt tôi. Cái nào cũng mang dáng dấp của một website chuyên nghiệp, tinh tế.
“Chỉ cần tải về, chỉnh sửa chút nội dung là đã có thể tạo ra một website trông rất ‘xịn’.”
“Cái này trông hữu ích quá… về nhà là em thử ngay!”
“Ừ, cố gắng lên nhé.”
—-----------------------------------
Về đến nhà, việc đầu tiên tôi làm là cắm đầu đọc tài liệu chính thức của Bootstrap, dần dần hiểu rõ khái niệm col-sm, col-md, col-lg.
Sau đó, tôi lướt qua trang Start Bootstrap mà thầy Kobayashi giới thiệu.
“Ghê thật… nhiều template trông như dân chuyên nghiệp làm thế này cơ à.”
Template cho doanh nghiệp với thiết kế tối giản, cho nhà hàng với phong cách tinh tế, cho portfolio cá nhân với bố cục ngầu lòi… chất lượng cao đến mức khó tin là miễn phí.
Trong lúc tìm kiếm một template phù hợp với Mizunoya, tôi bắt gặp một mẫu thiết kế đơn giản, trang nhã—trông rất hợp với một tiệm wagashi truyền thống.
“Chính nó… mình sẽ dùng cái này làm nền cho phiên bản Mizunoya. Cứ chờ đấy!”
Tôi tiếp tục học và chỉnh sửa cho đến tận khuya, và cuối cùng phần responsive cũng hoàn thành.
Càng làm càng thấy vui, tôi còn thêm thắt những chi tiết mà phiên bản cũ chưa từng có. Đến khi nhận ra, đồng hồ đã chỉ quá hai giờ sáng.
“Chết rồi…”
Nhưng mọi thứ cơ bản đã ổn. Ở bước kiểm tra cuối cùng, tôi dùng Chrome Developer Tools để xác nhận lại hiển thị trên PC, tablet và smartphone.
“Lần này thì… hoàn hảo thật rồi!”
Tôi chụp màn hình ở cả ba kích thước thiết bị, nén toàn bộ cùng mã nguồn vào một file ZIP.
Sáng hôm sau, thời khắc thử thách lần hai đã đến.
“Em đã hoàn thành responsive cho website rồi ạ.”
Gửi dữ liệu xong, tôi hồi hộp chờ đợi.
Vài phút sau, tin nhắn hồi đáp hiện lên:
“Dùng Bootstrap à… cũng tạm được.”
Và ngay sau đó:
“Được rồi, giờ thử công khai website đó đi.”
Tôi được phép bước tiếp!
Tiến thêm một bậc rồi!
Tôi đã làm được!
Hãy bình luận để ủng hộ người đăng nhé!