• CHIA SẺ LỘ TRÌNH HỌC EXPRESSJS BACKEND

    CHIA SẺ LỘ TRÌNH HỌC EXPRESSJS BACKEND

    TÌM HIỂU USECASE TRONG DỰ ÁN

    Chào mọi người, lại là mình đây. Ở bài viết trước mình đã chia sẻ lộ trình học DEV fullstack trong 6 tháng nhận được nhiều quan tâm của nhiều bạn nên nay mình sẽ viết chi tiết hơn thực hiện lộ trình đó.

    Link bài viết trước: https://nodejs.vn/topic/2424/lam-the-nao-co-the-di-lam-tai-cong-ty-cong-nghe-ngay-tu-nam-nhat-dh

    Đầu tiên vẫn phải là mindset: Nếu các bạn vẫn nghĩ mình chỉ có thể đi làm được khi học năm 4 thì đây chính là rào cản lớn nhất.

    Trong thực tế một lập trình viên phải làm 8h trên công ty chưa kể thời gian OT-ON. Với lượng thời gian làm việc 8-10h trong môi trường làm việc áp lực, chắc chắn sẽ được lên trình nhanh hơn khi mới là sinh viên, đó là lý do các bạn sinh viên thấy đi làm sẽ học được nhiều hơn.
    Các lập trình viên cũng như chúng ta, phải tự tìm hiểu kiến thức trên internet áp dụng vào công việc. Không phải task nào cũng dễ nhằn, k phải task nào cũng đã được học. Nghề lập trình phải đi đôi với việc mày mò, k có gì là ăn sẵn cả. Một thực tập sinh vào công ty thường sẽ qua vài tháng training nghiên cứu rồi mới được join dự án.
    Chính vì lý do đó nếu các bạn sinh viên tự tạo cho mình môi học nghiêm túc như khi đi làm, cùng với lượng thời tương đương (6-8h) thì mình chắc chắn với 6 tháng đủ để các bạn đi làm ngay, miễn sao các bạn luôn phải trong tâm trí học hỏi và nghiêm túc.

    Với các bạn sinh viên vốn thời gian ít hơn thì có thể kéo dài đến 1 năm, quan trọng khi học chúng ta phải nắm chắc kiến thức, tư duy code, không vội vàng nhảy cóc học hết khoá này là đi làm được ngay

    Hôm nay mình chia sẻ thêm nguồn học ExpressJS (backend) với một số bài toán thực tế. Về nội dung khoá học như sau:

    • Tổng quan ExpressJS
    • Router
    • Middleware
    • Method: GET, POST, PUT, DELETE
    • Authentication and Authorization
    • Restful API
    • Express Static
    • Bài toán phân trang
    • CORS
    • JWT Token
    • OAUTH2 vs passport login FB, GG
    • Cách sử dụng FB API
    • Giới thiệu Strapi làm blog trong 1 nốt nhạc

    Link Youtube: https://www.youtube.com/playlist?list=PLodO7Gi1F7R1GMefX_44suLAaXnaNYMyC

    Lưu ý: Trên đây là một số usecase căn bản mình tổng hợp, khi đi làm sẽ có nhiều bài toán biến dạng theo business dự án, với các bạn mới nên học theo concept, luồng hoạt động và kiến thức cốt lõi để mai sau có thể tuỳ biến theo ý mình. Một khi đã học xong concept việc các bạn học các framework khác sẽ rất nhanh

    Cách học: Học theo concept, luồng hoạt động, hiểu về chức năng dự án cần những gì.
    Tốc độ học 1 ngôn ngữ hay framework phụ thuộc vào kĩ năng đọc docs cũng như kiến thức tích luỹ của mỗi bạn.
    VD: Mình đã biết về concept ReactJS thì khi đọc docs của VueJS với các khái niệm căn bản na ná nhau, học cực nhanh, nên chỉ cần nửa ngày là đọc xong docs đủ để áp dụng với các task căn bản. Tuy nhiên có những task cần kiến thức chuyên sâu, cốt lõi hơn thì chúng ta vẫn cần dành thêm thời gian để tìm hiểu chúng.

    => học căn bản chỉ đủ dùng ngắn hạn, về lâu dài vẫn phải tìm hiểu thêm về các khái niệm chuyên sâu, mô hình kiến trúc, framework design ..., ecosystem xung quanh

    Vậy sẽ học bằng cách nào, học xong khoá trên các bạn có thể lên diễn đàn để tìm hiểu thêm về các chủ đề mình nói trên các trang medium.com, viblo.asia, kipalog.com, nodejs.vn ...

    Chốt: Để làm chủ được framework chúng ta phải tìm hiểu mọi ngóc ngách các vấn đề và các kiến thức xoay quanh nó. Khác với việc học thêm các khoá học có mentor hướng dẫn trực tiếp để nắn tư duy và tạo môi trường học sát thực tế cho bạn, tự học luôn luôn cần đúng cách, tự tạo môi trường nghiêm túc tập trung, học với video sẵn các bạn nên chắt học kiến thức biến nó thành của mình chứ k nên sao chép 100% để đạt được hiệu quả tốt nhất.

    Chúc các bạn học tập tốt!

    P/S: Mình muốn là đóng góp một phần để giúp cộng đồng phát triển mạnh mẽ hơn, giúp ích được newbie trong ngành. Ở các bài tiếp theo mình sẽ chia sẻ cho mọi người chi tiết kiến thức từng video trong series Express và up thêm một số series về GIT, VueJS, Docker, Nginx, CICD(DevOps). Mọi người đón đọc nhé.

    posted in Tutorials
  • Làm thế nào có thể đi làm tại công ty công nghệ ngay từ năm nhất ĐH?

    Kinh nghiệm đi làm tại công ty công nghệ ngay từ năm nhất ĐH.

    Ra trường lương >12tr/tháng hẳn nhiều bạn vẫn chưa tin vào điều này. Với các bạn đã đi làm thì sẽ biết nếu đi làm sớm (từ năm nhất) thì sau khi ra trường cũng đã có 3 năm kinh nghiệm trong tay, 3 năm kinh nghiệm thì mức lương trên hoàn toàn là phù hợp.

    Vậy làm sao để có thể đi làm sớm ngay từ năm nhất ĐH? Mình đã dạy nhiều bạn năm nhất và các bạn chuyển ngành có thể đi làm sớm sau 6 tháng. Có một số kinh nghiệm như sau, hi vọng sẽ giúp ích cho các bạn tự học:

    1. Xác định tư tưởng:
    Đi làm được sau 6 tháng bắt đầu từ số 0, đòi hỏi sự nghiêm túc, cố gắng.

    mindset.jpeg

    • Thế nên nếu mỗi ngày các bạn k thể dành ra ít nhất 6h-8h để học lập trình thì bạn k cần đọc tiếp phần sau.

    • Không được phá vỡ nguyên tắc, phải kiên trì với lộ trình. Đã đi là phải tới đích. Đến đây các bạn cần hiểu, điều khiến cho việc tự học mất thời gian, không hiệu quả chính là do các bạn tự học 1 mình dễ nản, thích thì học k thích thì nghỉ chính vì vậy nếu có người kèm, hoặc bạn đồng hành ép bạn vào khuôn khổ thì 6 tháng mới thành công được.

    2. Hiểu về lộ trình
    Đầu tiên các bạn cần phải xác định được mục tiêu, job mình sẽ apply sau 6 tháng, ở bài này mình sẽ cho các bạn lộ trình đến intern-fresher (fullstack DEV NodeJS, ReactJS)

    roadmap.png

    • Các kiến thức nền tảng: HTML, CSS, JS (căn bản, nâng cao), Bootstrap, Jquery, tạo web Responsive

    • CleanCode: Tư duy đặt tên biến, viết tái sử dụng, ngắn gọn dễ hiểu, coding convention.

    • Quản lý source code: GIT

    • Backend: NodeJS (cơ chế hoạt động, một số gói package thông dụng trên npm), ExpressJS (router, middleware), Restful API, Database(MySQL, MongoDB, tư duy thiết kế DB)

    • Frontend: ReactJS (State, Props, lifecycle, router, component, redux, Reac Hook là optional)
      Một số khái niệm: OOP, MCV, client-server

    • Project: Bao gồm cả backend lẫn frontend đẩy lên GIT.

    Đọc đến đây các bạn mới sẽ thấy hãi có quá nhiều thứ phải học, nhưng các bạn yên tâm, nếu các bạn dành được 6-8h học thì chắc chắn sẽ học đủ, chưa kể một số bạn sẽ có hẳn 10h/ngày để học. Các bạn thấy lộ trình này khó cũng đúng vì nó dành cho các bạn tryhard, học viên mình dạy đều phải học nghiêm túc thế này thậm chí còn lớn hơn. Chỉ sau 1 tháng bạn sẽ thấy việc học, kiến thức lên rõ rệt. Khi đã có nền tảng và sức học các phần sau các bạn biết cách học sẽ tiếp cận dễ dàng hơn.

    3. Mindset
    Học thế nào là ĐỦ. Thực tế với khối lượng kiến thức kia các bạn chỉ mới biết nông mà thôi, chưa thể thiểu sâu được => Hãy luôn trong tâm thế học hỏi.

    Một số bạn cứ nghĩ việc xem hết video làm được như mẫu là xong và nhảy qua phần tiếp theo. Thực tế việc các bạn làm được giống như trong video k mang nhiều ý nghĩa vì đơn giản các bạn k phải va vấp các trường hợp khó hơn, tự tìm giải pháp, xử lý vấn đề đó. Trong thực tế khi đi làm, Khả năng xử lý vấn đề (hay còn gọi là kinh nghiệm) lại được các cty đề cao. Đó là lý do nhiều bạn dù ns rằng mình đã học hết nhưng đến khi đi phỏng vấn, nhà tuyển dụng vặn vẹo chút là tịt. Mindset khi học là một yếu tố quan trọng quyết định thành công của lộ trình đào tạo này.
    Thường khi đi học có các thầy hướng dẫn, các thầy sẽ nắn cho các bạn đi đúng hướng, vì các thầy biết thế nào là TẠM ĐỦ để đi làm. Còn với các bạn tự học thì phải làm sao?

    Một số cách hiệu quả :

    • Xem video rồi tự tóm tắt theo ý hiểu của mình vào file tóm tắt

    • Dựa và kiến thức tóm tắt hãy thực hành lại theo một số bài tập trên mạng, tự nghĩ ... và kiểm chứng nó có đúng hay không

    • Dùng kiến thức của mình đi trao đổi vs người học cùng, Thầy hướng dẫn để xác nhận mình hiểu đúng.

    • Đặt những câu hỏi xung quanh chủ đề mà mình còn cảm thấy khúc mắc, mà tìm ra lời giải

    • Nghĩ những vấn đề liên quan, bài toán lớn hơn và dùng chính kiến thức mình học được để giải quyết.

    => Chốt lại: Đừng quá vội vàng, hãy hiểu kĩ vấn đề trước khi sang mảng kiến thức khác, tự tin dùng kiến thức đi hỗ trợ cộng đồng, đi trao đổi vs bạn bè, cộng đồng, tranh luận, phản biện (đó là cách tốt nhất nâng mức độ hiểu sâu)

    4. Kiểm nghiệm
    Đặt mục tiêu ngắn hạn, dài hạn.

    do-luong.png

    Hãy đặt mục tiêu theo tháng, mỗi một tháng hãy nhờ các thầy , bạn bè kiểm nghiệm kiến thức của mình.
    Mỗi module học được hãy làm một sản phẩm sử dụng kiến thức đã học.
    Cuối cùng, hãy thử phỏng vấn đề biết mình thiếu những gì.

    P/S: Mỗi tuần mình sẽ có một buổi talk về các vấn đề khi đi làm xoay quanh: Tech, Mindset , kinh nghiệm xử lý vấn đề. Đồng thời với các bạn muốn kiểm nghiệm kiến thức mình có thể giúp.
    9h T7 hàng tuần mình sẽ đặt link GG meet giao lưu trên nhóm zalo.
    Link Zalo: https://zalo.me/g/yhdkef092

    Bài trước : Cách để học lập trình hiệu quả?

    posted in Tutorials
  • Bạn có thật sự nghĩ rằng Angular có learning curve kinh khủng hơn so với React hay Vue?

    Bạn có thật sự nghĩ rằng Angular có learning curve kinh khủng hơn so với React hay Vue?

    Angular learning curve.png

    Bây giờ hãy điểm qua các công cụ để xây dựng các ứng dụng thực tế:

    • Component: đây là thành phần chắc chắn là core principle của các framework. Chúng đều xoay quanh các ý tưởng về việc tái sử dụng, maintainable, và scaleable code. Trong Angular thì Component cũng không quá khác biệt về mặt ý nghĩa. Nó chỉ là một implementation của một idea/abstract kia. Trong tương lai, component của Angular sẽ dễ hiểu hơn vì nó không phụ thuộc vào NgModule nữa (tránh được rất nhiều sự bối rối khi người mới tiếp cận).

    • Directive: Đây có lẽ là thành phần quen thuộc hơn cho mấy bạn dùng Vue. Nó cũng chỉ là 1 cách để khiến cho Component có thể dễ dàng compose, dễ dàng mở rộng.

    • DSL: Angular cung cấp một số Domain-specific language feature, chính là việc các bạn sử dụng template của nó. Có một số cú pháp như NgIf, NgFor, hay các Directive. Nhìn chung core của Angular các bạn có thể học trong 1 ngày là hết mấy cái đó. React chắc là ít hơn chứ Vue thì cũng same same với Angular về vụ này.

    • Forms: Angular cung cấp sẵn, các bạn có thể sử dụng thêm lib của bên thứ 3 nếu muốn. Form của Angular cung cấp cũng khá mạnh mẽ và nhiều tính năng. Với React bạn sẽ cần dùng của bên thứ 3 như React-Hook-Form hay Formik. Vue cũng cung cấp Form, nhưng về tính năng thì không bằng. Ví dụ: form validation (sync & async).

    • HttpClient: Angular cung cấp sẵn một phiên bản khá hoàn thiện. React và Vue thường cần đến axios hoặc tương tự.
      State Management: Angular có built-in hoặc bạn có thể kết hợp sự bổ trợ của Services. Ngoài ra, còn có khá nhiều giải pháp khác: NgRx, Component Store, Akita,... React và Vue cũng có built-in nhưng việc lựa chọn dùng built-in hay giải pháp khác khá quan trọng ở thời điểm bắt đầu dự án, nếu không đến lúc phình lên thì câu chuyện lại hoàn toàn khác. Lúc này, nếu dùng Redux/Vuex (hoặc tương tự) thì bài toán này đều phải học thêm các concepts của bọn nó.

    • DI, Reactive Programming: đây chắc có lẽ là 2 phần khó nhất của Angular. Nếu một người không có kinh nghiệm về 2 thứ trên thì đây rõ ràng là điểm yếu chí mạng. Nhưng cái gì cũng có 2 mặt. Có sự phức tạp thì cũng có use case cho bọn nó dùng đến.

    • Dev Tools: Đây là vấn đề tranh cãi, có người thích Angular có sẵn Angular CLI, nhưng có những người nghĩ rằng những gì mà nó cung cấp là thừa thãi, thích free style theo kiểu tự config WebPack bên React hơn. Nhưng có người ngược lại. Dù là kiểu gì thì cũng phải học thêm mấy bọn này để dùng cho công việc được hiệu quả hơn.

    • Documentation: Đây cũng là vấn đề với Angular. Do có lượng document đồ sộ nên người mới dễ bị ngợp. Nhưng thời gian gần đây, team Angular cũng đã cải thiện đi khá nhiều. Đặc biệt còn làm video chính chủ để chia sẻ về những thứ của framework.

    • Router: Cái này khỏi bàn, SPA mà không có router thì coi như dùng bản trial của phần mềm vậy. Framework nào rồi cũng phải học. Angular nó cung cấp đầy đủ từ config router tới những cái như Guard, Events. React phải dùng thư viện bên thứ 3, nó cũng cần các bạn phải có am hiểu một số thứ.(ví dụ implement route guard theo dạng configuration).
      Hiện tại, mình đang chỉ nghĩ được như thế. Với bản thân mình, phát triển một ứng dụng mà nghĩ làm nhanh thì thực sự Frontend Framework bây giờ không nhanh như thời chỉ dùng jQuery trước đây. Còn để phát triển ứng dụng lâu dài thì khả năng luôn phải tính trước một plan để rewrite trong tương lai =))).

    Update: nếu bạn nào nói React không phải Framework thì hãy thử suy nghĩ xem bạn có thật sự chỉ dùng mỗi React hay sẽ liên quan đến cả ecosystem.

    Update 2: bài viết bỏ qua phần testing, vì thật sự không có quá nhiều bạn ở VN có cơ hội tiếp cận dự án có unit test chẳng hạn. Giờ đây các bạn sẽ dùng các tools quen thuộc như Jest, Cypress nên sẽ đều phải học bọn chúng nếu dùng trong dự án.

    Nguồn: http://tiepphan.com

    posted in AngularJS
  • 33 khái niệm cần nắm trong JavaScript – Lộ trình học JavaScript

    Qua bài viết Tổng quan về JavaScript và học JS để làm gì? Chúng ta phần nào cũng hiểu được tầm ảnh hưởng của JS và bắt đầu con đường tìm hiểu thứ ngôn ngữ lập trình thú vị này.

    Để học ngôn ngữ JavaScript một cách hiệu quả, chúng ta nên tìm hiểu sơ bộ qua tất cả, vạch ra một lộ trình cụ thể và sau đó sẽ học chuyên sâu vào từng vấn đề. Cho nên trong bài viết này, mình sẽ đi sơ lược qua tất cả các khái niệm cần nắm trong JavaScript chúng ta có thể tạo ra lộ trình học Javascript cho riêng mình.

    Lưu ý: Bài viết này mình đi qua các khái niệm mà không giải thích cụ thể vì nó sẽ rất dài. Mình sẽ có các bài viết khác để nói sâu hơn về các vấn đề này ở Series về JavaScript, mọi người theo dõi nhé

    lo-trinh-hoc-js-banner.png
    Lộ trình học Javascript - Khái niệm cần nắm trong javascript

    Khái niệm cơ bản

    1. Biến (Variables) và Kiểu biến (Type Variable)

    Biến là nơi chứa các giá trị để chúng ta có thể sử dụng lại sau này qua tên biến. Chúng ta có thể khai báo biến bằng var, let, const

    var num;
    let str = "Hello";
    const NAME = "Dyno Nguyễn";
    

    JS là ngôn ngữ sử dụng biến động (dynamic type), có nghĩa là nó có thể nhận bất kỳ kiểu dữ liệu nào mà ta truyền cho nó. JS cung cấp từ khoá typeof để chúng ta kiểm tra kiểu của biến.

    Đến nay thì JS có 9 kiểu dữ liệu và chia làm 3 loại:

    6 Data Types là các kiểu nguyên thuỷ (primitives): undefined, boolean, number, string, bigint, symbol.
    2 Structural Types: object và function.
    1 Structural Root Primitives: null

    var x; // typeof x = "undefined"
    x = "Dyno"; // string
    x = 10; // number
    x = {}; // object
    x = function(){}; // function
    x = null; // object
    x = false; // boolean
    

    2. Ghi chú (Comment)

    comment-code.jpeg
    Comment Trong Code

    Comment trong code rất quan trọng, nó giúp người khác có thể hiểu được code của chúng ta, dễ bảo trì sau này. Vì thế nó thói quen comment code là rất tốt. Nhưng “Hãy comment tại sao phải làm như vậy” thay vì “Comment nó là cái g”.

    Trình thông dịch sẽ không biên dịch câu comment của bạn.

    Có 2 cách comment trong JavaScript:

    // Đây là comment đơn dòng. Sử dụng dấu //
    /*
      Đây là commnent đa dòng.
      Sử dụng dấu /* */
    */
    

    3. Input và Output trong JS

    Cách để nhập input phổ biến nhất là chúng ta sẽ dùng thẻ <input /> trong HTML, sau đó dùng JS để lấy giá trị của nó. Bạn tìm hiểu thêm ở phần DOM bên dưới.

    Cách thứ 2 là dùng method prompt , trình duyệt sẽ hiển thị một popup cho chúng ta nhập dữ liệu.

    var age = prompt("Nhập tuổi của bạn: ");
    

    Về output, bạn có thể dùng các cách sau để hiển thị kết quả:

    var x = 10;
    console.log(x); // Cách này tiện nhất
    alert(x);
    document.write(x);
    

    4. Toán tử (Operator)

    Có rất nhiều toán tử trong JS, mình sẽ cung cấp các từ khoá để bạn tìm hiểu nhé.

    • Toán tử số học (Arithmetic Operators): + – * / % ++ — **
    • list itemToán tử gán (Assignment Operators): = += -= *= /= %= **=
    • Toán tử so sánh (Comparison Operators): == === != !== > < >= <= ?
    • Toán tử logic (Logical Operators): && || !
    • Toán tử về bit (Bitwise Operators): & | ~ ^ << >> >>>
    • Toán tử về kiểu (Type Operators): typeof, instanceof

    Tham khảo: W3School JavaScript Operators

    5. Câu điều kiện (Conditionals)

    Điểu kiện rẽ nhánh giúp bạn phân loại các trường hợp xãy ra và xử lý logic nhất.

    Các từ khoá: if, else, else if, switch case

    const condition = 5;
    if(condition > 2){
      console.log("5 > 2")
    }else{
      console.log("5 < 2")
    };
    // "5 > 2" 🤣 đương nhiên rùi
    

    6. Vòng lặp (Loop)

    Vòng lặp giúp chúng ta tận dụng sức mạnh của máy tính để lặp lại có thao tác tính giống nhau nhiều lần liên tục.

    Trong JS có các loại vòng lặp sau: for, while, do while, for in, for of

    let sum = 0;
    for(let i = 0; i < 100; ++i){
      sum += i;
    }
    console.log(sum); // 4950
    

    7. Hàm (Function) và Phương thức (Method)

    Hàm hay chức năng nó giúp chúng ta gom nhóm các câu lệnh lại để thực hiện một công việc nhất định, và sau này thực hiện lại công việc đó chúng ta chỉ cần thực hiện lời gọi hàm.

    // khai báo hàm
    function sum(num1, num2){
      return num1 + num2;
    }
    // thực hiện hàm
    const result = sum(2, 3);
    console.log(result); // 5
    

    Phương thức cũng là một hàm, nhưng hàm này được định nghĩa trong một class hoặc object.

    var name = "Dyno Nguyen";
    name = name.toLowerCase(); phương thức toLowerCase của string
    console.log(name); // "dyno nguyen"
    

    8. Đối tượng (Object)

    JS thao tác rất nhiều với đối tượng thay vì lớp. Các bạn có thể hiểu đối tượng là một sự vật, sự việc có chung tính chất và chúng ta gom nó thành một biến. VD:

    // Tạo một đối tượng person chứa thông tin của một người
    const person = {
      name: 'Dyno',
      age: 18,
      country: 'Việt Nam',
      talk: function(){
        console.log("Hello");
      }
    }
    // truy xuất các thuộc tính, phương thức của đối tượng
    console.log(person.name); // "Dyno"
    console.log(person["age"]); // 18 - cách truy xuất khác
    person.talk(); // Hello
    

    9. Mảng (Array)

    Array bản chất cũng là một object. Array chứa các phần tử liên tiếp cùng kiểu dữ liệu với nhau (Thật ra, bạn hoàn toàn có thể thay đổi bất kỳ phần tử nào trong đấy khác kiểu với các phần tử còn lại, nhưng mình nghĩ điều đó là không nên vì sẽ sai đi ngữ nghĩa của array).

    const arr = [1, 2, 3, 4, 5];
    console.log(arr[1]); // 2
    arr[1] = "Dyno"; // Không nên làm vầy
    console.log(arr); // [1, "Dyno", 3, 4, 5]
    

    10. Chuỗi (String)

    Có một điều mình muốn thú nhận là làm việc với string trong JS thật sự rất sướng. Các method hỗ trợ tận răng luôn 😊 Demo chút nhé

    let str = "  Dyno ngUyen 123  "; // Expect: str = "dyno nguyen"
    str = str.replaceAll(/\d/g,'').trim().toLowerCase();
    

    11. Phương thức xây dựng sẵn (Built-in Methods)

    Hầu như các object hay class được xây dựng sẵn trong JS đều có các method hỗ trợ cho chúng ta. Việc học các method này giúp chúng ta code nhanh và tối ưu hơn thay vì phải tự đi xây dựng lại. Mọi vài method phổ biến.

    • Array: map(), filter(), find(), findIndex(), includes(), concat, reduce(), sort(), …
    • String: indexOf(), split(), slice(), replace(), …

    12. DOM (Document Object Model) & BOM (Browser Object Model)

    Để xây dựng các thành phần động trong một trang website thì chúng ta cần tìm hiểu về cách thao tác với DOM và BOM.

    DOM.png

    window-object_zjkb0u.png

    Khái niệm nâng cao

    1. Ép kiểu (Type Conversion)

    Trong rất nhiều trường hợp chúng ta bắt buộc phải đổi kiểu dữ liệu của một biến để nó phù hợp với ngữ nghĩa. Đa phần thì sẽ từ string sang number hoặc ngược lại.

    Có 2 dạng ép kiểu là Explicit (Rõ ràng) và Implicit (Ngầm định).

    const num = 18;
    const numStr = num.toString() + " tuổi"; // typeof numStr = "string" - Explicit
    const str = "18";
    const age = str * 1; // typeof age = "number" - Implicit
    

    2. Phân biệt == (equality operator) với === (identity operator)

    Đây là khái niệm dễ gây nhầm lẫn và khó hiểu với những người mới học. Hiểu đơn giản, với == thì nó tự động ép kiểu và sau đó so sánh, còn === sẽ so sánh trực tiếp cả về giá trị lẫn kiểu dữ liệu.

    Mình khuyến khích nên dùng === để code tường minh hơn, tránh gây ra những bug không đáng có.

    3. Truthy và Falsy

    Truthy là các giá trị khi ép về kiểu Boolean thì trả về true. Falsy thì ngược lại.

    Các giá trị Falsy: false, 0, -0, 0n, "", null, undefined, and NaN

    Ngoài các giá trị trên thì tất cả còn lại đều là Truthy.

    4. Tham chiếu (Pass by Reference) và Tham trị (Pass by Value)

    Nếu bạn đã học qua C/C++ thì chắc cũng đã nghe đến tham chiếu và tham trị. Đó là 2 cách quản lý bộ nhớ khác nhau, bạn cần hiểu rõ để tránh nhầm lẫn trong việc so sánh và sử dụng bộ nhớ tối ưu hơn.

    const a = 123;
    const b = 123;
    console.log(a === b); // true do so sánh 2 giá trị giống nhau (pass by value)
    const c = { x : 1 };
    const d = { x : 1 };
    console.log(c === d); // false do so sánh 2 địa chỉ vùng nhớ khác nhau (pass by reference)
    

    5. Sao chép nông (Shallow Copy) và Sao chép sâu (Deep Copy)

    Như vấn đề về tham chiếu ở trên, khi ta copy 1 object hoặc 1 array từ 1 object khác thì nên cẩn thận, vì nếu chúng ta dùng kỹ thuật shallow copy thì rất dễ bị chung vùng nhớ, dẫn đến object bị sai không đáng có.

    Mình có đề cập ở đây, bạn có thể đọc thêm: JavaScript tips & tricks

    6. Khối (Block) và Phạm vi hàm (Function Scope)

    Block là các đoạn code để thực hiện một chức năng nào đó mà chúng ta muốn gom nhóm nó lại, thì tất cả các code nằm trong { } thì gọi là một block.

    Function scope cũng như block nhưng nó áp dụng cho phạm vi bên trong 1 hàm nào đó.

    Bạn cần hiểu rõ 2 khái niệm này để dễ dàng tiếp cận với kiến thức chuyên sâu bên dưới hơn.

    Khái niệm chuyên sâu và ES6+

    1. Hàm tạo (Constructor Function) và từ khoá new

    Đây là một cách khởi tạo ra một đối tượng trong JS, nó cũng gần giống như class vậy. Và chúng ta sẽ dùng từ khoá new để tạo ra một object đó.

    function Person(name, age){
      this.name = name;
      this.age = age;
      
      this.sayName = function(){
        console.log("My name is " + this.name);
     }
    }
    const dyno = new Person("Dyno", 18);
    console.log(dyno.name); // "Dyno"
    

    2. Prototypes

    Đây là một điều đặc biệt của JS, prototype là một cơ chế để object có thể kế thừa có thuộc tính và phương thức với nhau, điều này giúp tiết kiệm bộ nhớ khi tạo các object.

    prototype.png
    Prototypes trong JavaScript

    3. Class

    Tuy JS không phải là một ngôn ngữ thuần OOP nhưng hiện nay thì JS cũng đã hỗ trợ chúng ta rất đầy đủ các tính chất OOP cho mọi người vọc vạch nhé 😎

    4. Hoisting

    Khi khai báo một biến với từ khoá var thì chúng ta rất dễ bị rơi vào tình trạng hoisting và điều này dẫn đến các kết quả không mong muốn và rất khó debug.

    Từ phiên bản ES6 thì JS đã hỗ trợ từ khoá const và let để thay cho việc sử dụng var.

    5. Function context, từ khoá this và bind

    6. Arrow function

    Trong ES6 có một cách khai báo function đó chính là dùng Arrow function, đều này giúp code chúng ta gọn gàng hơn và hưởng được một số đặc tính khác những.

    const myFn = () => {
      // do something ...
    }
    

    7. Một vài từ khoá khác trong ES6+

    Template string, arguments, call, apply, spread operator, object destructuring, …

    Bạn có thể xem các tips với ES6+ tại đây nhe: JS tips & tricks

    8. Các khái niệm nâng cao khác

    Sau đây là một vài khái niệm nâng cao, để hiểu rõ hơn bản chất của JS thì chúng ta cần hiểu các khái niệm sau. Do nó khá phức tạp nên mình sẽ có các bài viết riêng cho các từ khoá này:

    • Event loop trong JS.
    • Strict Mode
    • Callback & Promise
    • Async/Await và bất đồng bộ trong JS
    • HOF (Higher Order Functions)
    • Cà ri à không Currying function 😂
    • Clousure
    • IIFE (Immediately Invoked Function Expression)
    • Modules, Import và Export trong JS

    Tóm tắt

    Trên đây là tất cả các khái niệm mà trong lúc mình học JS thì mình đã học qua, ngoài ra còn rất nhiều thứ khác nữa.

    Chia sẻ tí kinh nghiệm học JS của mình là mọi người nên học sơ bộ qua các khái niệm một lượt, sau đó bắt tay vào hiểu sâu từng khái niệm. Và để hiểu sâu về nó thì chỉ có thực hành thì mới nhanh được, đừng chỉ học mỗi lý thuyết.

    Thời gian tới mình sẽ ra các bài viết khác đi sâu vào các vấn đề trên tại Series về JavaScript, mong được sự ủng hộ và góp ý của mọi người 😊

    Cảm ơn mọi người đã đọc bài viết ❤

    posted in Javacsript
  • Tổng quan về JavaScript. Học JavaScript như thế nào cho hiệu quả ?

    js-cover-840.jpeg
    Dạo gần đây, JavaScript là một cái tên được nhắc đến rất nhiều trên các cộng đồng lập trình, nhà nhà người người thi nhau đi học JavaScript. JavaScript cũng đứng thứ 2 (sau Python) trong top 10 ngôn ngữ phổ biến nhất năm 2020 (Theo: Northeastern University). Vậy JavaScript là gì? Bài viết này sẽ nói tổng quan về JavaScript để giúp bạn hiểu rõ hơn bản chất của ngôn ngữ này nhé 😉

    1. JavaScript là gì ?

    JavaScript (viết tắt là JS – đọc là da-va-sờ-cờ-ríp 😂) là một ngôn ngữ lập trình thông dịch (Interpreted Programming Language) hay ngôn ngữ kịch bản (Scripting Language).

    Ngôn ngữ thông dịch (Interpreted Languages) là ngôn ngữ biên dịch và thực thi cùng lúc trên từng dòng code, tốc độ thực thi chậm: Javascript, PHP, Python, Ruby, …
    Ngôn ngữ biên dịch (Compiled Languages) là ngôn ngữ biên dịch trước, thực thi sau trên toàn bộ mã nguồn. Tốc độ thực thi rất nhanh: C, C++, C#, Go, Rust, …
    JS được sinh ra với mục đích chính là nhúng vào file HTML để biến một website tính trở nên sinh động hơn.

    2. Lịch sử phát triển của JavaScript ?

    Brendan-Eich.jpeg
    Brendan Eich - cha đẻ của JavaScript

    JS được ra đời và tháng 5 năm 1995, cha đẻ là Brendan Eich một nhà công nghệ Mỹ, đồng sáng lập Mozilla và là một lập trình viên của Netscape.

    Các phiên bản của JavaScript cho đến nay:

    5/1995: Mocha
    9/1995: LiveScript
    12/1995: JavaScript
    6/1997: ECMAScript 1 (ES1). ECMAScript là một phiên bản chuẩn hoá của JS.
    6/1998: ES2
    12/1999: ES3
    12/2009: ES5
    6/2011: ES5.1
    6/2015: ES6 – ES2015 (Phiên bản ổn định của JS)
    Các năm tiếp theo JS ra tiếp các phiên bản ES7, ES8, … Và hiện tại là ES12 với các tính năng rất nổi bật.

    3. Cách thức hoạt động và điểm khác biệt của JavaScript

    JS là một ngôn ngữ đơn luồng (Single Thread) hay nói cách khác JS chỉ có duy nhất một call stack, một heap và trong cùng một thời điểm chỉ chạy duy nhất một dòng lệnh.

    JS có thể chạy được trên trình duyệt là nhờ vào các JavaScript Engine. Các engine này sẽ chuyển đổi code JS thành mã máy mà máy tính có thể hiểu được.

    Có rất nhiều các JS Engine phổ biến như SpiderMonkey (Firefox), Chakra, Rhino, Carakan, JavaScriptCore, Tamarin, … và nổi tiếng nhất là Google V8 được sử dụng trong Google Chrome và NodeJS runtime.
    js-engine-1.jpeg
    JavaScript Engine - Tổng quan về JavaScript

    4. Học JavaScript để làm gì và hệ sinh thái của nó ?

    Một trong những ưu điểm lớn của JS mà khiến nhiều người học nó đó chính là tính đa dụng của nó. Nếu không quá quan tâm về mặt hiệu năng thì JS có thể đảm nhiệm mọi vai trò trong thế giới của phát triển phần mềm.

    he-sinh-thai-js.png
    Hệ sinh thái của JavaScript

    Phát triển ứng dụng Frontend Web

    Đây cũng chính là mục tiêu ban đầu mà JS lúc vừa mới ra đời. Nếu như HTML là khung sườn của trang web, CSS là công cụ trang điểm thì JS chính là trái tim, linh hồn của trang web đó.

    JS giúp cho website của chúng ta trở nên sinh động hơn, người dùng có thể thao tác với các thành phần trên web một cách trực quan hơn, …

    Các thư viện, framework ưu chuộng: ReactJS, VueJS, Angular, Jquery, Ember, Backbone.js, Three.js, …

    Phát triển ứng dụng Backend Web

    nodejs.png
    Phát triển ứng dụng Backend với NodeJS

    Hiện nay, JS cũng rất có ưu thế trong việc phát triển Backend Server hay viết APIs nhờ phát triển của NodeJS Runtime JavaScript.

    Từ đó,chỉ với JS chúng ta hoàn toàn có thể xây dựng một ứng dụng vừa và nhỏ một cách nhanh chóng mà không cần học thêm ngôn ngữ khác.

    Các thư viện, framework ưu chuộng: Expressjs, Koa, Fastify, NestJs, …

    Phát triển Game 2D, 3D

    Thông qua HTML5 Canvas APIs thì chúng ta hoàn toàn có thể tạo nên một game hoàn hảo trên trình duyệt một cách nhanh chóng và dễ dàng hơn bao giờ hết. Chúng ta cũng có thể sử dụng canvas để tạo ra các hiệu ứng siêu đẹp trên website của mình.

    Bên cạnh đó, cũng có rất nhiều các engine hỗ trợ chúng ta tạo nên những game 2D, 3D với hiệu năng cao trên web dễ dàng hơn như BabylonJS, LimeJS, …

    Phát triển ứng dụng Mobile

    react-native.png
    Phát triển ứng dụng Mobile với React Native

    Dạo gần đây, xu hướng phát triển các ứng dụng đa nền tảng trên điện thoại (Hybrid App – Cross Platform) trở nên phổ biến vì chỉ cần viết một lần mà dùng ở nhiều nơi, việc này giúp giảm chi phí và thời gian phát triển ứng dụng.

    Một vài công nghệ hỗ trợ việc này như Flutter (được viết bằng Dart) và React Native được viết bằng JavaScript. Ngoài ra còn có NativeScript, Ionic, …

    Phát triển ứng dụng Desktop

    electron.png
    Xây dựng desktop app với Electron

    Giờ đây, chúng ta có thể xây dựng một ứng dụng trên desktop đa nền tảng dễ dàng với Electron, một thư viện mã nguồn mở của Github. Các ứng dụng quen thuộc của chúng ta được viết bở Electron như Visual Studio Code, Slack, Figma, Microsoft team, …

    Yeah, vậy là đủ các nền tảng phổ thông cho anh em dev phát triển phần mềm rồi nhé. Thoải mái nghịch ngợm, tạo nên các ứng dụng đa nền tảng chỉ với JS. Nhưng mà khoan 😐 Nếu JS ngon vậy thì cần gì học ngôn ngữ khác nữa? Xem tiếp bên dưới nhé.

    5. Ưu và nhược điểm của JavaScript

    Ưu điểm
    Thật sự mà nói, JS có rất nhiều ưu điểm khiến mọi người yêu thích nó:

    JS rất dễ học, dễ bắt đầu cho người mới. Nếu so với các ngôn ngữ biên dịch như C, C++, C# thì JS dễ hơn rất nhiều.
    Bạn có thể chạy JS ở bất kỳ đâu vì nó không cần một trình biên dịch. Bạn có thể dùng ngay trên console web browser hay Runtime NodeJS.
    JS làm được rất nhiều thứ như mình nói ở trên, bạn dễ dàng xây dựng một ứng dụng đa nền tảng mà không cần mất quá nhiều thời gian. Ví dụ như bạn học ReactJS thì rất dễ để qua React Native.
    JS rất dễ bắt lỗi, debug trong lúc code, vì nó thông dịch theo từng dòng nên đến dòng nào debug dòng đó.
    Cộng đồng ae JS hùng hậu, stackoverflow đầy đủ không ngại con bug nào 🐞·
    Hơn 92% các trang web hiện nay có sử dụng JS (2016), vì thế học JS không lo không có chỗ dùng, trừ khi website không dùng JS nữa 🤣
    Số lượng tuyển dụng lập trình viên biết Javascript cao, dễ có cơ hội việc làm hơn.
    Tuyển dụng JavaScript
    Tuyển dụng JavaScript
    Nhược điểm
    Cái gì cũng có nhược điểm của nó, JS cũng thế. Và đôi khi chính những ưu điểm của JS cũng trở thành nhược điểm của nó.

    Dễ học nhưng kiến thức không hàn lâm nên rất khó để nắm được chuyên sâu về hệ thống. Không như C, C++, JS là kiểu dữ liệu động, không thuần OOP, không có khái niệm con trỏ, … Vì thế, rất khó để chuyển sang ngôn ngữ khác nếu học JS đầu tiên.
    Dễ dàng chạy trên trình duyệt vì thế rất dễ bị tấn công phía client bởi các script mà hacker nhúng vào.
    Chạy đa nền tảng tuy nhiên hiệu năng không thể cao như các ngôn ngữ native khác.
    Cộng đồng đông mã nguồn mở nhiều nên hệ thống có thể dễ bị khai thác lỗ hổng.

    6. Học JavaScript ở đâu ?

    JS rất dễ học và có rất nhiều nguồn để học JS. Bạn có thể tham khảo vài nguồn ở dưới đây nhé:

    Website: W3School, Mozilla, Freecodecamp, F8 fullstack, Nodemy.vn (tiếng Việt, thầy giảng). Class.nodemy.vn (học video)
    Đọc Blog: Blog của mình, Blog toidicodedao, viblo, ..
    Học qua các kệnh Youtube
    Sách: You don’t know JavaScript, Eloquent JavaScript, Head First JavaScript Programming, …

    7. Học JavaScript như thế nào cho hiệu quả ?

    Thật ra, bạn học như thế nào cũng được, bản thân bạn thấy thoải mái, tiến bộ mỗi ngày là được. Nhưng mình có một vài lời khuyên cho những bạn mới bắt đầu học như sau:

    Hãy tìm hiểu sơ lược hoặc kỹ càng về bản chất của JS. Cách thức mà nó hoạt động và học nó để làm gì, đừng học chỉ vì nó đang làm trend.
    Luôn đặt ra các câu hỏi trong lúc học một cái mới như cái này là cái gì? Học nó để làm gì? Có cách nào khác để làm điều đó không?…
    Hãy học kỹ căn bản đừng vội lao vào học framework. Ban đầu có thể bạn sẽ cảm thấy chậm, nhưng tin mình đi sau này bạn sẽ không phí thời gian đâu.
    Đừng ôm học quá nhiều framework hay thư viện, hãy học chuyên sâu một cái đã. Tổng quan thì chúng cũng như nhau cả thôi.
    Đừng quá lạm dụng vào các thư viện có sẵn, cái nào dễ thì hãy tìm cách làm.
    Và đặc biệt là đọc nhiều blog và xem video từ nhiều nơi, từ đó bạn có thể tích góp được nhiều cái hay ở nhiều nơi.

    8. Vậy có nên học JavaScript ?

    Câu trả lời là “Tuỳ vào bạn”, nếu bạn vẫn đang cảm thấy phân vân thì hãy đọc lại blog này hoặc tìm đọc cái blog liên quan khác. Sau đó, hãy trả lời câu hỏi này. Còn nếu bạn vẫn thực sự chưa trả lời được thì cứ học thôi, đừng quan tâm ai nói gì? Tự học thì bạn sẽ tự ngộ ra câu trả lời thôi nè 😎

    Tạm kết
    Cảm ơn bạn đã đọc bài viết này, hy vọng nó sẽ giúp bạn phần nào hiểu hơn về ngôn ngữ vạn người mê ngàn người lú JavaScript này nhé. Nếu thấy hay và bổ ích hãy chia sẻ bài viết này nhé. Mọi thắc mắc gì, bạn cứ bình luận bên dưới ❤

    Bạn có thể theo dõi Series Về Javascript của mình để cập nhật các kiến thức hay ho về JS nhé.
    Nguồn:
    https://dynonguyen.com/tong-quan-ve-javascript/

    posted in Javacsript
  • RE: Chia sẻ web làm bài test trắc nghiệm lập trình

    Web rất hữu ích. Cảm ơn bạn đã chia sẻ

    posted in Chia sẻ
  • RE: #nodejs #jwt

    Về luồng hoạt động thì ổn rồi em nhé.

    posted in Hỏi Đáp
  • RE: Những thủ thuật “ Bá đạo ” mà bạn có thể làm với Chrome Developer Tools

    @Văn-Anh-Đào Bài viết hay quá. Rất hữu ích

    posted in Tutorials
  • HỌC LẬP TRÌNH SAO CHO VÀO ĐẦU, SAO CHO HIỆU QUẢ

    HỌC LẬP TRÌNH SAO CHO VÀO ĐẦU, SAO CHO HIỆU QUẢ

    NODEMY.png

    Trước có bạn sinh viên từng tâm sự với mình:
    "Anh ơi em bế tắc lắm rồi, em đã cố gắng hết sức rồi mà xin thực tập mãi không được nhận? Giờ em phải làm sao anh, a cho em lời khuyên với?"
    Tôi: Em học lập trình bao lâu rồi, học ra sao ns anh xem?
    Em học C++, HTML, CSS, Java, PHP, Javascript, Python, em học trên youtube được 2 tháng rồi, (chụp ngay cả chồng sách to tướng về lập trình).
    Tôi: 2 tháng mà học lắm thứ thế em, ms 2 tháng thì ăn thua gì, đâu học xong làm đc gì show xem.
    HTML CSS cắt được mỗi cái giao diện chưa reponsive, Các ngôn ngữ khác thì học mỗi mấy câu lệnh căn bản if else, for, while thế này thì chưa đi làm được là đúng rồi

    Qua câu chuyện trên mình nhận ra một điều là các bạn newbie hầu hết đang nghĩ sai về mức chuẩn có thể đi làm mà cũng chẳng biết cần những gì để đi làm được.
    Cái các bạn học là nền tảng chỉ để hiểu. Ae đừng lầm tưởng là cứ biết càng nhiều ngôn ngữ là sẽ ngon, nên chú trọng chiều sâu một chút, thế chiều sâu là gì:

    kiến thức:

    1. Hiểu về cách làm ra một sản phẩm
    2. Kiến thức cốt lõi sử dụng trong ngôn ngữ đó(core - có cái này lỗi vặt cũng ít)
    3. Học thêm một số lib, framework ngôn ngữ đã chọn
    4. Hiểu nguyên lý một ngôn ngữ lập trình, lib, framework hoạt động
    5. Các vấn đề, bài toán cần xử lý thường xuyên gặp trong các dự án
    6. Luyện thuật toán, luyện não phản xạ vs code.

    Kỹ năng:

    1. Vận dụng nền tảng như phản xạ, quen tay, quen mắt
    2. Xử lý vấn đề khi gặp lỗi, debug, search siếc ra làm sao
    3. Đọc tài liệu gốc (chẳng cần giỏi tiếng anh đâu, cần google translate, vừa đọc vừa search lâu sẽ quen)
    4. Kỹ năng viết code sạch, dễ hiểu
    5. Kỹ năng quản lý code, làm việc nhóm
    6. Kỹ năng chủ động trình bày vấn đề (gặp vấn đề là k đc ỉm)
    7. Kỹ năng đặt câu hỏi (đừng bao giờ hỏi chung chung: anh ơi em bị lỗi gì ý mà nên tìm hiểu nguyên nhân lỗi trước - bằng hết sức có thể hãy tìm ra keyword gây lỗi, cái này dùng 5WHY nhé)
    8. Kỹ năng chia nhỏ vấn đề ra xử lý, khoanh vùng nó lại tập trung giải quyết.

    Mindset:

    1. Mới học thì chọn 1 ngôn ngữ thôi, học phải có MỤC TIÊU, KẾ HOẠCH rõ ràng, đạt được nó đến cùng.
    2. Phải tự áp dụng làm được một sản phẩm riêng mình bằng kiến thức đã học
    3. Làm sản phẩm phải hoàn thiện sẽ được mọi người sử dụng nên cần chỉnh chu(làm ít mà phải chất)
    4. Thái độ làm việc nghiêm túc, trách nhiệm (mình là ng đi làm không phải thích làm thì làm, nghỉ thì nghỉ).
    5. Công việc ưu tiên hàng đầu, k đc trễ deadline đã định.
    6. K ngừng học nâng cao (kinh nghiệm, kiến thức tăng theo thời gian, 2 tháng có giá của 2 tháng, 1 năm có giá của 1 năm)

    Sương sương thế thôi chứ nói ra còn rất dài, ae cố gắng học như trên chắc chắn sẽ thành công. Đã là lập trình viên thì nên có tính tự học, tìm tòi vì kiến thức NGÀNH nó rộng lắm.
    Nhưng mình biết k phải ae nào cũng nhớ và áp dụng được mấy cái trên thế nên tốt nhất nếu mới bước chân vào lập trình thì có người hướng dẫn, dạy mình là k bao giờ thừa.

    Team mình phát triển hệ thống học tập online có đủ kiến thức từ số 0 đến đi làm được:
    https://class.nodemy.vn

    *Lưu ý: mình phải đính chính lại là kiến thức này mình public hết trên youtube Nodemy rồi (free hết). Trong hệ thống là công sức để đội mentor(hướng dẫn mọi người, teamview chữa bài, inbox ngày đêm)
    Ytube: https://www.youtube.com/channel/UCMfiIOjAzHZ9vyoqNdcPvNA

    Bạn nào ở Hà Nội thì sắp tới đang có chương trình đào tạo JS,
    Link đk: https://forms.gle/VqCJszUKSA5aUp7r6

    Trên đây là quy trình bên mình áp dụng đào tạo cho học viên gần 2 năm nay, rất ok. Hi vọng giúp đc các bạn mới và có ích với các cty đang cần training nhân sự

    posted in Tutorials
$(document).ready(function () { app.coldLoad(); }); }