Câu chuyện về hai trang web

Tầm quan trọng của tiến độ chậm và tự phản ánh

Ảnh của Tanya Nevidoma trên Bapt

Này, vì bạn đang học lập trình, bạn có nghĩ rằng bạn có thể làm cho tôi một trang web không?

Tôi chắc chắn rằng tất cả chúng ta đã nghe câu hỏi này trước đây. Nó đi kèm với lãnh thổ là một nhà phát triển web. Lần đầu tiên tôi nghe thấy nó là vào tháng 3 năm 2016. Vợ tôi là một nhà thiết kế đồ họa đang tìm cách đột nhập vào lĩnh vực UI / UX. Cô muốn thể hiện kỹ năng của mình trong một danh mục đầu tư trực tuyến.

Tôi chỉ học được cách phát triển web trong 3 tháng tại thời điểm đó (Tôi đã bắt đầu với tư cách là một Nghị quyết năm mới). Tôi đã hoàn thành một vài khóa học HTML, CSS và JavaScript và nóng lòng muốn đào răng vào một dự án ngon ngọt.

Tôi có thể làm điều đó cho bạn. Nên mất quá lâu.

Phải mất bốn tháng.

Tôi nhận ra khá nhanh rằng tôi đã cắn quá nhiều. Tuy nhiên, trong khi tôi ngây thơ, tôi cũng đã quyết tâm. Tôi đặt mọi thứ tôi có vào trang web đó. Khi tôi đang làm việc trong công việc của mình, tôi đã viết mã hoặc tìm kiếm Stack Overflow.

Chủ yếu là tìm kiếm Stack Overflow, rất nhiều trong số đó.

Bất chấp sự căng thẳng và căng thẳng mà dự án gây ra cho tôi, tôi không thể cảm thấy tự hào hơn khi tôi thấy nó trực tiếp lần đầu tiên trên trình duyệt của mình.

Đó là công việc của tôi. Tôi đã làm nó

Sử dụng trang web mới của cô ấy, vợ tôi đã có thể tìm thấy một vai trò là nhà thiết kế UX ở thành phố New York. Cả hai chúng tôi đều bỏ việc và chuyển từ Seattle. Điều này đánh dấu sự khởi đầu của lần lặn đầu tiên của tôi vào lập trình.

Hai năm sau

Bạn có nghĩ rằng bạn có thể cập nhật trang web của tôi không?

Đó là tháng 6 năm 2018 và khá nhiều thứ đã thay đổi. Trong hai năm ngắn ngủi đó, vợ tôi đã đi từ nhà thiết kế UX, sang nhà thiết kế sản phẩm, để thiết kế cho một công ty khởi nghiệp. Cô ấy muốn một bản cập nhật mới để phản ánh sự phát triển đó.

Vâng Vâng, tôi có thể làm điều đó.

Tôi đã cố gắng để tự tin nhất có thể, nhưng tôi đã do dự. Tôi nhớ lần đầu tiên xây dựng trang web của cô ấy mất bao lâu. Tôi đã chắc chắn rằng tôi có sức chịu đựng và sức chịu đựng về tinh thần cho lần thứ hai. Nó đã làm tôi kiệt sức.

Sự tự tin của tôi đã bị lung lay hơn nữa khi tôi bắt đầu đào bới mã cũ. Tôi đã nhìn vào nó trong hai năm. Nó đã có tuổi già. Mặc dù giao diện người dùng vẫn hoạt động tốt và nhìn tốt, mặt trước là một mớ hỗn độn. Có vẻ như nó được giữ bằng băng keo.

Xét về mã của Mùi, mùi của nó, nó bốc lên như một đống lửa.

Trong khi vợ tôi chỉ muốn một bản cập nhật, việc điều hướng qua cơ sở mã đó rất tốn công. Nó sẽ dễ dàng hơn để bắt đầu từ đầu. Tôi đã rất vui mừng khi có ý tưởng bắt đầu lại. Nhưng trong khi vợ tôi đã trưởng thành hơn rất nhiều trong vài năm qua, tôi cũng vậy. Tôi lấy đó làm cơ hội để suy ngẫm về việc tôi đã học được bao nhiêu.

Bắt đầu mới

Ngày đầu tiên tôi bắt đầu xây dựng trang web mới của vợ tôi, tôi biết rằng nó sẽ mất 3 tháng. Tôi đã có thể làm nhiều hơn trong ngày đầu tiên đó so với trước đây tôi đã có trong một tuần. Cuối cùng, chỉ mất khoảng một tuần thời gian để hoàn thành cập nhật.

Bạn có thể thấy nó sống ở đây: irissprague.co

irissprague.co

Trong khi tôi rất ấn tượng với việc tôi có thể xây dựng nó nhanh như thế nào, tôi đã không chắc chắn chính xác tại sao nó lại nhanh hơn nhiều như vậy. Chắc chắn, tôi đã có thêm hai năm dưới vành đai của mình, nhưng chính xác thì tôi đã học được gì trong hai năm đó?

Công cụ tận dụng

Điều đầu tiên tôi nhận thấy là khả năng tận dụng các công cụ của tôi. Bạn thấy đấy, hai năm trước, tôi biết rất ít về các công cụ nguồn mở. Trang web đầu tiên của vợ tôi được xây dựng bằng HTML, CSS, JavaScript và PHP. Trong khi đó không phải là xấu về bản thân, tôi không có khái niệm về các mẫu xem.

Tôi đã viết từng tệp HTML từ đầu. Để duy trì tính nhất quán, tôi đã sao chép mọi yếu tố lặp lại. Thật không may, điều đó có nghĩa là thay đổi một trang có nghĩa là thay đổi nhiều trang.

Trong lần thử thứ hai, tôi đã tránh được tất cả những giờ sao chép và gỡ lỗi bằng cách sử dụng các mẫu HAML và Flexbox.

Cảm ơn Flexbox

Tự động hóa quá trình xây dựng

Một lý do khác khiến trang web đầu tiên mất quá nhiều thời gian để xây dựng là vì tôi không có khái niệm về quy trình xây dựng. Trong toàn bộ 3 tháng tôi đang xây dựng trang web danh mục đầu tiên của vợ tôi, tôi đã làm tất cả tại địa phương trên máy của mình.

Bất cứ khi nào tôi thực hiện một thay đổi lớn, tôi sẽ phải làm phiền vợ tôi để xem xét kỹ lưỡng những thay đổi trên máy tính xách tay của tôi. Nếu điều đó đủ tệ, thì đã đến lúc đẩy những thay đổi của tôi lên một máy chủ sản xuất, tôi không biết bắt đầu từ đâu.

Tôi đã rất tập trung vào việc làm cho trang web hoạt động đến mức tôi thậm chí đã xem xét cách tôi sẽ đưa nó lên internet. Tôi chưa bao giờ nghe nói về DigitalOcean, Docker hoặc Heroku.

Dịch vụ lưu trữ duy nhất tôi biết vào thời điểm đó là Godaddy. Godaddy sử dụng cPanel để tải tệp lên máy chủ. Thật không may, cPanel chỉ cho phép các tệp được tải lên cùng một lúc.

Phải mất hàng giờ. Và bất cứ khi nào tôi cần thay đổi bất kỳ tài sản nào, tôi sẽ phải tải lên lại các tệp đã chỉnh sửa đó theo cách thủ công.

Với những sai lầm đó đã bị đốt cháy trong trí nhớ của tôi, tôi đã đầu tư vào việc cải thiện quá trình xây dựng của mình. Tôi đã tự động hóa quy trình làm việc CI / CD của mình bằng Docker Compose. Với một lệnh docker-compose up -d, tôi có thể triển khai toàn bộ trang web để sản xuất.

Tôi thậm chí đã tạo một tập lệnh bash nhỏ để bó các lệnh Git và Docker của mình lại với nhau.

Mọi thay đổi tôi thực hiện có thể được thực hiện trong vòng chưa đầy một phút. cPanel là một điều của quá khứ.

Tôi cũng đã sử dụng một giọt DigitalOcean để vợ tôi có thể thấy bất kỳ thay đổi nào tôi đã thực hiện. Cô ấy có thể xem các chỉnh sửa trên máy của mình bằng cách truy cập địa chỉ IP của Dropplet. Không còn phát triển chỉ địa phương.

Vợ tôi và tôi cũng đã cải thiện đường ống thiết kế để phát triển. Trong năm 2016, các thiết kế chủ yếu được thực hiện thông qua Photoshop và tín hiệu bằng miệng.

Bạn có thể thay đổi điều này không? Bạn có thể thêm điều đó không?

Không ai trong chúng tôi thích nó.

Lần này, vợ tôi và tôi đã sử dụng Invision để hợp tác. Tôi có thể thấy sự thay đổi thiết kế của cô ấy trong thời gian thực và thực hiện chúng trong vài phút.

Khớp nối điện tốt nhất của nó.

Cải thiện giải quyết vấn đề

Điều này đã giành được một sự ngạc nhiên, nhưng trong 2 năm qua, tôi đã trở thành một lập trình viên giỏi hơn và nhanh hơn. Nhưng cải tiến quan trọng nhất là khả năng giải quyết vấn đề của tôi.

Tôi đã không cần tìm kiếm cách tạo lưới trong CSS hoặc xây dựng một băng chuyền hình ảnh trong JavaScript. Tôi đã có các công cụ và nền tảng tôi cần để tự giải quyết những vấn đề đó. Tôi có thể dành nhiều thời gian hơn trong dòng chảy và ít thời gian hơn để giải quyết mọi vấn đề tôi gặp phải.

Tôi cũng biết làm thế nào để làm nhiều hơn với ít hơn. Trang web đầu tiên của tôi có hàng trăm dòng JavaScript để thực hiện các hoạt ảnh đơn giản nhất. Trang web mới chỉ có 70 dòng. Chuyển tiếp CSS và khung hình chính xử lý phần còn lại.

Ưu tiên CSS hơn JavaScript cải thiện hiệu suất của mỗi trang bằng cách giảm vẽ DOM. Mặc dù vậy, đó không phải là tối ưu hóa duy nhất tôi đã thực hiện.

Tối ưu hóa

Hai năm trước tôi không biết làm thế nào để tạo một trang web biểu diễn và tôi đã không quan tâm. Tôi chỉ muốn những thứ chết tiệt để làm việc. Bây giờ tôi đã hiểu các nguyên tắc cơ bản và suy nghĩ ở mức độ trừu tượng cao hơn, tôi có thể tập trung vào giải quyết các vấn đề lớn hơn. Cụ thể, hiệu suất và trải nghiệm người dùng.

Bằng cách biên dịch các tệp tĩnh, phục vụ chúng thông qua CDN DigitalOcean và lưu trữ chúng trong trình duyệt, trang web được cập nhật có thể tải với tốc độ sáng.

Đánh giá hiệu suất từ ​​Pingdom

Vào năm 2016, câu nói trước đó sẽ giống như tiếng vượn đối với tôi. Ôi, thời thế đã thay đổi.

Dành thời gian để đánh giá cao bạn đã học được bao nhiêu

Vậy tại sao tôi nói tất cả những điều này? Toot sừng của riêng tôi? Có lẽ một chút.

Lý do thực sự là, tôi muốn nhấn mạnh tầm quan trọng của việc tự suy nghĩ. Tôi đã do dự để cập nhật trang web của vợ tôi, bởi vì tôi đã nhận ra rằng tôi đã tăng trưởng bao nhiêu. Thật khó để thấy số tiền bạn tiến bộ hàng ngày.

Kiến thức tích lũy từng inch một. Nhưng bằng cách nhìn lại một khoảng thời gian dài, những inch đó trở thành những bước nhảy vọt. Trong văn hóa Nhật Bản, ý tưởng cải tiến nhỏ hàng ngày này được biết đến với tên gọi là kaizen '.

Đối với tôi, điều quan trọng là phải nhớ tôi đã ở đâu khi bắt đầu sự nghiệp. Hình dung sự tiến hóa của tôi giữ cho tôi có động lực khi tôi đạt đến cao nguyên. Ebbs và dòng chảy là không thể tránh khỏi. Cam kết tiến bộ từng inch một là cách tôi tiến tới mục tiêu của mình.

Vì vậy, như một sự tôn vinh để làm chủ và ghi nhớ nguồn gốc của tôi, trang web đầu tiên của vợ tôi sẽ sống như một tên miền phụ của trang web cá nhân của tôi. Bạn có thể nhìn thấy nó cho mình tại kaizen.sunli.co.

Tôi muốn hét lên đặc biệt với Launch School vì đã dạy cho tôi tầm quan trọng của con đường chậm chạp để làm chủ. Đó là một mục tiêu tôi sẽ tiếp tục theo đuổi.

Và một tiếng hét khác với vợ tôi Iris Sprague vì đơn giản là tuyệt vời.

Vì vậy, cho dù bạn đã lập trình được 10 tháng, 10 năm hay hơn thế nữa, hãy dành thời gian để suy ngẫm về mức độ bạn đã học được. Sử dụng nó làm nhiên liệu cho những lúc cảm thấy chậm. Đầu tư vào con đường chậm để làm chủ có kết quả gộp. Dần dần, lúc đầu, nhưng với đủ thời gian, bạn sẽ bay cao như tên lửa.

Nếu bài viết này đã gây được tiếng vang với bạn, vui lòng để lại một số tiếng vỗ tay và cho tôi biết bạn đã phát triển như thế nào trong sự nghiệp của chính mình. Tôi rất thích nghe về nó!

Như mọi khi, mã hóa hạnh phúc!