Geliştiricilerin Yaptığı En Yaygın 10 Önyükleme Hatası

İlk bakışta Bootstrap oldukça basit görünüyor. Ve gerçekten de Bootstrap kullanmaya başlamak zor değil. Pek çok HTML, CSS ve JavaScript kod örneği içeren çok iyi yazılmış bir Bootstrap belgesi var. Önemli tuzakların çoğundan burada bahsedilmektedir, ancak yine de bazı hatalar oldukça belirsizdir veya belirsiz nedenleri vardır. Bootstrap çok basit ve kullanımı kolay göründüğünden, birçok geliştirici çerçeveye acele ediyor ve bu yüzden hatalar oluyor.

Geliştiriciler kullanmaya başladığında en yaygın 10 Bootstrap hatalarına, sorunlarına ve yanlış anlamalarına göz atacağız.

Yaygın Önyükleme Hatası 1: Çerçeve hakkında temel yanılgılar

İnsanların sahip olduğu Bootstrap çerçevesi hakkında bazı temel yanılgılar vardır. Bunun nedeni, Bootstrap sitesinde açık bir şekilde reklamının yapılmaması veya insanların belgeleri okumak için yeterli zaman ayırmaması olabilir. Gerçek şu ki, bazen geliştiriciler bir şeyleri yanlış yaparak köşeye sıkışırlar ve ardından çerçeveyi suçlarlar. Öyleyse bazı temel gerçekleri açıklığa kavuşturalım.

Bootstrap kapsamlıdır, ancak ne büyük ne de muazzamdır. Bootstrap, birçok ortak UI bileşenini içeren temel HTML ve CSS tasarım şablonlarıyla birlikte gelir. Bunlara Tipografi, Tablolar, Formlar, Düğmeler, Glifonlar, Açılır Menüler, Düğmeler ve Giriş Grupları, Gezinme, Sayfalandırma, Etiketler ve Rozetler, Uyarılar, İlerleme Çubukları, Kipler, Sekmeler, Akordeonlar, Döngüler ve daha fazlası dahildir. Bunlardan birkaçını seçip seçebilirsiniz ve varsayılan yapılandırması ile hızlı bir şekilde birden çok tarayıcıyı, cihazı ve çözünürlüğü güzel formatta işleyen bir UI oluşturabilirsiniz.

Bootstrap sizin için her şeyi yapmaz, ancak aralarından seçim yapabileceğiniz bir dizi makul varsayılan sağlar ve geliştiricilerin tasarım konusunda endişelenmek yerine geliştirme çalışmalarına daha fazla konsantre olmalarına ve hızlı bir şekilde iyi görünümlü bir web sitesi kurmalarına yardımcı olur. Hızlı prototip oluşturmaya izin verir, ancak yolda geliştiricileri sınırlamaz.

Herkesin kendi ihtiyaçlarına göre ayarlayabileceği kadar genişletilebilir. Başlangıçta Bootstrap'in bazı sınırlamaları vardı ve o zamanlar varsayılan stilleri genişletmek karmaşıktı. Ancak çerçeve olgunlaştıkça genişletilebilirlik de gelişti.

Yaygın Bootstrap Hatası #2: Bootstrap kullanmak için CSS bilmenize gerek olmadığını ve bir tasarımcıya ihtiyacınız olmadığını düşünmek

Bootstrap kullanıyorsanız CSS bilmenize gerek olmayacağını düşünüyorsanız çok yanılıyorsunuz. Herhangi bir ön uç geliştiricinin CSS ve HTML5 öğrenmesi gerekir. Bootstrap, geliştiricilerin omuzlarından birçok zorlu CSS parçasını kaldırıyor (satıcıya özel önekler gibi) ve temel varsayılan stil sunuyor, ancak yine de CSS'yi anlamanız gerekiyor. Medya sorgularının nasıl çalıştığını bilmeniz gerekmez, ancak duyarlı tasarımın nasıl çalıştığını anlamanız gerekir. Bootstrap size CSS öğretmek için tasarlanmamıştır, ancak isterseniz yardımcı olabilir. Kaynak kodunu LESS veya SASS'ta incelemek harika bir başlangıç ​​noktasıdır.

Benzer bir konuda tasarımcı olmanıza gerek yok ve Bootstrap ile bir tasarımcıya ihtiyacınız olmadığını iddia edebilirsiniz. Ancak mümkünse bir tasarımcıdan yardım alın. Bootstrap'a karşı yaygın bir şikayet, tüm Bootstrap sitelerinin birbirine benzemesi ve diğer Bootstrap sitelerine benzeyen bir web sitesine sahip olmanın kolay olmasıdır. Ama bunun doğru olması gerekmiyor. Web genelinde milyonlarca web sitesi Bootstrap ile oluşturuluyor. Bootstrap ile oluşturulmuş siteleri toplayan Bootstrap Expo'da farklı tasarımların nasıl elde edilebileceğine dair harika vitrinler bulunabilir. Bir göz atın, biraz ilham alın ve kendi tasarım varyasyonunuzu oluşturmaya başlayın.

Yaygın Önyükleme Hatası #3: Önyükleme CSS dosyasını değiştirme

Sade ve basit hale getirmek için: bootstrap.css dosyasını değiştirmeyin.

bootstrap.css dosyasında değişiklik yaparsanız, işler çok hızlı bir şekilde karmaşıklaşacaktır. Bootstrap dosyalarını yükseltmek istediğinizde tüm tasarım bozulur. Kendi stil sayfanızın varsayılan önyükleme renklerinin, stillerin, kenar boşluklarının, dolguların, her şeyin üzerine yazabilirsiniz. bootstrap.css stil sayfasına hiç dokunmanıza gerek yoktur.

DAHA AZ veya SASS'ı bilmiyor musunuz? Hiç sorun değil, kendi CSS dosyanızı oluşturabilir ve orijinal bootstrap.css stil sayfasından istediğiniz her şeyin üzerine yazabilirsiniz. Bir önceki hatada bahsettiğimiz gibi CSS bilmek zorunludur. Yeni CSS seçicinizi oluşturun, HTML'de kullanın ve CSS sınıflarınızı Bootstrap stillerinden sonra bildirdiğiniz sürece, tanımlarınız Bootstrap varsayılanlarının üzerine yazacaktır.

Hâlâ daha fazlasını öğrenmek ve daha derine dalmak mı istiyorsunuz? Bunu yapmanızı şiddetle tavsiye ediyor ve teşvik ediyorum. Bootstrap LESS kaynak kodunu kullanın. Statik CSS yerine DAHA AZ kaynağı kullanırsanız, neler olduğunu ve nerede olduğunu daha iyi anlayacaksınız.

Yaygın Bootstrap Hatası #4: Bootstrap'in sunduğu her şeyi kullanma

Daha önce de belirtildiği gibi, Bootstrap kapsamlıdır. Çok sayıda UI bileşeni, HTML ve CSS tasarım şablonu ve JavaScript eklentileri sunar. Ama lütfen seçici olun. Bootstrap'in her özelliğini kullanmak zorunda değilsiniz.

Bu özellikle eklentiler için geçerlidir. Yalnızca anlamlı olan eklentileri seçin ve seçin ve her şeyi güzel ve havalı göründüğü için kullanmayın. Web siteniz kolayca abartılabilir. Başlangıç ​​için bootstrap.js dosyasını hiç dahil etmediğinizi düşünün ve yalnızca düz HTML ve CSS kullanarak bir site oluşturun. Ardından, bileşenleri yalnızca belirli roller için gerektiği kadar tek tek ekleyin.

Yaygın Önyükleme Hatası #5: Kalıcı bir istemi yanlış kullanma

Önyükleme modelleri, gerekli minimum işlevsellik ile esnek iletişim istemleri sunar ve akıllı varsayılanlarla birlikte gelir. Modal'ın kullanımı kolay olmasına ve zengin kişiselleştirme sunmasına rağmen, yaygın yanlış kullanımlardan kaçınmak için aklımızda tutmamız gereken birkaç şey var.

Aynı anda birden fazla kalıcı bilgi istemi gösteriliyor

Bootstrap, örtüşen modları desteklemez. Aynı anda sadece bir modal görülebilir. Aynı anda birden fazla mod gösterilebilir, ancak bunu düzgün bir şekilde işlemek için özel kodun yazılması gerekir.

Önyükleme modu arka planda görünüyor

Kalıcı kap veya onun üst öğesi sabit veya göreli bir konuma sahipse, modal düzgün gösterilmeyecektir. Daima kalıcı kapsayıcının ve üst öğelerinin herhangi bir özel konumlandırmanın uygulanmadığından emin olun. En iyi uygulama, bir kipin HTML'sini </body> kapanış etiketinden hemen önce veya daha iyisi belgede <body> açılış etiketinden hemen sonra üst düzey bir konuma yerleştirmektir. Bu, kipin görünümünü ve işlevselliğini etkileyen diğer bileşenlerden kaçınmanın en iyi yoludur.

Mobil cihazlarda modal

Geliştiricilerin sanal klavyeli mobil cihazlarda modallerle uğraşırken dikkat etmesi gereken bazı uyarılar vardır. Bu özellikle, sanal klavye tetiklendiğinde sabit öğelerin konumunu güncellemeyen bir oluşturma hatasının bulunduğu iOS aygıtları için geçerlidir. Bu, Bootstrap tarafından işlenmez, bu nedenle söz konusu uygulama için koddaki bu durumları en iyi şekilde ele almak geliştiriciye kalmıştır.

Yaygın Önyükleme Hatası #6: Dosya giriş düğmesi bileşeni sorunu

Bootstrap, bir dosya yükleme düğmesi için belirlenmiş bir bileşene sahip değildir. Aşağıdaki örnek kodla yalnızca HTML ve CSS kullanan basit ve zarif bir çözüm elde edilebilir:

 <span class="btn btn-default btn-file"> Browse <input type="file"> </span>

 .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

Benzer etkinin nasıl elde edileceğine dair birçok örnek var. Bu kod örneği Cory LaViska'dan ödünç alınmıştır ve onun sitesinde bu sorunun daha ayrıntılı bir açıklamasını okuyabilirsiniz. Ek JavaScript kodu kullanan daha fazla işlevselliğe sahip genişletilmiş bir örnek de vardır.

Yaygın Önyükleme Hatası #7: JavaScript ile aşırı karmaşıklık ve "veri-" özniteliklerini yok sayma

Tasarımcılar veya yalnızca acemi JavaScript geliştiricileri, web geliştirmeye çok kolay bir şekilde dalabilirler ve yalnızca HTML, CSS ve Bootstrap kullanarak web sayfaları oluşturabilirler. Kodlamada çok iyi değillerse, JavaScript'i yanlış kullanma veya aşırı karmaşıklaştırma tuzağına düşebilirler. Tüm Bootstrap eklentilerinin, tek bir JavaScript satırı yazmadan yalnızca biçimlendirme API'si aracılığıyla kullanılabileceğini belirtmek önemlidir. Bu, Bootstrap'in birinci sınıf API'sidir ve eklentileri kullanırken ilk düşünceniz olmalıdır.

Örneğin, bir düğme veya bağlantı gibi bir denetleyici öğesinde data-toggle="modal" öğesini ayarlayarak herhangi bir JavaScript yazmadan kalıcı bir iletişim kutusunu etkinleştirebilir ve data- özniteliklerini kullanarak ek parametreler iletebiliriz. Aşağıdaki kodda, #myModal kimliğine sahip HTML kodunu hedefliyoruz. data-backdrop seçeneği ile kullanıcı kipin dışına tıkladığında kipin kapanmayacağını belirttik ve data-keyboard seçeneği ile bir kipi kapatan escape key olayını devre dışı bıraktık. Hepsi bir HTML kod satırında:

 <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

Yaygın Önyükleme Hatası #8: Önyükleme geliştirmeyi kolaylaştıran araçları yok sayma

Hatalar olur ve her geliştirici bunları ara sıra yapar. Bu kaçınılmazdır, ancak önemli olan hatayla nasıl başa çıktığınızdır. Bootstrap ekibi, sorun izleyiciyi izleyerek insanların bazı hataları daha sık yaptığını fark etti. Bu yüzden geliştirme sürecini otomatikleştirmeye çalıştılar. Sonuç, Bootstrap projeleri için bir HTML astarlama aracı olan Bootlint'tir. Bootlint, tarayıcı içinde veya Node.js aracılığıyla komut satırından kullanılabilir ve birçok yaygın Bootstrap kullanım hatası için Bootstrapped web sayfalarını otomatik olarak kontrol eder. Web geliştirme araç zincirinize Bootlint eklemek, genellikle bir projenin gelişimini yavaşlatan birçok yaygın hatayı ortadan kaldırabilir.

Bootstrap projesine katkıda bulunmak istiyorsanız Rorschach'ı incelemenizde fayda var. Rorschach, her yeni çekme talebinde birkaç kontrol yapan bir Bootstrap çekme talebi akıl sağlığı kontrol botudur. Akıl sağlığı kontrolü başarısız olursa, çekme talebi hakkında hatayı ve nasıl düzeltileceğini açıklayan bilgilendirici bir yorum bırakır ve ardından çekme talebini kapatır.

Yaygın Önyükleme Hatası #9: IE8 ve daha eski tarayıcılarda uyumsuzluk sorunları

Bootstrap, en yeni masaüstü ve mobil tarayıcılarda en iyi şekilde çalışacak şekilde tasarlanmıştır. Daha eski tarayıcılar, bileşenleri ve öğeleri farklı şekilde görüntüleyebilir, ancak her şey tam olarak işlevsel olmalıdır. Destek, bazı CSS3 özelliklerinin ve HTML5 öğelerinin bu tarayıcılar tarafından tam olarak desteklenmediğine dair önemli bir notla birlikte Internet Explorer 8 ve 9'u içerir.

Internet Explorer 8 ve diğer eski tarayıcılar için tam destek almak için, CSS3 Medya Sorguları Respond.js için bir çoklu dolgu, HTML5 öğelerinin kullanılmasını sağlayan HTML 5 dolgu ve HTML başlığında uygun bir IE <meta> etiketi kullanmanız gerekir. IE'nin uyumluluk modunda çalışmadığından emin olun. Sonunda HTML kafanız şöyle görünmelidir:

 <head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

Respond.js söz konusu olduğunda, geliştirme ve üretim ortamlarında aşağıdaki uyarılara dikkat edin.

Yaygın Önyükleme Hatası #10: En iyi uygulamaları yok sayma

Yığın Taşması ile ilgili yaygın sorulardan biri, Bootstraps menüsünün tıklama yerine fareyle üzerine gelindiğinde açılacak şekilde nasıl açılacağıdır. Bu sorunun çözümü karmaşık olmasa da ve sadece CSS kullanılarak yapılabilir, ancak önerilmez. Bu özellik bilerek çerçevenin dışında bırakılmıştır ve bu, geliştirme ekibi tarafından verilen bir tasarım kararıdır. Yine yapılabilir, ancak yansımaları anlamalı ve özellikle mobil ilk çerçeveler için en iyi uygulamaların var olduğunu anlamalıdır. Bu özel sorunun arkasındaki mantık, fareyle üzerine gelindiğinde çalışmak için dokunmatik cihazlara sahip kullanıcılara yardımcı olmamasıdır. Bu tür cihazlarda fareyle üzerine gelme yoktur, yalnızca olaylara dokunun. Bu nedenle, bu, dokunmatik özellikli herhangi bir cihazda düzgün çalışmayacaktır.

Önyükleme Hataları Sonuç

Umarım bu kısa Önyükleme kılavuzu, bazı yaygın hatalardan kaçınmanıza, genel yanlış anlamaları gidermenize ve çerçevenin çoğunu elde etmenize yardımcı olur. Unutmayın, Bootstrap herkes için değildir ve her proje için uygun değildir. Bir çerçeve seçerken, belgeleri okumak için biraz zaman ayırmanız gerekir ve nasıl çalıştığına dair daha iyi bir fikir ve resim elde etmek için çerçeveyle oynamak için biraz zaman harcamanız gerekir. Bu Bootstrap için de geçerlidir.

Belgeleri okuyun, örneklerle oynayın ve denemeler yapın, temel bilgileri doğru bir şekilde öğrenin ve yeni ve güzel tasarımlar yaratmanın keyfini çıkarın.