Ahmet Ertem http://ahmetertem.com.tr/ Developer Blog Sun, 29 Jan 2017 21:24:54 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.3 Ucretsiz Font Iconlar http://ahmetertem.com.tr/ucretsiz-font-iconlar/ http://ahmetertem.com.tr/ucretsiz-font-iconlar/#comments Sun, 29 Jan 2017 21:12:31 +0000 http://ahmetertem.com.tr/?p=970 Ucretsiz, web sitelerinizde ve projelerinizde kullanabileceginiz font iconlar icin kucuk bir derleme yapmaya calistim. Yenilerini buldukca yazimi guncellemeye calisacagim. Font Awesome Lisans: SIL OFL 1.1 Font Awesome surekli guncellenen bir kaynak ve benim favorilerim arasinda yer aliyor. Neredeyse tum projelerde kullaniyorum denilebilir. Web Sitesi | Github Repo   Material Design icons Lisans: Apache-2.0 Google’in destekledigi Materialize’da ... [Devamini oku...]

Sonrası Ucretsiz Font Iconlar Ahmet Ertem ilk ortaya çıktı.

]]>
Ucretsiz, web sitelerinizde ve projelerinizde kullanabileceginiz font iconlar icin kucuk bir derleme yapmaya calistim. Yenilerini buldukca yazimi guncellemeye calisacagim.

Font Awesome

Lisans: SIL OFL 1.1

Font Awesome surekli guncellenen bir kaynak ve benim favorilerim arasinda yer aliyor. Neredeyse tum projelerde kullaniyorum denilebilir.

Web Sitesi | Github Repo

 

Material Design icons

Lisans: Apache-2.0

Google’in destekledigi Materialize’da kullanilan font iconlar

Web Sitesi | Github Repo

 

Octicons

Lisans: MIT

Octicons, Atom’un varsayilan font icon ailesidir. MIT lisansi da cabasi :)

Web Sitesi | Github Repo

Ionicons

Lisans: MIT

Nerden geldigini bilmiyorum fakat Ion’da da gayet fazla font icon mevcut

Web Sitesi | Github Repo

Foundation

Lisans: Bulamadim

Yine guzel bir serii, bir goz atin derim.

Web Sitesi

 

IcoMoon

Lisans: CC BY 4.0 veya GPL

IcoMoon, elinizdeki SVG’ler ile de guzel bir arsiv yapmanizi saglayan bir sitesi olan, bir yandan da ucretsiz font icon servisi sunan bir sitecik.

Web Sitesi | Github Repo

 

Devicon

Lisans: MIT

Yazilim dillerinin, tasarim ve yazilim araclarinin simgelerinin bulunabildigi bir font icon seti…

Web Sitesi | Github Repo

 

MaterialDesignIcons

Lisans: OFL-1.1

Google’in Materialize Icon Setinden turetilmis, gelistirilmis bir font icon seti

Web Sitesi | Github Repo

 

Baska bildiginiz acik kaynakli font icon ailesi/seti varsa lutfen yorum atiniz ;)

Sonrası Ucretsiz Font Iconlar Ahmet Ertem ilk ortaya çıktı.

]]>
http://ahmetertem.com.tr/ucretsiz-font-iconlar/feed/ 2
Cordova MacOS X iOS Hatalariyla Basa Cikma http://ahmetertem.com.tr/cordova-macos-x-ios-hatalariyla-basa-cikma/ http://ahmetertem.com.tr/cordova-macos-x-ios-hatalariyla-basa-cikma/#respond Thu, 19 Jan 2017 08:02:06 +0000 http://ahmetertem.com.tr/?p=966 MacOS X’te IOS Cordova ayarlari ile ilgili az da olsa detayli bir yazi Eger Xcode kurmadiysaniz asagidaki gibi bir hata mesaji alirsiniz; [crayon-65f92c882fe9e007141251/] XCode kurmak icin App Store’u veya https://developer.apple.com/download/ adresini ziyaret edebilirsiniz.   Eger asagidaki hatayi aliyorsaniz; [crayon-65f92c882fea4130317899/] Hata mesajinda da soyledigi gibi ios-deploy adli nodejs paketini indirin. [crayon-65f92c882fea6575233929/] Eger bu adimda problem yasiyorsaniz asagidaki sekilde ... [Devamini oku...]

Sonrası Cordova MacOS X iOS Hatalariyla Basa Cikma Ahmet Ertem ilk ortaya çıktı.

]]>
MacOS X’te IOS Cordova ayarlari ile ilgili az da olsa detayli bir yazi

Eger Xcode kurmadiysaniz asagidaki gibi bir hata mesaji alirsiniz;

cordova run ios
Error: xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

XCode kurmak icin App Store’u veya https://developer.apple.com/download/ adresini ziyaret edebilirsiniz.

 

Eger asagidaki hatayi aliyorsaniz;

Error: ios-deploy was not found. Please download, build and install version 1.9.0 or greater from https://github.com/phonegap/ios-deploy into your path, or do 'npm install -g ios-deploy'

Hata mesajinda da soyledigi gibi ios-deploy adli nodejs paketini indirin.

sudo npm install -g ios-deploy

Eger bu adimda problem yasiyorsaniz asagidaki sekilde kurulum yapmayi deneyiniz

sudo npm install --global --unsafe-perm ios-deploy

 

Sonrası Cordova MacOS X iOS Hatalariyla Basa Cikma Ahmet Ertem ilk ortaya çıktı.

]]>
http://ahmetertem.com.tr/cordova-macos-x-ios-hatalariyla-basa-cikma/feed/ 0
Git: Temel Komutlar ve Kullanimlar http://ahmetertem.com.tr/git-temel-komutlar-kullanimlar/ http://ahmetertem.com.tr/git-temel-komutlar-kullanimlar/#respond Mon, 16 Jan 2017 13:07:27 +0000 http://ahmetertem.com.tr/?p=912 Artik SVN/Git sistemleri kullanmamak gibi bir devir kalmadi gibi birsey… Hala kullanmiyorsaniz o sizin ayibiniz :) Bu yazimda basit Git komutlarina deginecegim; Git Olusturma Olusturma kelimesi ne kadar dogru bilemem de Ingilizcede initialize olarak gecen, kisaca init olarak kullanilan kelime neyse iste ondan… [crayon-65f92c8830210232784183/] Initialize yaptigimizda klasorde git alt yapisini (klasor yapisini) olusturur.   Duruma ... [Devamini oku...]

Sonrası Git: Temel Komutlar ve Kullanimlar Ahmet Ertem ilk ortaya çıktı.

]]>
Artik SVN/Git sistemleri kullanmamak gibi bir devir kalmadi gibi birsey… Hala kullanmiyorsaniz o sizin ayibiniz :)

Bu yazimda basit Git komutlarina deginecegim;

Git Olusturma

Olusturma kelimesi ne kadar dogru bilemem de Ingilizcede initialize olarak gecen, kisaca init olarak kullanilan kelime neyse iste ondan…

git init

Initialize yaptigimizda klasorde git alt yapisini (klasor yapisini) olusturur.

 

Duruma Bakma

Ingilizcedeki status kelimesi Turkce’ye durum olarak cevirilebilir. Repository’mizin durumuna bakmak cogu zaman yapmamiz gereken bir adimdir. Bize repo ile ilgili bilgi verir ve duruma gore islem yapmamizi saglar.

git status

 

Repository Klonlama

Bir repository’yi klonlamak en basit islemlerden birisidir. Tek sart hedef klasorun olmamasi ya da bos olmasidir (bazilari klasor olsa da icini bosaltiyor vs o ayri bir konu fakat Git SCM uzerinden konusacagim)

git clone repository_url [klasor_adi]

Repository url olarak ornegin Github’da bir repository’ye girdiginizde Clone or Download yazan buttonda altta cikan linki kullanacaksiniz:

Klasor adi ise zorunlu degildir fakat ogrenmenizde de fayda var elbette.

Ornek olarak

git clone git@github.com:ahmetertem/query_builder.git qb

yapabilirsiniz. Eger SSH Key ayarlamadiysaniz hata verebilir, onu da farkli bir yazida anlatacagim simdilik Ingilizce makalelere bakabilirsiniz.

 

Repository’ye Dosya Ekleme

Dosya eklemek ve commit etmek iki ayri istir, hatta yukariya (sunucuya) yuklemek ayri islerdir. Bunu adim adim isleyecek olursak, dosyalari eklemek, commit etmek ve yukari yuklemek (pushlamak) olarak sirayla gitmemiz gerekiyor.

Dosyalari Ekleme

Dosyalari repository’ye eklemek icin add argumanini kullanacagiz.

Ornegin;

// repository root dizininden;
git add dosyaadi.uzanti
git add klasor/yolu/dosyaadi.uzanti
git status

Repositorymizin root dizinindeyken bu sekilde ekleyebiliriz, root dizinde degilsek cd ile dolasarak islem yapabiliriz.

Ornegin;

// root dizinden yola cikarak hareket edecegiz.
cd images
git add logo.png
cd ..
cd scripts
git add layout.js
git add npm.js
cd ..
git status

 

Dosyalari Commit Etme

Add yaparak degisiklik yapilmis, eklenmis, silinmis dosyalari vs commit’imiz icin hazirladik. Simdi sira commit etmede. Commit etmeyi islemek olarak adlandirabiliriz. Yani; su, su dosyayi ekledim, su dosyayi sildim, bunu guncelledim vs diyoruz.

Commit ederken bir de mesaj yazmamiz gerekiyor, neyi ekledik sildik gibi fakat cok da abartmamak gerek zaten committe neler degisti gorulebiliyor. Ornegin “#123. bug giderildi” yazabiliriz. Tutup da a dosyasi eklendi, b dosyasi silindi gibi uzun uzadiya mesaj yazmaniza gerek yok, ornek olarak burayi inceleyebilirsiniz. Ornekteki commit detayinda sadece 1 tane dosyada degisiklik yapildigi icin sadece o dosyanin degisikliklerini gorebilirsiniz fakat farkli repolara bakarak o committe neler degismis gorebilirsiniz.

git commit -m 'mesajimizi buraya yaziyoruz'

Yukarida tek satirlik bir ornek yaptik.

-m ile direk mesajimizi yazabiliriz. Alternatif olarak direk git commit diyerek vim gibi mesajimizi yazabilir ve degisiklige detayli yazi yazabilirdik.

 

Commit(ler)i Pushlama

Pushlamak, yukari atmak olarak da adlandiracagimiz bir adim… Dosyalari duzenledik, sildik, ettik artik sira degisiklikleri ana repository’ye atmakta.

git push [remote_adi] [branch_adi]

Ornegin;

git push origin master

 

Uzak Repo’dan Guncel Hali Cekmek

Remote (uzak) repository’den son guncel halini cekmek icin oncelikle fetch, ardindan pull yapacagiz.

Fetch

Fetch, Ingilizcede ‘git, al, getir‘ demektir (ya da oyle birsey). Fetch ettigimizde ise son guncel halinin sadece durumunu getirir. Yani su degisti, bu degisti gibi… Degisiklikleri cekmek icin ise pull’u kullanacagiz.

git fetch [remote_ismi]

Ornegin;

git fetch origin

Varsayilan isim, belirtmemisseniz eger “origin” dir…

 

Pull

Pull, cekmek demektir. Degisiklikleri aldik, artik cekebiliriz. Fetch yapmadan pull yaparsaniz fetchlemis oldugunuz son halini cekersiniz.

git pull [remote_adi] [branch_adi]

Ornegin;

git fetch origin
git pull origin master

 

Sonrası Git: Temel Komutlar ve Kullanimlar Ahmet Ertem ilk ortaya çıktı.

]]>
http://ahmetertem.com.tr/git-temel-komutlar-kullanimlar/feed/ 0
OS X’e Composer Kurmak http://ahmetertem.com.tr/os-xe-composer-kurmak/ http://ahmetertem.com.tr/os-xe-composer-kurmak/#respond Mon, 09 Jan 2017 14:41:46 +0000 http://ahmetertem.com.tr/?p=932 Composer ile ilgili yeterince konustugumu dusunmuyorum (yazi 1, yazi 2), nitekim kahramanlardan bahsetmekte her zaman fayda var :) Bu kez MacOS’ta nasil kuruluru anlatmaya calistim, umarim isinize yarar. Composer MacOS Oncelikle composer.phar i indiriyoruz [crayon-65f92c88303d2892548132/] Bulundugunuz dizine composer.phar dosyasi inmis durumda, suanda bile kullanilabilir durumda fakat suan asil hedef direk composer .... yazinca composeri cagirmasi… Global Kullanima ... [Devamini oku...]

Sonrası OS X’e Composer Kurmak Ahmet Ertem ilk ortaya çıktı.

]]>
Composer ile ilgili yeterince konustugumu dusunmuyorum (yazi 1, yazi 2), nitekim kahramanlardan bahsetmekte her zaman fayda var :) Bu kez MacOS’ta nasil kuruluru anlatmaya calistim, umarim isinize yarar.

Composer MacOS

Oncelikle composer.phar i indiriyoruz

curl -sS https://getcomposer.org/installer | php

Bulundugunuz dizine composer.phar dosyasi inmis durumda, suanda bile kullanilabilir durumda fakat suan asil hedef direk composer .... yazinca composeri cagirmasi…

Global Kullanima Acmak

Yukarida PHP arsivi olan .phar uzantili dosyayi edindik, simdi bunu global erisilebilir hale getirecegiz.

sudo mv composer.phar /usr/local/bin/

composer.phar dosyamizi usr/local/bin/ dizinine tasidik. Simdi sirada alias ekleme var:

Alias eklemek icin .bash_profile dosyamizi duzenleyecegiz, yoksa da olusturunuz…

vim ~/.bash_profile

Ici bos ise sadece satiri yapistirin, baska parametreler var ise en alt satira yeni bir satir olusturup eklemeniz yeterli

alias composer="php /usr/local/bin/composer.phar"

:wq yapip kaydedin ve terminali yeniden acin.

Artik terminalde composer yazdiginizda istediginiz dizinden erisebilir olacaksiniz.

Bir hata ile karsilasirsaniz yorum yazmaktan cekinmeyiniz ;)

Sonrası OS X’e Composer Kurmak Ahmet Ertem ilk ortaya çıktı.

]]>
http://ahmetertem.com.tr/os-xe-composer-kurmak/feed/ 0
PHPUnit ve PDOException + Çözümü http://ahmetertem.com.tr/phpunit-pdoexception-cozumu/ http://ahmetertem.com.tr/phpunit-pdoexception-cozumu/#respond Wed, 28 Dec 2016 14:48:04 +0000 http://ahmetertem.com.tr/?p=883 PDOException: You cannot serialize or unserialize PDO instances Gibi bir hata alıyorsanız yapmanız gereken çok basit; Test sayfanızın üstüne aşağıdaki kodları yapıştırın ve yeniden çalıştırın. [crayon-65f92c88304d9504190730/]  

Sonrası PHPUnit ve PDOException + Çözümü Ahmet Ertem ilk ortaya çıktı.

]]>

PDOException: You cannot serialize or unserialize PDO instances

Gibi bir hata alıyorsanız yapmanız gereken çok basit;

Test sayfanızın üstüne aşağıdaki kodları yapıştırın ve yeniden çalıştırın.

/**
 *
 * @backupGlobals disabled
 * @backupStaticAttributes disabled
 */

 

Sonrası PHPUnit ve PDOException + Çözümü Ahmet Ertem ilk ortaya çıktı.

]]>
http://ahmetertem.com.tr/phpunit-pdoexception-cozumu/feed/ 0
CentOS 6 ve 7 vsFTPd Kurulumu ve Yapilandirilmasi http://ahmetertem.com.tr/centos-7-vsftpd-kurulumu/ http://ahmetertem.com.tr/centos-7-vsftpd-kurulumu/#respond Tue, 27 Dec 2016 19:47:34 +0000 http://ahmetertem.com.tr/?p=893 Bir dizini paylasima acmanin en kolay yollarindan birisi FTP’dir. CentOS 6 ve 7 de bir dizini FTP paylasimina acmak icin vsFTPd kullanabilirsiniz. Adim 1: CentOS 6 ve 7’de vsFTP kurulumu Herseyden once her zaman yapmamiz gerektigi gibi oncelikle yum paketlerini guncelleyelim… [crayon-65f92c88305a0531761960/] Simdi de vsFTPd’yi ve ihtiyac duydugu paketleri kuralim [crayon-65f92c88305a4305447828/] Adim 2: Yapilandirma Yapilandirmak ... [Devamini oku...]

Sonrası CentOS 6 ve 7 vsFTPd Kurulumu ve Yapilandirilmasi Ahmet Ertem ilk ortaya çıktı.

]]>
Bir dizini paylasima acmanin en kolay yollarindan birisi FTP’dir. CentOS 6 ve 7 de bir dizini FTP paylasimina acmak icin vsFTPd kullanabilirsiniz.

Adim 1: CentOS 6 ve 7’de vsFTP kurulumu

Herseyden once her zaman yapmamiz gerektigi gibi oncelikle yum paketlerini guncelleyelim…

yum -y update

Simdi de vsFTPd’yi ve ihtiyac duydugu paketleri kuralim

yum -y install vsftpd

Adim 2: Yapilandirma

Yapilandirmak cok sart degil fakat guvenlik onlemleri icin her ihtimale karsin biz neyi nerden duzenleyecegimizi bilir olalim :)

Simdi vsFTPd icin yapilandirma dosyasini duzenleyelim

vim /etc/vsftpd/vsftpd.conf

3. sahislarin dosya yuklemesi, indirmesini engellemek eger aksi bir duruma ihtiyac duymuyorsaniz ilk yapmaniz gerekendir – ki zaten ilk yapilandirma da bu; bunun icin anonymous_enable i NO yapiyoruz.

anonymous_enable=NO

Yerel (CentOS’a giris yapabilen) kullanicilarin FTP baglantisi kurmasini istiyorsaniz eger local_enable i YES yapin.

local_enable=YES

Not: Eger web sunucusu olarak yapilandirmayi hedefliyorsaniz bu adimi NO olarak tutun, aksi takdirde guvenlik duvarinizin asilmasi/calinmasi durumunda tum siteleri elinizle teslim etmis olursunuz.

Yerel kullaniciya yazma yetkisi vermek istiyorsaniz write_enable secenegini dilediginiz gibi duzenleyebilirsiniz. Simdilik yetki verdigimizi varsayarsak;

write_enable=YES

Yerel kullanicilarin FTP icin kullanima atanmis dizinleri ve dosyalari gorme/duzenleme (chrootlama) yetkisi olmasini istiyorsaniz chroot_local_user satirini bulun ve eger basinda # isareti varsa kaldirin ve degerini YES yapin.

chroot_local_user=YES

Artik :wq yaparak kaydedip cikabilirsiniz.

Servisi yeniden baslatalim;

systemctl restart vsftpd

Bir de sistem acilisinda otomatik acilacak hale getirelim;

systemctl enable vsftpd

Adim 3: Guvenlik Duvarinda Kalici Izin Verme

Port 21 bilindigi gibi varsayilan FTP portudur ve bizim de port 21’e erisim izni vermemiz gerekiyor.

firewall-cmd --permanent --add-port=21/tcp

ardindan da guvenlik duvarini yeniden baslatiyoruz

firewall-cmd --reload

Artik FTPmiz hazir.

Dilersek artik kullanici ekleyebilir ve diledigimiz dizine yetki verebiliriz.

 

Sonrası CentOS 6 ve 7 vsFTPd Kurulumu ve Yapilandirilmasi Ahmet Ertem ilk ortaya çıktı.

]]>
http://ahmetertem.com.tr/centos-7-vsftpd-kurulumu/feed/ 0
Sass Nedir ve Sass Kullanımı http://ahmetertem.com.tr/sass-nedir-sass-kullanimi/ http://ahmetertem.com.tr/sass-nedir-sass-kullanimi/#comments Tue, 27 Sep 2016 12:19:29 +0000 http://ahmetertem.com.tr/?p=815 Sass, diğer bilinen adıyla (ya da uzantısıyla diyelim) Scss nedir konusuna değinmek istedim. Daha önce pek kullanmadığım fakat internette bolca gördüğüm bir konuydu ve daha önce mantığını araştırmışlığım vardı. Nitekim ihtiyaç duymadığım için üstüne düşmeye gerek de görmemiştim fakat ihtiyaç duymaya başlayınca araştırmam gerekti… İyi ki de araştırmışım ve kullanmaya başlamışım dedim çünkü bildiğim özelliklerden fazlasına ... [Devamini oku...]

Sonrası Sass Nedir ve Sass Kullanımı Ahmet Ertem ilk ortaya çıktı.

]]>
Sass, diğer bilinen adıyla (ya da uzantısıyla diyelim) Scss nedir konusuna değinmek istedim.

Daha önce pek kullanmadığım fakat internette bolca gördüğüm bir konuydu ve daha önce mantığını araştırmışlığım vardı. Nitekim ihtiyaç duymadığım için üstüne düşmeye gerek de görmemiştim fakat ihtiyaç duymaya başlayınca araştırmam gerekti… İyi ki de araştırmışım ve kullanmaya başlamışım dedim çünkü bildiğim özelliklerden fazlasına sahipmiş. Gelelim fasulyenin faydalarına;

Sass Nedir ?

Sass; dünyadaki en olgun, stabil ve güçlü, profesyonel seviyedeki bir CSS uzantısı dildir.

Sass-lang.com‘daki kendi mottoları bu şekilde (en azından ben böyle çevirebildim). Gayet kendinden emin bir cümle olmasının yanı sıra Bootstrap, Ionic gibi güçlü frameworkler de Sass kullandığı için bence haklı olabilirler de… tabii Less ile karşılaştırınca da durum böyle, nitekim biraz karşılaştırma makalelerine baktım ve Sass’ın ben de daha güçlü olduğuna karar kıldım – ya da aldandım diyebilirim de.

Benim için Sass nedir ona gelecek olursam; değişken, function, inheritance (kalıtım), matematik işlemleri yapma gibi CSS’te ihtiyaç duyduğum aksiyonların olduğu, daha üst düzey bir CSS dilidir. Kısacası; daha dinamik bir CSS dilidir.

Değişkenler (Variables)

En çok beğendiğim özellik olan, CSS’te değişken kullanabilme alt yapısıdır.

Kullanımı gayet kolay, tek yapmanız gereken; global scopeta dolar işareti $ ile başlayıp tanımlamak ve ardından kullanmak.

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
	font: 100% $font-stack;
	color: $primary-color;
}

çıktısı ise

body {
	font: 100% Helvetica, sans-serif;
	color: #333;
}

yukarıdaki gibi olacaktır. Aynı değişkeni bir çok yerde kullanabilirsiniz elbette, fakat aynı değişken ismini yeniden tanımlayamazsınız.

İçerleme (Nesting)

İçerleme doğru bir isim olmayabilir aslında fakat hiyerarşi de demek istemiyorum çünkü hiyerarşik bir şekilde olmayabilir sizin kullanımınız.

İçerlemede ise olay iç içe yazarak ebeveyn çocuk mantığı gibi ilerleyerek yazmanızı sağlıyor.

nav {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	li {
		display: inline-block;
	}

	a {
		display: block;
		padding: 6px 12px;
		text-decoration: none;
	}
}

çıktısı;

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav li {
	display: inline-block;
}

nav a {
	display: block;
	padding: 6px 12px;
	text-decoration: none;
}

Gördüğünüz gibi hepsini nav içine aldı. Daha da iç içe yazabilirsiniz elbette, ileri kullanımda ampersand & işareti de yer almakta fakat buna değinmeyeceğim — kafa karıştırmayalım boşuna.

Parçalama (Partials)

Parçalama, içeri aktarma işleminde kullanmak için yapılan dosyaları parçalama işlemi oluyor. Bunun için ana Sass dosyanızın olduğu yere alt çizgi _ ile başlayan dosyanızı oluşturuyorsunuz ve import ediyorsunuz.

İçeri Aktarım (Import)

CSS’teki içeri aktarma mantığı gibi içeri aktarma, sadece partial yapılmış bir dosyayı içeriye aktarıyorsunuz ve dosya adını, başında alt çizgi sonunda uzantısı olmadan yazıyorsunuz.

2 adet scss dosyası oluşturalım. Birisi style.scss diğeri ise _sub.scss isminde olsun.

_sub.scss:

html,
body,
ul,
ol {
	margin: 0;
	padding: 0;
}

style.scss:

@import 'sub';

body {
	font: 100% Helvetica, sans-serif;
	background-color: #efefef;
}

çıktısı ise aşağıdaki gibi olacaktır.

html, body, ul, ol {
	margin: 0;
	padding: 0;
}

body {
	font: 100% Helvetica, sans-serif;
	background-color: #efefef;
}

Katmalar (Mixins)

Aslında daha çok functionlar olarak adlandirmak daha mantikli fakat tam olarak bir function değil, yani hesap vs yaptırmıyorsunuz…

Daha çok CSS3’ün tarayıcı uyumları için kullanılmakta fakat farklı işlemler için de kullanılabilir.

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	border-radius: $radius;
}

.box {
	@include border-radius(10px);
}

Çıktısı ise;

.box {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
}

olacaktır. Sanırım mantığı anlamışsınızdır, include ettiğiniz her yerde aynı parametreleri yeniden yazmak zorunda kalmayacaksınız…

Kalıtım (Inheritance)

Kalıtım Sass’ın en büyük avantajlarından birisi… @Extend i kullanarak ortak CSS yapısı kullanan tüm elementleri bir araya toplatabilirsiniz, bunu örnekle açıklamak daha mantıklı olacaktır, daha rahat anlaşılır bu şekilde

.message {
	border: 1px solid #ccc;
	padding: 10px;
	color: #333;
}

.success {
	@extend .message;
	border-color: green;
}

.error {
	@extend .message;
	border-color: red;
}

.warning {
	@extend .message;
	border-color: yellow;
}

Çıktısı;

.message, .success, .error, .warning {
	border: 1px solid #cccccc;
	padding: 10px;
	color: #333;
}

.success {
	border-color: green;
}

.error {
	border-color: red;
}

.warning {
	border-color: yellow;
}

.success, .error ve .warning’te ayrı ayrı .message’a extend ettik ve .message son olarak hepsini kapsadı.

Operatörler (Operators)

Ve yine benim en çok sevdiğim özelliği diyebileceğim özelliğine geldik; matematiksel operatörler.

CSS’te matematik işlemleri yapmak gerçekten işlerinizi kolaylaştırabilir. Bu matematik operatörleri; +-, *, / ve %.

.container {
	width: 100%;
}


article[role="main"] {
	float: left;
	width: 600px / 960px * 100%;
}

aside[role="complementary"] {
	float: right;
	width: 300px / 960px * 100%;
}

çıktısı ise aşağıdaki gibi olacak;

.container {
	width: 100%;
}

article[role="main"] {
	float: left;
	width: 62.5%;
}

aside[role="complementary"] {
	float: right;
	width: 31.25%;
}

Şimdilik Sass (Scss) ile ilgili benden bu kadar, örnek kullanım vs için belki tekrar bir yazı yazarım.

Kolay gelsin ;)

Sonrası Sass Nedir ve Sass Kullanımı Ahmet Ertem ilk ortaya çıktı.

]]>
http://ahmetertem.com.tr/sass-nedir-sass-kullanimi/feed/ 6
Grunt Nedir? Kurulumu ve Kullanımı Nasıldır? http://ahmetertem.com.tr/grunt-nedir-kurulumu-kullanimi-nasildir/ http://ahmetertem.com.tr/grunt-nedir-kurulumu-kullanimi-nasildir/#comments Sat, 17 Sep 2016 16:33:56 +0000 http://ahmetertem.com.tr/?p=778 Grunt, kısaca bir görev çalıştırıcısıdır. Front-end’de ihtiyaç duyabileceğimiz, sürekli olarak çalıştırdığımız ya da iş yükü fazla olup ara-sıra çalıştırdığımız kod bloklarını otomatik olarak çalıştırmamıza yardımcı oluyor. Çalışma mantığını anladıktan sonra ve hâli hazırda yazılmış eklentileri gördükten sonra yapabilecekleriniz için hayal gücünüzü kullanmanıza gerek kalmayacaktır. Grunt nedir, nasıl kurulur, kullanılır, örnekler vs olabildiğince değinmeye çalışacağım. Şimdi ... [Devamini oku...]

Sonrası Grunt Nedir? Kurulumu ve Kullanımı Nasıldır? Ahmet Ertem ilk ortaya çıktı.

]]>
grunt1

Grunt, kısaca bir görev çalıştırıcısıdır. Front-end’de ihtiyaç duyabileceğimiz, sürekli olarak çalıştırdığımız ya da iş yükü fazla olup ara-sıra çalıştırdığımız kod bloklarını otomatik olarak çalıştırmamıza yardımcı oluyor. Çalışma mantığını anladıktan sonra ve hâli hazırda yazılmış eklentileri gördükten sonra yapabilecekleriniz için hayal gücünüzü kullanmanıza gerek kalmayacaktır.

Grunt nedir, nasıl kurulur, kullanılır, örnekler vs olabildiğince değinmeye çalışacağım. Şimdi biraz derine inelim…


Grunt Nedir ?

Grunt, yukarıda da belirttiğim üzere görev çalıştırıcısı (koşucusudur), yani terimsel olarak ifade edilecek olursa task runner‘dır. Başka bir task runner olan Gulp’un sağlam bir rakibidir (diyorlar, bana göre ayrı kulvardalar). Görevleri belirler, yapması gerekenleri ifade eder ve çalıştırırsınız, tüm olay aslında bundan ibarettir. Örneğin;

  • LESS ya da SASS kullanıyorsanız bu dosyanızı compile ettirebilir,
  • Javascript dosyalarınızı minify ettirebilir,
  • Bir çok javascript dosyanız varsa bunları bundle haline getirebilirsini

gibi daha bir çok alternatifiniz bulunmakta.

Bu saydıklarım sadece bir kaç örnekten ibaret elbette… Siz de kendi görevinizi oluşturabilir ve Gruntlayabilirsiniz – tabii yazılmışları önce bir incelerseniz boşuna zaman kaybetmez ve alternatif fikirler de elde edinebilirsiniz.

Hazır pluginlere buradan bakabilirsiniz.

grunt2

Grunt Kurulumu

Kurulum için öncelikle Node.js kurmanız gerekiyor. Eğer Node kurulu ise aşağıdaki satırı, komut satırında çalıştırarak kurabilirsiniz.

npm install -g grunt-cli

Kurmuş olduğumuz grunt-clidir. “CLI”, command line interface‘in kısaltmasıdır. grunt-cli’ı kurduktan sonra herhangi bir dizindeyken komut satırında grunt yazarak çalıştırabilirsiniz. Her proje için yeniden kurulum yapmanıza gerek yok.

Küçük not: eğer Node u yeniden kuruyorsanız ve Windowstaysanız command promt u yeniden başlatmanız gerekiyor.


Gereksinim

Her proje için node ile grunt paketini kurmamız gerekiyor. Bunun için öncelikle node’u initialize etmemiz gerekiyor… proje dizinine gidip komut satırına;

npm init

yazıp çalıştırıyoruz ve projemizin ismini cismini sormaya başlıyor. Bu bilgiler çok önemli olmadığı için enter enter yapa yapa devam edebilirsiniz. En sonunda “Bu bilgiler doğru mu?” diye sorduğunda yine enter a basıp devam edebilirsiniz. Bu işlem node.js’in dosyası olan package.json dosyasını oluşturmaya yarar ve içine projemiz için ihtiyaç duyacağımız paketleri belirtmek için kullanacağız.

npm install grunt --save

yazıp çalıştırmamız gerekiyor. Ardından node_modules diye bir klasör oluşacak ve klasör içine grunt klasörü eklenecek ve içine de ihtiyaç duyduğu diğer paketler eklenecektir. Not: Buradaki --save parametresini eklemezseniz package.json dosyasına gereksinim olarak eklemez.


Gruntfile

Şimdi de Grunt’ın konfigürasyon dosyası olan Gruntfile.js dosyasını oluşturmamız gerekiyor. Aşağıda boş bir Gruntfile.js örneği mevcut.

module.exports = function(grunt) {

  grunt.initConfig({
	// tasklar bura yazilacak
  });

  // grunt'a npm tasklari yukluyoruz.
  // yukaridaki tasklar loadNpmTasks yapmadan calismaz.
  // grunt.loadNpmTasks('npm-islemi-herbiri-ayri-satira');
  
  // grunt.registerTask('default', ['task1', 'task2']);
  grunt.registerTask('default', []);
  
};

Bu kod bloğunu taslak olarak varsayın ve isterseniz bir yere kaydedin. Mevcut sürümde boş bir şekilde çalışan gruntfile budur. Tabîi açıklama satırlarını silebilirsiniz… Test etmek için komut satırına sadece

grunt

yazmanız yeterli. Eğer bir hata alıyorsanız grunt ya da grunt-cli yüklemede bir problem olmuştur. Hata almıyorsanız konsol çıktısı aşağıdaki gibi olacaktır.

Done.

Artık görevleri yazmaya başlayabiliriz anlamına geliyor bu…

Görevleri seçerken daha çok kendi çok kullandıklarımı tercih ettim, siz de ilk başta bunları kullanırsanız (örnekleri yaparken) bir problem olduğunda belirtmeniz kolay olur.

Örnek 1: Uglify

İlk görevimiz javascript dosyalarını minify etmek (sıkıştırmak) olacak. Bunun için grunt-contrib-uglify pluginini kullanacağız. Öncelikle plugini indiriyoruz

npm install grunt-contrib-uglify --save-dev

Buradaki --save-dev parametresi sadece developmentta kullanacağımız için devDependencies arasına eklememize yarıyor. Yani --save parametresinden farkı birisi productionda diğeri ise development + productionda kullanmamız için…

Gruntfileımızdaki tasklara aşağıdaki kod bloğunu ekliyoruz.

uglify: {
	hedef1: {
		options: {
			beautify: true
		},
		files: {
			'js/dosya.min.js': ['js/dosya.js']
		}
	}
}

ardından uglifyı kullanabilmek için loadNpmTask yapıyoruz.

grunt.loadNpmTasks('grunt-contrib-uglify');

daha sonra ise registerTask yapıyoruz

grunt.registerTask('default', ['uglify:hedef1']);

Eğer adımları doğru izlediyseniz sizin de dosyanız aşağıdaki gibi kaynak koda sahip olmalıydı;

module.exports = function(grunt) {

	grunt.initConfig({
		uglify: {
			hedef1: {
				options: {
					beautify: true
				},
				files: {
					'js/dosya.min.js': ['js/dosya.js']
				}
			}
		}
	});

	grunt.loadNpmTasks('grunt-contrib-uglify');

	grunt.registerTask('default', ['uglify:hedef1']);

};

Artık hazırız, komut satırında grunt yazıp çalıştırdığınızda js klasöründeki dosya.js adındaki dosya sıkıştırılacak(minify edilecek) ve dosya.min.js adında yeni bir dosya olarak kaydedilecektir.

Not: Daha farkı özelliklere ait bir çok uglify oluşturabilirsiniz. Bunun için yapmanız gereken hedef1 gibi farklı alt objeler oluşturmak ve ayarları vermek. Fakat aynı özelliklere ait olan farklı dosyalar elde etmek istiyorsanız sadece files kısmına yeni bir alt nesne ekleyin. İnternette ilgili örnekler mevcut durumda.

Eğer hedef1 gibi farklı bir obje eklerseniz registerTask’a da bunu belirtmeniz gerekiyor


Örnek 2: Uglify ve CSSMin

CSSMin ise adı üstünde CSS dosyalarınızı minify etmenize yardımcı olur. Productionda olabildiğince boyutu azaltmamız gerekiyor ne de olsa…

Yine öncelikle plugini indiriyoruz;

npm install grunt-contrib-cssmin --save-dev

Ardından görevimizi ekliyoruz:

cssmin: {
	hedef1: {
		files: {
			'cikti.min.css': ['foo.css', 'bar.css']
		}
	}
}

sırada yine loadNpmTask var…

grunt.loadNpmTasks('grunt-contrib-cssmin');

ve son olarak registerTask’a ekliyoruz.

grunt.registerTask('default', ['uglify:hedef1', 'cssmin:hedef1']);

Artık çalıştırmaya hazır. 2 adet css dosyası oluşturun (foo.css ve bar.css olarak) ve bırakın minify etsin.

Eğer herşeyi doğru yerine yerleştirdiyseniz aşağıdaki gibi bir dosyanız olmalı;

module.exports = function(grunt) {

	grunt.initConfig({
		uglify: {
			hedef1: {
				options: {
					beautify: true
				},
				files: {
					'js/dosya.min.js': ['js/dosya.js']
				}
			}
		},
		cssmin: {
			hedef1: {
				files: {
					'cikti.min.css': ['foo.css', 'bar.css']
				}
			}
		}
	});

	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-cssmin');

	grunt.registerTask('default', ['uglify:hedef1', 'cssmin:hedef1']);

};

Aynı şekilde CSSMin’in de ayarları ve birden çok instance oluşturma özelliği mevcut. Plugin sayfasından detaylara bakabilirsiniz veya yardım isterseniz yorum yazabilirsiniz.

Kolaylıklar dilerim ;)

Sonrası Grunt Nedir? Kurulumu ve Kullanımı Nasıldır? Ahmet Ertem ilk ortaya çıktı.

]]>
http://ahmetertem.com.tr/grunt-nedir-kurulumu-kullanimi-nasildir/feed/ 5
Composer Nasıl Kullanılır http://ahmetertem.com.tr/composer-nasil-kullanilir/ http://ahmetertem.com.tr/composer-nasil-kullanilir/#comments Thu, 08 Sep 2016 17:00:28 +0000 http://ahmetertem.com.tr/?p=771 Önceki yazımda Composer’ın ne olduğuna ve nasıl kurulduğuna değinmiştim, şimdi ise nasıl kullanılır onu anlatmak istiyorum. Yazıyı okumaya devam etmeden önce kurulum yapmanızı öneririm. Devam etmeden önce Windows’ta yaptığınızda direkt composer komutu ile çağırabilir olduğunuz için öyle yazıyorum duruma göre; [crayon-65f92c8830dc8195082263/] olarak da çağırabilirsiniz. Bunun için composer.phar dosyasını getcomposer.org adresinden indirip proje dizinine atmanız gerekiyor (direk ... [Devamini oku...]

Sonrası Composer Nasıl Kullanılır Ahmet Ertem ilk ortaya çıktı.

]]>
Önceki yazımda Composer’ın ne olduğuna ve nasıl kurulduğuna değinmiştim, şimdi ise nasıl kullanılır onu anlatmak istiyorum. Yazıyı okumaya devam etmeden önce kurulum yapmanızı öneririm.

Devam etmeden önce Windows’ta yaptığınızda direkt composer komutu ile çağırabilir olduğunuz için öyle yazıyorum duruma göre;

php composer.phar [komut]

olarak da çağırabilirsiniz. Bunun için composer.phar dosyasını getcomposer.org adresinden indirip proje dizinine atmanız gerekiyor (direk buradan da indirebilirsiniz).

Eğer Windows’taysanız ve komut satırına php yazınca hata alıyorsanız, PHP.exe’nin olduğu yeri PATH’ler arasina eklemeniz gerekiyor. Eğer hata alıyorsanız; Çalıştır‘a (Win + R)

control sysdm.cpl,,3

yazıp entera basın, Sistem Özellilkleri (System Properties) açılacak oradan Ortam Değişkenleri… (Environment Variables…) buttonuna basın ve açılan pencerede aşağıdaki ya da yukarıdaki kısımda bulunan Path’e çift tıklayarak açın. Ardından, eğer Windows 10’da iseniz yeni bir kayıt eklemeye, önceki sürümlerdeyseniz açılan metin kutusunun sonuna PHP.exe‘nin bulunduğu dizinin yolunu yapıştırın (öncesine noktalı virgül eklemeniz gerekebilir, oraya biraz incelerseniz rahatça anlarsınız zaten)

Eğer sizde direkt composer yazınca gelmiyorsa, benim direk composer olarak çağırdığımı siz, sizde çalıştığı şekliyle kullanarak ilerlersiniz.

Composer Nasıl Kullanılır

Başlangıç

Composer’u kullanmaya başlamak için tek ihtiyacınız, proje dizininizde composer.json adında bir JSON dosyası olması (bazı durumlarda otomatik oluşamadığı için kendiniz oluşturmanız daha sağlıklı). Bu JSON dosyasının içinde ihtiyaç duyulan paketler ve versiyon bilgisi, varsa private repository yolları gibi bilgiler tutuluyor.

Örneğin:

{
    "require": {
        "monolog/monolog": "1.0.*"
    }
}

composer.json dosyasının içine yapıştırın ve kaydedin. Ardından bu dizinde bir terminal (cmd – command promt) penceresi açın ve;

composer install

yazıp enterlayın. Composer otomatik olarak sizin için vendor klasörü oluşturacak, monolog‘u ve monolog için gerekli olan paketleri sizin için indirecek ve ardından gereksinim(ler)inizin için vendor dizinine autoload.php adında bir PHP dosyası oluşturacak. Her paketi (kütüphaneyi) tek tek include ya da require etmek yerine siz sadece autoload.php’yi require etseniz yeterli olacak.

require __DIR__ . '/vendor/autoload.php';

Monolog’un Logger örneğiyle devam edecek olursak;

Öncelikle composer.json dosyamızı yukarıdaki gibi doldurduk (require monolog yazan yer), ardından terminale (komut satırına) composer install yazdık ve gerekli paketlerin inmesini bekledik. İşlem başarıyla biterse vendor diye bir dizin ve içine ‘composer‘ ve ‘monolog‘ adında iki klasör, ‘autoload.php‘ diye bir PHP dosyası oluşmuş olması gerekiyor.

Not: Terminal veya komut satırında proje dizininde olmanız gerekiyor. Bunun için Windows’ta boş cd linux veya macintosh’ta pwd yazarak aktif olduğunuz yeri görebilir ve cd komutu ile proje dizininize gidebilirsiniz.

index.php’yi oluşturalım, ve içine aşağıdaki kodları yapıştırıp kaydedelim.

/index.php

<?php
require __DIR__ . '/vendor/autoload.php';

use Monolog\Logger;
use Monolog\Handler\StreamHandler;
use Monolog\Handler\FirePHPHandler;

// Logger'i olusturalim
$logger = new Logger('my_logger');
// Biraz handler ekleyelim
$logger->pushHandler(new StreamHandler(__DIR__.'/my_app.log', Logger::DEBUG));
$logger->pushHandler(new FirePHPHandler());

// artik Logger'i kullanabilirsiniz
$logger->addInfo('Loggerimiz kullanima hazir');

Sayfayı çalıştırdığınızda my_app.log adında bir dosya oluşacak ve içinde

[2016-09-07 10:46:03] my_logger.INFO: Loggerimiz kullanima hazir [] []

yazacak. Okuyup yaparken yavaş bir işlemmiş gibi geliyor fakat kullanacağınız paketleri bilip composer.json dosyanızı hızlıca hazırlarsanız zamanla çok kullanışlı olduğunu göreceksiniz.

Bu sadece kurulum aşamasıydı elbette. Kullandığımız paketlere güncelleme geldiğinde otomatik güncellemek için yapmamız gereken sadece

composer update

yazmak. Composer sizin için paketleri otomatik olarak güncelleyecektir. Benim gibi kendi repositorylerinizden çekecekseniz ve bir çok projede güncelleme yapacaksanız dosyaları tek tek güncellemenize gerek kalmaksızın composer’dan yardım alabilirsiniz.


Sürüm Seçimi

Yukarıda yaptığımız monolog kurulumunda sadece 1.0.* yani 1.0.[en üst versiyon] çağırdık. Development versiyonunu kurmak için dev-master, spesifik bir versiyonu çağırmak için direk versiyonu ya da en üst kararlı versiyonu çağırmak için asteriks * yazabilirsiniz.

Spesifik versiyonu kullanma;

{
    "require": {
        "monolog/monolog": "1.0.3"
    }
}

 

Development versiyonunu kullanma;

{
    "require": {
        "monolog/monolog": "dev-master"
    }
}

 

Son kararli sürümü kullanma;

{
    "require": {
        "monolog/monolog": "*"
    }
}


JSON Dosyası Oluşturmadan Başlangıç

Windows, Macintosh, Linux ayırt etmeksizin bazı durumlarda hata oluşmakta, bu hata genelde güvenlik/izin ile ilgili hatalardır. Eğer izinsel bir problem bulunmamakta ise komut satırını kullanarak direk başlangıç yapabilirsiniz. Şahsen daha çok komut satırı kullanan birisi olduğum için tavsiye edeceğim yöntem de bu…

composer help yazarak tüm composer komutlarını görebilirsiniz, ben sadece en ihtiyaç duyacaklarınızı göstereceğim.

require

composer require [argüman] yayinci/paket [versiyon]

Argüman belirtimi zorunlu değildir. Alabileceği argümanların hepsini değil, sadece çok kullandıklarım olan --dev ve --no-devi açıklayacağım diğerlerine buradan bakabilirsiniz;

–dev: Paketi require-deve ekler.

–no-dev: Güncellerken require-devdeki paketleri es geçer.

yayıncı/paket kısmında ise öncelikle (bildiğim kadarıyla) varsa VCS’lerinize, daha sonra packagist.org‘daki paketlere bakarak arama yapar.

versiyon argümanı da zorunlu değildir. Belirtmezseniz son stabil versiyonu hedef alır.

Bir kaç örnek yapalım;

composer require ahmetertem/query_builder
composer require monolog/monolog dev-master
composer require --dev ahmetertem/query_builder


install

install komutu require’dan farklıdır. Install sadece hazır composer.json dosyasındaki belirtilmiş paketleri kurmanıza yarar ve güncelleme işlevi yoktur. Yani eğer kurulum yaptıysanız kurulum yaptıklarınızı yeniden işlemeye çalışmaz (eğer farklı versiyon hedef göstermediyseniz tabîi), sadece kurulu olmayanları kurar.

require’da olduğu gibi parametrelere sahiptir. İncelemek için buraya bakabilirsiniz.


update

Adı üstünde güncelleme için kullanılır, eğer install yapmadıysanız install işlemi de yapar. Yine install ve require’da olduğu gibi parametrelere sahiptir, onun için ise buraya bakabilirsiniz.


Özel repositoryler için composer konusuna bir sonraki yazımda değineceğim. Buraya kadar olan kısımla ya da composer ile ilgili başka bir sorunuz varsa yorum atabilirsiniz ;)

Kolay gelsin

Sonrası Composer Nasıl Kullanılır Ahmet Ertem ilk ortaya çıktı.

]]>
http://ahmetertem.com.tr/composer-nasil-kullanilir/feed/ 2
Atom Favori Paketlerim http://ahmetertem.com.tr/atom-favori-paketlerim/ http://ahmetertem.com.tr/atom-favori-paketlerim/#comments Thu, 02 Jun 2016 05:55:12 +0000 http://ahmetertem.com.tr/?p=726 Atom editörden ve ne kadar etkilendiğimden bahsetmiştim. Bu yazıda ise kullandığım paketleri paylaşıyorum, belki işinize yarar paketler bulabilirsiniz. remote-ftp Tartışmasız en çok ihtiyaç olan paketlerden birisi Remote-FTP. Adı üstünde FTP paketi ve kesinlikle ihtiyaç duyacağınızı düşünüyorum. FTP/FTPS/SFTP bağlantıları yapabiliyorsunuz. .ftpconfig adında bir JSON dosyası oluşturmak gerekiyor. “Packages > Remote-FTP > Create FTP config file” adımlarını izleyerek varsayılan ... [Devamini oku...]

Sonrası Atom Favori Paketlerim Ahmet Ertem ilk ortaya çıktı.

]]>
Atom editörden ve ne kadar etkilendiğimden bahsetmiştim. Bu yazıda ise kullandığım paketleri paylaşıyorum, belki işinize yarar paketler bulabilirsiniz.

remote-ftp

Tartışmasız en çok ihtiyaç olan paketlerden birisi Remote-FTP. Adı üstünde FTP paketi ve kesinlikle ihtiyaç duyacağınızı düşünüyorum. FTP/FTPS/SFTP bağlantıları yapabiliyorsunuz.

.ftpconfig adında bir JSON dosyası oluşturmak gerekiyor. “Packages > Remote-FTP > Create FTP config file” adımlarını izleyerek varsayılan JSON formatıyla .ftpconfig dosyasını oluşturabilir ve düzenleyerek bağlantı kurabilirsiniz.

Bunun yanı sıra yerel dosyalara sağ tıklayarak Upload’a basarak dosyanızı da yükleyebilirsiniz, aynı şekilde yukarıdan aşağıya da indirebilirsiniz.

Bu konuda tek dezavantajı dosyaları tek tek indiriyor, thread olarak 10 tane civarında indirebilir olsa yüklü dosya indirim işlemlerinde Filezilla’ya hiç ihtiyaç olmazdı…

Link

sublime-style-column-selection

Sublime editördeki gibi sütun seçimini aktif hale getirir. Seçim yapmadan ALT tuşuna basarak seçim yapabilirsiniz.

Link

atom-beautify

HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL ve daha bir çok dil için kod formatlama ya da bilinen diğer adıyla beautify işlemini gerçekleştirmeye yarıyor. Girinti (Indentation) ruh hastası kıvamında takıntılı olduğum için benim en yüksek ve düşük not verdiğim paket bu şuanda…

Düşük not vermemin nedeni ise ayarlamalarını yapmak cidden zahmetli ve çok kararlı değil. Eşref saatine gelirseniz düzgün çalışıyor tabîi — ya da benim çözemediğim birşey var õ.õ

Link

composer

Fazla söze gerek yok, atom için composer paketisişeysi.

Link

emmet

Atom için emmet desteği sunan bir paket. Olmazsa olmazlar arasında yine…

Link

file-icons

Dosyalar için simge paketi. Algıyı arttırmak için gayet yararlı olduğunu düşünüyorum.

Link

pigments

Pigments dosyalardaki renk kodlarını tarar ve renkleri renkli bir şekilde gösterir. Front-endciler için ideal bir paket.

Link

minimap

Sublime Text editördeki gibi kaynağın tam halinin küçük navigasyon halini gösteren bir paket.

Link

minimap-pigments

Minimap’te Pigments desteği sağlayan pakettir. Çok mühim olmasa da yine de bulundurabilirsiniz

Link

project-manager

 

Adı üstünde proje yöneticisi. Birden çok proje ile çalışıyorsanız – ki çalışıyorsunuzdur – ihtiyacınız olacaktır. Kullanımına alışmak biraz zaman alsa da kısaca açıklamak gerekirse öncelikle projeyi “Packages > Project Manager > Save Project” diyerek kaydedip daha sonra ALT + SHIFT + P tuş kombinasyonu veya “Packages > Project Manager > List Projects” diyerek projelerinizi listeleyip, listeden projenizi seçebilirsiniz.

Link

sync-settings

sync-settings ile tüm ayarlarınızı Github’a yedekleyip diğer bilgisayarlarınızda da aynı ayarlara sahip olabilirsiniz. Kurulumu az zahmetli olan bu güzel paket benim gibi bir çok bilgisayar – işletim sistemi kullanan kişilere kesinlikle gerekiyor.

Link

todo-show

frequency_cap_es6_-__Users_Ben_Code_Windsor_wcui_dev_src_wcui_-_Atom-1

Link

 

 

Sonrası Atom Favori Paketlerim Ahmet Ertem ilk ortaya çıktı.

]]>
http://ahmetertem.com.tr/atom-favori-paketlerim/feed/ 4