Dự án Máy tính: Tại sao nó dễ dàng hơn nhưng lại đầy rào cản

Xin chào, tôi là Blazej,

Làm việc trong Dự án Máy tính khá thú vị và tôi có thể nói là một trải nghiệm khác. Khác với Etch-a-Sketch có vẻ khó hơn. Thế thì làm sao có thể được?

Tôi đoán câu trả lời có thể không nằm ở độ khó của bài tập mà nằm ở điều gì đó khác. Hãy bắt đầu từ đầu.

Bắt đầu dự án máy tính

Tôi bắt đầu làm việc trên Máy tính vào ngày 2 tháng 5 năm 2024. Phiên đầu tiên mất ba giờ, trong thời gian đó tôi đã thiết lập và chạy nó. Lúc đó là khoảng giữa trưa nên tôi quyết định thực hiện cam kết cuối cùng, ăn tối và tập thể dục.

Tôi muốn viết mã thêm một chút vào chiều hôm đó vì tôi biết bạn tôi sẽ đến thăm vào ngày hôm sau và cô ấy sẽ ở lại ba đêm.

Giống như những người theo chủ nghĩa Odinist tận tâm khác, tôi không muốn ngừng viết mã, đặc biệt là với Máy tính, dự án mà tôi tin là dự án quan trọng nhất trong Foundations.

Cảm hứng bất ngờ

Tôi đang định tắt máy tính thì video YouTube của ForrestKnight hiện lên. Tôi xem một chút và dừng lại ngay sau khi anh ấy nói về việc thích viết mã.

Tôi đã suy nghĩ kỹ về điều này và đây là quan điểm của tôi với tư cách là một người mới bắt đầu vừa viết mã xong và vẫn thường xuyên tự hỏi mình câu hỏi này.

Câu trả lời không đơn giản đối với một người như tôi, người đã sử dụng máy tính từ nhỏ, chơi nhiều trò chơi và có hiểu biết cơ bản về cách mọi thứ hoạt động.

Tuy nhiên, tôi chưa bao giờ viết mã trước đây!

Trải nghiệm mã hóa ban đầu

Tuy nhiên, tôi nhận thấy rằng tôi càng viết mã và thấy nó hoạt động bao nhiêu thì tôi càng thích thú với quá trình này bấy nhiêu. Điều này đặc biệt đúng với máy tính, nhìn chung hoạt động rất trơn tru và tôi đã cố gắng tránh bị KẮM NGHIÊM TRỌNG—à, hầu như vậy. Tôi sẽ đề cập đến điều đó sau.

Dự án này cảm thấy dễ dàng hơn đáng kể so với dự án Etch-a-Sketch, nơi tôi đã phải vật lộn với việc triển khai logic thay đổi màu gradient trong hai ngày. Viết mã chắc chắn không hề dễ dàng, nhưng đối với dự án này, tôi đã dành khoảng 1,5 đến 2 giờ mỗi ngày trong bốn ngày và đó là một trải nghiệm bổ ích và dễ quản lý.

Mỗi lần mở VSCode, tôi cảm thấy rất hiệu quả, điều này giúp tôi giải quyết công việc một cách nhanh chóng. Điều thú vị nhất khi làm việc đó là tôi có thể tưởng tượng ra những lựa chọn khác cũng có thể giải được bài tập này.

Tôi cảm thấy mình giống như một đứa trẻ đang chế tạo một chiếc ô tô Lego Technic điên rồ nào đó và tưởng tượng những tính năng nào cần bổ sung lại. Cảm thấy vui vẻ.

Tận hưởng quá trình

Chính xác thì tôi có ý gì khi nói điều đó? Tôi biết tôi có thể tạo một hàm với các sự kiện cho tất cả các nút chữ số thay vì tạo chín hàm riêng biệt.

Tuy nhiên, tôi đã quên cách thực hiện đúng cách và quyết định tiếp tục với 9 cái khác nhau, nhưng tôi đã tự hứa với mình rằng tôi sẽ quay lại và đọc tài liệu cung cấp một số bài học về cách giải quyết vấn đề này. Như tôi nghĩ tôi đã làm.

Tôi đã dự đoán mình sẽ bị mắc kẹt trong việc gì đó trong khoảng năm tiếng đồng hồ nữa, nhưng điều đó thực sự chưa bao giờ xảy ra. Tôi đã làm cho nó hoạt động với 244 dòng mã.

Những thách thức với CSS

Bây giờ, đã đến lúc bắt đầu thử nghiệm CSS và tạo phong cách cho dự án này một chút. Vâng, đó là lúc tôi bị mắc kẹt. Nó dường như khó hơn việc tạo JavaScript.

Tôi không thể tin được! Tôi biết mình cần sử dụng Flexbox cho dự án này, nhưng các nút trông hơi khác so với Etch-a-Sketch mà tôi đã thực hiện trước đó. Trong Etch-a-Sketch, tôi được yêu cầu tạo lưới bằng các vòng lặp:

Bất cứ khi nào tôi gặp khó khăn với Flexbox, tôi luôn xem bài đăng trên blog của Josh. Không có lời giải thích nào tốt hơn về cách chúng hoạt động, IMHO.

Tuy nhiên, tôi không chắc liệu nó có hoạt động với máy tính hay không, vì không phải tất cả các nút đều như nhau. Ví dụ, tôi muốn 0 lớn hơn.

Tôi cuộn xuống bài viết vì tôi nhớ ra rằng CSS Grid đã được đề cập ở đó. Hóa ra tôi thực sự cần phải sử dụng nó ở đây.

Hơn nữa, máy tính được Odin đưa ra làm ví dụ cũng được thiết kế bằng CSS Grid.

Khám phá lưới CSS

Tại thời điểm này, tôi hơi lạc lõng vì theo tôi nhớ, chúng tôi hoàn toàn không chạm vào lưới.

Tôi bắt đầu tra cứu nó trên Google. Tôi đã tìm thấy gì? Một bài viết lớn với lời giải thích khá nâng cao về cách sử dụng nó. Tôi nghĩ chưa đến lúc làm việc đó và cho rằng chúng tôi sẽ được đưa vào lưới điện sau này.

Trên hết, chỉ có Flexbox được đề cập trong bài tập nên vâng, TÔI HY VỌNG chúng ta cũng sẽ học về lưới. Nếu không, tôi sẽ tự mình quay lại vào một lúc nào đó.

CẬP NHẬT NHỎ - ngày hôm sau, tôi thấy bài đăng này trên Odin Discord:

Điều chỉnh cuối cùng và thiết kế giao diện người dùng

Tôi quyết định sử dụng một vài div và chỉ tập hợp lại các nút trong HTML

Sau một buổi học khác, chiếc máy tính trông quen thuộc với một thiết bị bình thường.

Thêm hỗ trợ bàn phím

Bước cuối cùng đối với tôi là hỗ trợ bàn phím.

Chết tiệt! Điều đó không hề dễ dàng và tôi đã phải quay lại bài học sự kiện và đọc qua tài liệu nhiều lần để hiểu cách hoạt động của các phím bàn phím này.

Nó khá khó khăn vì sự kiện sủi bọt làm tôi bối rối. Đó là thời điểm thích hợp để tạo ra 1 chức năng bấm nút và 2 lệnh gọi cho nó. Một cái dùng để 'nhấp chuột' và cái thứ hai dùng để 'nhấn phím'.

Tôi đã cố gắng sắp xếp tất cả các chữ số và nút bằng nhưng quyết định không sử dụng các toán tử vì tôi sẽ phải thay đổi logic của mình với đối tượng toán tử.

Thiết lập này có vẻ dễ nắm bắt hơn nếu tôi cần xem lại nó sau.

Tuy nhiên, có thể tôi đã sai nên đừng coi đó là điều hiển nhiên.

Dự án đã hoàn thành có thể được nhìn thấy ở đây:

MÁY TÍNH

Suy ngẫm và bài học kinh nghiệm

Bài học ở đây là gì? Tôi rất thích quá trình tạo và thiết kế một ứng dụng cũng như học được RẤT NHIỀU về các sự kiện. Tôi thực sự khuyên bạn nên thực hiện quy trình tín dụng bổ sung với quy trình này!

Nếu bạn thích câu chuyện này và thấy các mẹo này hữu ích, hãy theo dõi tôi trên Twitter để biết thêm thông tin cập nhật và mẹo viết mã. Tôi rất muốn nghe về những thách thức và thành công khi viết mã của bạn trong phần bình luận bên dưới!