
#### Bước 1:

Get link  ảnh:

![Get link ảnh](/assets/images/get-lnik-google-drive.webp "Get link ảnh")

![Copy link](/assets/images/copy-link-google-drive.webp "Copy link")

Ta có link dạng:

https://drive.google.com/file/d/XXXX/view?usp=sharing

trong đó XXXX là content ID của ảnh, từ đó có direct link:

https://drive.google.com/uc?export=view\&id=XXXX




Cách lấy direct link cho ảnh trên Google Drive

date-fns vietnamese locale reference

Danh sách hơn 100 tool để nâng cấp bản thân, phát triển sự nghiệp

Danh sách 100 cái tun miễn phí để Park Hang Seo


### Tắt redirect từ domain -> www trên Vercel

Hình như mặc định của Vercel là nếu set custom domain thì sẽ có thêm rule redirect từ domain => www.domain. Điều này khiến site khi truy cập thông qua domain url sẽ bị mất thời gian redirect sang www.

Để cấu hình redirect, vào Settings -> Domains -> chọn domain chính và bấm Edit.

![Vercel Domains Settings](/assets/images/vercel-domain-settings.jpg "Vercel Domains Settings")

&#x20;Tại Redirect, chọn No Redirect và ấn Save.

![Vercel Domain No-Redirect](/assets/images/vercel-domain-no-redirec-1t.jpg "Vercel Domain No-Redirect")



Một vài típ Next.js hữu ích


### Vấn đề:

Khi set width cho một phần tử là 100vw, trình duyệt hiển thị thêm thanh scroll ngang.

![100vw unexpected](/assets/images/100vw-unexpected.jpg "Unexpected :(")

### Phân tích:

Chiều rộng viewport có thể hiểu nôm na là chiều rộng của cửa sổ trình duyệt hoặc chiều rộng của màn hình (đối với các thiết bị mobile).&#x20;

Tạm gọi phần tử được set 100vw là A.

Nếu để hiển thị A, trình duyệt không cần hiển thị thêm thanh scroll dọc thì sẽ chẳng có vấn đề gì xảy ra, 100vw tràn đẹp chiều ngang trình duyệt.

Tuy nhiên nếu trình duyệt hiển thị thanh scroll dọc (do nội dung bên trong A vượt quá kích thước chiều dọc của nó) thì lúc này một phần nội dung bên phải của A bị che mất bởi thanh scroll dọc. Chính vì vậy, để giúp người dùng có thể ngó ngiêng nốt phần nội dung đã bị che khuất, trình duyệt buộc lòng phải hiển thị thêm thanh scroll ngang (horizontal scrollbar).

### Cách giải quyết:

Thay vì set "cứng" chiều ngang của A là 100% độ rộng của viewport(100vw) thì mình phải tính toán được độ rộng chiều ngang tối đa của A mà không bị overlap với thanh scroll dọc (nếu có).

Công thức : `A'width = 100% viewport's width - vertical scrollbar's width`

Đầu tiên là phải tìm ra được, độ rộng của thanh scroll dọc.

Độ rộng viewport: `window.innerWidth`

![Window.innerWidth - MDN](/assets/images/windowInnerWidthMDN2.jpg "Window.innerWidth - MDN")

Độ rộng viewport không tính đến thanh scroll dọc: `document.body.clientWidth`

![Element.clientWidth (MDN)](/assets/images/elementClientWidthMDN.jpg "Element.clientWidth (MDN)")

Từ đó có được độ rộng thanh scroll dọc:

```javascript
const scrollbarWidth = window.innerWidth - document.body.clientWidth;
```

Lưu giá trị này vào một biến css (css variable) để tiện cho việc CSS:

```javascript
document.body.style.setProperty("--scrollbarWidth", `${scrollbarWidth}px`);
```

Lưu ý thực hiện việc tính toán này sớm nhất có thể ngay sau khi page được load:

```
```





Cuối cùng, set style cho phần tử A:

```
```





Done.
