tarihinde Fatih Hayrioğlu

Farklı projelerde çalışırken her projenin node sürüm ihtiyacı farklı ise bunlarla baş etmek için nvm kullanmaya başlamıştım. Ancak bazı durumlarda node sürümünü devamlı değiştirmek sorun oluyor. Varsayılan node sürümünü güncellemek gerektiğinde bu konuda NVM bize kolay bir yöntem sunuyor.

İlk önce mevcut node sürmünü öğrenelim ve sonra sistemde yüklü nodejs sürümlerini nvm ile kontrol edelim.

node version

Mevcut durumda nodejs sürmümüz v12.22.12 olarak görünüyor. Yukarıdaki listede istediğiniz sürüm yok ise nvm ile hemen istediğiniz sürümü yükleyebilirsiniz. nvm install 19.5.0 gibi. Şimdi gelelim varsayılan nodejs sürümünü ayarlamaya

nvm default node

Evet varsayılan sürmümüz artık 19.5.0. node -v ile kontrol edebiliriz. Bazen hemen olmuyor terminali açıp kapamak gerekiyor.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Web’de gördüğüm CSS ile yapılmış bazı uygulamarı burada paylaşmak istiyorum. Bunlardan birisi de renk geçişi ile yapılmış hareketli arka plan resimleri. Kodu çok basit ama etkisi çok iyi. Bundan 10 sene önce bu işi yapsak muhtemlen tarayıcılar çok zorlanacağı işleri artık CSS ile çok basit bir şekilde yapabilmek güzel.

Konuyu daha da uzatmadan koda gelelim. CSS ile renk geçişi yapmak çok basit. En basit hali

linear-gradient(top,#fff,#f8b500);

İki renk arasında başlangıç noktasını verdiğimiz bir tanım. Kodu daha da geliştirip açılı ve çok renkli renk geçişleri de yapabiliyoruz.

linear-gradient(-45deg, oklab(0.3 -0.03 -0.04) 0%, oklab(0.54 -0.08 0) 13%, oklab(0.82 -0.13 0.08) 25%, oklab(0.11 -0.13 0) 38%, oklab(0.3 -0.03 -0.04) 50%, oklab(0.54 -0.08 0) 62%, oklab(0.82 -0.13 0.08) 75%, oklab(0.11 -0.13 0) 87%, oklab(0.3 -0.03 -0.04) 100%);

Güzel bir arkaplan geçişi elde ettik. Peki bunu nasıl hareketlendireceğiz?

4 renk seçtiğimiz için arka plan alanını genişletmemiz lazım. background-size: 400% 400%; ile genişlettik. Sıra geldi bu arka plana hareket kazandırmaya. Hareket kazandırmak içinde arka plan konumunu değiştirmemiz yeterli olacak.

@keyframes arkaPlanaHareketKat{
  0%{
    background-position: 0 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0 50%;
  }
}

Sonuç aşağıdaki gibi olacaktır.

Farklı alanlarda bu tekniği uygulayabiliriz. Bu örnekte olduğu gibi sayfanın tümünün arka planında kullandığımız gibi bir butonun arka planında da kullanabiliriz.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

@property nedir? CSS’in yeni bir özelliği mi? Aslında yeni bir CSS tanımı ve özelliği değil. @property geliştiriciler olarak bizim hiç dahil omadığımız alanlara girmemize izin verilen bir tanım daha doğrusu CSS Houdini‘nin bir parçasıdır.

CSS Houdini, Tarayıcı API’leri koleksiyonu için bir çatı terim olan Houdini, web geliştirme sürecine ve genel olarak CSS standartlarının geliştirilmesine önemli iyileştirmeler getirmeyi amaçlamaktadır. Front-end geliştiricileri, JavaScript kullanarak CSS’i yeni özelliklerle genişletebilecek, CSS oluşturma motoruna bağlanabilecek ve tarayıcıya bir oluşturma işlemi sırasında CSS’i nasıl uygulayacağını söyleyebilecek. Houdini’nin tarayıcı desteği gelişiyor ve bazı API’ler bugün kullanıma hazır.

Kısaca, tarayıcı geliştiricilerin biz web geliştiricilere gelin birazda siz geliştirin diye açtığı kapıdır CSS Houdini. @property’de CSS Houdini’nin bir parçasıdır. Parçanın parçası, evet çok fazla parça oldu :)

@property, biz geliştiricilere CSS değişkenleri (Custom Properties)‘nin tipini, başlangıç değerini ve kalıtsallığını tarayıcıya bildirmemize olanak sağlar.

Genel yapısı:

@property  --anaRenk {
  syntax: '<color>';
  initial-value: blue;
  inherits: false;
}

Söz dizimi(syntax) <length>, <number>, <percentage>, <length-percentage>, <color>, <image>, <url>, <integer>, <angle>, <time>, <resolution>, <transform-function>, <custom-ident>, <transform-list> değerlerinden birini alabiliyor.

Bu tanımı yaptığımızda tarayıcı, CSS değişkenini belirttiğimiz türde kaydederek. Daha sonra geçişlerde ve animasyonlarda kullanıldığında bu özelliğin değerlerini nasıl enterpolasyona tabi tutacağını bilir.

slashdev.io‘nun örneği konuyu anlamak için çok güzel.

Rengi ve boyutu değişen bir kutu animasyonu yapalım. Tabi buradaki --scale: .5; değerinin tipini anlamayan tarayıcı kutu boyutunu değiştirme kısmını uygulamayacak.

@property --scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

tanımıyla tarayıcıya bunun bir sayı olduğunu söylediğimizde animasyon istediğimiz gibi çalışacaktır.

Tarayıcıların geliştirme ortamında yönetimi

Şimdilik sadece Chrome’da tarayıcı geliştirme aracında gösterim var. Safari desteği var ama gösterim yok. Firefox’da yeni ekledi zamanla ekleyeceklerini düşünüyorum.

property

Üzerine gelince çıkan popup’da gösteriyor ve ayrıca listenin en altında da gösteriyor.

## Tarayıcı desteği

Tarayıcı desteği konusunda gayet iyi yerlerde. Türkiye’de %91’lik bir oranla desteği var.

Kaynaklar