<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Yakup Emre Yerli · Yazılar</title>
    <link>https://yakupemreyerli.com/tr/writing/</link>
    <description>Yaptığım işler, kullandığım araçlar ve öğrendiklerim üzerine yazılar: web teknolojileri, tarayıcılar, kurulum rehberleri ve okul hayatım.</description>
    <language>tr</language>
    <lastBuildDate>Sun, 18 Oct 2026 00:00:00 GMT</lastBuildDate>
    <atom:link href="https://yakupemreyerli.com/tr/rss.xml" rel="self" type="application/rss+xml" />
    <image>
      <url>https://yakupemreyerli.com/images/favicon-192.png</url>
      <title>Yakup Emre Yerli · Yazılar</title>
      <link>https://yakupemreyerli.com/tr/writing/</link>
    </image>
    <item>
      <title>5 Puanın Kelebek Etkisi: Neden Fuat Sezgin Anadolu Lisesi'ndeyim?</title>
      <link>https://yakupemreyerli.com/tr/writing/why-fuat-sezgin-anatolian-high-school/</link>
      <guid isPermaLink="true">https://yakupemreyerli.com/tr/writing/why-fuat-sezgin-anatolian-high-school/</guid>
      <pubDate>Sun, 18 Oct 2026 00:00:00 GMT</pubDate>
      <dc:creator>Yakup Emre Yerli</dc:creator>
      <category>Okul</category>
      <description>Bursa Prof. Dr. Fuat Sezgin Anadolu Lisesi 9. sınıf öğrencisiyim. Bu okula neden geldiğimi ve bende yarattığı kelebek etkisini anlatıyorum.</description>
      <content:encoded><![CDATA[<p>Bursa <strong>Prof. Dr. Fuat Sezgin Anadolu Lisesi</strong> 9. sınıf öğrencisiyim. Bu yazıda bu okula neden geldiğimi ve bunun bende yarattığı kelebek etkisini anlatıyorum.</p>

<h2 id="bu-okula-nasil-geldim">Bu okula nasıl geldim</h2>
<p>8. sınıfta okul sınavlarıma iyi çalıştım, en iyi sınav notlarım o yıl oldu. Ama LGS'ye gireceğim bana ancak son 5 haftada dank etti ve son 4 haftada çalışmaya başladım. Sınavın önemini şimdi YKS'nin önemini kavradığım gibi kavrayabilseydim her şey farklı olurdu, bundan eminim. En azından Yıldız Anadolu Lisesi'ne gidebilirdim.</p>
<p>Başta hedefim Ahmet Vefik Paşa Anadolu Lisesi'ydi. Oranın gelmeyeceğinden emin olunca Yıldız Anadolu Lisesi'ni hedefledim, çünkü onu ulaşılabilir ve iyi bir okul olarak görüyordum.</p>
<p>LGS sonuçlarını görünce Yıldız Anadolu'yu kazandığımı düşünmeye çalıştım ama bilinçaltım kazanamadığımı tahmin edebiliyordu. Yüzdelik dilimimle arada yaklaşık 5 puan fark vardı.</p>
<p>Bu okula ise LGS puanımla değil, OBP ile, yani okul başarı puanımla geldim. Okul öğrencilerini sınavsız, OBP'ye göre alıyor.</p>

<h2 id="okulda-ilk-gun">Okulda ilk gün</h2>
<p>Okulun ilk günü, ilk dakikasında sınıfta kalmış iki öğrencinin olduğu bir sınıftaydım. Biyoloji hocam Birhan Aydoğdu ile yaklaşık bir ders işledik. İkinci derse girdiğimizde sınıfa gelen bir öğrenci ismimi okudu ve şu anki sınıfıma geçtim.</p>
<p>Yeni sınıfımın manzarası mükemmeldi ve sınıfta kalmış hiçbir öğrenci yoktu, bu benim için iyiydi. İlk hafta sanırım pek sosyal olmadım. Sınıf arkadaşlarımla daha yeni yeni sosyalleşiyorum.</p>

<h2 id="okul-nasil-bir-yer">Okul nasıl bir yer</h2>
<p>Okulda en sevdiğim şey hocalarım. Sevmediğim şey ise okulun öğrencilerine karşı tavrı.</p>
<p>Bu okulu düşünen birine açık konuşurum: okulun pek bir üniversite başarısı yok. ODTÜ, Boğaziçi, İTÜ gibi üniversitelere gitmek isteyen biri burada çok büyük bir istisna olmak zorunda. Kendini kanıtlaması, etrafıyla savaşması gerekiyor.</p>
<p>Okul 2020'de açıldı ve ilk mezunlarını 2024'te verdi. 2024 ve 2025'te sayısalda en iyi yerleşme Eskişehir Teknik Üniversitesi Malzeme Bilimi ve Mühendisliği oldu; ODTÜ, Boğaziçi ya da İTÜ'ye yerleşen olmadı (<a href="https://sinavizcisi.com/lise/prof-dr-fuat-sezgin-anadolu-lisesi--26132203/">sinavizcisi.com</a>, YÖK Atlas ve ÖSYM verileri).</p>

<h2 id="kelebek-etkisi">Kelebek etkisi</h2>
<p>YKS'ye artık bakmam gereken bir şey olarak bakıyorum. Hedefim ODTÜ, Boğaziçi, İTÜ ya da Hacettepe'de nitelikli bir sayısal bölüm. Neden bakmayayım ki? Bu üniversitelere gidip iyi bağlantılar kurmak, iyi insanlar tanımak varken neden tanımayayım?</p>
<p>YKS için şimdiden dersleri iyi dinliyor, ödevlerimi yapıyorum. Yakında her gün düzenli tekrar yapmaya da başlayacağım.</p>

<h2 id="lgs-ye-hazirlananlara">LGS'ye hazırlananlara</h2>
<p>LGS'ye hazırlanan birine erkenden matematikle başlamasını ve matematiği öne almasını söylerim. Bir de yeni nesil soruların mimarisini anlayıp bol bol soru çözmelerini isterim.</p>]]></content:encoded>
    </item>
    <item>
      <title>Headmap Kurulum Rehberi: Brave, Chrome, Edge, Firefox</title>
      <link>https://yakupemreyerli.com/tr/writing/headmap-install-guide/</link>
      <guid isPermaLink="true">https://yakupemreyerli.com/tr/writing/headmap-install-guide/</guid>
      <pubDate>Thu, 15 Oct 2026 00:00:00 GMT</pubDate>
      <dc:creator>Yakup Emre Yerli</dc:creator>
      <category>Rehberler</category>
      <description>Headmap henüz eklenti mağazasında yok. Brave, Chrome, Edge ya da Firefox'a kaynaktan nasıl yüklenip güncelleneceğini adım adım anlatıyorum.</description>
      <content:encoded><![CDATA[<p>Headmap, bir sayfanın başlığını, meta açıklamasını, kanonik adresini ve H1–H6 yapısını tek bakışta gösteren küçük bir tarayıcı eklentisi. Henüz Chrome Web Mağazası'nda yok, o yüzden Brave, Chrome ve Edge'de kaynaktan yüklüyoruz: dosyaları indirip tarayıcıya klasörü göstermek yetiyor, beş dakikanızı alır. Firefox'ta ise tek bir imzalı dosya yeterli.</p>

<div class="needs">
<h2 id="gerekenler">Gerekenler</h2>
<ul>
  <li>Brave, Chrome ya da Edge; üçü de aynı eklenti sistemini kullanıyor. Ya da Firefox 140 veya sonrası, onun adımları aşağıda ayrı.</li>
  <li>Depoyu indirmek için ya bir tarayıcı ya da <code>git</code>.</li>
</ul>
</div>
<p>1-5 arası adımlar Brave, Chrome ve Edge için. Firefox kullanıyorsanız <a href="#firefox">Firefox</a> bölümüne geçin.</p>

<h2 id="1-depoyu-indirin">1. Depoyu indirin</h2>
<p>İki yolu var. Git kullanıyorsanız depoyu klonlayın:</p>
<pre><code>git clone https://github.com/YakupEmreYerli/headmap.git</code></pre>
<p>Git kullanmıyorsanız depoyu ZIP olarak indirip bir klasöre açın:</p>
<pre><code>https://github.com/YakupEmreYerli/headmap/archive/refs/heads/main.zip</code></pre>
<p class="note">Klasörü kalıcı bir yere koyun. Tarayıcı eklentiyi her açılışta bu klasörden okuyor; klasörü silerseniz eklenti de çalışmaz.</p>

<h2 id="2-eklentiler-sayfasini-acin">2. Eklentiler sayfasını açın</h2>
<p>Adres çubuğuna tarayıcınıza uygun olanı yazın:</p>
<pre><code>chrome://extensions</code></pre>
<p>Brave'de <code>brave://extensions</code>, Edge'de <code>edge://extensions</code>.</p>

<h2 id="3-gelistirici-modunu-acin">3. Geliştirici modunu açın</h2>
<p>Sayfanın köşesindeki <strong>Geliştirici modu</strong> anahtarını açın. Mağaza dışından eklenti yüklemek için bu gerekiyor.</p>

<h2 id="4-klasoru-yukleyin">4. Klasörü yükleyin</h2>
<p><strong>Paketlenmemiş öğe yükle</strong> düğmesine tıklayın ve ilk adımda indirdiğiniz klasörü seçin. İçinde <code>manifest.json</code> olan klasörü seçtiğinizden emin olun; ZIP'ten çıkardıysanız bu genelde <code>headmap-main</code> klasörü.</p>

<h2 id="5-sabitleyin-ve-deneyin">5. Sabitleyin ve deneyin</h2>
<p>Araç çubuğundaki eklentiler menüsünden Headmap'i sabitleyin. Sonra herhangi bir sayfada simgesine tıklayın: başlık, meta açıklama, kanonik adres ve başlık yapısı açılır pencerede görünür. Başlık 60, açıklama 160 karakteri geçerse sayı kırmızıya döner.</p>
<p class="note">Tarayıcının kendi sayfalarında (<code>chrome://</code>, <code>brave://</code>) ve eklenti mağazalarında Headmap çalışmaz; bunları tarayıcı kuralı gereği hiçbir eklenti okuyamıyor.</p>

<h2 id="firefox">Firefox</h2>
<p>Firefox'ta depoyu indirmenize gerek yok: Headmap'in Mozilla tarafından imzalanmış bir sürümü var. Son sürümden indirin:</p>
<pre><code>https://github.com/YakupEmreYerli/headmap/releases/latest/download/headmap.xpi</code></pre>
<p><code>headmap.xpi</code> dosyasını bir Firefox penceresine sürükleyin ve <strong>Ekle</strong>'ye tıklayın. Headmap araç çubuğundaki eklentiler menüsünde (yapboz simgesi) görünür; oradan sabitleyip herhangi bir sayfada tıklayın. Firefox'u yeniden başlatınca da kurulu kalır.</p>
<p class="note">Headmap Firefox'un kendi <code>about:</code> sayfalarında ve Firefox Eklentileri sitesinde çalışmaz.</p>

<h2 id="guncelleme">Güncelleme</h2>
<p>Git ile kurduysanız klasörde en son hâli çekin, sonra eklentiler sayfasında Headmap kartındaki yenile düğmesine basın:</p>
<pre><code>cd headmap
git pull</code></pre>
<p>ZIP ile kurduysanız yeni ZIP'i aynı klasörün üstüne açıp yine yenile düğmesine basmanız yeterli. Firefox'ta yeni sürümün <code>headmap.xpi</code> dosyasını aynı şekilde kurun.</p>

<h2 id="izinler-ve-gizlilik">İzinler ve gizlilik</h2>
<p>Headmap iki izin istiyor: <code>activeTab</code> ve <code>scripting</code>. Açık sekmeyi yalnız açılır pencereyi açtığınızda okuyor, hiçbir şey saklamıyor ve hiçbir yere göndermiyor; arka plan betiği, depolama ya da ağ isteği yok.</p>]]></content:encoded>
    </item>
    <item>
      <title>Floorp Tarayıcı Nedir? Firefox'tan Farkı Ne?</title>
      <link>https://yakupemreyerli.com/tr/writing/what-is-floorp-browser/</link>
      <guid isPermaLink="true">https://yakupemreyerli.com/tr/writing/what-is-floorp-browser/</guid>
      <pubDate>Thu, 13 Aug 2026 00:00:00 GMT</pubDate>
      <dc:creator>Yakup Emre Yerli</dc:creator>
      <category>Tarayıcılar</category>
      <description>Floorp nedir, Firefox'tan farkı ne? Workspace, Panel Sidebar, arayüz özelleştirme ve geçmeden önce bilmeniz gerekenler.</description>
      <content:encoded><![CDATA[<p>Floorp, üstüne iş akışı katmanı eklenmiş Firefox’tur. Mozilla’nın Firefox’unu alır, Gecko motorunu ve eklenti ekosistemini olduğu gibi bırakır, gününün büyük kısmını tarayıcıda geçiren insanlar için araçlar ekler: workspace’ler, sabitlenmiş siteler için bir kenar çubuğu ve arayüz üzerinde geniş bir kontrol.</p>
<p>Floorp’u seçmek için gerekçe bir yıl öncesine göre daha dar, çünkü Firefox onu farklı kılan şeylerin bir kısmını kendi içine aldı. Geriye kalanlar yine de bilmeye değer, bir de gerçek risk var: proje çok küçük bir ekibe dayanıyor.</p>

<h2 id="floorp-nedir">Floorp nedir</h2>
<p>Floorp, 2021’de Japonya’da Ryosuke Asano’nun başlattığı ücretsiz ve açık kaynaklı bir tarayıcı. Kodu <a href="https://github.com/Floorp-Projects/Floorp" rel="noopener" target="_blank">GitHub’da</a>, Firefox’un da kullandığı Mozilla Public License 2.0 ile duruyor. Windows 10 ve 11’de, macOS 10.15 ve üstünde, Linux’ta çalışıyor. iOS sürümü TestFlight üzerinden test aşamasında, Android sürümü yok.</p>
<p>2025’e kadar Floorp, Firefox’un yavaş ilerleyen kurumsal kolu olan ESR’yi izliyordu. Ağustos 2025’te çıkan Floorp 12 ile Firefox’un hızlı sürüm kanalına geçti. <a href="https://blog.floorp.app/en/notice/251027-floorp-12-upgrade-guide" rel="noopener" target="_blank">Yükseltme notlarında</a> gerekçe yazıyor: Floorp 11’in dayandığı ESR 128 ömrünü doldurmuş, güvenlik yaması almıyordu. Floorp artık yeni Firefox özelliklerine daha erken kavuşuyor, altındaki Firefox değişince de daha sık bozuluyor. Bu yazıyı yazdığım sırada son sürüm, 9 Ekim 2026’da yayımlanan <a href="https://github.com/Floorp-Projects/Floorp/releases" rel="noopener" target="_blank">12.20.1</a>.</p>

<h2 id="firefox-a-ne-ekliyor">Firefox’a ne ekliyor</h2>
<h3 id="workspace-ler">Workspace’ler</h3>
<p><a href="https://docs.floorp.app/docs/features/workspaces/" rel="noopener" target="_blank">Workspace’ler</a> sekmeleri bağlama göre gruplar. "Müşteri" ya da "Araştırma" adında bir workspace açarsınız, pencerede yalnızca onun sekmeleri görünür. Diğer workspace’lerin sekmeleri arka planda açık kalır. Floorp 11.4’ten beri bir workspace’e Firefox Multi-Account Container atanabiliyor; yani workspace aynı zamanda ayrı bir çerez ve oturum alanı oluyor. Floorp’taki en güçlü fikir bu: tek tarayıcı, tek profil, iş ve kişisel hesaplar arasında temiz bir ayrım.</p>
<p>Sınırları var. Belgelere göre workspace listesi aynı profilin pencereleri arasında ortak, ama sekmeler ortak değil.</p>
<figure><img src="https://yakupemreyerli.com/images/posts/floorp-workspaces.webp" alt="Floorp'ta Default, Shopping ve Bank gibi workspace'lerin listelendiği seçici ve yeni workspace oluşturma seçeneği" width="854" height="455" loading="lazy"><figcaption>Workspace seçici. Görsel <a href="https://docs.floorp.app/docs/features/workspaces/" rel="noopener" target="_blank">Floorp belgelerinden</a>; arayüz sürümler arasında değişiyor.</figcaption></figure>
<h3 id="panel-sidebar">Panel Sidebar</h3>
<p><a href="https://docs.floorp.app/docs/features/panel-sidebar/" rel="noopener" target="_blank">Panel Sidebar</a>, önceden kaydettiğiniz siteleri tutar ve birini tek tıkla mevcut sayfanın yanında açar. Çeviri aracı, bir dokümantasyon sitesi ya da sohbet uygulaması burada iyi iş görür. Her panel kendi container’ını, genişliğini ve mobil user agent’ını kullanabilir; yüzen mod paneli sayfanın üstüne bindirir. Belgeler varlık nedenini açık söylüyor: Firefox’ta artık bölünmüş görünüm var, ama her seferinde kurmak zahmetli, kayıtlı panel ise tek tık.</p>
<figure><img src="https://yakupemreyerli.com/images/posts/floorp-panel-sidebar.webp" alt="Floorp'ta ana sekmenin sağında, Panel Sidebar içinde açık duran Floorp dokümantasyon sayfası" width="1139" height="625" loading="lazy"><figcaption>Panel Sidebar’da açık bir dokümantasyon sayfası. Görsel <a href="https://docs.floorp.app/docs/features/panel-sidebar/" rel="noopener" target="_blank">Floorp belgelerinden</a>.</figcaption></figure>
<h3 id="arayuz-kontrolu">Arayüz kontrolü</h3>
<p>Floorp birkaç tema ile geliyor, varsayılan Lepton. <code>userChrome.css</code> de kutudan açık çıkıyor, yani tarayıcıyı kendi CSS’inizle yeniden biçimlendirebilirsiniz. Sekme çubuğu yatay, dikey ya da çok satırlı olabilir; üstte, araç çubuğunun altında ya da pencerenin en altında durabilir. Floorp’a özel her ayar, Firefox’un kendi ayarlarından ayrı, tek bir sayfada: <code>about:hub</code>.</p>
<p>Yeni sekme sayfası da Floorp’a ait ve adı <a href="https://docs.floorp.app/docs/features/start-and-hub" rel="noopener" target="_blank">Floorp Start</a>: rastgele bir arka plan görseli, saat ve en çok gezdiğiniz siteler. Firefox’un sayfasını tercih ederseniz Hub’daki Tab &amp; Appearance bölümünde bunu kapatan bir ayar var, uygulanması için yeniden başlatmak gerekiyor.</p>
<h3 id="chrome-eklentileri">Chrome eklentileri</h3>
<p>Mart 2026’daki 12.11 sürümünden beri Floorp’ta Chrome Web Store’u açınca "Add to Floorp" düğmesi çıkıyor. <a href="https://blog.floorp.app/en/release/12.11.0/" rel="noopener" target="_blank">Sürüm notları</a> Firefox ile Chrome’un API’lerinin farklı olduğunu, bu yüzden bazı eklentilerin kurulmayacağını ya da düzgün çalışmayacağını söylüyor. Firefox sürümü olmayan bir eklenti için yedek yol olarak düşünün.</p>

<h2 id="firefox-un-artik-kendi-yaptiklari">Firefox’un artık kendi yaptıkları</h2>
<p>Floorp’un eskiden kendi bölünmüş görünümü ve kendi dikey sekmeleri vardı. İkisi de kalktı. Bölünmüş görünüm, Firefox onu yerel olarak getirdiği için 12.8 serisinde çıkarıldı; <a href="https://docs.floorp.app/docs/features/tab-bar-layout/" rel="noopener" target="_blank">dikey sekmeler de Floorp 12’de</a> aynı gerekçeyle kaldırıldı. Floorp’ta dikey sekme kullanmaya devam edebilirsiniz, ama Firefox’un uygulamasıyla; o da kenar çubuğu alanında çalışıyor ve her zaman görünür kalmak için tasarlanmamış.</p>
<p>Sizi Floorp’a çeken şey dikey sekme ya da bölünmüş görünümse, düz Firefox artık büyük kısmını veriyor. Floorp’ta kalan: workspace ile container eşleşmesi, Panel Sidebar ve arayüz kontrolünün genişliği.</p>

<h2 id="gizlilik">Gizlilik</h2>
<p>Floorp, Firefox’un korumalarını devralıyor. <a href="https://floorp.app/privacy" rel="noopener" target="_blank">Gizlilik politikası</a>, masaüstü sürümünde Mozilla telemetrisinin ve sağlık raporu gönderiminin varsayılan olarak kapalı olduğunu söylüyor. Güncelleme, arama ve senkronizasyon yine ağ isteği yapıyor. Politikadan bilinmesi gereken bir ayrıntı: yeni sekme kısayolunun ya da web panelinin ikonu yoksa Floorp, Google’ın favicon servisinden ikon isteyebiliyor; web panellerinde bu istek tam URL’yi içerebiliyor. Senkronizasyon Mozilla’nın, uçtan uca şifreli; zaten bir Firefox hesabınız varsa Floorp’ta da çalışır.</p>

<h2 id="floorp-mu-firefox-mu">Floorp mu, Firefox mu</h2>
<p>İkisi de Gecko üzerinde çalışıyor, ikisi de açık kaynak, ikisi de aynı siteleri ve aynı eklentileri açıyor. Fark, tarayıcıyı ne kadar kendiniz düzenlemek istediğinizde.</p>
<div class="table-scroll"><table>
  <thead>
    <tr>
      <th>Alan</th>
      <th>Floorp</th>
      <th>Firefox</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Motor ve lisans</td>
      <td>Gecko, MPL-2.0</td>
      <td>Gecko, MPL-2.0</td>
    </tr>
    <tr>
      <td>Container’lı workspace</td>
      <td>Yerleşik</td>
      <td>Mozilla’nın eklentisiyle container, workspace yok</td>
    </tr>
    <tr>
      <td>Kayıtlı site panelleri</td>
      <td>Panel Sidebar</td>
      <td>Bölünmüş görünüm, her seferinde kurulur</td>
    </tr>
    <tr>
      <td>Dikey sekme, bölünmüş görünüm</td>
      <td>Firefox’un kendisi</td>
      <td>Yerel</td>
    </tr>
    <tr>
      <td>Arayüz temaları ve CSS</td>
      <td>Temalar, <code>userChrome.css</code> varsayılan açık</td>
      <td>Sınırlı</td>
    </tr>
    <tr>
      <td>Geliştirici kadro</td>
      <td>Bir lider, birkaç katkıcı</td>
      <td>Mozilla</td>
    </tr>
  </tbody>
</table></div>
<p>Tek tarayıcıda birkaç hesap ve bağlam tutuyorsanız, kenar çubuğunu ve yerleşimi kendi istediğiniz gibi kurmak istiyorsanız Floorp’u seçin. Açıp unutacağınız bir tarayıcı istiyorsanız Firefox’ta kalın.</p>

<h2 id="risk-ekipte">Risk ekipte</h2>
<p>Projenin ne olduğunu katkıcı listesi gösteriyor. GitHub’da Asano’nun yaklaşık 1.300 katkısı var, ondan sonraki katkıcının yaklaşık 340’ı. Asano, Mayıs 2025’te <a href="https://blog.floorp.app/en/notice/independent-from-ablaze" rel="noopener" target="_blank">Floorp’u Ablaze’in çatısından çıkarıp</a> ortaklık modeline geçirdi; proje artık doğrudan Floorp tarafından yönetiliyor. Aynı yazıda kullanıcıların projenin ortadan kalkmasından endişe ettiğini yazıyor ve elinden geldiğince sürdürmek niyetinde olduğunu söylüyor. Niyeti içten, ama proje tek bir kişiye bağlı.</p>
<p>Bir tarayıcıda pratik soru, Mozilla’nın güvenlik yamalarının kullanıcıya ne kadar çabuk ulaştığı. Floorp hızlı sürüm kanalını izliyor, bu doğru karar; ama her Firefox güncellemesini birleştiren çok az kişiye bağlı. Hassas hesaplarla çalışıyorsanız bunu aklınızda tutun ve otomatik güncellemeyi açık bırakın.</p>
<p>Küçük sürtünme de hızlı sürüm tabanından geliyor: Firefox’taki bir değişiklik bir iki sürüm boyunca bir Floorp özelliğini bozabiliyor. <a href="https://blog.floorp.app/en/notice/251027-floorp-12-upgrade-guide" rel="noopener" target="_blank">Yükseltme rehberi</a> ayrıca yerleşik fare hareketleri ile hareket eklentileri arasında macOS ve Linux’ta bilinen bir çakışmayı sayıyor; çözümü <code>about:config</code> içinde.</p>

<h2 id="kurulum-ve-guncelleme">Kurulum ve güncelleme</h2>
<p>Windows kurulum dosyası açık kaynak kod imzalama sertifikasıyla imzalı; winget ve Scoop paketleri de var. macOS sürümü Apple tarafından onaylı ve kendini güncelliyor, Homebrew’da cask’i duruyor. Linux’ta Ubuntu ve Mint için PPA, Flatpak, tarball ve resmî olmayan AUR paketleri seçenek. <a href="https://github.com/Floorp-Projects/Floorp" rel="noopener" target="_blank">README</a> komutları listeliyor. Windows sürümleri yalnızca x86_64, yani ARM’lı Windows desteklenmiyor.</p>

<h2 id="denemek-icin">Denemek için</h2>
<p>Floorp’u ana tarayıcım olarak kullanmadım; bu yazı uzun süreli günlük kullanıma değil, belgelerine, sürüm notlarına ve kaynak koduna dayanıyor. Denemek isterseniz mevcut tarayıcınızın yanına <a href="https://floorp.app" rel="noopener" target="_blank">floorp.app</a> üzerinden kurun, yer imlerinizi yerleşik araçla aktarın. Birkaç gün kullanıp workspace’lerin ve Panel Sidebar’ın çalışma biçiminizi değiştirip değiştirmediğine bakın. Değiştirmediyse bir şey kaybetmezsiniz; Firefox ve içindeki veriler olduğu yerde duruyor.</p>]]></content:encoded>
    </item>
    <item>
      <title>Svelte Nedir? Svelte 5, Runes ve React ile Farkı</title>
      <link>https://yakupemreyerli.com/tr/writing/what-is-svelte/</link>
      <guid isPermaLink="true">https://yakupemreyerli.com/tr/writing/what-is-svelte/</guid>
      <pubDate>Thu, 13 Aug 2026 00:00:00 GMT</pubDate>
      <dc:creator>Yakup Emre Yerli</dc:creator>
      <category>Framework'ler</category>
      <description>Svelte nedir, Svelte 5 runes neyi değiştirdi, React ve Vue'dan farkı ne? SvelteKit ile çalışan bir geliştiriciden pratik bir anlatım.</description>
      <content:encoded><![CDATA[<p>Svelte, merkezinde bir derleyici olan bir arayüz framework’ü. Bileşenleri HTML, CSS ve JavaScript ile yazarsınız, build aşaması bunları sayfayı güncelleyen JavaScript’e çeviriyor. Bu siteyi de Convetta’yı da SvelteKit ile yapıyorum. Beni Svelte’te tutan şey, bileşenle onun yaptığı iş arasında çok az tören olması.</p>

<h2 id="svelte-nedir">Svelte nedir</h2>
<p>Svelte’in ilk sürümünü Rich Harris <a href="https://www.npmjs.com/package/svelte">Kasım 2016’da</a> yayımladı, lisansı MIT. Bir bileşen tek bir <code>.svelte</code> dosyasında duruyor: işaretleme, stil ve mantık bir arada. Artık niş bir proje sayılmaz: npm paketi bu ay haftada yaklaşık 6 milyon indirme gösteriyor. Stiller varsayılan olarak bileşene özel kalıyor, o yüzden izolasyon için ayrıca CSS-in-JS kütüphanesi gerekmiyor.</p>
<pre><code>&lt;script&gt;
  let count = $state(0);
&lt;/script&gt;

&lt;button onclick={() =&gt; count++}&gt;
  tıklama: {count}
&lt;/button&gt;</code></pre>
<p>Bu, eksiksiz ve reaktif bir bileşen. <a href="https://svelte.dev/docs/svelte/overview">Resmî tanıtım sayfası</a> derleyiciyi, bildirimsel bileşenleri yalın ve sıkı biçimde optimize edilmiş JavaScript’e çeviren araç olarak anlatıyor. Çıktıda küçük bir çalışma zamanı kodu hâlâ var ama sanal DOM yok. Hangi state’in sayfanın hangi parçasına dokunduğunu derleyici build sırasında çözüyor.</p>

<h2 id="svelte-5-ve-runes">Svelte 5 ve runes</h2>
<p>Svelte 5 Ekim 2024’te kararlı sürüme geçti ve ekip onu <a href="https://svelte.dev/blog/svelte-5-is-alive">sıfırdan yazılmış bir sürüm</a> olarak tanımlıyor. Gözle görülen değişiklik runes: adı dolar işaretiyle başlayan ve derleyiciye neyin reaktif olduğunu söyleyen fonksiyonlar.</p>
<ul>
  <li><code>$state</code> reaktif state tanımlar. Diziler ve düz nesneler derin proxy olur, yani <code>todos[0].done = true</code> da <code>list.push(item)</code> da yalnızca buna bağlı olan yerleri günceller.</li>
  <li><code>$derived</code> başka state’ten hesaplanan değeri tanımlar.</li>
  <li><code>$effect</code> yan etkileri çalıştırır: canvas’a çizmek, bir kütüphaneyi çağırmak gibi işler. DOM güncellendikten sonra çalışır.</li>
  <li><code>$props</code> bileşenin üst bileşenden ne aldığını tanımlar.</li>
</ul>
<p>Dördü arasında en az kullanılması gereken <code>$effect</code>. <a href="https://svelte.dev/docs/svelte/$effect">Belgeler</a>, efektlerin içinde state güncellemekten kaçınmayı öneriyor, çünkü bu karmaşık koda ve bitmeyen güncelleme döngülerine yol açmaya yatkın. Efektler ayrıca yalnızca tarayıcıda çalışıyor, sunucuda render sırasında hiç çalışmıyor. Efekt yazmaya niyetlendiğimde önce bunun aslında türetilmiş bir değer olup olmadığına bakıyorum. Çoğu zaman öyle çıkıyor.</p>
<p>Gerekçeler yayın yazısında duruyor. Svelte 4’te reaktif bir nesnenin tek bir özelliği değişince nesnenin tamamı geçersiz sayılıyordu, çünkü derleyici o kadarını görebiliyordu. <code>$:</code> etiketi de iki ayrı işi birden yapıyordu, türetilmiş değerleri ve yan etkileri, üstelik bağımlılıklar kod çalışırken değil derlenirken belirleniyordu. Runes bu işleri ayırıyor. <a href="https://svelte.dev/docs/svelte/v5-migration-guide">Geçiş rehberi</a> vakaların yaklaşık yüzde doksanında istediğinizin <code>$derived</code> olduğunu söylüyor, benim kodum da aynısını gösteriyor: Convetta’da 13 <code>$derived</code> var, 4 <code>$effect</code>.</p>
<p>Runes sıradan fonksiyon çağrıları olduğu için bileşenin dışında da çalışıyor. Bir <code>.svelte.js</code> dosyasında reaktif state tutup bileşenler arasında paylaşabilirsiniz. Svelte 4’te bunun için store’lara yönlendiriliyordunuz. Eski sözdizimi hâlâ derleniyor ve eski bileşenle yeni bileşen aynı projede durabiliyor, yani geçişi bir günde yapmak zorunda değilsiniz.</p>
<p>Bileşen kompozisyonu da değişti. Svelte 4 olay işleyicilerini ve slot içeriğini prop’lardan ayrı kavramlar olarak ele alıyordu. Bu, 2019’da web bileşenleriyle uyum kurma kararının mirasıydı ve yayın yazısı o kararı hata olarak anıyor. Svelte 5’te olay işleyici fonksiyon tutan bir prop. Tekrar kullanılan işaretleme parçaları ise bileşende bir kez tanımlayıp <code>{@render}</code> ile bastığınız <a href="https://svelte.dev/docs/svelte/snippet">snippet</a>’ler. Üst bileşen alt bileşene snippet’i prop olarak da geçebiliyor. Svelte 5’te en rahat okuduğum kısım bu, çünkü bir bileşenin bütün arayüzü prop’ları.</p>
<p>Bilmeye değer bir tuzak var: reaktif bir değeri destructure ederseniz, sıradan JavaScript’teki gibi o andaki değer kopyalanır ve kopya bir daha güncellenmez. <a href="https://svelte.dev/docs/svelte/$state">$state belgesi</a> bunu açıkça yazıyor.</p>
<p>Svelte 5.36’dan beri script bloğunda, <code>$derived</code> içinde ve işaretlemede <code>await</code> kullanabilirsiniz. Özellik hâlâ <a href="https://svelte.dev/docs/svelte/await-expressions">deneysel</a> ve derleyici ayarlarında <code>experimental.async</code> istiyor. Bayrağın Svelte 6’da kaldırılması planlanıyor, o yüzden o zamana kadar üzerine bir şey kurmazdım.</p>

<h2 id="svelte-ile-react-in-farki">Svelte ile React’in farkı</h2>
<p>Günlük işte en çok hissedilen fark, kodunuzun ne zaman çalıştığı. React bileşeni her render’da yeniden çalışan bir fonksiyon, bunu da hook’lar ve bağımlılık dizileriyle yönetirsiniz. Svelte’te <a href="https://svelte.dev/docs/svelte/$derived">bileşendeki kod yalnızca oluşturulurken bir kez çalışır</a>. Sonrasında derlenmiş çıktı, değiştirdiğiniz state’e bağlı yerleri günceller. <code>$effect</code>’in bağımlılık dizisi yok, çünkü Svelte efektin çalışırken neyi okuduğunu kendisi kaydediyor.</p>
<p>React’ten gelince ilk hafta çoğunlukla alışkanlık bırakmakla geçiyor. State sıradan bir değişken, ona atama yaparsınız, setter fonksiyonu yok. Türetilmiş değer de render gövdesinde her seferinde yeniden hesaplanmıyor, bir kez tanımlanıyor. Öteki sürtünme eski kaynaklardan geliyor. Birçok eğitim ve cevap hâlâ Svelte 4 sözdizimini gösteriyor (örtük state olarak <code>let</code>, <code>$:</code>, <code>export let</code>) ve bu sözdizimi hâlâ derleniyor, o yüzden bir örneği kopyalamadan önce hangi sözdizimini kullandığınıza bakın.</p>
<p>Kod fazlalığı farkı eskisinden küçük. React Compiler <a href="https://react.dev/blog/2025/10/07/react-compiler-1">Ekim 2025’te 1.0’a ulaştı</a> ve bileşenleri otomatik olarak memoize ediyor, bu da elle yazılan <code>useMemo</code> ve <code>useCallback</code> işinin büyük kısmını ortadan kaldırıyor. React’in kendisi şu an <a href="https://react.dev/versions">19.3</a>. React’ten şikâyetiniz hook kalabalığıysa, geçmeden önce güncel bir kurulumda deneyin.</p>
<p>Hız artık eskisi kadar güçlü bir argüman değil. Svelte ekibi kendi yazısında, diğer framework’lerin sinyal tabanlı ince taneli reaktiviteyi benimseyip performansta Svelte 4’ü geçtiğini söylüyor ve Svelte 5 aynı fikir üzerine kurulu. Gerçek uygulamaları çoğunlukla veri yükleme, görseller ve eklediğiniz kütüphaneler yavaşlatıyor. Bu yüzden bir framework’ü benchmark sayısına bakarak seçmezdim.</p>
<p>Sanal DOM ayrımı da daralıyor. Vue 3.6, tek dosyalı bileşenler için sanal DOM’u atlayan ve isteğe bağlı açılan Vapor Mode’u getiriyor. Bu yazıyı yazarken sürüm <a href="https://github.com/vuejs/core/releases/tag/v3.6.0-rc.1">release candidate</a> aşamasında, kararlı sürümde yok.</p>
<p>React’in hâlâ önde olduğu yer, framework’ün etrafındaki her şey. Ekosistemi daha büyük, hazır kütüphanesi çok daha fazla, işe alınabilecek insan havuzu daha geniş, mobil için de React Native var. Svelte’te bir şeyi kendin yazmak zorunda kalma ihtimaliniz daha yüksek. Bu takasın değip değmeyeceği ekibin büyüklüğüne ve ürünün ne kadarının yazmak istemediğiniz altyapı olduğuna bağlı.</p>

<h2 id="sveltekit">SvelteKit</h2>
<p>Svelte yalnızca bileşenleri çizer. <a href="https://svelte.dev/docs/kit/introduction">SvelteKit</a> onun üstündeki uygulama framework’ü: yönlendirme, veri yükleme, sunucuda render ve önceden render (prerender) onda. React için Next.js neyse, Vue için Nuxt neyse Svelte için o. Sonucun nerede çalışacağını adaptörler belirliyor, Node sunucusu, statik barındırma ya da edge platformu olabilir. Bir sayfanın sunucuda mu, tarayıcıda mı, yoksa build sırasında mı render edileceğini de rota bazında seçebiliyorsun.</p>
<p>Bu site <code>adapter-static</code> kullanıyor ve sunucusuz, düz HTML, CSS ve JavaScript olarak yayına çıkıyor. Convetta <code>adapter-node</code> kullanıyor ve Docker’da çalışıyor. Sayfalar önceden üretiliyor, JPG, PNG ve WEBP dönüşümü tarayıcıda yapılıyor, yani bu dosyalar ziyaretçinin makinesinden çıkmıyor. İkisi de Svelte 5.57.1 üzerinde.</p>

<h2 id="olctugum-sayilar">Ölçtüğüm sayılar</h2>
<p>Convetta ana sayfasının production build’ini 10 Ekim 2026’da ölçtüm. Sayfa toplam yaklaşık 163 kB tutan 12 JavaScript dosyası yüklüyor, gzip ile yaklaşık 61 kB. Bunun içinde SvelteKit’in istemci çalışma zamanı ve yönlendiricisi de uygulamanın kendi kodu da var. Yani sayı gerçek bir SvelteKit sayfasının ne tuttuğunu gösteriyor, Svelte’i tek başına ölçmüyor. Seçiminizi paket boyutu belirleyecekse kendi projenizi derleyip sayıları orada okuyun.</p>

<h2 id="ne-zaman-seciyorum">Ne zaman seçiyorum</h2>
<p>Bir kişinin ya da küçük bir ekibin bakacağı site ve ürünlerde Svelte seçiyorum. Bileşenler kısa kalıyor, reaktivite dosyada görünüyor, yönlendirmeyi ve render’ı tek bir resmî framework karşılıyor. React’i, onu zaten bilen büyük bir ekip için, React Native ile kod paylaşılacaksa ya da gereken kütüphane yalnızca React için varsa seçerim.</p>
<p>Denemek için resmî CLI ile bir SvelteKit projesi oluşturun:</p>
<pre><code>npx sv create my-app
cd my-app
npm install
npm run dev</code></pre>
<p>Tek bir bileşenle başlamak isterseniz <a href="https://svelte.dev/playground">playground</a> tarayıcıda çalışıyor.</p>]]></content:encoded>
    </item>
  </channel>
</rss>
