tarihinde Fatih Hayrioğlu

Video örnek resim üzerine ikon koymak isteyince SVG’ye gölge uygulama ihtiyacım oldu. İhtiyaç tam olarak şöyle

gölgeli svg

Video örnek resim dosyası üzerine oynatma ikonu koyacağız ve bu oynatma ikonu beyaz olacak. Tabi beyaz okun altına beyaz zemin gelince ayrışması için gölge koyulmuş. Ben ikonu satır içi (inline) SVG olarak koydum. Sonra box-shadow uygulayayım dedim. Sonuç beklediğim gibi olmadı.

box-shadow svg’yi bir kutu gibi algılayıp kare şeklinde gölge verdi. Çözüm için aklıma CSS filter’ın drop-shadow özelliği geldi. Biraz araştırınca benzer cevaplar gördüm.

Aklınızın bir kenarında bulunsun.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Benim gibi yaşlanmaya başlayınca editörlerdeki yazı boyutlarını yükseltmeye başlıyorsunuz. İlk bu işe başaladığımda favori font-size boyutum 11px idi, sonra zamanla 12,14,16 diye büyümeye başladı.

Sublime Text’te kod yazdığımız kısmın yazı boyutunu büyütmek çok kolayken menü (sidebar) kısmının yazı boyutunu arttırmak biraz daha zor oluyor.

Ufak bir ara sonucunda stackoverlow’da bir cevabını buldum.

  • Sublime Text -> Preferences -> Browse Packages yolunu izleyip ilgili klasörü açın.
  • İkinci adım User klasörüne girin.
  • Eğer standart temayı kullanıyorsanız Default.sublime-theme adında bir dosya oluşturup aşağıdaki kodları ekleyin. Eğer standart harici bir tema kullanıyorsanız ilgili tema (benim için Monokai Pro.sublime-theme) dosyasını açıp sidebar_label diye aratın.
[
    {
        "class": "sidebar_label",
        "color": [0, 0, 0],
        "font.bold": false,
        "font.size": 15
    },
]

Yazı boyutunu 15 yazmak benim için iyi oldu.

Bunu yapınca menü ögeleri bir birine çok yaklaştı onları düzeltmek için de aynı dosya içinde sidebar_tree aratıp

{
  "class": "sidebar_tree",
  "row_padding": [8, 3],
  "indent": 12,
},

row_padding değerini [8, 6] yapmak benim sorunlarımı çözdü.

Siz kendi değerlerinizi tanımlayıp istediğiniz yapıya getirebilirsiniz.

Kolay gelsin.

Kaynaklar

tarihinde Fatih Hayrioğlu

React yazmaya başlayalı çok zaman olmadı. React yazarken karşılaştığım sorunlar ve deneyimlerimi paylaşmaya çalışıyorum.

Yukarıdaki tweette belirttiğim gibi React yazarken en beğendiğim konulardan birisi EcmaScript6 yoğun olarak kullanılıyor olması.

ES6 konuları hakkında bir şeyler yazmalıyım dedim, kaynakları araştırırken bu konuda çok Türkçe kaynak olduğunu gördüm. Bu sevindirici bir durum. Sonra ES6 hakkında yazı yazmak yerine bu yazılanları kategorize edip bir liste haline getirip github’ta paylaşmalıyım dedim. Yeni makaleler eklendikçe veya bu makalelerden linki kırık olan olursa çıkarmayı hep beraber yaparız dedim.

Ben okuduğum kaynaklara göre bir sınıflandırma yaptım. Bu konuda farklı önerisi olan arkadaşların fikirlerine açığım. Zaten listenin github’ta olma sebebide bu. Bu listeyi canlı tutmak.

github logo ES6 Türkçe Kaynaklar

React içinde kullandığım ES6 özelliklerini listelerken neredeyse tüm özellikleri React içinde de aktif olarak kullandığımızı gördüm. En aktif kullandığım 8 konu başlığı

  • Değişkenler let ve const
  • arrow fonksiyonu
  • Dizi işlemleri
  • Spreat operator ve rest
  • Destructing
  • Sınıflar
  • Modüller
  • Genaratör fonksiyonlar

Bunların dışında ternary operatörü de çok kullandığımızı fark ettim. Tabi bu ES6 öncesi bir özellik 😊

Buradan aşağıdaki listede yazısı bulunan tüm arkadaşlara şükranlarımı sunuyorum.

Benim gözümden kaçan ve aramalarımda karşıma çıkmayan kaynakları eklemeyi unutmayın lütfen.

video eğitimlerinin yanına :video_camera: işaretini koydum.

Yardımlarından dolayı Serkan Bektaş‘a teşekkürlerimi sunarım.