Tôi đã xây dựng một ứng dụng giúp việc học các thuật toán và cấu trúc dữ liệu trở nên thú vị hơn

Tôi là một lập trình viên tự học. Điều này có nghĩa là tôi đang phải đối mặt với hội chứng kẻ mạo danh. Không có gì lạ khi tôi cảm thấy mình không đủ và gặp bất lợi khi nắm bắt các khái niệm Khoa học Máy tính phức tạp.

Tôi chưa bao giờ giỏi toán. Và tôi luôn gắn các kỹ năng toán học mạnh mẽ với khả năng lập trình xuất sắc của một người. Tôi cảm thấy mình phải làm việc chăm chỉ hơn những người khác (những người có kỹ năng bẩm sinh về toán học) để học các khái niệm tương tự. Với ý tưởng này đã ăn sâu vào não tôi, tôi khá chắc chắn rằng mình sẽ không bao giờ có thể học được những thứ như lướt qua các cây tìm kiếm nhị phân và cách phân tích cú pháp trong những cơn ác mộng đệ quy như Mergesort.

Mặc dù với một chút nỗ lực, tôi đã tạo ra được bất ngờ cho chính mình. Vì vậy, tôi muốn chia sẻ một chút về cách thức và kết quả hữu hình của những nỗ lực của tôi. Như mọi khi, với hy vọng rằng có thể có một số cộng tác viên sẵn sàng tham gia!

Nhập CS-Playground-React, một hộp cát JavaScript đơn giản trong trình duyệt để học và thực hành các thuật toán và cấu trúc dữ liệu.

Ứng dụng chuẩn bị phỏng vấn không cần đăng ký này sẽ tự động lưu tiến trình của bạn, cung cấp các giải pháp khi bạn gặp khó khăn và có đầy đủ các liên kết đến các bài báo, hướng dẫn hữu ích và các tài nguyên khác để giúp hành trình của bạn đỡ vất vả hơn nhiều so với trước đây của tôi !

Hãy để tôi thừa nhận thẳng thắn rằng ứng dụng này không có gì đột phá. (Tôi biết bạn đang nghĩ như vậy!) Có rất nhiều ứng dụng dạy các kỹ năng tương tự và cung cấp cho bạn khả năng viết và chạy mã ngay trong trình duyệt của mình.

Nhưng CS Playground React dự định sẽ cực kỳ tối giản và tập trung vào một nhóm chủ đề rất cụ thể. Thêm vào đó, đây không phải là điều lớn lao tiếp theo. Xây dựng ứng dụng này chỉ là cách của tôi để khiến việc học những thứ này trở nên thú vị. Nếu nó trở thành một nguồn tài nguyên có giá trị cho cả một người khác trên đường đi, thì càng tốt.

Ứng dụng vẫn đang trong quá trình hoàn thiện và còn rất nhiều điều cần giải quyết khi nói đến chủ đề và các tính năng tiềm năng. Vì vậy, nếu bạn biết một thử thách thú vị hoặc cấu trúc dữ liệu mà tôi chưa đề cập hoặc thấy điều gì đó bạn nghĩ rằng bạn có thể cải thiện, đừng ngần ngại mở một vấn đề hoặc gửi một yêu cầu kéo. ?

Nếu bạn chỉ muốn xem ứng dụng, không cần đọc nữa - ứng dụng này trực tuyến ở đây (cũng có sẵn trên https, sẽ đăng ký service worker cho bộ nhớ đệm ngoại tuyến).

Nếu bạn quan tâm đến mã, không cần tìm đâu xa.

Phần còn lại là tất cả những thứ nhàm chán về lý do tại sao và như thế nào :-)

Tại sao tôi xây dựng cái này

Động lực của tôi khi xây dựng ứng dụng này rất đơn giản: tôi muốn học và tôi muốn làm cho việc học trở nên dễ dàng và thú vị hơn. Quan trọng hơn, đó là lý do tại sao tôi muốn học những kỹ năng cụ thể này.

Trong hơn 18 tháng qua, tôi có thể tự tin nói rằng mình đã học cách viết mã. Mặc dù tôi vẫn ngại gọi mình là một lập trình viên. Và điều này không phải vì tôi không viết mã để kiếm sống (tôi không), mà ít nhiều là do hiện tượng hội chứng kẻ mạo danh mà tôi đã đề cập trước đó. Tôi biết cách xây dựng mọi thứ, chắc chắn. Nhưng cho đến gần đây, tôi biết rất ít về Khoa học Máy tính chính thức.

Bằng cách học các nguyên tắc cơ bản về CS, tôi hy vọng không chỉ cảm thấy tự tin hơn khi nghĩ mình là một lập trình viên mà còn giúp những người khác nhìn nhận tôi theo cách đó.

Lập trình viên tự học là một liều thuốc mà ngành công nghệ nhận thấy dễ nuốt hơn trong những năm gần đây. Đặc biệt là ở những khu vực như Thung lũng Silicon, nơi mà các bootcamps viết mã đã mọc lên trên mọi góc phố.

Tuy nhiên, vẫn còn một rào cản lớn cần vượt qua đối với hầu hết các lập trình viên hy vọng vào ngành mà không được đào tạo chính quy về Khoa học Máy tính.

Vì vậy, để đỡ bị đòn khi có bằng Cử nhân Nghệ thuật hơn là bằng Cử nhân Khoa học, tôi bắt đầu tự học một số khái niệm mà một sinh viên CS năm nhất hoặc năm hai có thể học. Tôi nghĩ rằng điều này sẽ bổ sung cho một số kỹ năng phát triển thực tế hơn của tôi và giúp những người khác nhìn nhận tôi nghiêm túc hơn với tư cách là một lập trình viên.

Tôi đã sử dụng một tập hợp các chủ đề được biết đến là phổ biến trong các cuộc phỏng vấn lập trình làm nền tảng mà tôi muốn đề cập.

Sắp xếp theo bong bóng, Sắp xếp theo lựa chọn, Sắp xếp chèn, Sắp xếp hợp nhất, Sắp xếp nhanh, Sắp xếp đống, Ngăn xếp, Hàng đợi, Danh sách được liên kết, Bảng băm và Cây tìm kiếm nhị phân. Phwewf…

Tôi cực kỳ sợ hãi trước hàng loạt vấn đề này, và đã cố gắng giải quyết chúng trong một thời gian khá dài.

Không muốn chấp nhận thất bại, cuối cùng tôi cũng bắt đầu tìm hiểu. Theo dõi các hướng dẫn, đọc mọi bài báo tôi có thể tìm thấy và chạy vòng quanh mình ngày này qua ngày khác.

Tuy nhiên, theo thời gian, một số khái niệm đã bắt đầu ăn sâu vào. Nhưng có một số vấn đề:

  1. Tôi đã cảm thấy buồn chán. Tôi thích giải quyết vấn đề, nhưng hãy đối mặt với nó, việc giải quyết vấn đề reverseLevelOrdercủa cây tìm kiếm nhị phân kém thú vị hơn nhiều so với việc giải quyết một vấn đề trong thế giới thực cho ứng dụng mới nhất của bạn.
  2. Điều này rất tốn thời gian. Tôi làm việc toàn thời gian (KHÔNG viết mã cả ngày) và thời gian rảnh rỗi để viết mã là vô cùng quý giá. Tôi biết mình sẽ mất hàng tháng trời cho việc này và tôi lo ngại rằng mình sẽ mất liên lạc với các kỹ năng thị trường hơn của mình.

Tất cả những thứ CS này là điều tuyệt vời khi bạn có, nhưng hãy đối mặt với nó, chúng tôi thường xuyên thuê các nhà phát triển web để xây dựng nội dung. Và không có quá nhiều ứng dụng thực tế cho hầu hết các khái niệm này trong quá trình phát triển web hàng ngày.

Đối với tôi, học những khái niệm này là một niềm tự hào và tôi sẽ không từ bỏ. Nhưng ưu tiên số một của tôi vẫn là thành thạo trong việc phát triển web thực tế.

Vì vậy, tôi quyết định đưa hai ý tưởng lại với nhau. Câu trả lời là xây dựng một ứng dụng đơn giản giúp tôi đạt được mục tiêu của mình giúp tôi rèn luyện tốt các kỹ năng cốt lõi của mình.

Đối với tôi, cách tốt nhất để học một cái gì đó (đặc biệt là một cái gì đó khô khan) là liên hệ nó với một cái gì đó bạn yêu thích. Vì vậy, khi tôi đang xây dựng ứng dụng này và thành công trong việc thực hiện nó, tôi cũng đang phát triển nội dung cho nó.

Bây giờ, việc học các thuật ngữ và cấu trúc dữ liệu là một phần cần thiết trong dự án mới nhất của tôi. Tất nhiên, bởi vì, việc xây dựng một ứng dụng chuẩn bị phỏng vấn có ích gì trừ khi bạn sắp sửa có vấn đề!

Cứ sau vài ngày, tôi lại học một thuật toán hoặc cấu trúc dữ liệu mới. Một khi tôi gần như có nó, tôi sẽ biên dịch các tài nguyên học tập và thêm nó vào ứng dụng. Bây giờ, tôi có thể thực hành nó nhiều lần trong một không gian làm việc siêu đơn giản mà tôi tự xây dựng. Thật tuyệt làm sao !?

Vấn đề chính là, tôi đã lấy một thứ mà tôi đã ấp ủ trong một thời gian dài và tìm ra cách để làm cho nó trở nên thú vị. Và chắc chắn, tôi đã thành công lớn hơn trong việc đạt được mục tiêu của mình nhờ nó.

Tôi đã xây dựng ứng dụng này cho tôi, nhưng tôi muốn chia sẻ nó với tất cả các bạn vì một lý do. Nếu ngay cả một người khác thấy CS-Playground-React hữu ích, tôi sẽ cảm thấy như mình đã làm xong phần việc của mình (hoặc ít nhất là một phần) để trả lại cho cộng đồng này.

Có rất nhiều lập trình viên sẵn sàng chia sẻ kiến ​​thức và kinh nghiệm của họ, và họ chỉ yêu cầu ít hoặc không có gì để đổi lại. Nếu không có một cộng đồng cởi mở như vậy, việc học viết mã của riêng bạn sẽ khó có thể thực hiện được.

Mười năm trước, có ít lựa chọn hơn khi nói đến học tự hướng dẫn. Vì vậy, tôi biết ơn mỗi ngày vì đã sống trong thời đại thông tin, nơi mà rất nhiều kiến ​​thức có thể dễ dàng tiếp cận.

Nó đã làm cho cuộc hành trình này trở nên khả thi đối với tôi và tôi hy vọng ai đó ngoài kia sẽ tình cờ xem được bài viết này và khám phá ra rằng hành trình của chính họ đã trở nên dễ dàng hơn một chút.

Tech Stack & Hacks

Trong trường hợp bạn quan tâm, tôi đã xây dựng ứng dụng này bằng React & React-Redux (mặc dù phiên bản đầu tiên là vanilla JS, CSS và HTML). Nó cũng sử dụng CodeMirror và React-Codemirror2 để nhúng trình chỉnh sửa vào trình duyệt (LƯU Ý: React-CodeMirror ban đầu không còn được duy trì và không hoạt động tốt với các phiên bản React mới hơn, vì vậy hãy đánh dấu sao cho repo của Scniro trên GitHub để chọn lên!).

Bảng điều khiển giả lập

Một chút hack cho phép tôi kích hoạt hành động redux mỗi khi người dùng gọi console.logvào mã của họ. Bằng cách này, tôi có thể nắm bắt các thông báo đã ghi và lần lượt giả lập một bảng điều khiển trong trình duyệt để hiển thị đầu ra của mã - điều mà tôi nghĩ là khá tuyệt! Bạn có thể chạy clearConsole()bất kỳ lúc nào bạn muốn để xóa các thông báo của bảng điều khiển giả.

Mã bền vững

Tôi muốn làm cho ứng dụng này cực kỳ dễ sử dụng. Vì vậy, thay vì triển khai cơ sở dữ liệu và yêu cầu người dùng đăng nhập, tôi đã chọn một cách tiếp cận đơn giản hơn để lưu tiến trình. Redux quản lý trạng thái của ứng dụng trong mỗi phiên và tôi sử dụng localStorageđể mã liên tục giữa các phiên. Ứng dụng sẽ truy xuất trạng thái đã lưu này vào lần truy cập tiếp theo của bạn và bù nước cho cửa hàng Redux bằng nó. Bằng cách này, bạn có thể tiếp tục ngay tại nơi bạn đã dừng lại.

Nếu vì lý do nào đó bạn muốn xóa tất cả tiến trình của mình, bạn có thể chạy resetState()bất kỳ lúc nào trong trình chỉnh sửa. Nếu bạn không muốn chuyển mã của mình vào bộ nhớ cục bộ, hãy để lại // DO NOT SAVEnhận xét trong mã của bạn trước khi điều hướng đi. Điều này sẽ ngăn không cho lưu bất kỳ mã nào, không chỉ cho tệp đó.

Như một lưu ý nhỏ, hóa ra có một gói thực hiện điều này cho bạn, được gọi là Redux-Persist (tôi đã phát hiện ra sau khi thực tế). Nhưng đối với một trường hợp sử dụng đơn giản, nếu bạn có thể làm điều gì đó với một vài dòng mã hoặc cài đặt gói NPM để làm điều tương tự? Tôi sẽ chọn cái trước mọi lúc. Rất có thể, bạn đang lưu hàng trăm dòng mã và một tập hợp phụ thuộc hoàn toàn mới. Đó luôn là sự cho và nhận và bạn phải quyết định khi nào giải pháp được tối ưu hóa cao (nhưng trọng lượng nặng hơn) tốt hơn giải pháp đơn giản của bạn.

Các ngăn có thể thay đổi kích thước

Mẹo cuối cùng mà tôi có là làm cho không gian làm việc linh hoạt và dễ sử dụng. Tôi muốn cung cấp cho người dùng khả năng thay đổi kích thước cả trình chỉnh sửa và bảng điều khiển, vì vậy tôi đã sử dụng một tập lệnh nhỏ mà tôi thấy có tên là simpleDrag.jsReact refsvà sự kỳ diệu của flexbox để biến điều này thành khả thi.

Cảm ơn vì đã đọc và chúc bạn hack vui vẻ!