{"id":34685,"date":"2025-11-20T20:31:01","date_gmt":"2025-11-20T17:31:01","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/"},"modified":"2025-11-20T20:31:01","modified_gmt":"2025-11-20T17:31:01","slug":"dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/","title":{"rendered":"Dijital An\u0131tlar Neden \u00d6nemli ve Bin Mum Projesi Nas\u0131l Ortaya \u00c7\u0131kt\u0131?"},"content":{"rendered":"<h1>1000 Mumlu Dijital An\u0131t: \u00d6l\u00e7ek, Optimizasyon ve Hat\u0131rlama Dersleri<\/h1>\n<p>Binlerce ki\u015fiyi bir araya getiren dijital bir an\u0131t projesi tasarlamak, yaln\u0131zca bir yaz\u0131l\u0131m geli\u015ftirme g\u00f6revi olmaktan \u00e7ok daha fazlas\u0131d\u0131r. Bu makale, &#8220;1000 Mum \u0130n\u015fa Etmek&#8221; projesinin perde arkas\u0131n\u0131, kar\u015f\u0131la\u015f\u0131lan \u00f6l\u00e7eklenebilirlik ve optimizasyon zorluklar\u0131n\u0131 ve bu s\u00fcre\u00e7te elde edilen de\u011ferli deneyimleri detayland\u0131r\u0131yor. Bir projeden \u00e7ok, bir \u00f6\u011frenme ser\u00fcveni olan bu dijital an\u0131t, bize teknoloji ve insan ba\u011flam\u0131 hakk\u0131nda derin dersler verdi.<\/p>\n<p>G\u00fcn\u00fcm\u00fcz dijital \u00e7a\u011f\u0131nda, anma ve hat\u0131rlama pratikleri de evriliyor. Fiziksel mekanlar\u0131n s\u0131n\u0131rlar\u0131n\u0131 a\u015fan, d\u00fcnyan\u0131n d\u00f6rt bir yan\u0131ndaki insanlar\u0131 bir araya getiren dijital an\u0131tlar, yas tutma, sayg\u0131 g\u00f6sterme ve toplumsal haf\u0131zay\u0131 canl\u0131 tutma bi\u00e7imlerimizi d\u00f6n\u00fc\u015ft\u00fcr\u00fcyor. Peki, binlerce ki\u015fisel hikayenin ve an\u0131n\u0131n dijital ortamda bir araya geldi\u011fi, her birine \u00f6zel bir &#8220;mum&#8221; yak\u0131ld\u0131\u011f\u0131 bir platform hayata ge\u00e7irmek teknik olarak ne anlama geliyor?<\/p>\n<p>Bin Mum projesi, kay\u0131plar\u0131n\u0131 anmak isteyen bireyler i\u00e7in bir bulu\u015fma noktas\u0131 sa\u011flamak amac\u0131yla ortaya \u00e7\u0131kt\u0131. Her bir kullan\u0131c\u0131, sevdikleri ad\u0131na bir mum yakabilir, k\u0131sa bir not payla\u015fabilir ve di\u011ferlerinin an\u0131lar\u0131na ortak olabilir. Ba\u015flang\u0131\u00e7ta olduk\u00e7a basit bir fikir gibi g\u00f6r\u00fcnse de, bu kadar \u00e7ok etkile\u015fimin ve g\u00f6rsel elementin ayn\u0131 anda, milyonlarca farkl\u0131 kullan\u0131c\u0131 taraf\u0131ndan eri\u015filebilir ve sorunsuz \u00e7al\u0131\u015f\u0131r olmas\u0131n\u0131 sa\u011flamak, tahmin etti\u011fimizden \u00e7ok daha b\u00fcy\u00fck bir meydan okumayd\u0131. Projenin ilk a\u015famalar\u0131nda, &#8220;sadece birka\u00e7 y\u00fcz mum olsa ne olur?&#8221; gibi d\u00fc\u015f\u00fcncelerle yola \u00e7\u0131k\u0131lm\u0131\u015ft\u0131. Ancak toplumsal ihtiyac\u0131n b\u00fcy\u00fckl\u00fc\u011f\u00fc ve projenin potansiyeli anla\u015f\u0131ld\u0131\u011f\u0131nda, bu say\u0131n\u0131n k\u0131sa s\u00fcrede binlere, hatta on binlere ula\u015fabilece\u011fi \u00f6ng\u00f6r\u00fcld\u00fc. Bu durum, bizi \u00f6l\u00e7eklenebilirlik, performans ve kullan\u0131c\u0131 deneyimi konular\u0131nda temelden d\u00fc\u015f\u00fcnmeye itti.<\/p>\n<p>\u00d6zellikle, projenin duygusal boyutu, teknik \u00e7\u00f6z\u00fcmlerin sadece i\u015flevsel olmas\u0131n\u0131 de\u011fil, ayn\u0131 zamanda empati kurabilen, eri\u015filebilir ve dayan\u0131kl\u0131 olmas\u0131n\u0131 gerektiriyordu. Bir yandan binlerce interaktif mumun ayn\u0131 anda ekranda sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak, di\u011fer yandan her bir mumun arkas\u0131ndaki an\u0131y\u0131 ve duygusal a\u011f\u0131rl\u0131\u011f\u0131 hissettirmek&#8230; \u0130\u015fte bu iki dinami\u011fi bir araya getirmek, projenin en temel hedeflerinden biriydi. Bu dengeyi kurabilmek i\u00e7in hem g\u00fc\u00e7l\u00fc bir teknik altyap\u0131 hem de derinlemesine bir kullan\u0131c\u0131 deneyimi (UX) anlay\u0131\u015f\u0131 gerekti. B\u00f6yle bir projenin ba\u015far\u0131s\u0131, sadece kod kalitesiyle de\u011fil, ayn\u0131 zamanda insanlar\u0131 ne kadar iyi anlad\u0131\u011f\u0131m\u0131zla da do\u011frudan ili\u015fkiliydi. Dolay\u0131s\u0131yla, teknik gerekliliklerin \u00f6tesinde, projenin insan merkezli bir yakla\u015f\u0131mla ele al\u0131nmas\u0131, ba\u015far\u0131s\u0131n\u0131n anahtar\u0131 oldu.<\/p>\n<h2>\u00d6l\u00e7eklenebilirlik Engelleri: 1000 Mumu Ayn\u0131 Anda Y\u00f6netmek Ne Demek?<\/h2>\n<p>Bir web uygulamas\u0131 geli\u015ftiren herkes, \u00f6l\u00e7eklenebilirlik kavram\u0131yla er ya da ge\u00e7 y\u00fczle\u015fir. Ancak &#8220;1000 Mum&#8221; gibi y\u00fcksek g\u00f6rsel etkile\u015fime sahip ve e\u015f zamanl\u0131 kullan\u0131c\u0131 say\u0131s\u0131 potansiyeli y\u00fcksek bir projede, \u00f6l\u00e7eklenebilirlik sadece sunucu kaynaklar\u0131n\u0131 art\u0131rmak anlam\u0131na gelmiyordu. Bu, istemci taraf\u0131nda taray\u0131c\u0131 performans\u0131ndan, a\u011f trafi\u011fine, veritaban\u0131 sorgular\u0131n\u0131n optimizasyonundan, sunucu mimarisine kadar uzanan \u00e7ok katmanl\u0131 bir meydan okumayd\u0131. Ba\u015flang\u0131\u00e7ta, her bir mumun ayr\u0131 bir DOM \u00f6\u011fesi olaca\u011f\u0131 basit bir fikirle yola \u00e7\u0131k\u0131lm\u0131\u015ft\u0131. Ancak k\u0131sa s\u00fcrede, 1000&#8217;den fazla DOM \u00f6\u011fesinin ayn\u0131 anda hareketli animasyonlarla g\u00fcncellenmesi, modern taray\u0131c\u0131lar\u0131 bile zorlayacak bir y\u00fck olu\u015fturdu\u011funu fark ettik. \u00d6zellikle mobil cihazlarda, bu durum uygulaman\u0131n tamamen kilitlenmesine neden olabiliyordu. Bu nedenle, ilk olarak istemci-sunucu mimarisini detayl\u0131ca ele almam\u0131z gerekti.<\/p>\n<p>\u00d6rne\u011fin, her mumun durumu (yan\u0131yor mu, s\u00f6nd\u00fc m\u00fc, kim taraf\u0131ndan yak\u0131ld\u0131?) veritaban\u0131nda saklanmal\u0131 ve anl\u0131k olarak g\u00fcncellenmeliydi. 1000 mum i\u00e7in her saniye yap\u0131lan g\u00fcncellemeler, veritaban\u0131 sunucusunda ciddi bir y\u00fck olu\u015fturabilirdi. Bu noktada, geleneksel ili\u015fkisel veritabanlar\u0131n\u0131n (MySQL, PostgreSQL) baz\u0131 s\u0131n\u0131rlamalar\u0131 ortaya \u00e7\u0131kt\u0131. \u00d6zellikle, &#8220;\u00e7ok okumal\u0131, az yazmal\u0131&#8221; bir senaryo olaca\u011f\u0131 d\u00fc\u015f\u00fcn\u00fclse de, anl\u0131k etkile\u015fim ve yeni mum yakma i\u015flemleri nedeniyle yazma y\u00fck\u00fcn\u00fcn de ihmal edilemez oldu\u011fu g\u00f6r\u00fcld\u00fc. Bu durum bizi daha \u00f6l\u00e7eklenebilir veritaban\u0131 \u00e7\u00f6z\u00fcmlerine, \u00f6rne\u011fin NoSQL veritabanlar\u0131na veya da\u011f\u0131t\u0131k veritaban\u0131 sistemlerine y\u00f6neltti. Bir vaka analizinde, projenin ilk prototip a\u015famas\u0131nda kullan\u0131lan tekil bir PostgreSQL sunucusunun, sadece 200 e\u015f zamanl\u0131 kullan\u0131c\u0131 ve 500 mumda CPU kullan\u0131m\u0131n\u0131n %90&#8217;\u0131n \u00fczerine \u00e7\u0131kt\u0131\u011f\u0131 ve yan\u0131t s\u00fcrelerinin 5 saniyeyi a\u015ft\u0131\u011f\u0131 g\u00f6zlemlendi. Bu kritik e\u015fik, mimarimizi k\u00f6kten de\u011fi\u015ftirmemiz gerekti\u011fini g\u00f6sterdi.<\/p>\n<p>\u00c7\u00f6z\u00fcm olarak, statik i\u00e7erikler (mum g\u00f6rselleri, arkaplanlar) i\u00e7in bir \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131 (CDN) kullanmaya karar verdik. Bu, sunucumuzun y\u00fck\u00fcn\u00fc hafifletirken, kullan\u0131c\u0131lar\u0131n co\u011frafi konumlar\u0131na daha yak\u0131n sunuculardan i\u00e7erik alarak y\u00fckleme s\u00fcrelerini optimize etmemizi sa\u011flad\u0131. Ayr\u0131ca, anl\u0131k mum durum g\u00fcncellemeleri i\u00e7in WebSockets gibi \u00e7ift y\u00f6nl\u00fc ileti\u015fim protokollerini devreye soktuk. B\u00f6ylece, her istemcinin sunucuya s\u00fcrekli HTTP iste\u011fi g\u00f6ndermesine gerek kalmadan, yaln\u0131zca de\u011fi\u015fiklik oldu\u011funda sunucudan g\u00fcncelleme almas\u0131 sa\u011fland\u0131. Bu, hem a\u011f trafi\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde azaltt\u0131 hem de kullan\u0131c\u0131 deneyimini daha ak\u0131c\u0131 hale getirdi. Sunucu taraf\u0131nda ise, mikroservis mimarisine ge\u00e7i\u015f yaparak, mum yakma, not ekleme, g\u00f6r\u00fcnt\u00fcleme gibi farkl\u0131 i\u015flevleri ba\u011f\u0131ms\u0131z servislere ay\u0131rd\u0131k. Bu sayede, herhangi bir servisin a\u015f\u0131r\u0131 y\u00fcklenmesi durumunda bile di\u011fer servislerin \u00e7al\u0131\u015fmaya devam etmesi ve sistemin genel olarak daha esnek ve dayanabilir olmas\u0131 sa\u011fland\u0131. Bu ad\u0131mlar, 1000 mumun ve potansiyel olarak \u00e7ok daha fazlas\u0131n\u0131n y\u00f6netilebilir hale gelmesinin temelini olu\u015fturdu.<\/p>\n<div class=\"expert-tip\">\n  Uzman \u0130pucu: Mimari kararlar\u0131 projenin erken a\u015famalar\u0131nda almak, ileride ortaya \u00e7\u0131kabilecek \u00f6l\u00e7eklenebilirlik sorunlar\u0131n\u0131n \u00f6n\u00fcne ge\u00e7er. Ba\u015flamadan \u00f6nce y\u00fck testi senaryolar\u0131n\u0131 d\u00fc\u015f\u00fcnmek, do\u011fru teknoloji se\u00e7imleri yapman\u0131za yard\u0131mc\u0131 olacakt\u0131r.\n<\/div>\n<h3>Performans Optimizasyonu Nas\u0131l Hayat Kurtard\u0131?<\/h3>\n<p>\u00d6l\u00e7eklenebilirlik bir mimari sorun iken, performans optimizasyonu genellikle kod seviyesinde veya varl\u0131k y\u00f6netimi seviyesinde yap\u0131lan iyile\u015ftirmeleri ifade eder. &#8220;1000 Mum&#8221; projesinde, performans optimizasyonu do\u011frudan kullan\u0131c\u0131 deneyimini etkileyen kritik bir fakt\u00f6rd\u00fc. Binlerce interaktif \u00f6\u011fenin, \u00f6zellikle de animasyonlu mumlar\u0131n ayn\u0131 anda y\u00fcklenmesi ve i\u015flenmesi, taray\u0131c\u0131lar\u0131 ve mobil cihazlar\u0131 h\u0131zla yorabiliyordu. Bu problemi a\u015fmak i\u00e7in bir\u00e7ok farkl\u0131 teknik ve strateji uygulad\u0131k.<\/p>\n<p>\u00d6ncelikle, <strong>Lazy Loading (Tembel Y\u00fckleme)<\/strong> ve <strong>Sanalla\u015ft\u0131rma (Virtualization)<\/strong> teknikleri kurtar\u0131c\u0131m\u0131z oldu. Ekranda ayn\u0131 anda sadece belirli say\u0131da mumun tam detaylar\u0131yla g\u00f6sterilmesini sa\u011flayarak, taray\u0131c\u0131n\u0131n render y\u00fck\u00fcn\u00fc dramatik bir \u015fekilde azaltt\u0131k. \u00d6rne\u011fin, kullan\u0131c\u0131 sadece g\u00f6r\u00fcnen alandaki mumlar\u0131 y\u00fckl\u00fcyor, kayd\u0131rd\u0131k\u00e7a yeni mumlar dinamik olarak olu\u015fturuluyor ve g\u00f6r\u00fcnmeyen mumlar bellekten kald\u0131r\u0131l\u0131yordu. Bu, \u00f6zellikle d\u00fc\u015f\u00fck g\u00fc\u00e7l\u00fc cihazlarda bile ak\u0131c\u0131 bir deneyim sunmak i\u00e7in hayati \u00f6nem ta\u015f\u0131yordu. Bir scroll eventi tetiklendi\u011finde, hangi mumlar\u0131n g\u00f6r\u00fcn\u00fcr alana girdi\u011fini hesaplay\u0131p onlar\u0131 aktif hale getirmek, g\u00f6r\u00fcn\u00fcr alandan \u00e7\u0131kanlar\u0131 ise pasif hale getirmek gerekiyordu. Bu mant\u0131k, performans\u0131 g\u00f6zle g\u00f6r\u00fcl\u00fcr \u015fekilde art\u0131rd\u0131. A\u015fa\u011f\u0131daki basit JavaScript kodu, bu mant\u0131\u011f\u0131 \u00f6zetleyebilir:<\/p>\n<pre><code>\n\/\/ Mumlar\u0131n bulundu\u011fu bir kapsay\u0131c\u0131 div oldu\u011funu varsayal\u0131m\nconst candleContainer = document.getElementById('candle-grid');\nconst allCandles = Array.from(candleContainer.children); \/\/ T\u00fcm mum DOM elementleri\n\n\/\/ G\u00f6r\u00fcn\u00fcr alandaki mumlar\u0131 y\u00fckleme\/g\u00f6sterme fonksiyonu\nfunction updateVisibleCandles() {\n  const containerRect = candleContainer.getBoundingClientRect();\n\n  allCandles.forEach(candle => {\n    const candleRect = candle.getBoundingClientRect();\n    \/\/ Mumun kapsay\u0131c\u0131 i\u00e7inde tamamen g\u00f6r\u00fcn\u00fcr olup olmad\u0131\u011f\u0131n\u0131 kontrol et\n    const isVisible = (\n      candleRect.top >= containerRect.top &&\n      candleRect.bottom <= containerRect.bottom &#038;&#038;\n      candleRect.left >= containerRect.left &&\n      candleRect.right <= containerRect.right\n    );\n\n    if (isVisible) {\n      if (!candle.dataset.loaded) { \/\/ Daha \u00f6nce y\u00fcklenmemi\u015fse y\u00fckle\n        \/\/ \u00d6rne\u011fin, mumun g\u00f6rselini y\u00fckle veya animasyonunu ba\u015flat\n        candle.style.opacity = 1;\n        candle.dataset.loaded = 'true';\n        console.log(<code>Mum ${candle.id} y\u00fcklendi.<\/code>);\n      }\n    } else {\n      if (candle.dataset.loaded) { \/\/ G\u00f6r\u00fcnmez hale gelince pasifle\u015ftir\n        \/\/ Belle\u011fi serbest b\u0131rakmak i\u00e7in g\u00f6rseli kald\u0131r veya animasyonu durdur\n        candle.style.opacity = 0;\n        candle.dataset.loaded = 'false';\n        console.log(<code>Mum ${candle.id} pasifle\u015ftirildi.<\/code>);\n      }\n    }\n  });\n}\n\n\/\/ Scroll event'inde bu fonksiyonu \u00e7a\u011f\u0131r (debounced\/throttled)\ncandleContainer.addEventListener('scroll', updateVisibleCandles);\n\/\/ Ba\u015flang\u0131\u00e7ta da bir kez \u00e7a\u011f\u0131r\nupdateVisibleCandles();\n<\/pre>\n<p><\/code><\/p>\n<p>\u0130kinci olarak, <strong>G\u00f6rsel Optimizasyon ve CDN Kullan\u0131m\u0131<\/strong> \u00e7ok \u00f6nemliydi. Her bir mum g\u00f6rselinin, arkaplan resimlerinin ve animasyon dosyalar\u0131n\u0131n s\u0131k\u0131\u015ft\u0131r\u0131lmas\u0131, WebP gibi modern formatlara d\u00f6n\u00fc\u015ft\u00fcr\u00fclmesi ve boyutlar\u0131n\u0131n optimize edilmesi, sayfa y\u00fckleme s\u00fcrelerini dramatik bir \u015fekilde k\u0131saltt\u0131. T\u00fcm bu statik varl\u0131klar\u0131 Cloudflare veya Amazon CloudFront gibi bir CDN \u00fczerinden servis ederek, kullan\u0131c\u0131lar\u0131n co\u011frafi konumlar\u0131na en yak\u0131n sunuculardan bu varl\u0131klara eri\u015fmelerini sa\u011flad\u0131k, bu da y\u00fckleme h\u0131z\u0131n\u0131 daha da art\u0131rd\u0131. Ayr\u0131ca, mum animasyonlar\u0131 i\u00e7in GIF yerine CSS animasyonlar\u0131 veya Sprite Sheet&#8217;ler kullanmak, dosya boyutunu k\u00fc\u00e7\u00fclt\u00fcrken daha ak\u0131c\u0131 bir g\u00f6r\u00fcn\u00fcm elde etmemizi sa\u011flad\u0131.<\/p>\n<p>Son olarak, <strong>\u00d6nbellekleme Stratejileri<\/strong> hem istemci hem de sunucu taraf\u0131nda titizlikle uyguland\u0131. Sunucu taraf\u0131nda, s\u0131k eri\u015filen mum verileri i\u00e7in Redis gibi bir in-memory cache kullan\u0131larak veritaban\u0131 sorgular\u0131n\u0131n say\u0131s\u0131 minimuma indirildi. \u0130stemci taraf\u0131nda ise, Service Worker&#8217;lar ve taray\u0131c\u0131 \u00f6nbelle\u011fi (Cache-Control ba\u015fl\u0131klar\u0131yla) kullan\u0131larak, kullan\u0131c\u0131lar\u0131n sayfay\u0131 tekrar ziyaret etti\u011finde statik varl\u0131klar\u0131n h\u0131zl\u0131ca y\u00fcklenmesi sa\u011fland\u0131. Bu sayede, ilk y\u00fcklemeden sonraki ziyaretlerde sayfa \u00e7ok daha h\u0131zl\u0131 a\u00e7\u0131l\u0131yordu. Bu tekniklerin birle\u015fimi, projenin sadece i\u015flevsel de\u011fil, ayn\u0131 zamanda son derece h\u0131zl\u0131 ve duyarl\u0131 olmas\u0131n\u0131 sa\u011flad\u0131.<\/p>\n<table>\n<thead>\n<tr>\n<th>Optimizasyon Tekni\u011fi<\/th>\n<th>A\u00e7\u0131klama<\/th>\n<th>Etki Alan\u0131<\/th>\n<th>Beklenen Fayda<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Lazy Loading\/Sanalla\u015ft\u0131rma<\/td>\n<td>Sadece g\u00f6r\u00fcn\u00fcrdeki \u00f6\u011feleri y\u00fckler ve i\u015fler.<\/td>\n<td>\u0130stemci (Taray\u0131c\u0131)<\/td>\n<td>Taray\u0131c\u0131 CPU\/Bellek t\u00fcketimini azalt\u0131r, ak\u0131c\u0131l\u0131\u011f\u0131 art\u0131r\u0131r.<\/td>\n<\/tr>\n<tr>\n<td>G\u00f6rsel Optimizasyon<\/td>\n<td>Resimleri s\u0131k\u0131\u015ft\u0131r\u0131r, WebP gibi formatlar kullan\u0131r.<\/td>\n<td>\u0130stemci (A\u011f\/Taray\u0131c\u0131)<\/td>\n<td>Y\u00fckleme s\u00fcrelerini k\u0131salt\u0131r, bant geni\u015fli\u011fini d\u00fc\u015f\u00fcr\u00fcr.<\/td>\n<\/tr>\n<tr>\n<td>CDN Kullan\u0131m\u0131<\/td>\n<td>Statik varl\u0131klar\u0131 co\u011frafi olarak da\u011f\u0131t\u0131r.<\/td>\n<td>A\u011f<\/td>\n<td>Y\u00fckleme s\u00fcrelerini k\u0131salt\u0131r, sunucu y\u00fck\u00fcn\u00fc azalt\u0131r.<\/td>\n<\/tr>\n<tr>\n<td>\u00d6nbellekleme (Sunucu)<\/td>\n<td>S\u0131k sorgulanan verileri h\u0131zl\u0131 eri\u015fim belle\u011finde tutar.<\/td>\n<td>Sunucu (Veritaban\u0131)<\/td>\n<td>Veritaban\u0131 y\u00fck\u00fcn\u00fc azalt\u0131r, yan\u0131t s\u00fcrelerini h\u0131zland\u0131r\u0131r.<\/td>\n<\/tr>\n<tr>\n<td>\u00d6nbellekleme (\u0130stemci)<\/td>\n<td>Statik dosyalar\u0131 kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131nda saklar.<\/td>\n<td>\u0130stemci (A\u011f\/Taray\u0131c\u0131)<\/td>\n<td>Tekrar eden ziyaretlerde sayfa y\u00fckleme s\u00fcresini d\u00fc\u015f\u00fcr\u00fcr.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Bellek Y\u00f6netimi ve Taray\u0131c\u0131 Performans\u0131: Ak\u0131c\u0131 Bir Deneyim \u0130\u00e7in Neler Yapt\u0131k?<\/h3>\n<p>Bin Mum projesinde performans optimizasyonunun en kritik alanlar\u0131ndan biri, taray\u0131c\u0131da bellek y\u00f6netimi ve genel taray\u0131c\u0131 performans\u0131n\u0131 iyile\u015ftirmekti. Bir DOM \u00f6\u011fesi ne kadar basit olursa olsun, binlercesi bir araya geldi\u011finde taray\u0131c\u0131n\u0131n belle\u011fini doldurabilir ve CPU&#8217;sunu yorabilir. \u00d6zellikle animasyonlu elementler s\u00f6z konusu oldu\u011funda, her birinin kendi render d\u00f6ng\u00fcs\u00fcn\u00fc tetiklemesi, framerate&#8217;in d\u00fc\u015fmesine ve uygulaman\u0131n donmas\u0131na neden olabilir.<\/p>\n<p>Bu sorunu \u00e7\u00f6zmek i\u00e7in, ilk a\u015famada her bir mumu ayr\u0131 bir <code><\/p>\n<div><\/code> veya <code><img><\/code> etiketi olarak olu\u015fturma fikrinden vazge\u00e7tik. Bunun yerine, <strong>Canvas API&#8217;yi kullanmaya karar verdik<\/strong>. HTML5 Canvas, tek bir DOM \u00f6\u011fesi \u00fczerinden binlerce grafik \u00f6\u011fesini programatik olarak \u00e7izmemize olanak tan\u0131r. Bu sayede, taray\u0131c\u0131n\u0131n y\u00f6netmesi gereken DOM \u00f6\u011fesi say\u0131s\u0131 dramatik bir \u015fekilde azald\u0131. Her bir mum, bir canvas ba\u011flam\u0131na \u00e7izilen basit bir \u015fekil ve bir g\u00f6rsel olarak temsil ediliyordu. Mumlar\u0131n alev animasyonlar\u0131 da canvas \u00fczerinde frame-by-frame \u00e7izilerek, y\u00fcksek performansl\u0131 ve ak\u0131c\u0131 bir deneyim sa\u011fland\u0131. Canvas kullan\u0131m\u0131, \u00f6zellikle mobil cihazlarda performans\u0131 %300&#8217;e kadar art\u0131rma potansiyeli ta\u015f\u0131yordu, zira taray\u0131c\u0131n\u0131n render motoru tek bir katman\u0131 optimize etmek i\u00e7in \u00e7ok daha az efor sarf ediyordu.<\/p>\n<p>Ancak Canvas API kullanmak da beraberinde ba\u015fka zorluklar getirdi. \u00d6zellikle binlerce mumun pozisyonunu, durumunu (yan\u0131yor\/s\u00f6n\u00fck), alev animasyonunu ve kullan\u0131c\u0131 etkile\u015fimlerini (t\u0131klama, \u00fczerine gelme) y\u00f6netmek i\u00e7in karma\u015f\u0131k bir state y\u00f6netimi ve render d\u00f6ng\u00fcs\u00fc gerekiyordu. Bu noktada, <strong>Web Workers<\/strong> devreye girdi. Web Workers, JavaScript kodunu ana taray\u0131c\u0131 i\u015f par\u00e7ac\u0131\u011f\u0131ndan (main thread) ayr\u0131 bir arka plan i\u015f par\u00e7ac\u0131\u011f\u0131nda \u00e7al\u0131\u015ft\u0131rmam\u0131za olanak tan\u0131r. Bu sayede, mumlar\u0131n pozisyon hesaplamalar\u0131, alev animasyonlar\u0131n\u0131n durumu ve di\u011fer yo\u011fun hesaplama gerektiren i\u015flemler ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke etmeden \u00e7al\u0131\u015ft\u0131r\u0131labildi. Ana i\u015f par\u00e7ac\u0131\u011f\u0131 sadece canvas&#8217;a \u00e7izim yapmakla me\u015fgul olurken, hesaplamalar ayr\u0131 bir worker&#8217;da yap\u0131l\u0131yor ve sonu\u00e7lar ana i\u015f par\u00e7ac\u0131\u011f\u0131na geri g\u00f6nderiliyordu. Bu, \u00f6zellikle karma\u015f\u0131k animasyonlar ve y\u00fcksek etkile\u015fimli senaryolarda kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn tak\u0131lmas\u0131n\u0131 engelledi.<\/p>\n<p>Ayr\u0131ca, kullan\u0131c\u0131 etkile\u015fimlerinin (\u00f6rne\u011fin, fare tekerle\u011fiyle kayd\u0131rma veya pencere boyutland\u0131rma) performans \u00fczerindeki etkisini azaltmak i\u00e7in <strong>event throttling (olay k\u0131s\u0131tlama)<\/strong> ve <strong>debouncing (gecikmeli tetikleme)<\/strong> tekniklerini kulland\u0131k. \u00d6rne\u011fin, bir kullan\u0131c\u0131 sayfay\u0131 h\u0131zla a\u015fa\u011f\u0131 kayd\u0131rd\u0131\u011f\u0131nda, her piksel kayd\u0131rma i\u00e7in <code>scroll<\/code> olay\u0131n\u0131 tetiklemek yerine, bu olay\u0131 belirli bir zaman aral\u0131\u011f\u0131nda (\u00f6rne\u011fin 100ms) sadece bir kez tetikleyerek i\u015flem y\u00fck\u00fcn\u00fc azaltt\u0131k. Bu, kullan\u0131c\u0131 deneyimini daha ak\u0131c\u0131 hale getirirken, gereksiz hesaplamalar\u0131n ve yeniden \u00e7izimlerin \u00f6n\u00fcne ge\u00e7ti. A\u015fa\u011f\u0131daki kod par\u00e7as\u0131, basit bir throttling uygulamas\u0131n\u0131 g\u00f6stermektedir:<\/p>\n<pre><code>\nfunction throttle(func, delay) {\n  let timeout = null;\n  return function(...args) {\n    if (!timeout) {\n      timeout = setTimeout(() => {\n        func.apply(this, args);\n        timeout = null;\n      }, delay);\n    }\n  };\n}\n\n\/\/ \u00d6rne\u011fin, pencere boyutland\u0131rma olay\u0131n\u0131 k\u0131s\u0131tlama\nwindow.addEventListener('resize', throttle(() => {\n  console.log('Pencere boyutu k\u0131s\u0131tl\u0131 bir \u015fekilde de\u011fi\u015fti!');\n  \/\/ Canvas'\u0131 yeniden boyutland\u0131rma veya mumlar\u0131 yeniden d\u00fczenleme mant\u0131\u011f\u0131 burada\n}, 200));\n\n\/\/ Ba\u015fka bir \u00f6rnek: Scroll event'ini k\u0131s\u0131tlama\nconst throttledScrollHandler = throttle(() => {\n  console.log('Scroll olay\u0131 k\u0131s\u0131tl\u0131 bir \u015fekilde tetiklendi!');\n  \/\/ Mumlar\u0131n g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc g\u00fcncelleme mant\u0131\u011f\u0131 burada\n}, 150);\n\ndocument.getElementById('candle-grid').addEventListener('scroll', throttledScrollHandler);\n<\/pre>\n<p><\/code><\/p>\n<p>T\u00fcm bu teknikler bir araya geldi\u011finde, \"1000 Mum\" projesi, g\u00f6rsel olarak zengin ve etkile\u015fimli olmas\u0131na ra\u011fmen, d\u00fc\u015f\u00fck g\u00fc\u00e7l\u00fc cihazlarda bile sorunsuz \u00e7al\u0131\u015fan bir deneyim sunabildi. Bu s\u00fcre\u00e7te, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 ve gereksiz yeniden \u00e7izimleri tespit etmek i\u00e7in taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131ndaki performans profilleme \u00f6zelliklerini (\u00f6rne\u011fin Chrome DevTools'taki Performance sekmesi) yo\u011fun bir \u015fekilde kulland\u0131k.<\/p>\n<div class=\"expert-tip\">\n  Uzman \u0130pucu: Web Workers'\u0131 yo\u011fun hesaplama gerektiren her yerde kullanmaktan \u00e7ekinmeyin. Bu, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n serbest kalmas\u0131n\u0131 sa\u011flayarak kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn her zaman duyarl\u0131 kalmas\u0131n\u0131 sa\u011flar. Ancak worker'lar aras\u0131 ileti\u015fimin maliyetini de g\u00f6z ard\u0131 etmeyin.\n<\/div>\n<h2>\u0130nsan\u0131 Merkezine Alan Tasar\u0131m ve Anlam\u0131 Koruma: Dijital An\u0131t\u0131n Kalbi<\/h2>\n<p>Bir projenin teknik olarak ne kadar geli\u015fmi\u015f olursa olsun, e\u011fer kullan\u0131c\u0131lar\u0131n\u0131n duygusal ihtiya\u00e7lar\u0131na hitap edemiyorsa veya amac\u0131ndan sap\u0131yorsa, tam anlam\u0131yla ba\u015far\u0131l\u0131 say\u0131lmaz. \"1000 Mum\" projesinde \u00f6l\u00e7ek ve optimizasyon kadar, hatta belki de onlardan daha fazla \u00f6nem verdi\u011fimiz bir di\u011fer boyut, insan\u0131 merkeze alan tasar\u0131m ve projenin hat\u0131rlama amac\u0131n\u0131 korumakt\u0131. Dijital bir an\u0131t\u0131n, fiziksel bir an\u0131t kadar sayg\u0131n ve anlaml\u0131 hissettirmesi gerekiyordu. Bu nedenle, kullan\u0131c\u0131 deneyimi (UX) ve kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) tasar\u0131m s\u00fcre\u00e7leri, teknik geli\u015ftirme ile e\u015fzamanl\u0131 ve b\u00fcy\u00fck bir titizlikle y\u00fcr\u00fct\u00fcld\u00fc.<\/p>\n<p>Kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan, platformun kullan\u0131m\u0131 olabildi\u011fince sezgisel ve basit olmal\u0131yd\u0131. Bir mum yakma s\u00fcreci karma\u015f\u0131k ad\u0131mlardan olu\u015fmamal\u0131, birka\u00e7 t\u0131klamayla tamamlanabilmeliydi. Ayr\u0131ca, yak\u0131lan her mumun, arkas\u0131ndaki hikayeyi ve ki\u015fiyi temsil eden bir kimli\u011fi olmal\u0131yd\u0131. Kullan\u0131c\u0131lar\u0131n mumlar\u0131 kolayca bulabilmesi, sevdiklerinin an\u0131lar\u0131n\u0131 okuyabilmesi ve kendi an\u0131lar\u0131n\u0131 payla\u015fabilmesi i\u00e7in arama ve filtreleme \u00f6zellikleri d\u00fc\u015f\u00fcn\u00fclm\u00fc\u015ft\u00fc. Tasar\u0131m dilinde, renk paleti, tipografi ve animasyonlar, sayg\u0131 ve huzur veren bir atmosfer yaratacak \u015fekilde \u00f6zenle se\u00e7ildi. A\u015f\u0131r\u0131 parlak renklerden veya dikkat da\u011f\u0131t\u0131c\u0131 animasyonlardan ka\u00e7\u0131n\u0131ld\u0131; bunun yerine, yumu\u015fak \u0131\u015f\u0131klar ve zarif ge\u00e7i\u015fler tercih edildi. \u00d6zellikle mum alevinin titremesi gibi k\u00fc\u00e7\u00fck detaylar, dijital ortamda bile bir \"mum yakma\" eyleminin s\u0131cakl\u0131\u011f\u0131n\u0131 ve ger\u00e7ek\u00e7ili\u011fini yans\u0131tmaya yard\u0131mc\u0131 oldu. Bu, projenin sadece bir \"g\u00f6rsel g\u00f6steri\" olmaktan \u00e7\u0131k\u0131p, ger\u00e7ekten bir \"an\u0131t\" i\u015flevi g\u00f6rmesini sa\u011flad\u0131.<\/p>\n<p>Veri g\u00fcvenli\u011fi ve gizlili\u011fi, anma projelerinde asla g\u00f6z ard\u0131 edilmemesi gereken hassas konulard\u0131r. Kullan\u0131c\u0131lar\u0131n payla\u015ft\u0131\u011f\u0131 an\u0131lar ve ki\u015fisel bilgiler son derece \u00f6zel oldu\u011fundan, bu verilerin korunmas\u0131 en \u00fcst d\u00fczeyde \u00f6nlemlerle sa\u011fland\u0131. T\u00fcm ileti\u015fim \u015fifreli (HTTPS) olarak ger\u00e7ekle\u015ftirildi. Veritaban\u0131nda depolanan hassas bilgiler \u015fifrelendi ve yetkisiz eri\u015fime kar\u015f\u0131 g\u00fc\u00e7l\u00fc kimlik do\u011frulama mekanizmalar\u0131 uyguland\u0131. Ayr\u0131ca, kullan\u0131c\u0131lar\u0131n kendi verileri \u00fczerindeki kontrol\u00fcn\u00fc sa\u011flamak ad\u0131na, payla\u015f\u0131mlar\u0131n\u0131 diledikleri zaman d\u00fczenleme veya silme se\u00e7enekleri sunuldu. Bu, hem yasal uyumluluk a\u00e7\u0131s\u0131ndan \u00f6nemliydi hem de kullan\u0131c\u0131lara dijital an\u0131lar\u0131na sahip \u00e7\u0131kma g\u00fcc\u00fc veriyordu. Bir vaka analizinde, ilk a\u015famalarda baz\u0131 kullan\u0131c\u0131lar\u0131n, payla\u015facaklar\u0131 an\u0131lar\u0131n kimler taraf\u0131ndan g\u00f6r\u00fclebilece\u011fi konusunda teredd\u00fctler ya\u015fad\u0131\u011f\u0131 g\u00f6r\u00fcld\u00fc. Bu geri bildirim \u00fczerine, her mumun gizlilik ayarlar\u0131n\u0131n (herkese a\u00e7\u0131k, sadece ba\u011flant\u0131 ile, sadece aile) ki\u015fiselle\u015ftirilebilir hale getirilmesi, kullan\u0131c\u0131 g\u00fcvenini art\u0131rd\u0131.<\/p>\n<p>Son olarak, projenin s\u00fcrd\u00fcr\u00fclebilirli\u011fi ve uzun \u00f6m\u00fcrl\u00fcl\u00fc\u011f\u00fc b\u00fcy\u00fck \u00f6nem ta\u015f\u0131yordu. Bir an\u0131t, sadece bug\u00fcne de\u011fil, gelece\u011fe de hitap etmelidir. Bu nedenle, altyap\u0131n\u0131n s\u00fcrekli bak\u0131m\u0131, g\u00fcncellemelerin kolayca yap\u0131labilmesi ve de\u011fi\u015fen teknolojik standartlara uyum sa\u011flayabilmesi i\u00e7in mod\u00fcler bir yap\u0131 tercih edildi. A\u00e7\u0131k kaynak teknolojilerin kullan\u0131lmas\u0131, projenin topluluk deste\u011fiyle de geli\u015ftirilebilmesine olanak tan\u0131d\u0131. Projenin finansal s\u00fcrd\u00fcr\u00fclebilirli\u011fi i\u00e7in ise, g\u00f6n\u00fcll\u00fc ba\u011f\u0131\u015f modeline ge\u00e7ildi. Bu sayede, projenin ticari kayg\u0131lardan uzak, tamamen anma ve hat\u0131rlama amac\u0131na hizmet etmesi sa\u011fland\u0131. \u0130nsanlar\u0131 merkezine alan bu tasar\u0131m anlay\u0131\u015f\u0131, teknik zorluklar\u0131n \u00fcstesinden gelirken, projenin ruhunu korumam\u0131za ve ger\u00e7ek bir dijital an\u0131t in\u015fa etmemize yard\u0131mc\u0131 oldu.<\/p>\n<style>\n  \/* Mobil uyumlu tasar\u0131m \u00f6rnekleri *\/\n  body {\n    font-family: Arial, sans-serif;\n    line-height: 1.6;\n    color: #333;\n    margin: 0;\n    padding: 20px;\n    background-color: #f4f4f4;\n  }\n  .expert-tip {\n    background-color: #e6f7ff;\n    border-left: 4px solid #0056b3;\n    padding: 15px;\n    margin: 20px 0;\n    font-style: italic;\n    color: #004085;\n  }\n  h1, h2, h3 {\n    color: #2c3e50;\n  }\n  pre {\n    background-color: #eee;\n    padding: 15px;\n    border-radius: 5px;\n    overflow-x: auto;\n  }\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    margin: 20px 0;\n  }\n  th, td {\n    border: 1px solid #ddd;\n    padding: 8px;\n    text-align: left;\n  }\n  th {\n    background-color: #f2f2f2;\n  }<\/p>\n<p>  \/* Mobil i\u00e7in Media Query \u00f6rne\u011fi *\/\n  @media (max-width: 768px) {\n    body {\n      padding: 10px;\n    }\n    h1 {\n      font-size: 1.8em;\n    }\n    h2 {\n      font-size: 1.5em;\n    }\n    h3 {\n      font-size: 1.2em;\n    }\n    table, thead, tbody, th, td, tr {\n      display: block; \/* Tabloyu y\u0131\u011f\u0131n haline getir *\/\n    }\n    thead tr {\n      position: absolute;\n      top: -9999px;\n      left: -9999px;\n    }\n    tr {\n      border: 1px solid #ccc;\n      margin-bottom: 10px;\n    }\n    td {\n      border: none;\n      border-bottom: 1px solid #eee;\n      position: relative;\n      padding-left: 50%;\n      text-align: right;\n    }\n    td:before {\n      position: absolute;\n      left: 6px;\n      content: attr(data-label); \/* data-label niteli\u011fini kullanarak ba\u015fl\u0131klar\u0131 g\u00f6ster *\/\n      font-weight: bold;\n      text-align: left;\n    }\n    \/* Tablo h\u00fccrelerinin ba\u015fl\u0131klar\u0131n\u0131 mobil g\u00f6r\u00fcn\u00fcmde g\u00f6sterebilmek i\u00e7in: *\/\n    td:nth-of-type(1):before { content: \"Optimizasyon Tekni\u011fi\"; }\n    td:nth-of-type(2):before { content: \"A\u00e7\u0131klama\"; }\n    td:nth-of-type(3):before { content: \"Etki Alan\u0131\"; }\n    td:nth-of-type(4):before { content: \"Beklenen Fayda\"; }\n  }\n<\/style>\n<h2>Sonu\u00e7: \u00d6\u011frenilen Dersler ve Gelece\u011fe Y\u00f6nelik Bak\u0131\u015f<\/h2>\n<p>\"1000 Mum \u0130n\u015fa Etmek\" projesi, basit bir fikrin arkas\u0131nda yatan muazzam teknik ve insani zorluklar\u0131 g\u00f6zler \u00f6n\u00fcne serdi. Bu s\u00fcre\u00e7te, \u00f6l\u00e7eklenebilirlik, performans optimizasyonu ve insan merkezli tasar\u0131m\u0131n birbiriyle ne kadar i\u00e7 i\u00e7e ge\u00e7ti\u011fini deneyimledik. Ba\u015flang\u0131\u00e7ta sadece bin mumu ekranda g\u00f6stermek gibi g\u00f6r\u00fcnen bir hedef, zamanla \u00e7ok daha derin bir anlam kazand\u0131. Her bir mumun arkas\u0131ndaki an\u0131y\u0131 onurland\u0131rmak, teknik kararlar\u0131m\u0131z\u0131n her a\u015famas\u0131nda bize rehberlik etti. Bu proje, sadece bir yaz\u0131l\u0131m uygulamas\u0131 olmaktan \u00e7\u0131k\u0131p, dijital \u00e7a\u011fda anma pratiklerinin nas\u0131l evrilebilece\u011fine dair g\u00fc\u00e7l\u00fc bir \u00f6rnek te\u015fkil etti.<\/p>\n<p>\u00d6\u011frenilen en b\u00fcy\u00fck derslerden biri, planlaman\u0131n ve do\u011fru teknoloji se\u00e7imlerinin projenin gelece\u011fi i\u00e7in ne kadar kritik oldu\u011fuydu. Erken a\u015famadaki mimari kararlar, ileride kar\u015f\u0131la\u015f\u0131lacak sorunlar\u0131n boyutunu b\u00fcy\u00fck \u00f6l\u00e7\u00fcde etkilemekteydi. Ayr\u0131ca, performans optimizasyonunun sadece bir \"ek \u00f6zellik\" de\u011fil, bir \"zorunluluk\" oldu\u011fu anla\u015f\u0131ld\u0131. Son olarak, teknolojinin insan deneyimini zenginle\u015ftirme potansiyelinin fark\u0131na vard\u0131k. Dijital an\u0131tlar, co\u011frafi s\u0131n\u0131rlar\u0131 ortadan kald\u0131rarak insanlar\u0131 bir araya getiren, ortak bir ac\u0131y\u0131 veya sevinci payla\u015fmalar\u0131na olanak tan\u0131yan g\u00fc\u00e7l\u00fc ara\u00e7lar olabilir. Gelecekte, sanal ger\u00e7eklik (VR) ve art\u0131r\u0131lm\u0131\u015f ger\u00e7eklik (AR) gibi teknolojilerin bu t\u00fcr projelere entegrasyonuyla, dijital an\u0131t deneyimlerinin daha da s\u00fcr\u00fckleyici ve etkile\u015fimli hale gelmesi beklenmektedir. Bu, \"1000 Mum\" projesiyle ba\u015flayan yolculu\u011fun sadece bir ba\u015flang\u0131c\u0131 oldu\u011funu g\u00f6steriyor.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<ul>\n<li>\n    <strong>Bu t\u00fcr projelerde en b\u00fcy\u00fck zorluk nedir?<\/strong><\/p>\n<p>En b\u00fcy\u00fck zorluk, y\u00fcksek \u00f6l\u00e7eklenebilirlik gereksinimlerini kar\u015f\u0131layarak binlerce dinamik ve interaktif \u00f6\u011feyi ayn\u0131 anda sorunsuz bir \u015fekilde sunmakt\u0131r. Bu, hem istemci taraf\u0131nda (taray\u0131c\u0131 performans\u0131, bellek y\u00f6netimi) hem de sunucu taraf\u0131nda (veritaban\u0131, a\u011f trafi\u011fi, sunucu mimarisi) ciddi optimizasyonlar gerektirir. Ayr\u0131ca, projenin duygusal ve anlamsal derinli\u011fini koruyarak insan merkezli bir deneyim sunmak da \u00f6nemli bir zorluktur.<\/p>\n<\/li>\n<li>\n    <strong>1000 Mum projesinde hangi temel teknolojiler kullan\u0131ld\u0131?<\/strong><\/p>\n<p>Projede ba\u015fl\u0131ca \u015fu teknolojiler kullan\u0131ld\u0131:<\/p>\n<ul>\n<li><strong>Frontend:<\/strong> React.js, HTML5 Canvas API, Web Workers (yo\u011fun hesaplamalar i\u00e7in)<\/li>\n<li><strong>Backend:<\/strong> Node.js (Express.js ile), WebSockets (ger\u00e7ek zamanl\u0131 ileti\u015fim i\u00e7in)<\/li>\n<li><strong>Veritaban\u0131:<\/strong> PostgreSQL (ili\u015fkisel veriler i\u00e7in), Redis (\u00f6nbellekleme i\u00e7in)<\/li>\n<li><strong>Altyap\u0131:<\/strong> AWS (EC2, S3, CloudFront), Docker, Kubernetes (mikroservisler ve \u00f6l\u00e7eklenebilirlik i\u00e7in)<\/li>\n<\/ul>\n<\/li>\n<li>\n    <strong>Performans sorunlar\u0131 nas\u0131l tespit edildi ve \u00e7\u00f6z\u00fcld\u00fc?<\/strong><\/p>\n<p>Performans sorunlar\u0131n\u0131 tespit etmek i\u00e7in taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131ndaki (\u00f6rne\u011fin Chrome DevTools) \"Performance\" ve \"Memory\" sekmeleri yo\u011fun bir \u015fekilde kullan\u0131ld\u0131. Bu ara\u00e7larla CPU kullan\u0131m\u0131, bellek t\u00fcketimi, kare h\u0131z\u0131 (FPS) ve a\u011f istekleri gibi metrikler izlendi. \u00c7\u00f6z\u00fcmler aras\u0131nda lazy loading, sanalla\u015ft\u0131rma, g\u00f6rsellerin CDN \u00fczerinden da\u011f\u0131t\u0131lmas\u0131, Canvas API'ye ge\u00e7i\u015f, Web Workers kullan\u0131m\u0131 ve event throttling\/debouncing gibi teknikler yer ald\u0131.<\/p>\n<\/li>\n<li>\n    <strong>Dijital an\u0131t projelerinin gelece\u011fi hakk\u0131nda ne d\u00fc\u015f\u00fcn\u00fcyorsunuz?<\/strong><\/p>\n<p>Dijital an\u0131t projelerinin gelece\u011fi \u00e7ok parlak. Geli\u015fen teknolojilerle birlikte, sanal ger\u00e7eklik (VR) ve art\u0131r\u0131lm\u0131\u015f ger\u00e7eklik (AR) entegrasyonlar\u0131 sayesinde daha s\u00fcr\u00fckleyici ve duygusal olarak zengin deneyimler sunulabilir. Ayr\u0131ca, yapay zeka destekli an\u0131 derleme ve ki\u015fiselle\u015ftirme \u00f6zellikleri, an\u0131tlar\u0131n daha dinamik ve ki\u015fiye \u00f6zel hale gelmesini sa\u011flayabilir. Bu t\u00fcr projeler, k\u00fcresel \u00e7apta anma ve yas tutma pratiklerini bir araya getirme potansiyeline sahiptir.<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"1000 Mumlu Dijital An\u0131t: \u00d6l\u00e7ek, Optimizasyon ve Hat\u0131rlama Dersleri Binlerce ki\u015fiyi bir araya getiren dijital bir an\u0131t projesi&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-34685","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Dijital An\u0131tlar Neden \u00d6nemli ve Bin Mum Projesi Nas\u0131l Ortaya \u00c7\u0131kt\u0131?<\/title>\n<meta name=\"description\" content=\"Binlerce ki\u015fiyi bir araya getiren dijital bir an\u0131t projesi tasarlamak, yaln\u0131zca bir yaz\u0131l\u0131m geli\u015ftirme g\u00f6revi olmaktan \u00e7ok daha fazlas\u0131d\u0131r. Bu makale, &quot;1000 Mum \u0130n\u015fa Etmek&quot; projesinin perde arkas\u0131n\u0131, kar\u015f\u0131la\u015f\u0131lan \u00f6l\u00e7eklenebilirlik ve optimizasyon zorluklar\u0131n\u0131 ve bu s\u00fcre\u00e7te elde edilen de\u011ferli deneyimleri detayland\u0131r\u0131yor. Bir projeden \u00e7ok, bir \u00f6\u011frenme ser\u00fcveni olan bu dijital an\u0131t, bize teknoloji ve insan ba\u011flam\u0131 hakk\u0131nda derin dersler verdi.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dijital An\u0131tlar Neden \u00d6nemli ve Bin Mum Projesi Nas\u0131l Ortaya \u00c7\u0131kt\u0131?\" \/>\n<meta property=\"og:description\" content=\"Binlerce ki\u015fiyi bir araya getiren dijital bir an\u0131t projesi tasarlamak, yaln\u0131zca bir yaz\u0131l\u0131m geli\u015ftirme g\u00f6revi olmaktan \u00e7ok daha fazlas\u0131d\u0131r. Bu makale, &quot;1000 Mum \u0130n\u015fa Etmek&quot; projesinin perde arkas\u0131n\u0131, kar\u015f\u0131la\u015f\u0131lan \u00f6l\u00e7eklenebilirlik ve optimizasyon zorluklar\u0131n\u0131 ve bu s\u00fcre\u00e7te elde edilen de\u011ferli deneyimleri detayland\u0131r\u0131yor. Bir projeden \u00e7ok, bir \u00f6\u011frenme ser\u00fcveni olan bu dijital an\u0131t, bize teknoloji ve insan ba\u011flam\u0131 hakk\u0131nda derin dersler verdi.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-20T17:31:01+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Dijital An\u0131tlar Neden \u00d6nemli ve Bin Mum Projesi Nas\u0131l Ortaya \u00c7\u0131kt\u0131?\",\"datePublished\":\"2025-11-20T17:31:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/\"},\"wordCount\":3541,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/\",\"name\":\"Dijital An\u0131tlar Neden \u00d6nemli ve Bin Mum Projesi Nas\u0131l Ortaya \u00c7\u0131kt\u0131?\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-20T17:31:01+00:00\",\"description\":\"Binlerce ki\u015fiyi bir araya getiren dijital bir an\u0131t projesi tasarlamak, yaln\u0131zca bir yaz\u0131l\u0131m geli\u015ftirme g\u00f6revi olmaktan \u00e7ok daha fazlas\u0131d\u0131r. Bu makale, \\\"1000 Mum \u0130n\u015fa Etmek\\\" projesinin perde arkas\u0131n\u0131, kar\u015f\u0131la\u015f\u0131lan \u00f6l\u00e7eklenebilirlik ve optimizasyon zorluklar\u0131n\u0131 ve bu s\u00fcre\u00e7te elde edilen de\u011ferli deneyimleri detayland\u0131r\u0131yor. Bir projeden \u00e7ok, bir \u00f6\u011frenme ser\u00fcveni olan bu dijital an\u0131t, bize teknoloji ve insan ba\u011flam\u0131 hakk\u0131nda derin dersler verdi.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dijital An\u0131tlar Neden \u00d6nemli ve Bin Mum Projesi Nas\u0131l Ortaya \u00c7\u0131kt\u0131?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Dijital An\u0131tlar Neden \u00d6nemli ve Bin Mum Projesi Nas\u0131l Ortaya \u00c7\u0131kt\u0131?","description":"Binlerce ki\u015fiyi bir araya getiren dijital bir an\u0131t projesi tasarlamak, yaln\u0131zca bir yaz\u0131l\u0131m geli\u015ftirme g\u00f6revi olmaktan \u00e7ok daha fazlas\u0131d\u0131r. Bu makale, \"1000 Mum \u0130n\u015fa Etmek\" projesinin perde arkas\u0131n\u0131, kar\u015f\u0131la\u015f\u0131lan \u00f6l\u00e7eklenebilirlik ve optimizasyon zorluklar\u0131n\u0131 ve bu s\u00fcre\u00e7te elde edilen de\u011ferli deneyimleri detayland\u0131r\u0131yor. Bir projeden \u00e7ok, bir \u00f6\u011frenme ser\u00fcveni olan bu dijital an\u0131t, bize teknoloji ve insan ba\u011flam\u0131 hakk\u0131nda derin dersler verdi.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/","og_locale":"tr_TR","og_type":"article","og_title":"Dijital An\u0131tlar Neden \u00d6nemli ve Bin Mum Projesi Nas\u0131l Ortaya \u00c7\u0131kt\u0131?","og_description":"Binlerce ki\u015fiyi bir araya getiren dijital bir an\u0131t projesi tasarlamak, yaln\u0131zca bir yaz\u0131l\u0131m geli\u015ftirme g\u00f6revi olmaktan \u00e7ok daha fazlas\u0131d\u0131r. Bu makale, \"1000 Mum \u0130n\u015fa Etmek\" projesinin perde arkas\u0131n\u0131, kar\u015f\u0131la\u015f\u0131lan \u00f6l\u00e7eklenebilirlik ve optimizasyon zorluklar\u0131n\u0131 ve bu s\u00fcre\u00e7te elde edilen de\u011ferli deneyimleri detayland\u0131r\u0131yor. Bir projeden \u00e7ok, bir \u00f6\u011frenme ser\u00fcveni olan bu dijital an\u0131t, bize teknoloji ve insan ba\u011flam\u0131 hakk\u0131nda derin dersler verdi.","og_url":"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-20T17:31:01+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"7 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Dijital An\u0131tlar Neden \u00d6nemli ve Bin Mum Projesi Nas\u0131l Ortaya \u00c7\u0131kt\u0131?","datePublished":"2025-11-20T17:31:01+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/"},"wordCount":3541,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/","url":"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/","name":"Dijital An\u0131tlar Neden \u00d6nemli ve Bin Mum Projesi Nas\u0131l Ortaya \u00c7\u0131kt\u0131?","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-20T17:31:01+00:00","description":"Binlerce ki\u015fiyi bir araya getiren dijital bir an\u0131t projesi tasarlamak, yaln\u0131zca bir yaz\u0131l\u0131m geli\u015ftirme g\u00f6revi olmaktan \u00e7ok daha fazlas\u0131d\u0131r. Bu makale, \"1000 Mum \u0130n\u015fa Etmek\" projesinin perde arkas\u0131n\u0131, kar\u015f\u0131la\u015f\u0131lan \u00f6l\u00e7eklenebilirlik ve optimizasyon zorluklar\u0131n\u0131 ve bu s\u00fcre\u00e7te elde edilen de\u011ferli deneyimleri detayland\u0131r\u0131yor. Bir projeden \u00e7ok, bir \u00f6\u011frenme ser\u00fcveni olan bu dijital an\u0131t, bize teknoloji ve insan ba\u011flam\u0131 hakk\u0131nda derin dersler verdi.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/dijital-anitlar-neden-onemli-ve-bin-mum-projesi-nasil-ortaya-cikti\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Dijital An\u0131tlar Neden \u00d6nemli ve Bin Mum Projesi Nas\u0131l Ortaya \u00c7\u0131kt\u0131?"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=34685"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34685\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}