Front-End i├žin Anahtar Kelimeler

Front-End Development

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 :)

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 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.

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, 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.

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─▒ ├╝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 :)

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ÔÇŁ 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.

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.

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 :)

--

--

Sr. Front-End Developer And Mathematician ­čôę edisdev14@gmail.com https://github.com/edisdev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store