← from Blog

Redesign và những gì tôi học

December 25, 2016 • 5 min read

Thực ra bài viết này đã có từ lâu, nhưng tôi vẫn để nó ở chế độ bản nháp và cũng do lười (quá lười) nên cũng từ lâu tôi cũng bỏ thói quen viết blog. Nay tôi chia sẻ những kinh nghiệm khi thiết kế lại blog này.

Thiết kế

Vì không phải là một Designer nên tôi không giỏi về thiết kế lắm. Nên tôi vẫn giữ kiểu thiết kế tối giản (minimalism) cho trang blog này.

Blog mới cung cấp hai giao diện, giúp bạn không bị mỏi mắt khi đọc lâu. Bạn nhấn vào biểu tượng ở góc phải để đổi sang giao diện yêu thích nhé. Có thể tôi sẽ cập nhật thêm về màu sắc xíu nữa cho phù hợp.

Dang Thanh Blog - phiên bản light and dark

tôi cũng đã xoá đi hệ thống phản hồi (trước đây tôi dùng Disqus) vì thấy nó không hữu ích. Các bạn có thể liên hệ hoặc trao đổi với tôi qua email.

Hugo

So với Jekyll, Hugo hỗ trợ xây dựng blog nhanh và tích hợp live reload dễ dàng cho việc phát triển blog hơn.

Hugo cung cấp thêm nhiều chức năng mới như:

  • Chuyển đổi SCSS hay Sass sang CSS
  • Hỗ trợ tốt PostCSS
  • Tối ưu các tập tin CSS, JavaScript, JSON, HTML, SVG, XML
  • Cải tiến hiển thị hightlight cho code với Chroma

Bên cạnh đó, việc chuyển đổi sang Hugo giúp tôi tuỳ biến phân trang dễ dàng. Giúp bạn dễ dàng chọn được trang cũng như tìm kiếm bài viết theo từng chủ đề trong chuyên mục lưu trữ cùng với hệ thống phân bài viết theo thứ tự alphabet.

CSS

Vì lí do tối giản cả thiết kế lẫn CSS. Nên với phiên bản này tôi không sử dụng Tachyons nữa. Mặc dù Tachyons rất hữu ích, giúp việc xây dựng giao diện tuỳ biến cao, cũng như xây dựng những giao diện phức tạp một cách dễ dàng. Với một vài thay đổi dưới đây, blog đã được cải tiến tốc độ cũng khá nhiều.

CSS Grid

CSS Grid giúp tôi tuỳ biến web mình dễ dàng hơn so với Flexbox trong cách phân chia bố cục của trang blog này cũng như tuỳ biến Responsive cho màn hình desktop và mobile.

@custom-media --tablet (width >= 800px);

.site {
  max-width: 60rem;
  margin: 0 auto;

  @media (--tablet) {
    display: grid;
    grid-template-columns: 1fr 3fr;
  }
}

Chú ý: Đây là cú pháp tôi viết sử dụng PostCSS được trình bày ở dưới.

Times Newer Roman, Roboto Slab và Ubuntu Mono

Việc thay đổi font chữ Muli sang sử dụng phông chữ Times Newer Roman là một bộ phông chữ tương tự Times New Roman nhưng độ dài mỗi ký tự rộng hơn (theo như tác giả là 5 - 10%) giúp bạn dễ dàng đọc nội dung trên blog hơn.

Nhưng sau khi xem blog trên Windows tôi thấy phông chữ Times Newer Roman không hiển thị đẹp lắm mặc dù trên Mac hay Linux phông chữ vẫn hiển thị rất đẹp nên cuối cùng cũng chọn phông chữ Roboto Slab.

Còn với code highlight tôi sử dụng Ubuntu Mono. Mặc dù vẫn thích những phông chữ hỗ trợ ligatures như Fira Code nhưng Ubuntu Mono vẫn dễ nhìn hơn với các bạn chưa quen với ligatures.

CSS Font Loading API: Preload

<link
  rel="preload"
  href="/fonts/TimesNewerRoman-Regular.otf"
  as="font"
  type="font/otf"
  crossorigin
/>

Preload trên giúp phông chữ của bạn được nạp vào trang web nhanh. Đồng thời việc khai báo trên giúp việc quản lý phông chữ nhúng vào dễ dàng so với việc sử dụng @font-face

CSS Font Loading API: Font Display

@font-face {
  font-family: 'Times Newer Roman';
  font-weight: 700;
  src: url(/fonts/TimesNewerRoman-Bold.otf) format('opentype');
  font-display: swap;
}

Khi bạn nhúng một phông chữ bằng @font-face hoặc từ Google Fonts lúc đầu phông chữ hiển thị làm bạn có cảm giác giật giật (nhấp nhánh). Với font-display: swap làm cho khoảng thời gian tải phông chữ và quá trình hiển thị phông chữ mượt hơn. Hạn chế của thuộc tính này là chỉ hỗ trợ những trình duyệt mới.

PostCSS

Trước đây tôi vẫn dùng Sass trong một thời gian dài. Bênh cạnh những lợi ích của Sass như dễ dàng bảo trì, tối ưu, tiếm kiệt thời gian viết code CSS so với cách viết truyền thống thì PostCSS cung cấp thêm nhiều chức năng và linh hoạt hơn so với Sass như Autoprefixer, CSS Modules, Browserslist… Sắp tới tôi cũng sẽ giới thiệu về PostCSS để các bạn có thể hiểu rõ hơn.

Ví dụ ta muốn xây dựng một web với hai giao diện. Với CSS truyền thống:

body {
  background: #fffafa;
  color: #242424;
}

body.night {
  background: #222233;
  color: #fff;
}

Nhưng với PostCSS bạn có thể viết.

:root {
  --background: #fffafa;
  --color: #242424;
}

.night {
  --background: #222233;
  --color: #fff;
}

body {
  background: var(--background);
  color: var(--color);
}

Với cách viết này bạn sẽ dễ dàng cập nhật thêm các biến giá trị tuỳ biến.

Webp Images

Ban đầu tôi tính chuyển tất cả hình ảnh của web hiện tại sang webp. Nhưng cả trình duyệt Safari và Firefox đều không hỗ trợ tốt định dạng này. Nên cuối cùng vẫn phải dùng png và jpg để nó có thể hỗ trợ hầu hết trình duyệt.

Service Worker and Offine Web

Offine web giúp blog này có thể chạy ngay cả khi bạn không kết Internet (bạn có thể tắt Internet và trải nghiệm). Ở đây mình hộ trợ offine web với service worker và dùng Workbox một module được viết bằng Node.js để tạo ra tài nguyên offine cho Hugo.

#Experience #CSS #PostCSS #Hugo #JavaScript