Safari yeni sürümlerinde switch elementini destekleyeceğini açıklayınca nasıl birşey diye bakayım dedim. Son zamanlarda UI elementlerinin HTML’e kazandırılması kervanına Webkit’in de katılması açısında önemli bir durum.

İlk denemem

<input type="checkbox" switch>

Sonuç mükemmel. Bu gelişmeleri görünce “Senelerdir niye uğraştırdınız be insafsızlar diye” içimden geçirmiyor değilim :)

Şimdilik sadece accent-color ile aktif durumun arka plan rengini değiştirebiliyoruz.

input {
  accent-color: var(--primary-color);
}

Switch

Şu an Safari’nin gelecek sürümlerinde desteklenecek bu özelliği umarım yakında diğer tarayıcılarda destekler.

Safari henüz ::track ve ::thumb sözde elementlerinin desteği henüz yok açmak için Develop > Feature Flags - ::thumb and ::track pseudo-elements açmak gerekiyor. Muhtemelen daha sonraki sürümlerde gelecektir.

input::thumb {
    background-color: var(--primary-color);
    width: 36px;
    height: 36px;
    margin: 4px 8px;
    transition: all 0.3s;
    border-radius: 50%;
}

input:checked::thumb {
  translate: 40px 0;
  background-color: white;  
}

Swicth

Geçenlerde accent-colorörneğinde kullandığım gece/gündüz switch’ini biraz daha değiştirip :before ve :after olmadan çözümü:

input:checked::track {
  background-color: #000839;
  border-radius: 20px;
}

input:checked::thumb {
  translate: 40px 0;
  background-color: #000839;
  transform: rotate(110deg);
  box-shadow: inset 0px 8px white;
}

Swicth

Farklı örnek çalışmaları incelemek için buradaki örneklere bakmanızı öneririm. (not: Tarayıcının zoom değerini arttırınca örneklerin görünümü daha hoş oluyor)

Biliyorum daha çok erken ama araştırmışken paylaşmak istedim. :)

Kalın sağlıcakla.

Kaynaklar

2023 senesinde genelde CSS’in yeni çıkan özelliklerini olabildiğince anlatmaya çalıştım.

  1. CSS ile tip tanımı @property
  2. ::marker sözde (pseudo) elemanı
  3. accent-color tanımı
  4. CSS scroll-snap
  5. :user-invalid seçicisi
  6. Yeni bakış alanı(viewport) değerleri
  7. Medya sorgularında aralıklı genişlik tanımlama
  8. CSS subgrid
  9. Yeni text-wrap değerleri balance ve pretty
  10. CSS seçicilerin aranan ebeveyni bulundu :has()
  11. SASS’ın sonu geldi mi?
  12. CSS iç içe (nesting) yazım
  13. CSS aspect-ratio tanımı

HTML’in yeni bileşenleri hakkında da yenilikleri paylaşmak gibi bir hedefim vardı ancak bu konuda eksik kaldım.

  1. Popover API

Sadece Popover bileşinini yazmışım. Bu sene daha fazla bileşen eklerim inşallah.

2024 hedeflerim

2024’de daha çok CSS, HTML, PWA ve CSS ile yapılan basit işler hakkında birşeyler yazma planım var.

CSS

Bu sene CSS’in yeni özellikleri hakkındaki yazılara devam etme hedefim var.

Bunların dışında CSS ile yapılan basit işlerle alakalı yazılara da devam etmeyi düşünüyorum.

CSS’de ki gelişmelerinin devam edeceğini düşünüyorum. 2024 interrop’da hangileri dahil edilir bilemiyorum ama aşağıdaki birçok özelliğin sene sonuda kalmadan standartlaşmasını bekliyorum.

  1. Container Query
  2. linear() tanımı
  3. Cascade layer
  4. Yeni renk tanımları lch, oklab, oklch
  5. Logical properties
  6. CSS Scope
  7. Grid masonary
  8. Scroll-timeline
  9. Stil Query
  10. Anchor positioning
  11. View Transitions
  12. @when else
  13. Trigonometrik fonksiyonlar

HTML

HTML bileşenleri konusunda bir atılım bekliyorum. Bu sayede farklı UI kütüphaneleri yerine UI ihtiyacımızı görebilecek standartlar olacak. Burada kritik nokta bence CSS ile yeterli derecede stillendirilebilir bileşenler olursa iş görür yoksa <select> gibi beklenenin altında bir deneyimle kalır.

  1. dialog elementi
  2. progress elementini stillendirelim
  3. Popover API
  4. Akordiyon
  5. Slider
  6. Selectlist
  7. Switch
  8. Drawer
  9. Data table
  10. Tooltip
  11. Date picker
  12. Form Validation
  13. Tabs
  14. Carousel

Çoğu beklenti ama umarım böyle bir liste çıkar sene sonu. :)

PWA

Safari’ye push notification desteği gelmesiyle geçen sene PWA alanında ciddi bir atılım bekliyordum ancak gözle görülür bir sıçrama olmadı. Nasip diyelim. PWA’i birçok konuda avatajlı görmeme rağmen sektör bu konuda benimle aynı düşünmüyor galiba.

  • Tek kod bloku: Mevcut sitelerde mobil için iki ayrı (iOS, Android) geliştirme ortamı var. Ayrıca hala Türkiye’de responsive olmayan birçok siteden dolayı web ve mobil web var. Bu 4 farklı ortam yerine tek ortamda işlerimizi halledebileceğimiz bir sistem var ve kimse kullanmıyor :)

  • Tek platform öğrenme ihtiyacı: Mobilde mevcut şartlarda Android için farklı iOS için farklı bir öğrenme eğrisi var. Bunun için React Native ve Flutter gibi çözümler olsa da hala birçok şirket native olanları tercih ediyor. PWA’in tüm bunlardan daha iyi bir çözümü var. Sadece HTML, CSS ve Javascript ile tüm her yerde çalışan siteler / uygulamalar yapma imkanı.

  • SEO: Mobil uygulamalrın arama motoru konusundaki sıkıntıları malum. PWA arama motorları konusunda olmazsa olmaz.

  • Güncelleme kolaylığı: Mobil uygulamaların Web marketlerinde güncellemenin zorluğunu bilenler bu konuda PWA’nin ne kadar büyük bir nimet olduğunu anlar.

  • Erişilebilirlik: Bu konuda mevcut sitelerinde eksikleri olsa da PWA’nın erişilebilirlik çözümlerinin daha çok ve kolay olduğunu kabul etmeliyiz.

  • Eski araçlarda çalışma: Düşük kalitedeki araçlarda dahi çalışma imkanı sağlamasıyla mobil uygulamalara göre avantajı vardır.

  • Hız: Web tekonolojileri hız konusunda daha fazla araç sunmaktadır. Hız ölçümü ve geliştirmesi daha kolay. Ön bellek yönetimi ve lazy load yöntemleri daha uzun süre tecrübe edilmiştir. Örneğin Orange Polska S.A.‘nın verilerine göre %30 daha hızlıymış.

  • Daha güvenli: Web’in süregelen güvenlik araçları nedeniyle native uygulamalara göre avantajlıdır. HTTPS seçeneği ile güvenli siteler/uygulamalar yapma imkanı sağlar.

  • Daha az maliyetli: Geliştirme ve idame ettirme maliyetleri daha düşüktür.

Eksi olarak yazabileceğimiz iki konu var mobil cihazlarda cihaz özelliklerine erişim sıkıntılı ve animasyon. Animasyon konusunda kesin çözüm geldi diyebilirim. View Transitions API bence mobil uygulamardaki animasyonu aratmayan tecrübe sunuyor. Apple’ıın yani Safari’nin iOS cihazlardaki cihaz özelliklerine erişim konusunda son yıllarda ki atağı da o eksiğinde yakında giderileceği konusunda ümitlendiriyor bizi. Ne diyelim umarım bu sefer “Bu sene PWA’nın yılı” dedirtiriz. :)

Kalın sağlıcakla.

Kaynaklar

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