
Xin chào, lâu lắm mình mới viết blog, mặc dù ngâm hơi lâu kèm lời hứa ở bài trước là sẽ viết một bài về CSS. Cơ mà đời nào có như mơ, mình quá lười để viết thêm, bẵng đi một thời gian...

Chẳng là dạo này mình lại nhảy việc nên cũng lu bu khá nhiều thứ. Covid làm cuộc sống mình thay đổi khá nhiều. Bình thường ngoài việc lên văn phòng ngồi mài đít 8 tiếng một ngày thì nay mình ngồi ở nhà mài đít 16 tiếng 1 ngày. :yikes:

Dưới sự dụ dỗ của cả CEO và Frontend Lead, kèm theo đó là động lực thôi thúc làm giàu thấm nhuần trong huyết quản của mình, mình đầu quân cho **Sky Mavis** — một công ty công nghệ blockchain. Vậy là mình join Sky Mavis với cái title là *Frontend Engineer*.

Ấy vậy mà commit đầu tiên và PR đầu tiên của mình dài 4000 LOC[^1] là một cái PR... service **Rust**.

<image
  title="4000 LOC đầu tiên..."
  src="/assets/blog/learning-rust/01.png"
/>

[^1]: Lines of code

## Rust là gì?

<image
  title="Rust chỉ là một trò chơi"
  src="/assets/blog/learning-rust/05.png"
/>

Rust là một trò chơi sinh tồn, được [phát hành trên steam](https://store.steampowered.com/app/252490/Rust/)...

Đùa thôi :nosebleed:

Giải thích đơn giản theo cách hiểu của mình thì: **Rust** là ngôn ngữ biên dịch[^2]. Được tạo ra bởi team *Mozilla*. Mình cũng không rõ lý do cụ thể tại sao mọi người hype với Rust[^3]. Nó được sinh ra để hoàn thành sứ mệnh quản lý tài quyên và tính an toàn trong bộ nhớ.

[^2]: https://vi.wikipedia.org/wiki/Ng%C3%B4n_ng%E1%BB%AF_bi%C3%AAn_d%E1%BB%8Bch
[^3]: Thoe Stackoverflow (https://insights.stackoverflow.com/survey/2020#most-loved-dreaded-and-wanted)

<image
  className="hero"
  title="Theo Google Translate"
  src="/assets/blog/learning-rust/04.png"
/>

Với mình Rust khá khó nuốt vì Rust là ngôn ngữ lập trình cấp hệ thống, nên nó đòi hỏi việc người sử dụng phải hiểu các khái niệm cấp thấp của khoa học máy tính, cộng thêm cái đống khái niệm đặc thù của Rust, thì nó càng khó nhai hơn...

## Hành trình đến với Rust

Thật ra đây không phải lần đầu mình học Rust. Hành trình mình học Rust khá gian nan. Ban đầu mình khá sợ Rust vì mình không giỏi lắm trong các lang có typing và compiler. Tuy thời đại học mình code C/C++ cũng [rất ghê](de-thi-oop) (ghê = đủ để thi :doubt:), cơ mà Rust vẫn là cái gì đó khá đáng sợ, dù sao cũng bỏ code Backend lâu lắm rồi...

[de-thi-oop]: https://github.com/monodyle/de-thi-oop-vo-lam-truyen-ky-cpp

Cơ mà vì hype với Rust do bị mấy ông anh ở WeBuild dụ, đặc biệt là anh [@unrealhoang] là người truyền cảm hứng nhiều nhất để mình học Rust. Nên mình lỡ dấn thân vào Rust **một vài** lần. Nhấn mạnh một vài, thật sự là mình đã học 4 - 5 lần, lần nào cũng quyết tâm học mà không lần nào đi đâu đến đâu...

[@unrealhoang]: https://github.com/unrealhoang/

Mỗi lần học, mình đều quyết tâm ngồi đọc [Rust Book]. Tuy không giỏi lắm trong việc đọc hiểu tiếng anh nên mình rất biết cách dùng Google Translate để rồi không hiểu trong doc của Rust nó viết cái gì trong đó :lookdown:. Và rồi lại bỏ cuộc vì follow theo example mà cứ `cargo run` là có một cái lỗi gì đó mà mình đọc không hiểu :nosebleed:. Thế là mình học Go... (Sorry anh unreal :sad:)

[Rust Book]: https://doc.rust-lang.org/book/

Lần này vào Sky Mavis đúng lúc đang thiếu nhân sự. Thế là mình lại phải đa năng để lấp đầy những khoảng trống trong team...

Tiêu chí tuyển nhân sự ở Sky Mavis khá là đặc biệt, vì đặc thù vẫn là công ty start up (ít nhất là tới thời điểm này), nên không yêu cầu bạn phải biết đầy đủ tech stack đang được sử dụng tại Sky Mavis, mà thay vào đó là việc ứng viên có sẵn sàng học những thứ mới hay không. Vì vậy nên mình cũng rất chào đón việc học cái gì đó mới. Và lần này là Rust.

Mình nhận ra việc học của mình nó khá là **"εὕρηκα!"** (Phiên âm: /évrika/, hay tiếng Việt đọc là ơ-rê-ca). Tức là việc học của mình với một số thứ chỉ có thể ngộ, không thể cầu. Rust cũng vậy, trong một khoảnh khắc mình nhận ra là: "Ơ, hoá ra là như vậy".

<image
  title="εὕρηκα!"
  src="/assets/blog/learning-rust/02.jpg"
/>

Vừa làm vừa học đối với mình dễ hơn hẳn.

## Rust và mấy cái khác

Lúc mình muốn học Rust thì ai cũng biết, lúc mình phải học Rust thì mọi người đã chán rồi. Từ javascript nhảy qua học Rust giống như là ác mộng vậy... Dù vẫn dùng typescript để typing cho js, cơ mà typing của Rust nó là cái gì đó siêu khủng khiếp đối với mình. Nên dưới đây là những gì mình note lại khi mình ơ-rê-ca lúc học Rust.

### cargo

Giống như nhiều ngôn ngữ khác, Rust cũng có một cái tổ chức và quản lý các gói phụ thuộc (dependencies) của nó. Như *Node*, bạn có `npm`, hay `composer` của *php*, thì *Rust* có `cargo`, và các dependencies của cargo được gọi là **crate**.

Việc run một cái repo Rust cũng giống như `npm start`, ta có `cargo run`. Ờ thì cũng không phải build bằng `rustc` mỗi lần reload code. Rust cũng có hot-reload, cơ mà setup cũng mệt mỏi nên mình cũng làm biếng luôn.

Ban đầu nhìn Rust nó kế thừa khá nhiều thứ từ C/C++ nên mình cũng hơi sợ việc import 3rd package. Cơ mà ngồi rồi mới thấy tính ra cũng không phức tạp lắm. P/s: Đấy là do mình không biết bên C/C++ có package management nào không... :sad:

### Borrow checker

Rất nhiều người lúc mentor và dụ dỗ mình học Rust luôn lặp lại một câu là: "Hãy học kỹ [chương 4], em sẽ thấy một chân trời mới."

[chương 4]: https://doc.rust-lang.org/book/ch04-00-understanding-ownership.html

Cơ mà mình có hiểu gì đâu, đọc mãi chẳng chữ nào đọng lại trong não, thế là trong lúc mày mò lại chiêm nghiệm được một ít thứ từ **borrow checker** của Rust.

<image
  title="Borrow checker"
  src="/assets/blog/learning-rust/03.png"
/>

Được javascript chiều chuộng khá nhiều, mình đã dần quen với việc khai báo biến lung tung và mutable mọi thứ một cách thoải mái. Cơ mà từ lúc viết Rust, mình liên tục bị cái console chửi vì cái compier khá khó tính trong việc sử dụng và khai báo biến.

Ví dụ đơn giản, trong javascript mình có thể viết như thế này:

```js[data-file="test.js"]
let x = [5];
let y = x;

console.log(x);
```

```bash
$ node test.js
Array [ 5 ]
```

Cơ mà trong Rust á, thử viết thế xem:

```rust[data-file="main.rs"]
fn main() {
    let a = vec![5];
    let b = a;
    println!("{:?}", a);
}
```

```bash
$ cargo run
warning: unused variable: `b`
 --> src/main.rs:3:9
  |
3 |     let b = a;
  |         ^ help: if this is intentional, prefix it with an underscore: `_b`
  |
  = note: `#[warn(unused_variables)]` on by default

error[E0382]: borrow of moved value: `a`
 --> src/main.rs:4:22
  |
2 |     let a = vec![5];
  |         - move occurs because `a` has type `Vec<i32>`, which does not implement the `Copy` trait
3 |     let b = a;
  |             - value moved here
4 |     println!("{:?}", a);
  |                      ^ value borrowed here after move

For more information about this error, try `rustc --explain E0382`.
```

Đấy là những lời sỉ vả của Rust mình nhận phải hằng ngày :sosad:

Ở javascript, việc bạn khai báo và gán từ biến này sang biến khác cực kỳ đơn giản và không có gì xảy ra cả. Cơ mà ở Rust, khi viết `let y = x` thì bạn đã chuyển value từ `x` sang `y`. Tức là `y` đã lấy đi những gì `x` đã giữ, giờ `x` chẳng còn gì cả.

Giống như việc bạn có một chiếc iPhone 13 Pro Max, mình mượn của bạn dùng ít ngày thì bạn không có iPhone 13 Pro Max nào cả. Đó là cách ownership và borrow hoạt động trong Rust.

## Cải thiện

Cái thời mà mình cứ học rồi lại bỏ cũng muốn dùng Rust để làm một cái gì đó hay ho. Nhưng khổ nỗi tới việc borrow mình cũng không hiểu nên tâm có thừa mà lực không đủ. Dạo này trùng hợp thay, mình vừa học Rust ngay khoảng thời gian chuẩn bị diễn ra [Advent of Code]. Nên mình cũng tranh thủ [diễu võ dương oai] với Rust.

[Advent of Code]: https://adventofcode.com/
[diễu võ dương oai]: https://github.com/monodyle/aoc/tree/master/2021/

Cơ mà năm nay mình drop ở ngày 8 rồi, nếu ai chơi AOC lâu chắc cũng biết lý do phần lớn mọi người drop là gì, nên đừng cười mình nhé, khổ thân mình :snug:

Sắp tới chắc mình sẽ lại làm cái gì đó với Rust. Hy vọng mình sẽ không lười nữa...

## Tổng kết

Tóm lại thì mình lúc mình muốn học, học nó không muốn mình, và ai cũng hype với Rust. Giờ mình học được Rust, thì Rust giờ (hình như) hết hype rồi. :smoke:


Đánh nhau với Rust — Lẩu cua đồng


Lâu lắm không viết cái gì mới mới, nhân dịp mình vưa làm lại bộ mặt cho cái blog nay tranh thủ làm một bài, chứ không thể nào lười mãi được. :sad:

Dạo mình viết lại cái trang này (không biết nên gọi là blog là gì nữa...), tự dưng nổi hứng muốn làm một cái animation ở chân trang. Thế là lọ mọ thế nào vẽ figma một hồi ra một cái hình như bên dưới:

<image
  title="Giao diện thiết kế ban đầu"
  src="/assets/blog/animation-performance/01.png"
/>

Ý tưởng ban đầu chính là cái đường cong ở bên dưới sẽ chạy ngang cho nó uốn lượn, sau đó cái mặt trăng sẽ lên xuống theo cái đường cong đó... Nhưng mà mình không biết làm thế nào để cái mặt trăng nó lên xuống, thế là lại dẹp ý tưởng đó đi, thay vào con đường sa mạc đầy sỏi đá như phiên bản hiện tại các bạn thấy :smug:

## Phiên bản đầu tiên

Dễ dàng, với trình độ hơn 5 năm chỉ code HTML và CSS mình có thể nhanh chóng có phiên bản đầu tiên, chạy ngon lành cành đào, trông nó như sau:

<image
  title=""
  src="/assets/blog/animation-performance/02.gif"
/>

Thế là mình tò te đi khoe các cô, các chú, các bác trong nghề, xong bị chửi "bố thằng điên" vì không work. Mình chợt nhớ ra mấy tay to mình khoe chỉ dùng mỗi Safari, nên mình bật Safari lên xem thì... quả nhiên là lỗi thật :okay:

Thế là phải cặm cụi ngồi sửa.

Lý do chính cái animation không work trên Safari là do mình dùng `background-position` để làm hiệu ứng animation, và mình viết theo style position và vị trí như thế này:

```css
@keyframes bg-forward {
  from {
    background-position-x: left 1440px;
  }
  to {
    background-position-x: left;
  }
}
```

Đây là lý do `webkit` nó không hiểu. Cái style này gọi là _two value syntax_, các trình duyệt chạy nhân `chromium` và `webkit` sẽ không hiểu mình viết cái gì cả. Thay vì thế mình nên viết thế này:

```css
@keyframes bg-forward {
  from {
    background-position-x: 1440px;
  }
  to {
    background-position-x: 0;
  }
}
```

Ok, dễ hiểu mà phải không? Nhưng mà mình quá lười, do đó lúc này mình đã có ý định buông xuôi, sugar you you go, sugar me me go. :doubt: Tuy nhiên lương tâm của một kỹ sư mặt tiền như mình không cho phép điều đó xảy ra. Thế là quyết định bắt tay vào sửa.

Phiên bản thứ hai sử dụng _four-value syntax_ trong trong thuộc tính `background-position`, nên nó dĩ nhiên là work rồi. Mình còn kỹ đến độ thêm cả prefix `-webkit-` cho `keyframes` mặc dù PostCSS đã có `autoprefixer` :surrender:

```css
@-webkit-keyframes bg-forward {
  from {
    background-position: left 1440px top 0;
  }
  to {
    background-position: left 0 top 0;
  }
}

@keyframes bg-forward {
  from {
    background-position: left 1440px top 0;
  }
  to {
    background-position: left 0 top 0;
  }
}
```

Ờ nhưng mà thành quả cũng không khác gì ở trên, trừ việc nó có chạy được trên Safari và Chrome. :go:

## Hành trình giải quyết hiệu năng

Cách đây vài năm, mình nhớ mang máng có đọc được một article về việc performance của web animation, có thể đạt được 60fps. Dĩ nhiên xưa giờ mình có thấy một vài trang web làm animation rất đẹp, chẳng hiểu sao mình làm nhìn đuồi thế. Vậy là ngồi tìm hiểu.

### Cơ chế rendering waterfall

Gốc rễ nằm ở đây, đầu tiên bạn phải biết cách browser render graphic hiển thị lên cho bạn xem như thế nào. Sao mà nó hiện ra được hay ra, đâu phải cứ muốn nó chạy ngang là chạy ngang được đâu. Hồi xưa học ở trường được code mấy cái app cli, ngoài cái màn hình đen chữ trắng ra thì chẳng biết gì. Mãi được học môn Java được code mấy cái app có giao diện, mà cũng dùng thư viện gui có sẵn cả, có biết cụ thể nó hoạt động như nào đâu. Thế là mình được một phen mày mò xem thế quái nào mà browser nó render ra được mấy cái DOM lên, mà còn có animation ảo ma canada đến thế.

Quá trình mà trình duyệt thay đổi một trang web khi các element (phần tử) đang chuyển động có thể được mô tả thông qua các bước như sau:

<image title="" src="/assets/blog/animation-performance/03.png" />

1. **Composite:** Khi một thuộc tính của một phần tử thay đổi, trình duyệt phải thực hiện tình toán lại style của phần tử đó.
2. **Layout:** Trình duyệt sử dụng các style đã được tính toán để tìm ra vị trí và hình dạng của phần tử. Quá trình này được gọi là "layout" nhưng đôi khi cũng được gọi là "reflow".
3. **Paint:** Bước cuối cùng, trình duyệt cần vẽ lại cái đống trên màn hình. Một bước cuối sẽ không hiển thị trong quá trình này đó là trên trang sẽ được chia thành các lớp (layers) và được vẽ độc lập, sau đó kết hợp chúng nó lại thành một quy trình gọi là "Composition _(bố cục)_".

Waterfall thức là quá trình thác nước, phải xong cái này mới tới được cái tiếp theo. Cả quy trình này sẽ cần vừa in với một khung hình, vì màn hình sẽ không cập nhật cho tới khi hoàn tất cả quá trình đó. Vì chi phí cho mỗi lần render lớn như vậy, nên thường bạn sẽ thấy animation của mình chỉ đạt tới dưới 30 frames rate.

### Tuy nhiên...

Không phải tất cả các thuộc tính trong CSS đều sẽ phải trải qua đầy đủ 3 bước trong quá trình rendering waterfall, một số thuộc tính sẽ yêu cầu chi phí ít hơn các thuộc tính khác. Mình sẽ chia chúng thành 3 nhóm:

**Nhóm 1 - Siêu tốn kém**: Các thuộc tính của nhóm này thường ảnh hưởng đến **_hình dạng_** hoặc **_kích thước_** của phần tử.

- Nhóm này sẽ trigger toàn bộ quá trình render đủ 3 bước: **Composite**, **Layout** và **Paint**
- Các thuộc tính ví dụ: `left`, `max-width`, `border-width`, `margin-left`, `font-size`,...

**Nhóm 2 - Trung bình**: Thường các thuộc tính trong nhóm này sẽ không ảnh hưởng tới **_hình dạng_** hoặc **_kích thước_** của phần tử. Tuy nhiên việc thay đổi không nằm trên chính layer của chúng nó.

- Các quá trình bị trigger: **Composite** và **Paint**
- Thuộc tính ví dụ: `color`

**Nhóm 3 - Bảo vệ môi trường**: Các thuộc tính trong nhóm này được hiển thị trong layer của chính nó, không cần phải vẽ lại lên browser. Bởi vì chỉ cần update composition là đủ.

- Quá trình bị trigger: **Composite**
- Các thuộc tính ví dụ: `transform`, `opacity`

Tuy nhiên có một vài thuộc tính, tùy thuộc vào thằng dev cái core của browser đó nó muốn làm cái gì với cái thuộc tính đó. Do vậy để biết chắc chắn, bạn có thể tham khảo trang [CSS Triggers](https://csstriggers.com/) để biết thêm thông tin chi tiết nhé.

Vậy nên cách tốt nhất để tăng hiệu năng cho animation, là cố gắng giảm cost cho browser nhiều nhất có thể. Các bạn có thể xem ví dụ sau để hiểu rõ hơn:

<browser
  title="Ví dụ về hiệu năng của animation"
  src="https://jsfiddle.net/monodyle/c4v6jzf3/embedded/"
/>

Dùng Waterfall devtool để xem hiệu năng thế nào nhé.

#### Sử dụng `margin`

<image title="" src="/assets/blog/animation-performance/04.png" />

Như các bạn thấy, FPS trung bình chỉ rơi vào tầm 46. Thấp nhất rơi vào khoảng 17fps. Thử tưởng tượng đánh Dota 2 với cái cấu hình đó chắc ức chế chết chứ không cần team bạn đánh mình. May quá mình dev web.

<image title="" src="/assets/blog/animation-performance/05.png" />

Hình trên ta thấy rõ hơn, tốn quá nhiều thời gian (13.11ms) cho quá trình vẽ lại lên browser, trong khi chi phí tối đa cho mỗi frame là 16.7ms. Vậy nên fps thấp là phải rồi...

#### Sử dụng `transform`

<image title="" src="/assets/blog/animation-performance/06.png" />

Có vẻ khá hơn rồi nè, trông thanh framerate đồng đều hơn. FPS trung bình rơi vào khoảng 58.93ms. Chỉ cần nhìn độ sóng sánh của FPS trung bình và limit cũng đủ để thấy hầu như quá trình render đều rất mượt mà.

<image title="" src="/assets/blog/animation-performance/07.png" />

Xem records, chi phí cho mỗi lần Composite chỉ có 0.08ms, quá đã.

## Tổng kết

Vậy thôi, mình sửa `background-position` thành `transform`, thế là giờ nhìn cái animation nó siêu mượt. :smug: Các bạn có thể quay lại [trang chủ](/) để xem thử animation dưới chân trang.

Bài này phần kỹ thuật mình dịch từ bài [Animation performance and frame rate](https://developer.mozilla.org/en-US/docs/Web/Performance/Animation_performance_and_frame_rate) và thêm mắm thêm muối từ kiến thức của mình. Hy vọng bài viết này sẽ giúp ích cho các bạn theo một cách nào đó.

Hẹn gặp lại, hứa sắp tới sẽ có thêm một bài blog thú vị về CSS.


Animation làm sao mới tốt?


Chuyện là hôm nay lên [Slack](https://slack.com/), có một huynh trưởng làm một trang web static [Kipacast](https://kipacast.info/), nhờ mọi người góp ý về trang này. Sau một hồi góp ý thì mình để ý có một anh trai góp ý là có danh sách bài viết đang được sắp xếp từ cũ tới mới (Bài cuối ở đầu trang), anh cho rằng bài viết mới nhất nên nằm ở đầu trang. Suy nghĩ một hồi thì huynh trưởng chẳng biết làm sao nếu không sử dụng tới JavaScript, vì chẳng ai muốn nhúng JavaScript nếu thực sự không cần thiết.

> "Thêm nút sort bằng CSS hơi quá sức" - _Huynh trưởng said_

## CSS siêu cường

CSS bây giờ không những mạnh mẽ, mà còn có nhiều tính năng vượt trội so với thời mình chân ướt chân ráo vào nghề. Nhưng việc sử dụng CSS như thế nào lại là một bài toán khá nhọc nhằn vì không phải cứ cái gì cũng nhét feature mới vào là dùng được ngay.

Điển hình, xếp layout web dùng **grid** hẳn là tiện thật, nhưng mà browser cũ không hỗ trợ thì dùng làm chi rồi phải fix mớ bug vỡ layout khi vẫn còn người dùng sử dụng IE? :cry:

<image title="Flexbox & Grid" src="/assets/blog/awesome-flexbox/01.jpg" />

Và giải pháp chính là **flexbox**. Thực chất, flexbox không hề mới, nhưng nó chưa có tính phổ biến, nên việc sử dụng flexbox vẫn đang còn khá mơ hồ, chưa kể phải nhớ đống thuộc tính cũng tương đối vất vả. Thế nên nhiều người vẫn bỏ qua nó.

## Sử dụng flexbox hiệu quả

Như các bạn đã thấy, từ phiên bản **IE 11**, flexbox đã được hỗ trợ. Vậy nên sử dụng flexbox là lựa chọn sáng suốt cho tất cả các dự án không cần phải support **IE 6** :yikes: Nhưng làm sao để sử dụng flexbox hiệu quả, đó lại là một câu chuyện khác.

Đi tới một vài ví dụ đơn giản nhé, hồi xưa mình hay gặp vấn đề trong việc căn giữa chữ trong một cái container bất kỳ.

```html
<div className="box">
  <span className="text">Hello, Monody here! 👋</span>
</div>
```

Giải pháp của hồi đó là nếu đã fix cứng chiều cao của container bằng giá trị `Y`, mình sẽ sử dụng `text-align: center` để căn giữa chữ, và dùng `line-height: Ypx` để chiều cao của dòng bằng với chiều cao của container, vậy là xong rồi. :adore:

```sass
.box
  height: 24px
  text-align: center
  line-height: 24px
```

Nhưng mà nếu gặp trường hợp chiều cao của container không được cố định thì sao?? Một trick (hay còn được gọi là css hack) để giải quyết là set `position: relative` cho container, sau đó bọc nội dung bằng một tag khác và căn giữa element bên trong bằng các thuộc tính sau: `position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)`. Bài toán đã được giải quyết... nhưng mà sao dài quá vậy ta... :surrender:

```sass
.box
  position: relative
  width: ?? px
  height: ?? px

.text
  position: absolute
  text-align: center
  width: 100%
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
```

Một lý do khác là mình thường không sử dụng tới thuộc tính `position` nếu thực sự không cần thiết. Tìm đến với **grid**, chúng ta có thể tìm được một code ngắn hơn:

```sass
.box
  display: grid
  place-items: center
  ^ cái này tương đương với thuộc tính
    justify-content và align-items cùng giá trị là center
```

Nhưng client gọi điện chửi ~~sml~~ vì sao không support IE? Thế là phải lủi thủi ngồi sửa lại thành **flexbox**, bất ngờ là code so với **grid** cũng không dài hơn bao nhiêu:

```sass
.box
  display: flex
  justify-content: center
  align-items: center
```

## ASC & DESC Sorting với flexbox

Mình có một danh sách các bài viết như sau, các bài viết đã được sorting theo DESC:

```html
<div id="posts">
  <div className="item">
    <a href="#" className="title">My first post</a>
    <span className="created_at">a year ago</span>
  </div>
  <div className="item">
    <a href="#" className="title">How to clean code?</a>
    <span className="created_at">5 months ago</span>
  </div>
  <div className="item">
    <a href="#" className="title">First time learn Rust</a>
    <span className="created_at">2 months ago</span>
  </div>
  <div className="item">
    <a href="#" className="title">Flexbox is awesome!</a>
    <span className="created_at">few seconds ago</span>
  </div>
</div>
```

Việc sorting một danh sách có sẵn theo chiều ngược lại quá là điều dễ dàng khi sử dụng flexbox, chỉ cần thêm thuộc tính `flex-direction` cho container là chúng ta đã đảo ngược danh sách lại rồi. :adore:

```sass
#posts
  display: flex
  flex-direction: column-reverse
```

Looking good, CSS is awesome! :smug: Trời, dễ vậy cũng viết blog sao? Vậy thử thêm một tính năng là thêm nút sorting vào cho tập người dùng _khó tính_ nhé.

Việc tạo ra nút sorting cũng không khó, chỉ là vấn đề CSS thinking khi bạn đã nắm được hầu hết những gì CSS có thể thực hiện. Mình sẽ tạo ra 2 cái radio input trước container, một cho ASC và một cho DESC nhé:

```html
<input type="radio" name="sorting" value="DESC" checked />
<input type="radio" name="sorting" value="ASC" />
```

Sau đó mình sẽ kiểm tra, nếu cái nào đang check thì sẽ sorting lại theo cái đó, tức là thay đổi giá trị của thuộc tính `flex-direction` qua lại giữa `column` và `column-reverse`. Để kiểm tra được input nào đang được chọn, mình sử dụng **pseudo** `:checked` cho input, và sau đó dùng **General sibling combinator `~`** để tác động vào _flexbox container_:

```sass
#posts
  display: flex

input[type="radio"]:checked ~ #posts
  flex-direction: column

input[type="radio"][value="ASC"]:checked ~ #posts
  flex-direction: column-reverse
```

Wow! Hiệu quả tới bất ngờ, thêm xíu màu mè dô cho nó xịn xò nè :smug: bấm qua tab **Result** nha.

<browser
  title="Demo nè"
  src="https://jsfiddle.net/monodyle/ynf2qtmr/embedded/"
/>

Không hề đụng tới một dòng javascript nào, chúng ta vẫn có thể hoàn thành chức năng sorting một cách tốt nhất. Vậy nên khi code, hãy tập hạn chế những thứ chúng ta không thực sự cần. CSS còn rất nhiều thứ thú vị, nó không chỉ là styling, mà còn có thể làm được rất nhiều điều hay ho đó.

Hy vọng bài viết này sẽ mang lại cho bạn điều gì đó :popcorn:


Monody Le ✌️

Latest posts