Merhaba. Ben Can. Unicrow firmasında arayüz geliştiriciyim. Yaklaşık 6 yıldır front-end ile ilgilenmekteyim. Bu yazıda Unicrow’da bir projenin front-end kısmına başlayış aşamalarımdan ve bu aşamalarda neler kullandığımdan bahsedeceğim.
Öncelikle Mac kullanıcısıyım ve imkanı olan herkese tavsiye ederim. Rahat ve temiz çalışma süreci sağlıyor.
Tasarımları incelemek için Photoshop (veya Sympli/Zeplin üzerinde), HTML / CSS / JS kod yazımı için ise Sublime Text kullanıyorum.
Tasarımları detaylıca inceledikten sonra HTML / CSS / JS dosya ve klasör yapısını Github da mevcut olan dosya yapımızı kullanıyorum. Günümüz CSS yazımımı kolaylaştırmak, matematiksel işlemler yapılabilmek ve fonksiyon yapılarını kullanılabilmek için SASS kullanmaktayım. SASS uzantılı dosyalarımı derlemek için Grunt dan yardım alarak .sass uzantılı dosyalarımı .css uzantısına çeviriyorum.
SASS yazımında Bourbon (SASS yazımındaki mixinler) kütüphanesini kullanıyorum. Sürekli sonucu görmek için tarayıcı elle yenilemek yerine Browser Sync yardımıyla bunu otomatik hale getiriyorum. Grunt ile entegrasyonlu çalışıyor.
Ardından opsiyonel dediğimiz elementleri yani projenin UI Kit’ini (Form elementleri, Button görünümleri, Dropdown yapıları vs.) yapısını çıkartıyorum. Bu işlemi yapmam ilk aşamada benim için zaman kaybı gibi gözükse de projenin ilerleyişinde daha rahat olmamı ve hızlı geliştirmemde yardımcı oluyor.
Projenin UI Kit’ini tamamladıktan sonra kısım kısım geliştirme dediğim aşamaya geçiyorum. İlk olarak genelde her sitede yer alan header alanından başlayarak en alt kısıma footera kadar geliştirme işlemini gerçekleştiriyorum. Tabi bu iki kısım arasındaki yapıları geliştirirken etkileşim yapıları varsa (jQuery) HTML / CSS yazımını bunları göz önünde bulundurarak kodluyorum. Örneğin; Projede header dediğimiz kısım sticky (sabit) ise ya da sayfayı scroll yapınca bir etkileşim gerçekleşecekse yapısını bu etkileşimleri göz önünde bulundurarak hazırlıyorum.
Yapmayı ihmal etmediğim bir diğer aşama ise sayfa geliştirme tamamlanınca tasarımla HTML yapısını kıyaslama yapmak. Detaylıca olmasa da ilk bakışta tutarsızlık var mı yok mu diye bu denetlemeleri yapıyorum.
Diğer sayfaları tamamladıktan sonra etkileşim (jQuery) dediğimiz kısımları geliştiriyorum ve projeyi tarayıcı test aşamalarına başlıyorum.
Tarayıcı testlerinde tasarımla denk gelmeyen ve tutarsızlıkların önüne geçmek için BrowserStack üzerinden testler gerçekleştiriyorum. Bu aşamada herhangi bir sorun ile karşılaştığımda CSS Browser Selector adlı JavaScript eklentisini kullanarak hangi tarayıcıda sorun varsa ona özgü düzenleme yazabilmem için <html> tagına class atıyor. Örneğin; Sadece Mac işletim sisteminin Safari tarayıcısında düzenleme yapacağım zaman “.mac.safari” şeklinde kullanım yaparak düzenleme CSS kodumu yazıyorum.
Projeyi bu aşamalardan geçirdikten sonra tamamlamış oluyorum. Git yardımıyla oluşturmuş olduğum repoya pushluyorum.
