poyrazavsever/poyraz-portfolio
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor blog posts with code snippets and formatting improvements for better readability and consistency across various topics including Chakra UI, Materialize, Docker, Jest, Cypress, Next.js, Svelte, Tailwind CSS, Three.js, and TypeScript.

Browse Source
This commit is contained in:
Poyraz Avsever
2026-04-14 11:48:49 +03:00
parent c9ebebab74
commit 5fc2658460
15 changed files with 503 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/blog/css-frameworkleri-tan-yoruz-1-b-l-m-bootstrap.md
+44 -22
View File
@@ -12,7 +12,6 @@ canonicalUrl: "https://medium.com/@poyrazavsever/css-frameworkleri-tan%C4%B1yoru
# CSS Frameworkleri Tanıyoruz | 1. Bölüm: Bootstrap # CSS Frameworkleri Tanıyoruz | 1. Bölüm: Bootstrap
![](/blog/images/css-frameworkleri-tan-yoruz-1-b-l-m-bootstrap-img-2.jpg) ![](/blog/images/css-frameworkleri-tan-yoruz-1-b-l-m-bootstrap-img-2.jpg)
CSS Frameworkleri, artık modern web geliştirme süreçlerinde hayat kurtarıcı oluyor. Kendi css dosyalarımızı sıfırdan yazmak yerine, önceden hazırlanmış, optimize edilmiş ve test edilmiş kodlardan faydalanabiliyoruz. Bu yazı serisi boyunca, en popüler frameworkleri adım adım birlikte öğreneceğiz. Serimizin ilk konuğu: **Bootstrap**! CSS Frameworkleri, artık modern web geliştirme süreçlerinde hayat kurtarıcı oluyor. Kendi css dosyalarımızı sıfırdan yazmak yerine, önceden hazırlanmış, optimize edilmiş ve test edilmiş kodlardan faydalanabiliyoruz. Bu yazı serisi boyunca, en popüler frameworkleri adım adım birlikte öğreneceğiz. Serimizin ilk konuğu: **Bootstrap**!
@@ -21,18 +20,18 @@ CSS Frameworkleri, artık modern web geliştirme süreçlerinde hayat kurtarıc
Bootstrap, Twitter mühendisleri tarafından geliştirilen, açık kaynaklı bir CSS frameworküdür. Temel amacı, hızlı ve uyumlu (responsive) web siteleri oluşturmayı kolaylaştırmaktır. Bootstrap, Twitter mühendisleri tarafından geliştirilen, açık kaynaklı bir CSS frameworküdür. Temel amacı, hızlı ve uyumlu (responsive) web siteleri oluşturmayı kolaylaştırmaktır.
* **İlk Çıkış Yılı:** 2011 - **İlk Çıkış Yılı:** 2011
* **Geliştiriciler:** Mark Otto ve Jacob Thornton - **Geliştiriciler:** Mark Otto ve Jacob Thornton
* **Ana Özellikleri:** Responsive grid sistemi, hazır UI bileşenleri, JavaScript pluginleri ve hızlı prototipleme imkanı. - **Ana Özellikleri:** Responsive grid sistemi, hazır UI bileşenleri, JavaScript pluginleri ve hızlı prototipleme imkanı.
## Neden Bootstrap? ## Neden Bootstrap?
Günümüzde hangi kurumdan, videodan ya da dökümantasyonlardan front-end öğrenmeye çalışıyorsanız karşınıza kesinlikle “Bootstrap” çıkmıştır çünkü: Günümüzde hangi kurumdan, videodan ya da dökümantasyonlardan front-end öğrenmeye çalışıyorsanız karşınıza kesinlikle “Bootstrap” çıkmıştır çünkü:
* **Kolay Başlangıç:** CDN üzerinden birkaç satır kodla hızlıca çalışmaya başlayabilirsin. - **Kolay Başlangıç:** CDN üzerinden birkaç satır kodla hızlıca çalışmaya başlayabilirsin.
* **Mobil Öncelikli:** Tüm tasarımlar mobil uyumlu düşünülerek geliştirilmiştir. - **Mobil Öncelikli:** Tüm tasarımlar mobil uyumlu düşünülerek geliştirilmiştir.
* **Topluluk Desteği:** Sorun yaşadığında veya geliştirmek istediğinde çok geniş bir kaynak ve topluluk seni bekliyor. - **Topluluk Desteği:** Sorun yaşadığında veya geliştirmek istediğinde çok geniş bir kaynak ve topluluk seni bekliyor.
* **Kapsamlı Bileşenler:** Düğmeler, formlar, modallar, navigasyon barları ve daha fazlası hazır halde gelir. - **Kapsamlı Bileşenler:** Düğmeler, formlar, modallar, navigasyon barları ve daha fazlası hazır halde gelir.
## Nasıl Başlıyoruz? ## Nasıl Başlıyoruz?
@@ -40,20 +39,24 @@ Günümüzde hangi kurumdan, videodan ya da dökümantasyonlardan front-end öğ
HTML dosyana sadece şu satırları eklemen yeterli: HTML dosyana sadece şu satırları eklemen yeterli:
```html
<link href\="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel\="stylesheet"\> <link href\="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel\="stylesheet"\>
<script src\="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"\></script\> <script src\="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"\></script\>
```
**2\. Yöntem: NPM Üzerinden Kurulum** **2\. Yöntem: NPM Üzerinden Kurulum**
Projeni biraz daha büyük ölçekli yönetmek istersen: Projeni biraz daha büyük ölçekli yönetmek istersen:
```bash
npm install bootstrap npm install bootstrap
```
## İlk Bootstrap Deneyimimiz: Basit Bir Sayfa ## İlk Bootstrap Deneyimimiz: Basit Bir Sayfa
Şimdi Bootstrap’ı küçük bir örnekle kullanalım: Şimdi Bootstrap’ı küçük bir örnekle kullanalım:
```html
<!DOCTYPE html\> <!DOCTYPE html\>
<html lang\="tr"\> <html lang\="tr"\>
<head\> <head\>
@@ -70,6 +73,7 @@ npm install bootstrap
</div\> </div\>
</body\> </body\>
</html\> </html\>
```
Ve işte bu kadar. Ve işte bu kadar.
@@ -77,23 +81,27 @@ Ve işte bu kadar.
Bootstrap projeleri, genellikle şu 3 temel yapı üzerine kuruludur: Bootstrap projeleri, genellikle şu 3 temel yapı üzerine kuruludur:
* **Container:** İçerikleri sınırlamak ve hizalamak için kullanılır. - **Container:** İçerikleri sınırlamak ve hizalamak için kullanılır.
* **Row:** Satır oluşturur. Grid sisteminin temel taşıdır. - **Row:** Satır oluşturur. Grid sisteminin temel taşıdır.
* **Col:** Sütunları ifade eder. Responsive tasarımın kalbidir. - **Col:** Sütunları ifade eder. Responsive tasarımın kalbidir.
## Container Nedir? ## Container Nedir?
`container` sınıfı, içerikleri ortalamak ve belirli bir genişlikte tutmak için kullanılır. `container` sınıfı, içerikleri ortalamak ve belirli bir genişlikte tutmak için kullanılır.
```html
<div class\="container"\> <div class\="container"\>
İçerik burada yer alacak. İçerik burada yer alacak.
</div\> </div\>
```
İstersen tam genişlikte bir container da kullanabilirsin: İstersen tam genişlikte bir container da kullanabilirsin:
```html
<div class\="container-fluid"\> <div class\="container-fluid"\>
Bu container ekranın tamamını kaplar. Bu container ekranın tamamını kaplar.
</div\> </div\>
```
## 2\. Bootstrap Grid Sistemi ## 2\. Bootstrap Grid Sistemi
@@ -101,6 +109,7 @@ Bootstrap’ın en güçlü özelliklerinden biri: **12 kolonlu grid sistemi**.
### Basit Grid Kullanımı ### Basit Grid Kullanımı
```html
<div class\="container"\> <div class\="container"\>
<div class\="row"\> <div class\="row"\>
<div class\="col"\>Sütun 1</div\> <div class\="col"\>Sütun 1</div\>
@@ -108,6 +117,7 @@ Bootstrap’ın en güçlü özelliklerinden biri: **12 kolonlu grid sistemi**.
<div class\="col"\>Sütun 3</div\> <div class\="col"\>Sütun 3</div\>
</div\> </div\>
</div\> </div\>
```
Yukarıdaki kod 3 eşit genişlikte sütun oluşturuyor. Yukarıdaki kod 3 eşit genişlikte sütun oluşturuyor.
@@ -115,23 +125,27 @@ Yukarıdaki kod 3 eşit genişlikte sütun oluşturuyor.
İstersen sütunlara özel genişlikler de verebilirsin: İstersen sütunlara özel genişlikler de verebilirsin:
```html
<div class\="row"\> <div class\="row"\>
<div class\="col-6"\>%50 genişlik</div\> <div class\="col-6"\>%50 genişlik</div\>
<div class\="col-3"\>%25 genişlik</div\> <div class\="col-3"\>%25 genişlik</div\>
<div class\="col-3"\>%25 genişlik</div\> <div class\="col-3"\>%25 genişlik</div\>
</div\> </div\>
```
### Responsive Grid ### Responsive Grid
Farklı ekran boyutlarına göre farklı genişlikler ayarlayabilirsin: Farklı ekran boyutlarına göre farklı genişlikler ayarlayabilirsin:
```html
<div class\="row"\> <div class\="row"\>
<div class\="col-12 col-md-8"\>Büyük ekranlarda 8 birim</div\> <div class\="col-12 col-md-8"\>Büyük ekranlarda 8 birim</div\>
<div class\="col-6 col-md-4"\>Büyük ekranlarda 4 birim</div\> <div class\="col-6 col-md-4"\>Büyük ekranlarda 4 birim</div\>
</div\> </div\>
```
* `col-12`: Küçük ekranlarda tüm satırı kapla. - `col-12`: Küçük ekranlarda tüm satırı kapla.
* `col-md-8`: Orta ve daha büyük ekranlarda 8 kolon kapla. - `col-md-8`: Orta ve daha büyük ekranlarda 8 kolon kapla.
## 3\. Bootstrap Bileşenleri ## 3\. Bootstrap Bileşenleri
@@ -139,14 +153,17 @@ Bootstrap, tonlarca hazır bileşen sunuyor. Birkaç önemli bileşene beraber b
### Düğmeler (Buttons) ### Düğmeler (Buttons)
```html
<button class\="btn btn-primary"\>Primary Düğme</button\> <button class\="btn btn-primary"\>Primary Düğme</button\>
<button class\="btn btn-success"\>Success Düğme</button\> <button class\="btn btn-success"\>Success Düğme</button\>
<button class\="btn btn-danger"\>Danger Düğme</button\> <button class\="btn btn-danger"\>Danger Düğme</button\>
```
Renk kodları ile istediğin tarzı seçebilirsin. Renk kodları ile istediğin tarzı seçebilirsin.
### Kartlar (Cards) ### Kartlar (Cards)
```html
<div class\="card" style="width: 18rem;"\> <div class\="card" style="width: 18rem;"\>
<img src\="https://via.placeholder.com/150" class\="card-img-top" alt\="..."\> <img src\="https://via.placeholder.com/150" class\="card-img-top" alt\="..."\>
<div class\="card-body"\> <div class\="card-body"\>
@@ -155,11 +172,13 @@ Renk kodları ile istediğin tarzı seçebilirsin.
<a href\="#" class\="btn btn-primary"\>Bir yere git</a\> <a href\="#" class\="btn btn-primary"\>Bir yere git</a\>
</div\> </div\>
</div\> </div\>
```
Kartlar, görsel + içerik kombinasyonları için çok ideal. Kartlar, görsel + içerik kombinasyonları için çok ideal.
### Navigasyon Bar (Navbar) ### Navigasyon Bar (Navbar)
```html
<nav class\="navbar navbar-expand-lg navbar-light bg-light"\> <nav class\="navbar navbar-expand-lg navbar-light bg-light"\>
<a class\="navbar-brand" href\="#"\>Logo</a\> <a class\="navbar-brand" href\="#"\>Logo</a\>
<button class\="navbar-toggler" type\="button" data-bs-toggle\="collapse" data-bs-target\="#navbarNav"\> <button class\="navbar-toggler" type\="button" data-bs-toggle\="collapse" data-bs-target\="#navbarNav"\>
@@ -176,11 +195,13 @@ Kartlar, görsel + içerik kombinasyonları için çok ideal.
</ul\> </ul\>
</div\> </div\>
</nav\> </nav\>
```
## Mini Proje: Bootstrap ile Basit Bir İletişim Sayfası ## Mini Proje: Bootstrap ile Basit Bir İletişim Sayfası
Öğrendiklerimizi pekiştirmek için birlikte küçük bir iletişim sayfası tasarlayalım. Öğrendiklerimizi pekiştirmek için birlikte küçük bir iletişim sayfası tasarlayalım.
```html
<!DOCTYPE html\> <!DOCTYPE html\>
<html lang\="tr"\> <html lang\="tr"\>
<head\> <head\>
@@ -213,22 +234,23 @@ Kartlar, görsel + içerik kombinasyonları için çok ideal.
</body\> </body\>
</html\> </html\>
```
### Bu Mini Projede Neler Öğrendik? ### Bu Mini Projede Neler Öğrendik?
* Container ve grid yapısını kullanarak belli bir düzen oluşturduk. - Container ve grid yapısını kullanarak belli bir düzen oluşturduk.
* Form elemanlarını Bootstrap ile daha şık hale getirdik. - Form elemanlarını Bootstrap ile daha şık hale getirdik.
* Button ve spacing (boşluk) classlarını (py-5, mb-3, w-100) kullandık. - Button ve spacing (boşluk) classlarını (py-5, mb-3, w-100) kullandık.
Bu küçük örnek, Bootstrap ile bir tasarımın ne kadar hızlı oluşturabileceğinizi gösteriyor. Yukarıdaki kodları inceleyerek bir çok noktayı anlayabilirsiniz. Bu küçük örnek, Bootstrap ile bir tasarımın ne kadar hızlı oluşturabileceğinizi gösteriyor. Yukarıdaki kodları inceleyerek bir çok noktayı anlayabilirsiniz.
## Bootstrap’ı Daha İyi Öğrenmek İçin Ne Yapabilirsin? ## Bootstrap’ı Daha İyi Öğrenmek İçin Ne Yapabilirsin?
* **Bootstrap Resmi Dokümantasyonu** sürekli güncelleniyor ve harika örneklerle dolu, inceleyebilirsiniz. ([https://getbootstrap.com/](https://getbootstrap.com/)) - **Bootstrap Resmi Dokümantasyonu** sürekli güncelleniyor ve harika örneklerle dolu, inceleyebilirsiniz. ([https://getbootstrap.com/](https://getbootstrap.com/))
* **Kendi Küçük Projelerini Yap:** Mini portföyler, basit blog tasarımları, admin panelleri denemek çok öğretici olur. - **Kendi Küçük Projelerini Yap:** Mini portföyler, basit blog tasarımları, admin panelleri denemek çok öğretici olur.
* **Responsive Tasarımlar Üzerinde Çalış:** Farklı ekran boyutlarına uyum sağlamak için grid ve flex yapılarını bol bol kullan. Bunları ne kadar çok kullanırsan aşinalığın o kadar artacak. - **Responsive Tasarımlar Üzerinde Çalış:** Farklı ekran boyutlarına uyum sağlamak için grid ve flex yapılarını bol bol kullan. Bunları ne kadar çok kullanırsan aşinalığın o kadar artacak.
* **Bootstrap Temalarına Göz At:** Ücretsiz tema sitelerinden ilham alabilirsin, kodlarını incele ve kendin tekrar kurmaya çalış. (Örneğin: [https://startbootstrap.com/](https://startbootstrap.com/)) - **Bootstrap Temalarına Göz At:** Ücretsiz tema sitelerinden ilham alabilirsin, kodlarını incele ve kendin tekrar kurmaya çalış. (Örneğin: [https://startbootstrap.com/](https://startbootstrap.com/))
* **Ekstra Bileşenleri Kullanmayı Öğren:** Modals, Toasts, Offcanvas gibi daha ileri seviye bileşenleri projelerinde deneyerek Bootstrap bilgin kat kat artar. - **Ekstra Bileşenleri Kullanmayı Öğren:** Modals, Toasts, Offcanvas gibi daha ileri seviye bileşenleri projelerinde deneyerek Bootstrap bilgin kat kat artar.
## Kapanış ## Kapanış
content/blog/css-frameworkleri-tan-yoruz-2-b-l-m-foundation.md
+39 -21
View File
@@ -12,7 +12,6 @@ canonicalUrl: "https://medium.com/@poyrazavsever/css-frameworkleri-tan%C4%B1yoru
# CSS Frameworkleri Tanıyoruz | 2. Bölüm: Foundation # CSS Frameworkleri Tanıyoruz | 2. Bölüm: Foundation
Merhaba arkadaşlar, bugün yeni konuğumuz “Foundation”. Gelin hep beraber tanışalım. Merhaba arkadaşlar, bugün yeni konuğumuz “Foundation”. Gelin hep beraber tanışalım.
![](/blog/images/css-frameworkleri-tan-yoruz-2-b-l-m-foundation-img-2.jpg) ![](/blog/images/css-frameworkleri-tan-yoruz-2-b-l-m-foundation-img-2.jpg)
@@ -21,9 +20,9 @@ Merhaba arkadaşlar, bugün yeni konuğumuz “Foundation”. Gelin hep beraber
**Foundation**, ZURB tarafından geliştirilmiş, responsive web tasarımını ön planda tutan bir CSS framework’üdür. Modern web tasarımları için güçlü bir altyapı sanan ve projenizin hızlıca şekillendirilmesini sağlayan bir framework ‘tür. **Foundation**, ZURB tarafından geliştirilmiş, responsive web tasarımını ön planda tutan bir CSS framework’üdür. Modern web tasarımları için güçlü bir altyapı sanan ve projenizin hızlıca şekillendirilmesini sağlayan bir framework ‘tür.
* **Responsive Design**: Mobil uyumlu, masaüstü uyumlu web siteleri oluşturur. - **Responsive Design**: Mobil uyumlu, masaüstü uyumlu web siteleri oluşturur.
* **Flexbox ve Grid Sistemleri**: Kullanımı kolay grid ve flexbox destekleri sunar. - **Flexbox ve Grid Sistemleri**: Kullanımı kolay grid ve flexbox destekleri sunar.
* **Özelleştirilebilir Bileşenler**: Kendi tasarımınızı oluşturabileceğiniz hazır bileşenlerle gelir. - **Özelleştirilebilir Bileşenler**: Kendi tasarımınızı oluşturabileceğiniz hazır bileşenlerle gelir.
## 1\. Foundation’ın Temel Yapısı ## 1\. Foundation’ın Temel Yapısı
@@ -33,17 +32,19 @@ Foundation ile bir sayfa tasarlarken, diğer framework’lerde olduğu gibi **gr
Örneğin bir sayfada 2 sütunlu bir düzen oluşturmak için: Örneğin bir sayfada 2 sütunlu bir düzen oluşturmak için:
```html
<div class\="grid-x"\> <div class\="grid-x"\>
<div class\="cell small-12 medium-6"\>Sütun 1</div\> <div class\="cell small-12 medium-6"\>Sütun 1</div\>
<div class\="cell small-12 medium-6"\>Sütun 2</div\> <div class\="cell small-12 medium-6"\>Sütun 2</div\>
</div\> </div\>
```
Burada; Burada;
* `grid-x`: Grid sistemini x ekseninde başlatır. - `grid-x`: Grid sistemini x ekseninde başlatır.
* `cell`: Her bir hücreyi tanımlar. - `cell`: Her bir hücreyi tanımlar.
* `small-12`: Mobilde 12 sütun kullan, tam genişlik ver anlamına geliyor. - `small-12`: Mobilde 12 sütun kullan, tam genişlik ver anlamına geliyor.
* `medium-6`: Masaüstünde 6 sütun, yani 2 sütunlu bir yapı anlamına geliyor. - `medium-6`: Masaüstünde 6 sütun, yani 2 sütunlu bir yapı anlamına geliyor.
Daha detaylı incelemek için [Foundation Framework Doc](https://get.foundation/sites/docs/index.html) sayfasından dökümantasyonu inceleyebilirsin. Daha detaylı incelemek için [Foundation Framework Doc](https://get.foundation/sites/docs/index.html) sayfasından dökümantasyonu inceleyebilirsin.
@@ -53,7 +54,13 @@ Daha detaylı incelemek için [Foundation Framework Doc](https://get.foundation/
Eğer hemen başlamak istiyorsan: Eğer hemen başlamak istiyorsan:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css"\> ```html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css"
\
/>
```
Ardından HTML dosyanda Foundation class’larını kullanmaya başlayabilirsin. Ardından HTML dosyanda Foundation class’larını kullanmaya başlayabilirsin.
@@ -61,11 +68,15 @@ Ardından HTML dosyanda Foundation class’larını kullanmaya başlayabilirsin.
Daha kapsamlı projelerde `npm` ile kurulumunu öneririm: Daha kapsamlı projelerde `npm` ile kurulumunu öneririm:
```bash
npm install foundation-sites npm install foundation-sites
```
Sonrasında: Sonrasında:
```bash
npx foundation new npx foundation new
```
Bu komutla, sana temel bir Foundation projesi kurabilirsin. Bu komutla, sana temel bir Foundation projesi kurabilirsin.
@@ -77,6 +88,7 @@ Bu kısımda, Foundation’ın sunduğu **callout** bileşenini kullanarak **duy
Foundation’da duyuru, uyarı ya da önemli bilgileri vurgulamak için **callout** bileşeni kullanılabiliriz. **Callout** bileşeni, dikkat çekici bir stil sunarak mesajları öne çıkarır. Hadi hemen bir örnek üzerinden başlayalım: Foundation’da duyuru, uyarı ya da önemli bilgileri vurgulamak için **callout** bileşeni kullanılabiliriz. **Callout** bileşeni, dikkat çekici bir stil sunarak mesajları öne çıkarır. Hadi hemen bir örnek üzerinden başlayalım:
```html
<!DOCTYPE html\> <!DOCTYPE html\>
<html lang\="tr"\> <html lang\="tr"\>
<head\> <head\>
@@ -97,18 +109,19 @@ Foundation’da duyuru, uyarı ya da önemli bilgileri vurgulamak için **callou
<script src\="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"\></script\> <script src\="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"\></script\>
</body\> </body\>
</html\> </html\>
```
### Açıklamalar: ### Açıklamalar:
* `**callout primary**`: `callout` bileşeni ile duyuru kutusunun stilini tanımlıyoruz. `primary` sınıfı ise kutunun rengini belirler (genellikle mavi tonlarında oluyor.). - `**callout primary**`: `callout` bileşeni ile duyuru kutusunun stilini tanımlıyoruz. `primary` sınıfı ise kutunun rengini belirler (genellikle mavi tonlarında oluyor.).
### Adım 2: Duyuru Kutusunu Responsive Yapma ### Adım 2: Duyuru Kutusunu Responsive Yapma
Bu proje, mobil uyumlu bir duyuru kutusu oluşturmayı da içeriyor. Foundation, **grid sistemi** ve **responsive utilities** ile sayfanın farklı ekran boyutlarına göre nasıl uyumlu hale getirileceğini gayet kolaylaştırır. Bu proje, mobil uyumlu bir duyuru kutusu oluşturmayı da içeriyor. Foundation, **grid sistemi** ve **responsive utilities** ile sayfanın farklı ekran boyutlarına göre nasıl uyumlu hale getirileceğini gayet kolaylaştırır.
Örneğin, duyuru kutusunun genişliğini ekran boyutuna göre değiştirebiliriz: Örneğin, duyuru kutusunun genişliğini ekran boyutuna göre değiştirebiliriz:
```html
<div class\="callout primary grid-container"\> <div class\="callout primary grid-container"\>
<div class\="grid-x grid-padding-x"\> <div class\="grid-x grid-padding-x"\>
<div class\="cell small-12 medium-8 large-6"\> <div class\="cell small-12 medium-8 large-6"\>
@@ -118,12 +131,13 @@ Bu proje, mobil uyumlu bir duyuru kutusu oluşturmayı da içeriyor. Foundation,
</div\> </div\>
</div\> </div\>
</div\> </div\>
```
### Açıklamalar: ### Açıklamalar:
* `**grid-container**`: Container sınıfı, grid sisteminin düzenli çalışmasını sağlar. - `**grid-container**`: Container sınıfı, grid sisteminin düzenli çalışmasını sağlar.
* `**grid-x grid-padding-x**`: `grid-x` tüm satırı tanımlar, `grid-padding-x` ise yatay boşluk ekler. - `**grid-x grid-padding-x**`: `grid-x` tüm satırı tanımlar, `grid-padding-x` ise yatay boşluk ekler.
* `**cell small-12 medium-8 large-6**`: Burada, duyuru kutusunun küçük ekranlarda tam genişlikte (12 sütun), orta boy ekranlarda 8 sütun ve büyük ekranlarda ise 6 sütun genişliğinde olmasını sağlıyoruz. - `**cell small-12 medium-8 large-6**`: Burada, duyuru kutusunun küçük ekranlarda tam genişlikte (12 sütun), orta boy ekranlarda 8 sütun ve büyük ekranlarda ise 6 sütun genişliğinde olmasını sağlıyoruz.
Bu düzen sayesinde duyuru kutusu, ekran boyutuna göre daha rahat yerleşim alacak ve kullanıcının her cihazda düzgün görüntülenmesini sağlayacaktır. Bu düzen sayesinde duyuru kutusu, ekran boyutuna göre daha rahat yerleşim alacak ve kullanıcının her cihazda düzgün görüntülenmesini sağlayacaktır.
@@ -133,18 +147,21 @@ Foundation, **temalar** ve **renkler** konusunda da özelleştirme imkanı sunar
Örneğin: Örneğin:
```html
<div class\="callout alert"\> <div class\="callout alert"\>
<h5\>Önemli Uyarı!</h5\> <h5\>Önemli Uyarı!</h5\>
<p\>Web sitemiz geçici olarak bakıma alındı. Lütfen daha sonra tekrar deneyin.</p\> <p\>Web sitemiz geçici olarak bakıma alındı. Lütfen daha sonra tekrar deneyin.</p\>
</div\> </div\>
```
* `**alert**`: Bu sınıf, **kırmızı** bir arka plan rengini ifade eder ve genellikle uyarılar için kullanılır. - `**alert**`: Bu sınıf, **kırmızı** bir arka plan rengini ifade eder ve genellikle uyarılar için kullanılır.
* `**secondary**`: Duyuru kutusunun renk paletini değiştirir, farklı bir ton verir. - `**secondary**`: Duyuru kutusunun renk paletini değiştirir, farklı bir ton verir.
### Adım 4: İnteraktif Özellikler Eklemek ### Adım 4: İnteraktif Özellikler Eklemek
Foundation ile basit **modal pencereler** ve **accordion** gibi interaktif özellikler de ekleyebilirsiniz. Örneğin, kullanıcı butona tıkladığında bir **modal pencere** açılmasını sağlayabiliriz: Foundation ile basit **modal pencereler** ve **accordion** gibi interaktif özellikler de ekleyebilirsiniz. Örneğin, kullanıcı butona tıkladığında bir **modal pencere** açılmasını sağlayabiliriz:
```html
<!-- Button to trigger modal --> <!-- Button to trigger modal -->
<a href\="#" class\="button" data-open\="duyuruModal"\>Daha Fazla Bilgi</a\> <a href\="#" class\="button" data-open\="duyuruModal"\>Daha Fazla Bilgi</a\>
@@ -160,16 +177,17 @@ Foundation ile basit **modal pencereler** ve **accordion** gibi interaktif özel
<!-- Foundation Scripts --> <!-- Foundation Scripts -->
<script src\="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"\></script\> <script src\="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"\></script\>
<script\> $(document).foundation();</script\> <script\> $(document).foundation();</script\>
```
Burada reveal sınıfını kullanarak bir modal pencere oluşturuyoruz. data-open özelliği ile, butona tıklandığında ilgili modal pencerenin açılmasını sağlıyoruz. Burada reveal sınıfını kullanarak bir modal pencere oluşturuyoruz. data-open özelliği ile, butona tıklandığında ilgili modal pencerenin açılmasını sağlıyoruz.
## 4\. Foundation Öğrenmek İçin İpuçları ## 4\. Foundation Öğrenmek İçin İpuçları
* **Resmi Dokümantasyon:** [https://get.foundation/](https://get.foundation/) - **Resmi Dokümantasyon:** [https://get.foundation/](https://get.foundation/)
* **Flexbox Kullanımı:** Flexbox ile düzenleme yapmayı öğrenmelesin, Foundation ile çok güçlü düzenler oluşturabilirsin. - **Flexbox Kullanımı:** Flexbox ile düzenleme yapmayı öğrenmelesin, Foundation ile çok güçlü düzenler oluşturabilirsin.
* **Proje Bileşenleri:** Formlar, butonlar, modal pencereler gibi bileşenleri kullanarak projeni hızlıca inşa et. Kendine bir tasarım, bir proje belirle ve onu foundation ile inşa et. - **Proje Bileşenleri:** Formlar, butonlar, modal pencereler gibi bileşenleri kullanarak projeni hızlıca inşa et. Kendine bir tasarım, bir proje belirle ve onu foundation ile inşa et.
* **Responsive Tasarımlar Yap:** Foundation’ın responsive özelliklerini keşfederek, sitenizin tüm cihazlarla uyumlu olmasını sağlayın. Ne kadar çok pratik yaparsanız o kadar hızlanır ve aşina olursunuz. - **Responsive Tasarımlar Yap:** Foundation’ın responsive özelliklerini keşfederek, sitenizin tüm cihazlarla uyumlu olmasını sağlayın. Ne kadar çok pratik yaparsanız o kadar hızlanır ve aşina olursunuz.
* **Özelleştirme Yap:** Foundation’un css dosyalarını özelleştirerek, projene özel bir tema oluştur. Dosyaları kurcalamak foundation’ı çok daha iyi anlamana sebep olacaktır. - **Özelleştirme Yap:** Foundation’un css dosyalarını özelleştirerek, projene özel bir tema oluştur. Dosyaları kurcalamak foundation’ı çok daha iyi anlamana sebep olacaktır.
## Kapanış ## Kapanış
content/blog/css-frameworkleri-tan-yoruz-3-b-l-m-bulma.md
+30 -16
View File
@@ -12,7 +12,6 @@ canonicalUrl: "https://medium.com/@poyrazavsever/css-frameworkleri-tan%C4%B1yoru
# CSS Frameworkleri Tanıyoruz | 3. Bölüm: Bulma # CSS Frameworkleri Tanıyoruz | 3. Bölüm: Bulma
![](/blog/images/css-frameworkleri-tan-yoruz-3-b-l-m-bulma-img-2.jpg) ![](/blog/images/css-frameworkleri-tan-yoruz-3-b-l-m-bulma-img-2.jpg)
Bu seride amacımız, popüler CSS framework’lerini sade bir dille tanıtmak, nasıl kullanılacaklarını göstermek ve küçük projelerle öğrenmeyi desteklemek. İlk iki bölümde **Bootstrap** ve **Foundation** ile temel yapıları öğrendik. Şimdi sırada, sadeliği ve esnekliğiyle öne çıkan **Bulma** var. Açıkçası ben uzun zamandır **Bulma’yı** incelemek istiyordum. Bugüne nasip oldu. Bu seride amacımız, popüler CSS framework’lerini sade bir dille tanıtmak, nasıl kullanılacaklarını göstermek ve küçük projelerle öğrenmeyi desteklemek. İlk iki bölümde **Bootstrap** ve **Foundation** ile temel yapıları öğrendik. Şimdi sırada, sadeliği ve esnekliğiyle öne çıkan **Bulma** var. Açıkçası ben uzun zamandır **Bulma’yı** incelemek istiyordum. Bugüne nasip oldu.
@@ -33,23 +32,27 @@ Bulma’nın temel felsefesi, “**kodu anlamak kolay olmalı**” yaklaşımıd
Bulma’nın layout sistemi tamamen Flexbox üzerine kuruludur. Bu sayede hem yatay hem de dikey hizalama işlemleri oldukça esnektir. Karmaşık grid yapıları bile birkaç satır sınıf ile kolayca oluşturulabilir. Bulma’nın layout sistemi tamamen Flexbox üzerine kuruludur. Bu sayede hem yatay hem de dikey hizalama işlemleri oldukça esnektir. Karmaşık grid yapıları bile birkaç satır sınıf ile kolayca oluşturulabilir.
```html
<div class\="columns"\> <div class\="columns"\>
<div class\="column"\>İçerik 1</div\> <div class\="column"\>İçerik 1</div\>
<div class\="column"\>İçerik 2</div\> <div class\="column"\>İçerik 2</div\>
</div\> </div\>
```
### 1.2 - Kolay Öğrenilebilir Sınıf Sistemi ### 1.2 - Kolay Öğrenilebilir Sınıf Sistemi
Sınıf isimleri açık ve anlamlıdır: Sınıf isimleri açık ve anlamlıdır:
* `is-primary`, `is-success`, `is-warning` gibi görsel sınıflar, bir bakışta ne işe yaradığını belli eder. - `is-primary`, `is-success`, `is-warning` gibi görsel sınıflar, bir bakışta ne işe yaradığını belli eder.
* `has-text-centered`, `is-fullwidth`, `is-size-4` gibi yapılar, stil vermek için CSS yazmadan işleri halletmenizi sağlar. - `has-text-centered`, `is-fullwidth`, `is-size-4` gibi yapılar, stil vermek için CSS yazmadan işleri halletmenizi sağlar.
### 1.3 - Responsive Tasarımlarda Büyük Kolaylık ### 1.3 - Responsive Tasarımlarda Büyük Kolaylık
Mobil öncelikli yaklaşımı benimseyen Bulma, farklı ekran boyutları için özelleştirme yapmayı oldukça kolaylaştırır. Örneğin: Mobil öncelikli yaklaşımı benimseyen Bulma, farklı ekran boyutları için özelleştirme yapmayı oldukça kolaylaştırır. Örneğin:
<div class\="column is-full-mobile is-half-tablet is-one-third-desktop"\> ```html
<div class\="column is-full-mobile is-half-tablet is-one-third-desktop" \></div>
```
Bu yapı, mobilde tam genişlik, tablette yarım, masaüstünde üçte bir genişlik anlamına gelir. Bu yapı, mobilde tam genişlik, tablette yarım, masaüstünde üçte bir genişlik anlamına gelir.
@@ -71,24 +74,33 @@ Bulma’yı en hızlı şekilde projene dahil etmek için **CDN** (Content Deliv
İhtiyacın olan tek şey HTML dosyanıza şu satırı eklemek: İhtiyacın olan tek şey HTML dosyanıza şu satırı eklemek:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"\> ```html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
\
/>
```
### 2.2- npm ile Kurulum ### 2.2- npm ile Kurulum
Projenin bir Node.js tabanlı yapısı varsa, npm ile Bulma’yı projenize dahil edebilirsin. Bu, özellikle projeyi daha profesyonel şekilde yönetmek isteyenler için iyi bir seçenek. Adımlar: Projenin bir Node.js tabanlı yapısı varsa, npm ile Bulma’yı projenize dahil edebilirsin. Bu, özellikle projeyi daha profesyonel şekilde yönetmek isteyenler için iyi bir seçenek. Adımlar:
1 — Projende npm’i başlat: 1 — Projende npm’i başlat:
```bash
npm init -y npm init -y
```
2 — Bulma’yı kur: 2 — Bulma’yı kur:
```bash
npm install bulma npm install bulma
```
3 — `node_modules` klasöründen Bulma stil dosyasını projene import et: 3 — `node_modules` klasöründen Bulma stil dosyasını projene import et:
@import 'node\_modules/bulma/css/bulma.min.css'; @import 'node_modules/bulma/css/bulma.min.css';
Bu yöntemle, projenin gereksinimlerine göre daha esnek bir kurulum yapmış olursun. Ayrıca, Bulma’nın özelleştirilmiş sürümleri için Sass kullanabilirsin. Bu yöntemle, projenin gereksinimlerine göre daha esnek bir kurulum yapmış olursun. Ayrıca, Bulma’nın özelleştirilmiş sürümleri için Sass kullanabilirsin.
@@ -98,7 +110,7 @@ Bulma, Sass ile özelleştirilebilirsin. Özellikle tasarımın bazı kısımlar
1- Sass dosyasını import et: 1- Sass dosyasını import et:
@import 'node\_modules/bulma/bulma'; @import 'node_modules/bulma/bulma';
2- Bulma’nın sunduğu değişkenleri ve mixin’leri kullanarak renk, yazı tipi, buton boyutları gibi tasarım öğelerini özelleştirebilirsin. Örneğin: 2- Bulma’nın sunduğu değişkenleri ve mixin’leri kullanarak renk, yazı tipi, buton boyutları gibi tasarım öğelerini özelleştirebilirsin. Örneğin:
@@ -116,6 +128,7 @@ Bu projede, temel HTML yapısını kullanarak Bulma framework’ü ile şık bir
Öncelikle, temel HTML yapısını oluşturalım. Bulma’nın sunduğu `hero` sınıfını kullanarak bir başlık bölümü ekleyeceğiz ve altında birkaç kart bileşeni olacak. Öncelikle, temel HTML yapısını oluşturalım. Bulma’nın sunduğu `hero` sınıfını kullanarak bir başlık bölümü ekleyeceğiz ve altında birkaç kart bileşeni olacak.
```html
<!DOCTYPE html\> <!DOCTYPE html\>
<html lang\="en"\> <html lang\="en"\>
<head\> <head\>
@@ -183,27 +196,28 @@ Bu projede, temel HTML yapısını kullanarak Bulma framework’ü ile şık bir
</body\> </body\>
</html\> </html\>
```
### 2\. Açıklamalar ### 2\. Açıklamalar
* **Hero Section**: Bulma’nın `hero` sınıfı ile ekranın tamamını kaplayan bir başlık bölümümüz var. Burada `is-primary` sınıfı, başlık kısmına ana renk tonunu verir - **Hero Section**: Bulma’nın `hero` sınıfı ile ekranın tamamını kaplayan bir başlık bölümümüz var. Burada `is-primary` sınıfı, başlık kısmına ana renk tonunu verir
* **Feature Section**: Bu bölümde üç adet kart kullanıyoruz. Her kart, bir özellik tanıtımı yapacak şekilde tasarlandı. `columns` sınıfı ile kartları hizalıyoruz. - **Feature Section**: Bu bölümde üç adet kart kullanıyoruz. Her kart, bir özellik tanıtımı yapacak şekilde tasarlandı. `columns` sınıfı ile kartları hizalıyoruz.
* **Footer Section**: Sayfanın alt kısmında, sayfa hakkında kısa bir bilgi veren basit bir footer bulunuyor. - **Footer Section**: Sayfanın alt kısmında, sayfa hakkında kısa bir bilgi veren basit bir footer bulunuyor.
### 3\. CSS Özelleştirmeleri (isteğe bağlı) ### 3\. CSS Özelleştirmeleri (isteğe bağlı)
Eğer özelleştirmek istersen, Bulma’nın sunduğu renkleri veya tasarım ögelerini değiştirebilirsin. Örneğin, `hero` kısmının rengini değiştirebilir veya kartların stilini özelleştirebilirsin. Eğer özelleştirmek istersen, Bulma’nın sunduğu renkleri veya tasarım ögelerini değiştirebilirsin. Örneğin, `hero` kısmının rengini değiştirebilir veya kartların stilini özelleştirebilirsin.
<section class\="hero is-link is-fullheight"\> ```html
<section class\="hero is-link is-fullheight" \></section>
```
### 4\. Responsive Tasarım ### 4\. Responsive Tasarım
Bulma, mobil öncelikli tasarım sunar. Bu nedenle tasarım, mobil cihazlarda düzgün bir şekilde görüntülenir. `columns` sınıfı ve `is-multiline` sayesinde, ekran boyutuna göre kartlar düzgün bir şekilde yerleşir. Küçük ekranlarda her kart bir satıra düşer, büyük ekranlarda ise yan yana yer alırlar. Bulma, mobil öncelikli tasarım sunar. Bu nedenle tasarım, mobil cihazlarda düzgün bir şekilde görüntülenir. `columns` sınıfı ve `is-multiline` sayesinde, ekran boyutuna göre kartlar düzgün bir şekilde yerleşir. Küçük ekranlarda her kart bir satıra düşer, büyük ekranlarda ise yan yana yer alırlar.
![](/blog/images/css-frameworkleri-tan-yoruz-3-b-l-m-bulma-img-3.jpg) ![](/blog/images/css-frameworkleri-tan-yoruz-3-b-l-m-bulma-img-3.jpg)
![](/blog/images/css-frameworkleri-tan-yoruz-3-b-l-m-bulma-img-4.jpg) ![](/blog/images/css-frameworkleri-tan-yoruz-3-b-l-m-bulma-img-4.jpg)
## Sonuç ## Sonuç
@@ -212,5 +226,5 @@ Bu projede, Bulma’nın **kolay kullanımı**, **responsive özellikleri** ve *
### Daha İleri Gitmek İçin ### Daha İleri Gitmek İçin
* Bulma’nın **belgelerini** ([bulma.io](https://www.bulma.io)) inceleyerek daha fazla bileşen ve özelleştirme hakkında bilgi edinebilirsin. - Bulma’nın **belgelerini** ([bulma.io](https://www.bulma.io)) inceleyerek daha fazla bileşen ve özelleştirme hakkında bilgi edinebilirsin.
* Bulma’yı projende Sass ile kullanarak stil dosyalarını daha detaylı şekilde yönetebilirsin. - Bulma’yı projende Sass ile kullanarak stil dosyalarını daha detaylı şekilde yönetebilirsin.
content/blog/css-frameworkleri-tan-yoruz-4-b-l-m-chakra-ui.md
+30
View File
@@ -38,18 +38,26 @@ Chakra UI, yalnızca **React** projeleriyle çalışır. Bu nedenle, öncelikle
### 2.1. React projesi oluştur (Vite ile öneriyorum) ### 2.1. React projesi oluştur (Vite ile öneriyorum)
```bash
npm create vite@latest my\-chakra-app -- --template react npm create vite@latest my\-chakra-app -- --template react
```
cd my\-chakra-app cd my\-chakra-app
```bash
npm install npm install
```
veya veya
```bash
npx create-react-app my\-chakra-app npx create-react-app my\-chakra-app
```
cd my\-chakra-app cd my\-chakra-app
### 2.2. Chakra UI’yi yükle ### 2.2. Chakra UI’yi yükle
```bash
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
```
Burada yüklediğimiz framer-motion doc ‘da zorunlu koşulmuyor fakat tavsiye ediyorum. Burada yüklediğimiz framer-motion doc ‘da zorunlu koşulmuyor fakat tavsiye ediyorum.
@@ -57,28 +65,34 @@ Burada yüklediğimiz framer-motion doc ‘da zorunlu koşulmuyor fakat tavsiye
`main.jsx` (veya `index.js`) dosyanı şu şekilde güncelle: `main.jsx` (veya `index.js`) dosyanı şu şekilde güncelle:
```ts
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom/client' import ReactDOM from 'react-dom/client'
import { ChakraProvider } from '@chakra-ui/react' import { ChakraProvider } from '@chakra-ui/react'
import App from './App' import App from './App'
```
ReactDOM.createRoot(document.getElementById('root')).render( ReactDOM.createRoot(document.getElementById('root')).render(
```html
<React.StrictMode\> <React.StrictMode\>
<ChakraProvider\> <ChakraProvider\>
<App /> <App />
</ChakraProvider\> </ChakraProvider\>
</React.StrictMode\> </React.StrictMode\>
```
) )
### Artık hazırsın! ### Artık hazırsın!
Chakra UI bileşenlerini kullanmaya başlayabilirsin. Örnek: Chakra UI bileşenlerini kullanmaya başlayabilirsin. Örnek:
```tsx
import { Button } from '@chakra-ui/react' import { Button } from '@chakra-ui/react'
function MyButton() { function MyButton() {
return <Button colorScheme\="teal"\>Merhaba Chakra!</Button\> return <Button colorScheme\="teal"\>Merhaba Chakra!</Button\>
} }
```
Bunun çalışıp çalışmadığını kontrol et. Eğer çalışıyorsa sağlıklı bir şekilde yüklemişsindir. Bunun çalışıp çalışmadığını kontrol et. Eğer çalışıyorsa sağlıklı bir şekilde yüklemişsindir.
@@ -89,7 +103,9 @@ Bu küçük projede, Chakra UI bileşenleriyle şık ve responsive bir **profil
* `Box`, `Image`, `Text`, `Stack`, `Button`, `Flex`, `Avatar` * `Box`, `Image`, `Text`, `Stack`, `Button`, `Flex`, `Avatar`
* Chakra UI’nin **temaya dayalı renk sistemi** ve **spacing sistemini** kullanacağız. * Chakra UI’nin **temaya dayalı renk sistemi** ve **spacing sistemini** kullanacağız.
```ts
import { import {
```
Box, Box,
Flex, Flex,
Avatar, Avatar,
@@ -99,10 +115,12 @@ import {
useColorModeValue, useColorModeValue,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
```tsx
function ProfileCard() { function ProfileCard() {
return ( return (
<Flex align\="center" justify\="center" minH\="100vh" bg\={useColorModeValue("gray.100", "gray.900")}> <Flex align\="center" justify\="center" minH\="100vh" bg\={useColorModeValue("gray.100", "gray.900")}>
<Box <Box
```
maxW\="sm" maxW\="sm"
w\="full" w\="full"
bg\={useColorModeValue("white", "gray.800")} bg\={useColorModeValue("white", "gray.800")}
@@ -111,6 +129,7 @@ function ProfileCard() {
p\={6} p\={6}
textAlign\="center" textAlign\="center"
> >
```html
<Avatar size\="xl" src\="https://i.pravatar.cc/300" mb\={4} /> <Avatar size\="xl" src\="https://i.pravatar.cc/300" mb\={4} />
<Text fontSize\="2xl" fontWeight\="bold"\> <Text fontSize\="2xl" fontWeight\="bold"\>
Ayşe Yılmaz Ayşe Yılmaz
@@ -129,13 +148,18 @@ function ProfileCard() {
</Box\> </Box\>
</Flex\> </Flex\>
); );
```
} }
```ts
export default ProfileCard; export default ProfileCard;
```
### 1\. `Flex` ### 1\. `Flex`
```html
<Flex align\="center" justify\="center" minH\="100vh" bg\={...}\> <Flex align\="center" justify\="center" minH\="100vh" bg\={...}\>
```
Sayfanın tamamında kartı **ortalamak** için kullanılıyoruz. Sayfanın tamamında kartı **ortalamak** için kullanılıyoruz.
@@ -146,6 +170,7 @@ Sayfanın tamamında kartı **ortalamak** için kullanılıyoruz.
### 2\. `Box` ### 2\. `Box`
```html
<Box <Box
maxW\="sm" maxW\="sm"
w\="full" w\="full"
@@ -155,6 +180,7 @@ Sayfanın tamamında kartı **ortalamak** için kullanılıyoruz.
p\={6} p\={6}
textAlign\="center" textAlign\="center"
\> \>
```
Tüm profil kartının çerçevesini oluşturuyor bu eleman. Atr ‘ları ise: Tüm profil kartının çerçevesini oluşturuyor bu eleman. Atr ‘ları ise:
@@ -167,7 +193,9 @@ Tüm profil kartının çerçevesini oluşturuyor bu eleman. Atr ‘ları ise:
### 3\. `Avatar` ### 3\. `Avatar`
```html
<Avatar size\="xl" src\="https://i.pravatar.cc/300" mb\={4} /> <Avatar size\="xl" src\="https://i.pravatar.cc/300" mb\={4} />
```
Adından da anlaşılacağı üzere kullanıcının fotoğrafını gösteriyor. Adından da anlaşılacağı üzere kullanıcının fotoğrafını gösteriyor.
@@ -177,6 +205,7 @@ Adından da anlaşılacağı üzere kullanıcının fotoğrafını gösteriyor.
### 4\. `Stack` + `Button` ### 4\. `Stack` + `Button`
```html
<Stack direction\="row" spacing\={4} justify\="center"\> <Stack direction\="row" spacing\={4} justify\="center"\>
<Button colorScheme\="teal" variant\="solid"\> <Button colorScheme\="teal" variant\="solid"\>
Takip Et Takip Et
@@ -185,6 +214,7 @@ Adından da anlaşılacağı üzere kullanıcının fotoğrafını gösteriyor.
Mesaj Gönder Mesaj Gönder
</Button\> </Button\>
</Stack\> </Stack\>
```
`Stack`: Chakra’nın **dikey veya yatay sıralama** komponentidir. `Stack`: Chakra’nın **dikey veya yatay sıralama** komponentidir.
content/blog/css-frameworkleri-tan-yoruz-5-b-l-m-materialize.md
+20
View File
@@ -42,10 +42,12 @@ Materialize, sadece şık görünüm sunmakla kalmaz; aynı zamanda geliştirici
Materialize, 12 sütunlu, esnek ve mobil uyumlu bir grid sistemi sunar. Bu yapı sayesinde sayfa düzenleri kolayca planlanabilir ve responsive tasarımlar rahatlıkla oluşturulabilir. Materialize, 12 sütunlu, esnek ve mobil uyumlu bir grid sistemi sunar. Bu yapı sayesinde sayfa düzenleri kolayca planlanabilir ve responsive tasarımlar rahatlıkla oluşturulabilir.
```html
<div class\="row"\> <div class\="row"\>
<div class\="col s6"\>Sütun 1</div\> <div class\="col s6"\>Sütun 1</div\>
<div class\="col s6"\>Sütun 2</div\> <div class\="col s6"\>Sütun 2</div\>
</div\> </div\>
```
## 2\. Hazır UI Bileşenleri ## 2\. Hazır UI Bileşenleri
@@ -79,7 +81,9 @@ Bunlar sadece HTML yapısıyla değil, JS üzerinden de kolayca yönetilebilir.
Materialize, Google’ın Material Icons kütüphanesini doğal olarak destekler. Böylece ekstra bir ikon kütüphanesi aramadan projene kolayca ikon ekleyebilirsin. Materialize, Google’ın Material Icons kütüphanesini doğal olarak destekler. Böylece ekstra bir ikon kütüphanesi aramadan projene kolayca ikon ekleyebilirsin.
```html
<i class\="material-icons"\>home</i\> <i class\="material-icons"\>home</i\>
```
Materialize’ın sunduğu bu temel özellikler, hızlı ve etkileyici kullanıcı arayüzleri geliştirmek isteyenler için büyük kolaylık sağlar. Özellikle yeni başlayanlar için kurulum ve kullanım açısından oldukça kullanıcı dostudur. Materialize’ın sunduğu bu temel özellikler, hızlı ve etkileyici kullanıcı arayüzleri geliştirmek isteyenler için büyük kolaylık sağlar. Özellikle yeni başlayanlar için kurulum ve kullanım açısından oldukça kullanıcı dostudur.
@@ -91,11 +95,13 @@ Materialize’ı projene entegre etmek oldukça basit. İster hızlıca denemek
Sadece birkaç satır HTML koduyla Materialize’ı projenize entegre edebilirsiniz: Sadece birkaç satır HTML koduyla Materialize’ı projenize entegre edebilirsiniz:
```html
<!-- Materialize CSS --> <!-- Materialize CSS -->
<link rel\="stylesheet" href\="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"\> <link rel\="stylesheet" href\="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"\>
<!-- Materialize JS --> <!-- Materialize JS -->
<script src\="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"\></script\> <script src\="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"\></script\>
```
Bu yöntem, özellikle küçük çaplı projeler ve hızlı prototipleme için oldukça idealdir. Bu yöntem, özellikle küçük çaplı projeler ve hızlı prototipleme için oldukça idealdir.
@@ -103,16 +109,22 @@ Bu yöntem, özellikle küçük çaplı projeler ve hızlı prototipleme için o
Daha profesyonel bir yapı kurmak istersen, Materialize’ı NPM aracılığıyla kurabilirsin: Daha profesyonel bir yapı kurmak istersen, Materialize’ı NPM aracılığıyla kurabilirsin:
```bash
npm install materialize-css npm install materialize-css
```
Ardından `import` komutlarıyla projenin ilgili dosyalarında kullanabilirsin: Ardından `import` komutlarıyla projenin ilgili dosyalarında kullanabilirsin:
```ts
import "materialize-css/dist/css/materialize.min.css"; import "materialize-css/dist/css/materialize.min.css";
import "materialize-css/dist/js/materialize.min.js"; import "materialize-css/dist/js/materialize.min.js";
```
### Örnek Kullanım ### Örnek Kullanım
```html
<a class\="waves-effect waves-light btn"\>Tıkla</a\> <a class\="waves-effect waves-light btn"\>Tıkla</a\>
```
Materialize’ın `waves-effect` sınıfı sayesinde butona tıklama efekti otomatik olarak eklenir. Küçük ama etkili detaylar ile kullanıcı deneyimi artırılır. Materialize’ın `waves-effect` sınıfı sayesinde butona tıklama efekti otomatik olarak eklenir. Küçük ama etkili detaylar ile kullanıcı deneyimi artırılır.
@@ -128,10 +140,12 @@ Materialize CSS’in güçlü yönlerinden biri, sade yapısı ve örneklerle h
Responsive tasarımlar için kullanılan sütun yapısı oldukça esnektir: Responsive tasarımlar için kullanılan sütun yapısı oldukça esnektir:
```html
<div class\="row"\> <div class\="row"\>
<div class\="col s6"\>Sol Alan</div\> <div class\="col s6"\>Sol Alan</div\>
<div class\="col s6"\>Sağ Alan</div\> <div class\="col s6"\>Sağ Alan</div\>
</div\> </div\>
```
* `s6` sınıfı, küçük ekranlarda 12 sütunluk yapının yarısını kaplayacak şekilde ayarlanır. * `s6` sınıfı, küçük ekranlarda 12 sütunluk yapının yarısını kaplayacak şekilde ayarlanır.
* `row` sınıfı satır başlatır, `col` ise sütunu temsil eder. * `row` sınıfı satır başlatır, `col` ise sütunu temsil eder.
@@ -140,23 +154,28 @@ Responsive tasarımlar için kullanılan sütun yapısı oldukça esnektir:
Kullanıcıya içerik sunmak için oldukça şık bir bileşen: Kullanıcıya içerik sunmak için oldukça şık bir bileşen:
```html
<div class\="card"\> <div class\="card"\>
<div class\="card-content"\> <div class\="card-content"\>
<span class\="card-title"\>Başlık</span\> <span class\="card-title"\>Başlık</span\>
<p\>Bu bir kart açıklamasıdır.</p\> <p\>Bu bir kart açıklamasıdır.</p\>
</div\> </div\>
</div\> </div\>
```
## Butonlar ## Butonlar
Basit ama şık butonlar tek satırda oluşturulabilir: Basit ama şık butonlar tek satırda oluşturulabilir:
```html
<a class\="waves-effect waves-light btn"\>Tıkla</a\> <a class\="waves-effect waves-light btn"\>Tıkla</a\>
```
`waves-effect` ve `waves-light` sınıfları sayesinde tıklama animasyonu eklenir. `waves-effect` ve `waves-light` sınıfları sayesinde tıklama animasyonu eklenir.
## Modal ## Modal
```html
<!-- Tetikleyici --> <!-- Tetikleyici -->
<a class\="waves-effect waves-light btn modal-trigger" href\="#demoModal"\>Aç</a\> <a class\="waves-effect waves-light btn modal-trigger" href\="#demoModal"\>Aç</a\>
@@ -167,6 +186,7 @@ Basit ama şık butonlar tek satırda oluşturulabilir:
<p\>Bu bir modal içeriktir.</p\> <p\>Bu bir modal içeriktir.</p\>
</div\> </div\>
</div\> </div\>
```
Modal’ın çalışması için JS dosyalarının yüklü olması ve `M.Modal.init()` ile başlatılması gerekir. Modal’ın çalışması için JS dosyalarının yüklü olması ve `M.Modal.init()` ile başlatılması gerekir.
content/blog/docker-nedir-kahveni-al-docker-konu-uyoruz.md
+8
View File
@@ -82,13 +82,17 @@ Teori güzel, ama pratik olmadan biraz anlamsız kalıyor her şey. Şimdi Docke
İlk adım olarak sisteminde Docker kurulu mu kontrol et. Terminal veya komut satırına şu komutu yaz: İlk adım olarak sisteminde Docker kurulu mu kontrol et. Terminal veya komut satırına şu komutu yaz:
```bash
docker \--version docker \--version
```
Eğer kurulu değilse [aha da buradan](https://www.docker.com/products/docker-desktop/) Docker Desktop’u indirip yükleyebilirsin. Kurulum sonrası bilgisayarı yeniden başlatmak gerekebilir. Eğer kurulu değilse [aha da buradan](https://www.docker.com/products/docker-desktop/) Docker Desktop’u indirip yükleyebilirsin. Kurulum sonrası bilgisayarı yeniden başlatmak gerekebilir.
### 2\. İlk Docker Komutu: Hello World ### 2\. İlk Docker Komutu: Hello World
```bash
docker run hello-world docker run hello-world
```
Bu ne yapar dersen: Bu ne yapar dersen:
@@ -123,11 +127,15 @@ CMD \["python", "app.py"\]
Terminale şunu yaz: Terminale şunu yaz:
```bash
docker build -t merhaba-dunya . docker build -t merhaba-dunya .
```
Uygulamayı çalıştır: Uygulamayı çalıştır:
```bash
docker run merhaba-dunya docker run merhaba-dunya
```
Ve boom! Terminalde şunu göreceksin: Ve boom! Terminalde şunu göreceksin:
content/blog/frontend-testing-ara-lar-jest-ve-cypress-ile-ba-lamak.md
+12
View File
@@ -31,13 +31,17 @@ Peki, Jest’i ne zaman kullanmalısın? Eğer React componentleri üzerinde ça
Kurulum ise oldukça basit. Tek bir komutla Jest’i projene ekleyebilirsin: Kurulum ise oldukça basit. Tek bir komutla Jest’i projene ekleyebilirsin:
```bash
npm install \--save-dev jest npm install \--save-dev jest
```
Kurulumdan sonra, Jest’i kullanmaya başlamak için birkaç temel ayar yapman yeterli. Şimdi, basit bir test örneğiyle devam edelim. Kurulumdan sonra, Jest’i kullanmaya başlamak için birkaç temel ayar yapman yeterli. Şimdi, basit bir test örneğiyle devam edelim.
```ts
function toplama(a, b) { function toplama(a, b) {
return a + b; return a + b;
} }
```
Bu fonksiyonu test etmek için Jest ile şöyle bir test yazabilirsin: Bu fonksiyonu test etmek için Jest ile şöyle bir test yazabilirsin:
@@ -74,12 +78,16 @@ Bazen test ettiğin kod, dış bağımlılıklara (örneğin, API isteklerine) i
jest.mock('axios'); // axios kütüphanesini mockladık jest.mock('axios'); // axios kütüphanesini mockladık
it('API çağrısı başarılı olursa veriyi döndürmeli', async () => { it('API çağrısı başarılı olursa veriyi döndürmeli', async () => {
```ts
const veriler = { data: { isim: 'Ali' } }; const veriler = { data: { isim: 'Ali' } };
```
axios.get.mockResolvedValue(veriler); // Mock cevap axios.get.mockResolvedValue(veriler); // Mock cevap
```ts
const cevap = await apiCagir(); // Api istek atıyoruz const cevap = await apiCagir(); // Api istek atıyoruz
expect(cevap.isim).toBe('Ali'); expect(cevap.isim).toBe('Ali');
}); });
```
## Snapshot Testing ## Snapshot Testing
@@ -88,6 +96,7 @@ Snapshot testing, bileşenlerinin görsel çıktılarının kaydedilmesi ve daha
Bir bileşeni snapshot ile test etmek için, şu şekilde yazabilirsin: Bir bileşeni snapshot ile test etmek için, şu şekilde yazabilirsin:
```tsx
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import MyComponent from './MyComponent'; import MyComponent from './MyComponent';
@@ -95,6 +104,7 @@ test('MyComponent snapshot testi', () => {
const { asFragment } = render(<MyComponent />); const { asFragment } = render(<MyComponent />);
expect(asFragment()).toMatchSnapshot(); // Componentin çıktısını kaydediyor expect(asFragment()).toMatchSnapshot(); // Componentin çıktısını kaydediyor
}); });
```
## Cypress Nedir? ## Cypress Nedir?
@@ -107,7 +117,9 @@ Cypress ile test yazmak oldukça keyifli, çünkü her şey anlık geri bildirim
Cypress’i projene eklemek de oldukça basit. Tek bir komutla kurulumunu gerçekleştirebilirsin: Cypress’i projene eklemek de oldukça basit. Tek bir komutla kurulumunu gerçekleştirebilirsin:
```bash
npm install cypress \--save-dev npm install cypress \--save-dev
```
Kurulumdan sonra, `npx cypress open` komutunu çalıştırarak Cypress arayüzünü açabilirsin. Buradan test senaryolarını kolayca yazmaya başlayabilirsin. Kurulumdan sonra, `npx cypress open` komutunu çalıştırarak Cypress arayüzünü açabilirsin. Buradan test senaryolarını kolayca yazmaya başlayabilirsin.
content/blog/next-js-15-gelmi-neler-de-i-ti-peki.md
+12
View File
@@ -66,7 +66,9 @@ Aşağıdaki API’ler artık asenkron çalışıyor:
Bu API’leri kullanırken `await` yazman şart. Yani şöyle şeyler artık gerekiyor: Bu API’leri kullanırken `await` yazman şart. Yani şöyle şeyler artık gerekiyor:
```ts
const cookies = await cookies() const cookies = await cookies()
```
## Nereleri etkiliyor? ## Nereleri etkiliyor?
@@ -83,7 +85,9 @@ Yani bu dosyaların içinde yukarıdaki API’leri kullanıyorsan hepsini async
Neyse ki Next.js ekibi bizi unutmamış ve bu geçişi kolaylaştırmak için bir araç sunmuş: Neyse ki Next.js ekibi bizi unutmamış ve bu geçişi kolaylaştırmak için bir araç sunmuş:
```bash
npx @next/codemod@latest async\-request\-apis npx @next/codemod@latest async\-request\-apis
```
Bu komut sayesinde projenin içindeki eski kullanım biçimleriniz otomatik olarak async hale getirilebiliyor. Yine de kodu gözden geçirmek şart, çünkü her proje özelinde ufak dokunuşlar gerekebilir. Bu komut sayesinde projenin içindeki eski kullanım biçimleriniz otomatik olarak async hale getirilebiliyor. Yine de kodu gözden geçirmek şart, çünkü her proje özelinde ufak dokunuşlar gerekebilir.
@@ -107,7 +111,9 @@ Bu durum, bazı projeler için performans düşüşüne neden olabilir. Ama mera
Eğer bir verinin cache’lenmesini ve static hale gelmesini istiyorsan artık bunu **açıkça belirtmen gerekiyor**. Eğer bir verinin cache’lenmesini ve static hale gelmesini istiyorsan artık bunu **açıkça belirtmen gerekiyor**.
```ts
export const dynamic = 'force-static' export const dynamic = 'force-static'
```
veya daha esnek bir yapı istersen, `next.config.js` dosyasına aşağıdaki gibi bir ayar da ekleyebilirsin: veya daha esnek bir yapı istersen, `next.config.js` dosyasına aşağıdaki gibi bir ayar da ekleyebilirsin:
@@ -174,7 +180,9 @@ Next.js projeni yeni sürüme geçirirken en büyük yardımcın olacak araç bu
Kullanımı çok basit: Kullanımı çok basit:
```bash
npx @next/codemod@latest async\-request\-apis npx @next/codemod@latest async\-request\-apis
```
Sadece async dönüşümü değil, başka dönüşümler için de bu aracı kullanabilirsin. Kod tabanını hızlıca yeni sürüme uygun hale getiriyor. Sadece async dönüşümü değil, başka dönüşümler için de bu aracı kullanabilirsin. Kod tabanını hızlıca yeni sürüme uygun hale getiriyor.
@@ -215,11 +223,15 @@ Bu dosya, uygulamanın sunucu tarafında gerçekleşen istekleri izlemeni ve ger
* Hata loglama sistemleri (örn: request bazlı loglama) * Hata loglama sistemleri (örn: request bazlı loglama)
// instrumentation.ts // instrumentation.ts
```ts
export function register() { export function register() {
```
console.log('Server started') console.log('Server started')
} }
```ts
export function onRequestError(error) { export function onRequestError(error) {
```
console.error('Request error:', error) console.error('Request error:', error)
} }
content/blog/next-js-ile-edge-functions-h-zl-web-uygulamalar-nas-l-geli-tirilir.md
+16
View File
@@ -55,12 +55,14 @@ Bu yaklaşım şu avantajları sağlar:
* **Daha iyi kullanıcı deneyimi:** Sayfalar ve API yanıtları daha hızlı yüklenir. * **Daha iyi kullanıcı deneyimi:** Sayfalar ve API yanıtları daha hızlı yüklenir.
* **Global ölçeklenebilirlik:** Dünyanın her yerindeki kullanıcılar benzer hızda erişim sağlar. * **Global ölçeklenebilirlik:** Dünyanın her yerindeki kullanıcılar benzer hızda erişim sağlar.
```ts
export const runtime = 'edge'; export const runtime = 'edge';
export async function GET(req: Request) { export async function GET(req: Request) {
const country = req.headers.get('x-vercel-ip-country') || 'US'; const country = req.headers.get('x-vercel-ip-country') || 'US';
return new Response( return new Response(
```
JSON.stringify({ currency: country === 'TR' ? '₺' : '$' }), JSON.stringify({ currency: country === 'TR' ? '₺' : '$' }),
{ headers: { 'Content-Type': 'application/json' } } { headers: { 'Content-Type': 'application/json' } }
); );
@@ -79,10 +81,12 @@ Next.js, Edge Functions kullanmayı son derece kolay hale getiriyor sağ olsun.
Örnek olarak `app/api/hello/route.ts` dosyası oluşturalım: Örnek olarak `app/api/hello/route.ts` dosyası oluşturalım:
```ts
export const runtime = 'edge'; export const runtime = 'edge';
export async function GET() { export async function GET() {
return new Response( return new Response(
```
JSON.stringify({ message: 'Merhaba Edge!' }), JSON.stringify({ message: 'Merhaba Edge!' }),
{ headers: { 'Content-Type': 'application/json' } } { headers: { 'Content-Type': 'application/json' } }
); );
@@ -100,6 +104,7 @@ Next.js middleware yapısı **varsayılan olarak edge üzerinde çalışır.**
Örneğin kullanıcıyı oturum durumuna göre yönlendirmek için: Örneğin kullanıcıyı oturum durumuna göre yönlendirmek için:
// middleware.ts // middleware.ts
```ts
import { NextResponse } from 'next/server'; import { NextResponse } from 'next/server';
export function middleware(req: Request) { export function middleware(req: Request) {
@@ -109,6 +114,7 @@ export function middleware(req: Request) {
} }
return NextResponse.next(); return NextResponse.next();
} }
```
Bu middleware, kullanıcıya en yakın edge node’da çalışır, bu sayede yönlendirmeler çok daha hızlıdır. Bu middleware, kullanıcıya en yakın edge node’da çalışır, bu sayede yönlendirmeler çok daha hızlıdır.
@@ -130,6 +136,7 @@ Burada amaç kullanıcının ülkesi veya şehri bazında anında içerik/pref s
_Örnek (app/api/prefs/route.ts):_ _Örnek (app/api/prefs/route.ts):_
```ts
export const runtime = 'edge'; export const runtime = 'edge';
export async function GET(req: Request) { export async function GET(req: Request) {
@@ -139,6 +146,7 @@ export async function GET(req: Request) {
headers: { 'Content-Type': 'application/json' } headers: { 'Content-Type': 'application/json' }
}); });
} }
```
Bu kod ile Türkiye’den gelen kullanıcı **₺** görürken, ABD’den gelen kullanıcı **$** görecektir. Bu kod ile Türkiye’den gelen kullanıcı **₺** görürken, ABD’den gelen kullanıcı **$** görecektir.
@@ -146,6 +154,7 @@ Bu kod ile Türkiye’den gelen kullanıcı **₺** görürken, ABD’den gelen
Amacımız yeni bir özelliği kullanıcıların belirli bir yüzdesine göstermek. Mesela bir şeyi test etmek istiyor ya da bölge bazlı özellik geliştirmek istiyor olabilirsiniz. Amacımız yeni bir özelliği kullanıcıların belirli bir yüzdesine göstermek. Mesela bir şeyi test etmek istiyor ya da bölge bazlı özellik geliştirmek istiyor olabilirsiniz.
```ts
import { NextResponse } from 'next/server'; import { NextResponse } from 'next/server';
export const config = { matcher: \['/'\] }; export const config = { matcher: \['/'\] };
@@ -155,9 +164,12 @@ export function middleware(req: Request) {
const variant = /variant=(A|B)/.exec(cookie)?.\[1\] || (Math.random() < 0.5 ? 'A' : 'B'); const variant = /variant=(A|B)/.exec(cookie)?.\[1\] || (Math.random() < 0.5 ? 'A' : 'B');
const res = NextResponse.next(); const res = NextResponse.next();
```
res.headers.append('Set-Cookie', \`variant=${variant}; Path=/; Max-Age=2592000; SameSite=Lax\`); res.headers.append('Set-Cookie', \`variant=${variant}; Path=/; Max-Age=2592000; SameSite=Lax\`);
```ts
return res; return res;
} }
```
Bu örnek kullanıcıya A veya B varyantını atar ve tüm isteklerde tutarlı kalmasını sağlar. Bu örnek kullanıcıya A veya B varyantını atar ve tüm isteklerde tutarlı kalmasını sağlar.
@@ -165,6 +177,7 @@ Bu örnek kullanıcıya A veya B varyantını atar ve tüm isteklerde tutarlı k
Burada ise amacımız yeni özellikleri %10 / %50 gibi kademelerle yayına almak. Yukarıdaki ile benzer sebeplerden bunu yapmak istiyor olabilirsiniz. Burada ise amacımız yeni özellikleri %10 / %50 gibi kademelerle yayına almak. Yukarıdaki ile benzer sebeplerden bunu yapmak istiyor olabilirsiniz.
```ts
export const runtime = 'edge'; export const runtime = 'edge';
export async function GET() { export async function GET() {
@@ -173,6 +186,7 @@ export async function GET() {
headers: { 'Content-Type': 'application/json' } headers: { 'Content-Type': 'application/json' }
}); });
} }
```
Gerçekte kullanıcı kimliğine göre hash alırsan, aynı kullanıcı her zaman aynı sonucu görür. Gerçekte kullanıcı kimliğine göre hash alırsan, aynı kullanıcı her zaman aynı sonucu görür.
@@ -180,6 +194,7 @@ Gerçekte kullanıcı kimliğine göre hash alırsan, aynı kullanıcı her zama
Okuma ağırlıklı API’leri CDN üzerinde önbelleğe almak için bu tarz bir ihtiyacınız olabilir. Okuma ağırlıklı API’leri CDN üzerinde önbelleğe almak için bu tarz bir ihtiyacınız olabilir.
```ts
export const runtime = 'edge'; export const runtime = 'edge';
export async function GET() { export async function GET() {
@@ -191,6 +206,7 @@ export async function GET() {
} }
}); });
} }
```
Bu sayede kullanıcılar her istekte milisaniyeler içinde yanıt alır. Bu sayede kullanıcılar her istekte milisaniyeler içinde yanıt alır.
content/blog/react-ile-dinamik-bir-kullan-c-profil-sayfas-nas-l-tasarlan-r.md
+8
View File
@@ -79,11 +79,13 @@ src/
* Bir `data.js` dosyası oluşturarak mock veriler eklemek: * Bir `data.js` dosyası oluşturarak mock veriler eklemek:
```ts
export cocst userData = { export cocst userData = {
name: "Poyraz Avsever", name: "Poyraz Avsever",
bio: "Yazılım geliştirici ve Tasarımcı", bio: "Yazılım geliştirici ve Tasarımcı",
photo: "/images/profile.jpg", photo: "/images/profile.jpg",
education: \[ education: \[
```
{ id: 1, degree: "Yazılım Mühendisliği", institution: "OSTİM Teknik Üniversitesi" }, { id: 1, degree: "Yazılım Mühendisliği", institution: "OSTİM Teknik Üniversitesi" },
\], \],
products: \[{ id: 1, name: "CRM Yazılımı", price: "$100" }\], products: \[{ id: 1, name: "CRM Yazılımı", price: "$100" }\],
@@ -99,6 +101,7 @@ export cocst userData = {
### 4.1. ProfileHeader.jsx ### 4.1. ProfileHeader.jsx
```tsx
const ProfileHeader = ({ name, bio, photo }) => ( const ProfileHeader = ({ name, bio, photo }) => (
<div className="profile-header"> <div className="profile-header">
<img src={photo} alt="Profile" /> <img src={photo} alt="Profile" />
@@ -107,9 +110,11 @@ const ProfileHeader = ({ name, bio, photo }) => (
</div> </div>
); );
export default ProfileHeader; export default ProfileHeader;
```
### 4.2. Dinamik Liste Bileşeni: ProductsList.jsx ### 4.2. Dinamik Liste Bileşeni: ProductsList.jsx
```tsx
const ProductsList = ({ products }) => ( const ProductsList = ({ products }) => (
<div className="products-list"> <div className="products-list">
{products.map(product => ( {products.map(product => (
@@ -121,11 +126,13 @@ const ProductsList = ({ products }) => (
</div> </div>
); );
export default ProductsList; export default ProductsList;
```
## 5\. Veri Çekme ve Kullanıcı Arayüzünü Tamamlama ## 5\. Veri Çekme ve Kullanıcı Arayüzünü Tamamlama
* **useEffect** ile veri çekme: * **useEffect** ile veri çekme:
```ts
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import axios from "axios"; import axios from "axios";
@@ -133,6 +140,7 @@ const \[data, setData\] = useState(null);
useEffect(() => { useEffect(() => {
axios.get("/api/user").then(response => setData(response.data)); axios.get("/api/user").then(response => setData(response.data));
```
}, \[\]) }, \[\])
* **Props Drilling** veya **Context API** kullanarak verilerin bileşenlere aktarımı. * **Props Drilling** veya **Context API** kullanarak verilerin bileşenlere aktarımı.
content/blog/rss-ile-bilgi-ak-n-algoritmadan-uzakla-t-r.md
+8
View File
@@ -88,6 +88,7 @@ Aşağıdaki kategorilerden birini seçmen çoğu kullanıcı için yeterlidir.
Bir blog yazılarını programatik olarak RSS’e dökmek istersen, en yalın şablon aşağıdaki gibidir. (RSS 2.0 örneği) Bir blog yazılarını programatik olarak RSS’e dökmek istersen, en yalın şablon aşağıdaki gibidir. (RSS 2.0 örneği)
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
```xml
<rss version\="2.0"\> <rss version\="2.0"\>
<channel\> <channel\>
<title\>Ornek Blog</title\> <title\>Ornek Blog</title\>
@@ -104,6 +105,7 @@ Bir blog yazılarını programatik olarak RSS’e dökmek istersen, en yalın ş
</item\> </item\>
</channel\> </channel\>
</rss\> </rss\>
```
### **Üretim seçenekleri:** ### **Üretim seçenekleri:**
@@ -119,6 +121,7 @@ Aşağıdaki iskelet, birkaç feed’i okuyup son 7 günün başlıklarını top
// package.json: rss-parser ve nodemailer ekleyin // package.json: rss-parser ve nodemailer ekleyin
// npm i - pnpm add - yarn i rss-parser nodemailer // npm i - pnpm add - yarn i rss-parser nodemailer
```ts
const Parser = require('rss-parser'); const Parser = require('rss-parser');
const nodemailer = require('nodemailer'); const nodemailer = require('nodemailer');
const parser = new Parser(); const parser = new Parser();
@@ -126,8 +129,10 @@ const parser = new Parser();
const FEEDS = \[ const FEEDS = \[
'https://ornek.site/rss.xml', 'https://ornek.site/rss.xml',
'https://baska.site/feed' 'https://baska.site/feed'
```
\]; \];
```ts
async function fetchItemsLast7Days() { async function fetchItemsLast7Days() {
const now = new Date(); const now = new Date();
const weekAgo = new Date(now.getTime() - 7\*24\*60\*60\*1000); const weekAgo = new Date(now.getTime() - 7\*24\*60\*60\*1000);
@@ -138,12 +143,14 @@ async function fetchItemsLast7Days() {
for (const item of feed.items) { for (const item of feed.items) {
const d = new Date(item.isoDate || item.pubDate || 0); const d = new Date(item.isoDate || item.pubDate || 0);
if (d >= weekAgo) { if (d >= weekAgo) {
```
items.push({ title: item.title, link: item.link, date: d, source: feed.title }); items.push({ title: item.title, link: item.link, date: d, source: feed.title });
} }
} }
} }
// Tarihe göre yeni → eski // Tarihe göre yeni → eski
```tsx
return items.sort((a, b) => b.date - a.date); return items.sort((a, b) => b.date - a.date);
} }
@@ -173,6 +180,7 @@ function renderHtml(items){
const html = renderHtml(items); const html = renderHtml(items);
if (items.length) await sendEmail(html); if (items.length) await sendEmail(html);
})(); })();
```
> P_oyraz’ın İpucusu: Bunu bir zamanlayıcıyla (cron, GitHub Actions, serverless scheduler) haftada 1 kez tetikle._ > P_oyraz’ın İpucusu: Bunu bir zamanlayıcıyla (cron, GitHub Actions, serverless scheduler) haftada 1 kez tetikle._
content/blog/svelte-ile-i-lk-ad-mlar-react-ve-vueya-kar-h-zl-m.md
+34
View File
@@ -50,6 +50,7 @@ Svelte, özellikle performansın kritik olduğu projelerde (örneğin düşük p
React’ta bir bileşen oluşturmak ve state yönetmek için genellikle `useState` hook'u kullanılır. İşte basit bir sayaç bileşeni örneği: React’ta bir bileşen oluşturmak ve state yönetmek için genellikle `useState` hook'u kullanılır. İşte basit bir sayaç bileşeni örneği:
// React'ta sayaç bileşeni // React'ta sayaç bileşeni
```tsx
import React, { useState } from 'react'; import React, { useState } from 'react';
function Counter() { function Counter() {
const \[count, setCount\] = useState(0); const \[count, setCount\] = useState(0);
@@ -57,12 +58,17 @@ return (
<div> <div>
<p>Count: {count}</p> <p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}> <button onClick={() => setCount(count + 1)}>
```
Increase Increase
```html
</button> </button>
</div> </div>
```
); );
} }
```ts
export default Counter; export default Counter;
```
Burada React’in `useState` hook'u ile state yönetimi sağlanır. `onClick` olayında state güncellenir ve bileşen yeniden render edilir. Peki bunu svelte ile nasıl yapıyoruz? Burada React’in `useState` hook'u ile state yönetimi sağlanır. `onClick` olayında state güncellenir ve bileşen yeniden render edilir. Peki bunu svelte ile nasıl yapıyoruz?
@@ -70,6 +76,7 @@ Burada React’in `useState` hook'u ile state yönetimi sağlanır. `onClick` ol
Svelte’de aynı işlevselliği elde etmek çok daha basit ve doğrudan olur. State yönetimi doğrudan JavaScript değişkenleri üzerinden yapılır ve Svelte reaktif yapısı sayesinde değişiklikler otomatik olarak bileşenleri yeniden render eder: Svelte’de aynı işlevselliği elde etmek çok daha basit ve doğrudan olur. State yönetimi doğrudan JavaScript değişkenleri üzerinden yapılır ve Svelte reaktif yapısı sayesinde değişiklikler otomatik olarak bileşenleri yeniden render eder:
```html
<!-- Svelte'te sayaç bileşeni --> <!-- Svelte'te sayaç bileşeni -->
<script\> let count = 0;</script\> <script\> let count = 0;</script\>
@@ -79,6 +86,7 @@ Svelte’de aynı işlevselliği elde etmek çok daha basit ve doğrudan olur. S
Increase Increase
</button\> </button\>
</div\> </div\>
```
Bu daha büyük projelerde dez avantaj yaratabilir fakat küçük çaplı projelerde sürecin hızlanmasına olanak tanır. Bu daha büyük projelerde dez avantaj yaratabilir fakat küçük çaplı projelerde sürecin hızlanmasına olanak tanır.
@@ -89,6 +97,7 @@ Bu daha büyük projelerde dez avantaj yaratabilir fakat küçük çaplı projel
React’ta bir bileşene `props` geçirerek veri aktarımı şu şekilde yapılır: React’ta bir bileşene `props` geçirerek veri aktarımı şu şekilde yapılır:
// React'ta parent bileşen // React'ta parent bileşen
```tsx
import React from 'react'; import React from 'react';
import Greeting from './Greeting'; import Greeting from './Greeting';
@@ -97,13 +106,16 @@ function App() {
} }
export default App; export default App;
```
// React'ta child bileşen // React'ta child bileşen
```tsx
function Greeting({ name }) { function Greeting({ name }) {
return <p>Hello, {name}!</p>; return <p>Hello, {name}!</p>;
} }
export default Greeting; export default Greeting;
```
Burada `Greeting` bileşenine `props` olarak `name` değerini geçiyoruz ve bu props'u child bileşende kullanıyoruz. Burada `Greeting` bileşenine `props` olarak `name` değerini geçiyoruz ve bu props'u child bileşende kullanıyoruz.
@@ -111,6 +123,7 @@ Burada `Greeting` bileşenine `props` olarak `name` değerini geçiyoruz ve bu p
Svelte’de props kullanımı ise daha basit ve doğrudandır: Svelte’de props kullanımı ise daha basit ve doğrudandır:
```html
<!-- Svelte'te parent bileşen --> <!-- Svelte'te parent bileşen -->
<script\> import Greeting from './Greeting.svelte';</script\> <script\> import Greeting from './Greeting.svelte';</script\>
@@ -120,6 +133,7 @@ Svelte’de props kullanımı ise daha basit ve doğrudandır:
<script\> export let name;</script\> <script\> export let name;</script\>
<p\>Hello, {name}!</p\> <p\>Hello, {name}!</p\>
```
Svelte’de bir değişkeni `export` ederek dışarıdan bileşene veri aktarılabilir. Bu, React'taki `props` yapısına karşılık gelir ve çok daha sade bir kullanım sunar. Aslında yine aynı yere varıyoruz. Daha komplike projelerde tercih edilmeyebilir. Svelte’de bir değişkeni `export` ederek dışarıdan bileşene veri aktarılabilir. Bu, React'taki `props` yapısına karşılık gelir ve çok daha sade bir kullanım sunar. Aslında yine aynı yere varıyoruz. Daha komplike projelerde tercih edilmeyebilir.
@@ -129,6 +143,7 @@ Svelte’de bir değişkeni `export` ederek dışarıdan bileşene veri aktarıl
React’ta formlarda state yönetimi ve event handling biraz daha karmaşık olabilir: React’ta formlarda state yönetimi ve event handling biraz daha karmaşık olabilir:
```tsx
import React, { useState } from 'react'; import React, { useState } from 'react';
function Form() { function Form() {
@@ -147,6 +162,7 @@ function Form() {
} }
export default Form; export default Form;
```
Her input değişikliğinde state güncellenir ve render tetiklenir. Her input değişikliğinde state güncellenir ve render tetiklenir.
@@ -154,12 +170,14 @@ Her input değişikliğinde state güncellenir ve render tetiklenir.
Svelte’de form kontrolü ve event yönetimi ise çok daha basit: Svelte’de form kontrolü ve event yönetimi ise çok daha basit:
```html
<script\> let inputValue = '';</script\> <script\> let inputValue = '';</script\>
<div\> <div\>
<input type\="text" bind:value\={inputValue} /> <input type\="text" bind:value\={inputValue} />
<p\>Input: {inputValue}</p\> <p\>Input: {inputValue}</p\>
</div\> </div\>
```
Svelte’de `bind` ifadesi ile bir input elemanını doğrudan bir değişkene bağlayabilirsiniz. Bu, iki yönlü veri bağlamayı (two-way binding) çok basit hale getirir. Gelin burada ki ana mantığı anladığımıza göre biraz daha Svelte’e odaklanalım ve Svelte’in özelliklerini daha derinlemesine inceleyelim. Svelte’de `bind` ifadesi ile bir input elemanını doğrudan bir değişkene bağlayabilirsiniz. Bu, iki yönlü veri bağlamayı (two-way binding) çok basit hale getirir. Gelin burada ki ana mantığı anladığımıza göre biraz daha Svelte’e odaklanalım ve Svelte’in özelliklerini daha derinlemesine inceleyelim.
@@ -176,20 +194,26 @@ Svelte’de lifecycle metotları, bileşenlerin yaşam döngüsü içinde belirl
Svelte’de bir bileşenin DOM’a eklenmesiyle birlikte yapılacak işlemleri `onMount` fonksiyonu ile tanımlayabilirsiniz: Svelte’de bir bileşenin DOM’a eklenmesiyle birlikte yapılacak işlemleri `onMount` fonksiyonu ile tanımlayabilirsiniz:
```html
<script\> import { onMount } from 'svelte'; <script\> import { onMount } from 'svelte';
```
```ts
let data; let data;
onMount(async () => { onMount(async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/todos/1'); const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
```
data = await res.json(); data = await res.json();
});</script\> });</script\>
```html
<div\> <div\>
{#if data} {#if data}
<p\>{data.title}</p\> <p\>{data.title}</p\>
{/if} {/if}
</div\> </div\>
```
Bu örnekte `onMount`, bileşen DOM’a yerleştiği anda bir API çağrısı yapar ve sonuçları ekranda görüntüler. Bu örnekte `onMount`, bileşen DOM’a yerleştiği anda bir API çağrısı yapar ve sonuçları ekranda görüntüler.
@@ -202,15 +226,19 @@ Svelte’de reaktiviteyi tetiklemek için sadece bir değişkenin değerini gün
**Reaktif İfadeler:** **Reaktif İfadeler:**
```html
<script\> let count = 0; <script\> let count = 0;
let doubled; let doubled;
```
// $: ifadesi, reaktif bir bloğu işaretler // $: ifadesi, reaktif bir bloğu işaretler
$: doubled = count \* 2;</script\> $: doubled = count \* 2;</script\>
```html
<p\>Count: {count}</p\> <p\>Count: {count}</p\>
<p\>Doubled: {doubled}</p\> <p\>Doubled: {doubled}</p\>
<button on:click\={() => count++}>Increase</button\> <button on:click\={() => count++}>Increase</button\>
```
Bu örnekte, `count` değişkeni her arttığında `doubled` reaktif olarak güncellenir ve bu değişiklik ekrana yansır. Bu örnekte, `count` değişkeni her arttığında `doubled` reaktif olarak güncellenir ve bu değişiklik ekrana yansır.
@@ -225,16 +253,22 @@ Svelte, küçük projeler için bileşenler arası veri paylaşımı amacıyla o
Writable store, bileşenler arasında güncellenebilir bir veri paylaşımı sağlar. Aşağıda bir sayaç uygulaması için writable store kullanımını görebilirsiniz: Writable store, bileşenler arasında güncellenebilir bir veri paylaşımı sağlar. Aşağıda bir sayaç uygulaması için writable store kullanımını görebilirsiniz:
```html
<!-- store.js --> <!-- store.js -->
```
```ts
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
export const count = writable(0); export const count = writable(0);
```
```html
<!-- App.svelte --> <!-- App.svelte -->
<script\> import { count } from './store';</script\> <script\> import { count } from './store';</script\>
<p\>Count: {$count}</p\> <p\>Count: {$count}</p\>
<button on:click\={() => count.update(n => n + 1)}>Increase</button\> <button on:click\={() => count.update(n => n + 1)}>Increase</button\>
```
Store değerine erişmek için `$` işaretini kullanarak reaktif bir bağlama yapabilirsiniz. Ayrıca, `count.update()` ile store değerini güncelleyebilirsiniz. Gördüğünüz gibi oldukça basit. Store değerine erişmek için `$` işaretini kullanarak reaktif bir bağlama yapabilirsiniz. Ayrıca, `count.update()` ile store değerini güncelleyebilirsiniz. Gördüğünüz gibi oldukça basit.
content/blog/tailwind-css-ile-tasar-m-s-recini-nas-l-h-zland-rabilirsiniz.md
+6
View File
@@ -35,7 +35,9 @@ CSS de her yeni stil için bir class yazman gerekiyor. Örneğin, bir butonun ar
Tailwind de ise aynı butonu şu şekilde oluşturabilirsin: Tailwind de ise aynı butonu şu şekilde oluşturabilirsin:
```html
<button class\="bg-blue-500 text-white p-4"\>Click Me</button\>h <button class\="bg-blue-500 text-white p-4"\>Click Me</button\>h
```
Yani, her şey HTML içerisinde çok daha hızlı bir şekilde yönetilebiliyor. Bu da stili hızlıca oluşturmanı ve üzerinde anında değişiklik yapmanı sağlıyor. Üstelik terimler daha basite indirgendiği için kafa karışıklığından da kurtuluyoruz. Yani, her şey HTML içerisinde çok daha hızlı bir şekilde yönetilebiliyor. Bu da stili hızlıca oluşturmanı ve üzerinde anında değişiklik yapmanı sağlıyor. Üstelik terimler daha basite indirgendiği için kafa karışıklığından da kurtuluyoruz.
@@ -46,9 +48,11 @@ CSS’de büyük projelerde zamanla stil dosyaları karmaşık hale gelebilir. S
**3- Responsive Tasarım Kolaylığı** **3- Responsive Tasarım Kolaylığı**
CSS de her ekran boyutu için ayrı media query yazman gerekiyor fakat Tailwind’de bu iş çok daha kolay. Örneğin: CSS de her ekran boyutu için ayrı media query yazman gerekiyor fakat Tailwind’de bu iş çok daha kolay. Örneğin:
```html
<div class\="text-sm md:text-lg lg:text-xl"\> <div class\="text-sm md:text-lg lg:text-xl"\>
Responsive Metin Responsive Metin
</div\> </div\>
```
Bu kod, küçük ekranlarda `text-sm`, orta ekranlarda `text-lg`, büyük ekranlarda `text-xl` sınıflarını uygular. Media query yazmaya gerek yok. Bana kalırsa Tailwind’in sağladığı en büyük avantajlardan birisi de bu. Bu kod, küçük ekranlarda `text-sm`, orta ekranlarda `text-lg`, büyük ekranlarda `text-xl` sınıflarını uygular. Media query yazmaya gerek yok. Bana kalırsa Tailwind’in sağladığı en büyük avantajlardan birisi de bu.
@@ -102,9 +106,11 @@ module.exports = {
Tailwind ile responsive tasarımlar oluşturmak çok basittir. Sınıfların başına `sm:`, `md:`, `lg:` gibi prefix'ler ekleyerek farklı ekran boyutlarına göre stilleri kolayca tanımlayabilirsin. Bu, mobil uyumluluğu hızla sağlamanın en etkili yollarından biri. Web sitesini tasarlamaya başlarken mobil versiyonlardan başlarsan daha rahat edersin. **Küçükten büyüğe** Tailwind ile responsive tasarımlar oluşturmak çok basittir. Sınıfların başına `sm:`, `md:`, `lg:` gibi prefix'ler ekleyerek farklı ekran boyutlarına göre stilleri kolayca tanımlayabilirsin. Bu, mobil uyumluluğu hızla sağlamanın en etkili yollarından biri. Web sitesini tasarlamaya başlarken mobil versiyonlardan başlarsan daha rahat edersin. **Küçükten büyüğe**
```html
<div class\="text-sm md:text-lg lg:text-xl"\> <div class\="text-sm md:text-lg lg:text-xl"\>
Responsive Metin Responsive Metin
</div\> </div\>
```
6\. **Tailwind Eklentilerini Keşfet** 6\. **Tailwind Eklentilerini Keşfet**
content/blog/three-js-3-boyutlu-d-nyaya-merhaba.md
+24
View File
@@ -35,7 +35,9 @@ Three.js, **JavaScript ile tarayıcı üzerinde 3D grafikler oluşturmak için k
Three.js, bir sahne (scene) oluşturmanıza olanak tanır. Sahne, 3D dünyanızı barındıran bir konteyner gibidir. İçine nesneler, ışıklar ve kameralar ekleyebilirsiniz. Three.js, bir sahne (scene) oluşturmanıza olanak tanır. Sahne, 3D dünyanızı barındıran bir konteyner gibidir. İçine nesneler, ışıklar ve kameralar ekleyebilirsiniz.
```ts
const scene = new THREE.Scene(); const scene = new THREE.Scene();
```
### 2\. Kameralar ### 2\. Kameralar
@@ -44,16 +46,20 @@ Kameralar, 3D sahnenizi “görmeyi” sağlar. Three.js’de iki ana kamera tü
* **PerspectiveCamera**: İnsan gözünün görme şekline benzer. Uzak nesneler daha küçük görünür. * **PerspectiveCamera**: İnsan gözünün görme şekline benzer. Uzak nesneler daha küçük görünür.
* **OrthographicCamera**: Nesneler uzaklıklarına göre boyut değiştirmez. Teknik çizimler için kullanışlıdır. * **OrthographicCamera**: Nesneler uzaklıklarına göre boyut değiştirmez. Teknik çizimler için kullanışlıdır.
```ts
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
```
camera.position.z = 5; camera.position.z = 5;
### 3\. Geometri ve Malzeme (Geometry & Material) ### 3\. Geometri ve Malzeme (Geometry & Material)
Geometri, 3D dünyanızdaki nesnelerin şekillerini tanımlar: küreler, kutular, düzlemler… Malzeme ise bu şekillerin nasıl görüneceğini belirler. Örneğin, mat mı parlak mı, hangi renkte olacak? Geometri, 3D dünyanızdaki nesnelerin şekillerini tanımlar: küreler, kutular, düzlemler… Malzeme ise bu şekillerin nasıl görüneceğini belirler. Örneğin, mat mı parlak mı, hangi renkte olacak?
```ts
const geometry = new THREE.BoxGeometry(); const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material); const cube = new THREE.Mesh(geometry, material);
```
scene.add(cube); scene.add(cube);
### 4\. Işıklandırma (Lighting) ### 4\. Işıklandırma (Lighting)
@@ -64,7 +70,9 @@ Işık, sahnenizi gerçekçi hale getirir. Three.js, çeşitli ışık türleri
* PointLight (Nokta ışığı) * PointLight (Nokta ışığı)
* DirectionalLight (Güneş gibi yönlendirilmiş ışık) * DirectionalLight (Güneş gibi yönlendirilmiş ışık)
```ts
const light = new THREE.PointLight(0xffffff, 1, 100); const light = new THREE.PointLight(0xffffff, 1, 100);
```
light.position.set(10, 10, 10); light.position.set(10, 10, 10);
scene.add(light); scene.add(light);
@@ -72,7 +80,9 @@ scene.add(light);
Renderer, sahnenizi tarayıcıda görüntülemenizi sağlar. Three.js’nin WebGLRenderer’ı, GPU’nun gücünü kullanarak sahneleri hızlı bir şekilde çizer. Renderer, sahnenizi tarayıcıda görüntülemenizi sağlar. Three.js’nin WebGLRenderer’ı, GPU’nun gücünü kullanarak sahneleri hızlı bir şekilde çizer.
```ts
const renderer = new THREE.WebGLRenderer(); const renderer = new THREE.WebGLRenderer();
```
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); document.body.appendChild(renderer.domElement);
@@ -80,8 +90,10 @@ document.body.appendChild(renderer.domElement);
Three.js ile sahnenizi canlandırabilirsiniz. Bu, genellikle bir **animasyon döngüsü** kullanılarak yapılır: Three.js ile sahnenizi canlandırabilirsiniz. Bu, genellikle bir **animasyon döngüsü** kullanılarak yapılır:
```ts
function animate() { function animate() {
requestAnimationFrame(animate); requestAnimationFrame(animate);
```
cube.rotation.x += 0.01; cube.rotation.x += 0.01;
cube.rotation.y += 0.01; cube.rotation.y += 0.01;
renderer.render(scene, camera); renderer.render(scene, camera);
@@ -97,30 +109,42 @@ animate();
### Gelin bir önreğe bakalım ### Gelin bir önreğe bakalım
```ts
import \* as THREE from 'three'; import \* as THREE from 'three';
```
// Sahne oluştur // Sahne oluştur
```ts
const scene = new THREE.Scene(); const scene = new THREE.Scene();
```
// Kamera ve ışık // Kamera ve ışık
```ts
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
```
camera.position.z = 5; camera.position.z = 5;
// Renderer // Renderer
```ts
const renderer = new THREE.WebGLRenderer(); const renderer = new THREE.WebGLRenderer();
```
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); document.body.appendChild(renderer.domElement);
// Geometri ve malzeme // Geometri ve malzeme
```ts
const geometry = new THREE.BoxGeometry(); const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material); const cube = new THREE.Mesh(geometry, material);
```
scene.add(cube); scene.add(cube);
// Animasyon // Animasyon
```ts
function animate() { function animate() {
requestAnimationFrame(animate); requestAnimationFrame(animate);
```
cube.rotation.x += 0.01; cube.rotation.x += 0.01;
cube.rotation.y += 0.01; cube.rotation.y += 0.01;
renderer.render(scene, camera); renderer.render(scene, camera);
content/blog/typescript-ile-javascriptten-tsx-e-ge-i-ki-isel-bir-deneyim.md
+6
View File
@@ -38,6 +38,7 @@ Gelin küçük bir karşılaştırma yapalım.
JSX, React bileşenlerinde JavaScript kodunu HTML benzeri bir sözdizimi ile yazmamıza olanak tanır. Ancak, JSX’te tip kontrolü yapılmıyor. JSX, React bileşenlerinde JavaScript kodunu HTML benzeri bir sözdizimi ile yazmamıza olanak tanır. Ancak, JSX’te tip kontrolü yapılmıyor.
```tsx
import React from 'react'; import React from 'react';
const Greeting = ({ name }) => { const Greeting = ({ name }) => {
@@ -45,14 +46,18 @@ const Greeting = ({ name }) => {
}; };
export default Greeting; export default Greeting;
```
## TSX (TypeScript XML) ## TSX (TypeScript XML)
TSX ise, JSX’in TypeScript ile birleştirilmiş hali olup, tip kontrolü ve daha iyi hata ayıklama özellikleri sunuyor. Tip güvenliği sağlıyor ve bu, bileşenlerin beklenmedik hatalara karşı korunmasına yardımcı oluyor. TSX ise, JSX’in TypeScript ile birleştirilmiş hali olup, tip kontrolü ve daha iyi hata ayıklama özellikleri sunuyor. Tip güvenliği sağlıyor ve bu, bileşenlerin beklenmedik hatalara karşı korunmasına yardımcı oluyor.
```ts
import React from 'react'; import React from 'react';
```
// Props için TypeScript ile tip tanımlaması // Props için TypeScript ile tip tanımlaması
```tsx
interface GreetingProps { interface GreetingProps {
name: string; name: string;
} }
@@ -62,6 +67,7 @@ const Greeting: React.FC<GreetingProps\> = ({ name }) => {
}; };
export default Greeting; export default Greeting;
```
## Karşılaştırma ## Karşılaştırma