Visual Studio 2013 Update 2 RC

vs

Önceki “SASS – VS 2013 Update 2 CTP 2 ile Gelen SASS Yenilikleri” isimli yazımda Visual Studio 2013 Update 2 CTP 2 versiyonu yayınlanmıştı. Tabii Community Preview olan bu sürümde release candicate sürümü gibi her şey düzgün çalışmayabiliyor. Ön yoklama ve bilgi edinme sürümü olarak düşünebilirsiniz. Bende bu güncellemeyi kurup yenilikleri incelemeye hatta kullanmaya başlamıştım. Hatta Web Essentials 2013 ‘ün henüz uyumlu olmadığını ve nightly versiyonu ile güncelleme yapmak zorunda kaldım. Gülümseme Sorunlardan kurtuldum ama yine de release sürüm gibisi yoktur..

Sonunda beklenen o release candicate sürümü çıktı. Aslında çıkalı sanırım bir süre oldu ama anca yazma vakti bulabildim. Sizde isterseniz Visual Studio 2013 Update 2 RC ‘yi kurarak Visual Studio 2013 ‘ünüzü güncel tutabilirsiniz. Ben öneririm. Fakat mutlaka kullandığınız extension’lara ve uygulamalara uyumluluğunu test etmenizi ve ona göre bilerek geçmenizi, gözü kapalı yüklememenizi öneriyorum. Sonra süpriz durumlarla karşılaşmayın.

Reklamlar

Web Essentials 2013 ile Dosyaları iç içe Gruplama

Introducing File Nesting extension for Visual Studio

Aslında bu özellik Visual Studio’nun içinde varsayılan olarak gelmektedir. Fakat çok daha basit çekilde grup yap / grup çöz şeklinde çalışmakta iken. Web Essentials 2013 ile birkaç farklı yetenek daha kazandırılmış.

  • Tek dosya seçip başka dosya ile gruplama
  • Seçilen klasör içindeki dosyaları dosya adına göre otomatik gruplama
  • Tüm proje genelinde eklenen dosyaları dosya adına göre otomatik olarak gruplama

şeklinde seçenekler bulunmaktadır.

Dosya sayısının fazlalaştığı projelerde hayat kurtaran bir şey olduğunu söyleyebilirim. Özellikle eklenen her yeni dosyanın otomatik olarak gruplanması tadından yenmez bir duygu oluşturmaktadır.

 

kmb-udemy-reklam

Web Essentials 2013’de Resim (image) Dosyaları ile Çalışmak

Working with images in Web Essentials 2013

Faydalı ve kullanışlı olduğunu düşündüğüm bir Web Essentials 2013 özelliğini sizlerle paylaşmak istiyorum. İngilizce bilmeseniz de video’ da gayet basit bir şekilde anlatılmış. Çok hoşunuza gidecek bir özellik, kullanmanız dileğimle.. Tabii ki sizde bu özelliğin çalışması için Visual Studio için Web Essentials 2013 extension’ ını kurmayı unutmayın.

Yaptıklarını kısaca özetlersek;

  • Bir yerlerden kopyaladığınız hafızadaki resimleri HTML’e yapıştırdığınızda ilgili dosyayı projeye ekliyor ve <img /> tag içine otomatik yazıyor.
  • Resimleri optimize ederek boyutlarını azaltıyor.
  • Resimleri base64 ‘e çeviriyor.
  • Resimleri base64’den Uri haline geri çeviriyor.
  • Resimleri base64’den dosya olarak kaydedebiliyor.
  • Birden çok resmi birleştirebiliyor. Ayrıca LESS, SASS, CSS, JSON kodlarını yazarak otomatik olarak site içindeki CSS dosyanıza import ediyor.
  • vs vs vs..

 

kmb-udemy-reklam

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-2015-2017 ‘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-2015-2017 de ise Web Essentials içinde geliyor.

kmb-udemy-reklam

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. 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.

SASS – Nedir? Visual Studio 2013 ile Entegrasyon

SASS-Syntactically Awesome StyleSheets

Syntactically Awesome StyleSheet…

SASS Nedir? ile SASS video serimize başlıyoruz. Sizlere bu video seri ile SASS ‘ın ne olduğu ve Visual Studio 2013 ile nasıl kullanılabileceğini anlatacağım. Serimizi takip eden videolarda da örneklerle beraber SASS ‘ın en belirgin özelliklerini size aktarıyor olacağım. SASS’ ı Visual Studio olmadan kullanmak isterseniz ücretli ya da ücretsiz(open source) uygulamaları bulunmaktadır. SASS ‘a ait sitedeki install başlığından bu uygulamaları görebilir ve ilgili web sayfalarına giderek indirebilirsiniz. Visual studio 2012 ve 2013 ile kullanmak isterseniz gerekli extension’ı kurmanız gerekmektedir. İster Visual Studio içindeki Tools –> Extension & Updates kısmından isterseniz de aşağıdaki web sayfasından SassyStudio isimli extension’ı indirerek kurabilirsiniz.

SASS dosyalarının uzantısı “.scss” şeklindedir. Visual studio kullanarak oluşturduğunuz bir web projesine sağ tıklayarak Add –> Add New Item diyerek Sass File ekleyebilirsiniz. Bir de Sass Partial File isimli bir dosya daha göreceksiniz. Bu dosyanın normal sass dosyadan farkı yoktur. Dosya adının başındaki “_”(alt çizgi) bu dosyanın önemli kısmıdır. Bu o dosyanın başka projelerde de kullanılabilecek olan bir kod parçası olarak işaretlendiğini belirtir. Yani Sass File’lara birden fazla daha önce yazmış olduğunuz sass partial file import edebilirsiniz.

Örnek bir SASS kodunu da giriş videosu yazımızda sizlerle paylaşmak istiyorum.

$yazi-tipim:    Helvetica, sans-serif; 
$ana-renk: #333;

body { 
    font: 100% $yazi-tipim; 
    color: $ana-renk; 
}

Buradaki kodlamada; sass file üzerinde değişken tanımlamayı görüyorsunuz. “$” simgesini değişken isminin önüne yazarak değişken tanımlıyoruz ve kullanırken de gene “$” simgesini kullanarak istediğimi yerde kullanıyoruz. Formül şu şekilde;

$[değişken_adı] : [değer] ;

Bu örnek sass dosyasını derlediğimizde(compile) – visual studio içinde kaydettiğimiz anda derlenmiş oluyor “.css” dosyamız oluşturuluyor.

body { 
    font: 100% Helvetica, sans-serif; 
    color: #333; 
}

Derleme sonrası; tanımladığımız değişkenleri kullandığımız yerde değişkenin değerlerinin yazıldığını görebilirsiniz. Tabii ki bu sass dosyalarının basit bir özelliği, çok daha fazlası ve gelişmiş yetenekleri var. Bunları ilerleyen videolarımızda sizlere anlatmaya çalışacağım. Bu giriş videosu için bu şekilde bir yazıyı yazarak da sizler için konuya giriş yapmış oluyorum. Video ile sizleri başbaşa bırakıyorum.

kmb-udemy-reklam

GitHub–Visual Studio 2013 & Git Branches

Git ve GitHub Serisi ile ilgili diğer videolara aşağıdaki linklerden ulaşabilirsiniz.

  1. Git ve GitHub Nedir? Neden Kullanayım? Nasıl Kurulur?
  2. GitHub Repository(Proje) Oluşturma
  3. GitHub Sitesi Hakkında Bilinmesi Gerekenler
  4. GitHub–Online Olarak Çalışmak
  5. GitHub–Offline Kullanmak ve Senkronizasyon
  6. GitHub–Visual Studio 2012 ve Visual Studio 2013 Entegrasyonu
  7. GitHub–Visual Studio 2013 ile Local Git Repositories & Push to GitHub & Sync

Serimizin bu son videosunda sizlere Git SVN sisteminde Branches(alt sürüm, dallanma) konusundan bahsedeceğim. Ne amaçlarla kullanılabilir? Ne işimize yarar? Nasıl kullanılır? gibi sorulara visual studio 2013 eşliğinde elimden geldiğince cevap vermeye çalışacağım. Faydalı olması dileklerimle..

kmb-udemy-reklam

GitHub–Visual Studio 2013 ile Local Git Repositories & Push to GitHub & Sync

Git ve GitHub Serisi ile ilgili diğer videolara aşağıdaki linklerden ulaşabilirsiniz.

  1. Git ve GitHub Nedir? Neden Kullanayım? Nasıl Kurulur?
  2. GitHub Sitesi Hakkında Bilinmesi Gerekenler
  3. GitHub–Online Olarak Çalışmak
  4. GitHub–Offline Kullanmak ve Senkronizasyon
  5. GitHub–Visual Studio 2012 ve Visual Studio 2013 Entegrasyonu

Serimizin bu videosunda artık yavaş yavaş yazılım spesifik kullanıcılara doğru GitHub’ın kullanımına yer veriyor olacağım ki zaten sistemin asıl amacı kodlama alanında hizmet vermek. Fakat farklı sektörlerce de kullanılabilecek esnek bir sistem olduğunu sizlere göstermek ve farklı sektör grubundan insanlarında kullanabilmesi yönünde önceki videolarımda programcılara yönelik, ağırlıkta anlatmadım.

Bu video’dan itibaren artık yazılımcı tarafından GitHub’ı Visual Studio ile ele alıyor olacağız. Tabii ki öncelikle Git, SVN sistemini ve GitHub Push hizmetini Visual Studio 2012 ve 2013 üzerinde kullanabilir hale getirelim. Bu işlemi extension’lar üzerinde ihtiyacımızı gideriyor olacağız. Aslında Visual Studio 2012 için böyle bir extension ile bu ihtiyacımızı gideriyor olacağız. Visual Studio 2013 zaten Git Source Provider entegrasyonu ile gelmektedir. Sadece aktifleştireceğiz.  Sizleri video ile baş başa bırakıyorum.

kmb-udemy-reklam