Google PageSpeed Insights puanlarını yükseltmek

Merhaba arkadaşlar,

Google’ın PageSpeed aracında artık yeşil puanları görmek biraz zorlaştı, bunun sebebi yapacağımız işlemlerin çeşitli alanlarda olması.

|Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın

(bkz: google oluşturmayı önleyen JavaScript…)
Burada google Okumaya devam et Google PageSpeed Insights puanlarını yükseltmek

Readmore.Js – Devamını oku eklentisi

Merhaba arkadaşlar, geçen bir işte kullandığımız güzel bir eklenti.

See the Pen Readmore.js by Aycan BÜLBÜL (@AycanB) on CodePen.

Kullanımı gayet basit uzayan yazıları kesmek için kullanılan küçük ama kullanışlı bir eklentidir.

Standart çalıştırma kodunu aşağıdaki gibi tanımlamamız mümkün;

$('.article').readmore({
  speed: 75, //Açılma Hızı
  collapsedHeight: 100, // 100px sonra yazının kesileceğini belirtir.
  moreLink: '<a href="#">devamı..</a>', // açma linki yazısı
  lessLink: '<a href="#">kapat</a>', // kapatma linki yazısı
});

$('.article').readmore({

speed: 75, //Açılma Hızı

collapsedHeight: 100, // 100px sonra yazının kesileceğini belirtir.

moreLink: '<a href="#">devamı..</a>', // açma linki yazısı

lessLink: '<a href="#">kapat</a>', // kapatma linki yazısı

});

Readmore.js : http://jedfoster.com/Readmore.js/

Ben ben ben ben ben

Merhaba arkadaşlar,

Bloğuma enson kişisel birşeyi düğünümden sonra yazmışım (gerçi artık pek kod vs’de paylaşamıyorum) bunun sebebi tahmini işler / güçler (arayüz). Şirket okul vs yorucu geçiyor. Bir şekilde bloğuma girdim ve dolaşmaya başladım, “yeni bir gün” kategorisinde konudan konuya atladım biraz duygulandım.

Mutlu olun yaşadığınız her anın keyfini çıkartın…

İnsanoğlunun hiç bir anı bir anı ile uymuyor, şuan o güzel free günlerimi özlüyorum (Free derken evlilikten felan sıkılmadım, tüzel kişilik .p )

İşin aslı özledim, artık iş düşünmekten, çalışmayı düşünmekten ne bileyim hayat evlenince farklı bir boyut aldı. Eğleniyor musun Aycan ? derseniz evet eğleniyorum yani mesela dün akşam yemeğini evde yemek yerine balık yemeye dışarı gittik .p

Okumaya devam et Ben ben ben ben ben

Resimleri oran orantısını bozmadan bir alan içinde ortalamak / jQuery img load

Merhaba arkadaşlar,

Birkaç yıl olmuştur bu kodu yazalı ama arada gidip alıp kullanıyorum, sizinle de paylaşmak istedim umarım işinize yarar. Buraya tıklayarak aşağıdaki kodun ne işe yaradığını anlayabilirsiniz // Sayfada büyük resim olduğu için yüklenmesi uzun sürebilir.

$('img').load(function() 
{
    var parentH = $( this ).parent().outerHeight();
    var parentW = $( this ).parent().outerWidth();
    var iH      = $( this ).outerHeight();
    var iW      = $( this ).outerWidth();

    var  rate, newRate = 0;
    rate  = parentW / iW;
    newRate = rate * iH;

    if(parentH > newRate)
        rate = parentH / iH;

    $( this ).css({
        width       : rate*iW,
        height      : rate*iH,
        position    : 'absolute',
        top         : -( ( ( rate*iH ) - parentH ) / 2 ),
        left        : -( ( ( rate*iW ) - parentW ) / 2 )
    });
}).each(function() {
  if(this.complete) $(this).load();
});

$('img').load(function()

{

var parentH = $( this ).parent().outerHeight();

var parentW = $( this ).parent().outerWidth();

var iH = $( this ).outerHeight();

var iW = $( this ).outerWidth();

var rate, newRate = 0;

rate = parentW / iW;

newRate = rate * iH;

if(parentH > newRate)

rate = parentH / iH;

$( this ).css({

width : rate*iW,

height : rate*iH,

position : 'absolute',

top : -( ( ( rate*iH ) - parentH ) / 2 ),

left : -( ( ( rate*iW ) - parentW ) / 2 )

});

}).each(function() {

if(this.complete) $(this).load();

});

Burada asıl önemli olan kısım resmin yüklenip yüklenmediğini kontrol etmek (jquery img load). Burada kullandığım resim yüklenme kodunu stackoverflow‘dan buldum ( Nick Craver )

$('img').load(function() 
{

// Yuklenince yapilacak islemler

}).each(function() {
  if(this.complete) $(this).load();
});

$('img').load(function()

{

// Yuklenince yapilacak islemler

}).each(function() {

if(this.complete) $(this).load();

});

Resimlerin kesin yüklendiğini anladıktan sonra, resmin orjinal boyutlarını alıyorum, ondan sonra resmi kapsayan element’in boyutlarını alıp oran / orantı yapıp resme yeni boyutunu ve pozisyonunu veriyorum. Burada img’i kapsayan elementin width, height ve overflow:hiden değerinin olması gerekir.

Jade Nedir, Nasıl Kullanılır?

Jade Nedir?

Jade kolay html yazımını sağlayan ve tag sonlarını kapatmayı unutma ya da hata yapma payını en aza indirgeyen bir node.js eklentisidir. Aynı zamanda html yazım hızınızı da arttırmakta. Tek yapmanız gereken Tab yapısına göre yazıma dikkat etmeniz. Gerisini jade sizin için yapacaktır. Bir örnek üzerinde inceleyecek olursak;

Jade Nasıl Kurulur?

Jade’ yi kurup kullanmanız için 2-3 yöntem mevcuttur. Okumaya devam et Jade Nedir, Nasıl Kullanılır?