Nhật ký làm Notas - Kỳ III

Nhật ký làm Notas - Kỳ III

Threads
  • Ơ buồn cười thật. Ai cũng biết GIF là định dạng ảnh động thường được dùng thay cho video clip để hiển thị các nội dung ngắn trên nền tảng web. GIF tiện hơn các nội dung dạng video là vì nó được hiển thị như một bức ảnh và được hỗ trợ rộng rãi. Cơ mà GIF có dung lượng nặng quá.

    Nói thật nhiều lúc mình có vài cái hành động muốn hiển thị lên web cho mọi người xem, cơ mà định dạng GIF nó nặng với cả cũng không biết cách tối ưu cho nhẹ xuống. Hôm nay lên mạng tìm hiểu xem định dạng nào có khả năng thay thế GIF trong tương lai thì mọi người biết đó là gì không? Là WEBP (webp)!!! Đúng vậy, là định dạng ảnh mà mình đang dùng trên blog lâu nay luôn á, mà giờ mới biết là nó hiển thị được cả ảnh động nữa, hơi quê 😆

    Kết hợp với ffmpeg nữa là chuyển được tất tần tật video clip thành webp được ngay. Để vài nửa ngồi chế lại cái cli một tí là dùng ngon luôn mọi người ạ 🤪

    » Xem thêm
  • Cảm giác như Github Copilot đang cố gắng mở rộng thị trường cho anh em developer á. Mới trước họ ra mắt Github Open Copilot Chat thì mới đây lại thêm cái Using GitHub Copilot in the command line dùng để giải thích hoặc gợi ý lệnh trong terminal.

    Đây, cách dùng rất đơn giản thôi, ví dụ muốn nó giải thích câu lệnh sudo apt-get để làm gì, thì:

    $ gh copilot explain "sudo apt-get"

    Hoặc nhờ nó gợi ý lệnh mong muốn, sử dụng tiếng Việt được luôn nhé (kể cả tiếng Việt không dấu vẫn hiểu 😳)

    $ gh copilot suggest "xoá commit chưa push"

    Mình đã kiểm tra và thấy lệnh ra rất đúng, xịn thật 🤓

    » Xem thêm
  • Github có chương trình học và ôn thi để lấy chứng chỉ "ghim" vào hồ sơ cá nhân. Các chứng chỉ này xoay quanh kỹ năng sử dụng và làm việc thành thạo với git cũng như Github. Nếu bạn muốn học thêm kỹ năng mới đồng thời thu thập thêm badge cho mình thì còn chần chừ gì nữa 👇

    Showcase your expertise with GitHub Certifications

    » Xem thêm

Vấn đề

Một tuần nữa lại trôi qua, đối với một người đang chú tâm vào làm một điều gì đó thì cảm giác thời gian trôi qua nhanh như cái chớp mắt. Việc thì vẫn còn đó nhưng quay đi ngoảnh lại đã là cuối ngày, tôi lại ngồi đây và loay hoay kể lại cho bạn đọc nghe về những gì đã làm được trong tuần vừa rồi.

Có thể nói tuần này nhìn chung nhẹ nhàng hơn so với các tuần trước vì tôi đã xử lý xong vấn đề đồng bộ của Adapter. Cũng như việc đồng nhất dữ liệu từ Adapter xuống LocalStorage. Có vẻ nó đã hoạt động tương đối ổn định, tôi không còn bị mất dữ liệu trong khi gõ nữa, và để biết điều đó có đúng hay không thì chỉ còn cách ngồi thực hành ngay trên Notas mỗi ngày. Chắc chắn rồi, từ giờ cho đến lúc kết thúc, tôi sẽ trong vai "chuột bạch" cho đến khi Notas chính thức được giới thiệu đến tất cả mọi người.

Vấn đề với Turso

Như đã bật mí, Adapter đầu tiên để đồng bộ dữ liệu trực tuyến có tên là Turso theo tên của một dịch vụ cung cấp máy chủ SQLite. Turso cho chúng ta tạo ra các máy chủ SQLite để lưu trữ dữ liệu với hạn mức cực kỳ ấn tượng. Ví dụ với tài khoản miễn phí, bạn có 9GB lưu trữ, 1 tỉ lần truy vấn đọc (read query) và 25 triệu truy vấn ghi (write query). Và bạn biết gì không, kể từ khi bắt đầu tích hợp Turso vào Notas, tôi mới chỉ đạt đến con số 3 triệu lượt đọc và 3 nghìn lượt ghi vào cơ sở dữ liệu. Thiết nghĩ nếu một mình dùng thì không biết bao giờ mới đạt đến hạn mức đã cho!

Để kết nối với Turso, cần phải sử dụng đến thư viện drizzle. Đây là một ORM khá mới nhưng đang tỏ ra có rất nhiều ưu việt. drizzle hỗ trợ nhiều driver kết nối đến các cơ sở dữ liệu SQL khác nhau như MySQL, Postgres, SQLite... cho đến cả cơ sở dữ liệu dựa trên Serverless như Cloudflare D1, Supabase, Turso...

drizzle cũng cần khai báo các schema để ánh xạ dữ liệu. Ban đầu, do chưa đọc hết tài liệu nên chưa biết cách để tối ưu các schema. Sau đó, tôi nhận ra drizzle còn hỗ trợ ánh xạ kiểu của dữ liệu được lưu trong SQLite về JavaScript.

Ví dụ dưới đây là một khai báo cho bảng folders:

import { sql } from "drizzle-orm";
import { text, integer, sqliteTable } from "drizzle-orm/sqlite-core";

const users = sqliteTable('folders', {
  id: text('id'),  
  isDelete: integer('isDelete'),  
});

isDelete thông thường sẽ nhận kiểu boolean trong MySQL hoặc PostgreSQL. Tuy nhiên trong SQLite không có kiểu dữ liệu boolean cho nên sử dụng kiểu integer với giá trị ngầm định 0 là false, 1 là true là một cách. Làm như thế, mỗi khi truy vấn dữ liệu cần phải qua một bước chuyển integer thành boolean để chuyển qua lại kiểu dữ liệu cần sử dụng trong mã.

drizzle hỗ trợ ép kiểu nếu ta khai báo đúng cách. Ví dụ trên có thể đơn giản hơn khi chỉ cần thêm một khai báo mode.

import { sql } from "drizzle-orm";
import { text, integer, sqliteTable } from "drizzle-orm/sqlite-core";

const users = sqliteTable('folders', {
  id: text('id'),  
  isDelete: integer('isDelete', { mode: 'boolean' }),  
});

Ngay lập tức drizzle hiểu isDelete mong muốn nhận giá trị boolean và nó sẽ tự động chuyển đổi dữ liệu một cách tự động trong các truy vấn.

Vấn đề với DaisyUI

Bên cạnh đó tôi cũng vừa mới cập nhật thêm giao diện tối (dark mode) cho ứng dụng, nhưng gặp một chút khó khăn.

Như bạn đã biết, DaisyUI là thư viện UI dựa trên Tailwind. Trong Tailwind, muốn tùy chọn giao diện theo chế độ dark/light mode, chúng ta có thể khai báo thêm prefix trước mỗi class. Ví dụ dưới đây khai báo mã màu nền gray-50 cho light mode, gray-900 cho dark mode.

<div class="bg-gray-50 dark:bg-gray-900">

</div>

Nhưng triết lý trong thiết kế của DaisyUI lại không làm như thế. Theo họ việc khai báo class với các tiền tố dark/light sẽ làm mã trở nên rối rắm và khuyến nghị sử dụng các mã màu chung. Các màu này được thay đổi dựa trên giao diện bạn chọn. Đây là danh sách các màu được khuyên dùng: List of all daisyUI color names | Colors.

Bạn đọc tham khảo thêm cuộc thảo luận về vấn đề này của DaisyUI tại darkMode: 'class' doesn't appear to be honored by daisyUI | Github Discussions.

Ngoài ra tôi cũng dành thời gian để xem cách cấu hình một ứng dụng PWA, vì chưa có kinh nghiệm với PWA cho nên mọi thứ còn đang rất mới mẻ. Hóa ra cấu hình cho PWA còn phức tạp hơn bao giờ hết vì nó phụ thuộc rất nhiều vào trình duyệt và cả hệ điều hành. Lấy ví dụ như Android và iOS có các cấu hình rất khác nhau. Cùng một tính năng nhưng iOS luôn đòi hỏi phức tạp và tỉ mỉ hơn Android rất nhiều lần.

Đây là nguồn giúp tôi tìm hiểu về PWA:

Tôi đã sửa rất nhiều lỗi cũng như tối ưu hóa giao diện để Notas hoạt động mượt mà hơn. Logo cũng đã được hoàn thiện và sẽ công bố trong thời gian sắp tới.

Dự định tuần tới

Giao diện Notas

Sang tuần, dự định của tôi là tối ưu hóa giao diện cho thiết bị di động, đồng thời tối ưu hóa cả cấu hình cho một ứng dụng PWA, từ lúc cài đặt cho đến khi sử dụng sao cho diễn ra một cách thuận lợi nhất có thể.

Cuối cùng còn một vấn đề nữa là mã hóa ghi chú. Tôi đã nghiên cứu cách mã hóa hai chiều cho Notas, về thuật toán và cả cách để mã hóa. Nhưng trước hết, hãy làm cho Notas hoạt động một cách ổn định đã vì mã hóa sẽ là một lớp nằm ở hai đầu dữ liệu vào/ra.

hoặc
* Bản tin tổng hợp được gửi mỗi 1-2 tuần, huỷ bất cứ lúc nào.
Author

Xin chào, tôi tên là Hoài - một anh Dev kể chuyện bằng cách viết ✍️ và làm sản phẩm 🚀. Với nhiều năm kinh nghiệm lập trình, tôi đã đóng góp một phần công sức cho nhiều sản phẩm mang lại giá trị cho người dùng tại nơi đang làm việc, cũng như cho chính bản thân. Sở thích của tôi là đọc, viết, nghiên cứu... Tôi tạo ra trang Blog này với sứ mệnh mang đến những bài viết chất lượng cho độc giả của 2coffee.dev.Hãy theo dõi tôi qua các kênh LinkedIn, Facebook, Instagram, Telegram.

Bạn thấy bài viết này có ích?
Không

Bình luận (0)

Nội dung bình luận...