TopDev
0888 1555 00 Employer
Đăng nhập
Công ty
Blog
NIPA

Tìm kiếm

ReactJS
Tất cả
Việc làm

Tạo thông báo việc làm ngay

30 việc làm

Bài viết liên quan

Xem tất cả
Thuật toán frontend: Tìm node chứa content chính

Thuật toán frontend: Tìm node chứa content chính

Bài viết được sự cho phép của tác giả Thanh Lê Tại sao nên đọc bài này Đập vào mặt những đứa nói làm Frontend thì không cần logic, thuật toán Xem tui khoe công việc đang làm thôi Vấn đề Chuyện là mình đang build một feature cho https://getnimbus.io, trong đó có một tính năng gọi là Term explain, cơ bản khi bạn đang xem một trang web nào đó mà có một vài từ về web3 thì Nimbus sẽ giải thích từ đó là gì, một cách ngắn gọn nhất. [video width="2842" height="1806" mp4="https://topdev.vn/blog/wp-content/uploads/2024/01/term-explain.mp4"][/video] Đó cơ bản feature là vậy, tuy nhiên có một vấn đề nhỏ: Một trang web sẽ có rất nhiều content, và thường user khi đọc một article hay news thì thường sẽ chỉ focus vào content đó thôi. Nếu vậy sẽ cực kì khó chịu nếu mình show một đống term explain mà không năm trong main content. Vậy câu hỏi tiếp theo, làm sao mình tự động detect được node nào trong cây DOM chứ [...]

Đọc thêm
Ngăn chặn tấn công XSS bằng Content Security Policy (CSP)

Ngăn chặn tấn công XSS bằng Content Security Policy (CSP)

Bài viết được sự cho phép bởi tác giả Sơn Dương CSP là gì Content Security Policy (CSP) là một lớp bảo mật bổ sung giúp phát hiện và giảm thiểu một số loại tấn công nhất định, bao gồm cả tấn công Cross-Site Scripting (XSS) và dữ liệu. Các cuộc tấn công này được sử dụng cho mọi thứ, từ đánh cắp dữ liệu, làm mất mặt trang web, đến phân phối phần mềm độc hại. Cách hoạt động của CSP Khi máy chủ phản hồi trong header với thẻ Content-Security-Policy hoặc một thẻ <meta> trong HTML Document như: <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> thì ngay lập tức trình duyệt hỗ trợ sẽ kích hoạt các biện pháp bảo vệ người dùng bằng cách hạn chế việc tải và thực thi các tài nguyên như Javascript, CSS, iframe, Web Worker, fonts… Ví dụ thẻ <meta> trên tương đương với việc đặt thuộc tính Content-Security-Policy sau vào trong header của phản hồ [...]

Đọc thêm
Hướng dẫn sử dụng Content Provider trong Android

Hướng dẫn sử dụng Content Provider trong Android

Bài viết được sự cho phép của tác giả Lê Hồng Kỳ Hướng dẫn sử dụng content provider trong android sẽ giới thiệu về Content Provider, vai trò và cách sử dụng nó. Content Provider là thành phần giúp cho những ứng dụng khác nhau trong cùng một thiết bị có thể đọc và ghi dữ liệu từ file hoặc từ SQLite của ứng dụng khác. Như vậy, content provider cho phép chúng ta tập trung dữ liệu tại một nơi mà có nhiều ứng dụng khác truy cập vào khi cần thiết. Hướng dẫn sử dụng content provider trong android – Ứng dụng hiển thị danh sách contact hiện có trong thiết bị Mô tả chức năng Hiển thị danh sách contact hiện có trong thiết bị khi người dùng chọn nút “LOAD ALL CONTACTS”. Ứng dụng có hỗ trợ thanh cuộn (scrollbar) cho phép người dùng trượt lên, xuống để xem hết contact. Mỗi một contact được hiển thị theo định dạng Tên : Số điện thoại [irp posts="52867" name="Sử dụng Sqlite trong [...]

Đọc thêm
Sử dụng CSS content như thế nào cho đúng

Sử dụng CSS content như thế nào cho đúng

Thuộc tính content trong CSS thường được sử dụng cùng với 2 ghost element là after và before, những giá trị nào có thể đưa vào cho thuộc tính content này <div data-done="✅" class="email"> chriscoyier@gmail.com </div> .email::before { /* Chèn trước thẻ div giá trị của data-done + Email: */ content: attr(data-done) " Email: "; } Không phải giá trị nào đưa vào content này cũng hợp lệ /* Được */ ::after { content: "1"; } /* Không được */ ::after { content: 1; } Không thể tính toán gì đâu, nó chỉ là string thôi <div data-price="4" data-sale-modifier="0.9">Coffee</div> /* Méo chạy */ div::after { content: " $" calc(attr(data-price) * attr(data-sale-modifier)); } /* Nope */ ::after { content: calc(2 + 2); } Muốn nối chuỗi ư? /* Không chạy đâu, không phải javascript hay php */ ::after { content: "1" . "2" . "3"; content: "1" + "2" + "3"; /* Dùng bình thường thế này thôi */ content: "1" "2" "3"; content: "1 2 3"; } Đường dẫn hình thì được, mà không cho thay đổi kích thước hình ¯_(ツ)_/ p:before { content: url(image.jpg); } TopDev via Vuilaptrinh

Đọc thêm