Sublime Text 3 Yorum Satırı Kısayolunu Etkinleştirmek

Bir ipucu yazısı ile beraberiz 🙂 Uzun zaman atom kullandıktan sonra WebStorm’a oradan da tekrar Sublime Text 3’e geçiş yaptım. WebStorm’u bırakmadım hala fakat ne kadar kaliteli bir IDE olsada Windows’da baya bir performans düşüklüğü oluyor. Bende bu sebeple tekrardan Sublime Text’e geri dönüş yaptım. Baya da iyi oldu aslında özlemişim 😀

WebStorm kullanırken alışkanlık olan yorum satırı tuşunu (Ctrl+/ ve Ctrl+Shift+/) Sublime’da denediğimde maalesef çalışmadı. Üst bardan Edit > Comment kısmına gelirseniz Ctrl+/ tuşu ile yorum satırı kısayolu olduğunu görürsünüz fakat çalışmıyor. Bu sorunu düzeltmek için Preferences > Key Bindings – User kısmına girerek aşağıdaki kodu ” [ ] ” arasına yapıştırısanız Ctrl+/ kısayolu ile yorum satırı yapabileceksiniz.

{ "keys": ["control+keypad_divide"],"command": "toggle_comment", "args": {"block": false} },
{ "keys": ["shift+control+keypad_divide"],"command": "toggle_comment", "args": {"block": true}}

Numlock tarafındaki / kullanmak istemezseniz aşağıdaki kod ile Ctrl+7 ile yorum satırı yapabilirsiniz.

{ "keys": ["ctrl+7"], "command": "toggle_comment", "args": { "block": false } },
{ "keys": ["ctrl+shift+7"], "command": "toggle_comment", "args": { "block": true } }

Terminal ile GitHub’dan Dosya Çekmek ve Push Etmek

Terminal ile GitHub’dan dosya çekmeyi ve yeni dosyalar ekleyip onu push etmeyi göstereceğim.

İlk olarak, terminali açıyoruz ve dosyamızı çekeceğimiz klasöre girip clone kodundaki ‘link’ kısmındaki yeri reponuzun linkini yapıştırarak GitHub’daki bir repodan dosya çekebilirsiniz.

git clone 'link'

Çektiğiniz dosyanın içindeki yaptığınız değişiklikleri ya da yapacağınız işlemleri bitirdikten sonra aşağıdaki kodu yazarak tüm dosyalarımızı yüklüyoruz.

git add .

Dosyalarımızı yükledik artık bu dosyaları neden yüklediğimizi belirtmek için commit bırakacağız.

git commit -m "yeni dosyaları yükledim"

Commit işlemi de tamam. Dosyalarımız hazır artık yazdığımız kodların yeni halini repoya gönderebiliriz yani push edebiliriz.

git push -u origin master

Terminal ile GitHub’dan dosya çekip push etme işlemi bu kadar. Sitemde ufak bir kaynak dursun diye yazayım dedim bende.

Yeni Editöre Geçiş: Atom.io

Bir Sublime’cı olarak tası tarağı toplayıp Atom’a geçiş yaptım. Bir geliştiricinin en önemli ekipmanı bence editörü ya da IDE’sidir. Fakat ben bu konuda ne yazık ki bir türlü tam karar verip hadi bunla devam edeyim diyemedim. Hep diyomuş gibi oldum 🙂 Mesela şuana kadar en uzun kullandığım editör Sublime Text 2’idi. Şahane bir editör. Atom’a geçmeden önce birde WebStorm’u denedim. Gayet kalileti bir IDE eklentileri vs her şeyiyle tam fakat beni Web Storm da tutamayan sebep Windows da performansı pek iyi olmaması. Ram’i su gibi emiyor ve hızlıca kod yazamıyorsunuz. Neredeyse alışıyorum derken gelen güncellemeler ile bu kasma oranı artınca dedim değiştirme zamanı geldi ve GitHub’a merak sarmam ile GitHub’ın geliştirmiş olduğu açık kaynak olan Atom.io’ya geçiş yaptım.

Geçiş yapmamın sebeplerinden başlıca anlattım fakat bu geçiş sebebinde Atom’un özelliklerinin büyük bir payı var. Fatih abinin Atom ile ilgili yazmış olduğu çok güzel bir yazı var. Atom: En Özelleştirilebilir Kod Editörü Onu okumanızı tavsiye ediyorum ben bu yazıda şunu şöyle yapın vs demeyeceğim çünkü bunu YouTube da videolar ile yapmayı planlıyorum. Yazımda neden geçiş yaptığımı ve kullandığım eklentilerden bahsedeceğim. (Çok fazla lafı uzattım artık konuya giriyorum)

Atom’a Geçme Sebeplerim

  • Tema Yelpazesi

Sublime da bu olaydan çok sıkılmıştım. itg.flat adında bir tema kullanıyordum fakat Sublime Text de tema düzenlemek vs o kadar rahat değil. Atom da tema dosyaları less ile yazılmış durumda css bilginiz ile istediğiniz her yeri değiştirip ayarlayabiliyorsunuz. Şuan kullandığım temayı özelleştirmeye başladım bittiğinde GitHub’a atacağım zaten.

  • Hızı

Çok hızlı açılması, kullanırken tablar arasında olsun veya başka uygulamaya geçiş yaparken vs hiç bir türlü kasma bilgisayarınızı zorlama olmuyor.

  • Paketleri

Paket yüklemek kadar paket geliştirmekte kolay bu sebepten ötürü çok fazla paket mevcut. Sizi hızlandıracak eklentiler var. Yazının ilerleyen kısımlarında bunları belirteceğim.

Kullandığım Eklentiler

File-Icons’u ayrıca bahsetmek istedim. Atomda üst kısımda dosya isimlerinin başına geliştirdiğiniz teknolojinin iconunu getiriyor.

file-icons

Çoğu programlama dilinin iconu bulunmakta. Temalar ile de gayet uyumlu olduğu için hiç sırıtmıyor temada.

Screenshot_1

Editörü kurduğunuz ve bir dosya açtığınız zaman resimdeki gibi bir çizgi göreceksiniz bu çizgi beni baya rahatsız ediyordu bugün Front-End TR grubuna sordum ve Hana abla sağolsun yorum attı ve Wrap Guide  paketini kaldırmamı söyledi bu şekilde sorunu çözmüş oldum.

Kısaca geçme sebebimi ve kullandığım eklentilerden bahsetmek istedim. Bu listeyi güncel tutmaya çalışacağım Atom’un öğrendiğim özellikleri ile oradaki listeyi daha da arttıracağım. Şimdilik bu kadar okuduğunuz için teşekkür ederim görüşmek üzere.

 

Terminalden GitHub’a Dosya Yükleme

Selamlar, ne zamandır yazmıyordum. YGS’de geldi geçti bende artık geceleri daha sık çalışmaya başladım. GitHub da bu sıralar daha fazla aktif olmaya çalışıyorum bundan sonrada açık kaynağa daha fazla destek vermek için daha fazlada aktif olacağım gibi. Hem kendime kaynak olması amacıyla hemde öğrendiklerimi paylaşma amacıyla Git Terminalde kullandığım kodları kısa kısa anlatarak makale olarak yayınlayacağım umarım faydalı olur.

Terminalden GitHub’a Dosya Yükleme

İlk olarak github.com’dan hesabınıza giriş yaparak New Repositry diyorsunuz ve yeni bir repo oluşturuyorsunuz.

Bilgisayarımızda repomuza yükleyeceğimiz klasörü oluşturuyoruz. İçindeki dosyaları vs ayarlıyoruz. Ondan sonra git bash’a girip ya da cmder’e girip (ben cmder kullanıyorum daha güzel bir görüntü sağladığı için) oluşturduğumuz klasöre giriyoruz


cd baransample

git init

bu kodlarla baransample klasörünün içine giriş yapıp giti aktif hale getirdik

git add .

‘.’ ile baransample klasörünün içindeki tüm dosyaları ekliyoruz. baransample klasöründen tek bir dosya ekleyeceksen onun adını yazabilirsiniz.

git commit -m "yeni dosyaları yükledim" 

git commit ile depoya yollamaya hazır hale getirdikten sonra -m “yeni dosyaları yükledim” diyerek repoya commit atıyoruz.

 git remote add origin 'link' 

github.com’dan repo oluştururken üst kısımda size reponun linkini verecektir ‘link’ kısmına o linki yazınız.

 git push -u origin master 

diyerekte projemizi GitHub’a taşıyoruz.

Terminalden GitHub’a Dosya Yükleme işlemi bu kadar arkadaşlar. Bu şekilde öğrendiğim şeyleri size kısa kısa paylaşacağım.  GitHub’dan beni takip edebilirsiniz: https://github.com/baransomakli

Kolay gelsin.

JavaScript Öğreniyorum : JS Değişkenler #2

Bir önceki derste JavaScript Syntax’ını incelemiştik önemli detayları maddelemiştik. O yazıya buradan ulaşabilirsiniz.

Bu derste ise değişkenlere değineceğiz. Değişkenler, programlama yaparken değerler atanabilen, istediğimiz zaman çağırıp değerini kullanabildiğimiz değerlerdir.

JavaScript Değişkenler

JavaScript’te değişkenler var ön adıyla tanımlanırlar.

var baran;= 14;

Burada baran değişkenine 14 sayı değerini atamış olduk.

var b1 = 15, b2 = "baransomakli", b3 = "javascript" 

Bu şekilde de bir kullanım yapabilirsiniz. En başta var’ı kullandığımız için diğer değişkenlerde var yazmak yerine virgül ile değişkenlere değer atamaya devam ettik. İsterseniz tabi ;

var b1 = 15;
var b2 = "baransomakli";
var b3 = "javascript"

bu şekilde alt altada değişkenleri yazabilirsiniz. Yazım stili size kalmış bir şey.

Not: Değişkenlere atayamayacağımız bazı isimler var. Bunlar; function, if, else, for, new, try, break, case, catch vb gibi isimlerdir.

JavaScript Öğreniyorum : JS Syntax #1

Merhaba dostlarım, JavaScript’ öğrenmeye önceden başlamıştım fakat bir türlü devam ettiremedim. CodeFiti ekibi olarak (ekibi de yakında bir yazıda sizlere tanıtırım) Apache Cordova platformunda mobil uygulamalar geliştirdiğimiz için JavaScript bana baya lazım oluyor. Hem programlama dilleri arasında en eğlenceli dillerden biri olmasının yanında en gerekli dillerden biri.

Programlamaya ilk başladığım zamanlarda her gördüğüm geliştiriciye, tanıştığım geliştiricilere bir programlama dilini nasıl öğrenirsiniz gibi sorular sormuştum. Aslında bu sorunun cevabı kişiden kişiye değişiyor. Olay aslında kendine bir şeyleri öğretmeyi bilmen ile alakalı. Neyse felsefeye girmeden olayımıza geçelim. Bu yazı dizisi aslında bir eğitim serisi amacıyla yazmıyorum doğrusu. Ben çoğu konuyu araştırırken kendim için notlar alırım. Bu sefer ise daha ayrıntılı notlar alıp kendime ve bu yazı dizisinden yararlanacaklara bir dökümantasyon bırakmak istiyorum.  JavaScript’in sytax’ından başlayarak en başından öğrenme başlıklarıma göre sizlerede kaynak göstererek yazılarıma devam edeceğim.

JavaScript Syntax:

Syntax programlama dillerinin yazım kurallarıdır. CSS’den örnek vermek gerekirse bir alt satıra geçmek için her satırı “;” ile kapatmanız gerekir. Bu bir yazım kuralı yani syntaxdır.

JavaScript’in Syntax’ında önemli olan şeyler şunlardır.

  • JavaScript küçük harflere duyarlıdır.  ( var Baran ile var baran aynı şey değildir yani. )
  • CSS’deki gibi bir alt satıra geçmek için her satırı “;” ile kapatmanız gerekir.
  • Kod yazarken istediğiniz kadar boşluk bırakabilirsiniz.
 <script type="text/javascript">

var x = 5;

var y = 6;

var z = x + y;

alert(z);

</script>

  • JavaScript yazarken yorum satırları kullanabilirsiniz.

/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/

  • Değişken isimleri sayı ile başlayamaz.
  • JavaScript kodları html dosyasının head kısmınada body etiketlerinin arasınada yazılabilir. (sayfanın hızlı yüklenmesi için </body> etiketinin bir üst satırına js kodlarınızı ekleyebilirsiniz.)

Scroll To Top Js

Merhaba dostlarım, gece gece yine kod yazarken footera bir tane scroll top button eklemek istedim. jQuery ile bunu basitçe yapabiliriz arkadaşlar. Bende örnek uygulamayı yazıp Codepen’e de atayım dedim. Lazım olanlar oradan alıp kullanabilirler.

Bundan sonra JavaScript, jQuery çalışırken elimden geldiğince çoğunlukla kullandığımız uygulamaları kendim yazmaya çalışarak Codepen’e atacağım. Hem kendim içinde bunları bunları öğrenmişim diyebilirim. Size de tavsiye ederim.

İyi akşamlar 🙂

 

See the Pen Scroll To Top Js by Baran Somaklı (@baransomakli) on CodePen.

jQuery Font-Size Change

Bir haber sitesinde dolaşırken single sayfada içeriğin font-size’ını büyültüp küçülten iki tane buton gördüm. Portal siteleri için gayet güzel bir olay olmuş. Bunu nasıl yapabilirim diye düşünürken jQuery ile basitçe yapabileceğimi düşündüm. Yaptıktan sonrada örneği Codepen‘e attım.

Sunum olarak pek iyileştirmedim sadece çalışırlığını göstermek için iki adet a etiketi koydum onların birine basınca font-size 1 er 1 er artıyor. Diğer a etiketine basınca font-size 1 er 1 er düşüyor.

See the Pen Font-Size jQuery Change by Baran Somaklı (@baransomakli) on CodePen.

Emmet ile CSS Yazmak

YouTube kanalım için hazırlamış olduğum Html eğitiminde Sublime Text 2 editöründeki Emmet eklentisini göstermiştim. Sublime Text 2′ e iyice alıştıktan sonra CSS Emmet özelliğini de çokça kullanmaya başladım. Sublime Text 2’nin emmet eklentisi sayesinde hızlıca Html yazmanın yanında CSS kısayolları ile hızlıca CSS de yazabiliyorsunuz. Bu da geliştiriciler için çok büyük bir kolaylık anlamına geliyor.

CSS dosyanızda “h” yazıp “tab” tuşuna bastığınız zaman size otomatikman height: olarak css kodunuzu getiriyor. Hemen yüksekliğin değerini de vereyim derseniz “h30” yazmanız yeterli TAB’a bastığınız zaman direk “height: 30px;” olarak size kodunuzu getiriyor.

Çoğunluk ile CSS özelliklerinin baş harfleri ile tamamını yazdırmasını sağlıyor kısaca örnek vermek gerekirse:

h + TAB = height:

w+ TAB = width:

m + TAB = margin:

p + TAB = padding:

p30px10px15px45px + TAB =  padding: 30px 10px 15px 45px;

Bu şekilde kısaltmaları kullandığınız zaman Emmet eklentisi hızlıca CSS yazmanızı sağlıyor. Kullanmanızı öneririm.

YouTube kanalım için hazırlamış olduğum videoyu da izleyip daha fazla fikir sahibi olabilirsiniz.

Ubuntu Ve Grub Kaldırmak

Ben bi Windows kullanıcısıyım, 3-4 gün önce Windows’umun yanına Ubuntu kurdum. 3-4 gün kullandıktan sonra öncesine göre bilgisayarımı Ubuntu olsun ya da Windows 8.1 olsun iki platformdan birinde açarken eskisine göre performans da bir azalma vardı. Bu durumda benim hoşuma gitmedi ve Ubuntu’yu kaldırmaya karar verdim. Sizinde böyle sorunlarınız olduysa ya da Ubuntu’dan hoşlanmadıysanız kaldırmak istiyorsanız bu olay biraz zordur ama neyse. Bu tür sebeplerden dolayı Ubuntu’yu kaldırmak istiyorsanız. Hadi gelin beraber Ubuntu’yu kaldıralım.

Asla Windowsunuzun yanına Ubuntuyu kurarken yaptığınız gibi disk böldüğünüz bölümden diski silerek yapmayınız.  Direk diski silerseniz Grub’u da silmiş olursunuz Windows’a da ulaşamazsınız. İlk olarak bilgisayarınızı başlattığınız da Windows mu? Ubuntu mu? diye  işletim sisteminizi  seçmenizi sağlayan menüyü yani Grub alanını kaldırmamız gerek.  Evet artık Grub’u kaldırmaya başlayalım.

Bilgisayarımızı Windows ile açıyoruz.  MbrFix.exe yazılımını C:\ dizinine indiriyoruz. Fakat indirmeye çalıştığımızda Windows buna izin vermeyecektir. İlk masaüstünüze indirip sonra C:\ dizinine atabilirsiniz. Bende öyle yaptım. Daha sonra başlata gelip komut satırı aracını açmak için cmd yazıyoruz direk tıklayıp açmıyoruz cmd ye sağ tıklayıp yönetici olarak çalıştır deyip evete tıklıyoruz. Windows’un komut satırı aracına aşağıda vereceğim kodları sırayla yazınız

c:
cd \
mbrfix /drive 0 fixmbr</pre>

Son komutu yazdıktan sonra size Y ya da N’yi seçmenizi isteyen bir soru gelecektir. Bu soruya y diyerek enter tuşuna basıp devam ediyoruz. Bu işlemleride bitirdikten sonra Grub’u başarıyla kaldırmış oluyoruz. Şimdi sıra geldi bilgisayarımızdan tamamen Ubuntu’yu silmeye. Bilgisayarıma sağ tıklayıp “Yönet” deyip sol tarafta bulunan sekmelerden Depolama alanından Disk Yönetimi’ni seçiyoruz. Ubuntu’yu kurmak için oluşturduğumuz diskleri silerek Ubuntu’yu bilgisayarımızdan tamamen silmiş oluyoruz.