Atom – power mode eklentisi (eğlenceli kod yazın)

Her yazılım geliştirici kod yazarken bazen sıkılmaktadır. Yada bazı projeleri yapısı nedeniyle geliştirmek sıkıcı olabiliyor.

Tamda bu noktada sizlere atom kod editörü için hazırlan power mode eklentisini tanıtacağım.

Eklenti bizlere daha eğlenceli birazda efektli kod yazmamızı sağlıyor. Özellikle Combo modunda insanın yazdıkça yazası geliyor. 😀

Github sayfası: https://github.com/codeinthedark/editor

Kod yazarken titreme ve patlama efekti

Skor ve Combo

Kurulum için editörü açtıktan sonra File > Settings bölümünden Install bölümüne gelin. Arama kısmına activate-power-mode yazıp entre’a basınız. Eklenti karşımıza çıkacaktır. Install diyip kurulumu yapıyoruz. Eklentinin ayar sayfasından efektleri ve diğer özellikleri ayarlayabilirsiniz.

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