diff --git a/components/blog-detail-content.tsx b/components/blog-detail-content.tsx index 7fe7613..14704a9 100644 --- a/components/blog-detail-content.tsx +++ b/components/blog-detail-content.tsx @@ -140,26 +140,11 @@ export function BlogDetailContent({ post }: BlogDetailContentProps) {
{post.category} - - {post.title} - - + {post.author} · {post.date} · {post.readTime} - - {post.excerpt} -
- - {post.title} - -
+ - -
-

Count: {count}

- -
-``` - -### 2. Props Kullanımı - -React: - -```jsx -function Greeting({ name }) { - return

Hello, {name}!

; -} -``` - -Svelte: - -```svelte - - -

Hello, {name}!

-``` - -### 3. Form Yönetimi - -React: - -```jsx -import React, { useState } from "react"; - -function Form() { - const [inputValue, setInputValue] = useState(""); - - return ( -
- setInputValue(e.target.value)} - /> -

Input: {inputValue}

-
- ); -} -``` - -Svelte: - -```svelte - - -
- -

Input: {inputValue}

-
-``` - -## Lifecycle Metotları - -Svelte tarafında en sık kullanılan lifecycle fonksiyonları: - -- `onMount` -- `beforeUpdate` -- `afterUpdate` -- `onDestroy` - -`onMount` örneği: - -```svelte - - -{#if data} -

{data.title}

-{/if} -``` - -## Reaktivite - -Svelte'in en güçlü taraflarından biri, reaktif ifadeleri dil seviyesinde desteklemesi: - -```svelte - - -

Count: {count}

-

Doubled: {doubled}

- -``` - -## Store Kullanımı - -Bileşenler arası state paylaşımı için `store` yapısı çok kullanışlıdır. - -`store.js`: - -```js -import { writable } from "svelte/store"; - -export const count = writable(0); -``` - -`App.svelte`: - -```svelte - - -

Count: {$count}

- -``` - -![Svelte ile İlk Adımlar: React ve Vue’ya Karşı Hızlı mı?](https://miro.medium.com/v2/resize:fit:1400/format:webp/0*6oapfP2KKU3JTo8H.png) - -## SvelteKit Neden Önemli? - -SvelteKit, Svelte üzerine kurulu modern bir framework'tür. Özellikle şu konularda güçlüdür: - -- SSR (Server-Side Rendering) -- Statik site üretimi -- Dosya tabanlı routing -- API endpoint tanımları - -Bu yapı, Svelte'i küçük projelerden ürün seviyesine taşımayı kolaylaştırır. - -## Sonuç - -Svelte, performans ve sadelik odaklı bir geliştirme deneyimi sunuyor. Küçük ve orta ölçekli projelerde çok hızlı sonuç verir; büyük projelerde ise SvelteKit ile birlikte oldukça güçlü bir seçenek haline gelir. - -## Kaynaklar - -- [Svelte Documentation](https://svelte.dev/docs) -- [Svelte Tutorial](https://svelte.dev/tutorial) -- [SvelteKit Documentation](https://kit.svelte.dev/docs) -- [LogRocket - Svelte vs React](https://blog.logrocket.com/svelte-vs-react/) - -![Svelte ile İlk Adımlar: React ve Vue’ya Karşı Hızlı mı?](https://miro.medium.com/v2/resize:fit:1258/format:webp/0*GLNSJNWQcg9K79Xe.png) diff --git a/content/blog/tailwind-css-ile-hizli-tasarim.md b/content/blog/tailwind-css-ile-hizli-tasarim.md deleted file mode 100644 index f487b17..0000000 --- a/content/blog/tailwind-css-ile-hizli-tasarim.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: "Tailwind CSS ile Tasarım Sürecini Nasıl Hızlandırabilirsiniz?" -category: "Frontend" -date: "2026-02-10" -readTime: "10 min read" -author: "Poyraz Avsever" -excerpt: "Tailwind CSS, son dönemde front-end geliştiriciler arasında çok popüler hale geldi. Klasik CSS..." -coverImage: "/news/performance.svg" ---- - -Tailwind CSS, son dönemde front-end geliştiriciler arasında çok popüler hale geldi. Klasik CSS yaklaşımına göre daha hızlı prototipleme imkanı sunması ve esnek yapısı, özellikle ürün geliştirme süreçlerinde ciddi zaman kazandırıyor. - - -## Tailwind CSS Nedir? - -Tailwind CSS, utility-first yaklaşımını benimseyen bir CSS framework'üdür. Yani özel class isimleri üretmek yerine, hazır utility class'ları doğrudan bileşen üzerinde kullanırsın. - -## Neden Tailwind CSS Kullanmalıyız? - -### 1. Hızlı ve Kolay Stil Geliştirme - -Klasik CSS ile: - -```css -.btn { - background-color: #3490dc; - color: #fff; - padding: 1rem; -} -``` - -Tailwind ile: - -```html - -``` - -### 2. Daha Az CSS Karmaşası - -Büyük projelerde CSS dosyaları büyüdükçe sınıf yönetimi zorlaşır. Tailwind ile stil kararları bileşen seviyesinde alınır; bu da dağınıklığı azaltır. - -### 3. Responsive Tasarım Daha Basit - -```html -
- Responsive Metin -
-``` - -Tek satırda farklı kırılımlar için tipografi kontrolü yapabilirsin. - -## Tailwind'i Daha Verimli Kullanma İpuçları - -### 1. `tailwind.config.js` Dosyasını Özelleştir - -```js -module.exports = { - theme: { - extend: { - colors: { - customBlue: "#1e3a8a", - }, - spacing: { - 128: "32rem", - }, - }, - }, -}; -``` - -### 2. `@apply` ile Tekrarları Azalt - -```css -.btn-primary { - @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; -} -``` - -### 3. Üretimde Kullanılmayan Stilleri Temizle - -```js -module.exports = { - purge: ["./src/**/*.html", "./src/**/*.js"], -}; -``` - -### 4. JIT Modunu Kullan - -```js -module.exports = { - mode: "jit", -}; -``` - -### 5. Mobile-first Düşün - -```html -
- Responsive Metin -
-``` - -Önce küçük ekranlardan başlayıp yukarı doğru ölçeklemek genelde daha temiz sonuç verir. - -### 6. Eklenti Ekosisteminden Yararlan - -- `@tailwindcss/forms` -- `@tailwindcss/typography` -- `tailwind-scrollbar` - -Bu eklentilerle ortak UI ihtiyaçlarını daha hızlı çözebilirsin. - -![Tailwind CSS ile Tasarım Sürecini Nasıl Hızlandırabilirsiniz?](https://miro.medium.com/v2/resize:fit:1400/format:webp/0*lNfm8WJ_NhHq0GPM.png) - -## Sonuç - -Tailwind CSS, doğru kullanıldığında hem hız hem de bakım kolaylığı sağlar. Özellikle hızlı iterasyon gereken projelerde, utility-first yaklaşımı ciddi avantaj sunar. - -## Kaynaklar - -- [Tailwind CSS Dokümantasyon](https://tailwindcss.com/docs) -- [Configuration](https://tailwindcss.com/docs/configuration) -- [Optimizing for Production](https://tailwindcss.com/docs/optimizing-for-production) -- [JIT Mode](https://tailwindcss.com/docs/just-in-time-mode) -- [Plugins](https://tailwindcss.com/docs/plugins) diff --git a/content/blog/tailwind-css-ile-tasar-m-s-recini-nas-l-h-zland-rabilirsiniz.md b/content/blog/tailwind-css-ile-tasar-m-s-recini-nas-l-h-zland-rabilirsiniz.md new file mode 100644 index 0000000..51006a3 --- /dev/null +++ b/content/blog/tailwind-css-ile-tasar-m-s-recini-nas-l-h-zland-rabilirsiniz.md @@ -0,0 +1,138 @@ +--- +title: "Tailwind CSS ile Tasarım Sürecini Nasıl Hızlandırabilirsiniz?" +category: "General" +date: "2024-09-14" +readTime: "4 min read" +author: "Poyraz Avsever" +slug: "tailwind-css-ile-tasar-m-s-recini-nas-l-h-zland-rabilirsiniz" +excerpt: "Tailwind CSS ile Tasarım Sürecini Nasıl Hızlandırabilirsiniz? Tailwind CSS, son dönemde front-end geliştiricilerin gözdesi haline geldi. Klasik CSS yazımına göre daha oldukça hızlı ve …" +coverImage: "/blog/images/tailwind-css-ile-tasar-m-s-recini-nas-l-h-zland-rabilirsiniz-cover.jpg" +canonicalUrl: "https://medium.com/@poyrazavsever/tailwind-css-ile-tasar%C4%B1m-s%C3%BCrecini-nas%C4%B1l-h%C4%B1zland%C4%B1rabilirsiniz-90ef7fbd9faf" +--- + +# Tailwind CSS ile Tasarım Sürecini Nasıl Hızlandırabilirsiniz? + + +Tailwind CSS, son dönemde front-end geliştiricilerin gözdesi haline geldi. Klasik CSS yazımına göre daha oldukça hızlı ve esnek bir yapı sunması, özellikle hızlı prototipleme ve özelleştirilmiş tasarımlar oluşturma süreçlerinde büyük avantaj sağlıyor. Bu yazıda, Tailwind CSS ile nasıl **daha hızlı ve verimli** bir tasarım süreci yaratabileceğinizi adım adım ele alacağız. Her şeyden önce gelin “tailwind css nedir ve neden kullanmalıyız?” diye bir soralım. + + +![](/blog/images/tailwind-css-ile-tasar-m-s-recini-nas-l-h-zland-rabilirsiniz-img-2.jpg) + +## **Tailwind CSS Nedir ve Neden Kullanmalıyız?** + +Tailwind CSS, klasik CSS yazımında alışık olduğumuz “class tanımla, sonra stilleri yaz” yöntemine alternatif olarak ortaya çıkmış, utility-first (yardımcı sınıf temelli) bir CSS framework’ü. Yani, önceden tanımlanmış küçük stil sınıflarını doğrudan HTML elementlerine ekleyerek stil verebiliyorsun. Örneğin, bir buton için `bg-blue-500`, `text-white`, `p-4` gibi sınıfları ekleyerek, doğrudan istediğin görünüme hızlıca ulaşabilirsin. + +### Neden Tailwind Kullanmalıyız? + +**1- Hızlı ve Kolay** +CSS de her yeni stil için bir class yazman gerekiyor. Örneğin, bir butonun arka plan rengi, yazı rengi ve padding gibi özelliklerini tanımlamak için stil dosyana şöyle bir kod yazıyorsun:, + +.btn { + background-color: #3490dc; + color: #fff; + padding: 1rem; +} + +Tailwind de ise aynı butonu şu şekilde oluşturabilirsin: + +