Sublime Text Yerimi Özelliği (Bookmarks)

Normal şartlarda kodlarımızın küçük bloklar halinde farklı dosyalarda olduğu bir dünya düşünürken genelde projelerimizde 2000, 3000 satırlık kod blokları olur.

Hayaller Hawaii hayatlar Sanayii:)

Uzun sayfalarda editörde belli bloklar arasında yukarı aşağı gezinmek sorun oluyor. Bu durumu çözecek bir özellik editör yerimi (Bookmarking) özelliği.

sublime text bookmarking

Yerimi ekleme kısayolu (MacOS için) kntrl + shift + r tekrar bastığınız da ise kaldırıyor.

sublime text bookmarking

Yerimim eklendiğini satır numarası yazan yerin solunda yerimi ikonu çıkıyor. Yerimleri arasınra gezinmek için kısayol olarak fn + F2 kullanıyoruz. Bu tuş kombinasyonuna her bastığımızda yerimleri arasında geziniyoruz.

CSS’de Uyumlu web geliştirmeleri yaparken normal kod ile media tanımları arasında gezinirken de yardımcı olur.

Kalın sağlıcakla.

Kaynaklar

30 Aralık 2017 tarihinde Fatih Hayrioğlu

NVM Nedir? Nasıl Kullanılır?

Node.js projeleri ile çalışırken birden farklı sürüm ile çalışmamız gerekebiliyor. Her projenin gereksinimleri farklı oluyor. Farklı sürümleri yönetmek için nvm (Node Version Manager - Nodejs Sürüm Yöneticisi) gibi güzel bir çözüm var. İşimizi kolaylaştıran ve bizi birçok dertten kurtaran güzel bir araç.

Nasıl kurulur

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

MacOS için yukarıdaki kodu terminale eklemek yeterli. Diğer işletim sistemler için nvm github sayfasında kurulum kısmına bakınız. Sonra terminali kapatıp açınca nvm kullanıma hazır.

Peki ihtiyacımız olan sürümü nasıl kuracağız. Kurabileceğimiz sürüm listesini

nvm ls-remote

komutunu terminale yazarak görebiliriz. Sonra buradan istediğimiz sürümü

nvm install 8.9.3

Yazmanız yeterli. Hemen nodejs sürümü yükleniyor ve kullanıma hazır hale geliyor.

Peki yüklü sürümler arasında nasıl geçiş yapıyoruz.

nvm use 6.9.4

Hop geçtik. Süper değil mi?

Yüklü nodejs sürümleri görmek için

nvm ls
         v4.4.2
->       v8.9.3
         system
default -> 8.9.3 (-> v8.9.3)
node -> stable (-> v8.9.3) (default)
stable -> 8.9 (-> v8.9.3) (default)
iojs -> N/A (default)
lts/* -> lts/carbon (-> v8.9.3)
lts/argon -> v4.8.7 (-> N/A)
lts/boron -> v6.12.2 (-> N/A)
lts/carbon -> v8.9.3

Peki her projeler arası geçişte böyle kod mu yazacağız? Onun içinde çözüm var.

Her proje klasörüne hangi nodejs sürümünü kullandığınıza dair bir nvm konfigürasyon dosyası eklemeniz yeterli.

/ .nvmrc (dosya adi)
6.94

Terminali kapatıp açın artık bu projede nvm use ile her geçişti nodejs sürümünü yazmanıza gerek yok.

Sonuç

Daha önce defalarca ismini duymama rağmen nvm ile bir sorunun çözümünü ararken kurma gereği duydum. Parceljs kurarken yaşadığım bir problemi çözmek için, sorunun çözümüne ilaç gibi geldi.

Kalın sağlıcakla.

Kaynaklar

29 Aralık 2017 tarihinde Fatih Hayrioğlu

Harmanlama kipleri (background-blend-mode ve mix-blend-mode)

Harmanlama kipleri (blend-mode) grafik işleme araçlarına aşina olanların bildiği bir özelliktir. İki farklı resmi veya yazıyı farklı filtreler ile harmanlayıp güzel tasarım sonuçları çıkaran bir yöntemdir. Bu yöntemi artık CSS ile yapabiliyoruz. CSS’in filter‘dan sonra blend-mode özelliği ile iyice grafik işlerini bünyesinde topladı. Harmanlama kiplerini iki farklı özellik ile uygulayabiliriz.

background-blend-mode
mix-blend-mode

background-blend-mode

background-blend-mode özelliği, bir öğeye tanımlanmış ardalan resminin(background-image) ardalan rengiyle(background-color) nasıl harmanlanacağını tanımlar. Grafik işleme araçlarıyla çalışanların aşina olduğu bir resim harmanlama işlemidir. Hemen bir örnek yapalım.

Yukarıdaki örnekte bir katmana atanmış ardalan resim ve ardalan rengi birbiriyle screen blend-mode‘u ile birleştirilmiş ve sonuç alınmıştır.

CSS’de 16 çeşit harmanlama kipi vardır. Tek tek aldığı değerleri tanımlamak yerine yukarıdaki örnek üzerinde her birini deneyimlemek daha anlaşılır olacaktır.

Not: Her bir resimde bu değerler farklı sonuçlar verecektir.

Çoklu ardalan resmine blend-mode uygulamak

Yukarıdaki uygulamalar ardalan resmi ile ardalan rengi arasında harmanlama yapıyor. Peki iki resmi birbiriyle harmanlamak mümkünmü? Çoklu ardalan kullanımı sayesinde bu da mümkün. Çoklu ardalan resmi eklediğimiz bir alanda harmanlama yapalım.

Bu özellik ile birçok farklı sonuçlar almak mümkündür. https://codepen.io/search/pens?q=blend-mode örneklerini incelemenizi öneririm.

mix-blend-mode özelliği ile iki elementin harmanlanması

background-blend-mode ile sadece ardalan resmi ile işlem yapabiliyoruz. mix-blend-mode özelliği ile ise herhangi bir HTML elementi ile başka bir HTMlL elementini harmanlama yapabiliyoruz. Bu kullanıma örnek olarak resim üzerine konulan yazıları harmanlama örneklerini gösterebiliriz.

Bir örnek yapalım.

Bİr resmimiz olsun ve bu resmin üzerinde absolute ile çıkardığımız bir metnimiz olduğunu düşünelim. Resim ile metni harmanladığımızda sonuç aşağıdaki gibi olur.

Bir çok farklı efektler elde edilebilir. codepen.io sitesindeki örnekler güzel. İncelemeye değer.

video örneği çok güzel. https://codepen.io/dudleystorey/pen/wavpGe

Tarayıcı Desteği