Front-End için Anahtar Kelimeler
Selamlar herkese 🖐
Bu yazıyı Front-End (Arayüz geliştirme) alanına girmek isteyenler veya çok yeni olanlar için bir ufak bir yol haritası (bilgim yettiğince) olması amacıyla ele alıyorum :)
İnternet Nasıl Çalışır ?
Tarayıcıda adres çubuğuna bir adres girdiğimizde oluyor , enter dedikten sonra ekranımıza gelen arayüz nasıl yükleniyor bunları öğrenmekte fayda var. Client (İstemci), Server(Sunucu), IP Adresi, DNS, Domain gibi kavramlara bir göz atmanız iyi olacaktır.
Tarayıcılar Nasıl Çalışır ?
Tarayıcılar HTML(Hypertext Markup Language), CSS(Cascading Style Sheets), JavaScript ile çalışır. Peki bunlar nedir? Şu şekilde örneklendirebiliriz. Siteyi bir insan vücudu olarak düşünürsek,
- HTML: vücudun iskelet
- CSS: Baş, gövde gibi kısımların yerleşimi, ten rengi gibi iskeletin görünüm özellikleri, belki makyajı
- JavaScript: elimizle bir şeyleri tutmamız, yürümemiz, konuşmamız. Yani Vücudun fonksiyonalitesi
olarak ifade edebiliriz.
Dolasıyla, tarayıcı üzerinde HTML, CSS ve JavaScript’in yorumlanması, tarayıcıdan bir adres girildiğinde oluşan akış gibi konularda bilgi edinmeye çalışın.
HTML - CSS Pratikleri :
Tasarımını sevdiğiniz siteleri, HTML-CSS’e dökerek bol pratikler yapın. Kendi sınırlarınız zorlamaya çalışın.
HTML’in (Pug, Jade… vb.), CSS’in (LESS, SASS, SCSS… vb.) türevlerini öğrenmeye çalışın.
JavaScript Pratikleri:
JavaScript, HTML’i reactive şekilde kullanmamız sağlayan, tarayıcı üzerinde hesaplar, veri alışverişi yapabilmemizi sağlayan bir dildir. Yine küçük parçalar haline yapılacak pratiklerle ilerlenmesi gerektiğini düşündüğüm noktadır. Çünkü öğrenmeye başladıktan sonra karşınıza bir çok konu çıkacaktır.
- es5/es6…
- node, npm, nvm, yarn,
- webpack, gulp, grunt gibi derleyici araçları
. . . .
Bunların hepsini bir anda öğrenmek yerine öncelikle JavaScript’in kendi yapısının nasıl bir olduğunu, hangi durumlarda nasıl sonuçlar elde edeceğinizi görmek için kendinize küçük problemler oluşturup, bunları çözerek ilermek daha sağlıklı olacaktır.
Framework Sorunsalı?
Javascript öğrenmeye başladınız. Bir önceki maddede söylediğimin gibi, karşınıza bir dolu kavram çıktı. Üstüne bir de React, Angular, Vue, Svelte gibi bir çok kütüphane / framework adı duydunuz. E hangisini öğrenicem? Hemen başlayım! Öncelikle yapmanız gereken şey (bence) JavaScript’in kendisine hakim olmaya çalışmak olmalı. Çünkü bu isimleri geçen kütüphane/frameworklerin hepsi JavaScript ile çalışıyor sonuç olarak. Her birinin kendi standartları olması yanında JavaScript bilginiz olduğunda gün sonunda her birine hızlı adapte olunabilir. Diğer seçenekte, örneği Vue öğrenmeye karar verdiniz ve JavaScript’in kendi kurallarını bilmiyorsanız her ikisini birden öğrenmeye çalışmak bence daha sancılı bir süreç olacaktır.
Tarayıcı Konsolu Eliniz Ayağınız Olacak
Tarayıcı üzerindeki devTools dediğimiz console, netwok, application gibi yerlerde neler yapabileceğinizi öğrenin, buraları bolca kurcalayıp, pratikler yapmaya çalışın. Çünkü devTools eliniz ayağınız olacak :)
Terminaller Olmazsa Olmaz :)
Bazen yazdığımız kodlarını derlerken, bazen kullacağımız araçları yüklerken, yazdığımız kodun çıktılarını görebilmemiz için en çok ihtiyaç duyduğumuz ve sürekli açık olan bir yerdir bilgisayar terminalleri. Bundan dolayı, elinizden geldiğince yavaş yavaş terminal komutlarını öğrenin. Yavaş yavaş diyorum çünkü çok fazlalar :)
Git Nedir?
”Git” bir versiyon yönetim sistemidir. Şöyle düşünebilirsiniz. Bir “A klasörünüz var.” Bu klasör içinde dosyalarınız var. Değişiklik yaptınız ve “A.v1” olarak bir klasöre kaydettiniz. Daha sonra (A klasörü veya A.v1 klasörü üzerinden) tekrar değişiklik yapıp A.v2 olarak bir klasöre kaydettiniz. Bu 3 klasörü birer dal olarak düşünürseniz eğer, bu dallar arasında hangi tarihte nerelerde değişiklik yapılmış bunları kontrol edilebilmesine ve bir dosya üzerinde birden kişinin çalışabilmesine olanak sağlayan bir sistemdir. Gerek açık kaynak projede, gerekse ileride görev alacağınız ekipte mutlaka kullanacağınız bir araçtır.
Yazılıma Başlangıç
Front-End’de HTML, CSS’in yanında bir çok veri manipülasyonu ile de uğraşacaksınız. Hatta yeri gelecek JavaScript ile Back-End yazacaksınız :) Yani günümüz teknolojileri ile yazılıma başlangıç yapılıyor aslında. Bundan dolayı tarayıcı mühendisliğinin (😊) yanında algoritmik düşünce yapınızı geliştirmeye çalışın.
Bol Bol Açık Kaynak Projeler İnceleyin
GitHub / GitLab gibi platformlar üzerinden “Açık Kaynak” projeler inceleyin. Tecrübeli insanların neyi nasıl yaptığını görmek ufkunuz genişletecektir :)
Kodları yayına alma süreci:
Yazdığınız kodları nasıl yayına alabilirsiniz, bunun için hangi araçlar var bunları araştırın. (Jenkins, Circle CI, Travis CI … vb.)
Tüm bunlar ilk bakışta karmaşık ve zor gelebilir. Adım adım ilerlendiğinde, öğrenildiğinde daha sağlıklı olacağına inandığımız bir süreç bu. Umarım bu konuda istekli olan kişilere yardımcı olabilecek bir ön yol gösterme olmuştur.
Zaman ayırıp okuduğunuz için teşekkürler ederim :)
