Category Archives: kiến thức lập trình

Đây là chuyên mục cho các bài viết có chủ đề về kiến thức lập trình.

Cách tối ưu câu lệnh điều kiện trong Javascript

Một trong những công cụ quan trọng và được sử dụng nhiều nhất của các ngôn ngữ lập trình chính là các câu lệnh điều kiện. Việc tạo ra các nhánh code chỉ được chạy khi đáp ứng một số điều kiện nhất định. Đối với ngôn ngữ Javascript có 3 loại điều kiện chính: khối if/else, switch statements và biểu thức điều kiện. Từ 3 câu lệnh này có thể giúp bạn tạo ra những “đường code thăng hoa”.

Giống như những câu lệnh khác, một câu lệnh điều kiện không được tối ưu sẽ rất dễ gây ra lỗi và khó tối ưu sau này. Vậy nên dưới đây, bài viết sẽ giới thiệu cho bạn một số cách viết áp dụng vài nguyên tắc cơ bản để giúp chúng ta tối ưu được những câu lệnh điều kiện này một cách tốt nhất.

  1. Khái niệm cơ bản nhất của Javascript Conditionals

Như đã nói ở trên, Javascript ( JS ) có 3 loại điều kiện chính. Đầu tiên chính là câu lệnh if/else. Định nghĩa về câu lệnh này rấy đơn giản: Nếu điều kiện đúng , đoạn code trong đó sẽ được chạy. Ví dụ:

Ta cũng có thể chạy thêm đoạn mã khác dựa trên cùng một điều kiện, bằng cách thêm từ khoá else, như ví dụ dưới đây:

Bạn cũng có thể thêm nhiều điều kiện bằng cách sử dụng các câu lệnh else/if như dưới đây:

Câu lệnh switch, nó kiểm tra giá trị của 1 hoặc nhiều case đối với expression. Nếu không có case nào thoả mãn, thì bạn có thể cung cấp một case mặc định – được gọi là default:

Một trong những lưu ý quan trọng nhất của switch statements chính là break or return. Chúng sẽ giúp ngắt việc thực thi case không thoả mãn và tiếp tục chạy xuống những case phía dưới. Ví dụ:

Kiểu điều kiện cuối cùng chính là biểu thức điều kiện. Chúng cũng là một cách hay được sử dụng để đơn giản hoá mệnh đề if/else.

2. Best Practices cho Conditionals

Nếu như không được tối ưu và sử dụng đúng cách, các câu lệnh điều kiện sẽ là một cản trở khó chịu trong quá trình xây dựng sản phẩm của bạn. Để giảm trừ điều này, có một vài nguyên tắc mà bạn nên tuân theo để tránh cho những câu lệnh điều kiện mà bạn viết ra trở thành một mớ hỗn độn.

2.1. Đừng sử dụng câu lệnh If để gán giá trị có điều kiện.

Với bài toán trên, bạn nên xử lý như thế này:

2.2. Tránh lồng quá nhiều if/else. Về bản chất, else/if là một khối if lồng nhau. Ta thường viết nó như thế này

Thực tế, nó chính là như thế này:

Với “pha xử lý cồng kềnh” bên trên, ta có thể viết lại chúng như sau:

Một cách khác để tránh những If blocks lồng nhau, đó chính là sử dụng switch statements, như dưới đây:

Trên đây là một số chia sẻ về câu lệnh điều kiện trong JS cũng như một số nguyên tắc nhỏ trong việc viết chung. Hy vọng bài viết đã mang lại nhiều điều bổ ích cho bạn !

5 trang web giúp bạn luyện thuật toán, học lập trình

thuat-toan

Nhiều bạn muốn học online nhưng không biết học ở đâu? MISA chia sẻ cho các bạn 5 trang cực kì hay ho để luyện thuật toán/học lập trình nha! Bạn không cần học hết cả 5 trang, nhưng hãy cố gắng chọn 2 trang bạn thấy phù hợp nhất nhé!

Hackerrank (hackerrank.com

Trang nay rất rất phổ biến trong giới lập trình, từ junior đến senior, từ developer đến mấy bác tuyển dụng.

Hackerrank có rất nhiều bài thuật toán, với độ khó từ thấp đến cao, đủ mọi thể loại thuật toán và cấu trúc dữ liệu (Thậm chí cả SQL cũng có luôn). Bạn sẽ viết code, chạy trực tiếp và xem kết quả, bí quá có thể qua mục discussion xem mọi người giải ra sao nữa.

Leetcode (leetcode.com

Bên cạnh Hackeerank, Leetcode cũng là 1 trang rất hay để luyện thuật toán. Số lượng bài toán trên này không hề thua hackerrank, có 3 độ khó chính là Easy/Medium/Hard.

Trang này còn có 1 cái khá hay ho là nó đo performance/runtime code của bạn, so sánh với người khác để xem code bạn chạy nhanh hay chậm, có thể optimize được hay không (cái này nhiều khi hơi lô, bấm Run lại tự dưng code nhanh hơn hẳn) .

Geekforgeeks (practice.geeksforgeeks.org

Nếu bạn đã từng bí khi làm bài thuật toán, từng Google tìm lời giải, hẳn bạn sẽ thấy qua trang này một vài lần.

Trang Geekforgeeks này giao diện nhìn hơi lố, bài tập cũng không phân loại rõ cho lắm. Tuy vậy, nó lại có … rất nhiều bài giải của những bài tập thuật toán thông dụng. Mỗi bài giải lại gồm nhiều cách giải khác nhau, đi kèm với độ phức tạp/memory của mỗi cách giải. Đọc rất là hay và bổ ích.

Do vậy, lâu lâu các bạn có thể trang này xem bài giải/code example của các thuật toán phổ biến nha!

Exercism.io

Nếu như các trang trên để luyện thuật toán, thì Exercism lại là 1 trang khá hay để luyện thành thạo ngôn ngữ lập trình.

Trên Exercism cũng có nhiều bài tập, nhưng các bài tập này không quá nặng về thuật toán, mà nặng về cách dùng ngôn ngữ lập trình:

  • Sử dụng if/else, loop.
  • Xử lý ngày tháng, xử lý chuỗi
  • Cách phân tách method, tổ chức class
  • Cách xử lý lỗi, viết code bất đồng bộ…

Nếu các bạn đã lập trình 1 thời gian, muốn học ngôn ngữ mới, học cách tư duy mới thì cứ lên Exercism nhé!

Daily Coding Problem (dailycodingproblem.com

Khác với những trang còn lại, trang này không có danh sách bài tập. Thay vào đó, bạn nhập email của bạn vào, mỗi ngày họ sẽ gửi cho bạn 1 bài thuật toán để làm thử.

Các bài này cũng mức Easy/Medium, được các công ty như Amazon/Google sử dụng để phỏng vấn ứng viên. Dùng gói Premium thì các bạn sẽ được gửi kèm lời giải luôn!

Nếu các bạn sắp đi phỏng vấn, ôn thuật toán thì đăng kí trang này, luyện trước 2-3 tháng là vừa nha!

Trên đây là 5 trang web rất hay ho. Tuy nhiên bạn không nhất thiết phải học cả trên 5 trang. Bạn có thể chọn Hackerrank/Leetcode nếu bạn muốn luyện trước khi phỏng vấn; hoặc chọn Exercism nếu cần học ngôn ngữ mới là được nhé.

#suutam

Con đường trở thành lập trình viên – các khái niệm về lập trình web

lap-trinh-vien

Bạn đang băn khoăn về con đường trở thành lập trình viên? Bài viết sau đây sẽ giải đáp cho bạn tất tần về Lập trình viên là ai? Học ngành nào thì sẽ làm lập trình viên? Ngoài ra bài viết sẽ cung cấp những khái niệm cơ bản về lập trình web (front-end, back-end, full-stack) để bạn có thể nắm bắt một cách dễ dàng khái niệm lập trình viên sẽ làm gì.

1. Lập trình viên là ai?

  • Là người thiết kế, xây dựng và bảo trì các chương trình máy tính. Bằng cách thao tác với những đoạn mã trên các công cụ lập trình. Lập trình viên còn được gọi bằng nhiều cái tên khác như dân IT, developer, coder, programmer…
  • Các lập trình viên thường làm việc với ít nhất 1 ngôn ngữ lập trình. VD: Javascript, PHP, Java, Ruby, Python, C#, ASP,…
  • Lập trình viên được ví là những thợ “Coding”, làm ra các phần mềm, phát triển nó dựa trên công cụ lập trình

2. Xác định mục tiêu ban đầu?

  • Học lập trình để làm gì?
  • Học lập trình để trở thành ai?
  • Input / Output là gì?

3. Theo đuổi chuyên ngành nào?

  • Thiết kế/Lập trình Website (Front end, Back end, Fullstack)
  • Lập trình Mobile
  • Thiết kế hệ thống 
  • Lập trình Ứng dụng (PC)
  • Lập trình Nhúng
  • Big data / Machine Learning / AI
  • Blockchain

Dưới đây là những khái niệm cơ bản về lập trình web để bạn có thể nắm bắt một cách dễ dàng khái niệm lập trình viên sẽ làm gì.

3.1. Lập trình viên Front-end

  • Xây dựng giao diện người dùng

Xây dựng giao diện Website từ mẫu thiết kế (PSD, AI, Images,…)

  • Tối ưu hiệu năng của ứng dụng Front-end

Tối ưu về tốc độ của ứng dụng

  • Tối ưu trải nghiệm người dùng

Mang lại trải nghiệm tốt cho người dùng khi sử dụng sản phẩm Website

Lập trình viên Front-end cần nắm chắc các ngôn ngữ (lập trình) sau:

  • Cơ bản:
  1. HTML, CSS, CSS3 ( Bootstrap, Bulma, CSS preprocessor… )
  2. Javascript ( Jquery )
  3. Kỹ năng tìm lỗi, sửa lỗi
  4. Biết sử dụng các công cụ hỗ trợ ( Dev tool, IDE, Photoshop, AI,… )
  5. Kiến thức về Layout ( Các dạng giao diện phổ biến của Website, màu sắc,… )
  • Nâng cao:
  1. Làm việc tốt với ít nhất 1 Framework Javascript ( ReactJS, AngularJS,… )
  2. Biết sử dụng hợp lý các thư viện hỗ trợ khi xây dựng sản phẩm
  3. Tối ưu giao diện người dùng ( UI )
  4. Tối ưu trải nghiệm người dùng ( UX )
  5. Có thể kết hợp với Designer để tạo ra giao diện sản phẩm tối ưu hơn
  6. Nâng cao độ khó tính lên mức A+, A++

3.2. Lập trình viên Back-end

  • Xây dựng ứng dụng làm việc phía sau giao diện người dùng
  • Phân tích, thiết kế các thành phần, mô hình ứng dụng
  • Phân tích, thiết kế cơ sở dữ liệu
  • Xây dựng giao diện lập trình ứng dụng ( API )
  • Tối ưu hiệu năng ứng dụng Back-end

Lập trình viên Backend cần nắm chắc các ngôn ngữ (lập trình) sau:

  • Cơ bản:
  1. Front-end cơ bản ( HTML, CSS, Javascript, … )
  2. Nắm chắc ít nhất một ngôn ngữ server-side ( PHP, Ruby, Python, Java, C#, .NET, NodeJS, … )
  3. Am hiểu, sử dụng thành thạo hệ quản trị CSDL MySQL, hoặc PostgreSQL, Oracle, NoSQL, …
  4. Kỹ năng tìm lỗi, sửa lỗi
  • Nâng cao:
  1. Các kỹ thuật nâng cao: Cache, Logs, Background-Job, Cron job, …
  2. Clean code
  3. Kỹ năng bảo mật cho ứng dụng
  4. Kỹ năng tối ưu hiệu năng ứng dụng
  5. Nắm chắc cách hoạt động, môi trường để chạy ứng dụng
  6. Nắm chắc các mô hình và các thành phần trong ứng dụng
  7. Triển khai ứng dụng ( Deploy ), cài đặt Web-server, Services, …

3.3. Lập trình viên Full-stack

  • Lập trình viên Full-stack là người đa năng
  • Làm việc chuyên nghiệp trên cả Server-side & Client-side.

4. Chuẩn bị kỹ lưỡng trước khi bắt đầu

  • Đặt tiêu phấn đấu tới là phát triển bản thân & sự nghiệp
  • Đặt mục tiêu ngắn hạn, dài hạn
  • Rèn luyện tính khiêm tốn, không dấu dốt
    1. Luôn có cơ hội học hỏi
    2. Có lòng tin từ mọi người
  • Chăm chỉ, luôn chủ động tìm tòi học hỏi

5. Cách học tập hiệu quả

  • Không ngại học cái mới
  • Học chậm rãi
  1. Học lý thuyết. Output: Trả lời được câu hỏi … là gì?
  2. Thực hành. Output: Từ kiến thức đã học, hãy làm 1 VD cụ thể
  3. Hãy tưởng tượng là mình sẽ dạy lại người khác
  4. Học cách sử dụng các công cụ liên quan, tận dụng tối đa các tiện ích của công cụ

6. Vấn đề gặp phải trong quá trình học

  • Học mãi không hiểu
  1. Tại vì bị hổng kiến thức cơ bản
  2. Tại vì suy nghĩ quá máy móc
  3. Tại vì quá mệt mỏi, căng thẳng
  • Ban đầu học dễ hiểu, càng về sau càng không hiểu gì
  1. “Mặc dù bạn học rất kỹ càng, không bị hổng kiến thức”
  2. Lý do: Kiến thức nâng cao hơn, sẽ cần nhiều thời gian để tiếp thu hơn
  • Code theo video thì được, tự code lại không biết code cái gì..
  1. Tại vì chưa hình thành Tư duy lập trình
  • Code lỗi: “Rõ ràng em không sai ở đâu cả!”
  1. Tại vì thiếu kỹ năng tìm lỗi, sửa lỗi ( Debug )
  2. Tại vì chưa hình cái nhìn bao quát
  • Tưởng mình là Super Developer
  1. Biểu hiện: Thấy cái gì cũng đơn giản, nghĩ cái gì mình cũng có thể làm được, …
  2. Đối tượng thường gặp:
    • Đã có kiến thức cơ bản về HTML, CSS, Javascript
    • Đã có kiến thức về 1 ngôn ngữ server-side như PHP
    • Đã làm việc với MySQL hoặc tương đương, …

7. Học và dõi theo những người đi trước

  • Đơn giản hoá trong suy nghĩ

“Vấn đề to thành vấn đề nhỏ, vấn đề nhỏ thành không có gì”

“Sai sửa, chửa đẻ”

  • Đơn giản ngay cả trong từng dòng Code
  1. Mỗi function chỉ làm 1 nhiệm vụ, công việc
  2. Code đơn giản nhất, dễ hiểu nhất, đảm bảo tính đúng đắn nhất trong logic
  3. Kỹ tính trong từng dấu “chấm”, dấu “phẩy”, từng dấu thụt đầu dòng (Tab)

Bài viết trên đây để cho bạn có thể nắm bắt nhanh các ý chính, để chọn hướng đi cho tương lai của mình nhé.

Tham khảo page: Tuyển dụng MISA – Software để biế thêm các thông tin về MISA.

[P2: Back-end] Mình đã trở thành Web developer như thế nào?

backend

Phần 2: BACK-END

Sau phần 1 về Front-end hôm trước, hôm nay mình tiếp tục viết về Back-end. Ở bài này mình sẽ đưa ra những kinh nghiệm về việc học Back-end của mình. Học những gì? Bắt đầu học từ đâu? Học ở đâu?

Phần 1: Front-end http://tuyendung.misa.com.vn/minh-da-tro-thanh-web-developer-nhu-the-nao-front-end/

Nhìn chung, đi đến back-end là mọi người đã đi sâu hơn vào lập trình, không còn nhiều tính “nghệ thuật” như front-end nữa, mà thay vào đó là những logic, giải thuật, kiến trúc, nhưng nó vẫn có những điều hứng thú riêng!

Bắt đầu vào học back-end cần những gì nhỉ?

Well, chúng ta nên khởi động từ những kiến thức bắt buộc của một lập trình viên, đây là những kiến thức có thể ứng dụng ở nhiều ngôn ngữ, nhiều nền tảng. Cho dù bạn là một lập trình viên Java, C#, PHP, Python,… làm về Web, Mobile, Desktop,… đều cần những kiến thức này. 

Cấu trúc dữ liệu và giải thuật

Cái này thì hiển nhiên rồi phải không nào. Đây là điều kiện tiên quyết khi học lập trình, bất kỳ một ngôn ngữ nào thì các bạn đều dùng đến các hàm sắp xếp, tìm kiếm, các cấu trúc dữ liệu mảng, danh sách, cây,… Vậy nên việc hiểu về các kiến thức này rất quan trọng.

Về mức độ thì mình thấy kiến thức trên giảng đường cũng đủ dùng, chỉ cần bám sát giáo trình đại học là cũng đủ để vẫy vùng ở level Junior rồi. Tuy nhiên, mình biết là đối với anh em sinh viên thì giảng đường nó không hấp dẫn bằng những phút giây combat, chạy bo hay đi chơi với gấu (nếu có) nên bị hổng phần này khá nhiều. Do vậy mình gợi ý anh em một vài khóa học, quyển sách để bù đắp cho những ngày tháng sinh viên máu lửa:

Khóa của Khan Academy (xem tại đây)

Khóa này đơn giản và dễ hiểu, chỉ nói các kiến thức cơ bản như sắp xếp, tìm kiếm, đồ thị. Kiến thức rất dễ hiểu và nhanh gọn, thích hợp cho các bạn mới bắt đầu.

Khóa Algorithm của Đại học Princeton trên Cousera(xem tại đây)

Có 2 khóa, hoàn toàn miễn phí nha các bạn – 2 khóa này rất đầy đủ nhưng kiến thức hơi hàn lâm, đúng chất giáo trình đại học, phù hợp cho các bạn muốn tìm hiểu rõ ràng hơn, học xong part này lên trình Senior vẫn áp dụng được.

Cá nhân mình thì chỉ học theo kiến thức trong trường, giáo trình Cấu trúc dữ liệu & giải thuật của thầy Nguyễn Đức Nghĩa thấy quá đủ để dùng. Nếu các bạn cần các quyển sách dễ hiểu hơn thì mình gợi ý Algorithm in Nutshell – một quyển sách khá nổi tiếng (anh em tìm trên mạng là ra nha). 

Cơ sở dữ liệu

Có 2 loại hình cơ sở dữ liệu chính: SQL và noSQL

Về SQL, cơ bản thì chỉ cần nắm vững các khái niệm ở trong SQL như bảng, khóa, function, có khả năng viết các câu truy vấn select, update, delete, thực hiện các phép join, group,… Những điều này thì đều được dạy ở trường, nếu các bạn muốn tự học thì có thể tham khảo quyển SQL Cookbook – một quyển khá tốt để bắt đầu từ cơ bản. 

Ở các dự án nhỏ, hầu hết truy vấn đều chỉ là Thêm/Xem/Sửa/Xóa (gọi tắt là CRUD – Create, Read, Update, Delete) không quá phức tạp, cần thì join ở vài bảng vào với nhau là được, còn đối với các dự án lớn thì sẽ có hẳn những vị trí chuyên biệt thao tác với cơ sở dữ liệu để đảm bảo hiệu năng, bảo mật. 

Mục tiêu sau khi học xong phần này là khi đưa ra một bài toán, VD quản lý sách ở trong thư viện, quản lý sinh viên của một trường đại học, làm một game đơn giản,… thì chúng ta cần vẽ ra được một mô hình dữ liệu gồm các bảng nào, trong mỗi bảng có các trường nào, kiểu dữ liệu là gì, khóa là gì, các procedure/function nào để thao tác với dữ liệu.

Về noSQL thì cũng mới nổi lên và được sử dụng trong thời gian gần đây, tuy nhiên trong các dự án thuần về quản lý, nghiệp vụ thì cũng ít có đất sử dụng và cũng không phức tạp bằng SQL, thông thường thì tùy nhu cầu mà dự án sẽ lựa chọn sử dụng dữ liệu noSQL nào cho phù hợp như Key – value, Document, Graph,… anh em có thể tham khảo bài giới thiệu tại đây.

Lập trình hướng đối tượng (OPP) và cú pháp ngôn ngữ

Kinh nghiệm đi phỏng vấn và ngồi phòng vấn ở nhiều công ty thì kiến thức kinh điển hỏi level Fresher, Junior là các tính chất của OOP. Bật mí là chương trình Fresher ở MISA cũng ngoại lệ. Đây cũng là các kiến thức nền tảng vì hầu hết ngôn ngữ chủ yếu hiện nay để tuân theo cơ chế hướng đối tượng. 4 tính chất cơ bản cùng với các ứng dụng của nó đã là nền tảng để thi công hầu hết các ứng dụng. 

Về học hướng đối tượng thì mình nghĩ nên kết hợp với học ngôn ngữ luôn, hầu hết các khóa học/sách dạy ngôn ngữ đều sẽ nói về hướng đối tượng. 

VD như C# anh em có thể tham khảo quyển Head first C#, mình đã có review quyển này rồi đó (xem tại đây)

Hay các ngôn ngữ khác có Head first JavaHead first PHP,… (hoặc bất kỳ quyển sách/khóa học phổ biến nào về các ngôn ngữ) 

Clean code

Đến đây thì hầu hết anh em đã ở level “code được”, chúng ta cần thêm các kỹ năng hơn một chút ở level “code tốt”. Điều đầu tiên đó là code phải clean. Sẽ có các điều không phải là lập trình nhưng chúng ta phải học như cách đặt tên biến, cách comment, cách viết các hàm, cách chia class,… sao cho hợp lý. 

Không có những điều này, code của bạn vẫn chạy, nhưng áp dụng những điều này sẽ giúp code của chúng ta đễ đọc, an toàn hơn, chương trình của chúng ta dễ thi công và triển khai hơn, giảm thiểu việc đồng nghiệp lấy dây chuột siết cổ bạn hoặc đập đầu bạn bằng bàn phím. 

Tin tôi đi, tôi đã chứng kiến không ít vụ cãi nhau lên bờ xuống ruộng vì viết code “tồi” dẫn đến không hiểu nhau, mất nhiều thời gian debug mà không sửa được lỗi rồi đấy. 

Các bạn có thể tham khảo seri bài viết về clean code của anh Toidicodedao tại đây

Các kỹ năng khác

Kỹ năng Search Google, Stackoverflow,… : cái này cực kỳ quan trọng nha, khi gặp một vấn đề, lỗi chúng ta cần biết cách tìm kiếm hướng giải quyết trên internet, thường thì sẽ là copy lỗi -> paste lên google thì sẽ ra, một vài lỗi hiếm gặp hơn thì ta phải đặt câu hỏi trên Stackoverflow hoặc lê lết trên các group, diễn đàn để hòi

Version control: Git, SVN,… : chắc chắn là khi làm dự án thì chúng ta không thể để code ở máy, khi cần thì copy code gửi qua Mesenger cho nhau hay copy vào USB rồi gửi chim bồ câu đến địa chỉ được, sẽ phải có các trình quản lý phiên bản. Thường thì cứ học Git cho nó cơ bản, vì hầu hết luồng vận hành của các trình quản lý phiên bản đều tương đối giống nhau. Các bạn có thể tham khảo seri học Git của Vietjack, khá đầy đủ và chi tiết tại đây

Đọc và vẽ các loại biểu đồ (diagram) : diagram là công cụ để phác thảo thiết kế của hệ thống, nó giúp chúng ta hình dung ra hệ thống cấu tạo như nào, có các thành phần gì để từ đó lập trình ra một hệ thống chạy đúng với mục đích ban đầu. Chính thế nên việc hiểu về UML rất quan trọng, tránh tình trạng code xong bị sếp gọi vào phòng uống nước chè tâm sự xong được xin chữ ký.

Vân vân và mây mây nhiều những kỹ năng nữa mà mình cũng chưa kịp liệt kê hết, hầu hết chúng đều khá dễ học, chỉ thời gian ngắn là nắm được nhưng sẽ giúp cho việc lập trình của chúng ta dễ thở hơn rất nhiều.

Tóm lại

Nắm vững những kiến thức trên là hoàn toàn đủ cho các bạn tự tin đi apply vị trí Fresher/Junior rồi, đủ để ở level “chỉ đâu đánh đấy”, sếp bảo gì làm nấy, còn để lên cao hơn thì sẽ cần thêm nhiều kỹ năng nữa, hẹn các bạn ở các phần sau nha. 

Trên đây thì cũng chỉ là kinh nghiệp cá nhân của mình, nếu có gì thiếu sót mong các bạn góp ý nha.

Mr.Chí tham gia các hội thảo

[P1: Front-end] Mình đã trở thành Web developer như thế nào?

1misachuyencoder

Phần 1: FRONT-END

Chuyện mình từ một sinh viên “cùi bắp” trở thành một web developer (vẫn cùi bắp nhưng đỡ hơn) như thế nào, hi vọng giúp ích phần nào cho các anh em đang loay hoay học lập trình web mà chưa biết mình cần phải làm gì.

Bắt đầu từ HTML, CSS

Đầu tiên, bắt đầu từ những thứ cơ bản nhất: HTML, CSS. Đây là điều sơ khai mà bất kỳ web dev nào đều phải học và các dev thường dễ bỏ quên nhất. Tưởng dễ à, nhưng không đâu.

Việc set position, display, hay responsive (thiết kế phù hợp với nhiều kích cỡ màn hình) đủ khiến mình vò đầu bứt tai vài ngày đấy. Điều khó nhằn nhất khi làm việc với HTML/CSS đó là rất khó để debug như các ngôn ngữ lập trình. Tất cả có thể làm là set + xem thử mò từng bước một.

Bạn nào có kinh nghiệm gì về debug HTML+CSS thì cùng comment chia sẻ nha!

Hồi đấy mình học cơ bản trên Freecodecamp, đây là một trong những khóa học free tốt nhất về web, dạy rất chi tiết và cực chắc những kiến thức cơ bản, học xong nếu hoàn thành project thì còn có cả Certificate (giấy chứng nhận) nữa. Ngoài ra thì có các khóa của W3School, Khan Academy hay các khóa trên Udemy nữa. Chất lượng cũng ổn, tùy theo các bạn thấy mình hợp với phong cách dạy của trang nào.

Điều quan trọng nữa là bạn phải cực kỳ chú trọng vào phần đặt tên class/id và bố cục file nhé. Đây là yếu tố sống còn khi sau này đi làm doanh nghiệp đấy.

Tiếp theo là javascript

Phần này thì thú vị hơn rồi đấy. Khi này chúng ta sẽ được học cách làm cho các phần tử trong trang web hành xử như thể nào, ẩn hiện, hiệu ứng, xử lý với sự kiện các thứ. Mình vẫn bám theo khóa freecodecamp, học những điều cơ bản xong sau đấy học thêm các thư viện, framework như Jquery, Bootstrap, AngularJS, ReachJS, VueJS,… mình liệt kê ví dụ thế chứ bạn nên học 1-2 cái thôi cho tập trung, cá nhân mình chỉ học đi sâu mỗi VueJS thôi, còn tùy theo nhu cầu của các bạn mà tự lựa chọn cho mình.

Đừng nhảy vào học các thư viện, framework ngay, tuy rằng việc làm việc với chúng sẽ khiến cho mình nhàn hơn rất nhiều, cảm thấy mình nguy hiểm và “pro” hơn nhưng nó sẽ biến mình code máy móc và không hiểu được bản chất vấn đề. Khi gặp lỗi hay vấn đề khó thì sẽ loay hoay không biết giải quyết như nào.

Ngoài ra thói quen import nhiều thư viện vào sẽ khiến trang web trở nên nặng nề hơn rất nhiều. Mình gặp rất nhiều trường hợp import cả 1 thư viện vào chỉ để sử dụng vài hàm của nó, trong khi hoàn toàn có thể xử lý nhẹ nhàng bằng một vài hàm JS tự viết.

Ngoài ra nếu muốn tìm hiểu sâu hơn, các bạn có thể tìm đọc bộ sách You don’t know JS – đây là bộ sách rất nổi tiếng, viết cực kỳ chi tiết và cặn kẽ, tuy nhiên cách viết rất chuyên sâu nên không dành cho người mới nha.

Ngoài ra bí kíp cực kỳ quan trọng đó là thực hành, thực hành thật nhiều, vẽ nhiều màn hình với nhiều yêu cầu phức tạp sẽ khiến tay nghề mình lên rất nhanh. Mình cực kỳ ghét vẽ giao diện, đến bây giờ vẫn thế, thành ra mình chọn những bài thực hành mà mình cảm thấy hứng thú với nó, chứ ngồi vẽ form đăng nhập hay danh sách thì dễ chán.

Ngoài ra thì các bạn có thể làm bất kỳ thứ gì mình thích: blog cá nhân, web tỏ tình tặng crush, web bán hàng để tự bán mấy thứ linh tinh,… miễn là mình thích nó thì mới có động lực để làm và không nhanh chán.

Hôm trước cũng mới nhìn thấy mấy trang có các challenge (thử thách) về front-end cũng hay hay, có cả lời giải của nhiều dev khác ở phía dưới, anh em có thể vào luyện mấy bài này cũng được. https://codier.io/

Trên đây là con đường mà cá nhân mình đã đi, mỗi người có một sở thích khác nhau nên có thể nó sẽ hữu ích với bạn này, không hữu ích với bạn kia. Nếu các bạn thấy lộ trình này hợp và có ích thì hãy comment động viên mình cái nha ^^

#codercodon #chuyencoder

10 cuốn sách phải đọc về Database cho Lập trình viên

database
  • Khoá đào tạo tháng 2 – YOUNG LEADER dành cho các bạn muốn tham gia vào các dự án thực tế, đến gần hơn với vị trí Leader!
  • Đăng ký tại: mily.vn/yleader2020

Database là gì ?

Mỗi ngày, chúng ta gặp gỡ rất nhiều con người, sự vật, sự việc và tiếp cận rất nhiều thông tin thuộc nhiều lĩnh vực trong cuộc sống. Tuy nhiên, chúng ta không cần phải nhớ hết tất cả các thông tin. Từ vô vàn thông tin đó, chúng ta lọc ra những thông tin cần thiết và hữu ích để lưu lại. Đây là data (dữ liệu).

Tuỳ theo từng nhu cầu và mục đích sử dụng, lượng data lưu lại của mỗi người sẽ khác nhau. Hình thức data vô cùng phong phú: chữ viết, con số, kí hiệu, hình ảnh, âm thanh,…

Database (cơ sở dữ liệu) là một tập hợp những data (dữ liệu) có liên quan với nhau . Database được duy trì dưới dạng một tập hợp các tập tin trong hệ điều hành hay được lưu trữ trong các hệ quản trị cơ sở dữ liệu. (Theo Wikipedia)

Những database điển hình là danh sách học sinh trong lớp, bảng chấm công nhân viên, danh sách kiểm kê hàng hoá,…

Fundamentals of Database Systems

Phiên bản này kết hợp các giải thích rõ ràng về lý thuyết và thiết kế cơ sở dữ liệu với phạm vi cập nhật của các mô hình và hệ thống thực. Nó có các ví dụ tuyệt vời và quyền truy cập vào trang web cơ sở dữ liệu của Addison Wesley bao gồm giảng dạy, hướng dẫn và nhiều tài nguyên sinh viên hữu ích.

Donwload tại đây: Fundamentals of Database Systems

Database System Concepts

Dành cho khóa học đầu tiên về cơ sở dữ liệu ở cấp cơ sở hoặc đại học, hoặc tốt nghiệp năm thứ nhất, cấp độ, cuốn sách này bao gồm các khái niệm và thuật toán dựa trên những cơ sở dữ liệu được sử dụng trong các hệ thống cơ sở dữ liệu thương mại hoặc thử nghiệm. Nó nhằm mục đích trình bày các khái niệm và thuật toán này trong một cài đặt chung không bị ràng buộc với một hệ thống cơ sở dữ liệu cụ thể.

Download tại đây: Database System Concepts

Graph Databases

Khám phá cách cơ sở dữ liệu đồ thị có thể giúp bạn quản lý và truy vấn dữ liệu được kết nối cao. Với cuốn sách thực tế này, bạn sẽ học cách thiết kế và triển khai cơ sở dữ liệu đồ thị mang lại sức mạnh của đồ thị mang trên một loạt các vấn đề. Cho dù bạn muốn tăng tốc độ phản hồi của mình đối với các truy vấn của người dùng hoặc xây dựng cơ sở dữ liệu có thể thích ứng khi doanh nghiệp của bạn phát triển, cuốn sách này chỉ cho bạn cách áp dụng mô hình đồ thị không có lược đồ cho các vấn đề trong thế giới thực. 

Download tại đây: Graph Databases

Seven Databases in Seven Weeks: A Guide to Modern Databases and the NoSQL Movement

Hiện nay dữ liệu ngày càng lớn hơn và phức tạp hơn, và các lựa chọn trong việc xử lý dữ liệu đó cũng vậy. Là một nhà phát triển ứng dụng hiện đại, bạn cần hiểu về lĩnh vực quản lý dữ liệu mới nổi, cả RDBMS và NoQuery. Seven Databases in Seven Weeks sẽ đưa bạn đi tham quan một số cơ sở dữ liệu nguồn mở nóng nhất hiện nay. Theo truyền thống Bảy ngôn ngữ của Bruce A.

Tate trong bảy tuần , cuốn sách này vượt xa hướng dẫn cơ bản của bạn để khám phá các khái niệm thiết yếu ở cốt lõi của mỗi công nghệ.

Download tại đây: Seven Databases in Seven Weeks

Modern Database Management

Hoffer tập trung vào các nguyên tắc, khái niệm và công nghệ mới nhất và những gì các học viên hàng đầu nói là quan trọng nhất đối với các nhà phát triển cơ sở dữ liệu. 

Phân tích cơ sở dữ liệu, thiết kế cơ sở dữ liệu, SQL, môi trường cơ sở dữ liệu máy khách / máy chủ, lưu trữ dữ liệu, chất lượng và tích hợp dữ liệu và mô hình hóa dữ liệu hướng đối tượng. 

Dành cho các chương trình phát triển chuyên nghiệp trong quản lý cơ sở dữ liệu giới thiệu. 

Download tại đây: Modern Database Management

Database Security

Cuốn sách này cung cấp một tài khoản chính thức về các vấn đề bảo mật trong các hệ thống cơ sở dữ liệu và cho thấy các hệ thống thương mại hoặc tương lai hiện tại có thể được thiết kế như thế nào để đảm bảo tính toàn vẹn và bảo mật. Nó cung cấp một tài khoản đầy đủ của các mô hình bảo mật thay thế và các biện pháp bảo vệ. Tài liệu tham khảo vô giá này có thể được sử dụng làm văn bản cho các khóa học nâng cao về bảo mật DB.

Download tại đây: Database Security

Access Database Design & Programming

Access Database Design & Programming bao gồm rất nhiều nền tảng một cách nhanh chóng nhưng sáng suốt. Steven Roman bắt đầu với một mô tả về các nguyên tắc chung của thiết kế cơ sở dữ liệu, sau đó mô tả “đại số quan hệ” xác định ý nghĩa của các hoạt động như liên kết và tham gia, giới thiệu cú pháp SQL và cuối cùng đi sâu vào chi tiết sử dụng VBA (Visual Basic cho Ứng dụng ) để viết mã truy cập.

Kết quả là một cuốn sách duy nhất có thể dạy cho bạn tất cả những điều cơ bản về xây dựng các ứng dụng cơ sở dữ liệu trong Access. Các phần của cuốn sách rất nặng với các phương trình logic mà hiệu ứng của chúng có thể khó hình dung, nhưng việc sử dụng dữ liệu mẫu một cách thận trọng của Roman giúp việc theo dõi các thao tác được mô tả dễ dàng hơn nhiều.

Download tại đây: Access Database Design & Programming

Database Processing: Fundamentals, Design, and Implementation

Được thiết kế cho các khóa học về Quản lý cơ sở dữ liệu, Thiết kế, Ứng dụng hoặc Công nghệ. Phiên bản thứ mười này phản ánh nhu cầu của sinh viên và đảm bảo sự phát triển của các kỹ năng thực tế và thị trường. Nó giúp họ tìm hiểu: cách truy vấn dữ liệu và thu được kết quả, bằng cách trình bày SQL Chọn. Nó cung cấp một khuôn khổ để giúp sinh viên học tài liệu này.

Download tại đây: Database Processing: Fundamentals, Design, and Implementation

Beginning Database Design Solutions

Cuốn sách này dành cho các chuyên gia CNTT và sinh viên muốn tìm hiểu cách thiết kế, phân tích và hiểu cơ sở dữ liệu. Tài liệu này sẽ mang lại lợi ích cho những người muốn có sự hiểu biết cao hơn về cơ sở dữ liệu như người quản lý đề xuất, kiến ​​trúc sư, người quản lý dự án và thậm chí là khách hàng.

Tài liệu này cũng sẽ có lợi cho những người thực sự sẽ thiết kế, xây dựng và làm việc với các cơ sở dữ liệu như người thiết kế cơ sở dữ liệu, người quản trị cơ sở dữ liệu và lập trình viên. Trong nhiều dự án, các vai trò này chồng chéo lên nhau để cùng một người có thể chịu trách nhiệm thực hiện đề xuất, quản lý một phần của dự án và thiết kế và tạo cơ sở dữ liệu. Cuốn sách này nhằm vào các chuyên gia CNTT và sinh viên thuộc mọi cấp độ kinh nghiệm. Nó không cho rằng bạn có bất kỳ kinh nghiệm nào trước đây với cơ sở dữ liệu hoặc chương trình sử dụng chúng. Nó không’ thậm chí cho rằng bạn có kinh nghiệm với máy tính. Tất cả những gì bạn thực sự cần là sự sẵn sàng và mong muốn học hỏi.

Download tại đây: Beginning Database Design Solutions

Database Security and Auditing: Protecting Data Integrity and Accessibility 

Được thiết kế để dễ học, văn bản này được chia thành ba phần: Bảo mật, Kiểm toán và Thực hiện. Học sinh sẽ hiểu đầy đủ cách thực hiện bảo mật cơ sở dữ liệu trên cơ sở dữ liệu kinh doanh hiện đại bằng cách sử dụng các kịch bản thực tế và các ví dụ từng bước trong toàn bộ văn bản. Mỗi chương kết thúc với các bài tập và một dự án thực hành để củng cố và giới thiệu các chủ đề đã học.

Chương cuối cùng của cuốn sách cho phép sinh viên áp dụng kiến ​​thức của mình trong bài trình bày về bốn trường hợp thực tế sử dụng bảo mật và kiểm toán. 

Download tại đây: Database Security and Auditing: Protecting Data Integrity and Accessibility

Sưu tầm & chỉnh sửa

Review Headfirst C# – quyển sách thú vị để bắt đầu học C#

Review Headfirst C#

Sách lập trình có vô vàn, nhưng bạn nên đọc những cuốn phù hợp với bản thân. Bài viết này sẽ review về cuốn Headfirst C# – quyển sách thú vị để bắt đầu học C# .

Đây là quyển sách mình đã dùng khi mới bắt đầu học C#, dạo này phải quay lại code C# nên phải đọc lại, nhân tiện viết một bài review để anh em nào đang cần thì có thể tham khảo.

Quyển này rất tốt để bắt đầu cho những bạn mới học lập trình (có thể là không biết gì)

Sách rất dày, dành cho những bạn học thực sự nghiêm túc và kiên trì (hơn 900 trang), ngày xưa mình vừa đọc vừa thực hành trên project mất khoảng 3 tháng, nếu các bạn sinh viên thì học vừa đủ trong 1 học kỳ là okie. Các bạn có tư chất cao và tập trung thì có thể học nhanh hơn 

Nội dung sách chi tiết, thú vị với nhiều ảnh minh họa

Về nội dung, sách cung cấp chi tiết và cặn kẽ về các vấn đề cơ bản của C# nói riêng và lập trình, lập trình hướng đối tượng nói chung. Rất dài và cực kỳ nhiều ví dụ. Đặc biệt là văn phong viết rất dễ hiểu và từ ngữ đơn giản, hồi đấy mình trình độ cũng mới qua xóa mù chữ Tiếng Anh thôi mà đọc cũng hiểu được kha khá, thỉnh thoảng mới cần đến google dịch.
Điều mình thích nhất là những câu chuyện và ảnh minh họa trong sách, rất nhiều hình ảnh luôn, khiến cho việc nhìn vấn đề trực quan hơn rất nhiều. Tất cả những gì chúng ta được học sẽ được lồng ghép vào những câu chuyện của tác giả như viết chương trình chuẩn bị tiệc để hiểu về dữ liệu, viết chương trình giúp ong chúa quản lý đàn ong để hiểu về interface,… cùng với đống hình trông như tranh biếm họa trên Tuổi trẻ cười càng đọc càng cuốn.
Giọng văn đọc đúng kiểu như một ông bựa bựa đang ngồi kể cho mình chứ không hàn lâm buồn ngủ như sách giáo trình, thế nên sách dài nhưng đọc không bị chán.
Sách cực kỳ nhiều ví dụ, chủ đề nào cũng có ví dụ để code luôn, sau một phần (khoảng vài chương) lại có một project lớn để vận dụng tổng hợp, làm cũng động não nhiều phết. Nếu thích bạn cũng có thể sáng tạo ra thêm nhiều cách giải của riêng mình để hiệu quả hơn. À về phần này thì mình khuyên anh em nên dùng các tool giống với tác giả để dễ làm nhất. Tool đời sau thì có một vài điểm khác có thể sẽ gây lúng túng đôi chút.

Sách gồm 16 chương – hướng dẫn bạn từng bước xây dựng ứng dụng hoàn chỉnh

Về nội dung, phần đầu của sách nói về những khái niệm cơ bản nhất của lập trình nói chung, như cách một chương trình hoạt động thế nào, các công đoạn design, code, deploy lần lượt,… Cách khai báo biến, các kiểu dữ liệu, rẽ nhánh, vòng lặp,.. Các bạn chưa biết gì về lập trình đọc phần này thì cũng hiểu được đôi chút, nhưng mình khuyên là nên tìm hiểu thêm sâu hơn về các khái niệm này. Tác giả cũng hướng dẫn rất chi tiết từ cách cài phần mềm, cách cấu hình như nào cho đến từng thao tác một, thậm chí là từng cái icon, button dùng để làm gì,…
Các chương giữa nói về lập trình hướng đối tượng. Đây là phần mình thích nhất và cảm thấy có giá trị nhất. Nói rất chi tiết về các khái niệm cơ bản như đối tượng là gì, tại sao phải lập trình theo đối tượng, cho đến đi sâu vào 4 tính chất cơ bản của hướng đối tượng. Ngày xưa mình cũng đọc giáo trình hướng đối tượng trên lớp mãi không hiểu, đọc sang quyển này phát hiểu ngay 

Các chương tiếp theo nói thêm về những thứ hay dùng trong trong lập trình như Enum, Queue, Stack, File, XAML, Exception, Dispose,… Phần này thì nâng cao hơn một chút, nên đọc để biết nhưng nếu muốn làm chủ được về nó thì nên tự tìm hiểu thêm bên ngoài sau.
Phần cuối nói về các thứ chuyên sâu hơn nữa như LINQ, mô hình MVVM, build một Windows Phone app,… Mấy chương này đọc thì cũng được, nhưng các nhân mình thấy những chủ đề này quyển này viết không hay lắm, nên tìm đọc những quyển chuyên sâu hơn. (Ngoài ra còn nhiều cái không hữu ích như WP app chẳng hạn)

Sách thích hợp cho các bạn sinh viên/intern đang học C#

Tóm lại, đọc và hiểu được quyển này sẽ cung cấp đủ cho các bạn có kiến thức trở thành một Intern/Fresher lập trình C#. Có thể viết một cái funtion hay làm các app đơn giản, có cái để mà chém gió với Interviewer. Sách thích hợp cho các bạn sinh viên/intern đang học C#.
Ngoài ra thì có nhiều quyển khác cũng thuộc seri Head First như HF Java, HF HTML, HF SQL,… đọc với cách viết cũng gần tương tự, các bạn nào thích kiểu sách vui vui bựa bựa mà vẫn nhiều kiến thức như này có thể đọc thêm.

Link tải sách: https://app.box.com/s/i7wtqwsfq0ira3rl8z5i7g25l767fdmt

Trong một biển sách lập trình, chẳng đủ sức để đọc hết được, vậy nên anh em có những cuốn sách khác thú vị hơn thì có thể comment chia sẻ cùng giao lưu học hỏi nha.

Tạ Tô Minh Chí

Giới thiệu về Lập trình hướng đối tượng

Xin chào các bạn, chủ đề hôm nay mình muốn chia sẻ với các bạn là “Giới thiệu về lập trình hướng đối tượng”. Chắc hẳn khái niệm này vô cùng quen thuộc với các bạn rồi phải không vì chúng ta đã được làm quen từ hồi năm nhất, năm hai đại học rồi. Hôm nay chúng mình cùng ôn lại kiến thức nhé! Tuy nhiên để thực sự hiểu OOP là gì thì chúng ta hãy bắt đầu từ lịch sử của quá trình lập trình, xem xét OOP đã tiến hóa như thế nào. Let’s Gooooo!!!

1. Sự tiến hóa của các phương pháp lập trình

1.1 Lập trình không có cấu trúc

  • Là phương pháp xuất hiện đầu tiên. Phương pháp này đơn giản chỉ là viết tất cả mã lệnh vào 1 hàm main duy nhất và chạy.
  • Ngôn ngữ dược sử dụng trong phương pháp này là Assembly.
  • Nhược điểm: Chỉ sử dụng biến toàn cục, rất tốn bộ nhớ; Khó hiểu, khó bảo trì, khó phát triển ứng dụng lớn.

1.2 Lập trình có cấu trúc

Sau một thời gian tồn tại, người ta dần nhận ra những nhược điểm của phương pháp trên và đưa ra phương pháp đó là chia chương trình lớn thành các chức năng, mỗi chức năng được đưa vào 1 hàm. Khi cần dùng đến chức năng nào thì sẽ gọi hàm tương ứng. Vào cuối các năm 1960 và 1970, ngôn ngữ lập trình có cấu trúc ra đời.

  • Ưu điểm: Chương trình được module hóa, dễ hiểu, dễ bảo trì, dễ dàng tạo ra các thư viện.
  • Nhược điểm: Dữ liệu và xử lý tách rời. Khi cấu trúc thay đổi dẫn đến thuật toán thay đổi,…

1.3 Lập trình hướng đối tượng

Với mong muốn xây dựng một phương pháp lập trình trực quan, mô tả trung thực hệ thống trong thực tế vì thế phương pháp lập trình hướng đối tượng ra đời. Chúng ta cùng tìm hiểu nhé!

2. Lập trình hướng đối tượng

Lập trình hướng đối tượng ( Object-oriented programming gọi tắt là OOP) hay chi tiết hơn là Lập trình định hướng đối tượng, chính là phương pháp lập trình lấy đối tượng làm nền tảng để xây dựng giải thuật, xây dựng chương trình.

2.1 Hướng đối tượng là gì?

Hướng đối tượng giống như tên gọi của nó là hướng vào một đối tượng, nghĩa là nó có động cơ được xác định từ trước. Lập trình hướng đối tượng là kỹ thuật lập trình nhằm vào sự tương tác giữa các đối tượng.

Mỗi đối tượng (Object) có những thuộc tính ( Property), những phương thức (Method) các định các chức năng của đối tượng. Bên cạnh đó, đối tượng cũng có khả năng phát sinh các sự kiên (Event) khi thay đổi thông tin. Tất cả những thuộc tính, phương thức và sự kiện tạo nên cấu trúc của đối tượng.

Một ngôn ngữ được coi là ngôn ngữ lập trình hướng đối tượng nếu đáp ứng đủ 4 tính chất sau:

  • Tính đóng gói (Encapsulation)
  • Tính trừu tượng (Abstraction)
  • Tính kế thừa (Inheritance)
  • Tính đa hình (Polymorphism)

2.2 Ưu điểm của lập trình hướng đối tượng

  • Dữ liệu không bị thay đổi trong chương trình như lập trình cấu trúc.
  • Khi thay đổi cấu trúc dữ liệu của một đối tượng, không cần thay đổi các mã nguồn của các đối tượng khác mà chỉ cần thanh đổi một một số hàm thành phần.
  • Có thể sử dụng lại mã nguồn qua kế thừa .
  • Phù hợp các phần mềm phức tạp, lớn.
  • Được đánh giá là dễ học, năng suất, đơn giản, dễ bảo trì, dễ mở rộng…

2.3 Tại sao sinh ra nó?

Khi bạn đọc đến dòng này rồi thì chắc bạn cũng đã hiểu, ta không thể lập trình một cái gì đó lớn hơn và rộng hơn nếu ta không sử dụng OOP trong dự án của chúng ta. Đúng vậy, Lập trình Hướng đối tượng được sinh ra giúp ta lập trình vững chắc từng bước một và dễ dàng chia sẻ nhiệm vụ cho mỗi người trong một đội nhóm, dễ dàng bảo trì hệ thống. Đem lại sự yên tâm khi build và sự rõ ràng khi tìm lỗi. Nói chung, nếu bạn áp dụng OOP vào dự án của bạn, bạn sẽ ngủ ngon hơn và có thời gian đi chơi với Gấu mà không bị đau đầu.

Ý nghĩa giữa cuộc sống và lập trình hướng đối tượng?

Liên tưởng từ lập trình trong máy tính ra lập trình trong cuộc sống. Có rất nhiều điểm tương đồng.

Trong cuộc sống hàng ngày, ta có thể làm những điều ta muốn một cách tuyến tính hay một cách có hệ thống. Đó là tùy ở bạn. Khi bạn lên một kế hoạch cụ thể, tức là bạn làm cho cuộc sống của bạn có mục tiêu, đối tượng rõ ràng. Cuộc sống của bạn ví như một hệ thống lớn mà nếu bạn design theo cảm tính ngay từ đầu mà không đặt ra những  mục tiếu rõ ràng ( hướng đối tượng) bạn sẽ gặt lại những thứ không rõ ràng. Đến một lúc nào đó, bạn sẽ không kiểm soát được cuộc đời mình nữa và tương lai bạn sẽ nằm lại trong bàn tay người khác.

Hãy áp  dụng hướng đối tượng vào cuộc sống và tự thiết kết cuộc đời mình nhé!!!!

Làm chủ Google Chrome DevTools và các chức năng Call Stack, Watch, Scope

1. Giới thiệu và cách mở công cụ DevTools

Kỹ năng debug là một kỹ năng nền tảng không thể thiếu của bất kỳ một lập trình viên nào. Debug không chỉ để tìm và sửa lỗi, mà còn giúp lập trình viên hiểu rõ hơn luồng của chương trình. Qua đó cải thiện kỹ năng code của mình và chất lượng chương trình thông qua các lỗi đã được sửa.

Google Chrome là một trình duyệt web được giới lập trình viên ưa chuộng vì nhanh, tiện lợi, đồng bộ và sở hữu công cụ Developer Tools vô cùng mạnh mẽ. Bài viết này sẽ giới thiệu cơ bản về công cụ DevTools, cách sử dụng các chức năng Call Stack, Watch, Scope trong công cụ này.

Một vài cách mở DevTools dễ thực hiện như sau:

  • Ctrl + Shift + I.
  • F12.
  • Chuột phải => Kiểm tra phần tử (Inspect).

Bạn chuyển qua Tab Sources sẽ là nơi bạn thực hành debug sau này.

  1. List các Source files (HTML, Javascript, CSS, …).
  2. Hiển thị nội dung file source hiện tại.
  3. Control buttons và thông tin trong quá trình debug.

2. Các chức năng cơ bản

Break points:

Break point màu xanh

Breakpoints là vị trí mà chương trình sẽ dừng lại để lập trình viên xem xét sự thay đổi qua từng biến, qua từng dòng lệnh, từ đó phát hiện ra vị trí dòng code lỗi.

Có thể đặt nhiều Breakpoint trong chương trình. Trên Chrome Developer Tools, để đặt breakpoints, đơn giản chỉ cần click vào line number. Hoặc bạn có thể đặt debugger trong JavaScript

Các lệnh điều khiển cơ bản:

  • Resume F8: Chương trình sẽ tiếp tục chạy cho đến khi gặp 1 breakpoint khác (nếu có).
  • Step over F10: Chạy từng dòng lệnh, nhưng sẽ không nhảy vào trong các hàm khác.
  • Step into F11: Chạy từng dòng lệnh như Step over, nhưng sẽ nhảy vào từng dòng lệnh trong các hàm khác.
  • Step out Shift+F11: Thoát khỏi hàm hiện tại đang debug.
  • Step F9: Chạy từng dòng lệnh.
  • Deactive breakpoint: Tắt hêt các điểm breakpoint.
  • Pause on exception: Tự động dừng khi xảy ra ngoại lệ.

Bây giời, mình sẽ cùng tìm hiểu về phần chính của bài viết này.

3. Call Stack

JavaScript là một ngôn ngữ đơn luồng, cũng có nghĩa là nó chỉ có một Call Stacklà một cấu trúc dữ liệu dạng ngăn xếp (stack) dùng để chứa thông tin về hoạt động của chương trình, danh sách các hàm được gọi lúc thực thi chương trình.
Khi bạn chạy debug code theo cách nhảy từng dòng lệnh, thì Chrome DevTools cung cấp cho bạn 1 Call Stack pane. Do đó khi bạn debug/step đến một function A, thì A sẽ được push (on top) vào Call Stack. Sau khi thực thi hàm A xong và trả về kết quả thì A sẽ bị pop ra khỏi stack.

Ví dụ cơ bản giúp thông não:

Có đoạn code sau:

Khi selector ‘.TruongBatBuoc’ thoả mãn sự kiện thì sẽ chạy hàm CheckInput(). Mình đặt break point vào hàm CheckInput() thì ta được Call Stack như sau:

Call Stack

Tiếp tục F11 để chạy từng dòng và quan sát của hàm CheckInput(), vì trong hàm CheckInput() có gọi hàm validateEmail() nên con trỏ chuyển vào hàm này và nó được push vào top của Call Stack:

Con trỏ chuyển vào hàm validateEmail()
Hàm validateEmail() được push vào Call Stack

Và giống như những Stack, sau khi thực hiện hàm phía trên cùng xong thì nó sẽ bị pop ra khỏi Call Stack. Khi nhìn vào Call Stack ta còn biết được hàm đó nằm ở file JS nào, dòng thứ bao nhiêu. VD: ảnh trên hàm dispatch() nằm ở file jquery.js và ở dòng thứ 5226 trong file.

4. Watch

Watch là một chức năng của Chrome DevTools cho phép bạn dễ dàng quản lý biến trong chương trình của mình. Bạn sẽ không phải dùng đến Tab Console để kiểm tra các biến khi đang debug ở Tab Sources vì Watch sẽ giúp bạn quản lý dễ dàng hơn, tiện lợi và không cần chuyển qua lại giữa các Tab.

Thêm biến

Để thêm một biến vào Watch list, bạn chọn vào biểu tượng thêm phía bên phải của khung Watch. Sau đó nhập tên biến và ấn Enter để thêm.

Trình theo dõi sẽ cho bạn thấy giá trị cụa biến được thêm vào. Nếu biến chưa được đặt hoặc không thể tìm thấy thì nó sẽ hiển thị <not availiable> ở phần giá trị.

Cập nhật biến

Khi bạn đang thực hiện debug trên Chrome, các giá trị biến sẽ tự động cập nhập trong khung Watch. Bạn cũng có thể cập nhật lại trị thủ công giá trị của các biến bằng cách nhấn nút refresh cạnh nút thêm biến.

Xóa các biến khỏi danh sách

Sẽ có thể có những biến bạn không muốn quản lý nữa. Bạn có thể cần xóa các biến ra khỏi Watch list để tối ưu và làm việc nhanh hơn. Bạn có thể xóa bằng cách di chuột vào biến, sau đó nhấp vào icon loại bỏ ở bên phải. Hoặc chuột phải rồi chọn Delete watch expression.

5. Scope

Khi bạn debug, khung Scope hiển thị cho bạn các thuộc tính, biến được xác định tại thời điểm đó.

Khung Scope chỉ hiển thị dữ liệu khi đang ở trong chế độ debug. Khi chương trình chạy bình thường thì khung Scope trống.

Khung Scope hiển thị các thuộc tính và các biến xác định ở phạm vi Local, Closure và Global.

Có thể quản lý các đối tượng được tạo ra nếu viết JS OOP.

Scope và Watch đều rất hữu ích, tiện dụng. Theo mình điểm khác nhau của 2 chức năng này là:

  • Scope: thì chỉ có thể theo dõi được các thuộc tính, biến và đối tượng không cần thêm thủ công.
  • Watch: có thể theo dõi được các hàm, nhưng cần thêm thủ công. Nhưng khi dừng debug, trong một số trường hợp giá trị vẫn được lưu lại ở khung Watch.

Bài viết dựa trên những rì mình từng trải và tham khảo ở https://developers.google.com.

Mình là Hùng, sinh viên năm 3 của UET. Số đo 4 vòng của mình là 50-100-50-20cm=)). Mong mọi người xem sẽ không cà khịa mình vì bài viết quá hay :3 Bye!!!

Vòng lặp trong JavaScript và sự thấu hiểu phụ nữ.

I. Lời mở

Có người nói rằng Code cũng như một người con gái vậy, đôi khi họ là tuýp người nóng nảy breakpoint hiện đầy trên trán, họ có thể đưa ra những lời nóng nảy mà chảy ra bug;  có lúc họ lại hiền hòa, êm dịu biết chiều lòng người. Dù là tuýp người nào thì việc khởi đầu và tiếp cận với một người phụ nữ là khó, không phải ai cũng làm được. Một lập trình viên một khi đã làm chủ được những dòng code, họ hiểu được mình đang kiến tạo những gì, họ biết vấn đề cần giải quyết ở đâu, họ nâng lên được thì họ có thể đặt xuống được. Vì vậy qua bài viết này, mình mong mọi người sẽ có một cái nhìn mới mẻ về hành trình code dạo của một lập trình viên cũng như tích lũy thêm hành trang để có thể chinh phục cô nàng thú vị JavaScript này nha. 

Chủ đề của hôm nay đó là: vòng lặp.

II. Hiểu nàng

Đầu tiên bản thân chúng ta phải thể hiện được sự quan tâm, thể hiện được thành ý của mình với nàng. Bạn chào buổi sáng hàng ngày, bạn nhắn tin chúc ngủ ngon mỗi tối. Bạn, chính bạn đang nằm trong một vòng lặp hàng ngày do chính bạn tạo ra. JS cũng có những vòng lặp, vòng lặp sinh ra là để giúp chúng ta thực hiện những thao tác lặp lại mà không phải viết nhiều dòng mã cồng kềnh. Những dòng mã cồng kềnh sẽ khó để thấu hiểu, khó để chỉnh sửa hệt như phụ nữ vậy. Và tất nhiên bất kì một hành động gì trong nhân gian đều là điều kiện ảnh hưởng lẫn nhau, tác động đến hành động lặp của bạn. Khi chúng ta kiến trúc một vòng lặp, bạn cần phải lưu ý đến điều kiện của vòng lặp (thứ tác động đến hành động lặp). Các vòng lặp sẽ dừng lại hay chuyển hướng gọi hàm khác khi đáp ứng đủ điều kiện mà bạn đưa ra.

Ảnh minh họa
Ví dụ: khi bạn có một loạt các ý tưởng để mở lời tại sao không thử hết các trường hợp.

Ảnh minh họa
Và ta được kết quả như sau

Như bạn thấy đấy thay vì bạn phải mất thời gian nhập từng dòng tin nhắn thì bạn chỉ cần có một vòng for() việc viết 1 lúc nhiều tin nhắn sẽ dễ dàng hơn. Đó chính là ý nghĩa của vòng lặp trong JS.
Vòng lặp trong JS có thể chia làm 2 dạng được dùng rộng rãi: vòng lặp for() và vòng lặp while()
for() sẽ hữu dụng khi bạn muốn chạy những cụm mã nhiều lần với những giá trị khác nhau cho mỗi lần. Như ở ví dụ trên mỗi lần mình lặp lại là một giá trị khác của tin nhắn.

  • Vòng lặp for() sẽ bao gồm những dạng:
    • for lặp lại hành động nhiều lần.
    • for/in lặp lại hành động theo các thuộc tính (properties) của đối tượng (object).
    • for/of lặp lại hành động thông qua các giá trị của một đối tượng (object).

while() sẽ hữu dụng khi bạn muốn chạy những cụm mã trong khi điều kiện bên trong ngoặc vẫn đúng.

Ảnh minh họa
Điều kiện trong ngoặc được đưa ra là (i<4) miễn là khi (i<4) việc lặp vẫn được tiếp tục và ta sẽ được kết quả:
Ảnh minh họa
  • while() sẽ bao gồm những dạng sau:
  • while và do/while lặp lại hành động trong khi điều kiện đưa ra vẫn đúng.

III. Hành động tốt

Một khi bạn đã nắm bắt được rằng: “ À thì ra JS có vòng lặp, mục đích của vòng lặp sinh ra để làm gì, có những vòng lặp nào” thì  bạn đã qua giai đoạn hiểu nàng. Tiếp tới, dựa vào những gì chúng ta biết được mà tấn công thể hiện bản thân thôi.

A. Hành động tốt For()

Ảnh minh họa
  1. Statement 1: được thực hiện một lần duy nhất khi bắt đầu vòng lặp. 
  2. Statement 2: xác định điều kiện để thực thi việc lặp. Đây sẽ là chốt chặn để việc lặp có được tiếp tục hay không.
  3. Statement 3: được thực thi mọi lúc trong suốt vòng lặp.
Ảnh minh họa
Bạn hãy thử test để biết kết quả xem!!!

Ví dụ: để in ra nỗi niềm tâm tư như ví dụ trước bạn có thể dùng for thay vì while: với Statement 1 thiết lập giá trị đầu cho i trước vòng lặp và chỉ thực hiện 1 lần duy nhất.
– Statement 2 xác định điều kiện để vòng lặp hành động. Khi tình yêu chưa tới được 3000.
– Statement 3 tăng giá trị tình yêu lên 1000 sau mỗi vòng lặp cho đến khi tình yêu của bạn đủ 3000.

Một vài chú ý cho hành động tốt for() mà mình nghĩ bạn nên biết:
– Statement 1 có thể có hoặc không, công nàng JS này không quan tâm điều kiện ban đầu của bạn là gì, chỉ cần bạn biết nắm bắt thời cơ ghi điểm là ok. Thay vì khai báo i = 0; bạn có thể khai báo từ ban đầu khi khởi tạo: var i = 0; thế là ta bỏ qua được Statement 1 rồi. 

Ảnh minh họa


– Statement 2 dùng để đánh giá biến điều kiện mà bạn đã khởi tạo để quyết định dừng vòng lặp hay không. Statement 2 cũng có thể có hoặc không, nếu bạn không muốn để Statement 2 thì bạn có thể sử dụng câu lệnh điều kiện (if/then/else) và break; để dừng vòng lặp đúng lúc. Nếu không có lệnh dừng thì vòng lặp sẽ là vô hạn, ảnh hưởng xấu tới browser cũng như là mã lệnh của bạn. Không cô gái nào thích những chàng trai nói liên tục mà!!
– Statement 3 có thể có hoặc không, nó cũng dùng để cài đặt giá trị sau mỗi lần lặp cho biến điều kiện. Bạn có thể cài đặt giá trị cho biến i ở bên trong vòng for() thay cho Statement 3.
– Tuy nhiên dù là trường hợp nào thì vòng lặp for() cần ít nhất một Statement trong 3 Statement. Một vòng lặp for() không có Statement là một vòng lặp vô nghĩa và không chạy được.

Ảnh minh họa
↦ tình yêu này sẽ không đi về đâu!!

B. Hành động tốt for/in

Khi được bạn tiếp cận, người phụ nữ sẽ có những cái nhìn tổng thể về bạn qua đánh giá, con gái thường yêu bằng mắt mà. Ví dụ cô nàng này đã đưa ra các đánh giá bên ngoài về anh Đạt và liệt kê lại.

Ảnh minh họa
Ảnh minh họa
Và đây là kết quả sau khi chạy mã.

for/in sử dụng để lặp lại/ sử dụng các thuộc tính trong một đối tượng lần lượt. Bạn nên dùng for/in khi muốn gọi ra các thuộc tính(properties) của một đối tượng (Object) mà không phải gọi từng thuộc tính một bằng cách Object[properties]. Như ở trên anh Đạt có những đặc điểm: Tên, tuổi, số đo 4 vòng.

C. Hành động tốt for/of

  1. Cô gái bạn chọn có một list anh trai mưa mà bạn cần phải biết tên và làm thân.
Ảnh minh họa
Đối tượng được dùng cho for/in có thể là một mảng(Array), một xâu(String), Maps, NodeList,….
Vòng lặp này sẽ có ích cho việc liệt kê từng phần tử của một đối tượng.
Và đây là kết quả thu được.

D. Hành động tốt while và hành động tốt do/while

Cả hai hành động tốt này đều có kiểu cấu trúc giống nhau:

Ảnh minh họa
While()
Ảnh minh họa
do while()

Chú ý rằng condition bên trong dấu ngoặc là không thể không có vì nó là điều kiện để vòng lặp chạy.
Điều khác biệt duy nhất giữa 2 hành động tốt này đó chính là:
– Với vòng lặp while() mã lệnh sẽ được thực hiện sau khi điều kiện đưa ra được thỏa mãn.
– Với vòng lặp do/while() mã lệnh sẽ thực hiện một lần trước khi kiểm tra. Có nghĩa là khi điều kiện trả về trong condition là false đoạn mã lệnh bên trong do{} vẫn có thể chạy ít nhất 1 lần nữa trước khi vòng lặp được dừng. Như khi cô nàng này muốn dừng cuộc nói chuyện mà bạn vẫn cố gắng nhắn nốt dòng tin cuối. Trong vài trường hợp thì điều này là không cần thiết và có thể khiến kết quả đưa ra không như ý.
Để minh họa cho sự khác nhau này mình xin đưa ra ví dụ sau:

Ảnh minh họa
Ở đây mình khởi tạo i = 1 và in ra màn hình và tăng giá trị sau mỗi lần lặp
Ảnh minh họa
Và kết quả in ra được 9 số từ 1 tới 9.

Còn nếu sử dụng do/while() với mục đích tương tự:

Ảnh minh họa

Kết quả thu được sau khi dùng vòng lặp do while là:

Ảnh minh họa

Đó, trước khi điều kiện (i<10) được trả về false thì phần mã trong thân vòng lặp đã được thực hiện và in ra The number is 10. 
Gợi ý của mình đưa ra là tùy vào trường hợp xử lý điều kiện các bạn nên chọn cho mình vòng lặp phù hợp nhất. Phải có lúc nhu có lúc cương thì đại nghiệp mới có thể thành công.

IV. Lời kết

Và đó là những gì mình có thể đem tới cho các bạn trong lần này. Mong rằng qua bài này các bạn sẽ hiểu rằng vòng lặp sinh ra với mục đích thực hiện những công việc cần lặp lại nhiều lần dễ dàng hơn. Cùng với đó là biết cách lựa chọn những vòng lặp cho mình vào từng trường hợp để tối ưu hóa kết quả mong muốn.
Câu cuối dành cho các bạn, trong những kì quan trên thế giới, phụ nữ là điều khó nắm bắt nhất, khó để thấu hiểu nhất vì vậy những lập trình viên như chúng ta cần phải chăm chỉ mày mò tìm hiểu, cần phải kiên trì thì mới đơm được trái ngọt cuối cùng.

[JavaScript] Constructor pattern trong lập trình hướng đối tượng

Trong các ngôn ngữ lập trình hướng đối tượng, một constructor là một phương thức đặc biệt sử dụng để khởi tạo một object dựa trên một class. Trong JavaScript, khi mà mọi thứ gần như đều là một đối tượng, thì chúng ta rất thường xuyên phải sử dụng đến object constructor.

Object constructor được sử dụng để khởi tạo nên một object riêng biệt. Nó có 2 chức năng chính đó là tạo nên object để sử dụng sau đó, cũng như nó cũng có thể nhận vào các đối số để thiết lập các giá trị thuộc tính cho object được khởi tạo.

1. Các cách tạo một đối tượng

Có 3 cách tạo nên một object trong JavaScript

//Khởi tạo một object và là một object rộng 

var object = {};

var object = Object.create(Object.prototype);

var object = new Object();

Ở ví dụ hàm khởi tạo object sử dụng từ khóa new, có thể sẽ tạo nên một object có giá trị cụ thể nếu như truyền tham số khi khởi tạo hoặc không có tham số truyền vào thì nó sẽ tạo nên một object rỗng và trả lại.

Vì vậy đối với lập trình hướng đối tượng JavaScript, cách đơn giản nhất để tạo mới một object là sử dụng function kết hợp với từ khoá new. Bên trong hàm khởi tạo này, từ khoá this dùng để chỉ tới đối tượng mới. Thông thường, hàm khởi tạo được viết hoa chữ cái đầu tiên, dùng để phân biệt với các hàm số thông thường. Sau đây, tìm hiểu về một vài Constructor Pattern trong JavaScript.

2. Constructor Pattern cơ bản

function Person(name, age){
     this.name = name;
     this.age = age;
     this.information = function(){
           return this.name + " is " + this.age + " years old";
     };
}

var father = new Person("Manh", 30);
var mother = new Person("Thang", 25);

console.log(father.information()); // Manh is 30 years old
console.log(mother.information()); // Thang is 25 years old

Ở ví dụ trên, ta khởi tạo Person sẽ có 2 thuộc tính name, age và có một phương thức information dùng để in thông tin của đối tượng Person. Tuy nhiên, ở cách trên có nhược điểm là khó để kế thừa và khi mỗi đối tượng khác sử dụng thì phải định nghĩa lại phương thức information. Để khắc phục nhược điểm trên thì có thể sử dụng Contructor Pattern với Prototypes.

3. Constructor Pattern với Prototypes

Trong JavaScript, mọi object trong đó gồm có cả function đều tồn tại thuộc tính prototype – cũng là một object. Khi sử dụng hàm khởi tạo để tạo mới một object, mọi thuộc tính trong prototype đều được kế thừ cho các đối tượng mới.

function Person(name, age){
     this.name = name;
     this.age = age;
}
Person.prototype.information = function(){
     return this.name + " is " + this.age + " years old";
}

var father = new Person("Manh", 30);
var mother = new Person("Thang", 25);

console.log(father.information()); // Manh is 30 years old
console.log(mother.information()); // Thang is 25 years old

4. Constructor Pattern với từ khóa class

Sử dụng class cho phép khởi tạo đối tượng mới một cách trực quan, và gần với khái niệm class trong các ngôn ngữ lập trình khác như C++, Java,…

Một điểm khác giữa class và function là function thuộc dạng hoisting, còn class thì không. Nghĩa là bạn có thể sử dụng hàm số trước khi khai báo hàm. Trong khi nếu bạn sử dụng class trước khi khai báo class thì bạn sẽ nhận được thông báo lỗi ReferenceError.

class Person {
     constructor(name, age){
         this.name = name;
         this.age = age;
     }

     information(){
          return this.name + " is " + this.age + " years old";
     };
}

var father = new Person("Manh", 30);
var mother = new Person("Thang", 25);

console.log(father.information()); // Manh is 30 years old
console.log(mother.information()); // Thang is 25 years old

Trong class, có một hàm duy nhất và đặc biệt là constructor, đây là hàm khởi tạo của class. Trong hàm này bạn có thể định nghĩa các thuộc tính (nameage) giống như sử dụng function và phương thức (information). Ngoài ra, bạn có thể định nghĩa các gettersetter và các hàm static.

[CSS] Tái sử dụng CSS hiệu quả.

Tái sử dụng code trong lập trình luôn được coi là tiêu chí hàng đầu. Nó là nguyên nhân sự phổ biến của lập trình hướng đối tượng cùng với các ngôn ngữ thiết kế cho OOP như: C++, Java, C#,… Bằng việc sử dụng lại các lớp, các hàm giúp lập trình viên tiết kiệm vô số dòng code và thời gian.

Khác xa OOP, với CSS việc tái sử dụng(TSD) đơn giản vô cùng, không yêu cầu sự chính xác về số lượng tham số, kiểu dữ liệu,… Trái lại sự thiếu chặt chẽ mang theo nhiều nguy cơ phía sau một giao diện đẹp.

TSD kém khiến bạn phải viết lại rất nhiều dòng CSS. Một ngày đẹp trời sự chồng chéo những thuộc tính ấy sẽ làm trang web của bạn xô lệch, màu sắc không như ý muốn, nội dung chèn lên nhau thậm chí biến mất một vài thành phần của trang.

Thực hiện những bước cơ bản sau giúp bạn tối ưu khả năng TSD CSS của bạn.

1. Bạn cần chia code CSS ra thành nhiều file và nhúng vào khi cần thiết.

  • Xác định trước những thành phần lặp lại nhiều lần trong trang web, những đối tượng cần sự đồng nhất về thiết kế.
  • Tạo ra file CSS riêng cho chúng.

2. Đừng dùng ít class có nhiều thuộc tính hãy dùng nhiều class có ít thuộc tính.

Lấy ví dụ với các button tách riêng class để thiết lập những thuộc tính chung như padding, border, font-size,…Và sử dụng các class khác để thiết lập thuộc tính riêng.

3. Tạo ra file CSS của riêng mình.

Hãy tạo một file CSS với những class có những thuộc tính thường dùng như là căn lề cho text, màu background, màu chữ, border hay cả box-shadow… Bạn có thể mang file này đi bất cứ đâu để sử dụng.

4. Sử dụng các CSS framework.

TSD CSS từ các framework là cách làm rất phổ biến hiện nay. Nó giúp đẩy nhanh tốc độ phát triển ứng dụng. Bên cạnh đó cũng giúp ứng dụng có sự thống nhất trong thiết kế. Việc làm quên với các framework này cũng rất nhanh nếu bạn đã nắm vững CSS cơ bản.

Kết luận

Như vậy mình đã giới thiệu tới các bạn những cách thức cần thiết để TSD CSS hiệu quả. Hẹn gặp lại các bạn trong các bài viết và chủ đề hay ho sau.

CUSTOM DATEPICKER SANG TIẾNG VIỆT

Hi guys! Ở bài trước mình đã giới thiệu cho các bạn biết cách custom lại UI datepicker sao cho đẹp hơn. Nhưng datepicker mặc định là tiếng anh nên ở bài này mình sẽ hướng dẫn các bạn custom lại datepicker sang tiếng việt nhé!

Datepicker English version

Hướng dẫn

Như các bạn đã biết jQuery UI cung cấp cho chúng ta rất nhiều widget như: dialog, datepicker, autocomplete,.. Không những vậy jQuery UI còn cung cấp cho chúng ta các tùy chọn để chúng ta custom lại một số thuộc tính cho nó.

Không nói nhiều nữa, bắt đầu code thôi!

$('#datepicker').datepicker({
            prevText: "Trước",
            nextText: "Sau",
            currentText: "Hôm nay",
            monthNames: ["Tháng một", "Tháng hai", "Tháng ba", "Tháng tư", "Tháng năm", "Tháng sáu", "Tháng bảy", "Tháng tám", "Tháng chín", "Tháng mười", "Tháng mười một", "Tháng mười hai"],
            monthNamesShort: ["Một", "Hai", "Ba", "Bốn", "Năm", "Sáu", "Bảy", "Tám", "Chín", "Mười", "Mười một", "Mười hai"],
            dayNames: ["Chủ nhật", "Thứ hai", "Thứ ba", "Thứ tư", "Thứ năm", "Thứ sáu", "Thứ bảy"],
            dayNamesShort: ["CN", "Hai", "Ba", "Tư", "Năm", "Sáu", "Bảy"],
            dayNamesMin: ["CN", "T2", "T3", "T4", "T5", "T6", "T7"],
            weekHeader: "Tuần",
            dateFormat: "dd/mm/yy",
            firstDay: 1,
            showMonthAfterYear: false,
        });

Giải thích:

  • nextText: Đặt text cho button next trên tiêu đề hiển thị tháng, năm cho khi hover vào button.
  • prevText: Đặt text cho button previous trên tiêu đề hiển thị tháng, năm cho khi hover vào button.
  • monthNames: Danh sách tên đầy đủ của tháng, được hiển thị trên tiêu đề tháng, năm.
  • monthNamesShort: Danh sách các tên tháng được viết tắt, như được sử dụng trong tiêu đề tháng trên mỗi datepicker và theo yêu cầu thông qua tùy chọn “dateFormat”.
  • dayNamesMin: Danh sách các tên ngày viết tắt, bắt đầu từ Chủ nhật, để sử dụng làm tiêu đề cột trong datepicker.
  • dayNames: Danh sách tên các ngày trong tuần, được sử dụng là yêu cầu trong tùy chọn “dateFormat”, ngoài ra nó được hiển thị khi bạn hover vào tên viết tắt của các ngày trong tuần.
  • weekHeader: Text để hiển thị cho tuần của cột tiêu đề năm.
  • dateFormat: Định dạng ngày hiển thị, mặc định là mm/dd/yy.
  • firstDay: Ngày hiển thị đầu tiên trên tiêu đề ngày, chủ nhật = 0, thứ hai = 1,..
  • showMonthAfterYear: Text hiển thị tháng sau năm trên tiêu đề nếu giá trị là true và ngược lại.

Ok! Giờ mình cùng xem kết quả nha!!!

Datepicker Vietnamese version

Trên đây chỉ là một số các tùy chọn mà jQuery cung cấp, vẫn còn rất nhiều tùy chọn khác các bạn có thể tự tìm hiểu thêm qua https://api.jqueryui.com/datepicker/ nhé!

Vậy là mình đã giới thiệu cho các bạn cách custom lại datepicker sang tiếng việt, thật đơn giản phải không nào. Chúc các bạn học tốt!

Kết luận

Tất tần tật về đồng bộ, bất đồng bộ trong javascript

1. Trước khi đến với khái niệm đồng bộ, bất đồng bộ chúng ta cùng đi phân tích một ví dụ sau:

Các bạn còn nhớ giáo sư Cù Trọng Xoay không nào, hãy chú ý một vài yếu tố sau:

  • Giáo sư Cù là một người thông thái, có thể giải quyết và trả lời hết mọi việc.
  • Muốn giáo sư Cù giải quyết công việc của bạn, cách duy nhất là nhắc điện thoại lên và gọi cho ông ấy.
  • Và đương nhiên trong cùng một thời điểm ông ấy chỉ giải quyết và trả lời câu hỏi của một người. Thế là công việc của bạn được giải quyết xong.

Ví dụ trên đã cho bạn có một hình dung về việc xử lý đồng bộ. Bạn các công việc được thực hiện trình tự, bạn nhắc điện thoại lên và gọi cho giáo sư Cù, sau khi lắng nghe câu hỏi của bạn, ông ấy lập tức trả lời và thế là cuộc trò chuyện kết thúc. Mới đẩu ta thấy mọi việc diễn ra rất trôi chảy thuận lợi. Nếu vậy thì vấn đề phát sinh ở chỗ nào.

Kết quả hình ảnh cho đồng bộ và bất đồng bộ trong javascript

Bạn biết rồi đó giáo sư Cù là một người thông thái, ông ấy có thể giải quyết tất cả các vấn đề từ nhỏ đến lớn, nên càng ngày càng có nhiều người muốn ông ấy giải đáp những thắc mắc của mình. Mà trong cùng một thời điểm ông ấy chỉ giải quyết vấn đề cho một người. Vậy số người gọi đến mà máy bận là rất nhiều. Vấn đề bắt đầu nảy sinh. Vậy lúc này ta không thể tiếp tục xử lý công việc theo cơ chế bất đồng bộ được nữa phải không nào.
Để giải quyết được vấn đề này, giáo sư đã nghĩ ra một phương pháp mới, thay vì gọi trực tiếp, giáo sư sẽ tiếp nhận các tin nhắn lại rồi trả lời thông qua tin nhắn:

  • Giáo sư đã thuê anh Xoáy để quản lí nhận tin nhắn.
  • Mỗi khi ai có vấn đề cần giải quyết chỉ cần nhắn tin và anh Xoáy sẽ tiếp nhận và sắp xếp những tin nhắn theo một trình tự rồi gửi đến cho giáo sư Cù.
  • Giáo sư Cù trả giải đáp thắc mắc của mọi người thông qua gửi message lại cho anh Cù, anh Cù sẽ tiếp nhận và gửi lại nó cho người gửi.

Do đó các tin nhắn được gửi sẽ không đợi nhau, đây chính là cách xử lý theo cơ chế bất đồng bộ.
Đến đây chắc hẳn đã có hình dung về đồng bộ và bất đồng bộ trong javascript. Để hiểu rõ hơn chúng ta hãy cùng đi đến khái niệm sau:

2. Khái niệm

  • Synchronous (đồng bộ) là một quy trình xử lý các công việc theo một thứ tự đã được lập sẵn. Công việc sau được bắt đầu thực hiện chỉ khi công việc thứ nhất hoàn thành. Trong lập trình, một chương trình đồng bộ là một chương trình được thực hiện theo từng câu lệnh từ trên xuống dưới, từ trái qua phải, câu lệnh sau được thực hiện chỉ khi câu lệnh trước đã hoàn thành. Đa số các ngôn ngữ biên dịch đều tuân theo quy tắc lập trình đồng bộ ví dụ C++, Java, …Vì thế chỉ cần biên dịch một câu lệnh sai là cả chương trình sẽ dừng lại và báo lỗi.
  • Ngược lại, với Asynchronous (bất đồng bộ), nhiều công việc có thể được thực hiện cùng lúc. Và nếu công việc thứ hai kết thúc trước, nó có thể sẽ cho ra kết quả trước cả câu lệnh thứ nhất. Vì thế, đôi khi kết quả của các câu lệnh sẽ không trả về đúng theo đúng thứ tự như trực quan của nó.

3. Ưu nhược điểm của xử lý đồng bộ, bất đồng bộ.

  • Lập trình đồng bộ có đặc điểm là chương trình chạy từ trên xuống dưới, nên khi có ở đâu thì chương trình sẽ dừng ngay tại đó. Vì thế có thể dễ dàng phát hiện ra lỗi.
  • Việc thực thi chương trình theo một trình tự cũng là một nhược điểm của lập trình bất đồng bộ. Khi các câu lệnh chờ nhau thực hiện, sẽ có những câu lệnh cần phải thao tác với các dữ liệu bên ngoài vì thế nó cần một khoảng thời gian để lấy dữ liệu trước khi hoạt động bình thường. Như thế thời gian chạy chương trình sẽ bằng tổng thời gian thực hiện xong các câu lệnh.
  • Đừng lo lắng, lập trình bất đồng bộ sẽ giúp bạn trong những trường hợp này, lập trình bất đồng bộ cho các câu lệnh thực hiện đồng thời mà không phải đợi nhau. Như thế quá tốt đúng không nào.
  • Tuy nhiên lập trình bất đồng bộ cũng có nhược điểm, đó là khi nếu câu lệnh thứ hai thực thi với thời gian ngắn hơn với câu lệnh thứ nhất thì câu lệnh ta sẽ nhận được kết quả của câu lệnh thứ hai trước. Vì thế có thể cho kết quả không theo trình tự như chủng ta mong muốn. Do vậy khi sử dụng lập trình bất đồng bộ ta phải có kĩ thuật để kiểm soát chúng.

4. Cách dùng

4.1 Callback Function

4.1.1 Khái niệm

Callback Function là gì?
Callback Function  là một function được truyền vào một function (gọi là F1) khác dưới dạng tham số, và được gọi trong function F1 đó.

Chúng ta cùng xem xét ví dụ sau:

Theo ví dụ như trên, ta khai báo hai function tên là hello() và myfunction(). Khi ta gọi thực thi myfunction(), phía trong function lại gọi tới một function là callback(). Như ta để ý thì callback cũng là tên tham số của function myfunction(), mà ở dòng thực thi ta truyền vào là hello.

4.1.2 Callback function hoạt động như thế nào?

Một function có thể truyền function khác như là một biến rồi return về function đó. Và chúng ta đã có định nghĩa của function callback dưới dang tham số, ta có thể thực thi bất kỳ lúc nào trong function chứa nó.

  1. Sử dụng anonymous functions

2. Sử dụng một callback function đã được đặt tên

Hình ảnh này chưa có thuộc tính alt; tên tệp của nó là image-20.png

Trong function myfunction() có tham số là callback. Function callback sẽ được thực thi khi gọi đến function myfunction().

3. Truyền tham số tới callback function
Chúng ta có thể truyền tham số vào callback function như bất kỳ function nào khác.

Kết quả:

4. Gọi nhiều callback function

Có thể gọi nhiều callback function dưới dạng tham số.

4.1.3 Ưu nhược điểm của callback function

Ưu điểm:
  • Callback function là một mô hình khá phổ biến nên rất dễ hiểu.
  • Rất dễ implement trong cách function của chúng ta.
Nhược điểm:
  • Callback lồng nhau sẽ tạo thành một kim tự tháp khét tiếng của sự diệt vong như được hiển thị ở trên, điều này có thể khiến bạn khó đọc khi bạn có nhiều mức lồng nhau. 
  • Bạn chỉ có thể truyền một callback cho một sự kiện nhất định, điều này có thể là một giới hạn lớn trong nhiều trường hợp.

4.2 Callback hell

Callback hell trong javascript là gì? Nó không phải là một khái niệm trừu tượng, nó là một tên gọi hoa mỹ của việc thực hiện quá nhiều callback lồng nhau.
Hãy xem ví dụ dưới đây:

Nhìn thật đáng sợ đúng không? Đừng lo lắng, mình sẽ chia sẻ những cách bị hạn chế callback hell trong javascript.

4.2.1 Thiết kế ứng dụng theo dạng module

Cũng giống như những ngôn ngữ lập trình khác, để giảm thiếu tối đa sự phức tạp của code là module hóa chúng.
Bạn đừng quên rằng Nodejs được xây dựng bởi hàng trăm hàng ngàn module. Nodejs sẽ không phổ biến đến thế nếu không sử dụng các module. Chính vì thế việc bạn sử dụng module để đơn giản hóa mã nguồn chính là đi đúng hướng với Nodejs đó.
Chúng ta hãy cùng xem một ví dụ sau:

Để ứng dụng khác gọi đến được thì bạn cần phải require nó.

4.2.2 Đặt tên cho callback trong javascript

Chúng ta hãy cùng xem ví dụ sau:

Nhìn vào đoạn code này sẽ khiến bạn mất vài giây để xem callback thực hiện điều gì và được gọi từ đâu.

Để khắc phục điều này, đơn giản bạn thêm một thao tác nhỏ là đặt tên cho callback. Nó sẽ giúp bạn dễ đọc code hơn, đặc biệt khi các callback lồng nhau nhiều hơn.

Và bây giờ thì đọc lại xem, việc đặt tên cho function sẽ mất ít thời gian để hiểu code hơn đúng không ạ.

4.2.2 Định nghĩa hàm trong javascript để tránh callback hell

Cũng như ví dụ ở trên nhưng hãy thử tách các function ra:

Bạn đã thấy dễ hiểu hơn chưa?

Mặc dù cách viết code đã giải quyết được phần nào vấn đề. Nhưng nó vẫn chưa phải là giải pháp tốt nhất. Nếu bạn đọc lại code mà không nhớ chính xác hàm đó làm gì, bạn sẽ phải trace lại code, mà thường thì code của hàm đó lại trôi tuột ở đâu đó. Rất mất thời gian.

Chúng ta còn có giải pháp tốt hơn, ngay phía bên dưới thôi!

4.3 Promise trong javascript

Promise trong javascript là gì?
Promise là một cơ chế trong javascript nó giúp bạn không bị rơi vào callback hell.
Hãy xem một ví dụ đơn giản sau:

Nếu dùng promise để viết lại:

Code nhìn ngắn gọn, đơn giản và dễ hiểu hơn rất nhiều có đúng không nào?
Để tạo ra một promise object thì bạn dùng class Promise có sẵn trong trình duyệt như sau:

Trong đó, executor là một hàm có hai tham số:

  • resolve là hàm sẽ được gọi khi promise hoàn thành
  • reject là hàm sẽ được gọi khi có lỗi xảy ra

Ví dụ:

Như vậy api.getUser() sẽ trả về một promise object. Chúng ta có thể truy xuất đến kết quả trả về bằng phương thức .then() như sau:

Phương thức .then(onSuccess, onError) nhận vào hai hàm: onSuccess được gọi khi promise hoàn thành và onError được gọi khi có lỗi xảy ra. Bên trong tham số onSuccess bạn có thể trả về một giá trị đồng bộ, chẳng hạn như giá trị số, chuỗi, nullundefined, array hay object; hoặc một promise object khác. Các giá trị bất đồng bộ sẽ được bọc bên trong một Promise, cho phép bạn kết nối (chaining) nhiều promises lại với nhau.

4.4 Async/Await

Kể từ phiên bản ES7, Javascript có một khái niệm mới là Async/Await. Khi sử dụng hàm async, code của bạn sẽ trông giống như đồng bộ như thực chất là bất đồng bộ. Thế mới hay!

Ví dụ đoạn code sau:

Ở đoạn code trên, hàm db.user.byId(id) sẽ trả về một Promises, và lẽ ra khi hàm này được sử dụng thì kết quả sẽ trả về trong hàm .then()

Tuy nhiên, với từ khóa await, bạn sẽ lấy trực tiếp kết quả trả về.

Kết luận

Trên đây là một số những kiến thức cơ bản về đồng bộ, bất đồng bộ trong javascript. Bạn cần nắm rõ khái niệm và cách sử dụng cho hiệu quả. Hiểu được khái niệm và cách dùng của callback function, promise và async/ await. Callback hell là gì và những cách để hạn chế callback hell.

Những điều thú vị về console API trong Java Script

Console API

Trong quá trình học tập cũng như làm việc chắc hẳn những lập trình viên như chúng ta cũng sẽ gặp phải lỗi, không ít thì nhiều =)) Mỗi lúc như vậy thì các coder tài ba lại dùng mọi cách để debug xem lỗi ở đâu mà sửa, việc debug đã gắn liền với các lập trình viên trở thành một phần không thể thiếu trong cuộc sống cũng như đặc trưng của cái nghề “việc nhẹ lương cao” này rồi.

Nếu đem so sánh các công cụ debugger chuyên nghiệp của các IDE hay browser với console.log() của chúng ta thì đó là một cuộc chiến không cân sức. Tuy nhiên console API còn nhiều điểu hay ho hơn chứ không chỉ có mỗi console.log() đâu nhé. Hơn nữa chúng ta cũng cần biết cách debug với console API vì mỗi lập trình viên chuyên nghiệp không thể thiếu được kĩ năng quan trọng này. Trong bài viết này các bạn và mình sẽ cùng nhau tìm hiểu xem console API có những gì thú vị nhé!

Console.log()

Chắc hẳn ai làm lập trình cũng biết làm log() huyền thoại này. console.log() sẽ in ra chuỗi, số, object được truyền vào nó. Bạn có thể truyền bất kỳ object nào trong JS vào console.log() và nó sẽ in ra màn hình console cho bạn.

Sử dụng log() để in ra các đối tượng khác nhau

Tuy nhiên các tham số trong nó thì chưa chắc tất cả mọi người đã biết, bảng dưới là thông tin một số tham số trong console.log()

Cú phápÝ nghĩa
%o / %OThay thế object
%d / %iThay thế số nguyên
%sThay thế chuỗi
%fThay thế số thực
%cThay đổi style

Một số ví dụ:

console.log('Hello %o',{name:'Nguyen Tuan Quang', department:'blockchain'},'!' );

Kết quả:

Sử dụng tham số trong console.log()

Tương tự với %d,%s,%f. Với %c thì hơi đặc biệt hơn khi ta có thể chèn thêm css vào đây:

let css = "text-shadow: -1px -1px hsl(0,100%,50%),1px 1px hsl(27, 100%, 50%),3px 2px hsl(54, 100%, 50%),5px 3px hsl(81, 100%, 50%),7px 4px hsl(135, 100%, 50%),9px 5px hsl(162, 100%, 50%),11px 6px hsl(189, 100%, 50%),13px 7px hsl(243, 100%, 50%),14px 8px hsl(270, 100%, 50%),16px 9px hsl(297, 100%, 50%); font-size: 40px;";
console.log("%c Style: Sun*", css);
Tham số %c trong console.log()

Có phải bạn thấy sặc sỡ đúng không nào? Khi vào cửa sổ console khi đang sử dụng Facebook bạn sẽ thấy dòng chữ STOP to và màu đỏ, cũng như những dòng cảnh báo ở dưới. Và chúng được tạo ra bằng cách console.log() với %c đó.

Console.dir()

Hàm dir() này lúc đầu mình định không chia sẻ chi tiết nhưng thấy khá hay nên mình đặt ngay sau console.log(). Với console.dir() bạn có thể hiển thị dữ liệu theo dạng cây phân cấp, bạn có thể tương tác để xem các thuộc tính bên trong. Ví dụ:

console.dir() giúp hiển thị các thuộc tính bên trong

Rất tiện lợi phải không nào, khi làm việc với bất kì đối tượng nào bạn chỉ cần dir() ra là có thể lấy được các giá trị thuộc tính của nó một cách dễ dàng.

Khi sử dụng với một đối tượng HTML, bạn sẽ thấy console.log() hiển thị dạng cấu trúc HTML của đối tượng đó, còn console.dir() sẽ hiển thị các thuộc tính của đối tượng.

console-log-vs-dir
Khác biệt giữa log() và dir()

Chắc hẳn bạn đã nghi ra cần sử dụng dir() vào lúc nào rồi chứ?

Console.table()

Ngoài việc in ra màn hình console bằng console.log() thì chúng ta có thể dùng console.table(). Hàm này rất hữu ích khi làm việc với mảng, object, và dữ liệu dạng JSON. Chẳng hạn như ví dụ sau:

var car1 = { name : "Audi", model : "A4" }
var car2 = { name : "Volvo", model : "XC90" }
var car3 = { name : "Ford", model : "Fusion" }

console.table([car1, car2, car3]);
In thông tin với console.table()

Các phần tử đối tượng hay mảng sẽ được in ra trên một dòng với số cột là tên các key, thuộc tính và giá trị của phần tử. Chắc hẳn nhìn sẽ trực quan hơn log() rất nhiều đúng không nào.

Console.clear()

Khi chúng ta viết quá nhiều lệnh thì màn hình console sẽ có một mớ hỗn độn và trông rất rối mắt. Cũng giống như lệnh xóa màn hình trong C thì console.clear() sẽ xóa sạch màn hình console của bạn giúp bạn thực hiện những lệnh tiếp theo với không gian làm việc sạch sẽ. Có lẽ bạn sẽ thích hàm này khi làm việc đó.

Xóa màn hình với console.clear()

Console.count()

Hàm console.count([label]) trả về số lần được gọi của đối tượng truyền vào trong count(). Nếu không có tham số sẽ mặc định trả về số lần được gọi với label default.

Ví dụ:

for (i = 0; i < 10; i++) {
  console.count();
}

Kết quả sẽ là:

console.count() với tham số mặc định

Nếu truyền tham số vào hàm count() sẽ trả về số lần gọi function với label đã truyền vào, lưu ý là tuy cùng truyền vào một function nhưng với các giá trị label khác nhau thì hàm count() sẽ thực hiện độc lập, không cộng dồn.

Có thể truyền label vào console.count()

Console.group()

console.group() cho biết là sẽ bắt đầu một nhóm các phương thức trong màn hình console. Tất cả các câu lệnh hay thông bào tiếp theo sẽ nằm trong nhóm này. Để kết thúc nhóm ta sử dụng lệnh console.groupEnd()

console.group() nhóm các phương thức tiếp theo được gọi

Còn nữa, phương thức console.groupCollapsed(label) biểu thị sự bắt đầu của một nhóm thông báo bị thu gọn. Tất cả những hàm được gọi tiếp theo sẽ được nhóm vào một label, chúng ta có thể nhấn vào label để mở rộng hay thu gọn nhóm.

console.groupCollapsed() giúp tạo một nhóm có thể thu gọn

Console.trace()

Đây là một hàm rất hữu ích trong việc debug. console.trace() sẽ in ra nguồn gốc đối tượng mà dẫn đến câu lệnh gọi này. Sẽ rất hữu ích khi truy code flow. Câu này nếu thử ngay vào browser console thì sẽ không có ý nghĩa lắm. Để hiểu rõ hơn bạn cần cho nó vào trong code của mình để xem.

Đây là một ví dụ:

Sử dụng console.trace()

Console.warn(), Console.error()

Hai hàm này chức năng cũng giống như console.log() thôi nhưng sẽ hiển thị với màu và kiểu đặc trưng. warn() là cảnh báo nên sẽ có màu vàng còn error() sẽ có màu đỏ để hiển thị lỗi. Các bạn hãy tự thử trên console để xem nó thế nào nhé!

console.warn("This is a warning!");
console.error("This is an error!");

Console. assert()

Với hàm assert() tham số đầu tiên của nó phải là boolean. Nếu tham số đầu tiên trả về true thì nó cũng ko làm gì luôn. Tuy nhiên nếu ngược lại thì các tham số tiếp theo sẽ được in ra giống console.error().

Ví dụ:

Console.assert()

Timing

Hàm này khá hay ho, giúp bạn đo lường thời gian thực thi (một cách “chân tay”). Cũng dễ hiểu thôi nên các bạn có thể tự thử nhé.

console.time();
// code snippet 1
console.timeLog(); // default: [time] ms
// code snippet 2
console.timeEnd(); // default: [time] ms

Mở rộng

Ngoài ra còn một số hàm nữa trong console API mà mình liệt kê ở dưới mà không diễn giải chi tiết cho các bạn. Các bạn có thể tham khảo và nếu phù hợp có thể áp dụng cho công việc của mình:

  1. countReset()
  2. debug()
  3. dirxml()
  4. info()
  5. profile()
  6. profileEnd()

Kết luận

Vậy là chúng ta đã đi qua một lượt những thứ quan trọng về console api trong Java Script. Với những kiến thức trên hi vọng các bạn sẽ tự tin hơn trong lập trình cũng như debug code với console, hiểu các hàm trong console dùng vào mục đích gì. Mình xin kết thúc bài viết ở đây và cảm ơn các bạn đã đọc đến phần cuối cùng này!

Mọi thông tin tham khảo về console API các bạn có thể truy cập tại: https://developer.mozilla.org/en-US/docs/Web/API/Console

[WPcơ bản] – Phần 1: WordPress là gì?

Worpess căn bản

Xin chào các bạn, ở loạt bài viết này mình xin giới thiệu tới các bạn 1 mã nguồn mở rất phổ biến: WordPress. Mã nguồn mở này được sử dụng rất nhiều cho hệ thống quản trị nội dung CMS (Content Management System). Với hệ thống này thì rất phù hợp cho những trang blog, bán hàng nhỏ,…

Hiện nay WordPress chiếm khoảng 60% thị phần về các trang web CMS, và chiếm khoảng 34% số lượng website toàn cầu. Những con số đó cũng đủ nói lên WordPress lớn rộng như thế nào.

Mời các bạn xem video dưới đây để biết thêm chi tiết:

05 NGUỒN TÀI LIỆU MIỄN PHÍ CHO SINH VIÊN IT

05 nguồn tài liệu miễn phí

Đối với sinh viên IT, được tiếp cận những nguồn tài liệu mới nhất vô cùng quan trọng. Vì nguồn tài nguyên đó giúp các bạn sinh viên tiếp cận với những công nghệ mới nhất của thế giới một cách nhanh nhất.

Dưới đây là tổng hợp những trang web có nguồn tài liệu vô cùng lớn, được cập nhật liên tục mà MISA muốn giới thiệu tới các bạn.

1. https://www.w3schools.com/

Related image

Chắc hẳn đây là một cái tên vô cùng quen thuộc đối với các bạn lập trình viên. W3School là một website hướng dẫn các bạn học rất nhiều ngôn ngữ lập trình: Python, Javascript, PHP, SQL, HTML/CSS,… từ mức cơ bản nhất. Các bạn sẽ được tiếp cận với rất nhiều tài liệu miễn phí, ví dụ trực quan và bài tập làm thêm. Bên cạnh đó, W3School còn cung cấp cho các bạn công cụ test trực tuyến giúp các bạn học dễ dàng hơn.

2. https://openstax.org/

Image result for Openstax

OpenStax là chương trình được vợ chồng Bill Gates đã thông qua quỹ Bill and Melinda Gates hợp tác cùng trường Đại học Rice và các quỹ khác thành lập.

Với mục tiêu giúp sinh viên tiếp cận dễ dàng hơn với kiến thức bằng nguồn tài liệu chất lượng cao, được kiểm duyệt kĩ lưỡng. Sinh viên thuộc các trường đại học sử dụng OpenStax có thể truy cập bản giáo trình điện tử miễn phí hoặc sử dụng bản in với chi phí thấp.

OpenStax cung cấp rất nhiều đầu sách có bản quyền cho các khoá học phổ biến nhất, thuộc nhiều lĩnh vực khác nhau, đặc biệt là ngành IT.

3. https://www.udacity.com/  

Image result for Udacity

Udacity là một trang web học lập trình nổi tiếng. Các khóa học giúp các bạn tiếp cận kiến thức tù android, web cho đến social network.

Ngoài ra, Udacity cung cấp cho người học nhiều nguồn tài liệu miễn phí vô cùng chất lượng. Nếu các bạn muốn học riêng với giảng viên hoặc tham gia các dự án thực tế thì sẽ phải trả thêm một khoản phí.

4. https://www.codeschool.com/

Image result for code school pluralsight

“Học bằng thực hành” là phương trâm của Codeschool. Khác với những website học online khác là bạn phải có một nền tảng kiến thức nhất định trước khi bắt đầu học tại đây.

Codeschool có bốn mảng tài liệu chính về Ruby, HTML/CSS, iOS, Javascript, cung cấp cho các bạn rất nhiều đầu sách miễn phí hay và mới nhất. Nếu các bạn muốn tiếp cận tới tất các nguồn tài liệu thì sẽ phải trả thêm một khoản phí.

5. https://github.com/EbookFoundation/

Image result for github

Khi gặp khó khăn hoặc vướng mắc khi lập trình, thì sự trợ giúp từ các lập trình viên khác hoặc những nguồn tài liệu tham khảo vô cùng quan trọng. GitHub chình là nơi bạn sẽ tìm được những điều đó.

Bộ sưu tập với hàng nghĩn cuốn sách miễn phí, các công nghệ mới nhất được cộng động hỗ trợ lớn là nguồn tài liệu vô cùng quý giá, giúp bạn giải quyết khó khăn bất kỳ lúc nào.

Với bài thống kê các Website có nguồn tài liệu học lập trình miễn phí cho sinh viên IT trên đây, MISA xin chúc các chiến binh Công nghệ thông tin sẽ học tập và rèn luyện thật hiệu quả!

Var, let và const – Sự khác nhau trong JavaScript là gì?

1. Sự xuất hiện của let và const

ES6 (ECMAScript 6) ra đời kèm theo nhiều tính năng mới đi kèm, một trong số đó là bổ sung let const trong việc khai báo biến. Vậy tại sao chúng ta lại cần let const dù trước đó đã có var để khai báo biến? Chúng ta sẽ cúng tìm hiểu lý do qua sự khác biệt giữa chúng trong bài viết này nhé.

2. Var

2.1 Phạm vi của var

Phạm vi về cơ bản có nghĩa là nơi các biến này được sử dụng. Khai báo var có phạm vi là function/locally scoped (khai báo bên trong một function) hoặc phạm vi globally scoped.

Để hiểu thêm, hãy xem vi dụ dưới đây:

Ở đây, test có phạm vi globally scoped bởi vì nó nằm ngoài function, còn biến hi có phạm vi function/locally scoped. Chúng ta không thể truy cập biến hi ở bên ngoài hàm newFunction(). Vì vậy nếu chúng ta làm như sau:

Chúng ta sẽ gặp lỗi do hi không được định nghĩa bên ngoài hàm newFunction().

2.2 Var -khai báo lại và cập nhật

Chúng ta có thể khai báo lại và cập nhật lại giá trị của biến khai báo bằng var trong cùng phạm vi và sẽ không gặp lỗi:

Khai báo lại giá trị biến:

Cập nhật lại giá trị biến:

2.3 Tính chất hoisting

Hosting là một cơ chế JavaScript trong đó các khai báo biến và khai báo hàm được di chuyển lên đầu phạm vi của chúng trước khi thực thi mã.

Nếu chúng ta thực hiện:

Nó sẽ được hiểu là :

Biến var sẽ được đưa lên đầu phạm vi của nó và được khởi tạo với giá trị không xác định.

2.4 Vấn đề với var

Chúng ta cùng xem ví dụ sau :

If (times > 3) trả về true nên biến hi sẽ được định nghĩa lại “hey hey hey”. Đây sẽ không là vấn đề nếu bạn thật sự muốn hi được định nghĩa lại, nhưng nó sẽ trở thành vấn đề nếu bạn không nhận ra rằng một biến hi đã được định nghĩa trước đó, trong trường hợp code chúng ta có hàng trăm ,hàng nghìn dòng code chúng ta sẽ không biết được rằng liệu giá trị của biến có bị thay đổi ở đoạn code nào dẫn đến việt debug là vô cùng khó khăn. Đây chính là lý do sự ra đời của let const.

3. Let

Khai báo let đang được ưa thích để khai báo biến trong thời điểm hiện tại. Nó là một cải tiến của khai báo var, nó giải quyết được vấn đề của var được đề cập trong phần trên. Chúng ta cúng xem tại sao lại như vậy?

3.1 Let là phạm vi khối

Một khối là đoạn mã được giới hạn bởi {}. Một biến được khai báo trong một khối với let chỉ có sẵn để sử dụng trong khối đó.

Chúng ta cùng xem ví dụ sau:

Việc sử dụng biến hello bên ngoài khối của nó sẽ trả về lỗi. Điều này do các biến let được đặt phạm vi khối.

3.2 Let có thể được cập nhật nhưng không được khai báo lại.

Giống như var, một khai báo biến với let có thể được cập nhật trong phạm vi của nó. Không giống như var, một biến let không thể được khai báo lại trong phạm vi của nó.

Có thể cập nhật :

Không thể khai báo lại:

Tuy nhiên, nếu cùng một tên biến được xác định trong các phạm vi khác nhau, sẽ không có lỗi.

Điều này là do các biến được khai báo trong phạm vi khác nhau nên được xem là 2 biến khác nhau.

Thực tế thì khai báo let là một lựa chọn tốt hơn var. Khi sử dụng let chúng ta không phải bận tâm nếu đã sử dụng tên cho một biến trước đó vì một biến chỉ tồn tại trong phạm vi của nó. Ngoài ra, một biến không thể khai báo lại trong cũng một phạm vi, nên đã khắc phục được vấn đề trước đó đối với var.

3.3 Hosting of let

Giống như var, khai báo let được nâng lên hàng đầu khi thực thi.

Nhưng khác với var được khởi tạo là undefined, biến let không được khởi tạo. Vì vậy, nếu cố gắng sử dụng một biến let trước khai báo, bạn sẽ nhận được một Reference Error.

4. Const

Các biến được khai báo với const có giá trị không đổi, không thể cập nhật hay khai báo lại.

4.1 Const là phạm vi khối

Giống như khai báo let, khai báo const chỉ có thể được truy cập trong phạm vi khối được khai báo.

4.2 Const không thể được cập nhật, hoặc khai báo lại

Như đã đề cập ở trên, giá trị của biến được khai báo const sẽ được giữ nguyên trong phạm vi của nó. Nó không thể được cập nhật hay khai báo lại. Đây là điểm lưu ý khi bạn khai báo với const .

Chúng ta không thể làm những điều này với khai báo const :

và cũng không:

Đối với trường hợp biến là reference (object, array và function) thì tuy không thể khai báo hay cập nhật giá trị của biến nhưng chúng ta vẫn có thể cập nhật lại giá trị cho thuộc tính của biến đó.

4.3 Hosting of const

Cũng giống như let, các khai báo const được đưa lên đầu khi thực thi nhưng không được khởi tạo

Cảm ơn các bạn đã đọc ^ – ^…

Tham khảo:

https://dev.to/sarah_chima/var-let-and-const–whats-the-difference-69e

Rule Style Code trong Javascript và câu chuyện từ đất nước mặt trời mọc

Nếu có dịp ghé qua Nhật Bản và đi đến các trung tâm tâm thương mại hay bến tàu điện ngầm, bạn sẽ thấy người dân ở đây khi đi thang cuốn đều xếp gọn sang một bên. Nhiều bạn sẽ tự hỏi tại sao người ta phải làm như vậy, đứng như thế thì có tác dụng gì. Thực ra việc gì cũng có lý do của nó. Ở Nhật, vào những giờ cao điểm, lượng người qua lại ở những nơi công cộng là rất lớn, mà người Nhật lại thường dùng phương tiện công cộng để đi lại, vì vậy việc mọi người đứng dạt sang một bên chính là để nhường một lối đi cho những người đang muộn giờ làm có thể đi nhanh hơn mà không phải xếp hàng để họ kịp bắt chuyến tàu hay chuyến xe đến nơi làm việc.

Hình ảnh người Nhật khi đi thang cuốn tại Osaka

Một việc làm đơn giản mà ý nghĩa vôc cùng sâu sắc phải không các bạn. Đến đây, nhiều bạn đặt ra câu hỏi: câu chuyện đó có liên quan gì đến Rule style code trong javascript? Trước khi nếu ra ý kiến của bản thân mình về vấn đề này, chúng ta hãy cùng nhau khám phá xem Rule style code là gì và được sử dụng như thế nào nhé.

Rule style code là tập hợp những quy tắc ngầm của anh em Dev khi viết mã Js để code Js trông sáng sủa và sạch sẽ hơn. Trong bài viết này mình sẽ chỉ nêu ra một vài quy tắc thông dụng và phổ biến.

1. Sử dụng 2 space cho indent
function hello (name) {
console.log(‘hi’, name) //indent is 2 space
}

2. Sử dụng nháy đơn cho ” ‘ ” cho string
console.log(‘hello there’) // ✓ ok
console.log(“hello there”) // ✗ avoid


3. Thêm một space sau keyword của js
if (condition) { … } // ✓ ok
if(condition) { … } // ✗ avoid


4. Thêm một space trước dấu mở ngoặc đơn trong định nghĩa function
function name (arg) { … } // ✓ ok
function name(arg) { … } // ✗ avoid


5. Trước và sau toán tử Infix là space
// ✓ ok
var x = 2
var message = ‘hello, ‘ + name + ‘!’


// ✗ avoid
var x=2
var message = ‘hello, ‘+name+’!’


6. Sau dấu ‘ , ‘ là một space
// ✓ ok
var list = [1, 2, 3, 4]
function greet (name, options) { … }


7. Giữ các câu lệnh else cùng dòng với dâu ngoặc nhọn của chúng
// ✓ ok
if (condition) {
// …
} else {
// …
}

// ✓ avoid
if (condition) {
// …
}
else {
// …
}


8. Câu lệnh if nhiều dòng phải dùng dấu ngoặc nhọn ‘{}’
// ✓ ok
if (options.quiet !== true) {
console.log(‘done’)
}
// ✓ avoid
if (options.quiet !== true)
console.log(‘done’)

9. Nhiều dòng trắng liên tiếp là không được phép
// ✓ ok
var value = ‘hello world’
console.log(value)

// ✓ avoid
var value = ‘hello world’


console.log(value)

Okay, vậy là mình đã cùng các bạn điểm qua một số quy tắc viết Js. Quay lại câu chuyện ở đầu bài viết, như các bạn thấy đấy, nếu người ta không chịu đứng dạt hết sang một bên thì cũng chẳng ai làm gì được họ. Vì chẳng có luật lệ nào quy định phải đứng như thế nào khi đi thang cuốn cả. Nhưng người Nhật vẫn rất tuân thủ điều này, và ý nghĩa sâu sắc của nó cùng hình ảnh văn minh này đã cho chúng ta thấy văn hóa và ý thức kỷ luật của con người Nhật Bản. Tương tự, đối với các lập trình viên như chúng ta, chẳng ai bắt bạn phải viết code như trong Rule style code cả, nhưng đừng để sếp, đồng nghiệp đánh giá bạn khi nhìn thấy những dòng code xấu xó, lộn xộn, hay chính bản thân bạn cũng phải khó chịu khi đọc lại những gì mình viết ra. Hãy trân trọng những dòng code như những đứa con của mình. Bạn đã mất rất nhiều thời gian và tâm huyết để cho code của bạn chạy được, tại sao lại không dành chút thời gian để cho nó đẹp mắt hơn. Tốt gỗ thì hơn tốt nước sơn, nhưng nếu cả gỗ và nước sơn đều tốt càng tuyệt vời, đúng không nào?



Bạn có thực sự biết cách sử dụng Pseudo-classes?

Nhắc đến Pseudo-classes thì có thể nhiều người thấy lạ lẫm, nhưng nếu nói Pseudo-classes trong CSS chính là: hover, focus, active hay visited thì chắc hẳn là ai cũng biết rồi vì để tạo ra một trang web cơ bản thì những Pseudo-classes trên là vô cùng cần thiết!
Một pseudo-classes được sử dụng để xác định trạng thái đặc biệt của một phần tử. Ví dụ, chúng có thể được sử dụng để:

Vậy pseudo-classes là gì?

  • Định dạng một phần tử khi người dùng rê chuột vào đó
  • Định dạng đường dẫn khi đã và chưa được click vào
  • Định dạng một phần tử khi muốn gây chú ý vào đó

Cú pháp của pseudo-classes

Có những loại pseudo-class nào?

Có rất nhiều loại pseudo-class, tuy nhiên chúng ta hay dùng: hover, focus, active và visited là chủ yếu. Vậy nên mình sẽ giới thiệu sâu hơn về những pseudo-class nói trên.

1. :hover
thay đổi trạng thái khi rê chuột vào phần tử
Ví dụ:

Như vậy, sau khi viết CSS cho a:hover thì các đường dẫn sẽ có nền màu đỏ (#ff0000) và chữ màu trắng (#fff) khi rê chuột qua tên đường dẫn. Và trạng thái của đường dẫn sẽ trở về ban đầu khi rê chuột ra khỏi vùng của thẻ <a>.
Pseudo-class :hover rất hay được sử dụng để vẽ giao diện, đặc biệt là cho các button hoặc các thẻ <div> để hiển thị ra tooltip.

2. :focus
thay đổi trạng thái khi chọn một phần tử nào đó
Ví dụ

Như vậy, sau khi viết CSS cho input:focus thì khi click vào phần tử input màu nền input sẽ có màu đỏ (#ff0000). Và trạng thái của input sẽ trở về ban đầu khi click ra ngoài vùng input.
Lưu ý: :focus không dùng được cho thẻ <div>, :focus thường chỉ dùng với thẻ <button>, <input>, <a>.

3. :active
thay đổi trạng thái khi kích hoạt một phần tử nào đó, nó giống :focus ở điểm này. Tuy nhiên :active khác với :focus ở chỗ:
+ với :focus thì trạng thái chỉ trở về ban đầu khi ta chọn vào các vùng khác
+ với :active thì trạng thái trở về ban đầu ngay khi ta rê chuột ra khỏi vùng vừa kích hoạt, điểm này giống với :hover
Như vậy, cũng có thể nói :active là sự kết hợp của :focus và :hover.

4. :visited
Lưu ý: :visited chỉ dùng cho thẻ <a>
:visited thay đổi trạng thái cho các đường dẫn đã được kích hoạt và sẽ không trở lại trạng thái ban đầu


Trên đây là những hiểu biết và kinh nghiệm của mình khi tìm hiểu về Pseudo-classes.
Cảm ơn mọi người đã đón đọc!!!