Web Developer
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 🙂
Son 2 makalede başlıkları biraz SEO amaçlı yazdım gibi oldu ama yazacak daha mantıklı bir şeyler bulamadım. Biliyorsunuz #frontend serisine başladık ve 2. haftamızda benime çok severek takip ettiğim egghead.io’nun ana sayfasını sıfırdan html ve css yazarak kodladık.
Bu serinin amacı yeni başlayanlara bir şeyler öğretmek, bilenlerin bilgilerini pekiştirmek ve flex’i sevdirmek. Belki ilerisi için grid ile bir şeyler yapmaya başlayabiliriz.
Derste yazılan kodların kaynak dosyasını da paylaşıyorum, takıldığınız yerde açıp bakarsınız. Beleşe getirmeyin, az yapmaya uğraşın 🙂
Demoyu incelemek isterseniz;
Merhaba dostlar, CSS Flex makalesi hazırladığım konumda flex örneği verirken bir sohbet arayüzü hazırlamıştım. Daha sonra bunu bir seri haline getirmeye karar verdim ve henüz kaç haftadan oluşacağına karar vermediğim bir seriye başladım. İlk haftada ise bu sohbet arayüzünü sıfırdan başlayanlar için birlikte html ve css kodlarını yazdık. Güzel bir seri başlangıcı oldu, yeniye hitap ettiği için SASS kullanmıyorum ve çok zorlanıyorum ancak yine de eğlenceli oldu. Bakalım siz aynı keyfi alacak mısınız 🙂 İyi seyirler dilerim.
Ayrıca derste hazırlanan içeriğin kaynak kodlarını da sizlerle paylaşmak istiyorum, takıldığınız yerlerde açıp bakabilirsiniz hatalarınıza.
Bu yazımda sizlere CSS Flex modülü ile ilgili tüm kullanımları, ipuçlarını göstermek istiyorum. Bu yazının sonunda CSS Flex nedir, nasıl kullanılır, nerelerde kullanılır gibi sorularınıza yanıt bulabileceksiniz. Hazırsanız başlayalım 🙂
Boyutları bilinmeyen-dinamik alanları daha kolay yönetmek için W3C bize al abicim sana flex, istediğin gibi alanını yönet demiş. Hatırlarsınız, eskiden öğeleri sağa-sola dayamak için float kullanır, dikey ortalamak için css’e takla attırırdık. Ancak flex yapısı ile, artık kapsayıcıya ve içindeki öğelerine esneklik getirebiliyoruz.
Flex’i kullanmamızın en büyük sebebi, esnek yapıları kolayca yönetmek için. Çünkü yapıya esneklik verdiği için, yatay ve dikey hizalarda nasıl görüneceğini, öğelerin kendi içinde hizalanmalarını ve sırasını belirlemek gibi güzel özellikleri bulunuyor. Ayrıca tüm çözünürlüklerde ve cihazlarda daha hızlı ve esnek bir yapı kullanmak için, flex bizim tamda ihtiyacımız olan şey.
Flex genel anlamıyla bir CSS özelliğinin adı değil, yapının adıdır. Dolayısı ile flex yapısı altında hem kapsayıcı (container) için hemde içindeki öğeler (items) için birden fazla flex özelliği bulunmaktadır. Bu makalede hepsini incelemeye ve anlamaya çalışacağız.
Okumaya devam et “CSS Flex ile İlgili Her şey”Javascript’i kullanmadan, css ile native bir şekilde popup yapımını bu videoda sizlere anlatmaya çalıştım.
Olayımız, checkbox’ı kullanmak ve css’de checked olduğunu anlayıp ona göre işlem yapmak. En basit örneğini şöyle göstermek istiyorum;
<div class="popup-container">
<label for="popup">POPUP AÇ</label>
<input type="checkbox" id="popup">
<div class="popup">
<div class="inner">
popup içeriği
</div>
</div>
</div>
Burada label’a tıklandığında checkbox checked olacak. Dolayısı ile css’de şöyle bir kod yazdığımızda;
.popup-container input {
position: absolute;
left: -9999px;
}
.popup-container .popup {
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, .5);
width: 100%;
height: 100%;
z-index: 90;
}
.popup-container .popup .inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 300px;
background: #fff;
box-sizing: border-box;
padding: 20px;
}
.popup-container input:checked + .popup {
opacity: 1;
visibility: visible;
}
Burada olayımız input:checked + .popup kısmında. Bu sayede checked olduğunda ondan sonra gelen popup divini açabiliyoruz. Ayrıca kapatma işlemleri vs. de yine label üzerinden yapılabiliniyor. Daha detaylı anlatım ve aşağıdaki örneğin yapımı için videoya gözatmayı unutmayın ^^
See the Pen Popup with Pure CSS by Tayfun Erbilen (@tayfunerbilen) on CodePen.7393
İyi kodlamalar 🙂
Genelde javascript kullanarak yaptığımız bu örneği tamamen CSS ile nasıl yapabileceğimizi videolu olarak anlattım.
Kısaca olaydan bahsedecek olursak, burada kullandığımız tipi checkbox olan input’lardır. Ve css’de input’un checked olduğunu anlayabildiğimiz için checked olduğu zaman input’tan sonra gelen divi açıp kapatabiliyoruz.
Dersin detayları videoda yer alıyor, ben direk demoyu koyayım buraya ^^
See the Pen Accordion Content with Pure CSS by Tayfun Erbilen (@tayfunerbilen) on CodePen.7393
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;
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.
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 🙂
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"]