3 giai đoạn cải thiện cuộc sống hàng ngày của bạn với tư cách là một nhà phát triển

giới thiệu

Bạn đã bao giờ cảm thấy khó chịu khi nghĩ đến việc phải trải qua tất cả các giai đoạn phát triển từng dự án mới từ đầu, cảm giác như sức nặng của sự đơn điệu đang kéo bạn xuống? Đó là nỗi thất vọng chung của các nhà phát triển - cảm giác rằng mọi dự án đều tuân theo cùng một quy trình tẻ nhạt, không còn nhiều chỗ cho sự sáng tạo.

Nhưng điều gì sẽ xảy ra nếu tôi nói với bạn rằng có một cách để thoát ra khỏi chu kỳ này và biến trải nghiệm phát triển Webflow của bạn thành nguồn vui và sự hài lòng? Bí quyết là sử dụng các phương pháp hay nhất và cải tiến sẽ cho phép bạn đưa quy trình phát triển Webflow của mình lên một tầm cao mới.

Trong hướng dẫn chuyên sâu này, chúng ta sẽ xem xét các kỹ thuật bạn có thể sử dụng để hợp lý hóa các bước phát triển thông thường, khắc phục những vấn đề thường gặp và khai thác toàn bộ tiềm năng của nền tảng. Vì vậy, hãy thắt lưng buộc bụng và sẵn sàng bước vào một thế giới nơi hiệu quả ngự trị.

Giai đoạn 1 - Thiết lập giai đoạn thành công

Khi bạn bắt đầu dự án Webflow mới, dự án đó cần có nền tảng vững chắc và hiệu quả để mở rộng quy mô từ đó. Mặc dù đây là giai đoạn chuẩn bị nhưng quá trình phát triển đã bắt đầu và có những điểm quan trọng cần xem xét sẽ giúp bạn thành công.

1.1 Hướng dẫn phong cách

Nếu bạn coi styleguide như một bản thiết kế chi tiết cho dự án của mình thì tính ưu việt của nó sẽ trở nên rõ ràng. Việc tạo một hướng dẫn kiểu đánh dấu sự khởi đầu của dự án, đảm bảo rằng các lớp và kiểu hoạt động xuyên suốt có thể dự đoán được. Vì vậy, trước khi bạn đi sâu vào phát triển các trang cụ thể, hãy dành thời gian để nghiên cứu về phong cách. Có 2 cách tiếp cận để tạo styleguide:

• tạo dự án cơ sở của riêng bạn từ đầu, phù hợp với sở thích của bạn hoặc
• sử dụng các khung nguồn mở được tạo sẵn như Finsweet , Relume hoặc Wizardry hoặc bất kỳ khung nào khác.

1.2 Biến

Nhờ bản cập nhật gần đây của Webflow, việc sử dụng các biến thậm chí còn trở nên trực quan và hiệu quả hơn. Bằng cách tổ chức các biến thành các nhóm được thiết kế tốt, bạn có thể đơn giản hóa việc phát triển và tăng hiệu quả. Tôi khuyên bạn nên xem xét việc tạo các nhóm như:

• Màu sắc phổ biến
• Lý lịch
• Chữ
• Cỡ chữ
• Kích thước văn bản Di động
• Vùng chứa (chiều rộng tối đa)
• Kích thước biểu tượng

Khi các nhóm này được tạo và liên kết với các lớp tương ứng, bạn có thể chuyển sang phát triển trang web một cách dễ dàng và tự tin.

Làm việc dựa trên việc tạo biến luôn là phương pháp hay nhất và Webflow tiếp tục truyền thống này trong lĩnh vực phát triển mã nguồn thấp. Các nhóm được xác định trước này cung cấp nền tảng vững chắc cho bất kỳ dự án nào, cho phép quá trình phát triển có cấu trúc và suôn sẻ hơn. Và nếu một khách hàng quay lại với bạn với yêu cầu thay đổi bảng màu từ tối sang sáng, bạn sẽ biết ơn bản thân vì đã sử dụng các biến số.

1.3 Ưu tiên khả năng tiếp cận

Khả năng tiếp cận thường được để lại ở giai đoạn cuối của dự án, nhưng tầm quan trọng của chúng không thể bị phóng đại. Ngay từ khi bắt đầu dự án, việc tích hợp tính năng trợ năng phải được đặt lên hàng đầu trong tâm trí bạn, ảnh hưởng đến mọi quyết định và thành phần mà bạn thêm vào.

Webflow đã cung cấp công khai một danh sách kiểm tra , sau khi nghiên cứu kỹ nó, bạn sẽ biết được những điểm chính trong vấn đề này.

Một trong những lợi ích nổi bật của Webflow là bảng điều khiển trợ năng tích hợp sẵn, cung cấp thông tin trực quan về cách những người khiếm thị nhìn nhận dự án của bạn. Tính năng này cho phép bạn xem dự án của mình thông qua nhiều bộ lọc trợ năng, mô phỏng các điều kiện xem khác nhau và nêu bật các khu vực có tiềm năng cần cải thiện.

Đó là về việc tạo ra một môi trường kỹ thuật số công bằng và toàn diện hơn. Bằng cách ưu tiên khả năng tiếp cận ngay từ đầu, bạn không chỉ cải thiện khả năng sử dụng của dự án mà còn thể hiện cam kết cân bằng quyền truy cập vào dự án của mình cho tất cả thành viên trong đối tượng, bất kể khả năng của họ.

Giai đoạn 2 - Làm chủ quá trình phát triển

Bây giờ bạn đang bước vào giai đoạn phát triển trực tiếp tất cả các trang theo đúng thiết kế. Dưới đây là một số đề xuất có thể giúp bạn vượt qua giai đoạn này một cách thành công:

2.1 Mã tùy chỉnh

"Dừng lại. Tại sao? Để làm gì? Nhưng sao có thể như vậy được?! Suy cho cùng, tương lai đã đến và tại sao chúng ta lại cần mật mã vào lúc này?" - bạn có thể nói. Nhưng hãy thành thật mà nói: không cần kiến thức về mã, bạn có thể bắt đầu hiểu về phát triển web và bắt đầu nhanh chóng sự nghiệp của mình nhưng vẫn duy trì tính cạnh tranh và tạo ra những điều phi thường bằng chức năng kéo và thả đơn giản. nền tảng mã thấp có vẻ không phải là sự thật. Vì vậy, chào mừng bạn đến với sự phát triển và học hỏi không ngừng mà tôi đã nói đến trong bài viết trước của mình.

2.1.1 HTML

Khi làm việc trên các nền tảng mã nguồn ngắn như Webflow, bạn chỉ nên dựa vào các phần tử div và văn bản để tạo cấu trúc. Nhưng đây là điểm khác biệt của chúng ta với chính mình ngày hôm qua, rằng ít nhất sau khi đọc bài viết của tôi, chúng ta phải chịu trách nhiệm về chất lượng của thành phẩm. Đảm bảo đánh dấu của bạn tuân theo các quy ước ngữ nghĩa bằng cách sử dụng các phần tử như <header>, <nav>, <main>, <aside>, <footer>, v.v. và điều chỉnh cấp độ tiêu đề để cải thiện độ rõ ràng và khả năng truy cập.

2.1.2 CSS:

• trong đầu hãy phân chia tất cả mã trong tương lai của bạn thành toàn cục và cục bộ. Thêm CSS toàn cầu vào thành phần Navbar. Bằng cách này, bạn sẽ có quyền truy cập vào nó từ bất kỳ trang nào và bạn cũng sẽ thấy cách áp dụng các kiểu ngay cả trước khi xuất bản dự án.

• Viết kiểu cho trạng thái di chuột trong mã, sử dụng truy vấn phương tiện. Phương pháp này đảm bảo rằng vị trí của người sở hữu chỉ được hiển thị trên màn hình nền:

  
  

 <style> @media screen and (hover:hover) { //Insert your code here... } </style>

• Viết các kiểu riêng biệt cho màn hình rộng 1024px để giải quyết các vấn đề về bố cục độc đáo dành riêng cho các thiết bị có kích thước cụ thể này.

  Mặc dù thật dễ dàng để tạo một thiết kế đáp ứng trong Webflow nhưng bố cục máy tính bảng bắt đầu ở chiều rộng 991 pixel. Hóa ra màn hình 1024 áp dụng tất cả các kiểu máy tính để bàn cho chính nó. Tuy nhiên, tôi vẫn chưa có một dự án nào mà tôi không phải viết riêng kiểu cho màn hình 1024. Tôi sẽ coi mục này là bắt buộc để xác minh. Việc có đăng ký style riêng hay không tùy thuộc vào từng dự án riêng lẻ.

• Thêm nhận xét vào mã CSS của bạn để cải thiện khả năng đọc và tạo điều kiện cộng tác với các nhà phát triển khác. Giúp cuộc sống của bạn và các nhà phát triển khác dễ dàng hơn trong quá trình chỉnh sửa dự án tiếp theo. Hãy để dự án theo cách bạn muốn nếu bạn kế thừa nó từ nhà phát triển trước đó.

 <style> /* About page Start */ //Insert your code here... /* About page End */ </style>

• Thay vì chỉ dựa vào hoạt ảnh Webflow, tôi thực sự khuyên bạn nên sử dụng hoạt ảnh CSS để giúp trang của bạn dễ dàng và hiệu quả hơn mà không ảnh hưởng đến hiệu suất trang.

  Công cụ hoạt hình tích hợp Webflow giúp người mới bắt đầu tạo một trang web tốt với nhiều tương tác dễ dàng hơn. Tuy nhiên, nếu chúng ta đang nói về các phương pháp phát triển nâng cao, điều quan trọng cần lưu ý là hoạt ảnh CSS cực kỳ nhẹ và không làm chậm trang khi có sự hiện diện của nó. Ngược lại, hoạt ảnh luồng web, về cơ bản chỉ nhằm mục đích thay đổi thuộc tính CSS của các phần tử, hoạt động thông qua JS và do đó làm chậm trang. Điều này không đáng chú ý ở các dự án nhỏ, nhưng lại thấy rõ ở những dự án lớn. Trong mọi trường hợp, tôi khuyên bạn nên sử dụng CSS nhiều nhất có thể cho bất kỳ dự án nào, thay vì hoạt ảnh Webflow gốc, ngay cả khi thực hành. Chúng ta nhớ rằng một thói quen xuất hiện sau nhiều lần lặp lại . Hãy hình thành nó.

• Nếu người dùng không có kế hoạch tương tác với hoạt ảnh lottie, thì tốt hơn hết bạn nên sử dụng tệp mp4 thay vì .json và thậm chí là .json được tối ưu hóa. Hiệu suất trong Safari sẽ cảm ơn bạn vì điều đó.

2.1.3 JavaScript:

Đây là những phương pháp hay nhất từ lâu đã được coi là đương nhiên:

• Làm theo các phương pháp hay nhất về vị trí đặt JavaScript, bao gồm sử dụng cài đặt chung cho tập lệnh dự án toàn cầu và cài đặt trang cho tập lệnh cục bộ.

• Sử dụng thuộc tính <async> và <defer> cho các tập lệnh có thể tải song song để tối ưu hóa thời gian tải trang.

  
  

2.2 Thành phần luồng web

Tần suất khi nghiên cứu thiết kế dự án của mình, bạn có tự hỏi mình câu hỏi: Tôi có thể sử dụng những yếu tố lặp lại nào trong dự án làm mẫu trong các trang khác nhau không? Các thành phần trong Webflow cho phép bạn duy trì quy trình thiết kế nhất quán, hiệu quả và có thể mở rộng bằng cách tạo các khối có thể tùy chỉnh từ các phần tử và phần tử con. Bạn có thể sử dụng lại các khối đó trên trang web của mình và sửa đổi chúng ở một nơi duy nhất để tránh sửa đổi riêng lẻ từng bố cục định kỳ (nguồn - https://university.webflow.com/lesson/comComponents?topics=layout-design ).

Thường thì điều này có thể là:

• Thanh điều hướng
• Chân trang
• Nút - nếu nó không chuẩn, có thiết kế và hiệu ứng tùy chỉnh và/hoặc cấu trúc phân nhánh.
• Biểu ngữ CTA - một hoặc hai biến thể của nó thường được sử dụng trong suốt dự án.
• Và biểu tượng được sử dụng nhiều hơn của tôi là Phần - phải có một phần trống với thẻ và một lớp, bên trong nó tất cả các lớp tiêu chuẩn bao gồm vùng chứa, Tiêu đề 2, đoạn văn và một số khối div trống. Đây là thành phần được sử dụng phổ biến nhất mà bạn sẽ sử dụng, tôi hứa với bạn. Chỉ cần thêm nó, hủy liên kết và hoàn thành phần dev. Bằng cách thêm nó làm cơ sở, bạn có thể tiết kiệm rất nhiều thời gian thay vì thêm từng khối div riêng biệt.

Bằng cách sử dụng mã, bạn có thể mở rộng khả năng của các thành phần Webflow và cung cấp cho khách hàng một hệ thống quản lý dự án cực kỳ linh hoạt mà không cần truy cập vào cấu trúc trang HTML. Đây là một cách tiếp cận hoàn toàn mới để phát triển web, cho phép khách hàng kiểm soát nhiều khía cạnh thiết kế của dự án sau khi nhà phát triển hoàn thành dự án. Trong tương lai, khách hàng sẽ có thể dễ dàng tạo các trang mới một cách độc lập dựa trên các thành phần đã được tạo. Và chỉ khi có nhu cầu phát triển các yếu tố mới về cơ bản thì mới cần thuê một nhà phát triển. Khi làm việc với các thành phần, khách hàng hầu như không có cơ hội phá hủy cấu trúc HTML được chuẩn bị hoàn hảo của bạn (tuy nhiên, khách hàng của chúng tôi thường rất có khả năng).

2.3 Nhóm tài sản truyền thông

Sử dụng nhóm các nội dung để giúp tìm và quản lý chúng dễ dàng hơn. Ví dụ: bạn có một thanh điều hướng đồ sộ và có nhiều liên kết có biểu tượng trong đó. Nhà thiết kế đã chuẩn bị sẵn một số phần, hứa sẽ hoàn thành phần còn lại trong 3 ngày và phần cuối cùng vẫn đang được khách hàng xem xét. Trong khi nhà thiết kế đưa ra các tùy chọn mới, sau đó khách hàng xem xét một nửa trong số đó, chỉnh sửa và phê duyệt nửa còn lại và cuối cùng gửi chúng cho bạn để phát triển, rất có thể bạn đã có nhiều hình ảnh khác trong bảng nội dung. Hình ảnh biểu tượng sẽ bị hỏng và việc tìm kiếm/thay thế chúng trong tương lai sẽ bất tiện. Trong trường hợp này, việc nhóm tài sản sẽ giúp cuộc sống dễ dàng hơn. Việc nhóm cho phép bạn giữ tất cả các phương tiện trong dự án của bạn sạch sẽ và có tổ chức.

2.4 Tích trữ vào thư mục Lưu trữ để lưu:

• phiên bản tĩnh của trang СMS động . Trong trường hợp có bất kỳ thay đổi hoặc chỉnh sửa nào, bạn sẽ dễ dàng thực hiện hơn nhiều ở phiên bản tĩnh và sau đó chuyển nó sang trang СMS. Điểm đặc biệt của các trang СMS trong Webflow là khi bạn kết nối tất cả các phần tử cần thiết với các trường tương ứng trong Bộ sưu tập, bạn sẽ không thể sao chép phần tử có kết nối này và chuyển nó sang một trang tĩnh.

• Một trang có phiên bản ban đầu của các phần tử. Việc thường xuyên thực hiện nhiều chỉnh sửa buộc chúng tôi phải cẩn thận và không loại bỏ những gì đã được xây dựng khỏi dự án. Di chuyển cái này đến trang lưu trữ và để nó cho đến thời điểm tốt hơn.

• Trang thử nghiệm cho các thí nghiệm.

  
  

Giai đoạn 3 - Chỉnh sửa cuối cùng

Điều quan trọng cần làm khi kết thúc dự án trước khi chuyển nó cho khách hàng, để bạn không có cảm giác rằng dự án của bạn hiện đã thực sự thăng cấp:

3.1 Vệ sinh công trình:

• loại bỏ các lớp và hình ảnh động không sử dụng.

• xóa nhận xét, mã không sử dụng.

• loại bỏ phương tiện không sử dụng. Nếu có nhiều nội dung không cần thiết trong bảng điều khiển và không thể xóa riêng lẻ, tôi khuyên bạn nên hack : xóa tất cả nội dung - xuất bản dự án - tải lại luồng web - và chỉ truy cập nội dung bảng điều khiển những phương tiện được sử dụng Trong dự án.

  
  

3.2 Tạo hướng dẫn sử dụng Project cho khách hàng.

Ngoài trang hướng dẫn phong cách, cần có một trang mô tả cách sử dụng dự án đã hoàn thành. Một nhà phát triển giỏi là người nghĩ về cách khách hàng sẽ quản lý dự án trong tương lai. Việc thực hiện các thay đổi sẽ dễ dàng như thế nào và khách hàng sẽ có mức độ tự do nào trong việc quản lý chúng. Nhờ có webflow, điều này có thể đạt đến mức hoàn hảo nhất có thể. Có kiến thức CSS và hiểu biết về nguyên tắc hoạt động của các thành phần luồng web, bạn có thể kết hợp một dự án trong đó sẽ dễ dàng thay đổi các trang hiện tại hoặc tạo trang mới.

3.3 Đặt tên riêng cho các bản sao lưu.

Nguyên tắc mô tả áp dụng cho mọi thứ mà bạn, với tư cách là nhà phát triển, đặt tên cho nó. Bất kỳ phần nào của dự án đều phải trực quan đối với bạn và đồng nghiệp của bạn trong tương lai.

Phần kết luận

Để kết luận, hãy tóm tắt ngắn gọn những điểm chính mà bạn nên tập trung vào việc cải thiện cuộc sống hàng ngày của mình với tư cách là một nhà phát triển.

Giai đoạn 1 - Chuẩn bị

• Tạo Styleguide để đảm bảo tính nhất quán và khả năng dự đoán trong các yếu tố thiết kế.
• Thiết lập các biến để hợp lý hóa việc phát triển và nâng cao hiệu quả
• Ưu tiên Khả năng truy cập ngay từ đầu để tạo các trang web toàn diện và thân thiện với người dùng.

Giai đoạn 2 - Phát triển trực tiếp

• Thêm sức mạnh mã hóa như một bộ kỹ năng có giá trị để mở ra những khả năng vô tận trong phát triển web.
• Sử dụng các thành phần Webflow làm công cụ mạnh mẽ để kiểm chứng dự án của bạn trong tương lai.
• Sắp xếp tài sản truyền thông thành các nhóm để dễ dàng truy cập và quản lý.
• Duy trì một thư mục Lưu trữ để lưu trữ các phần tử không sử dụng để sử dụng sau này.

Giai đoạn 3 - Về thẳng nhà

• Dọn dẹp các phần tử và tài sản không sử dụng để tối ưu hóa hiệu suất dự án.
• Tạo Hướng dẫn khách hàng để tạo điều kiện thuận lợi cho việc bàn giao và quản lý khách hàng liền mạch.
• Lưu một bản sao lưu có ý nghĩa được gọi là dự án của bạn để bảo vệ khỏi mất dữ liệu và đảm bảo tính liên tục.

Việc áp dụng các phương pháp hay nhất là điều cần thiết để tối đa hóa hiệu quả và năng suất trong quá trình phát triển Webflow. Bằng cách làm theo cách tiếp cận này, bạn sẽ không chỉ tiết kiệm thời gian cho các công việc lặp đi lặp lại mà còn giải phóng các nguồn tài nguyên quý giá để thư giãn, phát triển bản thân và tạo ra các dự án sáng tạo. Hãy thay đổi quy trình làm việc của chúng ta và phát huy khả năng sáng tạo của mình để tạo ra những thứ tuyệt vời hơn nữa.

Cảm ơn vì đã đọc!

Tôi rất vui được chia sẻ những suy nghĩ và kinh nghiệm của mình để giúp cuộc sống của các nhà phát triển khác trở nên dễ dàng hơn. Bằng cách chia sẻ những gì tôi đã học được, tôi hy vọng sẽ giúp quá trình phát triển diễn ra suôn sẻ hơn và tạo ra trải nghiệm tốt hơn cho mọi người.