Kategori: Web

aria2 – İndirme Aracı

Genelde torrent’ten bir dosya indirdiğimde uTorrent gibi torrent programlarını kullanırdım. Ancak terminal üzerinden otomasyon yazmak istediğimde bunun yeterli olmadığını gördüm, ayrıca yaptığım testlerde uTorrent gibi torrent programlarının aria2 aracına göre daha yavaş indirdiğini fark ettim. O yüzden torrent indirmelerini bu araçla yapıyorum, ayrıca otomatize etmeye çalıştığımda da çok daha kolay oluyor benim için.

Öncelikle kuruluma bir bakalım.

Centos için aria2 Kurulumu

Eğer centos sunucu üzerinde kurulum yapmak isterseniz şu komutları çalıştırmanız yeterli.

yum install epel-release -y
yum install aria2 -y

Mac için aria2 Kurulumu

Eğer brew gibi bir araç kullanıyorsanız kurulum için şu komutu çalıştırmanız yeterli.

brew install aria2

Eğer brew yüklü değilse terminalde şunu çalıştırarak yükleyebilir ve daha sonra yukarıdaki gibi kurulumu yapabilirsiniz.

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" < /dev/null 2> /dev/null

Windows için aria2 Kurulumu

Eğer sisteminiz 32bit ise şuradan 64bit ise şuradan dosyaları indirin. Dosyayı zip’ten çıkardığınızda içinde aria2c.exe diye bir dosya göreceksiniz, onu terminalde kullanabilirsiniz artık.

Torrent İndirme İşlemleri

Şimdi bir torrent dosyasını indirmeye başlatmak için şu komutu kullanabilirsiniz.

aria2c ornek.torrent

Tabi bu şekilde allocate etmeye çalışacak, bu da torrent’in boyutuna göre belli bir süre alıyor. Bunu önlemek için --file-allocation=none tanımını ekleyebilirsiniz.

aria2c ornek.torrent --file-allocation=none

Ayrıca eğer indirme işlemi bittiğinde bu işlemi sonlandırmak isterseniz --seed-time=0 şeklinde belirleyebilirsiniz.

aria2c ornek.torrent --seed-time=0

Kısaca ideal bir indirme komutu şöyle olabilir

aria2c ornek.torrent --file-allocation=none --seed-time=0

Bir diğer önemli konuda, bazen torrent dosyalarının içindeki bazı dosyaları indirmek isteyebilirsiniz. Öncelikle içinde neler olduğuna bakmak için --show-files komutunu çalıştırın.

aria2c ornek.torrent --show-files

Burada index değerlerini göreceksiniz. Örneğin 10 dosya varsa 1’den 10’a kadar indexi olacak. Siz 2. dosyayı indirmek isterseniz şöyle kullanabilirsiniz

aria2c ornek.torrent --select-file=2

Eğer 1. ile 5. video arasındakileri indirmek isterseniz

aria2c ornek.torrent --select-file=1-5

Bir başka alternatif 1. dosya 3. dosya ve 7-9 arasındakileri indirmek için

aria2c ornek.torrent --select-file=1,3,7-9

Son olarak belki şöyle bir sh örneği verebilirim. Bir dizinde bulunan tüm torrent dosyalarını sırasıyla indirmek isterseniz şöyle bir sh dosyası oluşturabilirsiniz.

for f in *.torrent; do
    aria2c "$f" --file-allocation=none --seed-time=0
done

Bunu torrent.sh adıyla bir dosya oluşturup içine yazın ve terminalden şu komutla ilgili dizinin içindeyken çalıştırın.

sh torrent.sh

Böylece sırasıyla torrrent dosyalarınızı indirecektir. Eğer --seed-time=0 komutunu koymazsanız işlem bitince kendini sonlandırmayıp seed etmeye devam edeceği için sonraki indirmeye geçmiyor bu yüzden o ayar çok önemli 🙂

Sonuç

Yukarıda gösterdiklerim sıkça kullandığım komutlardı. Elbette bu aracın çok daha fazla ayarı var ve bunların tamamına şuradan bakabilirsiniz.

Benim işime çok yaradı, bir gün mutlaka sizin de işinize yarayabilir 🙂

Web fontlarını yükleme sırasında görünür kılın

Fontlar genellikle yüklenmesi zaman alan büyük dosyalardır. Bazı tarayıcılar ise yazıları font yüklenene kadar gizler. Google Page Insight’da hız testi yaparsanız, bu gibi durumlarda şöyle bir hata verdiğini görebilirsiniz.

Bu problemin çözümünü ise @font-face tanımında font-display: swap ekleyerek önüne geçebileceğimizi söylüyorlar.

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

font-display özelliği font’un nasıl görüneceğini belirlemek için kullanılıyor. swap değeri ise tarayıcıya sistem fontunun anında yüklenmesini ve özel font dosyası yüklendiğinde değiştirilmesini istediğini söylüyor.

Google Fontları

Google fontlarını kullanırken de, url’in sonuna &display=swap şeklinde parametre eklerseniz, aynı işlevi görecektir.

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Kaynak: https://web.dev/font-display

Geliştirici Aracını kullanarak sayfanın ekran görüntüsünü almak

Genelde sayfanın ekran görüntünü almak için eklenti kullanılıyor. Ancak geliştirici aracı, bir çok özelliği barındırdığı gibi manuel olarak ekran görüntüsü almayı da destekliyor 🙂 Nasıl yapıyoruz? Geliştirici aracını açıp ⌘ + ⇧ + P tuşu ile komut satırı paneli açılıyor. Ya da aşağıdaki gibi ilgili paneli açın.

Buradan Screenshot diye arattığınızda 4 farklı ekran görüntüsü alma seçeneği var. Bunlardan full size olanı ile baştan aşağı tamamının ekran görüntüsünü alabilirsiniz.

Render işlemi bittikten sonra ekran görüntüsü png formatta iniyor. Eğer bir durumdan ötürü ihtiyacınız olursa aklınızda bulunsun 🙂 Capture area screenshot ilede sizin seçeneğiniz bir alanın ekran görüntüsünü kayıt edebilirsiniz. Kolay gelsin.

Algolia nedir? Nasıl kullanılır?

Arama konusu yazılımda herkesin zorlandığı konulardan bir tanesi. Önemli olan veritabanındaki veriyi alıp göstermek değil, büyük ölçekli filtreleme işlemleri ve işlem sürelerini minimuma indirerek kullanıcıya iyi bir arama deneyimi yaşatmak. Buda büyük ölçekli projelerde çokta kolay olmayan bir durum. Bu gibi durumlarda Algolia diyor ki, gönder bana verini ben sana en hızlı şekilde bu hizmeti vereyim.

Ek olarak autocomplete, instantsearch gibi konularda da hizmet veren Algolia’nın ücretli olduğunu söylememe gerek yok sanırım? Hesap açıp 14 gün boyunca ücretsiz deneyebiliyorsunuz. Eğer hoşunuzda giderse (ki adamlar şu sıralar ciddi yatırımlar alıyorlar, belli ki herkesin hoşuna gidiyor) aylık minimum 29$ ödeyerek bu servisi kullanmaya devam edebilirsiniz.

Baktığınızda bu kadar büyük ölçekli işlerde çokta önemsenmeyecek bir rakam diyebiliriz. Elbette bu 29$’lık paketin bir limiti var ancak dediğim gibi, performans istiyorsanız o zaman biraz paraya kıymanız gerek 🙂

Okumaya devam et “Algolia nedir? Nasıl kullanılır?”

Prototürk Soru & Cevap Bölümü Açıldı!

Uzman cevap’tan sonra bir daha soru & cevap sistemi hazırlamam diyordum ancak çok fazla talep geldiği için her şeyi prototürk altında birleştirmeye karar verdim. Bu sefer sunucuları kendimde tutmaya karar verdim, bu devirde kimseye güven olmuyor 🙂 Artık öyle sunucu yandı, yedekler gitti modası geçti, ölene kadar buradayız Allah izin verirse ^^

Her türlü öneri ve görüşe açığım. Ziyaret edip geri dönüşlerinizi lütfen bildirin 🙂

https://prototurk.com/soru-cevap

Terminal’de Bulunduğumuz Dizini phpStorm ile Açmak

Videolarda sublime ile kolayca klasörü açtıklarında sinir oluyordum, ufak bir araştırma ile bunu phpStorm içinde yapmak mümkünmüş. Efenim öncelikle terminalde ilgili klasöre girdikten sonra şu kodu çalıştırırsanız;

open -a PhpStorm ./

./ yazdığım için mevcut dizini phpStorm ile açacaktır. Bu çok uğraştırıcı derseniz bi alias tanımlayıp kısa olarak kullanabilirsiniz. Terminalde bir alias oluşturun, adını feriha koyun.

alias feriha ='open -a PhpStorm'

Artık bir klasörü phpStorm’da açmak için ferihayı kullanabilirsiniz.

feriha ./

Her oturumda bu alias’ı kullanmak için;

nano ~/.zshrc

En alta yine aynı kodu ekleyip kayıt edin bu kadar 🙂

Youtube’da Videolarınıza Gelen Tüm Yorumlara Otomatik Kalp Atın

Ben kalp atmayı çok seviyorum, birine değer verdiğini gösteriyor. Ama ne yalan söyleyeyim tek tek atmasıda çok zahmetli. Tabi birde bu özelliğin yeni geldiğini kabul edersek bundan 5-6 sene önceki insanların yorumlarını kalplemeyi isterdim. Ama bunu elle yapmak mantıklı değil, öyle console’dan bir deneyim çalışır mı dedim çalıştı, normalde bu denli büyük siteler buna engel olurlardı ama youtube canım sağolsun kafasına takmamış. Henüz studio’ya geçmediği için olsa gerek, bu yüzden videolarınıza gelen yorumlara kalp atmak isterseniz dashboard’da yorumlar sayfasına gidin. Chrome’da developer tools’u açın ve şu kodları yapıştırıp çalıştırın ve bekleyin. Taki bitene kadar ????

function autoHeart(){
   var buttons = document.querySelectorAll('.yt-uix-creator-heart-button');
   [].forEach.call(buttons, function(button) {
      button.click();
   });
}
autoHeart();
setInterval(function(){
   document.getElementById('yt-comments-paginator').click();
   autoHeart();
}, 1500);

Bilmiyorum ne işinize yarar ama benim takipçilerimle etkileşime girmemi sağladı tekrardan. Çünkü takip edenlere bildirim gittiği için, mutlu olduk hep birlikte ????

.htaccess ile HTTPS’ten HTTP’ye Otomatik Yönlendirme

Uzman cevap’ın ssl’ini iptal edip normala döndürmek istedim ancak araştırmalarım ve bilgilerim doğrultusunda PHP ile bunu sağlıklı şekilde yapmak mümkün olmadı. Eğer ihtiyacınız olduğunda araştırdığınızda görmüşsünüzdür, eğer $_SERVER[‘HTTPS’] değeri on ise yönlendirme işlemi yaptırıyorlar. Ancak ne yazık ki ben bu değerin on olduğunu hiç görmedim ???? Bunun sebebide sanıyorum ssl’i cloudflare’dan kullandığımız için. Ama sonunda .htaccess ile yönlendirme yapmanın bir yolunu buldum. İşte size o güzel kodlar;

RewriteCond %{HTTP:X-Forwarded-Proto} =https
RewriteRule ^(.*)$ http://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Keyifli kodlamalar.

AMP Nedir? Nasıl Kullanılır?

Merhaba arkadaşlar, bugün sizlere Google’ın AMP projesinden bahsedeceğim.

AMP Nedir?

AMP, Accelerated Mobile Pages’in baş harflerinden oluşmuş, Hızlandırılmış Mobil Sayfalar anlamına gelen, daha hızlı mobil sayfaların oluşturulması için geliştirilmiş bir Google projesidir.

Bir AMP projesinde, inline javascript yazamaz, sadece inline css yazabilirsiniz. Javascript işlemleri için, AMP’nin mobil sayfalar için gerekli oluşturduğu komponentleri kullanabilirsiniz.

Bir AMP sayfasında neler olmalıdır?

Google, geçerli bir AMP sayfasında zorunlu olan etiketleri şu şekilde listeliyor;

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-custom>
    
  </style>
</head>
<body>

</body>
</html>

Bunlara yakından kısaca bir bakalım;

<html ⚡>

Bu kısımda ⚡ işareti ya da onun yerine amp de yazılabilir, AMP projesi olduğunu belirlememizi sağlıyor.

<link rel="canonical" href="self.html" />

Burada canonical linkine, AMP sayfasının orjinal linkini yazmalısınız. Yani Google’a, bu AMP sayfasının asıl sayfası şurasıdır diye belirtiyorsunuz.

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>

Bu kısmı boşluklarıyla beraber hiç değiştirmeden kullanın. Aksi taktirde hatalı bir kullanım olacaktır.

<script async src="https://cdn.ampproject.org/v0.js"></script>

AMP’nin ana javascript dosyasıdır, tabi ki zorunludur ????

<style amp-custom></style>

Burada ise, Inline yazacağınız CSS etiketini yazdık. amp-custom niteliği olmadan yine hata verecektir. Bu arada Inline CSS’inde belli bir Byte limiti var, onu aşarsanız yine hata alırsınız.

AMP’de Komponentler

Proje içinde kullanılmak üzere, bir çok komponent mevcut. Bunlardan en çok kullanılanı, img, video, iframe ve reklam komponentleri olabilir. Tüm komponentlere buradaki linkten ulaşabilirsiniz.

Şimdi örnek bir komponent inceleyelim, örneğin nasıl bir resin eklenir? Doğrudan img etiketi ile eklerseniz, geçersiz bir AMP sayfası olacaktır.

<amp-img src="resim.jpg"
  width="1080"
  height="610"
  layout="responsive"
  alt="AMP"></amp-img>

Gördüğünüz gibi bu şekilde kullandık. Bunu kullanırken javascript gereği duymadık, ama örneğin bir analytics kodu yerleştirmemiz gereksin. O zamanda analytics komponentini kullanacağız. Bu sefer önce ona ait javascript kodunu sayfamızda head etiketi içerisine ekliyoruz.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Daha sonra uygun bir yere analytics kodumuzu ekliyoruz.

<amp-analytics type="googleanalytics">
    <script type="application/json">
        {
            "vars": {
                "account": "UA-KODUNUZ"
            },
            "triggers": {
                "trackPageview": {
                    "on": "visible",
                    "request": "pageview"
                }
            }
        }
    </script>
</amp-analytics>

Bu şekilde, aklınıza gelebilecek bir çok şeyi komponentler bölümünde bulabilirsiniz.

AMP sayfalarını Debug etmek

AMP sayfasında hataları konsol’dan görebilmek için, sayfa linkinin sonuna #development=1 yazıp sayfayı yenilerseniz, hata varsa hataları yoksa geçerli bir sayfa olduğunun uyarısını görebilirsiniz konsolunuzda.

http://localhost/konu/amp#development=1

AMP Sayfaları – Normal Sayfalar

Bir AMP sayfasının normal versiyonunu belirlemek için, şu şekilde etiket kullanacaksınız;

<link rel="canonical" href="self.html" />

Normal bir sayfanın AMP sayfasını belirlemek için ise şöyle bir kullanım olacak;

<link rel="amphtml" href="self-amp.html" />

Ve böylece Google amca projenizde AMP sayfalarını takip edip indexleyebilecek.

Örnek bir AMP sayfası

Video’da hazırladığım örnek AMP sayfasını aşağıdaki linkten indirebilirsiniz;
https://drive.google.com/open?id=0BxX-AwfGLF5vZ0Q1MFRRdFFNUWs

WordPress için AMP

WordPress’de mevcut içerikleriniz için AMP sayfasını hazırlamak isterseniz, eklenti kullanmanız yeterli.
Ben şu eklentiyi kullanıyorum: https://wordpress.org/plugins/amp/
Tek yapmanız gereken eklentiyi kurup etkinleştirmek. Gerisini google amcaya bırakın ????