Kişisel web tasarım ve kodlama blogu. Web tasarımı ve kodlama araçları ile ilgili bilgiler ve yardımcı dökümanlar.

Kod yazmak sanattır...

gokhankr.com

Blogger tarafından desteklenmektedir.

Vue.js 'e Giriş



Merhaba arkadaşlar, Vue.js Dersleri başlığı altında Vue ile ilgili tüm bilgileri sizlere elimden geldiğince aktarmaya çalışacağım. Burada bir giriş yazısı ile başlayıp küçük bir örnek ile de bitirmek istiyorum.

Nedir ?
Çok fazla detaya girmek istemiyorum çünkü React ve Angular 'ı duymayan herhalde yoktur. Vue 'da diğer kütüphaneler gibi Model ve View kısmı üzerinde eşzamanlı etkileşimi sağlar. Aynı sayfa üzerinde aktif olarak içeriklerinizi yenilemenizi ve işlem yapmanızı sağlar. Web sayfalarınızı daha pratik ve kullanışlı hale getirir.

Vue 'da herşey reaktiftir. Örneğin bir .js dosyası oluşturup sayfaya dahil edin ve aşağıdaki örneği girin;

var app3 = new Vue(
{
  el: '#app-3', 
  data: { 
    veri: "Merhaba" 
})


Şimdi Console 'u açın ve app3.veri yazıp enterlayın "Merhaba" yazısını alacaksınız. İsterseniz buna yeni bir değer girin o değeri alacak ve yazacaktır.
İşte uygulamalarımızı kodlarken sayfa üzerinde sürekli aktif olarak farklı işlerinizi sadece bir tık ile Vue üzerindeki bir değişkene veri aktarıp ardından farklı işlemleri otomatik olarak tetikleyebileceğiz.

Vue Öğrenmek İçin Ne Gerekli ?
Orta düzeyde Javascript bilmeniz yeterli. Özellikle Javascript Nesnelerini iyi bilmeniz gerekiyor. Çünki çalışmalarımızın temeli zaten buna dayanıyor. Javascript 'te herşey bir nesnedir ve bu yüzden bu konuda eksiğinizin olmaması yararınıza olur. Bundan sonraki yazımızda Vue 'nun sözdizimi ile başlayalım.


CSS Conic Gradient Kullanımı


Giriş
Diğer bir çok gradient efekti gibi henüz yeni sayılabilecek farklı bir gradient özelliği. Conical Gradient henüz tarayıcıları çoğu tarafından desteklenmese de popüler tarayıcılar arasında kullanılabilecek bir özellik.

Örneklerle gösterelim,
İstediğiniz kadar renk atayabilirsiniz. Soldan başlayarak en son renk paletine kadar dairesel bir şekil ile karşımıza çıkmakta.




Sözdizimi
Conic Gradient aşağıdaki şekilde parametre alır.

conic-gradient() = conic-gradient(

 [ from <açı> ]? [ at <pozisyon> ]?, <renkler> 
)


Aşağıda en basit haliyle kullanımı örnek gösterilmiştir

.conic-gradient { 
background: conic-gradient(#fff, #000); 
}

from <açı> yani örnek olarak from 0deg veya from 30deg şeklindeki değerler ile renklerin hangi açıdan itibaren başlayacağını belirtiriz.

at <pozisyon> yani örnek olarak at 50% 50% dediğimiz zaman soldaki yatay eksende sağdaki de dikey eksende merkezi noktanın konumunu belirler.

Aşağıda tüm örnekleri görüntüleyebilirsiniz.

.conic-gradient {
/* Basit hali */
background-image: conic-gradient(#fff, #000); 
/* Başlangıç konumunu belirle */ 
background: conic-gradient(at 50% 50%, #fff, #000); 
/* Başlangıç açısını belirle */ 
background: conic-gradient(from 0deg, #fff, #000); 
/* Başlangıç noktası ve başlangıç konumunu bir arada belirle */ 
background: conic-gradient(from 0deg at center, #fff, #000); 
/* Renklerin açılarını yüzde olarak belirle */ 
background: conic-gradient(#fff 0%, #000 100%); 
/* Başlangıç ​​renginin açısını derece cinsinden ve bitiş rengini dairenin tam bir dönüşü ile bitir */
background: conic-gradient(#fff 0deg, #000 1turn); 
}

Eğer açı değeri girmezsek 0 dan 360 dereceye kadar keskin bir çizgi oluşturur. Burada daha yumuşak bir görüntü elde etmek için başlangıç ve bitiş renklerini aynı yapabilirsiniz. Böylece örneğin yukarıdan bakınca koni görünümü veren bir görüntü elde edebilirsiniz.

Aşağıdaki örnekteki gibi bir görüntü elde edip animasyon ile döndür komutu vererek bir Mac efekti verebilirsiniz.

.conic-gradient { 
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); 
}




Renkler arasında sabitleme sayısal değerleri girerek daha keskin görünümler elde edebilirsiniz.

.conic-gradient { 
background: conic-gradient(lime 40%, yellow 0 70%, red 0); 
}



Conic gradient 'in tarayıcı desteği listesine aşağıdan ulaşabilirsiniz.
https://caniuse.com/#search=conic%20gradient

Daha deylı bilgi için W3C resmi sayfasına gözatabilirsiniz.
https://www.w3.org/TR/css-images-4/#conic-gradients

CSS elementi ortalama yöntemleri



CSS ile herhangi bir nesneyi ortalama yapmanın bir çok yolu vardır. Bunları aşamalar halinde açıklayalım.


1. Display: flex ile hizalama
CSS 3 te uzun zamandır kullanılan flex düzeni ile ortalamayı ilk olarak gösterelim.

display:flex;
justify-content:center;
align-items:center;

display: flex her tarayıcıda sorunsuz çalışmıyor olabilir. Diğer yöntemleri de deneyebilirsiniz.


2. Margin: auto
Sıklıkla kullandığımız yöntemlerden birisi de margin: auto 'dur.

display:block;
margin:0px auto;


3. Display: Inline-Block
Elementin türünü inline-block olarak ayarlayıp bir text gibi davranmasını sağlayabilirsiniz.

display:inline-block;
text-align:center;


4. Position: absolute
Son olarak ta position türünü değiştirip, top ve left kullanımı ile ortalama yapabilirsiniz.

position:absolute;
top:50%;
left:50;
transform:translate(-50%, -50%);

Bilgisayar Diskinin %100 Kullanması Sorununun Çözümü



Merhabalar, bu yazımda bilgisayar kullanırken can sıkıcı sorunlardan biri olan diskin %100 kullanılması sorunu için çeşitli çözüm yöntemlerini paylaşacağım. Bu adımları tek tek uygularsanız kısmen de olsa çözme ihtimaliniz yüksektir.

Öncelikle şunu belirtmeliyim bu sorunla birden fazla cihazda karşılaştım ve şahsi kanaatim disk üzerindeki performans bozukluğundan kaynaklanan bir sorun bu. İşletim sistemi siz bilgisayarınızı kullanırken arka planda çeşitli sistem uygulamalarını çalıştırır. Bunlar normaldir ancak eğer diskinizde bir performans kaybı varsa işte o zaman bu sorunla karşılaşabiliyorsunuz.

Çözüm yöntemlerinden önce HDD 'nizin uzun ömürlü olması açısından sizlere bir kaç tavsiyem olacak;

  1. Bilgisayarınızı çok sıcak ortamlarda kullanmayın.
  2. Bilgisayarınıza çeşitli şekillerde darbe alacak etkenlerden uzak tutun.
  3. Bilgisayarınızın fişini kesinlikle çekmeyin, normal yol olan "Bilgisayarı Kapat" komutu ile kapatın. (Bu durum genelde güncelleme yapılırken insanların bilgisayarın fişini direkt olarak çekerek veya power tuşuna basılı tutarak kapatmasıyla ortaya çıkıyor)
Kullandığımız HDD 'ler içerisinde mekanik bir disk barındırdığı için darbeden, sıcaklıktan ve ani durdurmalardan etkileniyor. Siz fark etmiyorsunuz ama disk içerisindeki bölümler kötü kullanımlardan dolayı ölüyor ve diskiniz zamanla çalışmaz iş görmez hale geliyor.

Bunları yaptıysak şimdi çözüm yöntemlerine geçelim;

1.a. Windows Search Hizmetini kapatın
Windows Search hızlı arama yapmanız için arka planda verilerinizi toplar ve endeks haline getirir. Bu hizmet arka planda disk kullanım oranını artırır. Eğer aramayı çok fazla kullanmıyorsanız bu özelliği kapatmanız iyi olur. Kapatsanızda aramayı kullanabilirsiniz sadece aramalarınız biraz uzun sürer.

Başlat+X > Komut İstemi(Yönetici) > Evet deyin ve şu komutu girin net.exe stop "Windows search"

1.b.Windows Search 'ü kalıcı olarak devre dışı bırakmak

Windows+R > services.msc > Windows Search 'ü bulun.

Çift tıklayıp özelliklerini açın ve Başlangıç Tipi 'ni Devre dışı bırak olarak ayarlayın ardından Tamam deyin.

2. Sürücülerinizi güncelleyin

Bilgisayarınıza ait sürücülerinizi güncelleyin. Bunun için bilgisayarınızın destek sitesine veya OEM kullanıyorsanız Anakart ve Ekran kartı bilgilerinize göre sürücülerinizi güncelleyebilirsiniz.

Özellikle İntel işlemci kullanıyorsanız Depolama ve RAID sürücülerinin güncel olmasına özen gösterin.

3. Superfetch yazılımını devre dışı bırak

Superfetch önyükleme ve zorunlu olarak çalışan programları daha verimli için tasarlanmış bir sistem uygulamasıdır. Ancak Windows 10 ve 8 'de disk sorunlarının olası nedenleri arasında olduğu görülmüştür. Bu yüzden bunu da devre dışı bırakabilirsiniz.

Tekrar Komut İstemi 'ni yönetici olarak çalıştıralım ve aşağıdaki komutu girelim.

net.exe stop superfetch

Daha sonra aşağıdaki çıktıyı görebilmeniz lazım

4. Disk kontrolü yapın

Aşağıdaki komutu çalıştırarak bilgisayarınızın sabit diskini tarayın

chkdsk.exe /f /r :c

Bu komutu kullandığınızda karşınıza bir uyarı gelecek "Y" diyerek Enterlayın.
Bilgisayarınız yeniden başladığında diskiniz taranacak bozuk dosyalarınız varsa onarılacak ve sisteminiz yeniden açılacaktır. Bu işlem sabit diskinizin performansına göre biraz uzun sürebilir.

5. Sanal Belleği Sıfırla

Bilgisayarım > Özellikler > Gelişmiş Sistem Ayarları

ardından açılan pencereden

Gelişmiş > Performans başlığı altından Ayarlar ' a girin.

Oradan Sanal Bellek kısmından Değiştir 'e tıklayın.

"Tüm sürücüler için disk belleği dosyası boyutunu otomatik yönet" seçeneği tik işareti olmadığından emin olun.

Burada Özel Boyut 'u Seçin ve 
  • Minimum Boyut 'u pencerenin aşağısındaki Önerilen: xxx şeklinde yazan boyutu girebilirsiniz.
  • Maksimum Boyut kısmına da RAM 'inizin 1.5 katı oranında bir değer girin. Bu kısım çok yüksek olmasın.
Şimdi yeniden başlatın ve sorunu gözlemleyin.


6. Geçici Dosyaları Silin

Başlat > Çalıştır 'a gelin ve temp yazarak enterlayın. Karşınıza bilgisayarınızda kayıtlı tüm geçici dosyaların olduğu bir pencere açılacaktır. Buradaki tüm dosyaları seçin ve silin. 
CCleaner programı kullanıyorsanız da aynı işlemi yapabilirsiniz.

Bilgisayarınızdaki disk kullanımını tekrar gözlemleyebilirsiniz.

Javascript 'in Web Sayfalarında Kullanımı



Javascript kodlarını bir web sayfasında kullanmanın iki yolu vardır. Bunlardan ilki <script> etiketi içerisinde kullanımıdır.

<script> etiketi sayfanın herhangi bir yerinde olabilir. Yani ister "head" ister "body" etiketi olsun herhangi bir sorun teşkil etmiyor. Aşağıda JS kodlarının web sayfası içinde kullanımına örnek verilmiştir.

<script>
// js kodları
</script>

İkinci yöntem ise kodlarınızı .js uzantılı bir Javascript dosyası oluşturmak ve kodlarınızı bu dosya içerisine yazmaktır. Daha sonra oluşturduğunuz dosyayı da web sayfası içerisinde yine <script> etiketi ile belirtmek ancak etiket özelliği olarak dosyanızın, dosya yolu uzantısını girmektir. Aşağıda da buna bir örnek verilmiştir.

<script src="/dosyayolu/jsdosyasi.js" type="text/javascript"></script>

Her iki yöntemi de sayfa içerisinde herhangi bir yerde kullanabilirsiniz. Ancak en doğru yöntem footer alanına eklemektir. Çünkü web sayfaları yüklenirken yukarıdan aşağıya doğru yüklenir ve en alta indiğinde son olarak Javascript kodlarınız çalışır.
Böylelikle sayfa içerisinde herhangi bir HTML etiketine bir değişiklik yapıyorsanız, sayfa yüklenmiş olacak ve JS kodları da yüklenen sayfa üzerinde sorunsuz çalışacaktır.

Javascript Değişkenler ve Türleri



Javascript 'e her programlama dilinde olduğu gibi değişkenler ve türlerinden başlıyoruz. Değişkenler içerisinde veri tutabilen ve adından da anlaşılabileceği üzere içeriği genelde değişebilen ve değişken olan işlevlerdir.

Javascript Değişkenleri Tanımlama
Değişkenler metin, sayı, mantıksal(doğru-yanlış) gibi verileri içerisinde tutabilirler. Programlama dillerinin en temel işlevleridir. Öncelikle değişken tanımlamayı bir görelim.

var  degisken = "Gökhankrll"

Yukarıdaki örnekte klasik bir değişken tanımlama örneği verilmiştir. Bir değişken tanımlarken başına "variable(değişken)" kelimesinin kısaltılmışı olan "var" kelimesini giriyoruz ardından değişken adını ve eşittir işareti ile karşılığına alacağı değeri giriyoruz. Burada bir değişken oluşturduk ve içerisine "Gökhankrll" değerini girdik.

Değişken tanımladıktan sonra değişken adı dikkatinizi çekmiştir. Burada türkçe karakter kullanmadık yani bunun gibi değişken tanımlamanın bazı kuralları vardır. Bu kurallar;

  • Değişken isimleri sayı ile başlayamaz örn: 123gokhan ancak alt tire ile başlayabilirler örn: _123gokhan,
  • Değişken isimlerinde break ve boolean gibi isimler kullanılamaz,
  • Değişken isimleri büyük küçük harf duyarlıdır yani isim ile Isım aynı değildirler.

Javascript Değişken Türleri
Javascript 'te değişkenler farklı türde verileri alabilir demiştik. Her programlama dilinde değişkenler aldıkları verilelere göre farklı türlere dönüşür/dönüştürülür. Değişken türleri;

  • Numbers(Sayısal veriler) örn: 123, 243.34 gibi
  • String(Metinsel veriler) örn: "Çift tırnak içindeki yazı" olarak çift tırnak içerisine girilmiş tüm veriler.
  • Boolean(Mantıksal) true ya da false
Javascript ayrıca null ve undefined olarak iki değişken türü de alır. Null, boş ve undefined de tanımsız değerleridir. Örneğin;

var degisken1 = null; // Bu değişken boş
var degisken2 = undefined // Bu değişken tanımsız.

olacak şekilde tanımlanabilir. Bazı programlama dillerinde değişken türünü değişkenin başında belirtmek gerekir. Javascript 'te değişkene verdiğiniz değer neyse otomatik olarak değişken türü ona dönüşür. Örneğin;

var degisken1 = 123 // Bu değişken türü sayısal
var degisken2 = "123" // Bu değişken türü string

var degisken3 = true // Bu değişken türü boolean (mantıksal)



Javascript Değişken Kapsamı
Javascript 'te değişkenleri iki sınıfta değerlendirebiliriz. Bunlar;
  • Global(Genel) değişkenler: Genel değişken tüm sayfa içerisinde kullanabileceğiniz değişkendir.
  • Local(Yerel) değişkenler: Yerel değişkenler ise sadece tanımlanan fonksiyon alanı içerisinde kullanılan değişlenlerdir.
Aşağıda global(genel) ve local(yerel) değişkenlere örnek verilmiştir.

var degisken1 = "abc" //global
function islevadi() {
var degisken1 = "def" // local (yalnızca fonksiyon içerisinde tanımlanır/kullanılır)
}


Birisi genel olarak kullanılırken diğeri yalnızca tanımlanan fonksiyon içerisinde kullanılabilecektir.

Javascript 'te Değişken Anahtar Sözcükleri
Değişken tanımlamak için değişkenin başına var yazıyoruz dedik. Javascript 'e gelen son güncellemelerde değişken tanımlamada bazı anahtar sözcükler geldi.
Siz herhangi bir değişkeni aslında başında var olmadan da tanımlarsınız ve bu değişken başında ek olmadığı için otomatik olarak var biçiminde tanımlanmış kabul edilecektir. Bunun haricinde const ve let olarak iki ayrı tanım yapmamız mümkün.
const ile salt okunur yani içeriği değiştirilemeyen değişkenler tanımlayabilirsiniz. constant kelimesinin kısaltmasından oluşuyor.
let ise biraz daha farklı. Bu terim ile yukarıda bahsettiğimiz global ve local değişken türüne benzer bir tanım yapıyoruz. JS 'de scope denilen bir özellik var. Mesela bir fonksiyon oluşturduğumuz zaman devamında o fonksiyona ait olduğuna dair bir köşeli parantez açıyoruz ve fonksiyona ait kodları bu alan içerisine yazıyoruz. İşte scope denilen şey bu köşeli parantezlerin iç kısmıdır ve türkçe karşılığı da alan/kapsam demektir.

Şimdi siz aşağıdaki gibi bir köşeli parantez açtığınızda bir scope açmış oluyorsunuz.

{
//scope(alan/kapsam)
}


İşte burada let kullanılabiliyor. Bu alanın dışında bir değişken tanımladığınızda global olarak verdiğiniz değer ne ise onu sayfanın her alanında kullanabilirsiniz. Aynı değişkeni let ile bu alanın içerisinde tanımlarsanız yine bu alan içerisinde farklı bir değerde kullanabilirsiniz. Alan içerisinde tanımladığınız değer ise o alanın içerisinde kullanılır. Örnek;

var degisken1 = 10
// degisken burada 10
{
var degisken1 = 2
// degisken burada 2
}
// degisken burada da scope dışında olduğundan yine 10

Javascript değişkenlerini en detayına kadar burada anlatmaya çalıştım. Bir sonraki yazımda görüşmek üzere.

Javascript 'e Giriş ve Temelleri



Merhabalar Javascript derslerime hoşgeldiniz. Elimden geldiğince detaylı bir biçimde Javascript 'i sizlere anlatmaya çalışacağım. İlk olarak hiç kodlama bilmiyorsanız da buradan derslere başlayabilirsiniz. Nette detaylı anlatım yapan pek kaynak bulamadığımdan burada yeni jenerasyona uygun bir anlatım serisi yayımlayacağım.

Javascript Nedir ?
Adından da anlaşılacağı üzere Java dilinden türetilmiş bir dildir. Yani Java 'yı JS 'in ebeveyni gibi düşünebilirsiniz. Ancak Java ve JS birbirinden ayrıdır. Javascript aynı zamanda EcmaScript olarak ta bilinir. Web 'de bu konu üzerinde araştırmalar yapabilirsiniz.
Web üzerinde yoğun olarak kullanılan JS kodlama dili, uzun zamandır web dünyasının popüler bir dilidir. Dahası son zamanlarda o kadar kendini geliştirmiştir ki sadece web tarafında değil aynı zamanda masaüstü uygulamalarında da kullanılmaya başlamıştır. Bunun nedeni JS 'in nesneye dayalı bir yapısının olmasıdır.

Nedir bu nesneye dayalı dil ?
Javascript 'te her şey bir nesnedir. İngilizce olarak "Object" adı ile geçer. Yani bu şu demek kodlama içerisinde herşeyi bir nesne olarak yönetebilirsiniz. Bu konuya yabancı olanlar için ilerde Nesneler 'e değineceğiz.

Kullanım alanları ?
Javascript hem web üzerinde hem de masaüstü programlamada kullanılmaktadır dedik. Masaüstü programlama için Node.js+Elektron.js ikilisini örnek verebiliriz. Bu iki kütüphane ile platform bağımsız(Windows+Linux+MacOS) olarak masaüstü uygulamaları kodlanabilmektedir. Örneğin Visual Studio Code editörü Elektron.js ile kodlanmıştır. Bu konu detaylı ve ayrı bir konu, bizi ilgilendiren web üzerindeki Javascript.

Javascript Web üzerinde iki türde kullanılır. Bunlardan birincisi tarayıcı tarafında kullanılan Javascript. Yani buna Client Side(İstemci Tarafı) denmektedir.
Bildiğiniz üzere bir "html" veya "php" sayfası oluşturduğumuz zaman <script> etiketi içine veya ayrı bir .js dosyasına Javascript kodları giriyoruz. İşte bu kodlar tarayıcılar tarafından yorumlanıyor. Diğer bir değişle tarayıcılar içerisinde bir Javascript motoru bulunmaktadır. Bizim sayfalar içerisinde kullandığımız ve kullanıcıların da kaynak kodunu açtığında görebildiği JS kodları tarayıcılar tarafından yorumlanmaktadır. Örneğin, web üzerinde bu konuya aşina olanlar Google Chrome 'un "Javascript V8 Engine" motorunu daha önce duymuştur. Chrome, JS için güçlü bir altyapı sunmaktadır.

İkinci kullanım alanı ise aynı PHP ve Ruby gibi web programlama dillerinde olduğu gibi sunucu tarafında kullanılan Javascript vardır. Buna örnek olarak yine Node.js 'i verebiliriz. Node.js bir framework 'tür ve JS 'i sunucu tarafında çalıştırır. Buna da Server Side(Sunucu Tarafı) denmektedir.
Tabi Node gibi birçok farklı framework vardır ama şuan popüler olan Node.js tir. Tahmin edebileceğiniz gibi burada JS sunucu tarafında çalıştığı için kodları kullanıcılar göremez ve tıpkı Apache Server ile PHP nasıl çalışıyorsa burada da Javascript öyle çalışacaktır.


Javascript 'e giriş yazımı burada sonlandırıyorum bir sonraki derste Javascript Değişkenler Türlerini ve Değişken Tanımlamayı anlatacağım. Giriş dersi biraz uzun oldu ama eğer bu yazımı okuduysanız size JS adına temel bilgileri iyi oturtacağına eminin.