PHP ve Socket.io Kullanımı

PHP projelerinizde, bazı bölümleri gerçek zamanlı gösterme ihtiyacınız olabilir. Bu gibi durumlarda, PHP’yi socket.io ile birlikte kullanarak, bu ihtiyacınızı giderebilirsiniz.

Bu konu altında anlatacaklarım;

  1. Centos sunucuya nodejs kurmak.
  2. Socket.io kurmak.
  3. Socket.io ayarları.
  4. Client tarafında socket’i dinlemek.
  5. PHP’den socket’e data göndermek.
Okumaya devam et “PHP ve Socket.io Kullanımı”

Kod performans testi [Javascript]

Gerçekten hızlı çalışması gereken bir kod bloğunuz varsa, performance.now() ile çalışma hızını analiz edebilirsiniz. Date.now() ile oluşturulan timestamp’in aksine performance.now() yüksek kararlılıkta timestamp üretir.

var baslangic = performance.now();

for (let i = 0; i < 10 ** 4; i++){
    console.log("😂")
}

var bitis = performance.now();

console.log(`Kod performans testi: ${bitis - baslangic} milisaniye`);

Bu arada eğer ** kısmı size yabancı geldiyse, exponentiation operatörü (üssü operatörü)dür. Yani 10 ** 4 ifadesi 104 = 10 × 10 × 10 × 10 demektir. Kısaca 10000 de yazabilirdik tabi, bilgi içinde bilgi eklemiş olduk ama bu sayede 😀

Bu arada konsol’a bastığımız kısımda tek tırnak yerine backtick (`) karakterini kullandım. Buda template literals (şablon değişmezi) olarak geçiyor. Yani kısaca çok satırlı ifadeleri ve ifade değerlerini kullanmamıza olanak sağlıyor.

If-else kullanmadan koşullu kayıt [Javascript]

Koşullara göre log bastığımız yerlerde, console.log() yerine alternatif olarak console.assert() kullanabiliriz. Örneğin console.log() bastığımız yere bir bakalım;

let user = {
    id: null,
    name: "Tayfun"
};

if (user.id){
    // işlemler
} else {
    console.log("user.id eksik");
}

Loglama işlemini console.assert() ile yapsaydık, işimiz çok daha kolay olacaktı.

let user = {
    id: null,
    name: "Tayfun"
};

console.assert(user.id, "user.id eksik");

// işlemler

Eğer koşul true dönerse, assert hiçbir şey yapmaz, false dönerse hatayı yazdırır. Geliştirme yaparken işinizi kolaylaştırabilir ve daha okunaklı kod yazmanızı sağlayabilir 🙂

Hatalı değerleri filtreleme [Javascript]

Bir gün eğer 0, undefined, null, false, "" gibi değerleri kolayca filtrelemek isterseniz, bu kullanımı unutmayın;

let myArray = [1, 2, undefined, 3, false, "", "erbilen"];

let filteredArray = myArray.filter(Boolean);
console.log(filteredArray); // [1, 2, 3, "erbilen"]

If ifadesinde birden fazla koşul [Javascript]

Çok sayıda koşulu kontrol etmek zorunda kaldığınız durumlarda, varsayılan yöntem yerine farklı bir bakış açısı denemek isterseniz, alternatiflere bir gözatalım 🙂

Normalde status değişkenini kontrol ettiğimizi varsayalım. Örneğin;

let status = 'online';

if (status === 'online' || status === 'busy' || status === 'away'){
    // işlemler
}

Bunu daha iyi bir yaklaşım ile şöyle yazabiliriz;

if (['online', 'busy', 'away'].indexOf(status) !== -1){
    // işlemler
}

indexOf’ı sıklıkla bitwise not operatörü (~) ile birlikte görebilirsiniz. Oda şöyledir;

if (~['online', 'busy', 'away'].indexOf(status)){
    // işlemler
}

Eğer console’a ~-1 diye çalıştırırsanız 0 yani false değeri döndüğünü görürsünüz. indexOf ile kontrol ettiğimizde eğer içinde bulunmuyorsa aradığımız değer garip bir şekilde -1 döndürüyordu. Buda teknik olarak bu operatör ile true-false’a göre kontrol etmemizi sağlıyor 🙂

Güzel haber şu ki artık buna da gerek yok. Çünkü 2016’da ES7 piyasaya sürüldü ve includes ile tanıştık. Artık şu şekilde kolayca mantıksal kontrol yapabiliyoruz.

if (['online', 'busy', 'away'].includes(status)){
    // işlemler
}

CSS ve SVG ile Görselleri İstediğiniz Gibi Renklendirin

Genelde alışveriş sitelerinde bir şapka beğenirsiniz bunun kırmızısı mavisi vs. nasıl olur diye diğer renklerine bakarsınız. Müşteri olarak pek ilgilenmeyiz ancak bunu kod tarafında yapmak istersek, her renk için ayrı resim mi eklememiz gerekir? Ya da her renk için o üründen bulunması mı? Peki ya müşteri kendi rengini seçip o rengin o üründe nasıl göründüğünü görmek isterse? İşte bu noktada CSS’te mix-blend-mode özelliği devreye giriyor 🙂

Yapmanız gereken, renklendirmek istediğiniz ürünün beyaz bir versiyonuna sahip olmak. Örneğin bu koltuğu ele alalım.

Illustrator ya da https://editor.method.ac/ bu adrese girerek pen tool ile koltuğun beyaz bölümlerini seçelim. Ve herhangi bir renkte bu şeklin SVG formatında kodlarına sahip olalım.

Ve artık yapmamız gereken, orijinal resim ile bu svg’yi üst üste getirmek. Önce HTML’i oluşturalım.

<div class="image">
    <svg id="svg" width="1000" height="393.99999999999994" xmlns="http://www.w3.org/2000/svg">
        <path id="svg-path" d="m8.13981,128.1789c0,-0.5618 -6.17985,-51.12424 -6.4544,-51.21163c0.27455,0.08739 10.94884,-8.33969 10.6743,-8.42707c0.27454,0.08738 83.42167,-15.08135 83.14712,-15.16874c0.27455,0.08739 6.4544,-3.84524 6.17986,-3.93263c0.27454,0.08739 -8.15253,-33.0591 -8.42708,-33.14649c0.27455,0.08739 4.76899,-6.65427 4.49444,-6.74166c0.27455,0.08739 12.07245,-3.28344 11.7979,-3.37083c0.27455,0.08739 68.81474,6.26725 68.5402,6.17986c0.27454,0.08739 162.07435,-1.59803 161.79981,-1.68542c0.27454,0.08739 110.9501,-1.03622 110.67556,-1.12361c0.27454,0.08739 32.29742,-1.59802 32.02288,-1.68541c0.27454,0.08739 8.70162,-2.15983 8.42707,-2.24722c0.27455,0.08739 12.07245,7.95265 11.79791,7.86527c0.27454,0.08738 10.94883,-9.4633 10.67429,-9.55069c0.27454,0.08739 22.74674,0.6492 22.47219,0.56181c0.27455,0.08739 25.55577,3.45822 25.28123,3.37083c0.27454,0.08739 208.14234,-3.28344 207.8678,-3.37083c0.27454,0.08739 131.73689,-1.03622 132.29869,-1.03622c0.56181,0 11.7979,3.37083 11.2361,3.37083c-0.56181,0 0.5618,11.7979 0.28727,11.71051c0.27453,0.08739 -1.41088,23.12139 -1.97268,23.12139c-0.56181,0 -2.80903,10.11249 -3.08357,10.0251c0.27454,0.08739 2.52176,5.14363 2.24722,5.05624c0.27454,0.08739 57.57864,12.4471 57.3041,12.35971c0.27454,0.08739 30.0502,10.76168 29.77566,10.67429c0.27454,0.08739 3.08356,11.32349 3.08356,11.32349c0,0 -26.40483,166.85605 -26.67937,166.76866c0.27454,0.08739 -10.39975,27.61583 -10.39975,27.61583c0,0 -17.41595,0 -17.41595,0c0,0 -226.96918,-1.12361 -227.24372,-1.211c0.27454,0.08739 -287.36956,-1.59802 -287.6441,-1.68541c0.27454,0.08739 -289.05497,-1.59803 -289.61678,-1.59803c-0.5618,0 -85.95615,-1.12361 -86.51795,-1.12361c-0.56181,0 -8.98888,-1.68541 -9.55068,-1.68541c-0.56181,0 -6.17986,1.68541 -6.74166,1.12361c-0.56181,-0.56181 -12.35971,-52.80966 -12.63426,-52.89705c0.27455,0.08739 -17.70321,-97.66666 -17.70321,-98.22847z" stroke-width="1.5" fill="#fff"/>
    </svg>
    <img src="koltuk.png" alt="">
</div>

Şimdi de CSS yazalım.

.image {
    margin: 50px auto;
    width: 1000px;
    position: relative
}
.image #svg {
    position: absolute;
    top: 0;
    left: 0;
}
.image #svg path {
    mix-blend-mode: multiply; /* işin sırrı burada */
    fill: #fa6585; /* burası istediğimiz renk olabilir */
}

mix-blend-mode ile iki html etiketinin renklerini birbirine karıştırdık ve ortaya şöyle harika bir görüntü çıktı;

Artık renk kodunu değiştirerek istediğiniz her rengi belirleyebilirsiniz, üstelik çizgileri kırışıklıkları gölgeleri vb. hiçbir şey orjinalliğini yitirmeden bunu yapabilirsiniz.

Daha fazla detayı videomu izleyerek öğrenebilirsiniz, iyi kodlamalar 🙂

CSS prefers-color-scheme Sorgusu

CSS’de prefers-color-scheme sorgusu ile web sayfanıza giren kişinin açık renk m yoksa koyu renk mi görmek istediğini anlayabilir ve buna göre renge duyarlı bir web sayfası geliştirebilirsiniz. İşletim sisteminde koyu modu kullanan birisi girdiğinde siteniz koyu, açık modu kullanan birisi girdiğinde ise siteniz açık renkte gözükebilir.

Kullanımı ise şöyle;

// karanlık modu seçenler için
@media(preferes-color-scheme: dark){

}

// açık modu seçenler için
@media(prefers-color-scheme: light){

}

Bunu kullanarak basit bir arkaplan değiştirme örneği yapacak olursak;

<div class="test">
   test yazı
</div>
<style>
:root {
   --test-bg: #eee;
}
@media(prefers-color-scheme: dark){
   :root {
      --test-bg: #333;
   }
}
.test {
   background-color: var(--test-bg);
   padding: 15px;
}
</style>

Daha detaylı bir anlatım için videoya bakabilirsiniz 🙂 Kolay gelsin.

PHP ile Facebook Messenger Botu Nasıl Yapılır?

Videoda hemen hemen her şeyini anlatmaya çalıştım, makale olarakta biraz bahsetmek istiyorum. İhtiyacınız olan bir adet facebook sayfası sahibi olmanız bu kadar 🙂

1. Adım – Uygulama Oluşturmak

https://developers.facebook.com/ adresine giriş yapın. Sağ üstten My Apps‘e tıklayıp Create App diyerek yeni bir uygulama oluşturun.

Çıkan popup’da ilgili alanları doldurup uygulamanızı oluşturun.

2. Adım – Messenger ürününü ekleyin

Uygulama detayına girdiğinizde Ürünler kısmı açılacak . Buradan Messenger‘ı bulup Set Up diyerek kurulumu yapalım.

Okumaya devam et “PHP ile Facebook Messenger Botu Nasıl Yapılır?”

Geliştiricilere Özel Reklam Platformu (Codefund)

Sizi geliştiricilere özel reklam platformu olan Codefund ile tanıştırmak istiyorum. Hali hazırda bir çok proje bu platform sayesinde destekleniyor.

Birkaç ay önce adsense’i bırakıp kişisel web sitem ve prototürk’de bu platforma geçtim. Açıkçası adsense’den daha iyi bir getirisi var, bu sayede projelerimin sunucu maliyetlerini sıfıra indirdim, kendi kendini idare eder hale geldi her birisi.

Hem amaca yönelik reklamlar çıkıyor, hemde şeffaflık sunuyor bu konuda. Eric ile konuştuğumda Türkiye dahil bir çok pazara gireceklerini söyledi ancak kesin bir netlik olmadığını, bu konunun henüz düşünce aşamasında olduğunu bildirdi.

Normalde sanıyorum Türkçe içerikli platformları kabul etmiyorlar ama neyseki kodun dili olmaz 🙂 20$ eşiğini geçtiğinizde size ödeme yapıyorlar, ben ödemeleri paypal ile alıyorum, sizde bir yolunu bulursunuz eminim 🙂 Örnek olması adına son 3 aylık ödemeyi paylaşıyorum;

Öyle çok hitiniz olmasına gerek yok bu tarz rakamlar kazanmak için günlük 1000-1500 arası bir hitiniz olması yeterli. Umarım projelerinize katkı sağlamanızda yardımcı olur. Referansımla kayıt olursanız, banada katkı sağlarsınız.

Kayıt olmak için tıklayın