Ç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
}
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.
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.
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;
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.
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.
Bir furya vardı #10yearschallange diye, geçenlerde bir takipçimin eski dosyalarımı benimle paylaşmasından sonra baktım ki tarihler 2009’u gösteriyor, o zaman dedim bir #10yearschallange yapmalıyım diye kendi kendime ???? Neyse efenim, lafı çok uzatmadan.
Uzun zaman sonra müzik için ilham geldi ???? Yazılım bilimi ve kablosuzkediyi içine alan 3 dörtlük yazdım ve söylemeye çalıştım, seviyorum ve eğleniyorum böyle şeyleri yaparken ????
Şimdi geldiğim noktadan seslenirken yarınlara, her iki lafı(n|m)dan biri olmuş lan sanki para. Başlarda eğlenirdim, konuşarak delirirdim, İzlemezdi kimse ama ben kendimi iyi bilirdim..
..demek zordu ama bu sektörde çoktu. İki kod yazınca kendine ünvanı koydu, başladı çalışmaya, ah bizimle yarışmaya, kendi bile bilmezdi ama bu iş çok zordu..
Sormaktan çekinmeyen, bildiklerini söyleyen, birinin derdi olduğunda, bi şekil destekleyen, kablosuzsa kedinin, yazılımsa bilimin, söyleyin lan artık bana, yoksa ayarı dilimin..
Bir projede kurulum yaparken tüm tabloları temizlemem gerekiyor. Tek tek elle yapsam olmaz, tablo adlarını bir diziye aktarıp truncate etsem saçma olur. Bunun için information_schema’ı kullanarak tabloları çektim ve döngüye sokarak temizleme işlemi yaptım. Yani sql sorgum şöyle;
SELECT CONCAT("TRUNCATE TABLE ", table_schema, ".", TABLE_NAME, ";") FROM INFORMATION_SCHEMA.TABLES WHERE table_schema IN("db_adi", "db_adi2")
Burada concat ile değerleri birleştirince tüm tablolarıma ait otomatik truncate kodu çıkmış oldu. Şimdi bunu php ile birleştirdiğimizde;
<?php // pdo db bağlantı işlemleri ..
$query = $db->query('SELECT CONCAT("TRUNCATE TABLE ", table_schema, ".", TABLE_NAME, ";") FROM INFORMATION_SCHEMA.TABLES WHERE table_schema IN("mvc")')->fetchAll(PDO::FETCH_ASSOC);
foreach ($query as $row){ echo $db->query(current($row))->fetch(); }
Not: Eğer SQLSTATE[42000]: Syntax error or access violation hatası alıyorsanız, foreach’den önce yani sorguları çalıştırmadan önce FOREIGN_KEY_CHECKS değerini 0’a eşitleyip deneyin. Yani;
<?php // pdo db bağlantı işlemleri ..
$query = $db->query('SELECT CONCAT("TRUNCATE TABLE ", table_schema, ".", TABLE_NAME, ";") FROM INFORMATION_SCHEMA.TABLES WHERE table_schema IN("mvc")')->fetchAll(PDO::FETCH_ASSOC); $db->query('SET FOREIGN_KEY_CHECKS=0')->fetch(); foreach ($query as $row){ echo $db->query(current($row))->fetch(); }
İşte bu kadar ???? Benim hazırladığım BasicDB sınıfında ise son versiyonunu indirdikten sonra şu şekilde kullanmak yeterli;
<?php // basicdb bağlantı işlemleri .. $db->truncateAll();
Bu metod içerisinde AUTO_INCREMENT değerleride 1’den başlayacak şekilde ayarlanıyor. Dilerseniz kendi şu sql sorgusu ile tablolarınızın başlangıç değerlerini de ayarlayabilirsiniz.
ALTER TABLE `db_adi`.`tablo_adi` AUTO_INCREMENT = 1; # 1 ya da kaçtan başlayacaksa o
Dün uzun uzun bir videolu anlatım yapmayı planlamıştım bu konuda, ancak şimdi düşünüyorum da çokta önemli değil uzun uzun anlatmak. 1 sene 3 ay önce udemy’de ücretli olarak yayınladığım kursumu, raf ömrünün dolduğunu düşündüğüm ve daha iyisilerine yer açması adına ücretsiz olarak yayınlamaya karar verdim.
2017 yılı benim hayatımın en kötü yılı olmuştu, gerek maddi gerek manevi. Bu dönemde çıkardığım bir kurstu, ilk ücretli kursumdu. Paralı eğitime karşı değilim, hakkıyla yapıldığı sürece. Fakat ilk kursumun acemiliğindendir belki, yeterince hakkını verdiğimi düşünmüyorum. Bundan dolayı, temel eğitimleri ücretsiz olarak paylaşmakta bir problem görmedim.
Eğer kursu daha önceden parayla satın alıpta bu duruma itirazını olan arkadaşlarım varsa ( ki olmayacağını umarım ) paralarını iade edemem ???? Fakat bir sonraki çıkaracağım kurs için ücretsiz kuponları bende hazır, merak etmesinler.
Doğru olduğunu düşündüğüm bir şeyi yapmaya karar verdim, kahretsin ki fazla tez canlıyım ???? O yüzden düşündüğümü hemen yapma gibi kötü bir huyum var. Neyse, umarım bu temel dersler birilerinin gelişimine fayda sağlar. Kursu alan arkadaşlarım, sizlere sesleniyorum. Sayenizde şu an bu kurs videolarına ücretsiz erişebilecek bir sürü insan, bolca dua alacağız ????
Herkese merhaba, bu yazımda sizlere CSS’de native olarak değişkenlerin kullanımını anlatmak istiyorum. Değişkenlere başlamadan önce sizlere bir sözde sınıftan bahsetmek istiyorum.
:root
:root sözde sınıfı, en üst düzey ebeveyn öğesini temsil eder. Yani bir html sayfada bu html etiketi anlamına geliyor. Fakat css’in kullanım alanlarının artmasıyla örneğin svg ve xml’de kullanılırken, :root sözde sınıfı başka bir öğeyi temsil ediyor olabilir.
Örnek bir değişken tanımlaması
Genelde değişkenleri tanımlarken başına iki tane tire işareti koyulması gerektiği söyleniyor. Ancak ben tiresizde denediğimde çalışıyordu, yine de ayırt edici olması adına başına iki tire koyarak :root içerisinde global bir değişen tanımlayalım.
:root { --color: green; }
Değişkenlerin kullanımı
Değişkenleri kullanırken var() fonksiyonunu kullanacağız. Örneğin yukarıdaki değişkeni bir etiketin rengi olarak belirlemek istersek;
h3 { color: var(--color); }
Local olarak değişken tanımlamak
:root içerisinde biz global olarak değişkenimizi tanımladık. Yani orada tanımlanan değişken sayfanın tamamında kullanılabilirdi. Ancak local olarak belli bir scope’u kapsayacak şekilde oluşturmak istersek, html etiketini seçip değişkeni oluşturuyoruz.
.box { --color: blue; }
Artık .box divinin içinde kullanılan değişken değer olarak maviyi alacak. Çünkü local tanımı bu şekilde yapmış olduk.
jQuery ile Değişkenlerin Değerini Değiştirmek
Genelde jQuery kullandığımız için bundan da bir örnek vermek istiyorum. Örneğin yukarıda oluşturduğumuz renk değişkenini jquery ile dinamik olarak ayarlamak istersek;
