Atom kod editörü ftp eklentisi

Benimde severek kullandığım editörlerden biri olan atom node js tabanlı kod editörüdür. Kullanımı basit ve zevklidir. Ücretsiz olarak dağıtılmaktadır. Atom hakkında daha detaylı bilgi için resmi web sitesi https://atom.io adresini ziyaret edebilirsiniz. Kod editörlerin olmazsa olmazlarından biride ftp bağlantılarıdır. Doğrudan ftp bağlantısı yaparak dosyaları düzenlemek büyük bir kolaylık sağlamaktadır. Bu tarz eklentiler olmasa dosyayı kaydedin ftp programından tekrar yüklememiz gerekecekti. Bugünde atom editörümde en çok kullanılan ftp eklentisinin kurulumu anlatacağım.

Editörü açtıktan sonra menüden Packages > Setting View > Open menüsüne tıklıyoruz.

Sol taraftan Install butonuna tıklıyoruz. Karşımıza eklenti yükleme sayfası gelecektir. Arama bölümüne https://atom.io/packages/remote-ftp yazıp aratıyoruz. Packages butonuna basıyoruz. Eklentimizi bulduktan sonra Install butonuna tıklıyoruz.

Eklenti kurulduktan sonra Packages > Remote-FTP > Create FTP config file menüsüne tıklıyoruz.

Açılan sayfada host, user, pass bölümlerine ftp adresini, kullanıcı adını ve şifresini yazdıktan sonra Ctrl+Save diyoruz.

Packages > Remote-FTP > Connect diyerek ftp bağlantısı yapıyoruz.

FTP’deki dosya ağacı görmek için; Packages > Remote-FTP > Toogle diyoruz. Yan taraftan dosyamızı seçiyoruz. Düzenleme yaptıktan sonra Ctrl+Save diyerek dosyayı kaydedip sunucuya yolluyoruz.

Basit ve kullanışlı tab yapımı

Bir projemde aynı sayfada birden fazla tab kullanmak gerekti. Bunun için çok güzel jquery eklentileri bulunmaktadır. Ama daha az kod kullanarakta bu iş yapılabilir. Üstelik aynı sayfada başka bir tab kullanmak için ekstra fonksiyon çağırmanızda gerekmiyor.

Css kodları

.tab-container {width:600px;margin:10px;background-color:#f3f3f3;overflow:hidden;padding:2px;border:1px solid #CCC;position:relative;}
.tab-container .tab-header{overflow:hidden;}
.tab-container .tab-header a {display:inline-block;font-size:12px;padding:5px;background-color:#2c3e50;color:#ffffff;margin-bottom:3px;}
.tab-container .tab-header a.active, .tab-container .tab-header a:hover {background-color:#e3e3e3;color:#2c3e50;}

.tab-content {display:none;padding:5px;background-color:#e3e3e3;overflow:hidden;}
.tab-content.active{display:block;}
 

Html kodları

<div class="tab-container" id="tab1">
	<div class="tab-header">
		<a href="javascript:;" class="active" data-tab="tab1">Tab Başlık 1</a>
		<a href="javascript:;" data-tab="tab1">Tab Başlık 2</a>
		<a href="javascript:;" data-tab="tab1">Tab Başlık 3</a>
		<a href="javascript:;" data-tab="tab1">Tab Başlık 4</a>
	</div>
	
	<div class="tab-content active">Tab İçerik 1</div>
	<div class="tab-content">Tab İçerik 2</div>
	<div class="tab-content">Tab İçerik 3</div>
	<div class="tab-content">Tab İçerik 4</div>
</div>


<div class="tab-container" id="tab2">
	<div class="tab-header">
		<a href="javascript:;" class="active" data-tab="tab2">Tab Başlık 1</a>
		<a href="javascript:;" data-tab="tab2">Tab Başlık 2</a>
		<a href="javascript:;" data-tab="tab2">Tab Başlık 3</a>
		<a href="javascript:;" data-tab="tab2">Tab Başlık 4</a>
	</div>
	
	<div class="tab-content active">Tab İçerik 1</div>
	<div class="tab-content">Tab İçerik 2</div>
	<div class="tab-content">Tab İçerik 3</div>
	<div class="tab-content">Tab İçerik 4</div>
</div>

Yeni bir tab oluştururken sadece tab id değerlerini değiştirmeniz yeterli olacaktır.

Javascript kodları

Burada dikkat etmeniz gereken yer javascript kodlarını sayfanın sonuna eklemeniz gerekmektedir. </body> tagının üstüne. Eğer tabların tıklayınca çalışmasını istiyorsanız hover yerine click yazmanız yeterlidir.

$(".tab-container .tab-header > a").hover(function(){ // eğer tıklayınca çalışsın istiyorsanız hover yerine click yazınız
	var tabID=$(this).data("tab"); // data-tab değerini alıyoruz. Bu şekilde hangi tabın üzerine geldiğimizi buluyoruz
	var kacincieleman = $(this).index(); // a elemanın kaçıncı sırada olduğunu buluyoruz
	
	$("#"+tabID+" .tab-header > a").removeClass("active"); // active class'ını kaldırıyoruz
	$(this).addClass("active"); // üzerine gelinen a elemanına active class'ını ekliyoruz
	
	$("#"+tabID+" .tab-content").hide(); // tab içeriklerini gizliyoruz
	$("#"+tabID+" .tab-content:eq("+kacincieleman+")").show(); // a elemanının bulunduğu sıraya denk gelen tab içeriğini aktif ediyoruz
});

 

Önizleme

İndir

Google pagespeed analytics sorunu

Google page speed ile sitemizin açılış hızını test ederken çoğu zaman eklediğimiz analytics dosyası sorun çıkarmaktadır. Çözümlerden birisi analytics kodunu js ile sayfa yüklendikten sonra çağırabiliriz. Bir diğer yol ise analytics kodunun içindeki js dosyasındaki kodları yerel bir js dosyasına yazıp sitemizden çektirebiliriz. Dosyanın güncel kalması içinde analytics dosyasını çeken ve js olarak kaydeden bir sayfa hazırlayıp bu sayfayıda cron a bağlayarak sorunu çözmüş oluruz.

Örnek hata:

İlk olarak analytics dosyasını çekecek ve js olarak kaydedecek kodu yazarak başlayalım.

Php dosyamızı: update-analytics.php
Yerel analtiycs dosyamız: local-analytics.js  olsun.

 


<?php
error_reporting(0); // hataları gizliyoruz

$uzakdosya='https://www.google-analytics.com/analytics.js'; //google analytics dosyasının adresi
$yereldosya='local-analytics.js'; //yerel analytics dosyamız

$cevap=file_get_contents($uzakdosya); // dosyayı çekiyoruz

if(!empty($cevap)){
	// Sunucudan gelen cevabı ekrana basıyoruz
	echo $cevap;
	 
	// Eğer dosya yoksa oluşturuyoruz ve yazıbilir şekilde açıyoruz
	if(!file_exists($yereldosya)){
	fopen($yereldosya, 'w');
	}

	//Dosya yazıbilir mi kontrol ediyoruz
	if(is_writable($yereldosya)) {
		 if($dosya = fopen($yereldosya, 'w')){
			fwrite($dosya, $cevap); // ekrana bastığımız kodları yerel analytics dosyamıza yazıyoruz
			fclose($dosya);
		 }
	}
}
?>

Sayfamız hazır olduğuna göre sıra cron ayarlaması yapmada.

Cronu ayarladıktan sonra son olarak analytics kodumuzu resimdeki gibi düzenliyoruz.

Bu işlemi yandex metrica içinde kullanabilirsiniz.

Colorbox iframe sorunu

Bu sayfaya geldiğinize göre büyük ihtimal colorbox’ı bilmeğiniz yoktur. Bilmeyenler için kısa anlatacak olursak. Jack Moore‘un geliştirdiği bir lightbox eklentisidir. Kullanımı kolay ve arayüzü istediğiniz şekle sokabilirsiniz. Yani bir lightbox yerine popup olarak açılan üye girişi arayüzü de yapabilirsiniz.

Bu güzel eklentiyi iframe içinden açtırmak istersek sorun çıkmaktadır. Aşağıdaki kod ile bu sorunu kolayca çözebiliriz. Bu kodu iframe sayfasına ekleyiniz.

Burada yaptığımız işlem colorbox kütüphanesini parent ile index.html içinde çalıştırmış olduk. Fark ettiyseniz normal kullanımda olduğu gibi $(“.galeri”) şeklinde  yapmadık doğrudan colorbox’a parametreleri girip çalıştırdık.


$(document).ready(function(){
	//Resim için
		$('.resim').click(function (e) {
			e.preventDefault(); // varsayılan işlemi pasif ediyoruz.					
			var image=$(this).attr("href"); //url alınıyor.
			
			parent.$.colorbox({transition: "elastic", href: image }); //colorbox fonksiyonunu parent olarak çalıştırıyoruz.
		});
		
	//İframe için
		$('.iframe').click(function (e) {
			e.preventDefault();					
			var url=$(this).attr("href");
			
			parent.$.colorbox({transition: "elastic", href: url, iframe:true, open: true, width:'600px', height:'300px'});
		});
		
	//Youtube video için
		$('.youtube').click(function (e) {
			e.preventDefault();				
			var video=$(this).attr("href");
			
			parent.$.colorbox({transition: "elastic", href: video, iframe:true, open: true, width:'600px', height:'500px'});
		});
});

Önizleme

İndir

Winscp kurulumu ve kullanımı

Winscp filezilla, cuteftp gibi bir ftp programıdır. Açık kaynak ve ücretsiz olarak dağıtılmaktadır. Diğer ftp programlarından daha fazla özelliği bulunmaktadır.

İndir

Download sayfasına geldiğinizde [Download WinSCP] linkine tıklayınız. Sizi aşağıya yönlendirecektir. Buradanda Installation package linkine tıklayınız.

Kurulum ekranı önümüze geldiyse sırasıyla Onaylıyorum > İleri > İleri > Kurun butonlara basarak kurulumu tamamlıyoruz.

Eğer bilgisayarınıza filezilla, cuteftp gibi ftp programı varsa bunlardaki giriş bilgilerini kendisine aktarması için sizden onay isteyecek burası size kalmış.

Eğer kurulum tamamlandıysa aşağıdaki gibi pencere gelecektir.

Winscp

Sftp: Güvenli ftp bağlantıları içindir. Genelde sunuculara bağlanmak için kullanılır. SSH ile birlikte bağlanmaktadır. Bunun için ssh yetkinizin olması gerekmektedir.

Ftp: Standart ftp protokolüdür.

Scp: Bir ağdaki iki makine arasında dosya kopyalamak için kullanılır.

WebDav: Http bağlantısı üzerinden uzak makinedeki dosya işlemlerini sağlayan bir http eklentisidir.

Son iki tanım sadece bilgilendirme amaçlıdır.

Biz ftp üzerinden bağlantı yapacağız.

Bağlantı yaptıktan sonra aşağıdaki gibi bir pencere gelecektir.

Buradan sonra kullanımını diğer ftp programları gibi dosya sürükle/bırak ile işlem yapabilirsiniz.

Sorularınızı yorumda belirtiniz.