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 alies tanımlayıp kısa olarak kullanabilirsiniz. Terminalde bir alies 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 ./

Kolaylıklar dilerim 🙂

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 🙂

Mac’de Hızlı PHP Server Kullanımı

Mac’de herhangi bir klasörde hızlıca php server kurup php kullanmak isterseniz, terminal üzerinden kolayca bunu nasıl yapacağınızı göstereceğim.

Terminali açıp önce nerede olduğumuza bir bakalım. Daha sonra bir klasör oluşturalım test için.

mkdir prototurk

klasörü oluşturduktan sonra içine girelim ve php server’ı başlatalım.

cd prototurk
php -S 127.0.0.1:8080

Artık http://127.0.0.1:8080 adresinden klasöre ne atarsanız onu çalıştırıp hızlıca test edebilirsiniz.

Örneğin hızlıca bir dosya oluşturalım yine terminal üzerinden.

touch index.php

Daha sonra eğer sizde nano varsa nano ile terminal üzerinden yine hızlıca düzenleyebiliriz;

nano index.php

İçeriği yazıp kaydediyoruz ve control + x ve son olarak Y diyerek kaydediyoruz.

Cloudflare ile Ücretsiz SSL Kullanımı

Bende erbilen.net üzerinde şuan cloudflare’ın ücretsiz SSL hizmetini kullanıyorum. SSL nedir bilmeyenler ayrıca araştırabilirler, bu makalem’de sizlere sitenizi cloudflare’e bağlayarak nasıl SSL sahibi olabileceğinizi göstereceğim.

lk olarak cloudflare.com’a kayıt olup domain ismimizi yazarak scan ediyoruz ve ekleme işlemini tamamlıyoruz. Ekleme işlemini tamamlarken size NS’lerinizi değiştirmek için 2 tane cloudflare NS’i veriyor. Bunları domain’i aldığınız firmaya girerek NS değiştirmeden değiştirin.

NS’leri değiştirdikten sonra, Cloudflare’de  DNS ayarlarını yapmanız gerekiyor. DNS ayarlarında 2 record eklemeniz yeterli, bunlar;

1- A – domainadi.com – IP Adresi
2- A – www – IP Adresi

Yani kısaca ayarlarınız şu şekilde olacak;

Not: Görseldeki CNAME ve MX kayıtları yandex maili kullanmak içindi, onları eklemek zorunda değilsiniz.

Buraya kadar herşeyi yaptıysanız artık NS’lerin yönlenip yönlenmediğine bir bakalım. Bunun için;

http://intodns.com/siteadi.com adresinden bakabilirsiniz. NS’ler cloudflare NS’leri olarak gözüküyor ise, Cloudflare panelindeki Overview kısmından NS kayıtlarını onaylıyorsunuz ve onaylandığında orası artık yeşil kalıyor.

SSL’in aktifleştirilmesi

Cloudflare panelinde Crypto kısmına geliyoruz. Burada SSL alanında select box’dan önce Off sonra Full seçeneğini işaretleyelim. Sol tarafında işlemin süreci yazacak zaten. Ortalama 1-2 saat içerisinde SSL kullanılmak üzere aktifleşiyor. Status Active Certificate yazısını gördüğünüzde artık kullanabilirsiniz demek oluyor.

Buraya kadar tamamsa, aşağıda kaydırıp görseldeki alanı bulup aktif ettiğinizde otomatik olarak artık siteniz https:// adresine yönlenmeye başlayacaktır.

Artık ücretsiz SSL’in keyfini çıkarabilirsiniz 🙂

Xampp’da “localhost” adresini değiştirmek

Bazı yabancı videolarda görüyorsunuz, http://localhost yerine http://work gibi adresler koyuyorlar. Peki bunu nasıl yapıyorlar? Aslında çok basit bir şekilde yapılıyor 🙂

C:\Windows\System32\Drivers\etc adresine girin, hosts dosyasını yönetici olarak düzenlemek için açın. Daha sonra aşağıdaki kısmı bulun.

#	127.0.0.1       localhost

Buradaki localhost kısmını istediğiniz şekilde değiştirin ve başındaki # işaretini kaldırın. Örneğin;

127.0.0.1       erbilen

Artık ben http://erbilen adresinden localhost klasörümün içindekileri görebilirim.

WordPress Html Admin Teması

WordPress kullananlar ve sevenler bilirler ki panel teması çok hoş.
Bazen insan kendi projelerinde de bu tarz bir tema kullanmak istiyor 😀
Mesela bugün benim istediğim gibi.
Hiç üşenmedim kısmi benzerlikte html sayfalarını oluşturdum.
İhtiyaç oldukça github’da güncellemelerini yapacağım.
Şimdilik alıp projelerinizde kullanabilir ve sizde geliştirip katkı sağlayabilirsiniz.

Github: https://github.com/tayfunerbilen/wp-admin-html-template

Demo;
Index
Posts
New Post
Settings
Login
Lost Password