CDN · v2.4.1 · Kenar ağı

Bağlan, kullan.

ui.fkdev.sbs bir dokümantasyon sitesi olduğu kadar bir CDN’dir: her sürüm kendi klasöründe durur, hiç değişmez, imzalıdır ve dünyanın her yerinde kenar sunuculardan önbellekle sunulur.

v2.4.1CSS 10,4 KB brJS 6,0 KB brSRI sha384immutable · 1 yıl

01Tek satırda bağlan#

HTMLÜretim için önerilen

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://ui.fkdev.sbs" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@300..700&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://ui.fkdev.sbs/v2.4.1/fkdev-ui.min.css" integrity="sha384-ywbvrnvLBhspdz061sb4+HVmL4bAnbhyuwKyDq0qCBVdEeLw2Le+aT+M0XhiumnM" crossorigin="anonymous">
<script src="https://ui.fkdev.sbs/v2.4.1/fkdev-ui.min.js" integrity="sha384-M00Zh34vyulzgDN4UvQcDJteSAYjql+zh1KP3B8lMfPikmAoJLDzbKnjWiFHPsvT" crossorigin="anonymous" defer></script>

Bu kadar. integrity imzası dosyanın tek bir baytı bile değişirse tarayıcının onu çalıştırmamasını sağlar; crossorigin="anonymous" imza kontrolü için gereklidir ve çerez göndermez.

02Canlı hız ölçümü#

ui.fkdev.sbs, Cloudflare kenar ağından sunulacak şekilde yapılandırılır; hedef ilk bayt süresi 20 ms’nin altıdır. Aşağıdaki sayı tahmin değil: şu an, senin bağlantında, bu sayfanın yüklediği CSS dosyası için tarayıcının ölçtüğü değerdir.

—ms

Ölçmek için butona bas.

Sayıyı ne etkiler?Kenar sunucuya uzaklık, Wi-Fi/mobil ağ kalitesi ve dosyanın o kenarda önbellekte olup olmadığı. İlk ziyaretten sonra dosya bir yıl boyunca tarayıcı önbelleğinden gelir; yani tekrar eden ziyaretlerde ağ süresi sıfırdır.

03Adres türleri#

Adres	Ne verir?	Önbellek	Ne zaman?
`/v2.4.1/`	Tam olarak bu sürüm, sonsuza kadar	1 yıl · immutable	Üretim. SRI ile birlikte
`/v2/`	2.x serisinin en yenisi	1 saat	Kırılmayan güncellemeleri otomatik almak
`/latest/`	Her zaman en yeni sürüm	10 dakika	Prototip, CodePen, deneme
`/dist/`	En yeni sürüm (1.0 bağlantıları için)	10 dakika	Eski projeler bozulmasın diye

Sabit CSS

Sabit JS

v2 CSS

latest CSS

SRI yalnızca sabit sürümde/v2/ ve /latest/ içeriği zamanla değişir; bu adreslere integrity eklersen yeni sürüm çıktığında dosya engellenir. İmzayı yalnızca /v2.4.1/ ile kullan.

04Dosyalar, boyutlar ve imzalar#

Dosya	Ham	gzip	brotli
`fkdev-ui.min.css`	62,1 KB	12,0 KB	10,4 KB
`fkdev-ui.min.js`	21,8 KB	6,7 KB	6,0 KB
`fkdev-icons.css`	4,2 KB	991 B	837 B
`fkdev-ui.css`	69,7 KB	12,7 KB	10,7 KB
`fkdev-ui.js`	31,5 KB	8,2 KB	7,3 KB
`fkdev-tokens.json`	3,3 KB	892 B	777 B
`icons.json`	22,9 KB	3,3 KB	3,0 KB

Ayrıca: manifest.json (bu tablonun makine okunur hâli), versions.json (tüm sürümler), icons/*.svg (95 ikon) ve tüm paket ZIP (73,2 KB).

05SRI imzasını kendin doğrula#

TerminalTerminal

curl -s https://ui.fkdev.sbs/v2.4.1/fkdev-ui.min.css | openssl dgst -sha384 -binary | openssl base64 -A

Çıktı, başına sha384- eklendiğinde yukarıdaki imzayla birebir aynı olmalı:

Metinfkdev-ui.min.css

sha384-ywbvrnvLBhspdz061sb4+HVmL4bAnbhyuwKyDq0qCBVdEeLw2Le+aT+M0XhiumnM

Metinfkdev-ui.min.js

sha384-M00Zh34vyulzgDN4UvQcDJteSAYjql+zh1KP3B8lMfPikmAoJLDzbKnjWiFHPsvT

06Tokenlar, ikonlar ve JSON uçları#

Uç	İçerik
`/v2.4.1/fkdev-icons.css`	İkon servisi: `<i class="fk-i fk-i-cart">` ile 95 ikon (liste)
`/v2.4.1/fkdev-tokens.json`	Açık ve koyu temanın tüm `--fk-*` değişkenleri
`/v2.4.1/icons/{ad}.svg`	Tek tek SVG ikonlar (`search`, `mail`, `db`…)
`/v2.4.1/icons.json`	Tüm ikonların SVG kodu, tek istekte
`/v2.4.1/manifest.json`	Dosya listesi, boyutlar, SRI
`/versions.json`	Yayınlanmış sürümler ve takma adlar

HTMLİkonu kullanmanın iki yolu

<img src="https://ui.fkdev.sbs/v2.4.1/icons/search.svg" width="20" height="20" alt="">

<span class="ikon-ara"></span>
<style>
  .ikon-ara {
    display: inline-block; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url(https://ui.fkdev.sbs/v2.4.1/icons/search.svg) center / contain no-repeat;
    mask: url(https://ui.fkdev.sbs/v2.4.1/icons/search.svg) center / contain no-repeat;
  }
</style>

JavaScriptTokenları Figma, Tailwind ya da mobil uygulamaya aktar

const tokens = await fetch('https://ui.fkdev.sbs/v2.4.1/fkdev-tokens.json').then((r) => r.json());
console.log(tokens.light['--fk-ink'], tokens.dark['--fk-ink']);

07Önbellek ve başlıklar#

Başlık	Değer	Neden?
`Cache-Control`	`public, max-age=31536000, immutable`	Sabit sürüm bir yıl boyunca yeniden sorulmaz
`Access-Control-Allow-Origin`	`*`	Her siteden SRI ile yüklenebilsin
`Timing-Allow-Origin`	`*`	Kullanan siteler hız ölçebilsin
`Content-Encoding`	`br` / `gzip`	Dosya yaklaşık %80 küçülür
`X-Content-Type-Options`	`nosniff`	Tarayıcı dosya türünü tahmin etmesin

.htaccess.htaccess (bu sitenin kendi ayarı)

<If "%{REQUEST_URI} =~ m#^/v\d+\.\d+\.\d+/#">
  Header set Cache-Control "public, max-age=31536000, immutable"
</If>
<If "%{REQUEST_URI} =~ m#^/v\d+/#">
  Header set Cache-Control "public, max-age=3600, stale-while-revalidate=86400"
</If>
<If "%{REQUEST_URI} =~ m#^/(latest|dist)/#">
  Header set Cache-Control "public, max-age=600, stale-while-revalidate=86400"
</If>
<FilesMatch "\.(css|js|json|svg)$">
  Header set Access-Control-Allow-Origin "*"
  Header set Timing-Allow-Origin "*"
</FilesMatch>

08Cloudflare ayarları#

DNS: ui için bir kayıt ekle (CNAME → hosting adresin ya da A → sunucu IP’si) ve turuncu bulutu açık (Proxied) bırak.
SSL/TLS: Full (strict); Always Use HTTPS ve HTTP/3 açık.
Cache Rules: /v*/ → Eligible for cache, Edge TTL 1 yıl, Browser TTL “origin’e uy”. /latest/* → Edge TTL 10 dakika.
Tiered Cache açık: kenar sunucular önce birbirine sorar, origin’e daha az gidilir.
Brotli açık.
Rocket Loader kapalı; dosya içeriğini değiştiren her optimizasyon SRI imzasını bozar.

Yeni sürüm yayınlarkenSabit sürüm klasörünü asla değiştirme; yeni numarayla yeni klasör aç. Sonra yalnızca /v2/, /latest/ ve /dist/ için Cloudflare’de “Purge by prefix” yap.

09Yedek plan (fallback)#

CDN’e ulaşılamazsa kendi sunucundaki kopyaya düş. İmzalı dosya engellenirse de aynı yol çalışır.

HTML

<link rel="stylesheet" href="https://ui.fkdev.sbs/v2.4.1/fkdev-ui.min.css"
      integrity="sha384-ywbvrnvLBhspdz061sb4+HVmL4bAnbhyuwKyDq0qCBVdEeLw2Le+aT+M0XhiumnM" crossorigin="anonymous"
      onerror="this.onerror=null;this.removeAttribute('integrity');this.href='/assets/fkdev/fkdev-ui.min.css'">
<script src="https://ui.fkdev.sbs/v2.4.1/fkdev-ui.min.js"
        integrity="sha384-M00Zh34vyulzgDN4UvQcDJteSAYjql+zh1KP3B8lMfPikmAoJLDzbKnjWiFHPsvT" crossorigin="anonymous" defer
        onerror="var s=document.createElement('script');s.src='/assets/fkdev/fkdev-ui.min.js';document.head.appendChild(s)"></script>

10Sürüm politikası#

Değişiklik	Numara	Örnek
Hata düzeltme, görsel incelik	yama · `2.4.1`	Tooltip’in kesilmesi düzeltildi
Yeni bileşen, yeni sınıf, yeni JS metodu	küçük · `2.4.0`	`fk-drawer`, `FK.confirm`
Sınıf adının değişmesi ya da silinmesi	büyük · `3.0.0`	Eski sınıflar en az bir büyük sürüm boyunca çalışır

Yayınlanan sabit sürüm dosyaları asla silinmez ve değişmez; bugün bağladığın adres yıllar sonra da aynı dosyayı verir.