KMRT BSRN

"Hiç kimsenin ilgisine ihtiyaç duymadığın gün olgunlaşırsın. Hiç kimseden beklentiye girmediğin gün yara almazsın. Ve hiç kimseye bağımlı kalmazsan kazanırsın." OSHO


Yorum bırakın

Zen-Coding ile Zen Sanatı Hızıyla Kodlama

zen-coding

Zen-Coding; evet artık kodlama da zen sanatına girmiş bulunuyoruz. Gülümseme Uçmuş bunlar dediğinizi duyar gibiyim.. Fakat merak etmeyin, kastettiğimiz o derece bir zen değil. Fakat sizi temin ediyorum sizleri rahatlatacak bir kodlama tekniğinden bahsedeceğim. Tabii sizleri derken aslında parmaklarınızı rahatlatacak bir tekniği kastediyorum. Çünkü az kelime ile çok kod yazmayı size göstereceğim.

Videolarımı izleyenler mutlaka fark etmişlerdir. HTML DOM’u kodlarken, bazı kısa ifadeler yazıp bunların otomatik olarak zaman alacak HTML DOM’lara dönüşmesini sağladığımı fark etmişlerdir. İşte bu dönüşümler zen-coding olarak isimlendirilen bir eklentinin Visual Studio 2013 ‘e eklenmiş olmasından kaynaklanmaktadır.

Evet.. Aslında o hep orada ama bilip kullanmamız gerekiyor. Bu sebeple Visual Studio lansmanlarını kaçırmamanızı tavsiye ederim.

Aslında bu video’yu daha önce çekmeliydim. Açıkçası anca bunu çekmek aklıma geldi. Fakat sonunda çekip sizlerin de bu özelliği, bu sanatı kullanmanızı şiddetle öneririm. Çok fazla özelliği yok ve alışma evresini kısa zamanda geçiyorsunuz. Ardından zevki yaşamak kalıyor.Gülümseme

Visual Studio 2008 – 2010 – 2012 ‘de bu özelliği Visual Studio Zen Coding isimli extension ile kullanıma açabiliyoruz. Visual Studio 2013’te ise Web Essentials 2013 içinde geliyor.

Zen-Coding’de kullanılan birkaç nitelik mevcut, bunlar;

  1. # bir «id» nitelikli element oluşturur.
  2. . bir «class» nitelikli element oluşturur.
  3. [ ] özel nitelik tanımlı element oluşturur.
  4. > alt element oluşturur.
  5. + kardeş element oluşturur.
  6. ^ üst element’e erişir.
  7. * bir işlemin tekrar etmesini sağlar.
  8. $ tekrar eden işlemlerde sayıyı temsil eder.
  9. $$ tekrar eden işlemlerde sayının basamak sayısını temsil eder.
  10. { } element içine metin ekler.

 

şeklinde gösterebiliriz. Video’da tüm özellikleri örnekler ile gösterdim. Dilerseniz; aşağıdaki sayfalardan da faydalanabilirsiniz. Yazılı örneklere hızlıca ulaşmak açısından olabilir. Ayrıca farklı programlar için zen-coding eklentilerini siteden görebilir ve indirip kurabilirsiniz.

Zen-Coding ile Zen Sanatı Hızıyla Kodlama


Yorum bırakın

SASS – Bunlar da varmış dediklerim ve VS2013 Extension Detayları

SASS-Syntactically Awesome StyleSheets

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere Visual Studio 2013 üzerinde incelediğim SASS desteği veren extension’ların yapabildikleri ve yapamadıklarından bahsedeceğim. Ayrıca Online Sass Compiler olan SASS Meister üzerinde derleme işlemini göstereceğim. Herhangi bir program kurmadan sass(scss) dosyalarını işleyebilirsiniz.

Bunların dışında ayrıca sass özelliklerinden PlaceHolder Selectors, @import url kullanımı, @media kullanımı kavramlarına örnekler ile değinmeye çalıştım.

Sass desteği veren visual studio 2012 – 2013 extension’ larına aşağıdaki adreslerden ulaşabilirsiniz.

  1. SassyStudio
  2. Mindscape Web Workbench
  3. Web Essentials 2012
  4. Web Essentials 2013
SASS – Placeholder Selectors, import url, media ve VS2013 Extensions Detayları


Yorum bırakın

SASS – Koala App Kurulumu ve Kullanımı

SASS-Syntactically Awesome StyleSheets

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS kullanımında Visual Studio kullanmadan nasıl scss dosyalarını derleme yapabileceğinizden bahsedeceğim.

Bu videomuza kadar yaptığımız tüm örneklerde visual studio IDE kullanarak SASS(scss) dosyalarımızı oluşturduk. Dosyamız üzerinde kaydetme işlemi yaptığımız anda gerekli derleme gerçekleşerek bize CSS dosyamızı oluşturuyordu. Peki elimizde Visual Studio yoksa hangi araçları kullanarak sass dosyalarımızı derleyebiliriz. Bunun için sass’ın sitesinde bir dizi program bulunmaktadır. Uygulama listesine install sayfadan erişebilirsiniz. Open Source(ücretsiz) ve Paid(ücretli) olarak uygulamalar listelenmektedir. Ben ücretsiz olan Koala app ‘i kullanıyorum. Fakat Scout ‘da ona benzer, onu da kullanabilirsiniz. Tüm open source(ücretiz) yazanları kullanabilirsiniz. Paid(ücretli) olanlarda da ücreti karşılığı gayet güzel özellikler gelmektedir.

koala app

Koala app ve scout uygulamalarının ikisini de kullanabilirsiniz. İkisinin de amacı derleme yapmak. Yani bir metin editörü içermiyorlar. Bilgisayarınızda bir klasör’ü program üzerine sürükleyip bıraktığınızda o klasörü proje olarak kabul ediyor ve içerisindeki dosyaları okuyor. Okuduğu dosyaları türlerine göre listeliyor. Klasör içindeki dosyalarınız da yapacağınız kodlamayı “Not Defteri” , “Notepad++” vs gibi metin editörleri ile yapıyorsunuz. Koala bu dosyaları sadece derleyerek size css çıktılarını üretiyor. Bu videoda sizlere kurulumdan kullanımına kadar nasıl yapıldığını izleyebilirsiniz.

SASS – Koala App Kurulumu ve Kullanımı

Video görüntüsünü alamazsanız video başlığındaki link’e tıklayarak youtube üzerinden izleyebilirsiniz.


Yorum bırakın

SASS – Function & Control Directives

SASS-Syntactically Awesome StyleSheets

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS üzerinde function directives ve control directives tanımlama ve kullanma gibi konulara değiniyor olacağım.

@function ile mixin kavramından farklı olarak değer döndüren fonksiyonlar tanımlıyor olacağız.

@if, @for, @each, @while gibi control directive ‘leri kullanarak koşullu stil ifadeleri, döngüler kullanarak bir seri stil’i oluşturma gibi konularda örnekleri aşağıdaki videodan izleyebilirsiniz.

SASS – Function & Control Directives


Yorum bırakın

SASS–Mixin & Extend

SASS-Syntactically Awesome StyleSheets

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS üzerinde Mixin(fonksiyon olarak düşünebilirsiniz) tanımlama ve kullanma, Extend(genişletme) gibi konulara değiniyor olacağım.

Mixin kavramında; bir fonksiyon gibi yazdığımız bir blok stil’i “@include” ifadesi ile çağırarak istediğimiz yere uygulanmasını sağlayabiliyoruz. Hatta oluşturduğumuz mixin için parametre tanımlayarak, parametrik olmasını da sağlayabiliyoruz.

Extend kavramında ise; stil özelliklerini inherit(miras) alabilmeyi sağlıyoruz. “@Extend” anahtar ifadesi ile extend edilen stiller bir araya gelerek css dosyada tanımlanıyorlar. Basitçe örnek vermek gerekirse; aşağıdaki gibi bir css dosya oluşturmak istiyorsak;

CSS:

.button, .button1, .button2 {
    /* button, button1, button2 için ortak stiller */
  color: #ddd;
  font-size: 12pt; }

.button1 {
    /* button1 için özelleştirilmiş stiller */
  border: 1px solid green; }

.button2 {
    /* button2 için özelleştirilmiş stiller */
  border: 1px solid black; }

Aşağıdaki gibi SASS dosyamızı kodlamamız ve .button1 ve .button2 isimli stilleri .button stilinden extend etmeli ve farklı özelliklerini yine içine tanımlamalıyız.

SCSS:

.button{
    color: #ddd;
    font-size: 12pt;
}

.button1
{
    @extend .button;
    border: 1px solid green;
}

.button2
{
    @extend .button;
    border: 1px solid black;
}

Böylece CSS kodundaki ilk stil’i (“.button, .button1, .button2”) elde etmiş oluruz. Özet olarak; @extend anahtarı kullanılan stiller @extend anahtarı ile kullanılan stil’le birleştirilerek css dosyada tanımlanırlar.

SASS–Mixin & Extend(Inheritance)


Yorum bırakın

SASS – Partial & Imports

SASS-Syntactically Awesome StyleSheets

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS üzerinde Partial Files oluşturma ve bunları kullanma(import) gibi konulara değiniyor olacağım. Önceki videomuzda oluşturduğumuz kodlarımızın bir kısmını alarak partial bir SASS dosyasına taşıyacağız. Ardından bu dosyayı projemize ait olan, derlenerek css kodu oluşturan SASS dosyamıza import edeceğiz.

SASS – Partial & Imports


Yorum bırakın

SASS – Variables & Nesting

SASS-Syntactically Awesome StyleSheets

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS üzerinde Variables(değişkenler) tanımlama ve kullanma, Nesting(iç içe yazma) gibi konulara değiniyor olacağım. “div” elementlerine SASS dosyası(.scss) ile oluşturduğumuz(aslında otomatik olarak oluşan) css dosyası ile stil vereceğiz.

SASS – Variables & Nesting