Codestus.com

My github avatar
AllFrontendHTML/CSSJavaScriptLaravelNodeJSReactSecurityTypescriptVue

Typescript Event Types trong React

Đôi khi, chúng ta không muốn gõ lại toàn bộ `type` , chỉ type chúng ta cần. Để trích xuất đúng `event type`, bạn sẽ cần múa đôi chút.

13/02/2024

5 mins read

Xây dựng chức năng kéo thả File trong React

Trong bài viết này, chúng ta sẽ đi từng bước một xây dựng một bản demo về component Drag-and-drop file upload trong React, tận dụng TypeScript để có type-safe

11/10/2023

8 mins read

Xây dựng Confirm Dialog trong React

Confirm dialog (hay tiếng việt gọi là “hộp thoại xác nhận”) là một trong những thành phần tương tác người dùng phổ biến nhất được thấy trong các ứng dụng ngày nay khi người dùng thực hiện một hành động quan trọng nào đó có khả năng ảnh hưởng cao và không thể hoàn tác

02/09/2023

14 mins read

Tìm hiểu về “useSyncExternalStore” hook trong React

Trong bài viết lần này, chúng ta sẽ cùng tiềm hiểu về `useSyncExternalStore` hook. Đây là một hook hữu ích khi bạn cần tích hợp tính năng quản lý states không có React trong ứng dụng của mình.

23/08/2023

4 mins read

Tìm hiểu về “use” hook trong React

Trong bài viết này, hãy cùng nhau tìm hiểu về công dụng của “use” hook. Lưu ý rằng Hook này chưa có sẵn chính thức trong React.

20/08/2023

2 mins read

Drop drilling là gì và tránh nó thế nào trong React?

Prop Drilling là một khái niệm được nhắc đến trong React, đôi khi không thể tránh khỏi, trong nhiều trường hợp chúng ta không nên áp dụng nó. Trong bài viết lần này, chúng ta sẽ xem xét nó là gì và lý do phải tránh nó như đề cập ở tiêu đề.

17/08/2023

10 mins read

React Batching là gì? 

Batching trong React mô tả chi tiết triển khai nội bộ của React, giúp nhóm nhiều yêu cầu cập nhật trạng thái trong một lần cập nhật

14/08/2023

4 mins read

Prop drilling và component composition trong React

Đôi khi tất cả những gì chúng ta cần để tránh việc prop drilling là một chút tái cấu trúc

24/04/2023

3 mins read

Tại sao onClick={fn()} lại gây ra lỗi "too many re-renders" trong React?

Sự khác biệt ở trên là gì?. Tại sao trong ví dụ 2 trên ảnh lại gây ra tình trạng lặp vô hạn "too many re-renders" trong React?.

24/04/2023

3 mins read

Bổ sung một số kỹ năng debug với console.log() 

Nếu bạn so sánh cả hai, bạn sẽ thấy điều này hữu ích như thế nào. Tránh nhầm lẫn các giá trị của các biến khi chúng ta debug bằng mắt.

11/04/2023

3 mins read

Làm thế nào để cancel request trong Axios?

Bài viết ngắn gọn và đi thẳng vào vấn đề này chỉ cho bạn 2 cách riêng biệt để cancel một request đang gửi đi trong Axios.

07/04/2023

2 mins read

Làm thế nào để chia sẻ internal refs với component khác?

Thuộc tính `ref` trong React được sử dụng để truy cập một component children hoặc một DOM element. Chúng ta thường sử dụng `ref` với HOC được cung cấp từ React là `forwardRef` hoặc `useRef` hook. Nhưng bạn có bao giờ từ hỏi khi không biết 2 phương thức tương tác với `ref` ở trên có thể tồn tại trong một thời điểm hay không?.

02/04/2023

4 mins read

Refresh token trong Axios như thế nào?

Việc triển khai `refresh token` có thể không còn xa lạ đối với nhiều frontend dev trong chúng ta.

01/04/2023

7 mins read

Axios Interceptors! Tại sao chúng ta cần nó?

Mặc dù đã sử dụng nó rất nhiều, nhưng chúng ta vẫn chưa thực sự tận dụng hết những gì nó đang có. Trong lần này, như tiêu đề đã đề cập, chúng ta sẽ tiến hành tìm hiểu một trong số những thứ quan trọng của Axios mà bạn cần phải biết là Axios Interceptor.

31/03/2023

6 mins read

React.useTransition() hook là gì và sử dụng thế nào?

Một số cập nhật giao diện người dùng nên có sự ưu tiên, thực hiện càng nhanh càng tốt (Nhập giá trị vào một input hay chọn một option từ dropdown), trong khi đó một số thành phần khác nên có độ ưu tiên thấp hơn (lọc danh sách).

17/12/2022

7 mins read

Tìm hiểu về useImperativeHandle hook trong React

`useImperativeHandle` được tạo ra cho các kịch bản mà bạn quyết định `refs` sẽ có và được quyền truy cập gì từ một thành phần tuỳ chỉnh.

10/12/2022

6 mins read

Typescript - Biên dịch & đóng gói thư viện với Webpack 

Cấu hình các files Webpack giữa các dự án có thể khác nhau vì nó là một công cụ và các nhà phát triển sẽ luôn giữ nó làm tất cả mọi việc. Nhưng một thư viện đơn giản như hiện tại, tất cả những gì chúng ta cần làm là bundle ra các mã theo chuẩn `es5`.

07/08/2022

10 mins read

Tất cả những gì bạn cần biết về Ref trong React

React Ref (React reference) hiểu đơn giản là một đối tượng tham chiếu đến một biến, một component giữ cho giá trị của nó không thay đổi giữa các lần `render` và truy xuất các giá trị đó thông qua key `current`.

12/06/2022

9 mins read

Đặt điều kiện trong JSX như thế nào cho hợp lý?

Khi phát triển các components, việc đặt các điều kiện bên trong JSX làm đoạn mã của bạn trở nên lộn xộn và khó đọc hơn

24/04/2022

5 mins read

Cách lấy giá trị thuộc tính CSS với Javascript

Đôi khi, khi phát triển dự án chỉ sử dụng CSS sẽ không đủ đối với nhu cầu bạn cần cho một hiệu ứng cần xây dựng. Bạn sẽ cần điều chỉnh được giá trị CSS với Javascript. Nhưng làm sao để lấy giá trị trong CSS để có thể làm việc này?

02/03/2022

4 mins read

Một thủ thuật đơn giản để tối ưu quá trình kết xuất trong React

Chúng được gọi là các đối tượng mô tả giao diện người dùng. Chúng mô tả giao diện người dùng mà React sẽ tạo ra trên DOM.

13/02/2022

7 mins read

Giám sát hiệu xuất ứng dụng với React Profiler

Sẽ tốt hơn nếu bằng cách nào đó chúng ta có thể theo dõi và đánh giá được thời gian kết xuất và gửi thông tin đến máy chủ trong ứng dụng mà, điều này giúp chúng ta có thể kiểm soát và chủ động theo dõi hoạt động của ứng dụng hơn.

12/02/2022

5 mins read

Cải thiện hiệu xuất tương tác form trong React

Xử lý form trong các ứng dụng React hiện tại là một điều không thể thiếu. Từ đó, nó cũng mang đến nhiều hệ luỵ về hiệu xuất nếu chúng ta xử lý sai về nó. Vậy làm thế nào để cải thiện hiệu xuất của Form trong React được cho là đúng?

18/10/2021

16 mins read

Sử dụng React Context như thế nào cho hiệu quả?

Ứng dụng Context trong React và useReducer tốt hơn và hiệu quả hơn như thế nào?

16/10/2021

7 mins read

Trường hợp sử dụng useEffect và useLayoutEffect như thế nào?

Về mặt sử dụng thì cả 2 hook useEffect và useLayoutEffect đều có cách sử dụng giống nhau, nhưng sẽ khác nhau trong một số trường hợp. Vì vậy, trong bài viết này, chúng ta sẽ cân nhắc xem xét các trường hợp khi sử dụng 2 React Hook này.

15/10/2021

3 mins read

CSRF Protection và những điều cần phải biết

Mọi người có tự hỏi vì sao một số email khi nhận được lại nằm trong thư mục spam?. Thành thật mà nói thì hãy thận trọng khi truy cập một trang web tràn ngập quảng cáo và chiêu dụ đá số đã được đính kèm trong mail đó.

16/09/2021

8 mins read

Clean up memory leak trong React useEffect

Memory leak không còn là thuật ngữ quá xa lạ đối với các bạn khi làm việc với React. Đôi khi bạn sẽ thấy thông báo lỗi về rò rì bộ nhớ, điều này cảnh báo rằng chúng ta phải khắc phục nó ngay để tránh tác hại to lớn mà nó mang lại

09/09/2021

7 mins read

React Virtual DOM được hiểu như thế nào 

Nếu bạn sử dụng react hoặc đang trong quá trình học React, bạn sẽ nghe qua một thuật ngữ React Virtual DOM

07/09/2021

6 mins read

Cache dữ liệu lấy từ API qua ví dụ đơn giản

Cache không còn là một từ quá xa lạ đối với một lập trình viên web. Chúng ta hay nghe tới nó khi xử lý các yêu cầu truy vấn ở phía máy chủ khi xử lý các yêu cầu có tính thường xuyên và lặp dữ liệu

31/08/2021

7 mins read

Xây dựng tính năng đặt lịch đăng bài với Laravel

Trong wordpress, đôi khi bài blog bạn vừa soạn thảo không được đăng ngay trong lúc đó, bạn sẽ muốn lên lịch đăng bài cho nó vào ngày hôm sau. Yes, cứ đặt lịch đăng bài cho nó thôi vì tính năng đó đã được xây dựng sẵn từ Wordpress.

29/08/2021

7 mins read

Sử dụng React-Query để fetch dữ liệu

Để khôi phục niềm tin của bạn vào việc đồng bộ hóa dữ liệu trạng thái máy chủ với thư viện React Query được cấu hình trước. Xem cách bạn có thể đưa logic tìm nạp, bộ nhớ cache và cập nhật vào một vài dòng mã dễ hiểu với các móc tự động hóa đơn giản được trình bày trong hướng dẫn này.

28/08/2021

8 mins read

Xây dựng Progress Bar khi Upload file với JavaScript

Tính năng này đã được triển khi ở các ông lớn như facebook, google... khi đó quá trình đăng tải tệp tin của bạn sẽ được hiển thị theo tỉ lệ phần trăm để giúp người dùng biết khi nào quá trình tải tệp hoàn thành. Điều này giúp ích rất nhiều đối với việc cải thiện trải nghiệm của người dùng.

03/07/2021

14 mins read

Kiến thức cơ bản về file package.json

Tệp package.json là phần cốt lõi của hệ sinh thái Node.js và là phần cơ bản nhất để hiểu và làm việc với Node.js, npm và cả JavaScript

29/06/2021

6 mins read

Làm thế nào để kết hợp React Hooks với Class Component

Mặc dù mục tiêu phát triển của React Hooks từ functional component sinh ra không phải phục vụ cho mục đích sử dụng nó bên trong một class components.

17/06/2021

4 mins read

Javascript Tips #1: Array

Bài viết chủ yếu tổng hợp các kỹ thuật nhỏ nhưng có võ trong JS. Giúp bạn tiết kiệm thời gian và xử lý các tính huống cơ bản một cách thông minh hơn

11/06/2021

1 mins read

Tìm hiểu về React hook useEffect

Kể từ khi các hooks sinh ra trong phiên bản v1.6. Nó đã kiến React rút ngắn được cách viết, nhưng đánh đổi với điều đó là chúng tương đối khó đối khi mới bắt đầu tìm hiểu.

10/06/2021

7 mins read

Khởi tạo ứng dụng Vue

Mặc dù vue hay còn gọi là vuejs là một công nghệ sinh sau đẻ muộn hơn so với react hay angularjs đời đầu. Nhưng hiện tại, nó có thể coi là một công nghệ, framework đang rất được ưa chuộng trong các dự án của nhiều công ty hiện nay.

05/06/2021

4 mins read

6 cách khai báo function trong JavaScript

JavaScript là có thể coi một ngôn ngữ vô cùng phức tạp và vô số định nghĩa mà các người mới và các lão làng cũng phải lắc đầu. Tuy nhiên, trong sự phức tạp đấy nó mang ý nghĩa riêng cho các trường hợp mà chúng ta ứng dụng. Cách khai báo hàm trong JavaScript cũng vậy, có rất nhiều cách để chúng ta khai báo.

04/06/2021

5 mins read

Góc nhìn trực quan về Javascript: Event Loop

Event Loop, đó là một trong những điều mà các Javascript Developers rất khó có thể hiểu nó ở lần đầu tiên, nhất là đọc các bài viết miêu tả bằng code về nó. Nhưng với miêu tả trực quan thì khó, chúng ta có thể giải thích điều đó thông qua gif hình ảnh miêu tả hoạt động của Event Loop.

14/04/2021

5 mins read

Góc nhìn trực quan về Javascript: Hoisting

Hoisting là một trong những thuật ngữ thông dụng mà lập trình viên JS đều phải nghe qua. Vậy Hoisting là gìtrong javascript mà nó lại biến thành một thuật ngữ được tìm kiếm nhiều đến vậy.

13/04/2021

4 mins read

Debounce là gì trong javascript?

Các sự kiện như scroll, movemouse, click hao tốn của chúng ta rất nhiều tài nguyên mỗi khi nó được gọi để thực hiện một hành động. Sử dụng `debounce` nhằm mục đích giảm hao tổn tài nguyên bằng cách ngăn một chức năng được gọi nhiều lần liên tiếp.

20/03/2021

2 mins read

Phân biệt async và defer trong thẻ script

Trong khi sử dụng thuộc tính async, quá trình phân tích cú pháp HTML đang diễn ra, bất kỳ tập lệnh nào có thuộc tính async đều được tìm nạp từ mạng một cách không đồng bộ cùng với quá trình phân tích cú pháp HTML.

20/03/2021

2 mins read

Các kỹ thuật viết code javascript mà bạn không thể không biết

Từ lúc ra đời đến nay, javascript đã thay đổi rất nhiều, tính đến nay. Chúng ta có hàng chục các viết cho 1 điều kiện trong javascript, rất nhiều các để giải quyết 1 vấn đề, có thể rất dài dòng hoặc phức tạp. Đến nay, các cách giải quyết dang được các nhà sáng lập JavaScript đơn giản hoá nó bằng các cách thức đơn giản hơn qua từng phiên bản.

13/03/2021

4 mins read

CSS Grid #1: Tìm hiểu về Grid

Chúng ta hãy bắt đầu thay suy nghĩ về CSS Grid đi nhé. Đây là Cheatsheet về mọi thứ bạn có thể làm với Grid để bắt đầu vào năm 2021!

07/03/2021

4 mins read

React Hooks Series #1: Tìm hiểu về useState()

Chúng ta hãy cùng bắt đầu chuỗi bài viết nói về React hooks. Mục tiêu chung là nắm được toàn bộ các hooks được cung cấp bởi React và từ những phát triển custom hooks.

03/03/2021

5 mins read

Promise Memoization Pattern

Nếu bạn đang tìm hiểu về cách triển khai bộ nhớ đệm (caching) cho Promise, thì đây sẽ là một bài viết dành cho bạn.

27/02/2021

3 mins read

Những mẹo và thủ thuật sử dụng CSS (Phần 1)

Trong bài viết lần này, chúng ta sẽ tổng hợp những mẹo và thủ thuật thường được sử dụng khi làm việc với CSS để xây dựng trang web tốt hơn. Cũng góp phần cải thiện trải nghiệm người dùng (UX) tốt hơn.

27/02/2021

4 mins read

Cheatsheet và ví dụ về cách xử lý dữ liệu trong React

Có nhiều cách để tìm nạp dữ liệu từ API bên ngoài trong React, nhưng bạn nên sử dụng cách nào cho các ứng dụng của mình vào năm 2021? Trong bài viết này, chúng ta hãy xem lại 5 cách phổ biến được xử dụng để xử lý tìm nạp dữ liệu với React thực hiện các yêu cầu HTTP đến các REST API

21/02/2021

6 mins read

Cùng tìm hiểu về Promise và Async/Await trong JavaScript qua các ví dụ

Mọi thứ trên web hiện nay đều có xu hướng tiêu tốn thời gian, nếu bạn thực hiện một lệnh gọi API để truy vấn dữ liệu, bạn có thể sẽ cần đợi một khoảng thời gian để phía Server phản hồi. Vì thế, lập trình bất đồng một là kỹ năng cần thiết mà lập trình viên cần biết.

20/02/2021

8 mins read

Xây dựng UI Component Design Systems dành cho lập trình viên Frontend (Phần 2)

Có 2 cách để chúng ta thiết kế, xây dựng hệ thống. Lựa chọn phù hợp chủ yếu dựa trên việc bạn là ai và bạn cần đạt được những gì.

19/02/2021

5 mins read

Xây dựng UI Component Design Systems dành cho lập trình viên Frontend (Phần 1)

Thiết kế hệ thống UI Component (User Interface Component) cho phép các nhóm phát triển giới thiệu về trải nghiệm hình ảnh và các chức năng nhất quán của người dùng khác nhau giữa các sản phẩm và ứng dụng.

17/02/2021

10 mins read

Tìm hiểu về useMomo và cách sử dụng hợp lý?

Khi ứng dụng của bạn mở rộng (scales), vấn đề về hiệu xuất sẽ nhiều hơn và hơn thế nữa. Trong khi React đã làm rất tốt khả năng tối ưu và rất nhanh

16/02/2021

6 mins read

Hướng dẫn sử dụng useCallback trong React

React hooks là một phương thức quản lý state mới trong function components, được giới thiệu trong phiên bản React v16.8

14/02/2021

8 mins read

Lưu trữ JWT thế nào cho an toàn?

Trong những năm gần đây, JWT đã được sử dụng rộng rãi như một phương pháp xác thực và uỷ quyền sử dụng trong các ứng dụng web/app.

12/02/2021

8 mins read

Emmet, Abbreviations trong VSCode

Mức độ hiệu quả của công việc dựa vào chất lượng, năng xuất mà chúng ta bỏ ra. Trong kỹ thuật, năng xuất lập trình (phát triển phần mềm) có thể được tính dựa trên số lượng mã xây dựng và thời gian chúng ta dành cho nó, chất lượng của những dòng mã.

08/02/2021

6 mins read

Tự xây dựng modal đơn giản với javascript

Trong bài viết lần này, mình sẽ hướng dẫn sơ lượt các bạn về cách xây dựng component modal đơn giản giống với Bootstrap 4

07/02/2021

8 mins read

Sử dụng forEach trong javascript

Khi làm việc với mảng bạn thường làm gì, lặp qua một mảng? Trong JavaScript, chúng ta có thể sử dụng một số phương thức được cung cấp như map, reduce, etc để lặp mảng

04/02/2021

6 mins read

6 Design Patterns thông dụng trong JavaScript cần biết

Để tiến sâu hơn trong lập trình với ngôn ngữ JavaScript, các bạn nên tích luỹ thêm các kiến thức về các design patterns để giúp code tốt, có cấu trúc và có tổ chức rõ ràng hơn.

01/02/2021

9 mins read

Tìm hiểu phần tử Dialog trong HTML

Diablog (được biết đến là một phương thức hộp thoại được cung cấp sẵn trong phiên bản HTML5) là một hộp thoại cho trang web. Nó cũng được gọi là Modal dialog

31/01/2021

3 mins read

Chi tiết về upload file trong HTML / Javascript

Khả năng Upload file là một tính năng được yêu cầu cho một số trang web và ứng dụng phổ biến hiện nay. Từ việc Upload hình ảnh trên mảng xã hội cho avatar hay resume, lưu các file .pdf, .docx. Hầu như đã xuất hiện ở mọi nơi.

30/01/2021

8 mins read

3 Cách để thêm fonts cho ứng dụng React

Là một newbie, bạn có lẽ con chật vật với React làm sao để thêm thư viện, tích hợp scss, thêm font cho ứng dụng thì đây sẽ là bài viết giúp bạn giải quyết vấn đề đã nêu ở tiêu đề.

29/01/2021

4 mins read

10 Kỹ thuật có thể áp dụng vào dự án thực tế

Chúng ta luôn tìm kiếm những cách làm mới, ngắn hơn, tốt hơn và tối ưu hơn. Và JavaScript thì có muôn vàn cách để xử lý các vấn đề. Những kỹ thuật này bạn có thể áp dụng vào thực tế dự án của bạn.

28/01/2021

4 mins read

Một số mẹo và kỹ thuật trong JavaScript nên biết (Phần 1)

Trong quá trình phát triển dự án to hay nhỏ, có thể code không đủ để giải quyết hết các vấn đề, từ đó, sinh ra một số mẹo, kỹ thuật để giúp đỡ bạn trong quá trình code tốt hơn.

25/01/2021

3 mins read

Những hàm Javascript siêu đơn giản nhưng hữu ích

Xung quanh sự phát triển nổi trội với lối ngôn ngữ thiên về Functions thay vì Class , JavaScript sinh ra một số hàm đơn giản nhưng hữu ích có thể sẽ cần đến trong những dự án mà bạn phát triển.

24/01/2021

3 mins read

Các vấn đề về bảo mật cần nắm trong React

Ngoài việc phát triển ứng dụng, bạn cũng phải chú ý về vấn đề bảo mật cho ứng dụng của mình. Ứng dụng có thể hoạt động tốt nhưng lại đi kèm theo khả năng bảo mật kém sẽ phát sinh nhiều rũi ro không tính trước được.

23/01/2021

4 mins read

For..in và For..of trong javascript!

Khi làm việc với vòng lặp trong JavaScript, chúng ta thường làm việc với các đối tượng như một Array hay Object . Thông thường chúng ta chỉ sử dụng for loop cho việc xử lý mảng

22/01/2021

3 mins read