Photo by Duy Pham on Unsplash

FRONTEND KAPSAM

Frontend Ürün ve Kütüphane Evreninden Haberler — 6(Emotion.sh, Faker.js)

Öncelikle Emotion ve Faker kütüphanesini kullanarak oluşturduğum aşağıdaki demo sayfasını inceleyebilirsiniz.

Bu örnekte Emotion kütüphanesi ile dinamik Color ve Styling yapısına sahip düğmeler oluşturdum. Faker kütüphaneside ile de düğmelere fake isimler oluşturmak için kullandım.

Emotion Kütüphanesi

CSS in JS kavramını destekleyen bir kütüphane. Normalde bir Web uygulaması veya sayfası geliştirdiğimizde bu sayfa 3 temel parçadan oluşur;

  • HTML
  • JS
  • CSS

CSS bir seviye ileriye götüren SaSS preprocessor kullanmayı anlatmıştım. Ama dinamik bir bileşen yapmaya çalıştığınızda SaSS pre-compiled bir yapıda olduğu için sunucuda önce en son halleri olan CSS dönüştürülerek dinamikliğini kaybeder.

Dinamikliği sağlayacak yapı ise;

  • Media Query yapısı (Bu yazının içerisinden ulaşabilirsiniz)
  • addClass, removeClass veya toggleClass
  • css içerisinde variable yapılar kullanmak var(— bg-color)

Yukarıda bahsettiğim yapılar ne kadar dinamiklik sağlasada micro seviyede dinamik style tanımlama için çok emek harcamak gerekir. Bu konuda React kendi yapısında olan inline style özelliği bulunur.

<MyComponent style={{marginLeft:10 , marginRightŞ....}}

Ama bu yapı bizim CSS dilinden farklı bir syntax sahiptir CSS bu tanımlalar aşağıdaki gibi olması gerekir.

margin-left:10px;
margin-right:20px

JS ES6 ile birlikte gelen Template Litarals → Template Tags üzerinden css tag önüne styling stringleri getirerek geliştiricilerin dinamik stillendirme yapmasına olanak sağlamaktadır.

Örnek Emotion Kullanımı.

Yukarıdaki dinamiklik CSS tanımlamaları içerisinde ${color} ${bgColor} ve ${hoverBgColor} JS içerisinden tanımlama gücünden geliyor.

Ama her kazancın yanında bir takım kayıplarda olacaktır. SaSS içerisinde tanımlanmış Color kütüphanesi üzerinden lighten ve darken gibi preprocessor fonksiyon tanımlarını kaybediyoruz.

Tabi JS hazır bir Color kütüphanesi kullanarak bu sorunu çok basit bir şekilde halledebilirsiniz. Benim tercih ettiğim kütüphane Chroma.js kütüphanesi. Örneğin hover işlemi sırasında arkaplanı biraz karartmak için darken fonksiyonunu kullanabilirsiniz.

const hoverBgColor = chroma(bgColor).darken().saturate(2).hex();

Faker Kütüphanesi

Test verisi üretmek için sıkça adını duyduğum bir kütüphaneden bahsetmek istiyorum. Bu kütüphane size fake (sahte) veri üreterek işlemlerinizi kolaylaştırıyor. Bizim örneğimizde aşağıdaki düğmelere basınca farklı farklı başlıklı düğmeler üretsin istiyoruz.

Örneğin;

  • Ülke isimleri, Kuş İsimleri ve Müzik Türleri isimleri üretmek isteyelim. Bu durumda yapmamız gereken faker kütüphanesinin tanımlı fonksiyonlarını kullanmak.
faker.address.country();
faker.animal.bird();
faker.music.genre();

Yukarıdaki bu fonksiyon çağırımları bize anlamlı isimleri dinamik olarak sağlayacaktır.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store