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;

 

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

happy

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…

happy

İ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

İşin şakası bir yana evlenince herşey çok farklı ve inanın çok güzel oluyor (eşinize aşıksanız). Ama evliliğin bir kötü yanı var aslında kötü demeyeyim de şöyle söyleyeyim “Ruhun hadi bunu yap, şunu yap riske gir bunu aç bunu kapat vs vs” diyor ama artık evlisin  “hiç sorumluluk sevmeyen” benim artık ciddi sorumluluklarım var. Bu sorumluluklar insanı önce bunaltıyor ama sonradan pişiriyor ve sorumluluklarını yerine getirdikçe mutlu oluyorsun.

 

Eeeee başka derseniz, bloğum da gezerken (Bu arada bloğum 2008’den bu yana açık) zaman zaman çok karmaşık duygulara bürünmüşüm. Bazen atarlı, bazen duygusal, bazen araştırmacı, bazen sadece iş… Bunları şuan peşpeşe okuyunca insan diyorki neler neler yaşadık neler neler atlattık.

Ve şuan şunu kendime söyleye biliyorum “şuan ki yaşadığım sorunların hepsine 1-2 yıl sonra tekrar düşünce gülüp geçeceğim.” Bakın bu çok önemli, kısacası sorunları büyütüp kendinizi kanser etmeyin.

Eğer yaşadığınız sıkıntının içinden çıkamıyorsanız size 2 özlü sözüm var.

  • Baktın olmuyor, bakmayacaksın,
  • Müzik değişirse dans da değişir.

 

Tembelliği bırakın ve birşeyler yapın…

leadership-working-hard-work-Todd-Nielsen

Geriye doğru bakınca şunu da fark ediyorum, zamanında elimizde çok güzel imkanlar ve zamanlar varmış ve bunu değerlendirememişiz. Buna  üzülüyorum, keşke tembelliği birazcık ileri itip daha çok çalışsaymışım.

Burdan yola çıkarak şunu söylemek istiyorum üniversite okuyan arkadaşlar,

Eğlenmek mi istiyorsunuz, dibine kadar eğlenin bu sizin hakkınız.(Hayatınız üniversite okuduğunuz zaman kadardır, gerisi çalışmakla veya sorumluluklarla geçiyor)

Üniversite bittikten sonra iş aramaya başlarsanız hüsranla karşılaşırsınız. Şuana kadar gördüğüm çoğu öğrenci hayatını berbat bir şekilde geçiriyor (tos tos, saman saman, ot geldik ot gidiyoruz der gibi evde oturarak ve hiçbir şey yapmayarak). Eğer siz üniversite 1. sınıfda alanınızı belirlememişseniz hata yaparsınız.

Örnek veriyorum biyoloji okuyabilirsin ama 1. sınıfda yazılımcı olacağım diyorsan başlamalısın işlere, ve iş almalısın her iş seni geliştirecektir. Sonra ufkunu genişletmek için firmalara iş başvurusunda bulunmalısın. Firmalar sizi işe almasalar bile bedava çalışırım diyerek işi öğrenmek amaçlı işe girmelisiniz..

 

Hepimiz öleceğiz front-end developer’lar bile ölecek…

Velhasıl kelam hayat böyle arkadaşlar geçip gidiyor // Birgün hepimiz öleceğiz bu yüzden hırslarımıza kapılıp çevremizi kırıp dökmeyelim ve bu dünyadaki kısacak ömrümüzü güzel geçirelim ? Ne dersiniz ?

 

 

Neyse kendimi birşey sanarak çok nasihat verdim.

 

Kalın sağlıcakla dostlar, size güzel bir müzik ile veda ediyorum.

 

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.

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 )

 

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;

jade1

Jade Nasıl Kurulur?

Jade’ yi kurup kullanmanız için 2-3 yöntem mevcuttur.

Birinci Yöntem (Tavsiyem 2. yöntem, bu yöntem biraz karışık);

nodejs ‘yi indirerek bilgisayarınıza kurmanız gerekmektedir. Node’ un basit kurulumunu yaptıktan sonra masa üstüne herhangi bir simge atmadığından program aramasından “Node.js command prompt” yazıp bularak çalıştırmanız gerekmektedir;

node

Daha sonra;

kurulum1

Açılan pencerede ‘C:/’ yapısına çıkmak için konsola .

yazıyoruz.

Nodejs’mizin kurulu olduğu dosya yapısına girmek için ise

 komutunu yazıyoruz. Artık nodejs nin kurulu olduğu dosyadayız ve Jade kurulumunu yapmamız için  hiç bir sorun yok.

Konsolumuza

veya

yazarak kurulumu başlatıyoruz. Ortalama bilgisayarınızın hızına göre 10-60 saniye sürüyor.

Yükleme tamamlandıktan sonra ekrana jade ile ilgili sürüm bilgileri ve dosya bilgileri gelmektedir.

Ardından konsolumuz nodejs klasörünü gösteriyorken nmp start komutunu çalıştırıyor ve deneme.jade dosyamıza jade kodlarımızı bir editör yardımı ile oluşturuyoruz. örnek kodları yukarıda belirtmiştim. Oluşturduğumuz deneme.jade dosyamızı deneme.html şekline çevirmek için konsolumuzu

yazmamız yeterli olacaktır. Html çıktısı deneme.jade dosyamızın yanına çıktı olarak kaydedilecek.

 

Örnek kurulumu bu videodan izlemeniz mümkün olacaktır.

 

Şimdi jade dosyamızı oluştumak için bir txt dosyası açıp uzantısını .jade olarak değiştiriyoruz.
jade2

 

İkinci Yöntem;

Önerdiğim yöntem budur çünkü hiç bir konsolla uğraşmıyor, node.js’yi de kurmanıza gerek kalmıyor ve daha kullanışlı ve basit yapıda. Bu siteden Prepros adlı compiler programımızı indiriyoruz. Bu program .jade uzuntalı bütün dosyalarımızı html çıktısı olarak veriyor. Ayrıca sass, less gibi dosyalarınızı da compile edebilmektedir. Ücretsiz sürümü mevcuttur.

İndirip kurulumu yaptıktan sonra karşımıza çıkan ekranda

jade3

+ADD PROJECT butonundan daha önce masa üstümüzde oluşturduğumuz deneme klasörünü seçiyoruz. İçerisinde bulunan .jade uzantılı dosyaları otomatik olarak dönüştürebilmesi için açılan ekranda anaSayfa.jade dosyamızı seçip sağ alt köşedeki Process File butonuna tıklıyoruz ve bütün kurulum bu kadar. Artık kullandığınız txt editöründen projenizi her kaydettiğinizde otomatik olarak html dosyalarınızı değiştirecektir.

jade4

Jade Nasıl Kullanılır?

Örnek yazım şeklini en üstteki görselde paylaşmıştım fakat bazı güzelliklerinden bahsetmeye devam edelim;

Php de olduğu gibi header ve footer sayfalarını farklı jade’lere yazarak diğer sayfalarınızın içine çağırmanız mümkün. Yani tek bir header.jade dosyası üzerinde yapacağınız değişiklik diğer html sayfalarınızda bulunan header bölümlerine otomatik olarak yansıtılacaktır. Böylelikle projenizde bulunan onlarca belki yüzlerce sayfadaki headerı değiştirmek zorunda değilsiniz. Aynı durum footer ve javascript dosyaları içinde geçerli.

 

Örnek olarak gösterecek olursak;

Metalarımızın ve header’ımızın bulunacağı ayrı ayrı iki farklı .jade dosyası hazırlayalım.

(meta.jade)

meta

Metalarımızı şekildeki gibi jade yazım dilini kullanarak oluşturalım.

(header.jade)

header

Metalarımızı oluşturduğumuz gibi header’ımızıda basit bir yapıda oluşturduk. Burada dikkat etmeniz gereken kısım tab yapısına dikkat etmeniz olacaktır. aksi takdirde prepros programımız sağ alt köşede kırmızı yazılı hata ekranını    gösterecektir. Doğru yazım uyguladıysanız ctrl+s kombinasyonu ile dosyanızı kaydettiğinizde yeşil yazılı ekran doğru yaptığınızı gösterecektir. Daha sonra 2 dosyamızı da çağıracağımız asıl sayfamızı yapacak olursak;

(anaSayfa.jade)

anasayfa

include meta.jade ve include header.jade komutlarıyla istediğimiz konumlara meta ve header dosyalarımızı dahil ettik. Bu sayfanın çıktısı ise bize;

(anaSayfa.html)

html

3 farklı jade dosyasıyla hazırladığımız ana sayfamızın çıktısı şekildeki gibidir. Diğer kullanmak istediğiniz fonksiyonlar için ve daha geniş çaplı kullanımlar için jade‘nin sitesini ziyaret edebilirsiniz.

 

 

Kalın Sağlıcakla.

Apple safari tarayıcıda telefon numaralarının şekillenmesini engellemek

Merhaba arkadaşlar. (Uzun zamandır merhaba demiyorum, özlemişimm)

iPhone akıllı cep telefonları internet sitesindeki  telefon numaralarını algılıyor, şekillendiriyor ve bizim yapımızı bozuyor.

İnternetde arama yaptığımda aşağıdaki meta tag’ın olayı çözdüğünü gördüm.

Bu tag Apple’a özel bir meta tag. (Apple’a özgün diğer taglara apple meta tag ulaşabilirsiniz.)

 

Sağlıcakla kalın.