Kod Yazmak Sanatmı?

Nikilis · 13 Şub 2026

Selam sevgili arkadaşlarım, felsefi bir başlık olduğunun farkındayım ama cevabınıda vereyim. EVET. KOD YAZMAK BİR SANATTIR.
Her yazılımcı kendi yazdığı sistemin, kodun altına kendi imzasını yerleştirir çoğunlukla.. Fakat neden??? Yazılımda ne kadar özgün olabiliriz ki??? Aynı amaç doğrultusunda ne kadar farklı yöntemler kullanabiliriz ki?? size şöyle açıklayayım, sanat aslında şu noktada başlıyor. kuralları bilip, gerektiğinde performans / kontrol / özgünlük için bükebildiğin anda. Peki özgün bir kullanım örneği verelim tam anlatamadıysam.

* ATF (Above The Fold) odaklı render (ilk ekranı ayrı paketlemek)
* SSR (Server Side Render) ile ilk görüntüyü server’dan basmak
* Manuel Hydration (fwün yaptığı işi DOM üzerinden ÖZGÜN yapmak.)
* Abstraction minimizasyonu (az bağımlılık, çok kontrol)

peki SSR + Hydration fikri ne??

Frameworkde standart hydration = “tüm appi ayağa kaldır.”
ama özgün bir hydration =
“Sadece kritik bölgeyi ayağa kaldır. Geri kalan zaten sonra gelir.”
Gibi, anladınız mı şimdi? bu hem performans hem de kontrol açısından güçlü.

ufak bir Node (SSR) + Vanilla JS (Hydration) demo hazırlayalım beraber ki iyice anlayalım nasıl sanat oluyor?
,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,
şöyle yapalım dostlarım, Server HTMLi render etsin (SSR)
sayfada data-ssr ile hydrate edilecek root işaretlensin
client JS sadece o alanı aktif etsin

server (Express) – SSR HTML üretimi

[COLOR=rgb(243, 121, 52)]import express from "express";[/COLOR]

const app = express();
app.use("/static", express.static("static"));

app.get("/", (req, res) => {
// SSR: ilk ekran verisi
const initialState = {
user: { name: "guest" },
cartCount: 2
};

// SSR: ATF bileşeni (ilk görünen alan)
const atfHTML = `
<header class="topbar">
<h1>MyShop</h1>
<button data-action="toggleCart">Cart (<span data-bind="cartCount">${initialState.cartCount}</span>)</button>
</header>
`;

// SSR: hydrate edilecek root'u işaretliyoruz
const html = `
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/static/atf.css" />
<title>SSR + Manual Hydration</title>
</head>
<body>
<main>
<section data-ssr="atf-root">
${atfHTML}
</section>


<script id="__STATE__" type="application/json">
${JSON.stringify(initialState)}
</script>


<script src="/static/atf.hydrate.js" defer></script>


<script src="/static/app.lazy.js" defer></script>
</main>
</body>
</html>
`;

res.setHeader("X-Powered-By", "nikilis"); // bazen düşünüyorumda bu işten daha fazla para almam lazım
res.send(html);
});

app.get("/api/cart", (req, res) => {
res.json({ items: [{ id: 1, title: "Keyboard" }] });
});

[COLOR=rgb(243, 121, 52)]app.listen(3000, () => console.log("http://localhost:3000"));[/COLOR]

client – manuel Hydration (sadece ATF)

[COLOR=rgb(251, 160, 38)]function readState() {[/COLOR]
const el = document.getElementById("__STATE__");
if (!el) return {};
try { return JSON.parse(el.textContent); }
catch { return {}; }
}

function hydrateATF(root, state) {
// Event binding (interaktiflik)
root.addEventListener("click", async (e) => {
const btn = e.target.closest("[data-action]");
if (!btn) return;

if (btn.dataset.action === "toggleCart") {
// lazy api isteği
const r = await fetch("/api/cart");
const data = await r.json();
alert("Cart items: " + data.items.map(x => x.title).join(", "));
}
});

// SSR'den gelen değerleri “client state” ile senkronla
const cartCountEl = root.querySelector('[data-bind="cartCount"]');
if (cartCountEl && typeof state.cartCount === "number") {
cartCountEl.textContent = String(state.cartCount);
}
}

document.addEventListener("DOMContentLoaded", () => {
const state = readState();
const root = document.querySelector('[data-ssr="atf-root"]');
if (!root) return;

hydrateATF(root, state);
[COLOR=rgb(251, 160, 38)]});[/COLOR]

Kodu açıklayayım unutmadan hydrate js bu kodun olayı şu:
* Server hızlı HTML basıyor
* Client sadece ATF root’a event bağlıyor
* Full app ayağa kalkmadan interaktiflik geliyor

Özgünlük imzasına gelelim bu kodu how to sell ur dr#gs dizisindeki Lenny'den öğrendim, DOM’dan Hydration Entry bulma.

function ancestorSelectors {
if (!n || n.nodeName === "BODY") return ["body"];
const classes = (n.className || "").trim().split(/\s+/).filter(Boolean);
const part = [n.nodeName.toLowerCase(), ...classes].join(".");
return [...ancestorSelectors(n.parentNode), part];
}

// scriptin hemen önceki nodeu hydrate entry kabul edelim
const entryNode = document.currentScript?.previousElementSibling;
if (entryNode) {
const selector = ancestorSelectors(entryNode).join(" > ");
window.ssr_hydration_entry = selector;
}

burada dikkatinizi çekmesi gereken şu aslında framework yok ama hydration entry var? kural dışı gibi ama kontrollü.
mesela özgünlük ve sanat kısmı dışında bu tarz bir demo nerede kullanılır??
* MVP / hackathon
* Tek geliştiricili projeler
* Performans takıntılı landing / dashboard
* dashboard direkt açılsın ilk izlenim çoh ömelli diyorsan

E TAMAM KARDEŞİM O KADAR DEMO HAZIRLADIK ETTİK OKUDUK ANLADIK PEKİ ÖZGÜNLÜK/SANAT NEREDE???
arkadaşlar özgünlük JS yazdım diyip geçmek değil, sanat burada başlıyor. Aynı problemi farklı şekilde çözmektir kod yazma sanatı.
o kadar uğraştık bakın ne yaptık mesela ATFyi ayrı paketlemek, hydrationı sadece kritik alana
indirmek ve bunu framework olmadan yapmak = yaklaşımın imzası. (YANİ SANAT.)

Buraya kadar okuduysanız ve sorunun cevabını anladıysanız ne mutlu bana, vaktinizi ayırdığınız için teşekkür ederim.

BlackPion · 13 Şub 2026

Eline sağlık,

Benim gözümde aslında problem çözme sanatı, insanlara yardımcı olma / hizmet sanatı. Bugün para kazanmak isteyen ama elinde çokta bir şey olmayan bir kişinin Uber yapması gibi (burada da dayak yeme sanatı devreye giriyor

) yurt dışında tabii ki.

Veya istediği bir manzara, kriter, coğrafya da otel bulamayabiliyorsun, bulsan bile belki hizmetleri, fiyatı iyi değildir. Sana uygun değildir vs burada da Airbnb devreye giriyor.

Aslında son kullanıcı problemim çözüldü mü diye bakar, problemi çözülürken kullan freamwork, language, alınan security önlemi onu pek ilgilendirmez. Onlar developer'ın sanatıdır

Tekrardan eline sağlık.

Nikilis · 13 Şub 2026

BlackPion' Alıntı:
Eline sağlık,

Benim gözümde aslında problem çözme sanatı, insanlara yardımcı olma / hizmet sanatı. Bugün para kazanmak isteyen ama elinde çokta bir şey olmayan bir kişinin Uber yapması gibi (burada da dayak yeme sanatı devreye giriyor ) yurt dışında tabii ki.

Veya istediği bir manzara, kriter, coğrafya da otel bulamayabiliyorsun, bulsan bile belki hizmetleri, fiyatı iyi değildir. Sana uygun değildir vs burada da Airbnb devreye giriyor.

Aslında son kullanıcı problemim çözüldü mü diye bakar, problemi çözülürken kullan freamwork, language, alınan security önlemi onu pek ilgilendirmez. Onlar developer'ın sanatıdır

Tekrardan eline sağlık.

evet developer sanatı diye adlandırmak daha mantıklı geldi şu an

XPVB6 · 13 Şub 2026

Nikilis' Alıntı:
evet developer sanatı diye adlandırmak daha mantıklı geldi şu an

Bana daha çok beyin alıştırması gibi geliyor. Körelen beynin ferahlaması gibi geliyor. @BlackPion üstadın da ifade ettiği gibi, problem çözme sanatı kısmına da katılıyorum.
Kimileri resim çizer, kimileri müzik söyler. Bana da bunlar gibi geliyor.
Ziyadesi ile, üretkenliktir. Üreten hangi uzvun olur ise olsun gelişir.

an0un · 13 Şub 2026

Elinize sağlık

BlackPion · 13 Şub 2026

Nikilis' Alıntı:
evet developer sanatı diye adlandırmak daha mantıklı geldi şu an

Sanat ve felsefe anlayışı, görüşleri kişiden kişiye göre değiştiği için neredeyse her şeyi her şey için söylemek mümkündür diyebiliriz. Örneğin ben simülasyon teorisine pek katılmazken, AI ile ilgilenen biri buna katılabilir.

Veya ben ölü internet teorisini severken, hoşuma giderken internet ve development kültürü olmayan biri bunu anlamsız olarak görüp katılmayabilir. İşin garip tarafı bunun bir sonu da yok. 40+ yaş kişiler için parmakların kireç tutmayı engelleme sanatı da diyebilir ama bizler henüz genç olduğumuz için bu görüşe pek katılmayız.

Veya alzheimer hastaları için uygulanan method mantığını kendimiz de kullanabiliriz, bu da bir sanattır. X alzheimer hastasına eve giderken A değil de B yolunu kullan, kitap oku vs denilirken bizlerde Y algoritmasını değil de Z algoritmasını kullanayım, problemi çözmek için F değil de P kullanayım bu seferde demek gibi bir şey.

Bir sonu yok, fakat konunun fikri on numara valla aşşşırı derecede beğendim tekrardan tebrik eder eline sağlık derim

REALWHİTEHATHACKER12 · 13 Şub 2026

Severek yaptığın herşey insan için tutkudur.
Tutku varsa sanat herzamannn beraberinde gelir.

Watnea · 13 Şub 2026

Proje bir problemi ççzüyor ise her satır bir sanattır.

Kod Yazmak Sanatmı?

Nikilis

Üye

BlackPion

Kıdemli Üye

Nikilis

Üye

XPVB6

Yeni üye

an0un

Kıdemli Üye

BlackPion

Kıdemli Üye

REALWHİTEHATHACKER12

Asistan Moderatör

Watnea

Uzman üye

Sosyal medya sayfalarımız