Bir Geliştirici Olarak Günlük Yaşamınızı İyileştirmenin 3 Aşaması

Giriş

Her yeni projeyi geliştirmenin tüm aşamalarını yeniden sıfırdan geçmek zorunda kalma düşüncesi, monotonluğun ağırlığının sizi aşağıya çektiğini hissettiğiniz oldu mu hiç? Bu, geliştiriciler arasında yaygın bir hayal kırıklığıdır; her projenin aynı sıkıcı süreci takip ettiği ve yaratıcılığa çok az yer bıraktığı hissi.

Peki ya size bu döngüden kurtulmanın ve Webflow geliştirme deneyiminizi zevk ve tatmin kaynağına dönüştürmenin bir yolu olduğunu söylesem? İşin sırrı, Web akışı geliştirme iş akışınızı bir sonraki seviyeye taşımanıza olanak tanıyacak en iyi uygulamaları ve yenilikleri kullanmaktır.

Bu ayrıntılı kılavuzda, rutin geliştirme adımlarını kolaylaştırmak, sık karşılaşılan sorunların üstesinden gelmek ve platformun tüm potansiyelini ortaya çıkarmak için kullanabileceğiniz tekniklere bakacağız. O halde kemerlerinizi bağlayın ve verimliliğin hüküm sürdüğü bir dünyaya adım atmaya hazırlanın.

Aşama 1 - Başarı için Sahneyi Hazırlamak

Yeni Webflow projenize başladığınızda, oradan ölçeklendirmek için güçlü ve verimli bir temele sahip olması gerekir. Bu bir hazırlık aşaması olsa da geliştirme süreci zaten başlamıştır ve sizi başarıya hazırlayacak dikkate almanız gereken önemli noktalar vardır.

1.1 Stil Kılavuzu

Stil kılavuzunu projenizin planı olarak düşünürseniz, önceliği netleşir. Bir stil kılavuzu oluşturmak projenizin başlangıcını işaretler ve sınıfların ve stillerin proje boyunca öngörülebilir şekilde davranmasını sağlar. Bu nedenle, belirli sayfaları geliştirmeye başlamadan önce stiller üzerinde çalışmaya zaman ayırın. Stil kılavuzu oluşturmanın 2 yaklaşımı vardır:

• tercihlerinize uygun olarak kendi temel projenizi sıfırdan oluşturun veya
• Finsweet , Relume veya Wizardry veya başka herhangi bir hazır açık kaynaklı çerçeveyi kullanın.

1.2 Değişkenler

Webflow'ta yakın zamanda yapılan bir güncelleme sayesinde değişkenlerin kullanımı daha da sezgisel ve verimli hale geldi. Değişkenleri iyi tasarlanmış gruplar halinde düzenleyerek geliştirmeyi basitleştirebilir ve verimliliği artırabilirsiniz. Aşağıdaki gibi gruplar oluşturmayı düşünmenizi öneririm:

• Ortak renkler
• Arka plan
• Metin
• Yazı Boyutu
• Metin boyutu Mobil
• Konteyner (maksimum genişlik)
• Simge Boyutları

Bu gruplar oluşturulduktan ve ilgili sınıflarla ilişkilendirildikten sonra kolaylıkla ve güvenle web sayfaları geliştirmeye geçebilirsiniz.

Değişken oluşturma üzerinde çalışmak her zaman en iyi uygulama olmuştur ve Webflow bu geleneği düşük kod geliştirme alanında sürdürüyor. Bu önceden tanımlanmış gruplar, herhangi bir proje için sağlam bir temel sağlayarak daha sorunsuz ve daha yapılandırılmış bir geliştirme sürecine olanak tanır. Ve eğer bir müşteri size renk şemasını koyudan açıka değiştirme talebinde bulunursa, değişkenleri kullandığınız için kendinize minnettar olacaksınız.

1.3 Erişilebilirliğe Öncelik Verme

Erişilebilirlik genellikle bir projenin son aşamalarına bırakılır, ancak bunların önemi göz ardı edilemez. Erişilebilirlik özelliği entegrasyonu, projenizin en başından itibaren aklınızın ön saflarında yer almalı ve eklediğiniz her kararı ve öğeyi etkilemelidir.

Webflow bir kontrol listesini kamuya açık hale getirdi; dikkatlice inceledikten sonra bu konudaki ana noktalar hakkında fikir sahibi olacaksınız.

Webflow'un öne çıkan avantajlarından biri, projenizin görme engelli kişiler tarafından nasıl algılandığına ilişkin görsel bilgiler sağlayan yerleşik erişilebilirlik kontrol panelidir. Bu özellik, projenizi birden fazla erişilebilirlik filtresi aracılığıyla görüntülemenize, farklı görüntüleme koşullarını simüle etmenize ve iyileştirilebilecek potansiyel alanları vurgulamanıza olanak tanır.

Daha adil ve kapsayıcı bir dijital ortam yaratmakla ilgilidir. Erişilebilirliğe başlangıçtan itibaren öncelik vererek yalnızca projenizin kullanılabilirliğini geliştirmekle kalmaz, aynı zamanda yeteneklerine bakılmaksızın hedef kitlenizin tüm üyeleri için projenize erişimi eşitleme taahhüdünü de göstermiş olursunuz.

Aşama 2 - Geliştirme Sürecinde Uzmanlaşmak

Artık tüm sayfaları doğrudan tasarıma uygun olarak geliştirme aşamasına giriyorsunuz. Bu aşamayı başarıyla geçmenize yardımcı olacak bazı öneriler:

2.1 Özel Kod

"Dur. Neden? Ne için? Ama bu nasıl olabilir?! Sonuçta gelecek çoktan geldi ve neden koda şimdi ihtiyacımız var?" - diyebilirsiniz Ama dürüst olalım: Kod bilgisi olmadan web geliştirmeyi anlamaya başlayabilir ve kariyerinize hızlı bir başlangıç yapabilirsiniz. Ancak rekabetçi kalarak basit sürükle ve bırak işleviyle olağanüstü şeyler yaratabilirsiniz. Düşük kodlu platformlar pek de gerçeğe benzemiyor. Bu nedenle, önceki yazımda bahsettiğim sonsuz gelişim ve öğrenmeye hoş geldiniz.

2.1.1HTML

Webflow gibi az kodlu platformlarda çalışırken, yapı oluşturmak için yalnızca div'lere ve metin öğelerine güvenmek cazip gelebilir. Ancak dün kendimizden farklı olduğumuz nokta burasıdır; en azından makalemi okuduktan sonra bitmiş ürünün kalitesinin sorumluluğunu üstleniyoruz. <header>, <nav>, <main>, <aside>, <footer> ve diğerleri gibi öğeleri kullanarak işaretlemenizin anlamsal kurallara uyduğundan emin olun ve anlaşılırlığı ve erişilebilirliği artırmak için başlık düzeyini düzeltin.

2.1.2 CSS:

• gelecekteki tüm kodunuzu zihinsel olarak küresel ve yerel olarak bölün. Gezinme Çubuğu bileşenine global CSS ekleyin. Bu şekilde herhangi bir sayfadan ona erişebileceksiniz ve ayrıca projeyi yayınlamadan önce stillerin nasıl uygulandığını da göreceksiniz.

• Medya sorgularını kullanarak koddaki fareyle üzerine gelme durumları için stiller yazın. Bu yöntem, sahip konumunun yalnızca masaüstünde görüntülenmesini sağlar:

  
  

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

• Bu özel boyuttaki cihazlara özgü benzersiz düzen sorunlarını çözmek için 1024 piksel geniş ekranlar için ayrı stiller yazın.

  Webflow'ta duyarlı bir tasarım oluşturmak kolay olsa da tablet düzenleri 991 piksel genişlikten başlar. 1024 ekranının tüm masaüstü stillerini kendisine uyguladığı ortaya çıktı. Ancak henüz 1024 ekran için ayrı ayrı stil yazmak zorunda kalmadığım tek bir projem olmadı. Bu öğenin doğrulama için zorunlu olduğunu düşünüyorum. Stillerin ayrı ayrı kaydedilip kaydedilmeyeceği her projeye bağlıdır.

• Okunabilirliği artırmak ve diğer geliştiricilerle işbirliğini kolaylaştırmak için CSS kodunuza yorumlar ekleyin. Sonraki proje düzenlemeleri sırasında kendinizin ve diğer geliştiricilerin hayatını kolaylaştırın. Projeyi önceki bir geliştiriciden devraldıysanız, görmek istediğiniz şekilde bırakın.

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

• Yalnızca Web akışı animasyonlarına güvenmek yerine, sayfa performansını etkilemeden sayfanızı daha kolay ve daha verimli hale getirmek için CSS animasyonlarını kullanmanızı şiddetle tavsiye ederim.

  Webflow yerleşik animasyon aracı, yeni başlayanların çok sayıda etkileşimle iyi bir web sitesi oluşturmasını kolaylaştırır. Ancak gelişmiş geliştirme yöntemlerinden bahsediyorsak CSS animasyonlarının son derece hafif olduğunu ve varlığıyla sayfayı yavaşlatmadığını belirtmekte fayda var. Bunun tersine, esas olarak yalnızca öğelerin CSS özelliklerini değiştirmeyi amaçlayan web akışı animasyonları, JS üzerinden çalışır ve dolayısıyla sayfayı yavaşlatır. Küçük projelerde bu fark edilmiyor ama büyük projelerde fark ediliyor. Her durumda, herhangi bir projede yerel Web akışı animasyonları yerine, hatta pratik yapmak için bile mümkün olduğunca CSS kullanmanızı tavsiye ederim. Bir alışkanlığın çok sayıda tekrardan sonra ortaya çıktığını hatırlıyoruz. Hadi şekillendirelim.

• Lottie animasyonlarıyla kullanıcı etkileşimi planlanmamışsa, .json yerine mp4 dosyasını ve hatta optimize edilmiş .json dosyasını kullanmak çok daha iyidir. Safari'deki performans bunun için size teşekkür edecek.

2.1.3 JavaScript:

Bunlar uzun zamandır kabul edilen en iyi uygulamalardır:

• Küresel proje komut dosyaları için genel ayarların ve yerel komut dosyaları için sayfa ayarlarının kullanılması da dahil olmak üzere, JavaScript yerleştirmeye yönelik en iyi uygulamaları izleyin.

• Sayfa yükleme sürelerini optimize etmek amacıyla paralel olarak yüklenebilen komut dosyaları için <async> ve <defer> niteliklerini kullanın.

  
  

2.2 Web akışı bileşenleri

Projenizin tasarımını incelerken kendinize şu soruyu ne sıklıkla soruyorsunuz: Projede hangi yinelenen öğeleri farklı sayfalarda şablon olarak kullanabilirim? Webflow'taki bileşenler, öğelerden ve alt öğelerden özelleştirilebilir bloklar oluşturarak tutarlı, verimli ve ölçeklenebilir bir tasarım iş akışı sağlamanıza olanak tanır. Bu blokları sitenizde yeniden kullanabilir ve yinelenen her düzeni ayrı ayrı revize etmekten kaçınmak için bunları tek bir yerde değiştirebilirsiniz (kaynak - https://university.webflow.com/lesson/components?topics=layout-design ).

Çoğu zaman bu şunlar olabilir:

• Gezinme çubuğu
• Altbilgi
• Düğme - standart değilse, özel bir tasarıma ve efektlere ve/veya dallanmış bir yapıya sahipse.
• CTA Banner - bir veya iki çeşidi proje boyunca sıklıkla kullanılır.
• Ve benim daha çok kullandığım sembol Bölüm'dür - içinde bir kap, Başlık 2, paragraf ve birkaç boş div bloğu da dahil olmak üzere tüm standart sınıfların bulunduğu bir etiket ve bir sınıf içeren boş bir bölüm olmalıdır. Kullanacağınız en sık kullanılan bileşen bu, söz veriyorum. Sadece ekleyin, bağlantıyı kaldırın ve geliştirme bölümünü tamamlayın. Temel olarak ekleyerek her div bloğunu ayrı ayrı eklemek yerine çok fazla zaman kazanabilirsiniz.

Kodu kullanarak Webflow bileşenlerinin yeteneklerini genişletebilir ve müşteriye, HTML sayfa yapısına erişmeden inanılmaz derecede esnek bir proje yönetim sistemi sağlayabilirsiniz. Bu, geliştirici projeyi tamamladıktan sonra müşterinin projenin birçok tasarım yönünü kontrol etmesine olanak tanıyan tamamen yeni bir web geliştirme yaklaşımıdır. Gelecekte müşteri, önceden oluşturulmuş bileşenlere dayalı olarak bağımsız olarak kolayca yeni sayfalar oluşturabilecektir. Ve yalnızca temelde yeni unsurlar geliştirmeye ihtiyaç duyulduğunda bir geliştiriciyi işe almak gerekli olacaktır. Bileşenlerle çalışırken, müşterilerin mükemmel hazırlanmış HTML yapınızı bozma şansı neredeyse yoktur (ancak müşterilerimiz genellikle çok yeteneklidir).

2.3 Medya varlıklarını gruplandırma

Bulunmalarını ve yönetmelerini kolaylaştıracak şekilde varlık gruplandırmasını kullanın. Örneğin, çok büyük bir gezinme çubuğunuz var ve içinde simgeler bulunan birçok bağlantı var. Tasarımcı bunların bir kısmını hazırladı, diğer kısmını 3 günde bitirme sözü verdi, son kısım ise halen müşteri tarafından değerlendiriliyor. Tasarımcı yeni seçenekler çizerken, müşteri bunların yarısını inceler, diğer yarısını düzenler ve onaylar ve sonunda bunları geliştirme için size gönderir, büyük olasılıkla varlık panelinde zaten birçok başka görseliniz olacaktır. Simge görselleri bozulacak ve gelecekte bunları bulmak/değiştirmek zahmetli olacaktır. Bu durumda varlıkları gruplandırmak hayatı kolaylaştıracaktır. Gruplandırma, projenizdeki tüm medyayı temiz ve düzenli tutmanıza olanak tanır.

2.4 Aşağıdakileri kaydetmek için bir Arşiv klasörü stoklayın:

• Dinamik СMS sayfalarının statik versiyonları . Herhangi bir değişiklik veya düzenleme durumunda bunu statik versiyonda yapıp daha sonra СMS sayfasına aktarmanız çok daha kolay olacaktır. Webflow'taki СMS sayfalarının özelliği, gerekli tüm öğeleri Koleksiyondaki ilgili alanlarla bağladığınızda, bu bağlantının mevcut olduğu öğeyi kopyalayıp statik bir sayfaya aktaramayacak olmanızdır.

• Öğelerin ilk sürümlerini içeren bir sayfa. Çok sayıda düzenlemenin sık sık uygulanması bizi dikkatli olmaya ve halihazırda inşa edilmiş olanı projeden çıkarmamaya zorluyor. Bunu arşiv sayfasına taşıyın ve daha iyi zamanlara bırakın.

• Deneyler için test sayfası.

  
  

3. Aşama - Son düzenlemeler

Projenizin artık gerçekten seviye atladığı hissini bırakmamak için, projeyi müşteriye aktarmadan önce proje sonunda yapmanız gerekenler:

3.1 Projenin temizlenmesi:

• kullanılmayan sınıfları ve animasyonları kaldırın.

• yorumlanmış, kullanılmayan kodu kaldırın.

• kullanılmayan medyayı çıkarın. Panelde çok fazla gereksiz öğe varsa ve bunları tek tek kaldırmak mümkün değilse, bir hack öneriyorum: tüm varlıkları silin - projeyi yayınlayın - web akışını yeniden yükleyin - ve panel varlığına yalnızca kullanılan medyayı girin Projede.

  
  

3.2 Müşteri için bir Proje kullanım kılavuzu oluşturun.

Stil rehberi sayfasına ek olarak, biten projenin nasıl kullanılacağını anlatan bir sayfa bulunmalıdır. İyi bir geliştirici, müşterinin projeyi gelecekte nasıl yöneteceğini düşünen kişidir. Değişiklik yapmanın ne kadar kolay olacağı ve müşterinin bunları yönetme konusunda ne kadar özgürlüğe sahip olacağı. Web akışı sayesinde bu, mükemmelliğe mümkün olduğunca yakın olabilir. CSS bilgisine ve web akışı bileşenlerinin çalışma prensiplerine dair bir anlayışa sahip olarak, mevcut sayfaları değiştirmenin veya yenilerini oluşturmanın kolay olacağı bir proje oluşturabilirsiniz.

3.3 Yedeklere benzersiz adlar verin.

Tanımlayıcılık ilkesi, geliştirici olarak sizin ad verdiğiniz her şey için geçerlidir. Gelecekte projenin herhangi bir kısmı siz ve meslektaşlarınız için sezgisel olmalıdır.

Çözüm

Sonuç olarak, bir geliştirici olarak günlük yaşamınızı iyileştirmede odaklanmanız gereken ana noktaları kısaca özetleyelim.

Aşama 1 - Hazırlık

• Tasarım öğelerinde tutarlılık ve öngörülebilirlik sağlamak için bir Stil Kılavuzu oluşturun.
• Geliştirmeyi kolaylaştırmak ve verimliliği artırmak için Değişkenleri ayarlayın
• Kapsayıcı ve kullanıcı dostu web siteleri oluşturmak için başlangıçtan itibaren Erişilebilirliğe öncelik verin.

Aşama 2 - Doğrudan Geliştirme

• Web geliştirmede sonsuz olasılıkların kilidini açmak için kodlama gücünü değerli bir beceri seti olarak ekleyin.
• Projelerinizi geleceğe hazır hale getirmek için Webflow bileşenlerini güçlü araçlar olarak kullanın.
• Kolay erişim ve yönetim için medya varlıklarını gruplar halinde düzenleyin.
• Kullanılmayan öğeleri daha sonra kullanmak üzere saklamak için bir Arşiv klasörü bulundurun.

Aşama 3 - Eve doğru düz

• Proje performansını optimize etmek için kullanılmayan öğeleri ve varlıkları temizleyin.
• Sorunsuz devir ve müşteri yönetimini kolaylaştırmak için bir Müşteri Kılavuzu oluşturun.
• Veri kaybına karşı koruma sağlamak ve sürekliliği sağlamak için projelerinizin anlamlı bir yedeğini kaydedin.

Web akışı geliştirmede verimliliği ve üretkenliği en üst düzeye çıkarmak için en iyi uygulamaların benimsenmesi önemlidir. Bu yaklaşımı takip ederek, yalnızca tekrarlanan görevlerde zamandan tasarruf etmekle kalmayacak, aynı zamanda rahatlama, kişisel gelişim ve yenilikçi projeler yaratma için değerli kaynakları da serbest bırakacaksınız. Daha da harika şeyler yaratmak için iş akışlarımızı dönüştürelim ve yaratıcılığımızı serbest bırakalım.

Okuduğunuz için teşekkürler!

Diğer geliştiricilerin hayatını kolaylaştırmaya yardımcı olmak için düşüncelerimi ve deneyimlerimi paylaşmaktan mutluluk duyuyorum. Öğrendiklerimi paylaşarak geliştirme sürecini daha sorunsuz hale getirmeyi ve herkes için daha iyi deneyimler yaratmayı umuyorum.