Vì sao không phải dự án nào dùng Single Page Application cũng tốt?

Trong một thời gian dài, Single Page Application (SPA) được xem như một bước tiến lớn của frontend. Các thư viện như ReactJS hay Vue.js giúp việc xây dựng giao diện nhanh hơn và mang lại trải nghiệm mượt mà.Tuy nhiên, khi đặt SPA vào bối cảnh các website cần SEO, marketing và phân phối nội dung, nhiều vấn đề bắt đầu xuất hiện. Không phải dự án nào cũng phù hợp với cách tiếp cận này.Khi nội dung không còn hiển thị ngay từ đầu sequenceDiagram participant U as User participant B as Browser participant S as Server participant J as JavaScript rect rgb(230, 245, 255) U->>B: Truy cập website B->>S: Request HTML S-->>B: HTML rỗng end rect rgb(255, 235, 235)
Category: Front-End, Phân tích
Post by: Young Monkeys - Founder
Posted date: 1775903781000

Hướng dẫn build tinymce

Bạn sẽ cần build các thành phần sau: TinyMCE. Tinymce JQuery (nếu bạn có sử dụng jquery) Sao chép tập tin i18n. Build TinyMCE Bạn hãy clone dự án TinyMCE về sau đó checkout sang tag mà bạn muốn. Tiếp theo hãy chạy lệnh yarn để tải các phụ thuộc cần thiết. Sau đó chạy lệnh yarn build để build TinyMCE. Kết quả bạn nhận được tập tin tinymce_[phiên bản].zip trong thư mục dist, bạn có thể giải nén tập tin zip này để lấy thư mục tinymce bên trong. Build TinyMCE JQuery Bạn hãy clone dự án TinyMCE JQuery về sau đó checkout sang tag mà bạn muốn. Tiếp theo hãy chạy lệnh yarn để tải các phụ thuộc cần thiết. Sau đó chạy lệnh yarn build để build TinyMCE JQuery. Kết quả bạn nhận được tập tin tinymce-jquery.min.js trong
Category: Front-End
Post by: Young Monkeys - Founder
Posted date: 1765164706000

Front-end cơ bản: Tìm hiểu về grid

Trong lập trình front-end, chúng ta sẽ thường xuyên phải làm việc với yêu cầu cần chia thành các hàng cột để hiện thị được nhiều dữ phần tử dữ liệu, ngoài flex box thì grid cũng là một lựa chọn.Kiến thức cơ bảnVí dụ chúng ta muốn hiển thị 3 hàng 3 cột cho các dữ liệu chúng ta có thể tạo mã nguồn như sau: <!DOCTYPE html> <html> <head> <style> .container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .container div { padding: 40px; text-align: center; font-size: 20px; color: white; border-radius: 8px; } .container div:nth-child(1) { background: #e74c3c; } .container div:nth-child(2) { background: #9b59b6; } .container div:nth-child(3) { background: #34
Category: Front-End
Post by: Young Monkeys - Founder
Posted date: 1762224076000
0%