Wed Sep 02 2026
Merhaba! 👋
Ben de senin gibi uzun süre normal LCD/OLED ekranlarla boğuştuğum bir geliştiriciyim. Bir gün E‑Ink (elektronik mürekkep) ekranlı bir cihaz elime geçti ve hayatım değişti. Bu yazıda bu teknolojinin neden bu kadar özel olduğunu, hangi soruları cevaplayacağımızı ve sen ne kazanacağını kısaca özetleyeceğim.
Hadi başlayalım! 🚀
Bir sonraki bölümde E‑Ink panellerin iç yapısı ve nasıl sürülür konusuna dalacağız.
Merhaba, hazırsan başlayalım! 🧭 Senden hemen şimdi E‑Ink ekranların asıl özelikleriyle tanışacağız ve bunların UI/UX kararlarını nasıl etkilediğini pratik bir örnek üzerinden göreceğiz.
// UI yöneticisi, hızlı kaydırmayı engelliyor
if (einkScreen.isAnimating) {
// Ekrana anlık bir çizimden ibaret → izin ver
}
| Özellik | UI Etkisi | Uygulama Örneği |
|---|---|---|
| Yavaş yenileme | Smooth animasyonları engeller | “Sayfa dönüş animasyonu” yerine basit slide veya fade efektleri |
| Ghosting | Hareket desenini olumsuz etkileyebilir | Kaydırma sınırları ekleyin ve görüntü kalitesini korumak için önceden yükleme yapın |
| Düşük güç | Kullanıcıların nadiren ara yüzü yenilemeyi bekler | Akıllı yenileme modları → sadece önemli ekran değişimlerinde yenileme yapar |
| Yüksek kontrast | Minimal renk paleti tercihi | Tek renkli temalar, okunabilirlik için iyileştirilmiş yazı tipleri |
// Sabah: Kullanıcı "Okuyucular" sekmesine dokunur
if (einkScreen.powerMode === 'high') {
// Hızlı ekran yenilemesi → okuyucu deneyimi
renderPagesQuickly();
}
// Öğleden sonra: “Çevirme” animasyonuna izin verme
if (touchGesture.isSwipe) {
// E‑Ink ekranında kaydırmayı engellemek için manuel bir geçiş yapalım
animatePageChange('fade', duration: 300);
}
Ne oluyor? Bu basit mantık, bir deneyimi canlı GIF’lere benzetmek yerine kağıt dokunuşuna uyarlayarak hem pil ömrünü korur hem de ekranın benzersiz özelliklerine uygun bir okuma deneyimi sunar.
Bunları kendi uygulamalarınıza dahil etmek, okuyucular için kağıt benzeri bir deneyimi korurken okuma performansını en üst düzeye çıkarır, pil ömrünü korur ve gölgede kalmaz. 🌟
Hadi bu ilkeleri geliştirin, okuyucularınız için tam olarak bekledikleri kağıt hissini yaratan cihazları tasarlayalım! 🛠️
E‑Ink ekranlarda renk paleti ve tipografi doğru seçilmezse, kullanıcı gözleri yorulur ve içerik kaybolur. Benim deneyimimde, basit bir CSS değişkeni seti ve prefers-color-scheme medya sorgusu ile her iki tema da sorunsuz çalıştı 🎯.
#000 (siyah) ve #FFF (beyaz) temel çifti her zaman en güvenlidir.%10–%90 arası gri tonları (ör. #1A1A1A, #E0E0E0) metin okunurluğunu artırır, arka planı yormaz.İpucu: E‑Ink’de renklerin “yanıp sönmesi” yoktur, bu yüzden keskin kenarlar ve net kontrast hayat kurtarır.
:root {
--color-bg: #FFFFFF;
--color-text: #000000;
--color-muted: #666666;
--color-primary: #0066CC; /* link / buton vurgusu */
}
| Öğe | Öneri | Neden |
|---|---|---|
| Body | 1rem (≈16 px) |
E‑Ink piksel yoğunluğu düşük, büyük font göz yormaz. |
| Heading | 1.5rem – 2rem |
Hiyerarşi net olur. |
| Line‑height | 1.6 – 1.8 |
Satır aralığı geniş, göz takibi kolaylaşır. |
| Letter‑spacing | 0.02em |
Karakterler birbirine girmez. |
body {
font-size: 1rem;
line-height: 1.7;
letter-spacing: 0.02em;
color: var(--color-text);
background-color: var(--color-bg);
}
h1, h2, h3 { line-height: 1.3; }
prefers-color-scheme 🌗Kullanıcının sistem tercihine göre otomatik geçiş sağlar, manuel toggle eklemek de kolaydır.
/* Varsayılan (light) tema */
:root {
--color-bg: #FFFFFF;
--color-text: #000000;
--color-muted: #666666;
--color-primary: #0066CC;
}
/* Koyu tema – sistem tercihi dark ise */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #121212;
--color-text: #E0E0E0;
--color-muted: #AAAAAA;
--color-primary: #66A3FF;
}
}
/* İsteğe bağlı: kullanıcı manuel toggle ile .dark sınıfı eklerse */
html.dark {
--color-bg: #121212;
--color-text: #E0E0E0;
--color-muted: #AAAAAA;
--color-primary: #66A3FF;
}
Nasıl çalışıyor?
prefers-color-scheme medya sorgusunu okur.:root değişkenlerini yeniden tanımlar.var(--color-...) kullandığı için tek satırda tema değişir ✅.font-display: swap ile ilk renderde sistem fontu görünsün, sonra web fontu devreye girsin.pre { overflow-x: auto; } ekleyin, yatay kaydırma E‑Ink’de can sıkıcı olmasın.Bu konvansiyonları uyguladığınızda, E‑Ink cihazlarda okunabilirlik ve kullanıcı memnuniyeti artar. Keyifli kodlamalar! 🚀
Hazırsan başlayalım 🚀
Tam yenileme (full refresh) – Ekranın her pikseli baştan çizilir.
Kısmi yenileme (partial refresh) – Sadece değişen alanlar güncellenir.
İpucu: Çoğu e‑ink cihazda kısmi yenileme varsayılan olarak açık gelir. Gerektiğinde (ör. sayfa geçişi) bir tam yenileme tetikleyerek ghosting’i temizleyebilirsin.
fullRefresh() çağır.#000 on #FFF).transition / animation – E‑ink’te genellikle no‑op olur, ama CPU’yu meşgul eder.requestAnimationFrame ile kontrol edersen bile her kare bir kısmi yenileme tetikler → pil drains.Kural: Sadece kullanıcı etkileşimi (buton basımı, scroll) sonrası görsel değişiklik yap. Sürekli döngüdeki animasyonları kaldır ❌.
requestAnimationFrame + e‑ink Özel Yenileme API ÖrneğiÇoğu modern e‑ink SDK (ör. E Ink Carta, ReMarkable, Onyx) şu iki fonksiyonu sunar:
// e‑ink SDK global nesnesi (örnek isim)
const Eink = window.Eink || {};
// Kısmi yenileme – sadece değişen rect
function partialRefresh(x, y, w, h) {
if (Eink.partialRefresh) {
Eink.partialRefresh({ x, y, width: w, height: h });
}
}
// Tam yenileme – ghosting temizliği
function fullRefresh() {
if (Eink.fullRefresh) {
Eink.fullRefresh();
}
}
// Animasyon döngüsü – sadece gerekli alanları yeniler
let lastScrollY = 0;
function onScroll() {
const currentY = window.scrollY;
const delta = Math.abs(currentY - lastScrollY);
lastScrollY = currentY;
// Sadece değişen dikey bandı yenile (ör. 100 px yükseklik)
requestAnimationFrame(() => {
partialRefresh(0, currentY, window.innerWidth, 100);
});
}
// Her 8 kısmi yenilemede bir tam yenileme
let partialCount = 0;
function scheduleFullRefreshIfNeeded() {
partialCount++;
if (partialCount >= 8) {
requestAnimationFrame(() => {
fullRefresh();
partialCount = 0;
});
}
}
// Event listener – performans için passive
window.addEventListener('scroll', onScroll, { passive: true });
Ne oluyor burada?
onScroll tetiklendiğinde sadece kaydırılan bandı partialRefresh ile güncelliyoruz.requestAnimationFrame sayesinde tarayıcı bir sonraki boş karede çalıştırır → tekerlekten tekerleğe (frame‑aligned) yenileme, pil tasarrufu.scheduleFullRefreshIfNeeded her 8 kısmi güncellemede bir fullRefresh çağırarak ghosting’i temizler.Not: Eğer cihazın SDK’sı
partialRefresh/fullRefreshyerinerefreshRegion/refreshAllsunuyorsa, isimleri buna göre uyarlayın.
Eink.partialRefresh testi yap.transition: none ve animation: none ekle.requestAnimationFrame ile(frame‑aligned) güncelleme yapıyor musun?refreshRegion / refreshAll fonksiyonlarını doğrula.Bu adımları uyguladığında e‑ink uygulaman daha pilli, daha akıcı ve ghosting’siz bir deneyim sunar ✨. Happy coding! 🎉
Hazırsan başlayalım 🚀
Erişilebilirlik sadece “iyi niyet” değil, kodunuzun herkes için çalışmasını garantileyen bir sözleşme. Özellikle ekran okuyucular (screen readers) ve e‑ink / düşük enerjili ekranlar kullanıcı deneyimini tamamen değiştirebilir. İşte dikkat etmemiz gereken noktalar:
<header>, <nav>, <main>, <section>, <article>, <footer> gibi etiketler, ekran okuyucuya sayfa haritasını sunar.<h1>–<h6> hiyerarşisi, içerik sırasını ve önemini bildirir.<label> ile form alanlarını bağlamak, “bu input ne için?” sorusunu ortadan kaldırır.role="button", role="dialog", aria-expanded, aria-controls gibi özellikler, native HTML yetmediğinde devreye girer.aria-label / aria-labelledby ile görünmeyen ama anlamlı isimler verebilirsiniz.aria-live="polite" dinamik güncellemeleri (bildirimler, hata mesajları) anons ettirir.| Seviye | Minimum Kontrast Oranı | Kullanım Alanı |
|---|---|---|
| AA | 4.5:1 (normal metin) / 3:1 (büyük metin) | Genel içerik |
| AAA | 7:1 (normal) / 4.5:1 (büyük) | Kritik bilgiler, hata mesajları |
İpucu: E‑ink ekranlarda renk skalası dar olduğu için metin‑arka plan kontrastını test etmek kritik.
prefers-contrast: moremedya sorgusu ile yüksek kontrast modu sunabilirsiniz.
Tab, Shift+Tab, Enter, Space, ok tuşları).aria-live anonsu geliyor mu?| Hata | Neden Sorun? | Hızlı Çözüm |
|---|---|---|
<div> yerine buton |
Klavye erişimi yok, role eksik | <button> kullanın veya role="button" tabindex="0" ekleyin |
Eksik alt |
Görsel içerik anlatılmaz | Anlamlı alt="..." yazın; dekoratifse alt="" |
| Düşük kontrast | Düşük ışıkta okunmaz | Renk paletini WCAG AA/AAA’ya uygun hale getirin |
aria-live yok |
Güncellemeler duyurulmaz | aria-live="polite" (veya assertive) ekleyin |
| Form etiketsiz | Kullanıcı ne yazacağını bilemez | <label for="id"> veya aria-label kullanın |
Önce sorun: Bir açılır menü (dropdown) sadece <div> ile yapılmış, klavye ile açılamıyor.
<!-- ❌ Yanlış: sadece div, role yok -->
<div class="dropdown">
<div class="trigger">Menü</div>
<div class="menu">
<a href="#profil">Profil</a>
<a href="#ayarlar">Ayarlar</a>
<a href="#cikis">Çıkış</a>
</div>
</div>
Düzeltme: Semantik <button> + aria-haspopup + aria-expanded + aria-controls.
<!-- ✅ Doğru: erişilebilir dropdown -->
<div class="dropdown">
<button
class="trigger"
aria-haspopup="true"
aria-expanded="false"
aria-controls="dropdown-menu"
id="dropdown-trigger"
>
Menü
</button>
<ul
class="menu"
role="menu"
id="dropdown-menu"
aria-labelledby="dropdown-trigger"
hidden
>
<li role="none"><a role="menuitem" href="#profil">Profil</a></li>
<li role="none"><a role="menuitem" href="#ayarlar">Ayarlar</a></li>
<li role="none"><a role="menuitem" href="#cikis">Çıkış</a></li>
</ul>
</div>
Ne değişti?
button → klavye odaklanabilir, Enter/Space ile tetiklenir.aria-expanded → menü açık/kapalı durumu anons edilir.aria-controls + id → ilişki kurar, okuyucu “menü açıldı” der.role="menu" / role="menuitem" → menü yapısını tanımlar.hidden attribute → başlangıçta gizli, JS ile hidden toggle edilir.<header>, <nav>, <main>, <footer>) ekle.h1 → h2 → h3…) bozmadan kullan.<label> veya aria-label bağla.aria-live (polite/assertive) ekle.prefers-reduced-motion ve prefers-contrast medya sorguları ile animasyon/kontrast tercihlerini saygıla.Özet: Semantik HTML + doğru ARIA + yeterli kontrast = herkes için kullanılır, düşük enerjili ekranlarda da sorunsuz bir deneyim. Küçük bir checklist ile alışkanlık haline getirin, gelecekte “neden bu çalışmıyor?” demenize gerek kalmaz 😉
Hadi şimdi kodunuzu bir gözden geçirin ve erişilebilirliği bir adım ileri taşıyın! 🚀
E‑ink cihazlarda geliştirme yaparken en büyük zorluk ekran yenileme hızı ve ghosting (kalıntı görüntü) davranışını gözlemlemektir. Ben şu yöntemleri denedim ve hepsi işe yaradı 🎯
adb devices ile cihazı tanıyın, sonra logcat, screencap ve dumpsys komutlarını koşun.chrome://inspect üzerinden remote debugging açın.| Amaç | Komut | Açıklama |
|---|---|---|
| Log toplama | adb logcat -d > logs.txt |
Tüm sistem loglarını dosyaya yazar. |
| Belirli tag filtreleme | adb logcat -s MyAppTag:* |
Sadece MyAppTag ile başlayan logları alır. |
| Performans profili | adb shell perf record -g -p $(pidof com.example.app) |
CPU çağrı grafiği oluşturur. |
| Ghosting görselleştirme | adb exec-out screencap -p > frame1.png → sleep 2 → adb exec-out screencap -p > frame2.png → compare -metric AE frame1.png frame2.png diff.png |
İki kare arasındaki piksel farkını diff.png olarak kaydeder. |
| Bellek dökümü | adb shell dumpsys meminfo com.example.app |
Uygulamanın RAM kullanımını gösterir. |
Nasıl çalışıyor?
logcat -d tamponu boşaltır ve anlık bir görüntü alır.perf record örnekleme yaparak hangi fonksiyonların CPU’yu yediğini gösterir.screencap + compare (ImageMagick) ile ghosting farkını görsel olarak tespit edersiniz ✅#!/usr/bin/env bash
# adb_log_collect.sh
# Kullanım: ./adb_log_collect.sh <cihaz_serial> <çıkış_klasörü>
set -euo pipefail
DEVICE_SERIAL="${1:?Cihaz serial numarası gerekli}"
OUT_DIR="${2:?Çıkış klasörü gerekli}"
TIMESTAMP=$(date +"%Y%m%d_%H%M%S")
LOG_FILE="${OUT_DIR}/logcat_${TIMESTAMP}.txt"
echo "📥 ${DEVICE_SERIAL} cihazından logcat alınıyor..."
adb -s "${DEVICE_SERIAL}" logcat -d > "${LOG_FILE}"
echo "✅ Loglar kaydedildi: ${LOG_FILE}"
echo "🔍 İsterseniz 'grep -i error ${LOG_FILE}' ile hata satırlarını filtreleyin."
Bu sayede ne oluyor?
adb shell setprop debug.egl.profiler 1 → GPU profilini açar (bazı e‑ink cihazlarda desteklenir).adb shell settings put global window_animation_scale 0 → Animasyonları kapatarak ghosting testlerini daha net hale getirir.adb -e bayrağını kullanarak varsayılan emülatörü hedefleyin, gerçek cihazda -s <serial> ile.Bu yöntemlerle gerçek cihaz ve simülatör arasında hızla geçiş yapabilir, log, performans ve ghosting verilerini toplayabilirsiniz. Keyifli testler! 🚀
Hazırsan başlayalım 🚀
E‑ink ekranlar için UI geliştirirken doğru araç seti hayat kurtarıyor. Aşağıda sıkça başvurduğum paketleri ve neden işe yaradıklarını özetledim.
react-ink-components, ink-uivue-ink-ui, @ink/vue-componentssvelte-ink, ink-svelte-libBu paketler düşük yenileme hızı, yüksek kontrast ve minimal JS ile optimize edilmiş bileşenler sunar.
Örneğin react-ink-components içindeki <InkButton /> bileşeni otomatik olarak prefers-reduced-motion medya sorgusuna uyum sağlar.
| Çerçeve | Neden tercih ediyorum? |
|---|---|
| Tailwind CSS | Utility‑first yapı sayesinde e‑ink için sadece gerekli sınıfları ship ediyorum; bundle boyutu minik kalıyor. |
| CSS Modules | Bileşen bazlı kapsülleme; global namespace kirliliği yok. |
| UnoCSS (bonus) | Tailwind’e benzer ama on‑demand derleme ile daha hızlı. |
İpucu: tailwind.config.js içine media: 'eink' gibi custom media query ekleyip @media (prefers-color-scheme: dark) yerine @media (eink) kullanabilirsiniz.
vite-plugin-ink-optimize (görselleri 1‑bit BMP’ye dönüştürür)webpack-ink-asset-loader (font subsetting + dithering)esbuild-plugin-ink-minify (dead‑code elimination + minify)Vite ile başlarken npm create vite@latest my-ink-app -- --template react-ts diyip ardından yukarıdaki plug‑in’i eklemek ** dakikalar sürüyor.
package.json örneği{
"name": "my-ink-app",
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-ink-components": "^2.1.0",
"ink-ui": "^1.4.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.2.0",
"vite": "^5.0.0",
"vite-plugin-ink-optimize": "^0.3.1",
"tailwindcss": "^3.4.0",
"postcss": "^8.4.0",
"autoprefixer": "^10.4.0"
}
}
Ne oluyor burada?
react-ink-components + ink-ui → e‑ink hazır bileşenlervite-plugin-ink-optimize → build sırasında görselleri 1‑bit BMP’ye çevirir, font subsetting yaparclass="ink:text-white ink:bg-black" gibi özel utility’ler yazıp anında görüyorum.@storybook/react-vite) → bileşenleri izole test etmek için; e‑ink modunda preview ekranına prefers-reduced-motion: reduce ekleyip davranışı doğruluyorum.Kısa özet:
vite-plugin-ink-optimize kombinasyonu hız + boyut avantajı verir.package.json şablonunu kopyalayıp projenize göre düzenleyin — hemen npm install diyip kodlamaya başlayabilirsiniz.Keyifli kodlamalar! 🚀
Hadi pratik bir örnek üzerinden anlayalım. Bir not uygulaması oluştururken üç şeyi bir arada tutmaya çalıştık:
Aşağıda, öğrendiklerimizi birleştirerek oluşturduğumuz minimal bir bileşen var: EInkNote.tsx.
// EInkNote.tsx
import React, { useState, useRef, useEffect } from 'react';
interface EInkNoteProps {
/** Notun başlangıç değerini alır */
initialValue?: string;
/** Değişiklikler dışa aktarıldığında tetiklenen callback */
onSave?: (value: string) => void;
/** Notu temel olarak işaretler (obskür) */
pinned?: boolean;
}
const EInkNote: React.FC<EInkNoteProps> = ({
initialValue = '',
onSave,
pinned = false,
}) => {
// 📝 Düzenleme sırasındaki "taslak" metni tutar
const [draft, setDraft] = useState<string>(initialValue);
// 🔒 Tamamlandıktan sonra kaydedilen metin
const [saved, setSaved] = useState<string>(initialValue);
// ✏️ Komponentin düzenleme modunda olup olmadığını takip eder
const [isEditing, setIsEditing] = useState<boolean>(false);
// 📥 Değişikliklerin kaydedildiği bir referans (debounce ekonomisi için)
const saveRef = useRef<NodeJS.Timeout | null>(null);
/* ──────────────────────────────────────────────────────────
🔄 Kısmi Yenileme Tetikleyicileri
– Sadece gerektiğinde yeniden render oluruz:
* Metin input’unda değişiklik *ve*
* Tamamla / İptal butonuna basıldığında
────────────────────────────────────────────────────────── */
const handleDraftChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const value = e.currentTarget.value;
setDraft(value);
// Son inputun üzerinden 300 ms geçtiğinde tasarruflı bir şekilde kaydetmeye başlat
if (saveRef.current) clearTimeout(saveRef.current);
saveRef.current = setTimeout(() => {
// Otomatik kaydetme yerine, kullanıcı “Tamam” a basana kadar bekliyoruz
// böylece gereksiz render’ları önlemiş oluyoruz.
}, 300);
};
const commitEdit = () => {
setSaved(draft); // Kaydedilen değeri güncelle
setIsEditing(false); // Düzenleme modunu kapat
onSave?.(draft); // Dışa aktarma – üst bileşen haberdar olsun
};
const cancelEdit = () => {
setDraft(saved); // Kaydedilen değeri geri al (kaybetmeyi önle)
setIsEditing(false);
};
/* ──────────────────────────────────────────────────────────
🎯 Accessiblity: İyi etiketlenmiş DOM
– aria-label, aria-pressed, role=listbox vb. konumlandırma yaparız.
────────────────────────────────────────────────────────── */
return (
<div
role="textbox"
aria-label={pinned ? 'Sabitlendi, not' : 'Not'}
aria-pressed={pinned}
className={`note ${pinned ? 'pinned' : ''}`}
onClick={() => setIsEditing(true)}
>
{!isEditing ? (
// Görüntüleme modu: Kaydedilen notu göster
<p className="preview">{saved || 'Not ekle için tıkla'}</p>
) : (
// Düzenleme modu: Input + butonlar
<div className="editor">
<textarea
value={draft}
onChange={handleDraftChange}
aria-label="Not içeriği düzenle"
autoFocus
/>
<div className="actions">
<button
type="button"
onClick={commitEdit}
aria-label="Değişiklikleri kaydet"
>
✅
</button>
<button
type="button"
onClick={cancelEdit}
aria-label="Değişikliklerden vazgeç"
>
⛔️
</button>
</div>
</div>
)}
</div>
);
};
export default EInkNote;
İki durumlu state (draft vs saved) 🎯
Debounced input 🔁
setTimeout ile alt限制limitleyiciyiz, yalnızca kullanıcı input’unundan sonra bir süre geçtiğinde kaydetmeyi düşünürüz.Kısmi yenileme ✔️
Erişilebilirlik etiketleri ♿
aria-label, aria-pressed, role="textbox" ile ekran okuyucuları notun durumunu anlayabilir.aria-label ile etiketlenmiştir, klavye navigasyonu dostudur.Basit komponent yapısı 🛠
initialValue, onSave, pinned) ve basit bir stilde (.note, .pinned) bağımlıdır.<EInkNote
initialValue="Merhaba E Ink!"
onSave={(val) => console.log('Kaydedildi:', val)}
pinned={true}
/>
initialValue → Notun başlangıç metni.onSave → Her “Tamam” tıklandığında çağrılır → üst bileşen veriyi alabilir, API’ye gönderilebilir vb.pinned → Notun önemli olduğunu işaretler → farklı bir arka plan veya kalın yazı ile vurgulanır.Bu kadar! Sadece temel bir not alma uygulamasını ele aldık, ama durum yönetimini, kısmi yenilemeyi ve erişilebilirliği gerçek hayatta nasıl ele alacağımızı gördük. Daha sonra “Gelişmiş Özellikler” bölümüne geçerken, veri kalıcılığını, optimistik güncellemeleri ve çekirdek iş mantığını ekleyeceğiz.
Hazırsan biraz "geleceğe bakış" yapalım. E‑ink dünyası artık sadece siyah‑beyaz okuyucular için değil; renkli, etkileşimli ve hatta akıllı yüzeyler için de evrimleşiyor. Ben de bu konularda sürekli merak edip denemeler yapıyorum — işte şu an en heyecanlandığım dört alan:
Tarayıcıda çalışan bir e‑ink uygulaması yazıyorsan, WASM senin en iyi arkadaşın olabilir.
wasm-bindgen ile paketle.wasm-pack build --target web --release ile üretim build’i al, sonra requestAnimationFrame yerine requestIdleCallback + navigator.scheduling.isInputPending() kombinasyonu kullanarak boşta kalma zamanlarında güncelleme tetikle.Bu sayede ne oluyor?
Ana thread serbest kalır, kullanıcı etkileşimi (sayfa çevirme, zoom) donmaz; e‑ink paneli de sadece değişen pikselleri yeniler → pil ömrü artar, ghosting azalır 🎯
ACeP (Advanced Color ePaper) ve E Ink Gallery 3 artık üretimde. Kısaca farklar:
| Panel | Renk Sayısı | Yenileme Hızı (Tam) | Kullanım Alanı |
|---|---|---|---|
| ACeP | 60.000+ (full color) | ~10‑15 sn | Afiş, perakende etiketi, müze etiketleri |
| Gallery 3 | 50.000+ | ~1.5 sn (partial) / ~3 sn (full) | E‑okuyucular, not defterleri, dış mekan tabelası |
Deneysel özellikler şimdi deneyebilirsin:
Floyd‑Steinberg yerine Atkinson veya Bayer 8×8 matrislerini dene — metin kenarları daha net, renk geçişleri daha doğal çıkıyor.temperature_compensation tablosunu kendi kalibrasyon verilerinle override et.E‑ink dokunmatik olduğunda (ör. Wacom EMR veya capacitive layer), haptic eklemek kullanıcı deneyimini tamamen değiştirir.
VibrationEffect.createPredefined(VibrationEffect.EFFECT_TICK); iOS’ta UIImpactFeedbackGenerator(style: .light). Web’de ise Vibration API (navigator.vibrate([10, 5, 10])) — ama dikkat: tarayıcı izinleri ve mobil OS kısıtlamaları var.Bu kısım benim en merak ettiğim alan. Küçük bir model (ör. MobileNetV3‑Small veya TinyBERT) cihazda çalıştırarak:
Floyd‑Steinberg → ordered geçir).Şu an deneyebileceğin deneysel özellikler listesi ✅
Interpreter ile çalıştırın.Ben de bu konularda hala deneyler yapıyorum, özellikle AI‑driven layout ve haptic pattern library üzerine küçük bir açık kaynak proje başlatmayı planlıyorum. Sen de denersen sonuçları paylaşır mısın? Merakla bekliyorum 😊
Yazıyı birlikte tamamladığımız için teşekkür ederim! 🎉 Umarım bu rehber, React ile çevrimiçi mağaza oluşturma sürecinde yanlış gidenleri düzeltecek ve önünüze çıkabilecek engelleri aşmanıza yardımcı olacak maddeleri içeriyordu.
Son olarak şunu diyeyim:
Bana ulaşabileceğin kanallar:
github.com/kullaniciadın@kullaniciadınhello@kullaniciadi.comHerhangi bir sorun, fikir veya sadece bir merhaba demek istersen, çekinmeden bana yaz. Ben buradayım! 😊
Bu içerik tamamen yapay zeka destekli otomasyon sistemi ile üretilmiştir.
All rights reserved