açıkçası yıllardır merak ettiğimiz ve sayfa takılmadan bu iş nasıl yürür diye düşündüğümüz önemli bir konuydu, meğer bunu istediğimiz şekliyle yapmışlar, daha önce ihtiyacımız olmasına rağmen başka yöntemle işleri çözüp üstüne düşmemiştik, ayrıca gayet başarılı bir anlatımınız var. şifalar dilerim kolay gelsin.
Yazılım bilmeyen ama yazılım ekibine talep ileten biri olarak çok faydalandım. Bir şeyi talep edebilmek için önce öyle bir özelliğin var olduğunu bilmek gerekir. Bu videolar sayesinde ben de neyi nasıl talep edebileceğimi öğrenmiş oluyorum. Teşekkürler.
Teşekkürler Tayfun Hocam.Dediğiniz gibi eğitimlerinizi izliyorum lazım olduğunda gelip kanaldan bulup tekrar izliyorum. Her şeyi ezberleyemeyiz mantıklı da değil, bu dersin konusu da zaten lazım olanı yükle :) böyle bir şeyin olduğunu bilmek yeterli. Yolunuz açık olsun sağlıklı huzurlu günler dilerim.
Yine harika bir konu bulmuşsun eline emeğine sağlık gözümün nuru. Bu gidişle React ağırlık vermeye başlayacağım senin yüzünden. Gökhan da React başlayabilir her an... 😉 Selamlar...
Abi hassiktir çektirdin bana helal olsun. Zaten böyle bir çözüm lazımdı bana, ileriye bırakmıştım, bu paketi bana gösterdin hem de yanlışlıkla spotify'ını açınca saturnus'u gördüm. benim dışımda saturnus dinleyen yazılımcı da varmış. şuan şöyle bir sıkı sıkı sarılasım geldi sana.
@@PROTOTURKCOM seviliyorsun abi, özelden atma şansın var mı? son 1 yılda doom listeme 1-2 şarkı eklemişimdir maksimum, madencilik gibi bir şey güzel doom parçası bulmak :D
Geçenler de bende aynı konuyu merak etmiştim bi an ama pek işime yaramadığından araştırma gereği duymamıştım. Senden dinleyince çok daha güzel oldu abiii... Emeğine sağlık 👌🤩 Eşinize de çok geçmiş olsun 🥲
Geçmiş olsun. Video şahane olmuş, gerçekten eline ve emeğine sağlık. Ayrıca soruyu soran arkadaşa da teşekkürler, güzel bir soru ve belki de her projede kullanılabilir bir yapı. Dediğin gibi sadece react değil diğer frameworkler için de var görünüyor. Sen keywordu vermişin. Projedeki timeline yapısında belki ihtiyacım olabilir ilerde, kenara attım şimdilik :D
Bu arada Brand Colors videosuna baktım, videoyu daha önce izlemiş olduğum halde bu yöntemi kullandığın kısmını hatırlamadım. Muhtemelen React kullanmadığım için ve nerede işime yarar ki diye düşünüp es geçmiş olabilirim. Bu vesileyle videoyu tekrar izleyip bir şeylerin daha farkına varmış oldum. Şimdiyse herhalde ilerde projede kullanma ihtimalim olabileceğinden mütevellit attım şimdilik "ulaşabileceğim" bir kenara. Şimdiki kafamla düşündüğümde ister react ile ister başka framework ile yapılmış olsa da, o yapının farklı frameworkler'de ya da vanilla'da yapılmış versiyonları olabiliyormuş. Ama diyelim ki yoksa ve bu şey projemiz için çok önemli ve başka bir alternatifi yoksa; o zaman yapılmış olandan veya mantığımıza yatandan ilgili kısımları anlayarak kendimiz de sıfırdan da yazabiliriz. Belki de sıfırdan yazarken daha kolay ve kendi yöntemimizle çözmüş de oluruz. (ikinci paragraf bir nevi hem kendime dönük ileriye not hemde ortaya öyle)
Senin içerigi izledikten sonra kesin bir yerde kullanmam gerekiyor jfjdjfjf Zoom izledim müsteriye tasarimi göstermek için kullandim bunu izledim direkt su isi yaparken kullanayim bunu ben dedim :) seviyoruz yol göstermeni
konunun ajax ile bir alakası yok farkındasın değil mi? olay dom'u manipüle etmekte, ben onların offset'ini hesaplatırım ona göre gösterir gizlerim diyorsan zaten paket kullanmadan kendin de yapabilirsin, bu bir yaklaşım nasıl çözeceğin sana kalmış
aslında jquery ilede yapılabiliriz mantığı basit, ekran boyutunun scroll offsetini alaraktan ekran dışında kalanları bellekten gizlersek domda gözükmezse kütüphanesiz bir şekilde yapmış oluruz daha performanslı çalışır yapabilirsem kodu sizlerle paylaşırım
Abi, merak ettim. MySQL veri tabanından bu mantığı nasıl işleyeceğim? Sayfalama mantığı gibi sürekli yeni sorgu çalıştırarak mı, yoksa bir defada çekip dizi ile buradaki sistemi mi kullanmam gerekiyor?
14:38 burda style içinde absolute top değeri ve visibility özelliği görünce ondan sormak istedim tam nasıl çalıştığını hocam yoksa izledim baştan sona üzüldüm böyle demenize. mantığını tam anlayamamışım daha detaylı araştırmak kaynak kodları incelemem lazım demekki teşekkürler hocam
videoyu izlemedin dememin sebebi, aslinda orada bakarken sadece 20 tanesi gosteriliyor diye ozellikle gosterdim, yenileri gosterilirken oncekiler dom'dan kaldiriliyor, style ile konumlandirma yapiyorlar, soyle dusun 100.000 satir bir icerik gosteriyorsun, scrollbar'in buna gore bir yuksekligi bilmesi gerekiyor, ancak dom'da hepsinin gozukmemesi gerekiyor diyelimki 100.000 satir verini ekrana basinca scrollbar'in yuksekligi 20000px olarak hesaplandi, scroll olan alan 20000px olarak belirleniyor ve gizlenip gosterilen ogeler bu 20000px icinde position ile konumlandiriliyor ki dogru zamanda dogru yerde gorunebilsinler
Ben bunu kendim yazacaktım çalışmam için acaba jquery yada prue js içinde tavsiye edecek bir paket tecrübesi olan varsa yoruma cevap verirse sevinirim.
Peki o sanallaştırılıp gösterilmeyen veriler nerede duruyor da o veriye gidildiği anda yükleniyor? Twitter sunucusundan mı geliyor, 20 postu rame atıp dinamik olarak mı tutuluyor?
twitter'da gerçekten son 20 tweet görünüyor, aşağı doğru indikçe yenileri yükleniyor, dom'da ise state'de değerler tutuluyor ve scroll pozisyonuna göre dom'da gösterilip gizleniyor
zaten olayın en çok performans sağlayan kısmı renderı azaltmak. state'de veri durmaya devam ederken dom'dan kaldırıldığı için, tarayıcı bu elemanları çizmek zorunda kalmaz.
kütüphane olmasaydı sadece daha fazla kod yazarak çözerdin. nasıl yapardık dersen de; hayal gücüne kalmış derdim bi ton yol bulunurdu. çünkü kütüphaneler kodu azaltır ama yazılımcıyı kısıtlar.
Abi arkada çalışan algoritma tam olarak nasıl çalışıyor? Yeni içerikleri var olan etiketlerin içine ekleyip eskileri siliyor mu? twitter'dan düşünürsek. twitterda aşağı doğru gidince istek atıp datayı getiriyor ama yukarı doğru gidince her hangi bir istek atmıyor. Eskileri yani yukarda kalanları siliyorsa, onlar için istek atması gerekmiyor mu?
@@PROTOTURKCOM Anladım sanırım abi. Bayağı güzelmiş. Şöyle incelikli yapılara bayılıyorum. Çok ilgi çekici. Peki pure js için düşünürsek, onda nasıl çalışıyor olabilir? Gerçi orda da state’de tutabilir diye düşünüyorum
Döngüdeki İtem içinde kullanılan html yoğunluğu image vb yükler olmadığı için böyle. Ciddi bir html yükü ile bu satırlar tek seferde basıldığında 100 bine gere kalmaz bir kaç binde dahi gümler.. Heleki bu kartlara basılınca modal açılacak ve onun detayı gelecek düşün o zaman modalın açılış hızı inanılmaz düşer takılır. Bir kaç bin satırda dahi çökecektir. Tecrübeyle sabit emin olabilirsin.
Abi elimdeki projede timeline kısmı var nasıl yaparım diye düşünürken tesadüfen bu video karşıma çıktı. Bilgisayarımdaki Adobe XD verilerimi UA-cam'a satmadıysa büyük tesadüf valla :D
bunun şöyle bir dezavantajı var mesela baya aşağı indin indin sonra ctrl+f yapıp arama yaptın diyelim. sayfadaki tüm öğelerde arama yapmıyor sadece o gözükenlerde arıyor. bu benim twitter'da canımı sıkan bir olay.
Çokta önemli gelmedi bana, arama yapılması ihtiyaç hasıl olursa arama kutusu konur, konu kapanır, demek istediğini anlıyorum ama birisi ctrl f ile arama yapsın diye performansı öldürmek çok mantıklı değil, keza farklı yöntemler geliştirilebilir kullanıcı deneyimi açısından da
açıkçası yıllardır merak ettiğimiz ve sayfa takılmadan bu iş nasıl yürür diye düşündüğümüz önemli bir konuydu, meğer bunu istediğimiz şekliyle yapmışlar, daha önce ihtiyacımız olmasına rağmen başka yöntemle işleri çözüp üstüne düşmemiştik, ayrıca gayet başarılı bir anlatımınız var. şifalar dilerim kolay gelsin.
Yazılım bilmeyen ama yazılım ekibine talep ileten biri olarak çok faydalandım. Bir şeyi talep edebilmek için önce öyle bir özelliğin var olduğunu bilmek gerekir. Bu videolar sayesinde ben de neyi nasıl talep edebileceğimi öğrenmiş oluyorum. Teşekkürler.
React Native’de de FlatList bu işlevi yapıyor
Geçmiş olsun. Teşekkür ederim video için.
Çok güzel bir video içeriği olmuş yine çok teşekkür ederiz. Ayrıca eşinize çok geçmiş olsun.
Hocam yardırmışsın yine emeğine sağlık harika bir anlatım.
OoOo reis yeni video atmış.. Bi saniye çay kapıp geliyorum ☕😁
Teşekkürler Tayfun Hocam.Dediğiniz gibi eğitimlerinizi izliyorum lazım olduğunda gelip kanaldan bulup tekrar izliyorum. Her şeyi ezberleyemeyiz mantıklı da değil, bu dersin konusu da zaten lazım olanı yükle :) böyle bir şeyin olduğunu bilmek yeterli.
Yolunuz açık olsun sağlıklı huzurlu günler dilerim.
Hocam react için optimizasyonu ele aldığınız kapsamlı bir video gelir mi
Yine harika bir konu bulmuşsun eline emeğine sağlık gözümün nuru. Bu gidişle React ağırlık vermeye başlayacağım senin yüzünden. Gökhan da React başlayabilir her an... 😉 Selamlar...
gokhan basladi bile abi :) bilgi iyidir, zarar gelmez, sagolasin
Abi hassiktir çektirdin bana helal olsun. Zaten böyle bir çözüm lazımdı bana, ileriye bırakmıştım, bu paketi bana gösterdin hem de yanlışlıkla spotify'ını açınca saturnus'u gördüm. benim dışımda saturnus dinleyen yazılımcı da varmış. şuan şöyle bir sıkı sıkı sarılasım geldi sana.
ahahah, benim bi gizli playlist'im var, orada bolca saturnus var
i.ibb.co/KKZjZnV/Screenshot-2023-09-10-at-23-35-59.png
@@PROTOTURKCOM seviliyorsun abi, özelden atma şansın var mı? son 1 yılda doom listeme 1-2 şarkı eklemişimdir maksimum, madencilik gibi bir şey güzel doom parçası bulmak :D
Geçenler de bende aynı konuyu merak etmiştim bi an ama pek işime yaramadığından araştırma gereği duymamıştım. Senden dinleyince çok daha güzel oldu abiii... Emeğine sağlık 👌🤩
Eşinize de çok geçmiş olsun 🥲
harikasın hocam, ellerine sağlıkkk
güzel içerik, eline sağlık, geçmiş olsun
inanılmaz yararlı bir bilgi olmuş. Teşekkürler
Harika video olmuş, projemde kullanacağım. Geçmiş olsun bu arada 🙏
yine mükemmel bir konu ve video olmuş elinize ağzınıza kodunuza sağlık hocam
Üstad pure js örneklerini de çekebilirsen çok iyi olur. Süper video olmuş.
+1
Emeğine sağlık Tayfun abi 🖤
Geçmiş olsun. Video şahane olmuş, gerçekten eline ve emeğine sağlık. Ayrıca soruyu soran arkadaşa da teşekkürler, güzel bir soru ve belki de her projede kullanılabilir bir yapı. Dediğin gibi sadece react değil diğer frameworkler için de var görünüyor. Sen keywordu vermişin. Projedeki timeline yapısında belki ihtiyacım olabilir ilerde, kenara attım şimdilik :D
Bu arada Brand Colors videosuna baktım, videoyu daha önce izlemiş olduğum halde bu yöntemi kullandığın kısmını hatırlamadım. Muhtemelen React kullanmadığım için ve nerede işime yarar ki diye düşünüp es geçmiş olabilirim. Bu vesileyle videoyu tekrar izleyip bir şeylerin daha farkına varmış oldum. Şimdiyse herhalde ilerde projede kullanma ihtimalim olabileceğinden mütevellit attım şimdilik "ulaşabileceğim" bir kenara.
Şimdiki kafamla düşündüğümde ister react ile ister başka framework ile yapılmış olsa da, o yapının farklı frameworkler'de ya da vanilla'da yapılmış versiyonları olabiliyormuş. Ama diyelim ki yoksa ve bu şey projemiz için çok önemli ve başka bir alternatifi yoksa; o zaman yapılmış olandan veya mantığımıza yatandan ilgili kısımları anlayarak kendimiz de sıfırdan da yazabiliriz. Belki de sıfırdan yazarken daha kolay ve kendi yöntemimizle çözmüş de oluruz.
(ikinci paragraf bir nevi hem kendime dönük ileriye not hemde ortaya öyle)
Bunu JQuery'de nasıl yapabiliriz?
Tayfun bey HTMX'in yaklaşımını nasıl buluyorsunuz. Bir video çekseniz ne güzel olur...
valla hacı harikasın yaaaaaaaaaaaaaaaaaaaaaaaaa gerçektennnnnnnnn eline emegine anlatımına saglıkkk
Eline sağlık, güzel içerik olmuş
cok tesekkurler.
Hocam bu durum RAW JS ile yapılabilir mi?
rsize observer loop limit exceeded abi böyle bir hata alıyorum nedeni ne oalbliir acaba
Harika bilgi çok teşekkürler
Emeğine sağlık Tayfun abi, senden ricam reactla proje yapımı daha çok gelsin
Twitter klon geliyor yolda
Adam mülakatta sorucak 1.000.000 satırı nasıl gösterirsin diye şaaaakk yapıştırıcaksın. Bu arada baya kapsamlı kullanım alanı varmış. Thx reyis
Senin içerigi izledikten sonra kesin bir yerde kullanmam gerekiyor jfjdjfjf
Zoom izledim müsteriye tasarimi göstermek için kullandim bunu izledim direkt su isi yaparken kullanayim bunu ben dedim :) seviyoruz yol göstermeni
Bunu ajax ilede yapabiliriz aslında. Kaydıkça veriyi getirip eskileri gizleriz yada direk domdan sileriz.
konunun ajax ile bir alakası yok farkındasın değil mi? olay dom'u manipüle etmekte, ben onların offset'ini hesaplatırım ona göre gösterir gizlerim diyorsan zaten paket kullanmadan kendin de yapabilirsin, bu bir yaklaşım nasıl çözeceğin sana kalmış
Teşekkürler
aslında jquery ilede yapılabiliriz mantığı basit, ekran boyutunun scroll offsetini alaraktan ekran dışında kalanları bellekten gizlersek domda gözükmezse kütüphanesiz bir şekilde yapmış oluruz daha performanslı çalışır yapabilirsem kodu sizlerle paylaşırım
Tayfun abiii
Abi, merak ettim. MySQL veri tabanından bu mantığı nasıl işleyeceğim? Sayfalama mantığı gibi sürekli yeni sorgu çalıştırarak mı, yoksa bir defada çekip dizi ile buradaki sistemi mi kullanmam gerekiyor?
veritabanı sorgularında lazy kullanırsın
bunu nasıl napıyo displayin none mı yapıyor vuedeki vif v-show gibi mi
hayir, dom'dan tamamen kaldiriyor, videoyu izlemedin muhtemelen su yorumu yaptigina gore, videoda birlikte baktik nasil yaptigina :/
14:38 burda style içinde absolute top değeri ve visibility özelliği görünce ondan sormak istedim tam nasıl çalıştığını hocam yoksa izledim baştan sona üzüldüm böyle demenize. mantığını tam anlayamamışım daha detaylı araştırmak kaynak kodları incelemem lazım demekki teşekkürler hocam
videoyu izlemedin dememin sebebi, aslinda orada bakarken sadece 20 tanesi gosteriliyor diye ozellikle gosterdim, yenileri gosterilirken oncekiler dom'dan kaldiriliyor, style ile konumlandirma yapiyorlar, soyle dusun 100.000 satir bir icerik gosteriyorsun, scrollbar'in buna gore bir yuksekligi bilmesi gerekiyor, ancak dom'da hepsinin gozukmemesi gerekiyor diyelimki 100.000 satir verini ekrana basinca scrollbar'in yuksekligi 20000px olarak hesaplandi, scroll olan alan 20000px olarak belirleniyor ve gizlenip gosterilen ogeler bu 20000px icinde position ile konumlandiriliyor ki dogru zamanda dogru yerde gorunebilsinler
@@PROTOTURKCOM hocam cidden çok değerlisiniz bunu bilmenizi isterim 🥺 detaylı açıklamanız için tekrar teşekkür ederim iyi sağlıklı günler
Abi javascript websocketler ile ilgili video çekebilir misin? ilgim var da
Ben bunu kendim yazacaktım çalışmam için acaba jquery yada prue js içinde tavsiye edecek bir paket tecrübesi olan varsa yoruma cevap verirse sevinirim.
Sonunda yeni video 🎉❤
Peki o sanallaştırılıp gösterilmeyen veriler nerede duruyor da o veriye gidildiği anda yükleniyor? Twitter sunucusundan mı geliyor, 20 postu rame atıp dinamik olarak mı tutuluyor?
twitter'da gerçekten son 20 tweet görünüyor, aşağı doğru indikçe yenileri yükleniyor, dom'da ise state'de değerler tutuluyor ve scroll pozisyonuna göre dom'da gösterilip gizleniyor
zaten olayın en çok performans sağlayan kısmı renderı azaltmak. state'de veri durmaya devam ederken dom'dan kaldırıldığı için, tarayıcı bu elemanları çizmek zorunda kalmaz.
Peki, bu tarz kütüphaneler olmasaydı bu problem nasıl çözülürdü? Sonuç olarak kütüphanelerede güven olmuyor
kütüphane olmasaydı sadece daha fazla kod yazarak çözerdin. nasıl yapardık dersen de; hayal gücüne kalmış derdim bi ton yol bulunurdu. çünkü kütüphaneler kodu azaltır ama yazılımcıyı kısıtlar.
hocam udemy-de java, phyton gibi dersleri çekmeyi düşünüyormusunuz?
Abi arkada çalışan algoritma tam olarak nasıl çalışıyor? Yeni içerikleri var olan etiketlerin içine ekleyip eskileri siliyor mu? twitter'dan düşünürsek. twitterda aşağı doğru gidince istek atıp datayı getiriyor ama yukarı doğru gidince her hangi bir istek atmıyor. Eskileri yani yukarda kalanları siliyorsa, onlar için istek atması gerekmiyor mu?
Gerekmez state de tutuyor sadece dom da göstermiyor
@@PROTOTURKCOM Anladım sanırım abi. Bayağı güzelmiş. Şöyle incelikli yapılara bayılıyorum. Çok ilgi çekici. Peki pure js için düşünürsek, onda nasıl çalışıyor olabilir? Gerçi orda da state’de tutabilir diye düşünüyorum
aynen oyle, onda da bir degiskende dizi olarak tutuyor ayni mantik
@@PROTOTURKCOM Anladım abi sağolasın
Hocam 100.000'de sizde kasma yine olmuyor fakat bende VList bile olsa 100.000 yapınca kasma donma yaşıyorum. Bu bilgisayarın gücü ile mi alakalı?
Döngüdeki İtem içinde kullanılan html yoğunluğu image vb yükler olmadığı için böyle. Ciddi bir html yükü ile bu satırlar tek seferde basıldığında 100 bine gere kalmaz bir kaç binde dahi gümler.. Heleki bu kartlara basılınca modal açılacak ve onun detayı gelecek düşün o zaman modalın açılış hızı inanılmaz düşer takılır. Bir kaç bin satırda dahi çökecektir. Tecrübeyle sabit emin olabilirsin.
cansın cann ❤❤
Merheba proturk
Abi elimdeki projede timeline kısmı var nasıl yaparım diye düşünürken tesadüfen bu video karşıma çıktı. Bilgisayarımdaki Adobe XD verilerimi UA-cam'a satmadıysa büyük tesadüf valla :D
Hocam video konusu ile alakasız olacak ama IDE'nizin adı nedir?
webStorm
virtual scroll işte sveltekitde de vardı
Content olarak Bun'i tavsiye ederim. Muthis bir sey olmus
abi adamsın.
Uzun zamandır izlemiyodum baya zayıflamışsın kral
hayat bizi zayiflatti kral
iyiymiş kral
noldu lan hani reverse çalışıyordu
uu very nice içerik 🔫
üstad çekiliş yap artık
zamani belli zaten, neyin cekilisini yapayim
İLJK DEFA İLK OLDUUUUMMMMMM
bunun şöyle bir dezavantajı var mesela baya aşağı indin indin sonra ctrl+f yapıp arama yaptın diyelim. sayfadaki tüm öğelerde arama yapmıyor sadece o gözükenlerde arıyor. bu benim twitter'da canımı sıkan bir olay.
Çokta önemli gelmedi bana, arama yapılması ihtiyaç hasıl olursa arama kutusu konur, konu kapanır, demek istediğini anlıyorum ama birisi ctrl f ile arama yapsın diye performansı öldürmek çok mantıklı değil, keza farklı yöntemler geliştirilebilir kullanıcı deneyimi açısından da
performans daha önemli. ki zaten o şirket onu düşünüp sadece profilde arama gibi, herhangi bir başlık altında arama yapabilme özelliğini dahil etti.