Bài viết được sự cho phép của tác giả Nguyễn Thành Nam Thuật ngữ chuyên ngành dành cho front-end developer bao gồm nhiều khía cạnh khác nhau của công nghệ web và lập trình. Dưới đây là một số thuật ngữ quan trọng mà bạn có thể tham khảo: HTML (HyperText Markup Language): Ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo cấu trúc cho trang web. CSS (Cascading Style Sheets): Dùng để miêu tả cách thức hiển thị của các thành phần HTML trên trang web, bao gồm màu sắc, phông chữ, bố cục và nhiều thuộc tính khác... JavaScript (JS): Ngôn ngữ lập trình chính được sử dụng để tạo ra các trang web có thể tương tác, xử lý logic... DOM (Document Object Model): Đây là một giao diện lập trình ứng dụng (API) được sử dụng để truy cập và thao tác trên các tài liệu dạng HTML và XML. DOM thường được biểu diễn dưới dạng một cây cấu trúc dữ [...]

Bài viết được sự cho phép của tác giả Nguyễn Thành Nam Sliders là một thành phần phổ biến trong thiết kế web, cho phép bạn hiển thị nội dung dưới dạng trình chiếu động. Chúng thường được sử dụng để tạo ra các trình diễn ảnh, trình bày các tính năng nổi bật, hoặc giới thiệu sản phẩm. Sliders không chỉ giúp tăng tính thẩm mỹ cho trang web mà còn cải thiện trải nghiệm người dùng bằng cách làm cho nội dung trở nên sống động và thu hút hơn. Các thư viện slider phổ biến hiện nay đều hỗ trợ thiết kế responsive, đảm bảo trình chiếu mượt mà trên mọi kích thước màn hình và thiết bị. Hãy cùng khám phá 5 thư viện slider mà lập trình viên frontend nên biết. 1. Slick Slick là lựa chọn tuyệt vời nếu bạn cần một thư viện dễ sử dụng nhưng vẫn mạnh [...]

Bài viết được sự cho phép của tác giả Nguyễn Thành Nam Bạn đang tìm kiếm một nơi để triển khai dự án front-end của mình mà không phải trả phí? May mắn thay, có nhiều dịch vụ hosting miễn phí mà bạn có thể sử dụng để triển khai và chia sẻ ứng dụng web của mình. Dưới đây là danh sách top 5 hosting free phổ biến giúp bạn dễ dàng bắt đầu. 1. GitHub Pages GitHub Pages là một dịch vụ hosting tuyệt vời dành cho các dự án front-end. Để triển khai ứng dụng của bạn, bạn chỉ cần tạo một nhánh có tên đặc biệt, chẳng hạn như gh-pages, và GitHub sẽ tự động tạo ra một trang web cho dự án của bạn. Bạn có thể tận dụng ngay lợi ích của việc lưu trữ mã nguồn và triển khai trên cùng một nền tảng. 2. Cloudflare Pages Cloudflare là một nền tảng mạng phân phối nội dung (CDN) và bảo mật web phổ biến, cung cấp nhiề [...]

Bài viết được sự cho phép của tác giả Nguyễn Thành Nam Trong thế giới phát triển web hiện đại, lập trình viên frontend cần phải làm việc với nhiều công cụ để tạo ra các trang web và ứng dụng web đẹp và mạnh mẽ. Trong bài viết này, mình sẽ giới thiệu một số công cụ mà mọi lập trình viên frontend nên biết và sử dụng. 1. DevTools Trình duyệt web (như Google Chrome, Mozilla Firefox, hoặc Microsoft Edge) là công cụ quan trọng dành cho lập trình viên frontend. Chúng cho phép bạn kiểm tra và gỡ lỗi trực tiếp trên trình duyệt, điều này giúp bạn hiểu rõ cách trang web của bạn hoạt động trên các nền tảng khác nhau. Các công cụ phát triển tích hợp sẵn trong trình duyệt như DevTools của Chrome giúp bạn kiểm tra mã nguồn, hiệu suất và gỡ lỗi một cách dễ dàng. 2. Git và Github [...]

Bài viết được sự cho phép của tác giả Nguyễn Thành Nam Đối với lập trình viên frontend, việc tạo hiệu ứng và hoạt ảnh trên trang web là một phần quan trọng của việc tối ưu hóa trải nghiệm người dùng. Có nhiều thư viện mạnh mẽ giúp lập trình viên thực hiện công việc này một cách dễ dàng và hiệu quả. 1. Animate.css Animate.css là một thư viện animation CSS nhẹ và dễ sử dụng, giúp thêm hiệu ứng vào các phần tử HTML một cách nhanh chóng. Với nhiều loại hiệu ứng như bounce, fadeIn, zoomIn, thư viện này mang lại sự linh hoạt và đa dạng cho trang web của bạn. Sử dụng CDN để nhúng Animate.css <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> Sử dụng hiệu ứng <div class="animate__animated animate__bounce">Chào mừng bạn đến trang web!</div> 2. GSAP (GreenSock Animation Platform) GSAP là một thư viện animation mạnh mẽ, cung [...]

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? Trả lời cho câu hỏi, em học xong HTML, CSS và JS rồi thì làm gì để pro nữa anh? Bữa đọc đâu đó cũng thấy một bạn viết format này, thấy hay quá nên nay mình học theo, hy vọng mọi người thích nó! - Em nghe mấy người hay nói về State, State Mangement rồi dùng Redux các thứ, vậy State với State management là gì vậy anh? - À, trong cái app của em thì sẽ có trạng thái (state) đúng không, ví dụ như nút Like/Reaction trên facebook sẽ có nhiều trạng thái (Like, Tim, Haha, khóc, phẫn nộ,...). Thì việc em biết cái nút đang ở trạng thái nào nghĩa là em biết state của nó! Còn state management là gì hả? Thì một app có một đống state rối rắm, rườm rà như vậy, mình là thằng frontend dev thì cần phải quản lý (manage) đống trạng thái (state) đó nên gọi là [...]

Bài viết được sự cho phép của tác giả Sơn Dương Thời gian thấm thoát thoi đưa, nhanh như chó chạy ngoài đồng. Mới ngày nào, đại ca Evan You (tác giả của VueJS) giới thiệu công cụ ViteJS trong năm 2020, giờ đã hơn 3 năm. Đây là công cụ build tool được giới thiệu là vô cùng mạnh mẽ, có tốc độ kinh hoàng, so với Webpack thì webpack chỉ có hít khói. Mới đầu mình cũng chưa muốn tìm hiểu Vite là gì, vì nó còn quá mới, cứ để cho tác giả và cộng đồng trải nghiệm trước. Nhưng đến thời điểm hiện tại, mình cũng đã bị thuyết phục. Thực sự ViteJS dùng rất sướng, tốc độ build thì quá nhanh. Bài viết này, chúng ta cùng tìm hiểu về một frontend build tool đỉnh cao ViteJS – một công cụ có thể thay thế ông già gân Webpack. Để xem Vite là gì đã nhé! Vite là gì? Chắc hẳn ai làm việc với các JS framework như VueJS, ReactJS, Angular… đều biết rằng, ở [...]

Bài viết được sự cho phép bởi tác giả Sơn Dương Theo khảo sát State of JavaScript, Vue.js là một front-end framework được nhiều người tìm hiểu nhất. Trong bài viết này, chúng ta cùng tìm hiểu lý do tại sao chọn Vue.JS. Đồng thời, mình cũng sẽ hướng dẫn các bạn cách xây dựng một ứng dụng đơn giản với Vue.js Một JavaScript framework tuyệt vời Như bạn đã biết, Javascript đã có tuổi đời hơn 10 năm, không quá trẻ nhưng cũng không phải là lâu đời nếu so với các ông già gân như Java, C#. Cộng đồng người sử dụng Javascript ngày càng lớn mạnh, do đó mà số lượng JS framework mới ra mắt rất nhiều. Nổi bật nhất trong số đó là React, Vue, Angular và tân binh svelteJS. Bài viết này mình sẽ không so sánh để chọn ra một JS framework tốt nhất, các bạn có thể xem lại bài viết này của mình: React [...]

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? Tìm hiểu xem Force Layout, reflow là gì? Cách khắc phục, work around Force layout Force layout/reflow là mỗi point ảnh hưởng cực lớn tới performance của website (Đặc biệt là mấy trang web phức tạp), mà nguyên nhân tạo ra nó mình thấy khá là… chí mạng. Vài dòng code cơ bản thôi mà lại khiến hậu quả lớn đến vậy!? Như ví dụ trên hình trên là kết quả Performance check của CoinMarketCap, thời gian Hydrate là 1.03s, và trong đó, task force layout/reflow đã chiếm đâu đó khoảng 0.2s rồi (Tức là 20%) Sau khi tìm hiểu rồi debug các kiểu thì mình nhận ra là issue này xuất phát từ một dòng lệch cực kì xàm if (window.innerWidth < MOBILE_SIZE) { Vậy cụ thể lỗi trên là như nào? Những lỗi trên gọi là Layout Thrashing Layout Thrashing means: Forcing the browser to calculate a layout that is never rendered to the screen. Hiểu cơ bản [...]

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? Nâng cấp level của bản thân một cách ngắn gọn, hiệu quả Người ta làm Web3 được chả lẽ mình làm không được? Trở thành Web3 Frontend developer Giờ tôi đang là Web2 developer, làm react, redux, nextjs mỗi ngày kiếm cơm, làm sao tôi trở thành Web3 developer được? Đây là check-list Blockchain là gì? Cách mà wallet và block chain tương tác với frontend? Code thử, tương tác với blockchain (Đơn giản như call API) Kiếm việc trong Web3 Blockchain là gì? Đâu tiên thì nên hiểu khái niệm xem tụi Blockchain hay Web3 là gì nhỉ? Tham khảo bài viết: "Công nghệ Blockchain là gì? Tiềm năng & ứng dụng thực tế" và "Tiềm năng ứng dụng thực tế của blockchain & Web3" để hiểu hơn về công nghệ này. Tương tác với Block-chain và Wallet Về cơ bản khi code frontend, mọi chuyện không có gì thay đổi nhiều so với web2 cả. Thay [...]

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ứ [...]

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? Dành cho các bạn mới tiếp cận và thấy quá nhiều thuật ngữ mới Dành cho các bạn có thể đã làm FE một thời gian rồi nhưng đôi khi vẫn không biết có một thứ như vậy tồn tại trên đời Có vài keyword để tối ưu performance cho website Các thuật ngữ phổ biến Trong bài này mình sẽ nói về các thuật ngữ liên quan tới optimization nhé! Code split Hiểu một cách đơn giản thì bạn có một file code rất to, bạn chia file to đó ra thành nhiều file nhỏ thì gọi là code split. [video width="1920" height="1080" mp4="https://topdev.vn/blog/wp-content/uploads/2024/01/Frontend.mp4"][/video] Hoặc một ví dụ khác là bạn có một trang web build bằng React, trong đó bao gồm Header, body và Footer. Thì bạn có thể build thành một file bundle.js bao gồm cả 3 component trên hoặc cũng có thể chia cái bundle đó thành 3 file, mỗi [...]

Với sự tăng trưởng của các công ty công nghệ hiện nay, nhu cầu tuyển dụng lập trình viên đang là rất cao. Trong đó lập trình viên Frontend luôn là vị trí có số lượng yêu cầu cao hơn do đặc thù của dự án cùng với sự phát triển của ứng dụng Web. Để có thể chuẩn bị thật tốt và thể hiện đúng kỳ vọng của nhà tuyển dụng, hôm nay mình cùng chia sẻ với các bạn một vài kinh nghiệm cho buổi phỏng vấn lập trình viên Frontend nhé. Chuẩn bị trước buổi phỏng vấn Trước hết để có được sự tự tin khi tham gia phỏng vấn, bạn cần chuẩn bị đầy đủ từ trang phục, tác phong, chú ý giờ giấc,… để có thể tạo ấn tượng tốt với nhà tuyển dụng. Nắm chắc được quy trình phỏng vấn thông qua nội dung mà phía HR đã thông báo. Nhiều công ty, doanh nghiệp có những quy trình phỏng vấ [...]

Frontend Developer là những người đảm nhận vai trò xây dựng giao diện website giúp hiển thị nội dung và xử lý các tương tác của người dùng. HTML, CSS và JavaScript được xem như 3 trụ cột, hay 3 ngôn ngữ chính mà mọi lập trình viên Frontend phải nắm được. Ngoài ra, còn có rất nhiều thư viện, framework cùng các ngôn ngữ, thư viện và kỹ năng khác mà một Dev Frontend cần phải nắm được để có thể đảm nhận được vai trò của mình trong tổ chức, dự án. Hôm nay chúng ta cùng đi tìm hiểu để trả lời cho câu hỏi, lập trình viên Frontend cần học những gì nhé. Công việc của một lập trình viên Frontend Thông thường khi phát triển một Website, chúng ta sẽ chia ra 2 phần là frontend và backend để tách biệt công việc với những yêu cầu và kĩ năng khác nhau. Đối với Frontend, là những công việc ở client-side; mô tả công việc [...]

Với những bạn đang chập chững bước vào nghề lập trình, việc lựa chọn học Front-End hay Back-End là một quyết định khó khăn. Bởi mỗi lựa chọn khác nhau sẽ dẫn đến những thứ cần học khác nhau. Vì vậy, bạn phải hiểu rõ hai lĩnh vực này để xem thử đâu là thứ mình phù hợp nhất rồi mới đưa ra quyết định chính xác. Bài viết này sẽ tổng hợp những thông tin bạn cần về Front-End và Back-End, giúp làm sáng tỏ những thắc mắc của bạn. Front-end là gì? Back-end là gì? Front-end là gì? Front-end là một lĩnh vực trong phát triển web tập trung vào giao diện người dùng. Nhiệm vụ chính của front-end là tạo ra các trang web hấp dẫn, đảm bảo trải nghiệm tốt cho người dùng. Lập trình Front-end sẽ sử dụng các ngôn ngữ như HTML, CSS và JavaScript để xây dựng và tối ưu hóa các thành [...]