Hurriyet.com.tr ve diğer dikey mecraların front-end değişimi

1. Hack’n Break
Open Innovation
Camp & Conference

2. Merhaba!
Ersin KAYA
Senior Front-end Developer @ Hürriyet
Linkedin: ersin-kaya
2

3. Yüksek trafikli web sitelerinde
front-end mimarisi ve dijital dönüşüm
3
● Hürriyet
● Bigpara
● Mahmure
● Hürriyet Aile
● Spor Arena
● Milliyet
● Posta
● Fanatik
● Dsmart
● Cnn Türk

4. 4
Yüksek Web Trafiği?

5. Hurriyet.com.tr
5
● Nasıl çalışıyorduk?
● Neye karar verdik? Neler başardık?
● Gelecekteki hedefimiz neler?

6. Nasıl çalışıyorduk?
1

7. 7
Karmaşık HTML & CSS Yapıları

8. “ - Onu da kullanalım
- Şunu da mı kullansak
- Hepsi olsa daha iyi olmaz mı?
- Zengin görünür
8

9. Neye karar verdik?
Neleri başardık?
2

10. 10
Ürün -> Tasarım -> Arayüz Yazılımı

11. 11
İş Süreçleri

12. “ Tasarım aracını seçmeliyiz
12

13. 13
Script kullanımı

14. 14
Grid yapısı

15. “ “Mobile first” stratejisi demek, inşa
ettiğiniz yapının odağına mobil cihazları
ve bunları kullanan kullanıcıları oturtmak
demektir.
15

16. Versiyon
Kontrol
Sistemi
16

17. Code
Review
Yazdığınız kodun kontrol edilmesi
sizin için ne ifade ediyor?
17

18. FE yapısı nasıl olmalı?
18
● Ortak font kullanmalıyız
● Daha hızlı yazmak için mixin oluşturmalıyız
● Daha temiz kod için variables tanımlamalıyız
● Front-end standartları oluşturmalıyız

19. “
@import "../fonts/pt_sans";
19

20. “
@include line-clamp(3);
20

21. “ .button{
background-color: #000;
color: #fff;
}
.button{
background-color: $color-black;
color: $color-white;
}
.button{
background-color: $spor-link-backcolor;
color: $spor-link-forecolor;
margin-bottom: $spor-margin-bottom;
}
21

22. Task runner <Gulp>
Front-end tarafında bazı şeyleri otomatize etmek için Gulp kullanıyoruz,
Nedir bu Gulp, ne gibi avantajları var.
22
● Minify, Uglify
● Image Optimization
● Sass
● Icon Font
● Concat
● Image Sprite

23. Front End Standartları:
● Sitilleri alfabetik olarak yazın
● Büyük harf kesinlikle kullanmayın
● Semantik kod kullanın (a, h1, ul)
● Alt ve Title etikenleri kullanmaya özen gösterin
● Html yapısının iyi okunması için girintilere dikkat edin
● Html içindeki attribute’lerde çift tırnak kullanın
● Id ve class isimlerini mümkün olduğunca kısa tutun
● ‘0’ kullandığınızda birim belirtmeyin
23

24. Gelecekteki
hedeflerimiz neler?
3

25. - Yeni teknolojiler kullanacağız
- Tüm sayfalarımızı responsive yapıya geçireceğiz
- -
- -
25
Front-end Hedeflerimiz

26. 26

27. 27
Teşekkürler!
Linkedin: ersin-kaya