JavaScript ile Picture in Picture API Kullanımı

Selamlar. Bu yazıda size JavaScript ile Picture in Picture API Kullanımı hakkında bilgi sunmaya çalışacağım. Öncelikle ilgili bilgilere bu linkten ulaşabilirsiniz.

JavaScript ile Picture in Picture API Kullanımı

JavaScript ile Picture in Picture API Kullanımı

Öncelikle bu API ne yapıyor ona bakmalıyız. Bu API kullanıldığı websitesinde bir pencere daha oluşturulmasına imkan tanıyor. Oluşturulan bu pencere yani window top level bir pencere. Açık olan tüm pencerelerin önüne, sağ alt kısma yerleştiriliyor. Bu sayede media akışlarını yani videoları başka sekmelere geçseniz de kullanabiliyorsunuz.

Tarayıcıyı alta aldığınızda ya da bir başka sekmeye geçtiğinizde etkileşim devam ederken, üste çıkmış olan video penceresi de devam edecektir. İyi olan şu ki siz burada
Devamını Oku

JavaScript Repositories I Follow

Hi. For a while, I’m trying to follow some educational repositories. These are really useful repositories.

Maybe you’ve heard of them before. This is an article for people who ask where to start. Anyway.

Javascript

Before Starting

The following list is not ordered. It’s good if you can follow them all. So, you don’t have to start with the first one.

Awesome JavaScript

🐢 A collection of awesome browser-side JavaScript libraries, resources, and shiny things.

This repository categorized the topics. For example, you need to something about routing, you can easily navigate to its subtopics. I found the page.js router thanks
Devamını Oku

Intersection Observer API ile Lazy Loading

Selamlar. Bu yazıda Intersection Observer API ile Lazy Loading hakkında size bilgi sunacağım. Aslında bu iş için hazırda kütüphaneler de var. Olay şöyle ki bir projede görseller tek seferde 90-100 tane kadar yükleniyordu. Sayfanın en altında kalan ve benim henüz görmediğim görsel bile anında yükleniyordu. Bunun için IntersectionObserver API kullandım. İşimi de gördü.

Intersection Observer API ile Lazy Loading

Intersection Observer API ile Lazy Loading

Aşağıdaki gibi bir örneğe sahiptim.

React Router’da History Listen İşlemi

Selamlar. Bir nedenden ötürü React Router’da History Listen İşlemi yapmam gerekiyordu. Buraya kadar sorun yok. Sonuçta en basit olarak her route load olduğunda match edileceği için sorun yaşanmıyor. Bu aşamada withRouter da kulanabilirdim.

React Router'da History Listen İşlemi

 

componentDidMount() Bu İş İçin Var

En kötü componentDidMount dersiniz ve o component yüklendiği anda işleminizi yaparsınız. Ancak benim gibi root elementle işiniz varsa bu biraz sıkıntılı. Bir nedenden dolayı unique id oluşturmam gerekiyordu.

Daha sonra oluşturduğum bu unique id’yi de state’i güncelleyip link ve path’e aktarmalıydım. Bu işler vue tarafında çok daha basit aslında. Aşağıdaki yapı sizin işinizi görür.

CodeceptJS’te Script Çalıştırma

Selam. Yine işime yarayan bir özelliği paylaşmak istiyorum. CodeceptJS’te Script Çalıştırma hakkında bir yazı olacak bu.

CodeceptJS'te Script Çalıştırma

Bir web sayfasına girdiniz ve geliştirici konsolunu açarak bir şeyler yaptınız. Eğer jQuery ile geliştirilen bir web sitesi ise aşağıdaki kodu yazmış olabilirsiniz

Bu gibi işlemlerle başlık değişiyor mu vs. ne olduğunu görebiliyorsunuz en nihayetinde bir amaç uğruna bunu yapıyorsunuz.

Yine Vue ile kodlanmış olan bir projede yapmak istediğim testte buna ihtiyacım oldu. Native date pickerın change event’ini tetiklemem gerekiyordu. Bunun için yardımcı fonksiyon olan executeScript fonksiyonunu kullanabilirsiniz. Aynı
Devamını Oku