İyi Bir Front-End Olmak

Merhaba arkadaşlar, bu yazımızda web geliştiricilerin seçtiği meslek dalından biri olan front-end hakkında bilgi vermeye çalışacağım. Öncelikle ne iş yaptığı ile başlayalım.

Front-End Geliştirici Ne İş Yapar?

Kelime anlamı olarak ön geliştirici demektir. Bir web uygulamasının kullanıcının gördüğü kısmını yani arayüzü tasarlayan ve kodlayan kişiye denir. Front-End geliştiricinin bilmesi gereken başlıca diller HTML, CSS ve JAVASCRIPT dilleridir. Temel tasarım yapısını ortaya koymak için HTML ve CSS iş görüyor ancak dinamik bir tasarım için JAVASCRIPT şart. Bu dillerin detaylarını da ayrı başlıklara ayıracağım. Burada dilin tanımı yerine ince detaylarına değineceğim. Şimdi bu dilleri kısaca inceleyelim.

HTML
Sitenin temel iskeletini oluşturmak için kullandığımız HTML, kendi başına işlevleri yerine getirse de görsel olarak bir anlam ifade ettiği söylenemez. Bu nedenle CSS ve JAVASCRIPT’e ihtiyaç duyar. İyi bir front-end geliştirici HTML5‘e hakim olmalıdır. HTML5 sayesinde sitemizi belirli kategoriler halinde gruplamak mümkün. Bu da SEO için önemli bir rol oynuyor. Ayrıca HTML5’in medya için sağladığı kolaylıklar göz ardı edilemez.

CSS
CSS bildiğimiz üzere metin biçimlendirme imkanı sunar. CSS web uygulama tasarımı için olmazsa olmazlardandır. CSS bilmek zorunluluk olmakla beraber CSS3 bilmek siteyi daha dinamik olarak kodlamaya imkan sağlıyor. CSS3 çıkmadan önce dinamik bir arayüz için JAVASCRIPT kullanmak şarttı. Ancak şimdi sadece CSS3 ve HTML ile dinamik tasarımlar yaratmak mümkün. Bu demek değildir ki JAVASCRIPT olmazsa olur. JAVASCRIPT şart.

CSS’in bir diğer alt dalı ise SASS ve LESS’tir. Bu diller CSS formatında derlenebilen biçim şablon dilleridir. Bu diller ile CSS kodunuzu ölçeklendirebilir bir yapıya sokar. Ayrıca kodların çalıştırılmasını kolaylaştırmaktadır. Tarayıcı dostu olarak ön plana çıkarlar. CSS ön işlemci olarak karşımıza çıkmaktadırlar.

JAVASCRIPT
Script bir dil olan JAVASCRIPT ilk çıktığında bayrak sallamaya yarıyordu. Şimdi ise başka bir programlama diline ihtiyaç duymadan veritabanı işlemleri gerçekleştirebilir, tasarımınızı dinamik bir yapıya kavuşturabilir ve her türlü sistemi geliştirebilirsiniz. Veritabanı işlemleri yapmak için Node.js kullanmak yetiyor. Nesne yönelimli yapısı ile ilgileri üzerine toplamayı başarmış bir dildir. Bu nedenle temel JAVASCRIPT diline aşina olmakla beraber bir kaç kütüphaneyi de bilmeniz size büyük bir avantaj sağlayacaktır.

Az önce de dediğimiz gibi sunucu taraflı işlemler gerçekleştirmek istiyorsanız Noje.Js bilmeniz gerekir. Bunun dışında front-end kısmı için Jquery bilmek avantaj sağlar ancak günümüzde Jquery yerini AngularJS, ReactJS ve Vue.Js’ye bırakmıştır. AngularJS Google, ReactJS ise Facebook tarafından geliştirilmiş bir JAVASRIPT çatısıdır. Özetle JAVASCRIPT önemli.

Arayüz Tasarlamak İçin Editörler

Bir arayüz geliştiricisi için en önemli noktalardan biri de kullandığınız editördür. Editörler size kod yardımı sağlayarak projenizi daha etkin ve hızlı bir şekilde kodlamaya olanak sağlar. Ayrıca daha düzenli bir kod yapısı da elde etmiş olursunuz. Bu iş için bir çok editör mevcut. Ben ATOM kullanmayı tercih ediyorum. Onlarca eklentisi mevcut. Kullanışlı ve hızlı bir yapısı var. ATOM Github tarafından geliştirilmiştir. Bunun dışında Sublime Text editör benzer bir yapıya sahip. Visual Studio kullanıyorsanız Visual Studio Code aynı işlevi yerine getiriyor. Bu editörler bir çok programlama dilini destekliyor. Sadece tasarım için değil diğer programlama dilleri için de kullanabilirsiniz. Bu editörlerin güzel yanı ise Git bağlantısı sağlayabilmek. Projenizi kodladıktan sonra kolaylıkla commit edebilirsiniz. Editör seçiminizi iyi yapmanız size büyük fayda sağlayacaktır.

Mobil Uyumlu (Responsive) Tasarımlar

Uygulamanızın arayüzünü tasarlarken bilgisayar kullanan kullanıcıları baz almaktayız. Ancak sitenin mobil ve tablet kullanan kullanıcılar tarafından da ziyaret edilebileceğiniz unutmamak gerekir. Bu kullanıcıların sitede rahatça gezinebilmesi için bu kullanıcılara özel arayüz tasarlamak gerekir. Responsive tasarım olarak adlandırılan arayüz tasarımlar için CSS üzerinde media yapısı kullanılmaktadır. JAVASCRIPT’in desteği ile kullanımı kolay ve göze hitap eden bir arayüz tasarlamak mümkündür. Günümüzde akıllı telefonlara artan ilgiyi de düşünürsek Responsive tasarımlar olmazsa olmazlar arasında yerini almaktadır.

Sürüm Kontrol Sistemleri

Son olarak değinmek istediğim konu ise Git sistemleridir. Bu sistemler siz projenizi kodlarken yaptığınız değişiklikleri kayıt altına alıp proje loglarını tutmaktadır. Bu sayede projenin neresinde, ne zaman ve hangi değişikliği yaptığınızı gözleyebilirsiniz. Projeyi kodlarken yaptığınız bir hatayı geri almak mümkün hale geliyor. Git bu sistemler arasında en çok tercih edilen sürüm kontrol sistemlerinden biridir. Bu tarz bir sistemi bilmek zorundasınız. Ayrıca bu tarz sistemlere kayıt ettiğiniz projelerinizi referans olarak göstermek de mümkün.

Özet

Özetle iyi bir Front-End olmak için HTML5, CSS3 ve JAVASCRIPT bileceksiniz. Responsive tasarım yapısına hakim olacaksınız. Hızlı çalışmak için iyi bir editör tercih etmelisiniz. Son olarak da sürüm kontrol sistemlerini kullanmayı bileceksiniz.

Bu makalenin de sonuna geldik. Bir daha ki makalede görüşmek üzere, esen kalın..