From 36ffbea30a01e66b23c17c43e0c50f3ffcc04c2f Mon Sep 17 00:00:00 2001 From: Poyraz Avsever Date: Fri, 10 Apr 2026 11:55:47 +0300 Subject: [PATCH] feat: add new blog posts, associated images, and automation scripts for content management --- components/blog-detail-content.tsx | 17 +- ...-architecture-frontende-nas-l-uyarlan-r.md | 287 +++ content/blog/conventional-commits-nedir.md | 91 - ...ameworkleri-tan-yoruz-1-b-l-m-bootstrap.md | 236 +++ ...meworkleri-tan-yoruz-2-b-l-m-foundation.md | 177 ++ ...s-frameworkleri-tan-yoruz-3-b-l-m-bulma.md | 216 +++ ...ameworkleri-tan-yoruz-4-b-l-m-chakra-ui.md | 223 +++ ...eworkleri-tan-yoruz-5-b-l-m-materialize.md | 254 +++ ...emeden-renmeniz-gereken-g-venlik-a-klar.md | 201 +++ ...ker-nedir-kahveni-al-docker-konu-uyoruz.md | 161 ++ ...er-2025-yol-haritas-ki-isel-bak-a-s-yla.md | 343 ++++ ...d-mimarisinde-en-zor-k-s-m-karar-vermek.md | 212 +++ ...ng-ara-lar-jest-ve-cypress-ile-ba-lamak.md | 162 ++ content/blog/frontend-testing-jest-cypress.md | 119 -- ...ldi-openainin-yeni-modeli-neler-sunuyor.md | 97 ++ content/blog/jsxden-tsxe-gecis.md | 84 - ...-olu-turma-tasar-m-n-gizli-kahramanlar.md} | 30 +- .../mikro-etkile-imlerde-i-kon-kullan-m.md | 60 + .../next-js-15-gelmi-neler-de-i-ti-peki.md | 246 +++ ...h-zl-web-uygulamalar-nas-l-geli-tirilir.md | 232 +++ ...kullan-c-profil-sayfas-nas-l-tasarlan-r.md | 181 ++ ...ative-nedir-avantajlar-ve-dezavantajlar.md | 112 ++ ...-ile-bilgi-ak-n-algoritmadan-uzakla-t-r.md | 185 ++ ...-i-lk-ad-mlar-react-ve-vueya-kar-h-zl-m.md | 318 ++++ ...lte-ilk-adimlar-react-vue-karsilastirma.md | 204 --- .../blog/tailwind-css-ile-hizli-tasarim.md | 125 -- ...r-m-s-recini-nas-l-h-zland-rabilirsiniz.md | 138 ++ .../three-js-3-boyutlu-d-nyaya-merhaba.md | 152 ++ ...criptten-tsx-e-ge-i-ki-isel-bir-deneyim.md | 102 ++ ...md => ux-tasar-m-ve-i-nsan-psikolojisi.md} | 88 +- ...rojelerinde-build-ara-lar-kar-la-t-rmas.md | 93 + ...-i-leti-imin-yaz-l-m-d-nyas-na-e-etkisi.md | 70 + ...-geli-tirme-s-re-lerinde-agile-ve-scrum.md | 73 + ...imlilik-i-in-conventional-commits-nedir.md | 98 ++ docs/medium.md | 59 +- docs/mediumLinks.md | 28 + medium-feed.xml | 0 package.json | 5 + pnpm-lock.yaml | 1535 ++++++++++++++++- ...ecture-frontende-nas-l-uyarlan-r-cover.jpg | Bin 0 -> 168184 bytes ...ecture-frontende-nas-l-uyarlan-r-img-1.jpg | Bin 0 -> 3126 bytes ...cture-frontende-nas-l-uyarlan-r-img-10.jpg | Bin 0 -> 73055 bytes ...cture-frontende-nas-l-uyarlan-r-img-11.jpg | Bin 0 -> 111142 bytes ...cture-frontende-nas-l-uyarlan-r-img-12.jpg | Bin 0 -> 76587 bytes ...cture-frontende-nas-l-uyarlan-r-img-13.jpg | Bin 0 -> 226486 bytes ...cture-frontende-nas-l-uyarlan-r-img-14.jpg | Bin 0 -> 312269 bytes ...cture-frontende-nas-l-uyarlan-r-img-15.jpg | Bin 0 -> 235733 bytes ...cture-frontende-nas-l-uyarlan-r-img-16.jpg | Bin 0 -> 99884 bytes ...cture-frontende-nas-l-uyarlan-r-img-17.jpg | Bin 0 -> 48413 bytes ...ecture-frontende-nas-l-uyarlan-r-img-2.jpg | Bin 0 -> 79249 bytes ...ecture-frontende-nas-l-uyarlan-r-img-3.jpg | Bin 0 -> 90336 bytes ...ecture-frontende-nas-l-uyarlan-r-img-4.jpg | Bin 0 -> 182383 bytes ...ecture-frontende-nas-l-uyarlan-r-img-5.jpg | Bin 0 -> 279750 bytes ...ecture-frontende-nas-l-uyarlan-r-img-6.jpg | Bin 0 -> 49877 bytes ...ecture-frontende-nas-l-uyarlan-r-img-7.jpg | Bin 0 -> 102539 bytes ...ecture-frontende-nas-l-uyarlan-r-img-8.jpg | Bin 0 -> 84188 bytes ...ecture-frontende-nas-l-uyarlan-r-img-9.jpg | Bin 0 -> 118090 bytes ...leri-tan-yoruz-1-b-l-m-bootstrap-cover.jpg | Bin 0 -> 47235 bytes ...leri-tan-yoruz-1-b-l-m-bootstrap-img-1.jpg | Bin 0 -> 3126 bytes ...leri-tan-yoruz-1-b-l-m-bootstrap-img-2.jpg | Bin 0 -> 30153 bytes ...eri-tan-yoruz-2-b-l-m-foundation-cover.jpg | Bin 0 -> 14735 bytes ...eri-tan-yoruz-2-b-l-m-foundation-img-1.jpg | Bin 0 -> 3126 bytes ...eri-tan-yoruz-2-b-l-m-foundation-img-2.jpg | Bin 0 -> 14735 bytes ...workleri-tan-yoruz-3-b-l-m-bulma-cover.jpg | Bin 0 -> 22116 bytes ...workleri-tan-yoruz-3-b-l-m-bulma-img-1.jpg | Bin 0 -> 3126 bytes ...workleri-tan-yoruz-3-b-l-m-bulma-img-2.jpg | Bin 0 -> 4945 bytes ...workleri-tan-yoruz-3-b-l-m-bulma-img-3.jpg | Bin 0 -> 11241 bytes ...workleri-tan-yoruz-3-b-l-m-bulma-img-4.jpg | Bin 0 -> 18807 bytes ...leri-tan-yoruz-4-b-l-m-chakra-ui-cover.jpg | Bin 0 -> 6464 bytes ...leri-tan-yoruz-4-b-l-m-chakra-ui-img-1.jpg | Bin 0 -> 3126 bytes ...leri-tan-yoruz-4-b-l-m-chakra-ui-img-2.jpg | Bin 0 -> 6464 bytes ...ri-tan-yoruz-5-b-l-m-materialize-cover.jpg | Bin 0 -> 1379709 bytes ...ri-tan-yoruz-5-b-l-m-materialize-img-1.jpg | Bin 0 -> 3126 bytes ...ri-tan-yoruz-5-b-l-m-materialize-img-2.jpg | Bin 0 -> 404831 bytes ...ri-tan-yoruz-5-b-l-m-materialize-img-3.jpg | Bin 0 -> 472503 bytes ...ri-tan-yoruz-5-b-l-m-materialize-img-4.jpg | Bin 0 -> 474200 bytes ...renmeniz-gereken-g-venlik-a-klar-cover.jpg | Bin 0 -> 20651 bytes ...renmeniz-gereken-g-venlik-a-klar-img-1.jpg | Bin 0 -> 3126 bytes ...enmeniz-gereken-g-venlik-a-klar-img-10.jpg | Bin 0 -> 7097 bytes ...renmeniz-gereken-g-venlik-a-klar-img-2.jpg | Bin 0 -> 27205 bytes ...renmeniz-gereken-g-venlik-a-klar-img-3.jpg | Bin 0 -> 20651 bytes ...renmeniz-gereken-g-venlik-a-klar-img-4.jpg | Bin 0 -> 68910 bytes ...renmeniz-gereken-g-venlik-a-klar-img-5.jpg | Bin 0 -> 62986 bytes ...renmeniz-gereken-g-venlik-a-klar-img-6.jpg | Bin 0 -> 11135 bytes ...renmeniz-gereken-g-venlik-a-klar-img-7.jpg | Bin 0 -> 77250 bytes ...renmeniz-gereken-g-venlik-a-klar-img-8.jpg | Bin 0 -> 20048 bytes ...renmeniz-gereken-g-venlik-a-klar-img-9.jpg | Bin 0 -> 16907 bytes ...ir-kahveni-al-docker-konu-uyoruz-cover.jpg | Bin 0 -> 17015 bytes ...ir-kahveni-al-docker-konu-uyoruz-img-1.jpg | Bin 0 -> 3126 bytes ...ir-kahveni-al-docker-konu-uyoruz-img-2.jpg | Bin 0 -> 7913 bytes ...ir-kahveni-al-docker-konu-uyoruz-img-3.jpg | Bin 0 -> 17786 bytes ...ir-kahveni-al-docker-konu-uyoruz-img-4.jpg | Bin 0 -> 32762 bytes ...ir-kahveni-al-docker-konu-uyoruz-img-5.jpg | Bin 0 -> 17015 bytes ...-yol-haritas-ki-isel-bak-a-s-yla-cover.jpg | Bin 0 -> 357611 bytes ...-yol-haritas-ki-isel-bak-a-s-yla-img-1.jpg | Bin 0 -> 3126 bytes ...-yol-haritas-ki-isel-bak-a-s-yla-img-2.jpg | Bin 0 -> 175679 bytes ...-yol-haritas-ki-isel-bak-a-s-yla-img-3.jpg | Bin 0 -> 216603 bytes ...-yol-haritas-ki-isel-bak-a-s-yla-img-4.jpg | Bin 0 -> 382171 bytes ...-yol-haritas-ki-isel-bak-a-s-yla-img-5.jpg | Bin 0 -> 35650 bytes ...-yol-haritas-ki-isel-bak-a-s-yla-img-6.jpg | Bin 0 -> 43321 bytes ...isinde-en-zor-k-s-m-karar-vermek-cover.jpg | Bin 0 -> 414713 bytes ...isinde-en-zor-k-s-m-karar-vermek-img-1.jpg | Bin 0 -> 3126 bytes ...isinde-en-zor-k-s-m-karar-vermek-img-2.jpg | Bin 0 -> 196205 bytes ...isinde-en-zor-k-s-m-karar-vermek-img-3.jpg | Bin 0 -> 77066 bytes ...isinde-en-zor-k-s-m-karar-vermek-img-4.jpg | Bin 0 -> 346324 bytes ...isinde-en-zor-k-s-m-karar-vermek-img-5.jpg | Bin 0 -> 308347 bytes ...isinde-en-zor-k-s-m-karar-vermek-img-6.jpg | Bin 0 -> 122914 bytes ...isinde-en-zor-k-s-m-karar-vermek-img-7.jpg | Bin 0 -> 535602 bytes ...isinde-en-zor-k-s-m-karar-vermek-img-8.jpg | Bin 0 -> 186044 bytes ...isinde-en-zor-k-s-m-karar-vermek-img-9.jpg | Bin 0 -> 50167 bytes ...lar-jest-ve-cypress-ile-ba-lamak-cover.jpg | Bin 0 -> 88819 bytes ...lar-jest-ve-cypress-ile-ba-lamak-img-1.jpg | Bin 0 -> 3126 bytes ...lar-jest-ve-cypress-ile-ba-lamak-img-2.jpg | Bin 0 -> 37957 bytes ...lar-jest-ve-cypress-ile-ba-lamak-img-3.jpg | Bin 0 -> 2760 bytes ...lar-jest-ve-cypress-ile-ba-lamak-img-4.jpg | Bin 0 -> 49257 bytes ...nainin-yeni-modeli-neler-sunuyor-cover.jpg | Bin 0 -> 56439 bytes ...nainin-yeni-modeli-neler-sunuyor-img-1.jpg | Bin 0 -> 3126 bytes ...nainin-yeni-modeli-neler-sunuyor-img-2.jpg | Bin 0 -> 28395 bytes ...nainin-yeni-modeli-neler-sunuyor-img-3.jpg | Bin 0 -> 45276 bytes ...nainin-yeni-modeli-neler-sunuyor-img-4.jpg | Bin 0 -> 47095 bytes ...nainin-yeni-modeli-neler-sunuyor-img-5.jpg | Bin 0 -> 93348 bytes ...urma-tasar-m-n-gizli-kahramanlar-cover.jpg | Bin 0 -> 52223 bytes ...urma-tasar-m-n-gizli-kahramanlar-img-1.jpg | Bin 0 -> 3126 bytes ...urma-tasar-m-n-gizli-kahramanlar-img-2.jpg | Bin 0 -> 25263 bytes ...urma-tasar-m-n-gizli-kahramanlar-img-3.jpg | Bin 0 -> 18923 bytes ...ro-etkile-imlerde-i-kon-kullan-m-cover.jpg | Bin 0 -> 15677 bytes ...ro-etkile-imlerde-i-kon-kullan-m-img-1.jpg | Bin 0 -> 3126 bytes ...ro-etkile-imlerde-i-kon-kullan-m-img-2.jpg | Bin 0 -> 27693 bytes ...ro-etkile-imlerde-i-kon-kullan-m-img-3.jpg | Bin 0 -> 397275 bytes ...ro-etkile-imlerde-i-kon-kullan-m-img-4.jpg | Bin 0 -> 22513 bytes ...t-js-15-gelmi-neler-de-i-ti-peki-cover.jpg | Bin 0 -> 113671 bytes ...t-js-15-gelmi-neler-de-i-ti-peki-img-1.jpg | Bin 0 -> 3126 bytes ...t-js-15-gelmi-neler-de-i-ti-peki-img-2.jpg | Bin 0 -> 76645 bytes ...t-js-15-gelmi-neler-de-i-ti-peki-img-3.jpg | Bin 0 -> 210954 bytes ...t-js-15-gelmi-neler-de-i-ti-peki-img-4.jpg | Bin 0 -> 26152 bytes ...t-js-15-gelmi-neler-de-i-ti-peki-img-5.jpg | Bin 0 -> 85464 bytes ...b-uygulamalar-nas-l-geli-tirilir-cover.jpg | Bin 0 -> 767505 bytes ...b-uygulamalar-nas-l-geli-tirilir-img-1.jpg | Bin 0 -> 3126 bytes ...b-uygulamalar-nas-l-geli-tirilir-img-2.jpg | Bin 0 -> 456203 bytes ...b-uygulamalar-nas-l-geli-tirilir-img-3.jpg | Bin 0 -> 399024 bytes ...b-uygulamalar-nas-l-geli-tirilir-img-4.jpg | Bin 0 -> 442499 bytes ...b-uygulamalar-nas-l-geli-tirilir-img-5.jpg | Bin 0 -> 392318 bytes ...b-uygulamalar-nas-l-geli-tirilir-img-6.jpg | Bin 0 -> 92129 bytes ...b-uygulamalar-nas-l-geli-tirilir-img-7.jpg | Bin 0 -> 11748 bytes ...c-profil-sayfas-nas-l-tasarlan-r-cover.jpg | Bin 0 -> 48514 bytes ...c-profil-sayfas-nas-l-tasarlan-r-img-1.jpg | Bin 0 -> 3126 bytes ...c-profil-sayfas-nas-l-tasarlan-r-img-2.jpg | Bin 0 -> 23020 bytes ...c-profil-sayfas-nas-l-tasarlan-r-img-3.jpg | Bin 0 -> 10146 bytes ...c-profil-sayfas-nas-l-tasarlan-r-img-4.jpg | Bin 0 -> 73936 bytes ...edir-avantajlar-ve-dezavantajlar-cover.jpg | Bin 0 -> 17998 bytes ...edir-avantajlar-ve-dezavantajlar-img-1.jpg | Bin 0 -> 3126 bytes ...edir-avantajlar-ve-dezavantajlar-img-2.jpg | Bin 0 -> 17998 bytes ...edir-avantajlar-ve-dezavantajlar-img-3.jpg | Bin 0 -> 27787 bytes ...edir-avantajlar-ve-dezavantajlar-img-4.jpg | Bin 0 -> 18733 bytes ...lgi-ak-n-algoritmadan-uzakla-t-r-cover.jpg | Bin 0 -> 85022 bytes ...lgi-ak-n-algoritmadan-uzakla-t-r-img-1.jpg | Bin 0 -> 3126 bytes ...lgi-ak-n-algoritmadan-uzakla-t-r-img-2.jpg | Bin 0 -> 49314 bytes ...d-mlar-react-ve-vueya-kar-h-zl-m-cover.jpg | Bin 0 -> 45472 bytes ...d-mlar-react-ve-vueya-kar-h-zl-m-img-1.jpg | Bin 0 -> 3126 bytes ...d-mlar-react-ve-vueya-kar-h-zl-m-img-2.jpg | Bin 0 -> 44695 bytes ...d-mlar-react-ve-vueya-kar-h-zl-m-img-3.jpg | Bin 0 -> 10675 bytes ...d-mlar-react-ve-vueya-kar-h-zl-m-img-4.jpg | Bin 0 -> 47467 bytes ...d-mlar-react-ve-vueya-kar-h-zl-m-img-5.jpg | Bin 0 -> 19235 bytes ...ecini-nas-l-h-zland-rabilirsiniz-cover.jpg | Bin 0 -> 57396 bytes ...ecini-nas-l-h-zland-rabilirsiniz-img-1.jpg | Bin 0 -> 3126 bytes ...ecini-nas-l-h-zland-rabilirsiniz-img-2.jpg | Bin 0 -> 29069 bytes ...ecini-nas-l-h-zland-rabilirsiniz-img-3.jpg | Bin 0 -> 17777 bytes ...ree-js-3-boyutlu-d-nyaya-merhaba-cover.jpg | Bin 0 -> 30190 bytes ...ree-js-3-boyutlu-d-nyaya-merhaba-img-1.jpg | Bin 0 -> 3126 bytes ...ree-js-3-boyutlu-d-nyaya-merhaba-img-2.jpg | Bin 0 -> 47180 bytes ...ree-js-3-boyutlu-d-nyaya-merhaba-img-3.jpg | Bin 0 -> 27351 bytes ...n-tsx-e-ge-i-ki-isel-bir-deneyim-cover.jpg | Bin 0 -> 77860 bytes ...n-tsx-e-ge-i-ki-isel-bir-deneyim-img-1.jpg | Bin 0 -> 3126 bytes ...n-tsx-e-ge-i-ki-isel-bir-deneyim-img-2.jpg | Bin 0 -> 105571 bytes ...ux-tasar-m-ve-i-nsan-psikolojisi-cover.jpg | Bin 0 -> 23142 bytes ...ux-tasar-m-ve-i-nsan-psikolojisi-img-1.jpg | Bin 0 -> 3126 bytes ...ux-tasar-m-ve-i-nsan-psikolojisi-img-2.jpg | Bin 0 -> 21521 bytes ...ux-tasar-m-ve-i-nsan-psikolojisi-img-3.jpg | Bin 0 -> 28136 bytes ...ux-tasar-m-ve-i-nsan-psikolojisi-img-4.jpg | Bin 0 -> 63006 bytes ...ux-tasar-m-ve-i-nsan-psikolojisi-img-5.jpg | Bin 0 -> 72087 bytes ...ux-tasar-m-ve-i-nsan-psikolojisi-img-6.jpg | Bin 0 -> 18048 bytes ...ux-tasar-m-ve-i-nsan-psikolojisi-img-7.jpg | Bin 0 -> 18375 bytes ...ux-tasar-m-ve-i-nsan-psikolojisi-img-8.jpg | Bin 0 -> 14158 bytes ...ux-tasar-m-ve-i-nsan-psikolojisi-img-9.jpg | Bin 0 -> 166701 bytes ...inde-build-ara-lar-kar-la-t-rmas-cover.jpg | Bin 0 -> 260046 bytes ...inde-build-ara-lar-kar-la-t-rmas-img-1.jpg | Bin 0 -> 3126 bytes ...inde-build-ara-lar-kar-la-t-rmas-img-2.jpg | Bin 0 -> 97216 bytes ...inde-build-ara-lar-kar-la-t-rmas-img-3.jpg | Bin 0 -> 17500 bytes ...inde-build-ara-lar-kar-la-t-rmas-img-4.jpg | Bin 0 -> 12519 bytes ...-imin-yaz-l-m-d-nyas-na-e-etkisi-cover.jpg | Bin 0 -> 56763 bytes ...-imin-yaz-l-m-d-nyas-na-e-etkisi-img-1.jpg | Bin 0 -> 3126 bytes ...-imin-yaz-l-m-d-nyas-na-e-etkisi-img-2.jpg | Bin 0 -> 27588 bytes ...-imin-yaz-l-m-d-nyas-na-e-etkisi-img-3.jpg | Bin 0 -> 43304 bytes ...-imin-yaz-l-m-d-nyas-na-e-etkisi-img-4.jpg | Bin 0 -> 29561 bytes ...-imin-yaz-l-m-d-nyas-na-e-etkisi-img-5.jpg | Bin 0 -> 94879 bytes ...irme-s-re-lerinde-agile-ve-scrum-cover.jpg | Bin 0 -> 56231 bytes ...irme-s-re-lerinde-agile-ve-scrum-img-1.jpg | Bin 0 -> 3126 bytes ...irme-s-re-lerinde-agile-ve-scrum-img-2.jpg | Bin 0 -> 42227 bytes ...irme-s-re-lerinde-agile-ve-scrum-img-3.jpg | Bin 0 -> 45192 bytes ...irme-s-re-lerinde-agile-ve-scrum-img-4.jpg | Bin 0 -> 7629 bytes ...-i-in-conventional-commits-nedir-cover.jpg | Bin 0 -> 18036 bytes ...-i-in-conventional-commits-nedir-img-1.jpg | Bin 0 -> 3126 bytes ...-i-in-conventional-commits-nedir-img-2.jpg | Bin 0 -> 14790 bytes scripts/cleanup-posts.mjs | 39 + scripts/fetch-medium-all.mjs | 211 +++ scripts/test-medium-scraper.mjs | 89 + 206 files changed, 6626 insertions(+), 727 deletions(-) create mode 100644 content/blog/clean-architecture-frontende-nas-l-uyarlan-r.md delete mode 100644 content/blog/conventional-commits-nedir.md create mode 100644 content/blog/css-frameworkleri-tan-yoruz-1-b-l-m-bootstrap.md create mode 100644 content/blog/css-frameworkleri-tan-yoruz-2-b-l-m-foundation.md create mode 100644 content/blog/css-frameworkleri-tan-yoruz-3-b-l-m-bulma.md create mode 100644 content/blog/css-frameworkleri-tan-yoruz-4-b-l-m-chakra-ui.md create mode 100644 content/blog/css-frameworkleri-tan-yoruz-5-b-l-m-materialize.md create mode 100644 content/blog/deneyimlemeden-renmeniz-gereken-g-venlik-a-klar.md create mode 100644 content/blog/docker-nedir-kahveni-al-docker-konu-uyoruz.md create mode 100644 content/blog/frontend-developer-2025-yol-haritas-ki-isel-bak-a-s-yla.md create mode 100644 content/blog/frontend-mimarisinde-en-zor-k-s-m-karar-vermek.md create mode 100644 content/blog/frontend-testing-ara-lar-jest-ve-cypress-ile-ba-lamak.md delete mode 100644 content/blog/frontend-testing-jest-cypress.md create mode 100644 content/blog/gpt-5-geldi-openainin-yeni-modeli-neler-sunuyor.md delete mode 100644 content/blog/jsxden-tsxe-gecis.md rename content/blog/{kullanici-arastirmasi-ve-persona.md => kullan-c-ara-t-rmas-ve-personas-olu-turma-tasar-m-n-gizli-kahramanlar.md} (72%) create mode 100644 content/blog/mikro-etkile-imlerde-i-kon-kullan-m.md create mode 100644 content/blog/next-js-15-gelmi-neler-de-i-ti-peki.md create mode 100644 content/blog/next-js-ile-edge-functions-h-zl-web-uygulamalar-nas-l-geli-tirilir.md create mode 100644 content/blog/react-ile-dinamik-bir-kullan-c-profil-sayfas-nas-l-tasarlan-r.md create mode 100644 content/blog/react-native-nedir-avantajlar-ve-dezavantajlar.md create mode 100644 content/blog/rss-ile-bilgi-ak-n-algoritmadan-uzakla-t-r.md create mode 100644 content/blog/svelte-ile-i-lk-ad-mlar-react-ve-vueya-kar-h-zl-m.md delete mode 100644 content/blog/svelte-ilk-adimlar-react-vue-karsilastirma.md delete mode 100644 content/blog/tailwind-css-ile-hizli-tasarim.md create mode 100644 content/blog/tailwind-css-ile-tasar-m-s-recini-nas-l-h-zland-rabilirsiniz.md create mode 100644 content/blog/three-js-3-boyutlu-d-nyaya-merhaba.md create mode 100644 content/blog/typescript-ile-javascriptten-tsx-e-ge-i-ki-isel-bir-deneyim.md rename content/blog/{ux-tasarimi-ve-insan-psikolojisi.md => ux-tasar-m-ve-i-nsan-psikolojisi.md} (79%) create mode 100644 content/blog/webpack-vs-vite-frontend-projelerinde-build-ara-lar-kar-la-t-rmas.md create mode 100644 content/blog/yaz-l-m-d-nyas-nda-hitabet-sanat-n-n-g-c-i-leti-imin-yaz-l-m-d-nyas-na-e-etkisi.md create mode 100644 content/blog/yaz-l-m-geli-tirme-s-re-lerinde-agile-ve-scrum.md create mode 100644 content/blog/yaz-l-m-projelerinde-d-zen-ve-verimlilik-i-in-conventional-commits-nedir.md create mode 100644 docs/mediumLinks.md create mode 100644 medium-feed.xml create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-cover.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-1.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-10.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-11.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-12.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-13.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-14.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-15.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-16.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-17.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-2.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-3.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-4.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-5.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-6.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-7.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-8.jpg create mode 100644 public/blog/images/clean-architecture-frontende-nas-l-uyarlan-r-img-9.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-1-b-l-m-bootstrap-cover.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-1-b-l-m-bootstrap-img-1.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-1-b-l-m-bootstrap-img-2.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-2-b-l-m-foundation-cover.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-2-b-l-m-foundation-img-1.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-2-b-l-m-foundation-img-2.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-3-b-l-m-bulma-cover.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-3-b-l-m-bulma-img-1.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-3-b-l-m-bulma-img-2.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-3-b-l-m-bulma-img-3.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-3-b-l-m-bulma-img-4.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-4-b-l-m-chakra-ui-cover.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-4-b-l-m-chakra-ui-img-1.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-4-b-l-m-chakra-ui-img-2.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-5-b-l-m-materialize-cover.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-5-b-l-m-materialize-img-1.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-5-b-l-m-materialize-img-2.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-5-b-l-m-materialize-img-3.jpg create mode 100644 public/blog/images/css-frameworkleri-tan-yoruz-5-b-l-m-materialize-img-4.jpg create mode 100644 public/blog/images/deneyimlemeden-renmeniz-gereken-g-venlik-a-klar-cover.jpg create mode 100644 public/blog/images/deneyimlemeden-renmeniz-gereken-g-venlik-a-klar-img-1.jpg create mode 100644 public/blog/images/deneyimlemeden-renmeniz-gereken-g-venlik-a-klar-img-10.jpg create mode 100644 public/blog/images/deneyimlemeden-renmeniz-gereken-g-venlik-a-klar-img-2.jpg create mode 100644 public/blog/images/deneyimlemeden-renmeniz-gereken-g-venlik-a-klar-img-3.jpg create mode 100644 public/blog/images/deneyimlemeden-renmeniz-gereken-g-venlik-a-klar-img-4.jpg create mode 100644 public/blog/images/deneyimlemeden-renmeniz-gereken-g-venlik-a-klar-img-5.jpg create mode 100644 public/blog/images/deneyimlemeden-renmeniz-gereken-g-venlik-a-klar-img-6.jpg create mode 100644 public/blog/images/deneyimlemeden-renmeniz-gereken-g-venlik-a-klar-img-7.jpg create mode 100644 public/blog/images/deneyimlemeden-renmeniz-gereken-g-venlik-a-klar-img-8.jpg create mode 100644 public/blog/images/deneyimlemeden-renmeniz-gereken-g-venlik-a-klar-img-9.jpg create mode 100644 public/blog/images/docker-nedir-kahveni-al-docker-konu-uyoruz-cover.jpg create mode 100644 public/blog/images/docker-nedir-kahveni-al-docker-konu-uyoruz-img-1.jpg create mode 100644 public/blog/images/docker-nedir-kahveni-al-docker-konu-uyoruz-img-2.jpg create mode 100644 public/blog/images/docker-nedir-kahveni-al-docker-konu-uyoruz-img-3.jpg create mode 100644 public/blog/images/docker-nedir-kahveni-al-docker-konu-uyoruz-img-4.jpg create mode 100644 public/blog/images/docker-nedir-kahveni-al-docker-konu-uyoruz-img-5.jpg create mode 100644 public/blog/images/frontend-developer-2025-yol-haritas-ki-isel-bak-a-s-yla-cover.jpg create mode 100644 public/blog/images/frontend-developer-2025-yol-haritas-ki-isel-bak-a-s-yla-img-1.jpg create mode 100644 public/blog/images/frontend-developer-2025-yol-haritas-ki-isel-bak-a-s-yla-img-2.jpg create mode 100644 public/blog/images/frontend-developer-2025-yol-haritas-ki-isel-bak-a-s-yla-img-3.jpg create mode 100644 public/blog/images/frontend-developer-2025-yol-haritas-ki-isel-bak-a-s-yla-img-4.jpg create mode 100644 public/blog/images/frontend-developer-2025-yol-haritas-ki-isel-bak-a-s-yla-img-5.jpg create mode 100644 public/blog/images/frontend-developer-2025-yol-haritas-ki-isel-bak-a-s-yla-img-6.jpg create mode 100644 public/blog/images/frontend-mimarisinde-en-zor-k-s-m-karar-vermek-cover.jpg create mode 100644 public/blog/images/frontend-mimarisinde-en-zor-k-s-m-karar-vermek-img-1.jpg create mode 100644 public/blog/images/frontend-mimarisinde-en-zor-k-s-m-karar-vermek-img-2.jpg create mode 100644 public/blog/images/frontend-mimarisinde-en-zor-k-s-m-karar-vermek-img-3.jpg create mode 100644 public/blog/images/frontend-mimarisinde-en-zor-k-s-m-karar-vermek-img-4.jpg create mode 100644 public/blog/images/frontend-mimarisinde-en-zor-k-s-m-karar-vermek-img-5.jpg create mode 100644 public/blog/images/frontend-mimarisinde-en-zor-k-s-m-karar-vermek-img-6.jpg create mode 100644 public/blog/images/frontend-mimarisinde-en-zor-k-s-m-karar-vermek-img-7.jpg create mode 100644 public/blog/images/frontend-mimarisinde-en-zor-k-s-m-karar-vermek-img-8.jpg create mode 100644 public/blog/images/frontend-mimarisinde-en-zor-k-s-m-karar-vermek-img-9.jpg create mode 100644 public/blog/images/frontend-testing-ara-lar-jest-ve-cypress-ile-ba-lamak-cover.jpg create mode 100644 public/blog/images/frontend-testing-ara-lar-jest-ve-cypress-ile-ba-lamak-img-1.jpg create mode 100644 public/blog/images/frontend-testing-ara-lar-jest-ve-cypress-ile-ba-lamak-img-2.jpg create mode 100644 public/blog/images/frontend-testing-ara-lar-jest-ve-cypress-ile-ba-lamak-img-3.jpg create mode 100644 public/blog/images/frontend-testing-ara-lar-jest-ve-cypress-ile-ba-lamak-img-4.jpg create mode 100644 public/blog/images/gpt-5-geldi-openainin-yeni-modeli-neler-sunuyor-cover.jpg create mode 100644 public/blog/images/gpt-5-geldi-openainin-yeni-modeli-neler-sunuyor-img-1.jpg create mode 100644 public/blog/images/gpt-5-geldi-openainin-yeni-modeli-neler-sunuyor-img-2.jpg create mode 100644 public/blog/images/gpt-5-geldi-openainin-yeni-modeli-neler-sunuyor-img-3.jpg create mode 100644 public/blog/images/gpt-5-geldi-openainin-yeni-modeli-neler-sunuyor-img-4.jpg create mode 100644 public/blog/images/gpt-5-geldi-openainin-yeni-modeli-neler-sunuyor-img-5.jpg create mode 100644 public/blog/images/kullan-c-ara-t-rmas-ve-personas-olu-turma-tasar-m-n-gizli-kahramanlar-cover.jpg create mode 100644 public/blog/images/kullan-c-ara-t-rmas-ve-personas-olu-turma-tasar-m-n-gizli-kahramanlar-img-1.jpg create mode 100644 public/blog/images/kullan-c-ara-t-rmas-ve-personas-olu-turma-tasar-m-n-gizli-kahramanlar-img-2.jpg create mode 100644 public/blog/images/kullan-c-ara-t-rmas-ve-personas-olu-turma-tasar-m-n-gizli-kahramanlar-img-3.jpg create mode 100644 public/blog/images/mikro-etkile-imlerde-i-kon-kullan-m-cover.jpg create mode 100644 public/blog/images/mikro-etkile-imlerde-i-kon-kullan-m-img-1.jpg create mode 100644 public/blog/images/mikro-etkile-imlerde-i-kon-kullan-m-img-2.jpg create mode 100644 public/blog/images/mikro-etkile-imlerde-i-kon-kullan-m-img-3.jpg create mode 100644 public/blog/images/mikro-etkile-imlerde-i-kon-kullan-m-img-4.jpg create mode 100644 public/blog/images/next-js-15-gelmi-neler-de-i-ti-peki-cover.jpg create mode 100644 public/blog/images/next-js-15-gelmi-neler-de-i-ti-peki-img-1.jpg create mode 100644 public/blog/images/next-js-15-gelmi-neler-de-i-ti-peki-img-2.jpg create mode 100644 public/blog/images/next-js-15-gelmi-neler-de-i-ti-peki-img-3.jpg create mode 100644 public/blog/images/next-js-15-gelmi-neler-de-i-ti-peki-img-4.jpg create mode 100644 public/blog/images/next-js-15-gelmi-neler-de-i-ti-peki-img-5.jpg create mode 100644 public/blog/images/next-js-ile-edge-functions-h-zl-web-uygulamalar-nas-l-geli-tirilir-cover.jpg create mode 100644 public/blog/images/next-js-ile-edge-functions-h-zl-web-uygulamalar-nas-l-geli-tirilir-img-1.jpg create mode 100644 public/blog/images/next-js-ile-edge-functions-h-zl-web-uygulamalar-nas-l-geli-tirilir-img-2.jpg create mode 100644 public/blog/images/next-js-ile-edge-functions-h-zl-web-uygulamalar-nas-l-geli-tirilir-img-3.jpg create mode 100644 public/blog/images/next-js-ile-edge-functions-h-zl-web-uygulamalar-nas-l-geli-tirilir-img-4.jpg create mode 100644 public/blog/images/next-js-ile-edge-functions-h-zl-web-uygulamalar-nas-l-geli-tirilir-img-5.jpg create mode 100644 public/blog/images/next-js-ile-edge-functions-h-zl-web-uygulamalar-nas-l-geli-tirilir-img-6.jpg create mode 100644 public/blog/images/next-js-ile-edge-functions-h-zl-web-uygulamalar-nas-l-geli-tirilir-img-7.jpg create mode 100644 public/blog/images/react-ile-dinamik-bir-kullan-c-profil-sayfas-nas-l-tasarlan-r-cover.jpg create mode 100644 public/blog/images/react-ile-dinamik-bir-kullan-c-profil-sayfas-nas-l-tasarlan-r-img-1.jpg create mode 100644 public/blog/images/react-ile-dinamik-bir-kullan-c-profil-sayfas-nas-l-tasarlan-r-img-2.jpg create mode 100644 public/blog/images/react-ile-dinamik-bir-kullan-c-profil-sayfas-nas-l-tasarlan-r-img-3.jpg create mode 100644 public/blog/images/react-ile-dinamik-bir-kullan-c-profil-sayfas-nas-l-tasarlan-r-img-4.jpg create mode 100644 public/blog/images/react-native-nedir-avantajlar-ve-dezavantajlar-cover.jpg create mode 100644 public/blog/images/react-native-nedir-avantajlar-ve-dezavantajlar-img-1.jpg create mode 100644 public/blog/images/react-native-nedir-avantajlar-ve-dezavantajlar-img-2.jpg create mode 100644 public/blog/images/react-native-nedir-avantajlar-ve-dezavantajlar-img-3.jpg create mode 100644 public/blog/images/react-native-nedir-avantajlar-ve-dezavantajlar-img-4.jpg create mode 100644 public/blog/images/rss-ile-bilgi-ak-n-algoritmadan-uzakla-t-r-cover.jpg create mode 100644 public/blog/images/rss-ile-bilgi-ak-n-algoritmadan-uzakla-t-r-img-1.jpg create mode 100644 public/blog/images/rss-ile-bilgi-ak-n-algoritmadan-uzakla-t-r-img-2.jpg create mode 100644 public/blog/images/svelte-ile-i-lk-ad-mlar-react-ve-vueya-kar-h-zl-m-cover.jpg create mode 100644 public/blog/images/svelte-ile-i-lk-ad-mlar-react-ve-vueya-kar-h-zl-m-img-1.jpg create mode 100644 public/blog/images/svelte-ile-i-lk-ad-mlar-react-ve-vueya-kar-h-zl-m-img-2.jpg create mode 100644 public/blog/images/svelte-ile-i-lk-ad-mlar-react-ve-vueya-kar-h-zl-m-img-3.jpg create mode 100644 public/blog/images/svelte-ile-i-lk-ad-mlar-react-ve-vueya-kar-h-zl-m-img-4.jpg create mode 100644 public/blog/images/svelte-ile-i-lk-ad-mlar-react-ve-vueya-kar-h-zl-m-img-5.jpg create mode 100644 public/blog/images/tailwind-css-ile-tasar-m-s-recini-nas-l-h-zland-rabilirsiniz-cover.jpg create mode 100644 public/blog/images/tailwind-css-ile-tasar-m-s-recini-nas-l-h-zland-rabilirsiniz-img-1.jpg create mode 100644 public/blog/images/tailwind-css-ile-tasar-m-s-recini-nas-l-h-zland-rabilirsiniz-img-2.jpg create mode 100644 public/blog/images/tailwind-css-ile-tasar-m-s-recini-nas-l-h-zland-rabilirsiniz-img-3.jpg create mode 100644 public/blog/images/three-js-3-boyutlu-d-nyaya-merhaba-cover.jpg create mode 100644 public/blog/images/three-js-3-boyutlu-d-nyaya-merhaba-img-1.jpg create mode 100644 public/blog/images/three-js-3-boyutlu-d-nyaya-merhaba-img-2.jpg create mode 100644 public/blog/images/three-js-3-boyutlu-d-nyaya-merhaba-img-3.jpg create mode 100644 public/blog/images/typescript-ile-javascriptten-tsx-e-ge-i-ki-isel-bir-deneyim-cover.jpg create mode 100644 public/blog/images/typescript-ile-javascriptten-tsx-e-ge-i-ki-isel-bir-deneyim-img-1.jpg create mode 100644 public/blog/images/typescript-ile-javascriptten-tsx-e-ge-i-ki-isel-bir-deneyim-img-2.jpg create mode 100644 public/blog/images/ux-tasar-m-ve-i-nsan-psikolojisi-cover.jpg create mode 100644 public/blog/images/ux-tasar-m-ve-i-nsan-psikolojisi-img-1.jpg create mode 100644 public/blog/images/ux-tasar-m-ve-i-nsan-psikolojisi-img-2.jpg create mode 100644 public/blog/images/ux-tasar-m-ve-i-nsan-psikolojisi-img-3.jpg create mode 100644 public/blog/images/ux-tasar-m-ve-i-nsan-psikolojisi-img-4.jpg create mode 100644 public/blog/images/ux-tasar-m-ve-i-nsan-psikolojisi-img-5.jpg create mode 100644 public/blog/images/ux-tasar-m-ve-i-nsan-psikolojisi-img-6.jpg create mode 100644 public/blog/images/ux-tasar-m-ve-i-nsan-psikolojisi-img-7.jpg create mode 100644 public/blog/images/ux-tasar-m-ve-i-nsan-psikolojisi-img-8.jpg create mode 100644 public/blog/images/ux-tasar-m-ve-i-nsan-psikolojisi-img-9.jpg create mode 100644 public/blog/images/webpack-vs-vite-frontend-projelerinde-build-ara-lar-kar-la-t-rmas-cover.jpg create mode 100644 public/blog/images/webpack-vs-vite-frontend-projelerinde-build-ara-lar-kar-la-t-rmas-img-1.jpg create mode 100644 public/blog/images/webpack-vs-vite-frontend-projelerinde-build-ara-lar-kar-la-t-rmas-img-2.jpg create mode 100644 public/blog/images/webpack-vs-vite-frontend-projelerinde-build-ara-lar-kar-la-t-rmas-img-3.jpg create mode 100644 public/blog/images/webpack-vs-vite-frontend-projelerinde-build-ara-lar-kar-la-t-rmas-img-4.jpg create mode 100644 public/blog/images/yaz-l-m-d-nyas-nda-hitabet-sanat-n-n-g-c-i-leti-imin-yaz-l-m-d-nyas-na-e-etkisi-cover.jpg create mode 100644 public/blog/images/yaz-l-m-d-nyas-nda-hitabet-sanat-n-n-g-c-i-leti-imin-yaz-l-m-d-nyas-na-e-etkisi-img-1.jpg create mode 100644 public/blog/images/yaz-l-m-d-nyas-nda-hitabet-sanat-n-n-g-c-i-leti-imin-yaz-l-m-d-nyas-na-e-etkisi-img-2.jpg create mode 100644 public/blog/images/yaz-l-m-d-nyas-nda-hitabet-sanat-n-n-g-c-i-leti-imin-yaz-l-m-d-nyas-na-e-etkisi-img-3.jpg create mode 100644 public/blog/images/yaz-l-m-d-nyas-nda-hitabet-sanat-n-n-g-c-i-leti-imin-yaz-l-m-d-nyas-na-e-etkisi-img-4.jpg create mode 100644 public/blog/images/yaz-l-m-d-nyas-nda-hitabet-sanat-n-n-g-c-i-leti-imin-yaz-l-m-d-nyas-na-e-etkisi-img-5.jpg create mode 100644 public/blog/images/yaz-l-m-geli-tirme-s-re-lerinde-agile-ve-scrum-cover.jpg create mode 100644 public/blog/images/yaz-l-m-geli-tirme-s-re-lerinde-agile-ve-scrum-img-1.jpg create mode 100644 public/blog/images/yaz-l-m-geli-tirme-s-re-lerinde-agile-ve-scrum-img-2.jpg create mode 100644 public/blog/images/yaz-l-m-geli-tirme-s-re-lerinde-agile-ve-scrum-img-3.jpg create mode 100644 public/blog/images/yaz-l-m-geli-tirme-s-re-lerinde-agile-ve-scrum-img-4.jpg create mode 100644 public/blog/images/yaz-l-m-projelerinde-d-zen-ve-verimlilik-i-in-conventional-commits-nedir-cover.jpg create mode 100644 public/blog/images/yaz-l-m-projelerinde-d-zen-ve-verimlilik-i-in-conventional-commits-nedir-img-1.jpg create mode 100644 public/blog/images/yaz-l-m-projelerinde-d-zen-ve-verimlilik-i-in-conventional-commits-nedir-img-2.jpg create mode 100644 scripts/cleanup-posts.mjs create mode 100644 scripts/fetch-medium-all.mjs create mode 100644 scripts/test-medium-scraper.mjs 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: + +