Bricklayer.js

Yatayda düzensiz yığılı elemanların yerleşim kütüphanesi.

bricklayer.js çalışma mantığı

Neyi çözüyor?

Herkes pinterest kullanıcısı olmasa bile arayüzünü mutlaka bir kere görmüştür. Pinterest kartlarının dizilim şeklini hatırlayalım;

pinterest kart dizilimi

Gördüğünüz gibi alt-alta ve dip-dibe hizalanacak mantıkta bir sistem var. Bunu yeni CSS özellikleriyle ve teknikleriyle yapmak kolay ama burada çok ince bir detay var.

siyah çerçeve tarayıcının gösterdiği alanı temsil ediyor

CSS teknikleri yukarıdan aşağı ekleme yaparak ilerlerken ufak bir sorunu da beraberinde getiriyor. Eklediğim 3. eleman sahnemde yer olmasına rağmen dışarıda kaldı. İşte tam bu noktada eklentilere ihtiyaç duyuyoruz.

Nereden çıktı

Yine yeni bir proje için kolları sıvamış arayüzleri incelerken, projenin bir yerinde pinterest tarzı dizilim yapmaya ihtiyaç vardı. Hangi eklenti ile çözebilirim diye araştırırken hepsinin ortak bir sıkıntısı olduğunu farkettim. Onlarca eklenti içinde biri hariç hepsi `position: absolute` ile konumlandırma yapıyordu. Sahnede eleman sayısı çoğaldıkça ciddi performans sıkıntısına yol açıyordu. Durup “daha iyisini yapabilir miyim?” diye sesli düşünürken Fatih Kadir Akın “evet yapabiliriz” dedi ve başlamış olduk.

Diğerleri varken neden Bricklayer.js

Yazmaya başladığımızda bizim için dört madde çok önemliydi;

  • ❄ Dosya boyutu ufak (1.5kb gzip)
  • ⚡️ Çok basit ayarlanabilir
  • 💀 Inline stil eklemeyen (absolute olmayan)
  • 💧 CSS Responsive uyumlu (media-query)

Bunları gerçekleştirip yeni bir eklenti çıkarttık. İnanılmaz bir ilgi gördü ve 3. günün yarısında 600 star’la Github Trending sayfasında 3. sıraya geldi.

Benzer eklentileri aşağıda tek tek sıraladım ve gördüğüm problemlere değindim. Bahsettiğim problemler herkes için sorun olmayabilir.

Masonry.js
En iyi olan ve en çok kullanılan olarak liste başında. Fakat konumlandırmayı `position: absolute` mantığıyla yaptığı için performans sorunu yaşatıyor.

Bricks.js
En hızlı hesaplamayı yapıp, en yüksek performansı gösteriyor ama gel gör ki o da `position: absolute` ile konumlandırıyor.

Salvattore.js
Biz düşünüp yapmaya başladıktan sonra denk geldiğimiz ve bizim düşündüğümüze en yakın eklenti. Ama şöyle bir sorunu var ki evlerden uzak; hangi ekran boyutunda kaça böleceğini CSS dosyasında `[data-columns]` satırlarında `content` özelliğine yazıyorsun. Bu çok ciddi performans sorununa yol açıyor. Sayfaya Salvattore.js yükleniyor, gidip CSS dosyalarını geziyor, `[data-columns]` olan satırların içine girip kaça böleceğini okuyor, sonra da şekillendiriyor. öhhh.

Wookmark.js
Geçiyorum zira masonry.js gibi `position: absolute` tekniği.

Nested.js
Aynen masonry.js gibi `position: absolute` tekniği.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.