erişilebilirlik adı altında kullanılan niteliklerden bir tanesi, daha çok ekran okuyucular için ilgili elemanın yaptığı işi belirtmek için kullanılıyor, görme engelli arkadaşların kullandığı ekran okuyucu programlar bunları algılayıp ona göre mesela tıklanan bir buton olduğunu, bir link bağlantısı olduğunu vs. anlayabiliyor.
erişilebilirlik konusuyla ilgili bir ders hazırlama niyetindeyim, daha detaylasını orada anlatırım ama şimdilik bu kadar bilgi yeterli olacaktır sanırım.
css'lerini ayrıca dahil edebilirsin, mesela github'ın markdown css'i için:
https://github.com/sindresorhus/github-markdown-css
.markdown-body class'ı aynen kalsın, buradaki css dosyasını import etmen yeterli olur. Kodları renklendirmek içinse başka eklentiler kullanman gerek tabi :)
fetch apisi de aslında promise dönüyor, yani muhtemelen fetch'i direk return etsekte aynı işi yapardı ancak ben kontrolü sevdiğim için resolve ve reject durumlarını bazı koşullara göre yönetmek ve bunu her servis istediğinde ayrıca yapmak istemediğim için tek fonksiyon içinde bu tarz bir yaklaşıma gittim, diğer türlü fetch'i direk return etsek her bir servis isteğinde then bloğu koyup res.json() dedikten sonra aynı kontrolleri vs. yapmak gerekecektir. toastr vs. daha global yönetmek adına böyle bir yaklaşıma gittim.
performansı artırmak için sayfada göründüğü anda componentleri yükletebilirsiniz, observer api ile, bizim kanalda da bir örneği var, bunu react'e uyarlamakta çok zor değil hazır paketleride var, ayırmaktan bir zarar gelmez ama sayfada görünmeyeni atmanında çok bir esprisi yok
mantık şöyle olmalı, bakiyeyi tuttuğun bir değerin olduğunu düşünüyorum. örneğin şöyle bir şeyde tutulsun şimdilik;
const balance = 6000
loop'da index değerini de dahil edip eğer index değeri 0 değilse bir önceki elemanı index - 1 ile seçip onun değerini balance'dan çıkarmak olacak. yani;
<table className="table text-wrap">
<thead>
<tr>
<th>Tarih</th>
<th>Tip</th>
<th>Firma</th>
<th>Açıklama</th>
<th>Tutar</th>
<th>Bakiye</th>
</tr>
</thead>
<tbody>
{transactions.map((item, key) => {
return (
<tr key={item.id}>
<td>{item.document_date}</td>
<td>{item.document_type}</td>
<td>{item.interlocutors_label}</td>
<td>{item.description}</td>
<td>
{readableMoneyFormat(item.document_total)} {props.detail.currency}
</td>
<td>
{readableMoneyFormat(key !== 0 ? balance - transactions[key - 1].document_total : balance)}
</td>
</tr>
);
})}
</tbody>
</table>;
çalışan bir örnek: https://codesandbox.io/s/icy-tdd-l1mpdj?file=/src/App.js
eğer mp4 apple cihazlarda çalışmıyorsa ki çalışması gerekir, codec problemi vardır, mp4 dosyası geçerli bir codec'te değildir.
internette örnek mp4 dosyaları var, onları deneyip bir test edin eğer onlar çalışıyorsa sorun codec'tendir. Boyut ile şöyle alakası olabilir, eğer stream ettiremiyorsan dosyayı tümünü yüklene kadar çalıştırmayabilir. onu stream sunucu yapıp çözmen gerekir ama o da ekstra maliyet :)
sayıları almak istiyorsan ufak bir regex'te kullanabilirsin:
$codes = [
'2110660MAVİ',
'2110660SARI',
'2110660KIRMIZI'
];
foreach($codes as $code) {
preg_match('@([0-9]+)@', $code, $number);
echo $number[1] . '<br />';
}
.mov uzantısı web standartı olmadığı için mümkünse videoların .mp4 formatında olması tüm cihazlarda doğru çalışmasını sağlayacaktır.
en basitinen bi sayaç yaptığını düşün, setInterval() ile her 1 saniyede bir değer değiştiriyorsun.
bu sayaç componenti ile işin bittiğinde arkaplanda bu fonksiyon çalışmaya devam etmemesi için, bunu temizlemen gerekiyor.
bu ve bunun gibi örnekler çoğaltılabilir, amaç performansa etki edecek şeylerden kaçınmak için temizlemektir.
bunun içinde useEffect() içinde bir fonksiyon return ederek yapıyorsunuz.
Görselinde hata var, yeni bir tane yüklersen yardımcı olmaya çalışırız ^^