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.

 

Full Height Header

Merhabalar, dün gece bir müşterim için arayüz geliştirirken tasarımda full height header bir durum vardı. (bunun tasarımda veya front end deki adını bilmediğim için böyle bir isimlendirme yapıyorum) Header daki butona tıklayıncada aşağı tarafa scroll ettirmesi gerekiyordu. Bende tasarımı kodladıktan sonra başka işlerde de kullanırım diye Codepen’e attım. Onuda sizlerle paylaşıyorum.

See the Pen Header Full by Baran Somaklı (@baransomakli) on CodePen.

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.

Html5 CSS3 ve JS ile Web Tasarımı Kitabı İncelemesi #1

Merhaba arkadaşlar,

Bana çok fazla Html , css, javascript için hangi kitabı almalıyız tarzında sorular geliyor. Bende bundan sonra sizlere bu videoda olduğu gibi kitap önerileri için iyisiyle kötüsüyle kitapları tanıtacağım.

Bu videomuzda Burak Tokak’ın Html5 CSS3 ve JS ile web tasarımı kitabını sizlere anlatmaya çalışacağım.

Web Tasarıma, Web Geliştirmeye yeni başlayacaksanız zaten öğrenmeniz gereken ilk üç dil bu kitapta temel şekilde anlatılıyor. Hatta şunu söylemeden edemeyeceğim kitabın CSS kısmı çok güçlü bir şekilde yazılmış. İnternette video içeriklerle (Türkçe) bulamayacağınız bir çok şey bulunuyor.

Devamını videoda izleyebilirsiniz 🙂

Kitabın içine göz atmak isterseniz: http://bit.ly/1NXG4TZ

Satın Almak İçin: http://www.dikeyeksen.com/products/ht…

Videoda bahsettiğim Renkli Kutular Oyunu: https://github.com/BurakTokak/cursedb…

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.

2015’i De Geride Bıraktık

2015 yılınıda geride bırakıyoruz. Geçen sene 2014’ü De Geride Bıraktık yazımla başlattığım serime bu senede devam ediyorum. Çok sevdiğim kişisel yazı konularından bir tanesi bu yılda neler yaptığım. Çünkü herhangi bir arkadaşınıza gidip bak ben bu sene bunları bunları yaptım diye anlatamıyorsunuz fakat buraya yazabiliyorsunuz ve illaki birileri okuyor ve yorum bırakıyor. En önemlisi gözünün önünde not bulunuyor. Hedeflerini gerçekleştirebilmiş misin? Bu sene neler yapmışsın seneye neler yapacaksın bir nevi plan gibi bir şey oluyor. Bu yazımı yazmadan önce geçen sene yazdığım yazıyı tekrardan okudum ve bu senenin daha yararlı geçtiğinin kanaatine vardım.

Bu sene çok güzel dostluklar edindim, çok güzel şeyler öğrendim kendime kişisel olarak çok fazla şey kattım. Hayatımı paylaştığım kız arkadaşım ile 2. yılımızı doldurduk.

İlk olarak Yazılım Kulübü kurucusu Tugay Tuna ve yardımcısı olan Kadircan Kırkoyun(Şuanda en iyi arkadaşlarımdan biri, bu sene beraber çok güzel projeler yapacağız) ile tanıştım. Yazılım Kulübünü kendi okulumda da kurarak okulumdaki liseli arkadaşlarıma Web Programlama eğitimi verdim. Yazılım Kulübü sektördeki genç arkadaşlarımla tanışmam ve eğitim verme konusunda kendimi geliştirmem için süper bir fırsat oldu.

WordPress ve Arayüz Geliştirme konusunda kendimi daha çok kurumsal işlere yönelttim freelancer olarak işler aldım. Kazandığım paralar ile odama (kendi tabirim ile home office) bir çok eşya ve ekipman aldım. Bu eşya ve ekipmanların başında PS3,  Ps3 oyunları, Condenser Mikrofon (C1-U), Pop Filter, Mikrofon kolu var.  Aldıklarımı burada yazmamın tek amacı çoğunu YouTube kanalım için almış olmam. Ne ekipmanların var sorusuna da bu şekilde cevap vermek 🙂

YouTube demişken hemen onuda sizlere anlatayım kişisel kanalım olan Baran Somaklı‘da Web Programlama eğitimleri çekmeye başladım. 31.12.2015 itibari ile 1000 aboneye ulaşmış bulunmaktayım. 66 video yayınladım, 50.532 görüntülenmem var. Benim için çok güzel bir proje oldu.

“2014’ü De Geride Bıraktık” yazımda L masa almak istediğimi söylemiştim. Ve sonunda istediğim L Masayı okul başlamadan önce satın aldım.

20151231_190105

20151231_190116

Uzun zamandır çift monitör ile çalıştığım için L Masaya geçiş yapmak istiyordum gerçekten çalışmamda büyük etkisi oldu. Hiç bir şeyim sıkışık bir biçimde değil en azından kolumu koyacak yerim var hehe. Yeni masaya geçtim tabii ki illa bir aksilik çıkacaktı klavyem kafayı yedi. Yeni bir klavye aldım küçük ve güzel bir klavye almak istiyordum. Logitech K360 tam bana göreydi bu klavyeyi alırken birde yanında Logitech G300s mouse aldım. Şuan ikisinden de çok memnunum. Mouse zaten oyun mouse’u olduğu için kod yazarken çift ekran çalışırken çok hızlı bir biçimde bana yardımcı oluyor. Üzerindeki 3 farklı renge göre sensivitysi de ayarlanabildiği için oyun oynarken, kod yazarken farklı renklere geçerek farklı ayarlarda mouse’u kullanabiliyorsunuz.

20151231_190414

Ve tabiiki bu senede kitaplığıma yeni kitaplar kattım. Ailem ne kadar laf etsede çoğu kişisel gelişim ve programlama ile ilgili.

20151231_185952

Apache Cordova ile mobil uygulama geliştirmeye başladım. Cordova tam olarak Front-End ile yazıldığı için çok hoşuma gitti ve uygulama geliştirmeye başladım. 2016 da büyük ihtimal aklımda olan 2-3 uygulamayı hatasız bir şekilde yaparsam markette görebileceksiniz. Kadircan da Mobile Developer olduğu için beraber paslaşarak güzel bir uygulama yapmayı planlıyoruz. Şuanlık uygulamanın konusu gizli olsun ne olsa yakında buradan duyururum 🙂

Bu sene hem YGS, LYS’e hazırlanırken bir yandanda kendimi Front-End konusunda geliştirmeye devam edeceğim. 2016 herkes için hayallerinin, hedeflerinin peşinden gidebileceği bir yıl olsun. İyi yıllar 🙂

Blogumun 3. Yaş Günü

Daha dün gibi geliyor fakat 3 yıl olmuş bile blogumu açalı. Zaman hıp hızlı geçiyor. 3 yılda hayatımda ve blogumda o kadar çok şey değiştiki. 3 yıl önce kimin temasını kullansam diye düşürken şuan tasarımını kodlamasını her şeyini kendim yaptığım temayı kullanıyorum blogumda. Doğruyu söylemek gerekirse blogumda 3 senede hedeflediğim gibi pek bir başarıya ulaşamadım. Fakat yazmayı çok sevdiğim için öğrendiklerimi öğretmek istediklerimi blogumda yazıyorum ve yazmaya devam edeceğim. Şu sıralar pek yazı yazamamın sebebi 12. sınıf olup üniversite sınavına hazırlanmam. Tabii sınav bittikten sonra YouTube kanalım olsun blogumda olsun fazlasıyla aktif olacağım.

3 senede neler yaptım neler öğrendim kısaca sizlere ondan bahsetmek istiyorum.

Blogumu açtığım ilk zamanlar masaüstü programlama ile ilgileniyordum ve sadece C#, Java, Visual Basic gibi dillerin makalelerini yazıyordum. (Blogumun yedeklerini kaybetmem ile çoğu yazım gitti ama olsun bazıları duruyor hala okuyabilirsiniz) O zamanlar liseyede başladığım zamanlardı dersler ile programlamayı götüremeyeceğim, spor ile de ilgilenmek istediğim çok dönem oldu özellikle fitness ve basketbolla çok ilgilendiğim dönemler oldu. Neredeyse 1 sene boyunca yazılımdan uzak kaldım. 11. sınıfa başlarken yeni bir hedef ile tekrardan bu işlere sarılmaya başladım. Bu sefer hedefim ‘web‘di. Hedefimi dahada açarsak kendi temalarımı yapıp satışa sunmaktı ve ücretsiz temalar paylaşmaktı diyebiliriz. Hedefimi koyduktan sonra öğrenmem gerekenlerin listesini yapıp işe koyuldum. Listemde html, css, wordpress entegre vardı. Şuanda 12. sınıfın ortalarındayım ve html css wordpress konularında orta seviyeden yukarı çıktım diyebilirim. (Çoğu kişi uzman, pro vs gibi şeyler diyebilirdi fakat ben hala öğrenilecek çok şey olduğunu düşündüğüm için alçak gönüllü olmak istiyorum) Şuanda freelancer olarak müşterilerime Arayüz Geliştirme ve WordPress Tema Geliştirme konusunda destek veriyorum.

Son 1 sene boyunca en çok hedeflediğim bir şey vardı. O da ücretli WordPress tema geliştirip satmaktı. Yani ürün olarak bir tema çıkartmaktı. Fakat ne zaman başlasam ya WordPress kısmında ya arayüz kısmında yarıda bıraktım bir türlü nasip olmadı ama 2016 da inşallah bu hedefimi gerçekleştireceğim.

Bugün blogumun 3. yılı şerefine uzun zamandır planladığım bir şeyi yaptım. Normalde çok kararsız kalmıştım daha okul başlamadan blogumun temasını baştan yazmıştım gerçekten çok beğendiğim bir tema oldu ve mobil olayını da bu sayede tamamen çözmüş olmuştum. Yeni tema yazmalı mıyım 3. yıl için yapmamalı mıyım diye çok düşündüm sonradan bu temayla 1 sene daha gidebileceğimi planlayıp portfolyomu değiştirmeye karar verdim.

Okuldan gelince başlayıp 2-3 saat içinde portfolyo tasarımı kodladım. Aşağıdaki resim portfolyo tasarımım. Resime tıklayıp büyük şekilde inceleyebilirsiniz. Sizlerede danışmak istediğim bir husus var. Bu tasarımı baransomakli.com/portfolyom da mı kullanayım yoksa baransomakli.com.tr alan adında mı kullanayım? Bu soruma nedeniyle cevap verirseniz çok mutlu olurum.

Freelancer Front End Developer Portfolyo

Blogumun ve benim 3 yılım bu şekilde geçti dostlarım. Bu 3 yıl boyunca beni yalnız bırakmadığınız desteklediğiniz için çok teşekkür ederim. Umarım hep beraber oluruz. Öğrenmek, öğretmek ve kendimizi geliştirmek için uğraşırız. Tekrardan teşekkür ederek yazımı burada sonlandırmak istiyorum. Kendinize iyi bakın. Görüşmek üzere.