CSS geçiş efekti özelliği güzel bir özellik. Bir çok basit animasyon işinde kullanılan geçiş efekti özelliğinin bir elemanı gizle/göster (toggle) ettirmek istediğimizde bazı sorunları var. Çözüm aradığımda bir kaç yöntem karşıma çıktı. Bu sorun ile ilk karşılaştığımda sahibinden.com’da bana özel sol menüsü yapıyorduk, çözümü bulunca ben bunun bir makalesini yazmalıyım demiştim ancak nasip değilmiş olmadı. Kısmet şimdiye imiş.

Elemanı gizle/göster yapmak için ilk düşündüğümüz geçiş efekti yükseklik değerini başlangıçta sıfır verelim tıklanınca veya üzerine gelince auto‘ya çevirelim. Sorun burada başlıyor CSS height değerini sıfırdan auto’ya çekemiyor.

MDN bu konuda ki açıklaması bu işin zor bir iş olduğu yönünde. Tarayıcılarda sıkıntıya girmektense desteklemeyelim sonucuna varmışlar :)

Bu sorunu çözmek için iki yöntem var.

max-height çözümü

Çözüm için height yerine max-height kullanmak.

  • max-height değerini iyi tanımlamak gerekiyor. Verilen değer Açılış/kapanış animasyonunu etkiliyor. Yüksek değerler animasyonun hızlı olmasını veya anlaşılmamasına neden oluyor. Küçük değerlerde içeriğin aktif olarak geldiği yerlerde içeriğin bazı kısımlarının görünmemesine neden olabilir.
  • max-height değeri tanımlanan elemana padding, margin değeri tanımlamayın animasyonda zıplamalara neden oluyor.
  • Gizle/göster yaptığımız elemana padding ve margin tanımlamak yerine içine bir tane daha eleman atayıp padding ve margin değerlerini bu yeni eleman tanımlayarak çözebiliriz.

scaleY ile çözmek

transform: scaleY yardımıylada bir çzöm mümkün. Başlangıçta değer sıfır (0) iken seçili durumda veya üzerine geldiğimizde değeri bir (1) yaparakta bir çözüm oluşturabiliriz.

Gayet kolay bir çözüm. Animasyonun açılış şekli bazı durumlarda istenmeye bilir. Tercih sizin.

Kalın sağlıcakla.

## Kaynaklar

Çalışma hayatım editör (Sublime Text), Terminal (iTerm) ve Chrome / DevTools arasında geçiyor. Bu bileşenlerden biri olan Chrome / DevTools hakkında birkaç ipucu paylaşmak için bu makaleyi yazdım.

1. Chrome DevTools’u açmanın kısayolu

Firebug kullanırken genelde sağ tıklayıp denetle (inspect) tıklayarak açtığım paneli o kadar yoğun kullanıyorum ki kısayolunu öğrenmem gerekti. Çok kullandığımız şeylerin kısayolunu öğrenmek her zaman iyidir.

Command+Option+i (Mac)

F12 veya Control+Shift+i (Windows/Linux)

2. Koyu (Dark) tema kullanımı

Editörde kod yazarken genelde koyu zeminli temaları tercih ediyorum. Aynı şeyi Chrome DevTools’ta da yapabilmek çok güzel.

DevTools’u açın Settings > General seçin gelen listeden Dark’ı seçmeniz yeterli.

dev-tools-koyu-tema

Sonuç aşağıdaki gibi görüncektir.

dev tools koyu tema görünümü

3. DevTools yazı boyutunu arttırmak

Yaş ilerledikçe yazı tipi boyutu değeri yetmiyor. Editördeki yazı boyutunu da 18px kullanıyorum. DevTools’ta yazı boyutunu arttırmak çok kolay olmadı. Çünkü bunun için tanımlanan kısayola Türkçe klavye seçeneğinde ulaşamadım.

Çözümü işletim sisteminin klavye seçeneğini İngilizce olarak seçip sonra Command+Shift++ (Mac) Control+Shift++ (Win) kısayoluyla dev tools yazı boyunu arttırarak buldum, ayrıca yazı boyunu azaltmak için Command+- (Mac) Control+- (Win) kısayolu kullanılabilir. Değerleri başlangıç değerini döndürmek için Command+0 (Mac) Control+0 (Win)

Not: Tekrar Türkçe klavye seçeneğine dönmeyi unutmayın :)

4. Çift ekran kullanımında DevTools

Web sitelerini geliştirirken yoğun bir şekilde DevTools kullanıyorum. Çift ekran imkanı olanların Chrome’u bir ekranda DevTools’u ikinci ekran kullanmaları büyük avantaj sağlayacaktır.

dev tools ayrı ekran kullanımı

5. DevTools Doc side kısayolu

Genelde masamda çalışırken çift ekranla çalıştığım için DevTools ayrı pencerede kullanıyorum. Toplantıya girerken veya birisiyle çalışırken ekranımı taşıyamadığım için sadece dizüstü bilgisayarımda çalışıyorum. Bu geçişlerde DevTools’u kullanım şekillerimde değişiyor. Bu değişimi sağlamak için kullandığım kısayol

Cmd+Shift+D (Mac)

Ctrl+Shift+D (Windows)

6. Renk paleti

Firefox’ta iken bunun için bir eklenti kullanıyordum.

Herhangi bir renk tanımının sol yanındaki renk kutusuna tıklayıp renk paletini açabiliyoruz. Açılan renk paletini sadece DevTools içerisinde değil normal tarayıcı üzerindeki bir rengi seçmek için de kullanabiliyoruz.

dev tools renk paleti kullanımı

7. CSS ve JS yakışıklı göstermek

CSS ve JS dosyalarımızı daha ufak boyutlu olsun diye küçültüyoruz. Canlıda bu dosyaları incelerken dosyalar okunamayacak kadar kötü duruyor. Bu dosyaları daha okunaklı görmek için çok kullandığım bir özellik.

ilk ekran

dev tools minfied

Sağ alttaki butona basarak daha düzgün bir görünüme kavuşturabiliriz. Bundan sonra denetlemek istediğimiz satıra breakpoint ekleyebiliriz.

dev tools prettier

8. Yenile butonuna ek özellikler

Yenile butonu dev tools açıkken daha fazla seçenek sunuyor. DevTools açıkken yenile butonu üzerindeyken sağ tıklayınca aşağıdaki gibi iki yeni özellik daha geliyor.

dev tools yenile butonu

9. Network sekmesi içeriğini filtrelemek

Network sekmesinde akan listeden istediğimiz sonuca erişmek bazen sıkıntılı olur. Filtreleme özelliklerini kullanarak istediğimize kolayca erişebiliriz.

dev tools network filtreleme

Örneğin tüm jpeg dosyaları görmek için

-.jpg -.jpeg

Belirli adresten gelen istekleri hariç tutmak için

-domain:fatihhayrioglu.com

İsteklerdeki HTTP GET ve POST isteklerini hariç tutmak için

-method:GET -method:POST

vb işlemler için filtreleme seçenekleri kullanılabilir.

10. Hızlı erişim menüsü

Sublime Text’ten alışık olduğumuz komut menüsü DevTools’a geldi. Kısayolu bile aynı :) Cmd+Shift+P (Mac) Ctrl+Shift+P (Windows)

dev tools komut paleti

Bu menüden 60 adet komut verebiliyoruz.

  • Koyu temaya geçiş yapabiliyoruz
  • Devtools penceresinin yerini değiştirebiliyoruz (Dock to bottom)
  • İnternet bağlantınızı kesebilirsiniz (Network: Go offline)

11. Tüm projede ara

DevTools içinde bir çok arama alanı var, ancak girdiğimiz sitenin tamamında aramak için ayrı bir sekme var. Bu sekmeye erişmek için DevTools sağ üst menüsünden (üç nokta üst üste) More tools > Search erişebileceğimiz gibi. Cmd+Option+F (Mac) Ctrl+Shift+F (Windows/Linux) kısayolundan erişebiliyoruz. Ayrıca Hızlı erişim menüsünden ‘Show Search’ aramasıyla da erişebiliyoruz.

devtools- arama

12. Log’ların silinmesi engellemek

Konsol Sekmesi’nde günlüğü koru (Preserve Log) seçeneğini işaretleyerek, DevTools Konsolunu her sayfa yüklendiğinde log’ların silinmesini engelleyerek tüm logları görmemize olanak sağlar. Bu, sayfanın indirilmesinden hemen önce ortaya çıkan hataları araştırmak istediğimiz durumlar için süper bir özelliktir.

Eskiden açık bir şekilde seçimi yapabiliyorduk, yeni gelen sürümlerde bu seçenek sağdaki ayarlar (çark işareti) ikonuna tıklayınca geliyor.

devtools preserve log

Sağlıcakla kalın.

Editörlerde proje geliştiriken bazı klasör ve dosyaları arama sonuçlarında, hızlı erişim menüsünde ve tanımlamaya git (Go to defination..) penceresinde görmek istemeyiz. Bu dosyalara örnek olarak harici kütüphane kodları, küçültülmüş kaynak dosyaları, yayına çıkma süreçleri için gereken yapılandırma dosyaları verilebilir. Bu gibi durumlar için birkaç çözüm önerisi var. Uygun olan çözümü kullanabilirsiniz.

Akıllı arama

Dosyaları hariç tutmanın editörün hızına da etkisi var. Daha az dosyayı tarayan editör daha hızlı çalışacaktır.

Sublime Text Yapılandırma dosyasıyla

Üst menüden Sublime Text > Preferences > Settings tıklayınca gelen ikili pencerede soldakiler bağlangıç olan değerleri gösterir. Sağdaki pencere ise bizim ayarlarımızı içerir. JSON tipi bir yapılandırma dosyası olan bu dosyaya çıkarmak istediğimiz dosya, klasör ve belirlediğimiz uzantılı dosyaları ekleyerek amacımız ulaşabiliriz.

Bu dosya Sublime Text ile geliştireceğimiz tüm projeler için geçerlidir.

{
	"binary_file_patterns":
	[
		"*.tbz2",
		"*.gzip",
		"*.zip",
		"*.doc"
	],
	"file_exclude_patterns":
	[
		"*.exe",
		"*.o",
		"*.pdb",
		"*.pyc",
		".DS_Store",
		"*.min.js"
	],
	"folder_exclude_patterns":
	[
		".git",
		".yarnrc",
		".gitignore",
		"logs",
		"*.sublime-workspace",
		".svn",
		"node_modules"
	],
	"color_scheme": "Packages/Predawn/predawn.tmTheme",
	"draw_white_space": "all",
	"font_face": "Source Code Pro",
	"font_options": ["gray_antialias"],
	"font_size": 17,
	"highlight_line": true,
	"highlight_modified_tabs": true,
	"rulers": [100],
	"tab_size": 4,
	"translate_tabs_to_spaces": true,
	"word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",
	"word_wrap": true
}
  • binary_file_patterns: Belirlenen uzantılı dosya tiplerini hariç tutmak için
  • file_exclude_patterns: Belirlenen dosyaları hariç tutmak için
  • folder_exclude_patterns: Belirlenen klasörleri hariç tutmak için

Bu kullanımın eksileri;

  • Projeye özel dosya ve klasör belirleme imkanı yok.
  • Belirlenen dosya ve klasörlere sol menüden erişim imkanı kalkıyor

*.sublime-project dosyasıyla

Çok fazla projede çalışıyorsanız Sublime Text’in genel yapılandırma dosyasındaki tanımlar çok işinize yaramayabilir.

Çözüm olarak ilk başta proje oluşturmanız gerekiyor. Proje oluşturunca ana dizinde proje_adi.sublime-project adında bir dosya otomatik olarak eklenecektir. Bu dosya içinde yukarıdakine benzer bir tanım ile projeye özel dosya ve klasörleri hariç tutabiliriz.

{
	"folders":
	[
		{
      "file_exclude_patterns": 
      [
        "sonar-project.properties",
        "README.md",
        "newrelic.js",
        "Dockerfile",
        "pm2_config.json",
        "docker-compose.yml",
        "Jenkinsfile",
        ".eslintignore"
      ],
      "folder_exclude_patterns":
      [
        ".history",
        ".vscode/**",
        "*.sublime-workspace",
        "styleguide",
        ".vscode",
        "node_modules"
      ],
			"path": "."
	   }
	]
}

Bu kullanımın eksileri;

  • Belirlenen dosya ve klasörlere sol menüden erişim imkanı kalkıyor

Arama penceresinden

Arama penceresinden istediğimiz dosya ve klasörleri çıkarma imkanımız var. Aşağıdaki görüntüdeki gibi istediğimiz klasör ve dosyayı arama sonucundan hariç tutabiliyoruz. Hariç tutmak istediğimiz dosya ve klasörünü adının başına eksi (-) işareti koymamız yeterli.

Sublime Text Arama Alanı

Bu yöntem ile dışarı çıkardığımız dosya ve klasörler sol menüden gizlenmiyor.

Bu kullanımın eksileri;

  • Sublime Text açılıp kapanınca bu kurallar kayboluyor.
  • Arama penceresinden bu kuralları yönetmek zor.

ToggleExclude eklentiyle

Yukarıdaki dosyaları hariç tutma yöntemlerinde yaşadığımız sol menüde gözükmeme sorununu dikkat çekiyor. Bu sorunu düzeltmek için ToggleExclude eklentisini kullanmamız gerekiyor. ToggleExclude adresinden yükleyebileriz ya da paket kontrol ekranından ‘ToggleExclude’ yazarak yükleyebiliriz.

ToggleExclude eklentisi

Eklenti kullanımı basit. İki adet yapılandırma dosyanız oluyor. Default ve User. Default tüm klasör ve dosyaları içerebilir, User dosyası içinde yukarıdaki JSON yapının aynısını ekleyebiliriz.

{
	"conditional_file_exclude_patterns":
	[
		"views-njk/partial/build/_criticalCSS-sample.html",
		".gitignore",
		"README.md",
		"nodemon.json",
		"package-lock.json"
	],
	"conditional_folder_exclude_patterns":
	[
		"node_modules",
		"styleguide",
		"test",
		".history/**",
		".vscode/**"
	],
	"enabled": true
}

User dosyasındaki kuralları aktifleştirmek için Komut tablasını açıp (Cmd+Shift+p - windows için Ctrl+Shift+p) ToggleExclude yazarak seçenekleri görebilirsiniz. Karşınıza 3 seçenek çıkacaktır. Default, User ve Enable/disable seçenekleri. Bu seçeneklerden sonuncusu olan Enebale/Disable ile User’daki kuralları aktifleştirebilirsiniz. Aynı yoldan giderek pasifleştirebilirsiniz.

Çalışma şartlarınız ve ortamınıza göre yukarıdaki yöntemlerden birini veya birkaçını kullanabilirsiniz.

Kalın sağlıcakla.

Kaynaklar