Tips, Trick And Best Practices JavaScript

     "Hãy kiên trì và không ngừng học hỏi vì cuộc sống là một cuộc đua đầy thử thách, bạn sẽ nhận lại được vô số những bài học đáng giá".
      Hello Developers! 
      Học hỏi, tích luỹ những điều mới hàng ngày giúp chúng ta hoàn thiện kĩ năng của mình tốt hơn, giỏi hơn. Với một nhà phát triển phần mềm, công việc của chúng ta là liên tục học hỏi những điều mới, cập nhật công nghệ, cải thiện kĩ năng lập trình của chính mình. 
     Trong bài viết này, mình cùng các bạn tìm hiểu một số tips, tricks, phương pháp hay trong javascript.
  
1. Multiple “if and else”,  Switch...case,  Object Literal.
- Với những đoạn code có nhiều if else, else if, ta sẽ cảm thấy rất là tù. Vì vậy chúng ta sẽ thường nghĩ đến chuyển sang sử dụng switch case, trông sẽ tường minh, đẹp đẽ hơn. Và với mình thì mình cũng hay sử dụng thằng switch case.



    Switch case tốt nhưng nó cũng có một số vấn đề như phải break để ngăn nó chạy tiếp. Và mình thấy nó vẫn khá dài dòng, với object thì lại linh hoạt, ngắn gọn dễ hiểu. Cả hai phương pháp đều có những ưu nhược điểm khác nhau. Mình thì thường sử dụng switch case hơn =)). Một số trường hợp thì dùng object.

2. Destructuring, Spread Syntax and Rest Parameters.
- Những tính năng này giúp chúng ta làm việc với cấu trúc dữ liệu nhanh hơn, ngắn ngọn hơn.
Destructuring
- Là một cú pháp cho phép bạn gán các thuộc tính của một Object hoặc một Array.


 - Trên là ví dụ về Object Destructuring, còn dưới dây là ví dụ về Array Destructuring.


Spread Syntax


Rest Parameters.


3. Optional Chaining and Nullish Coalescing 
* Optional Chaining
- Giúp kiểm tra một thuộc tính có tồn tại hay không? Nếu không tồn tại sẽ return ra undefined.  


Optional Chaining giúp đoạn code ngắn ngọn hơn, dễ dàng truy cập sâu vào các thuộc tính của object.
With array.


Nullish Coalescing 
- Mình hay dùng toán tử || để cung cấp giá trị mặc định cho một biến. Và giờ mình vẫn hay dùng, khà khà, tuy nhiên mình có đọc được bài viết cẩn thẩn khi dùng toán tử or để cung cấp giá trị mặc định. Đọc thấy cũng đúng, rồi mình mò lên MDN đọc và biết tới thằng Nullish Coalescing.

 - Cú pháp: leftExpr ?? rightExpr
   Nếu leftExpr là nullish ( NULL or UNDEFINED ) thì kết quả sẽ là rightExpr. Còn leftExpr có giá trị thì kết quả là leftExpr.


4. Multiple Condition
    Có thể bạn đã gặp trường hợp có nhiều điều kiện cùng thực hiện một nhiệm vụ nào đó. Ví dụ như với quyền admin, leader hay member đều có chung một quyền nào đó ( ví dụ như quyền sửa, xoá bài viết, ....).


Chúng ta có nhiều cách giúp đoạn code ngắn ngọn, và trông xịn xò hơn.


Mình thì hay dùng thằng includes hơn :))

Bài viết sẽ vẫn còn cập nhật thêm những thứ hay ho về javascript. Cảm ơn các bạn ủng hộ và đọc tới tận bây giờ. Thank you.!
How to fix  mp4 video not working on Safari.

 


Chào mọi người! Lâu lâu lại lên blog viết bài cho mọi người đỡ quên mình, haha. Sản phẩm production gặp lỗi thì sao nhỉ? Bay cả tỷ đồng chứ sao 😂.

Khi sản phẩm lỗi, khách đâu cần quan tâm là lỗi gì, lỗi như thế nào, lỗi ra sao, ping ngay đội dev, abc...xyz, ae đội dev bắt đầu nháo nhào tìm nguyên nhân, fix bug gấp. Thể nào một số ae cũng gặp phải rồi nhỉ! Mình thì cũng gặp rồi thây, hehe.

Chẳng là một ngày đẹp trời, khách hàng ping! wtf tại sao trên safari, trên iphone, ipad, video không chạy. Quả này lỗi rồi ( bài viết ra đời từ đây).

Ok bắt đầu xử lý, lỗi ko chạy video, lạ vc nhỉ, Chrome, Firefox video vẫn chạy phà phà mà nhỉ! Mẹ thằng safari nữa chứ, haha. Trong đầu bắt đầu nghĩ, tầm này vẫn dùng safari nhỉ ! à thì khách tất nhiên nó phải giàu, mà giàu thì dùng macbook mà macbook thì lại có thằng safari, khá acay. Mà thôi acay safari thì sản phẩm cũng có chạy đâu, haha. Lúc đầu mình thấy cũng khá bình thường với nghĩ chắc thẻ video trên safari nó không tương thích thôi.

- Đầu tiên mình bật chế độ cho thằng safari có thể phát được video, sau đó thêm playInline vào thẻ video, đúng theo lý thuyết thì nó phải chạy mà ta, nhưng không nó éo chạy. Thôi thì ko dùng thẻ video nữa, dùng thư viện video của thằng reactjs xem sao, cũng không chạy, cay. Bắt đầu suy nghĩ, tại sao các trình duyệt khác chạy mà safari lại không, tại sao nhỉ, hay thằng video mp4 không hỗ trợ trên safari, không hỗ trợ thì dở thật, nên mình quyết định dùng một video mp4 test xem safari chạy không, vc thật nó chạy được, chứng tỏ safari, mp4 có chạy được.

- Điều này chứng tỏ vấn đề sẽ có cách giải quyết không lại vỡ mồm.

- Bắt đầu căng đây, tìm nguyên nhân gốc dễ vậy. Đầu tiên các attribute của thẻ video mình hoạt động ok rồi, nên bỏ qua, vấn đề được đặt vào trình duyệt.

- Sau một hồi search thì mình cũng biết vấn đề do đâu, thì ra thằng safari không như thằng chrome, firefox, safari nó yêu cầu server hỗ trợ header: "ranger" để phát nội dung video, server cần trả về 206.

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6

Vậy vấn đề nằm ở đây, mình cần phải config server, trả về đúng như thằng safari mong muốn.

Nếu server tự phát triển lên thì vào config lại là xong, nhưng dự án mình làm thì dùng một thằng thứ ba là strapi ( lại buốt óc rồi, hazzz ).

Hình như thằng strapi trả về 200 thì phải, thôi thì cứ test theo apple xem video nó trả về tất cả hay từng phần.

curl --range 0-99 http://example.com/test.mov -o /dev/null

Ok. Mình test thì nó trả về một cục. Quả này đành custom lại thư viện thôi, vào đọc issues của strapi mình thấy vấn đề của mình, làm theo thôi.

À tóm lại cái đã: 

- Vấn đề: Do thằng safari yêu cầu hỗ trợ header: 'ranger' nên không thể phát, tua lại, tìm kiếm, chuyển tiếp trên các video được phát trực tuyến được lưu trữ bởi strapi.

- Giải quyết: Bạn có thể add thêm header khi config nginx hoặc config lại server khi trả về video thì thêm header: ranger (Accept-Ranges, Content-Range). 

Do mình dùng thằng strapi nên mình sẽ fix như sau: 

vào node_modules/strapi/  thêm node_modole koa-range, koa-route sau đó sửa lại một chút ở file 

/node_modules/lib/Strapi.js như sau:



Rồi khởi động lại là ok.

Bài viết này mình định viết lâu rồi, nhưng nay mới viết được. 😂

Cảm ơn các bạn đã luôn theo dõi blog nhé. 

Javascript everything you need to know.

 

1. Import và Export trong JavaScript ES6

Import: cho phép import các functionality từ các module khác.

Export: khai báo những variables hoặc function cho phép những module khác truy cập và sử dụng.

How to simply create an NPM package?

 


Chào các bạn!

Có lẽ các bạn vào đây đọc, đa số là các anh em lập trình viên nhỉ? Vậy thì cũng không quá lạ gì với thằng npm nữa. 

NPM  (node package manager) là một công cụ tạo và quản lý các thư viện javascript cho Nodejs. 

npm install, npm install react-three-dots, ....

Những câu lệnh huyền thoại giúp cài các thư viện trên npm về cho project của mình. Rất rất nhiều thư viện trên đó, mà mình vẫn hay thường kéo nó về để sử dụng, hehe...

Trong đầu bỗng nghĩ: "tại sao mình không tự tay làm một package rồi đẩy lên npm cho cả thế giới dùng nhỉ". Haha, nghĩ thôi đã thấy sướng rồi 😂 (đoạn này ngồi cười cái đã...).

Nghĩ là làm và từ đó bài viết này được ra đời!

Xắn tay viết một package thôi! Khoan đã vậy thì viết cái gì, viết một hàm tính tổng hai số, không ổn, không đặc sắc tẹo nào? Hay ramdom ngẫu nhiên một phần tử trong mảng, hình như cũng có nhiều rồi.

À!  Viết code cắt ngắn đoạn văn bản rồi thêm ....

Vậy chủ đề có rồi, giờ nghiên cứu đối thủ thôi.

Sau một hồi search hì hục, search mỏi cả tay 😂, cũng thấy vài cái viết giống chủ đề của mình.

Đó là thằng react-dotdotdot và react-truncate.

  

Ây da, cả hai cái đều được tải nhiều quá nhỉ! Miếng bánh thị phần này nghe vẻ khả thi, haha, một cái nặng 18.5kB, và một cái nặng 39.5kB. Đúng như size thằng react-truncate nhiều chức năng hơn thật, tuyệt vời ông mặt trời!

Cơ mà đọc xong hai cái này, mình thấy nó vẫn còn nhiều vấn đề, với lại cắt ngắn văn bản hiện thị liệu cần phải cài cắm thư viện không? 

Tất nhiên là không cần, dùng js cắt bớt văn bản hoặc bạn vẫn có thể làm được chỉ bằng html, css. Mình cũng có một bài viết, chỉ dùng html, css rồi, ai chưa đọc có thể xem qua nhé.


Đau đầu rồi đây, chức năng như trên thì hai thằng thư viện này làm quá tốt rồi, lấy gì cạnh tranh nổi, giờ chỉ còn cách làm đúng một chức năng để package càng nhẹ càng tốt. Chiến thôi!

Tạo thư mục ( đặt tên mà trên npm chưa có nhé ). Và mình quyết định đặt tên cho package này là react-three-dots.

Giờ khởi tạo project:  npm init 

Câu lệnh này sẽ giúp bạn tạo ra một package.json. Khi chạy nó sẽ hỏi một số câu về project.

- Package name: đây là tên dự án. 
- Version: phiên bản dự án, mặc định sẽ là 1.0.0 
- Description: mô tả về dự án 
- Entry point: đường dẫn trỏ tới file mã nguồn, nơi chạy đầu tiên của package.
- Test command: đến câu này enter cho nhanh, haha ( hình như là lệnh khi bạn gọi npm test )
- Git repository: git repository ứng với dự án ( để trống, ấn luôn enter).
- Keywords: các từ khóa tương ứng với dự án của bạn. 
- Author: xưa mình toàn để trống, nhưng thấy đại ca mình hay viết, nên mình cũng viết tên vào cho oách
- License: giấy phép. Mặc định là ISC.

Nếu bạn muốn tạo nhanh, không thèm trả lời mấy câu trên thì cứ phang npm init -y cho gọn.

Ok! sau khi chạy xong mình được file package.json như thế này


Vậy giờ là code thôi, mình sẽ dùng js để cắt ngắn văn bản và thêm dấu ...



Cái hàm trên bạn truyền text và số kí tự muốn hiển thị
Mấy cái regex trong hàm giúp mình check một số trường hợp. 
Cái regex đầu tiền check phần tử đầu tiên không phải là non-whitespace hay không?
Cái regex thứ hai là check chuỗi:  khớp với bất kỳ chuỗi nào chứa ít nhất một whitespace sau đó khớp với bất kỳ chuỗi nào không hoặc nhiều lần xuất hiện của non-whitespace và so khớp bất kỳ chuỗi nào có \S ở cuối chuỗi đó (\S*$). Các bạn search regex test online là sẽ hiểu hơn.
Mình sẽ lấy ví dụ ở đây.


Sau đó viết thêm Readme.md, mô tả cái package cho người dùng. Trên đấy thì mình có thêm một cái ảnh, vậy làm sao thêm ảnh vào được Readme.md.

Đầu tiền mình sẽ lên github của mình, tạo một cái new issues, rồi trong đó có mục thêm ảnh, mình sẽ kéo ảnh vào đó.


copy cái link ảnh và ném vào trong Readme.md thôi, quá ez game.


(Link ảnh mình đã ném vào trước đó rồi nhé !)

Đẩy code lên github và publish lên npm thôi.

Đầu tiền bạn phải có tài khoản npm nhé.
Chạy lệnh npm login, nó sẽ hỏi username, password và email
Xong rồi thì npm publish

Khi bạn muốn update thì chạy lệnh:  npm version patch rồi npm publish

Vậy là đã có một package trên npm rồi, quá xịn.


Tèn ten, đây là thành quả: https://www.npmjs.com/package/react-three-dots

Cảm ơn các bạn đã đọc bài viết của mình, mọi người bình luận góp ý để blog càng ngày càng phát triển hơn nhé. Thanks.








Deno.js | Cài đặt và viết chương trình đầu tiên với deno




Hi. Mình là HQK. Trời nóng quá, nên mình lên đây viết blog chém gió với ae cho mát. Trước khi vào vấn đề chính như tiêu đề, mình xin phép giới thiệu qua về thằng deno.

Deno là một chương trình để chạy mã JavaScript và TypeScript bên ngoài trình duyệt.

- Deno được tạo bới Ryan Dahl. Cũng chính là người phát triển Nodejs.
- Deno được bảo mật theo mặc định. Nếu không được phép, nó không thể truy cập các tập tin, mạng hoặc môi trường.
- Deno có TypeScript tích hợp mà không cần cấu hình bên ngoài.
- Các gói bên ngoài được kéo vào thông qua các url.
Và một điều thú vị nữa là Deno là đảo chữ của Node.

Nghe đã thấy thằng này phê rồi anh em nhỉ. Bắt tay vào trinh phục nó thôi.
À quên, link github của Deno đây nhé: https://github.com/denoland/deno
Thời điểm mình đang viết bài nó hơn 49k star nhé, hơi bị oách luôn.
Để cài đặt deno các bạn thực hiện theo hình bên dưới: 



Mình dùng window, nếu hiện thị như sau là thành công rồi nhé: 



Cài đặt khá là ok. Cùng bắt tay, bắt chân viết chương trình hello world xem hịn không nào? Mình được một anh kể bảo mỗi khi code một ngôn ngữ mới, người ta đều code hello world đầu tiên, để may mắn, không bao giờ phải fix bug. Haha, không biết có đúng không, mà ngôn ngữ nào mình cũng code hello world đầu tiên mà vẫn fix bug ầm ầm :)).


Ghê chưa nào? Quá xuất sắc.
Thử build server xem sao.


Các bạn code như mình rồi chạy. Deno run server.js. Ra ngay một cái error đỏ lòm. Haha không sao, deno bảo mật quá đi mà, bạn phải cho phép nó truy cập mạng.
Bắt đầu run lại: Deno run --allow-net server.js. Wow, hịn đó.


Các bạn có thể tham khảo 1 list các quyền mà chương trình cần:


Giờ mình thử dùng module bên thứ 3 xem sao. 




Để chạy các bạn chạy: deno run --allow-net server.jsx. Rồi sẽ được kết quả như này nhé.


Ma thuật chưa, chơi được cả file jsx, quá ngầu.

Mình chỉ test sơ sơ qua và giới thiệu với các bạn về thằng deno.js. Cảm ơn các bạn đã đọc bài viết của mình. Thân ái chào quyết thắng.









Javascript | Các thể loại vòng lặp trong javascript (phần 2)

                             

Hello! Mình là HQK. Kì nghỉ 30/4, 1/5 các bạn làm gì, mình thì vẫn ngồi viết blog thôi, haha. Khi các bạn lập trình, thể nào cũng nghĩ đến hiệu năng của nó, vòng lặp cũng vậy, nó khiến chương trình chạy chậm đi ( mặc dù đôi khi chúng ta không cảm nhận được ). Các bạn có thể thấy đơn giản khi làm một bài spoj, nó có yêu cầu thời gian, nên mình phải tối ưu. Những vòng lặp mà 3 vòng for thì khiếp sợ rõ, sub lên thể nào cũng quá thời gian, đôi khi làm dự án các bạn sẽ thấy kinh dị hơn 3 vòng for, haha thật đấy. Lan man quá, vào luôn vấn đề chính nhé.
Javascript | Những thư viện chắc chắn sẽ giúp ích cho bạn !

Xin chào các bạn, mình là HQK. Chắc trong các bạn ai cũng đã từng xem những bộ phim kiếm hiệp Trung Quốc nhỉ? Nhân vật mà mình thích nhất là Trương Vô Kỵ, ô này học được toàn bí kíp võ công xịn như cửu dương chân kinh, tâm pháp thượng thừa của càn khôn đại na di chấn áp Minh Giáo,...haha. Nay mình sẽ giới thiệu với các bạn các thư viện js chắc chắn sẽ giúp ích cho các bạn, tuy không chấn áp được Minh Giáo nhưng chắc sẽ chấn áp được deadline thôi.

React.js | Làm sao code của bạn trở nên tốt hơn!
Hey! Mình là HQK. Đợt này mình đang được nghỉ dịch COVID-19. Nên mình có thời gian lên đây viết blog....chia sẻ cùng mọi người, cùng nhau học tập và phát triển, hey zô. Vào luôn chủ để chính đây.

1. Naming
-
Sử dụng .jsx cho React components
- Tên file đặt theo PascalCase. Ví dụ: SearchCar.jsx

Node.js | Làm sao code của bạn trở nên tốt hơn! (phần 2)
Hello! Tiếp tục lại là mình đây. Lần này mình tiếp tục chia sẻ với các bạn làm sao để code của mình sạch, đẹp, tốt hơn nhé:

1. Các chuỗi
- Sử dụng dấu lược cho các chuỗi


- Khi xây dựng các chuỗi theo một chu trình, sử dụng mẫu chuỗi thay vì ghép chuỗi
Tại sao? Các mẫu chuỗi cho bạn một cú pháp súc tích, dễ đọc với các ngắt dòng và các tính năng ghép chuỗi phù hợp.


- Không bao giờ sử dụng eval() cho một chuỗi, điều đó mở ra rất nhiều các lỗ hổng và rủi ro.
- Không sử dụng các ký tự thoát trong một chuỗi khi không cần thiết


2. Các đối tượng
- Sử dụng cú pháp nguyên văn {} để khởi tạo đối tượng
- Sử dụng cú pháp định nghĩa thuộc tính rút gọn để định nghĩa các thuộc tính của đối tượng
  Tại sao? Nó ngắn gọn và súc tích.

- Gom tất cả các thuộc tính rút gọn ở trên cùng khi khai báo đối tượng.
Tại sao? Điều này giúp bạn dễ dàng biết được thuộc tính nào sử dụng cú pháp rút gọn.


- Chỉ sử dụng dấu lược ' ' cho các thuộc tính có định danh không hợp lệ.

- Ưu tiên sử dụng toán tử liệt kê ... so với Object.assign để tạo bản sao nhanh của một đối tượng. Sử dụng toán tử còn-lại ... để tạo một đối tượng mới với một số thuộc tính đã bị loại bỏ


3. Các mảng
- Sử dụng cú pháp nguyên văn [ ] để khởi tạo mảng

- Sử dụng Array.push, thay vì phép gán, để thêm các mục cho một mảng.



- Sử dụng toán tử liệt kê ... để sao nhanh một mảng.


- Để chuyển đổi một đối tượng khả duyệt thành một mảng, sử dụng toán tử liệt kê ... thay vì Array.from.


- Sử dụng Array.from để chuyển đổi một đối tượng giống-mảng thành một mảng.


- Sử dụng Array.from để chuyển đổi một đối tượng giống-mảng thành một mảng.


Bài viết mình có tham khảo trên link github này. Mình nghĩ nó sẽ hữu ích cho bạn

https://github.com/dangkyokhoang/javascript-style-guide

Còn đây là trang web mình:

https://khanhkitin.herokuapp.com













Node.js | Làm sao code của bạn trở nên tốt hơn (phần 1)

Hello! Mình là HQK. Có bao giờ bạn nghĩ style code của mình đã tốt hay chưa tốt chưa. Hồi mới chập chững code những dòng C/C++, mình nghĩ chỉ cần code chạy đúng, tối ưu là được, mà ko nghĩ rằng cách code của mình gây khó chịu cho người xem, haha, và mình được các anh chị đi trước chỉ code sao cho clear. Sang code JS, mình cũng có cơ hội để học hỏi phong cách code của những người đi trước, và cũng đọc những thứ giúp code của mình tốt hơn, giờ mình sẽ chia sẻ với các bạn:

1. Đóng mở ngoặc của một hàm.


2. Cách đặt tên cho variables, constants, functions and classes
- Bạn nên sử dụng cách đặt tên theo lowerCamelCase cho constants, variables và functions. Và đặt tên cho class theo UpperCamelCase
- Ví dụ:


3. Cách require modules
- Khi các bạn code thì nên require một thư mục. Trong thư mục đó có file index.js, nơi mà tất các file trong folder sẽ được gọi qua nó. Mình sẽ có một bài viết cụ thể, rõ ràng hơn về cấu trúc một project nodejs.
- Ví dụ:


4. Các tham chiếu
-
Sử dụng const đối với tất cả các tham chiếu, tránh sử dụng var.
   

  Tại sao? Điều này đảm bảo rằng bạn không thể gán lại các tham chiếu, việc có thể gây ra các lỗi và gây khó khăn cho sự đọc hiểu mã nguồn.

- Nếu bạn bắt buộc phải gán lại các tham chiếu, sử dụng let, thay vì var.

                           

Tại sao? let thuộc phạm vi khối mà nó được khởi tạo, thay vì thuộc phạm vi hàm như var.

- Lưu ý rằng cả let và const đều thuộc phạm vi khối.

5. Trích Xuất
- Sử dụng trích xuất đối tượng khi truy cập và sử dụng nhiều thuộc tính của một đối tượng.


- Sử dụng trích xuất mảng



Bài viết của mình có tham khảo các link github sau, các bạn có thể học hỏi từ những link này, nó thật sự hữu ích cho bạn.