<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_zmkNzO7rJj3MaeJFjP2wg.png"><figcaption>Dalgalı Separator</figcaption></figure>Son zamanlarda web tasarımlarında en çok kullanılan separator çeşidi, shape divider’lar.
Bu makalede kolayca shape divider ekleyebilmenize olanak tanıyan <a href="https://www.shapedivider.app/">shapedivider.app</a>‘den bahsedeceğim ve bu uygulama hayatımızda yokken yaşadığımız sorunlardan bahsedeceğim. 🥲
<h3>❓Separator / Divider Nedir ?</h3>
Websitesi tasarımlarında iki section’ı birbirinden ayırmak için kullanılan yapılara, separator veya divider denir.
<h3>🤨 Yaşadığımız Problemler Nelerdi ?</h3>
UI tasarımlarda çokça gördüğümüz shape divider’ları tasarım dosyasından kesip PNG formatında, kullanıyorduk.
<ul>
<li>Resim PNG olduğu için farklı ekran çözünürlüklerinde (responsive) bozulmalar oluyordu.</li>
<li>PNG resimlerin pixel pixel gözükmesi divider’ın görüntüsünü bozuyordu.</li>
</ul>
<h3>🤓 shapedivider.app Problemlere Çözüm Üretebildi mi ?</h3>
<ul>
<li>Artık UI tasarımlarda gördüğümüz shape divider vb. divider yapılarını PNG olarak kaydedip işlem yapmamıza gerek kalmadı. Şekli oluşturduktan sonra SVG olarak kaydedip kullanabiliyoruz.</li>
<li>Resim SVG olduğu için görüntünün pixel pixel gözükmesi sorunu ve farklı ekran çözünürlüklerinde (responsive) yaşadığımız problemlere elveda demiş oluyoruz.</li>
</ul>
<h3>📚 Uygulamanın Kullanımı</h3>
<ul>
<li>
<a href="https://www.shapedivider.app/">https://www.shapedivider.app/</a> adresine gidilir.</li>
<li>Oluşturmak istediğiniz şekil ile alakalı detaylar seçilir ardından arayüz üzerindeki Download ikonuna tıklanır.</li>
<li>Açılan pencerede SVG ve CSS kodları verilmiş, bir de önemli bir not var; SVG elementini bir wrapper (kapsayıcı) içerisine almamız ve</li>
</ul>
<pre>position: relative;</pre>
niteliğini eklememiz gerektiği yazıyor.
<h3>🎥 Video Eğitim</h3>
Bu makalenin video eğitimine <a href="https://www.linkedin.com/in/didem-k%C3%BCc%C3%BCkkaraaslan-2a2a23140/">Didem</a>’in <a href="https://www.youtube.com/c/codingwithdidem/featured">YouTube Kanalı</a> üzerinden ulaşabilirsiniz;
<a href="https://medium.com/media/36dcf142ce5b3a6af0f04e7dbe73361e/href">https://medium.com/media/36dcf142ce5b3a6af0f04e7dbe73361e/href</a><h3>Sonuç</h3>
<a href="https://www.shapedivider.app/">shapedivider.app</a> uygulaması UI tasarımı frontend’e kodlarken hayatımızı kolaylaştıran ve en önemlisi de tasarım programlarında şekli tasarım dosyasından çıkarmak için harcadığımız zamanı bize geri veren, zaman tasarrufu yapmamızı sağlayan güzel uygulamalardan bir tanesi.
<h3>📬 Geri bildirim</h3>
Yazı ile ilgili tavsiye, öneri, eleştiri ve düzeltmeleri dikkate alıyorum. İletişime geçmek isterseniz bana <a href="https://www.linkedin.com/in/yasinatesim/">Linkedin</a> üzerinden ulaşabilirsiniz.
Sevgiyle kalın, Yasin 🤗

Son zamanlarda web tasarımlarında en çok kullanılan separator çeşidi, shape divider’lar.

Websitenize Dalgalı Efektli Divider’lar Ekleyin

<h3>Google Lighthouse’u Yazılım Geliştirme Sürecimize Nasıl Entegre Ettik ?</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/800/0*saDvgLGytHF1LkpV.png"><figcaption>Google Lighthouse</figcaption></figure><h3>Lighthouse Nedir ?</h3>
Lighthouse, web sayfalarının kalitesini artırmak için kullanılan Google tarafından geliştirilmiş açık kaynak kodlu bir test aracıdır.
<h4>
🤨 Nasıl Lighthouse Ölçümü Yaparım ?</h4>
Lighthouse Ölçümü yapmanın üç yöntemi bulunuyor;
👉 Pagespeed Insights:
Aşağıdaki bağlantıyı tıklayarak ilgili araca ulaşabilirsiniz.
<a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a>
“Enter a web page URL” metin kutusuna ölçüm yapmak istediğiniz web adresini girdikten sonra “Analyze” butonuna tıklamak.
👉 Google Developer Tools:
Chrome tarayıcısı üzerinden ölçüm yapılacak web adresine giriş yapıldıktan sonra;
Sağ Tuş &gt; İncele &gt; Lighthouse adımını takip edip, “Generate report” butonuna tıklamak.
👉 Google Chrome Extension:
Aşağıdaki bağlantıyı tıklayarak ilgili araca ulaşabilirsiniz.
<a href="https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en">Lighthouse</a>
Açılan sayfadaki “Chrome’a Ekle” butonuna tıkladıktan sonra Chrome tarayıcısının “Eklentiler” menüsünden ilgili eklentiyi açarak “Generate Report” butonuna tıklamak.
<h3>Lighthouse Ölçümleri Neden Önemli ?</h3>
<h4>📊 Kullanıcı Deneyimi (UX - User Experience)</h4>
Lighthouse yapılan ölçümler ile geliştiricilere kullanıcı deneyimi ile ilgili bilgiler sunar.
Örneğin; 👉 Gözü az gören kullanıcılar için font seçimi ve font renklerinin düzgün olması gerektiği,
👉 Kullanılan fotoğrafların ekran genişliğinden büyük olma-ması gerektiği ile ilgili,
👉 Sayfada daha az kaynak tüketimi olması için kullanılamayan css, js ve resim dosyalarının kullanıcıya gösterilme-mesi bu sayede internet tüketimini minimuma indirmek ile ilgili,
👉 Kullanıcı sayfaya ilk girdiğinde sayfada oynayan kısımlar olması ile ilgili
👉 SEO açısından önem arz eden kısımlar ile ilgili
bilgileri ve daha fazlasını rapor olarak geliştiriciye sunar.
Geliştirici ise artık elinde kullanıcı için önem arz eden bazı veriler bulunduğu için ilgili verileri kullanarak bunları yazılım geliştirme sürecine ekler ve böylece daha iyi bir kullanıcı deneyimi elde etmiş olur.
❓Gelelim Lighthouse’u yazılım geliştirme sürecimize nasıl entegre ettiğimiz sorusuna. Bu soruyu yanıtlamadan önce bilmemiz gereken bir kaç kavram var;
<h3>🤓 Pipeline Nedir ?</h3>
Pipeline, birden fazla ardışık talimatların gerçekleştirildiği yapılara denir.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rNsDJSN7K7xhkqfYiEAX1g.png"><figcaption>Pipeline Nedir ?</figcaption></figure><h3>🤏 Önceki Pipeline Sürecimiz Nasıldı ?</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1ljn7QM_oyMLVAmbBCGosw.png"><figcaption>Önceki Pipeline Sürecimiz</figcaption></figure>Çalışma yaptığımız projenin ana branchinden (master), bir geliştirme branchi türeterek geliştirmelerimizi yaptıktan sonra eğer bir problem yok ise geliştirme branchini test ortamına ilerletiyoruz. Test ortamında da bir problem yok ise geliştirme barnchi projenin ana branchi olan master branchine merge ediyoruz.
<h3>🤔 Yaşadığımız Sorunlar Nelerdi ?</h3>
Bu anlatmış olduğu süreçte otomatik çalışan bir otomasyon bulunmadığı için bazı sorunlar yaşıyorduk; 👉 Yapılan herhangi bir geliştirme sonrasında Lighthouse’da performans puanımız düşünce haberimiz olmuyordu.
👉 Her geliştirme branchi için manuel olarak Lighthouse raporu alıp, test yapmamız gerekiyordu.
👉 Ligthouse raporu sonucu her ölçüm yapıldığında farklı çıkabiliyor. Bu durum bizi yanıltıyordu.
Yaşadığımız bu sorunları çözmek için pipeline sürecimize yeni bir katman daha ekleyerek süreci otomatize ettik.
<h4>🥸 Yeni Pipeline Sürecimiz Nasıl ?</h4>
Kullandığımız pipeline sürecimize yeni bir katman daha ekledik.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2H2O1XBf4lmGhanLjWtJgg.jpeg"><figcaption>Yeni Pipeline Sürecimiz</figcaption></figure><h4>🤔 Pipeline’a Eklenen Yeni Lighthouse Katmanı Ne Yapıyor ?</h4>
👉 Birden fazla Lighthouse puanı alarak puan ortalamasını raporlama:
Bu sayede hem süreci otomatize etmiş hem de birden fazla Lighthouse puanı alındığında her ölçümde farklı sonuçlar çıkma sorununu çözmüş olduk.
👉 Geçmiş döneme ait olan Lighthouse raporlarının kaydedilmesi:
Bu sayede geçmiş dönemlerdeki puanlarımız ile şu anki puanlarımız arasındaki farkı raporlayarak geçmişte ne tip geliştirmeler yapmıştık? ve bu geliştirmeler sonucunda puanımız yükselmiş miydi? gibi sorulara önceden yanıt verip, daha iyi geliştirme yapabilmek için doğru araştırmalar yapıyoruz.
👉 Lighthouse puanımız düştüğünde bildirim / mail aracılığı ile haberdar oluyor ve yapılan geliştirmeye hemen müdahale ediyoruz.
<h3>Sonuç</h3>
Google’ın açık kaynak olarak geliştirmiş olduğu Lighthouse tool’u kullanıcı deneyimi açısından bize bazı veriler sunuyor. Biz de bu verileri kullandığımız yazılım geliştirme sürecine ekleyerek hem sürecimizi otomatize etmiş oluyoruz hem de kullanıcı deneyimi için önem arz eden geliştirmelerin dikkatimizden kaçmasının önüne geçmiş oluyoruz.
<h3>📬 Geri bildirim</h3>
Yazı ile ilgili tavsiye, öneri, eleştiri ve düzeltmeleri dikkate alıyorum. İletişime geçmek isterseniz bana <a href="https://www.linkedin.com/in/yasinatesim/">Linkedin</a> üzerinden ulaşabilirsiniz
Sevgiyle kalın, Yasin 🤗
<hr>
<a href="https://medium.com/hepsiburadatech/google-lighthouseu-yaz%C4%B1l%C4%B1m-geli%C5%9Ftirme-s%C3%BCrecimize-nas%C4%B1l-entegre-ettik-bec53f0b401d">Google Lighthouse’u Yazılım Geliştirme Sürecimize Nasıl Entegre Ettik ?</a> was originally published in <a href="https://medium.com/hepsiburadatech">hepsiburadatech</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Lighthouse, web sayfalarının kalitesini artırmak için kullanılan Google tarafından geliştirilmiş açık kaynak kodlu bir test aracıdır.

Google Lighthouse’u Yazılım Geliştirme Sürecimize Nasıl Entegre Ettik ?

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_0nqztZ1oZQEdNILB1UhnA.jpeg"><figcaption><a href="http://yasinates.com/">yasinates.com</a></figcaption></figure>Herkese merhaba 😀, kişisel websitem <a href="http://yasinates.com/">yasinates.com</a> çok yakında yeni arayüzü ile yayına girecek.
Web sitemdeki verileri DEV API, medium.com API ve Github API hizmetlerini kullanarak oluşturuyorum. 😎
Burada yazmış olduğum makalelerin İngilizce versiyonlarına <a href="https://dev.to/yasinatesim">dev.to</a> profilimden ulaşabilirsiniz.
Bir sonraki makalemde websitemi yayına alma sürecinden bahsedeceğim.
Yeni makalelerde görüşmek dileğiyle. 👋
dev.to Profilim: <a href="https://dev.to/yasinatesim">dev.to/yasinatesim</a>
Kişisel websitem: <a href="http://yasinates.com/">yasinates.com</a>

Herkese merhaba 😀, kişisel websitem yasinates.com çok yakında yeni arayüzü ile yayına girecek.

yasinates.com Çok Yakında Yayında

<h3>A’dan Z’ye TypeScript</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9eMyWLYOqU5aqBtVoFoi3Q.jpeg"><figcaption>A’dan Z’ye TypeScript</figcaption></figure><h3>TypeScript Nedir?</h3>
TypeScript, Microsoft tarafından geliştirilen açık kaynak bir programlama dilidir. JavaScript diline katı kurallar eklemeyi sağlar.
<h3>TypeScript Özellikleri</h3>
★ TypeScript = JavaScript’tir: TypeScript temel yapı taşlarını JavaScript’ten alır. Bu nedenle TypeScript’i öğrenmeden önce JavaScript yetkinliğinizin olması gerekir. TypeScript ile yaptığınız bütün geliştirmeleriniz, makalenin kurulum adımında da göreceğiniz üzere JavaScript’e dönüştürülür.
★ TypeScript, tüm JavaScript kütüphanelerini destekler: TypeScript ile derlenen JavaScript çıktısı, bütün javascript kütüphaneleri ile birlikte kullanılabilir.
★ TypeScript, taşınabilir ve portatiftir: TypeScript platform-serbest bir dildir ve farklı tarayıcılarda, cihazlarda, işletim sistemlerinde çalışabilir. javaScript’in çalıştığı herhangi bir ortamda çalışabilir. Hali hazırda javaScript ile geliştirilme yapılan bir projeye entegre edilebilir.
<h3>TypeScript Avantajları</h3>
★ TypeScript, nesne yönelimlidir.
★ TypeScript, statik veri tiplemesine sahiptir.
★ TypeScript, ES6 özelliklerini içeririnde barındırır.
★ TypeScript, modülerdir.
★ TypeScript’in söz dizimi Java, C# gibi yüksek seviyeli dillere benzerdir.
TypeScript kodları, tarayıcılar tarafından direkt olarak yorumlanamayacağı için kodların derlenmesi ve JavaScript çıktısının oluşturulması gerekiyor.
Eğer hemen TypeScript yazmaya başlamak isterseniz, makalenin kurulum adımını geçerek, <a href="https://codepen.io/">Codepen</a>’i veya TypeScript’in kendi dokümantasyon sayfasındaki <a href="https://www.typescriptlang.org/">Playground</a>’ı kullanabilirsiniz.
<h3>TypeScript Kurulumu</h3>
TypeScript’i kurabilmek için ilk başta bilgisayarımızda <a href="https://nodejs.org/en/">Node Js</a>’in kurulu olması gerekiyor. Ardından terminal üzerinden,
<pre>npm install -g typescript</pre>
komutunu çalıştıralım.
Şimdi örnek olarak, terminal üzerinden TypeScript yazmak istediğimiz dizine ilerleyerek, dizinimizde bir main.ts oluşturalım ve içerisine,
<pre>const num:number = 12 console.log(num)</pre>
bu kodları yazalım.
Ardından,
<pre>tsc main.ts -w</pre>
komutunu terminalde çalıştıralım.
Bu komut ile ana dizinimde bulunan main.ts dosyası JavaScript’e dönüştürülerek, ana dizine çıktılandı ve ana dizindeki main.js dosyasının içeriği,
<pre>var num = 12; console.log(num);</pre>
bu şekilde oldu.
<blockquote>
-w parametresi main.ts dosyasıdaki değişikliklerin anlık olarak izleneceği ve dosya içerisindeki kodların anlık olarak main.js dosyasına çıktılanacağı anlamına gelir. Zorunlu bir parametre değildir.</blockquote>
Bu sayede ilk TypeScript kodumuzu yazmış ve derlemiş olduk. 🙂
<h3>Yapılandırma (Configuration) ve Klasör Yapısı</h3>
Terminalde,
<pre>tsc --init</pre>
komutunu çalıştırdıktan sonra. dizinimizde tsconfig.json dosyası oluşacaktır. Dizinizimde oluşan config dosyasındaki parametreleri düzenleyerek örnek bir klasör yapısı oluşturalım.
<pre>{ "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "module": "commonjs", "target": "es6", }, "include": ["src"], "exclude": ["node_modules", "build", "dist","__test__"] }</pre>
Bu yapılandırma dosyasına göre, src dizini içerisinde yer alan .ts dosyalarımız dist dizinine çıktılanacaktır.
<h3>Statik Veri Tiplemesi (Static Type Checking) Nedir?</h3>
TypeScript ile değişkenler, fonksiyonlar, ve fonksiyon parametreleri için tip kontrolü (type checking) yapabilirsiniz.
<h4>Özellikleri</h4>
★ Tamamen isteğe bağlıdır.
★ Hataları bulmanıza ve önlemenize yardımcı olur.
★ Daha açıklayıcı ve okunaklı kod yazmanızı sağlar.
<h3>Tipler</h3>
★ String: Metinsel veri türleri için kullanılır.
<pre>let color: string = "blue"; color = 'red';</pre>
★ Number: Sayısal veri türleri için kullanılır. ES6 ile gelen ikili ve sekizli değerleri de destekler.
<pre>let decimal: number = 6; let float: number = 6.5; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744;</pre>
★ Boolean: true/false değerler için kullanılır.
<pre>let isLoading: boolean = true; let isDone: boolean = false;</pre>
★ Array: Dizi tanımlamaları için kullanılır. İki farklı yazım şekli vardır.
<pre>// 1. Yöntem let list: number[] = [1, 2, 3]; // 2. Yöntem let list: Array&lt;number&gt; = [1, 2, 3];</pre>
★ Any: Bilinmeyen değişken tipleri için kullanılır. Örneğin, dinamik değerler içeren değişkenler için kullanılabilir.
<pre>let notSure: any = 4; notSure = "Değer string olarak değişti :)"; notSure = false;</pre>
★ Void: Geriye herhangi bir değer return etmeyen fonksiyonlarda ve null veya undefined değer içeren değişkenlerde kullanılır.
<pre>// Fonksiyonlarda kullanımı function warnUser(): void { console.log("Bu fonksiyon geriye herhangi bir değer return edemez..."); } // Değişkenlerde kullanımı let unusable: void = undefined; unusable = null;</pre>
★ Null: null değer içeren değişkenlerde kullanılır.
<pre>let users: null = null;</pre>
★ Undefined: undefined değer içeren değişkenlerde kullanılır.
<pre>let users: undefined = undefined;</pre>
★ Tuple: Grup türleri bilinen ancak aynı olması gerekmeyen dizilerde kullanılır.
<pre>let x: [string, number]; x = ["merhaba", 10]; // Başarılı x = [10, "merhaba"]; // Başarısız</pre>
★ Enum: Obje içerisindeki key’lere veya key değerlerine daha kolay erişmek için kullanılır.
<pre>enum Color { Red, Green, Blue } let c: Color = Color.Green;</pre>
Key değerleri, varsayılan olarak 0'dan başlar ancak bunu değiştirmek mümkündür.
Tek bir key’in değerini veya birden fazla key’in değerini değiştirebiliriz. 👌💪
<pre>enum Color {Red = 1, Green, Blue} let c: Color = Color.Green; // veya enum Color {Red = 1, Green = 2, Blue = 4} let c: Color = Color.Green;</pre>
Key’lere erişmek için indis numarasını yazmamız yeterli. 😋
<pre>enum Color {Red = 1, Green, Blue} let colorName: string = Color[2]; console.log(colorName) // "Green"</pre>
<h3>Takma Adlar (Type Alias)</h3>
type sözcüğü ile tanımlanan ifadeler, tipleri içerisinde tutar ve bu tipleri birden fazla yerde kullanmamıza olanak tanır. 👌
<pre>type user = string | object let user: user = { name: 'Melis', age: 22 } let userTwo: user = 'Melis'</pre>
Yukarıdaki örnekte yer alan user alias’ı hem string tipindeki değişkenleri hem de object tipindeki değişkenler için tip kontrolünü sağlar.
<h3>Fonskiyonlar</h3>
★ Void: Geriye herhangi bir değer return etmeyen fonksiyonlarda kullanılır.
<pre>const user = (name: string, age: number): void =&gt; { console.log(`İsminiz: ${name} ve yaşınız: ${age}`); };</pre>
★ Geriye Değer Döndürebilen Fonksiyonlar:
<pre>let logDetails = (user: { name: string; age: number }): string =&gt; { return `İsminiz: ${user.name} ve Yaşınız: ${user.age}`; };</pre>
Yukarıdaki örnek, object tipinde parametre alan ve geriye string tipinde değer döndüren bir fonksiyon kullanım örneğidir.
★ Parametresi Zorunlu (Required) Olmayan Fonksiyonlar:
<pre>let logDetails = (user: { name: string; age?: number }, action?): string =&gt; { if (action === 'add') { return 'Kullanıcı eklendi'; } return `İsminiz: ${user.name} ve Yaşınız: ${user.age}`; }; const userString = logDetails({ name: 'Melis' }, 'add'); console.log(userString);</pre>
Yukarıdaki örnekte, action parametresi ve user objesi içinde gönderilen age anahtar kelimesi, zorunlu bir parametre değildir. Fonksiyon çalıştırıldığında bu parametreler gönderilmemiş durumsaysa bu kısım işleme alınmaz.
<h3>Sınıf Tabanlı Objeler (Class Based Object)</h3>
<h4>Sınıflar (Classes)</h4>
<pre>class User { name: string; age: number; constructor(a: string, b: number) { this.name = a; this.age = b; } get() { return `İsminiz: ${this.name} ve Yaşınız: ${this.age}`; } } const user = new User('Melis', 22); user.name = 'Yasin'; user.age = 21;</pre>
Yukarıdaki örnektede gördüğümüz üzere, sınıf içerisinde yapılan değişken tipi tanımlamaları ve method içerisine gönderilen parametrelerin tip tanımlamaları, değişkenler ve fonksiyonlardaki ile aynıdır.
<h4>Soyut Sınıflar (Abstract Classes)</h4>
Soyut sınıflar,
★ Kendi instance objesinden türeyemeyen sınıflardır.
★ Kendisini kullanan başka sınıfların instance’ları aracılığıyla içerisindeki özelliklere erişilmesini sağlayan sınıflardır.
<pre>abstract class User { name: string; age: number; constructor(a: string, b: number) { this.name = a; this.age = b; } get() { return `İsminiz: ${this.name} ve Yaşınız: ${this.age}`; } } const user = new User('Melis', 22); // Error: Cannot create an instance of an abstract class.</pre>
Eğer soyut bir sınıftan instance üretmeye çalışırsak, hata alırız.
<pre>abstract class User { name: string; age: number; constructor(a: string, b: number) { this.name = a; this.age = b; } get() { return `İsminiz: ${this.name} ve Yaşınız: ${this.age}`; } } class Person extends User { constructor(a,b) { super(a,b); } sayHello() { return `Merhaba ${this.name}` } } const person = new Person('Melis', 22); console.log(person.get()); console.log(person.sayHello());</pre>
Yukarıdaki örnekte, Person sınıfı instance’ından türetilen obje ile hem Person sınıfı içindeki parametrelere hem de User sınıfı içindeki parametrelere erişilebilir.
<h3>Interface</h3>
Dışarıdan erişilebilir durumda olan elemanları, objelere veya sınıflara bildiren yapılardır.
★ Birbirlerinden extend olabilirler.
★ Birbirlerinden implement olamazlar.
★ Objelere ve sınıflara atanabilirler.
<h4>Objelerde Kullanımı</h4>
<pre>interface IsPerson { name: string; age?: number; speak(a: string): void; } const user: IsPerson = { name: 'Melis', // age: 22, speak(text: string): void { console.log(text); }, }; console.log(user); user.speak('Merhaba!');</pre>
Yukarıdaki örnekte, age değeri obje içerisinde kullanımı zorunlu bir parametre olmadığı için soru işareti (?) ile birlikte kullanılmıştır.
<h4>Sınıflarda Kullanımı</h4>
<pre>interface IsPerson { name: string; age?: number; speak(a: string): void; } // implements ifadesi ile kullanılır class User implements IsPerson { name: string = 'Melis'; age: number = 22; speak(): string { return `Merhaba ben ${this.name} ve yaşım ${this.age}`; } } const user = new User(); console.log(user.speak());</pre>
Yukarıdaki örnekte, User sınıfı, IsPerson Interface’i içinde tanımlanmış olan özellikleri kullanmaktadır.
<h3>“public”, “private” ve “readonly”</h3>
★ public: Sınıf içerisinde kullanılan özellikleri dışarıdan erişilebilir ve değiştirilebilir hale getirir.
★ private: Sınıf içerisinde kullanılan özelliklerin dışarıdan erişilebilme ve değiştirilebilme durumunu devre dışı bırakır.
★ readonly: Sınıf veya Interface içerisinde kullanılan özelliklerin dışarıdan değiştirilebilme durumunu devre dışı bırakır.
Interface’lerde Kullanımı
<pre>interface IsPerson { readonly name: string; } const user: IsPerson = { name: 'Melis' }; user.name = 'Yasin'; // Error: Cannot assign to 'name' because it is a read-only property</pre>
Sınıflarda Kullanımı
<pre>class User { readonly name: string; } const user = new User(); user.name = 'Yasin'; // Error: Cannot assign to 'name' because it is a read-only property</pre>
Sınıf veya obje içerisindeki readonly değerleri değiştirmeye çalışırsak, hata alırız.
<h3>Sonuç</h3>
JavaScript diline katı kurallar eklememize yardımcı olan TypeScript, ilk başlarda göze biraz tuhaf gözükse de alıştıktan sonra geliştirme esnasında karşımıza çıkardığı hata mesajlarıyla hayatımızı kolaylaştırıyor.
Bu makalede kullandığım resimlere ve paylaşmış olduğum kaynak kodlara, makale içerisinde bırakmış olduğum resimlerin altındaki linkler üzerinden ulaşabilirsiniz.
Makaleyi hazırlarken kullandığım kaynaklar;
TypeScript Documentation: <a href="https://www.typescriptlang.org/">https://typescriptlang.org</a>
The Net Ninja: <a href="https://www.youtube.com/watch?v=2pZmKW9-I_k&amp;list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI">https://www.youtube.com/watch?v=2pZmKW9-I_k&amp;list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI</a>
Traversy Media: <a href="https://www.youtube.com/watch?v=rAy_3SIqT-E">https://www.youtube.com/watch?v=rAy_3SIqT-E</a>

TypeScript, Microsoft tarafından geliştirilen açık kaynak bir programlama dilidir. JavaScript diline katı kurallar eklemeyi sağlar.

A’dan Z’ye Typescript

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aUNIUIc3Q9QZs-i0Qkkf-Q.png"><figcaption>Bir HTML Preprocessors’u: Pug Js</figcaption></figure><h3>Pug Nedir?</h3>
Pug, HTML içerisinde Javascript yazarak, HTML kodlarını dinamik hale getirmenize olanak tanıyan bit HTML preprocessors’udur.
Pug kodları, tarayıcılar tarafından direkt olarak yorumlanamayacağı için kodların derlenmesi ve html çıktısının oluşturulması gerekiyor.
Eğer hemen pug yazmaya başlamak isterseniz, makalenin kurulum adımını geçerek, <a href="https://codepen.io/">Codepen</a>’i kullanabilirsiniz.
<h3>Pug Kurulumu</h3>
Pug’ı kurabilmek için ilk başta bilgisayarımızda <a href="https://nodejs.org/en/">Node Js</a>’in kurulu olması gerekiyor. Ardından terminal üzerinden,
<pre>npm i -g pug-cli</pre>
komutunu çalıştıralım.
Şimdi örnek olarak, terminal üzerinden pug yazmak istediğimiz dizine ilerleyerek, dizinimizde bir index.pug oluşturalım ve içerisine,
<a href="https://medium.com/media/9fdea4445679d6470c276323fce598ff/href">https://medium.com/media/9fdea4445679d6470c276323fce598ff/href</a>bu kodları yazalım.
Ardından,
<pre>pug -w . -o ./html -P</pre>
komutunu terminalde çalıştıralım.
Bu komut ile ana dizinimde bulunan pug dosyaları html’e dönüştürülerek, ana dizindeki html klasörüne çıktılandı ve klasör içindeki index.html dosyasının içeriği,
<a href="https://medium.com/media/06d4ab60e31e2875c34774cd09008be2/href">https://medium.com/media/06d4ab60e31e2875c34774cd09008be2/href</a>bu şekilde oldu.
<h3>Pug Kullanımı ve Sözdizimi</h3>
<h4>1- Açıklama Satırları</h4>
<h4>HTML çıktısında görünen açıklama satırları</h4>
HTML çıktısında görünen tekli açıklama satırı
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vAG0IfRgdv-VyWKpR2njUA.png"><figcaption>Tekli satırdan oluşan açıklama satırı</figcaption></figure>bu şekildedir.
HTML çıktısında görünen çoklu açıklama satırı ise,
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Q5zH5EOI8zSOtF9B0jUOuQ.png"><figcaption>Çoklu satırdan oluşan açıklama satırı</figcaption></figure>bu şekildedir.
Çoklu açıklamadan çıkmak için, açıklama satırının girintisinden çıkmak gerekir.
<h4>HTML çıktısında görünmeyen açıklama satırları</h4>
Bu açıklama satırları çıktılanan HTML çıktısında görünmez, sadece .pug dosyalarında görünür.
HTML çıktısında görünmeyen tekli açıklama satırı
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bhK75uLFSgUh_WPGqdz1HA.png"><figcaption>Tekli satırdan oluşan açıklama satırı</figcaption></figure>bu şekildedir.
HTML çıktısında görünmeyen çoklu açıklama satırı ise,
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VSJTh3pRKwIgciJU6dz4XQ.png"><figcaption>Çoklu satırdan oluşan açıklama satırı</figcaption></figure>bu şekildedir.
Çoklu açıklamadan çıkmak için, açıklama satırının girintisinden çıkmak gerekir.
<h4>2- Özellik (Attribute) Tanımlama</h4>
HTML etiketinin sadece text kısmını yazdıktan sonra parantez içerisine o etiket içerisine tanımlamak istediğimiz özelliği (attribute) yazıyoruz. Birden fazla attribute tanımı yaparken istersek, virgül(,) ile ayırabiliriz.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*A9MmADdUaK3lrKGOtHC8qQ.png"><figcaption>Atrribute Tanımlama</figcaption></figure><h4>2.1- Id ve Class Tanımlama</h4>
Id ve class’ları tanımlamak için iki ayrı yöntem bulunuyor. Bunlardan ilki; “Özellik (Attribute) Tanımlama” başlığında anlattığım gibi, kincisi ise, tıpkı css yazar gibi class tanımlarında nokta(.), id tanımlarında diyez(#) işaretinden sonra belirtmek istediğimiz isim. Örneğin;
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Br-plOlbHonY6c8s-i0jhQ.png"><figcaption>Id ve Class Tanımlama</figcaption></figure><h4>3- Değişken Tanımlama ve Kullanma</h4>
Pug’da değişken tanımlamak için, tıpkı Javascript dilindeki gibi const veya var ifadesinden sonra belirlemek istediğimiz değişkenin adını yazıyoruz. Örneğin;
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dD9jNfSCfAIA2sC8RkMz3A.png"><figcaption>Değişken Tanımlama</figcaption></figure>String bir ifadenin içinde değişken tanımlamak istersek,
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8DJEo1_psyTBE9Sb6-L04Q.png"><figcaption>String ifadenin içinde değişken kullanımı</figcaption></figure><h4>4- Döngüler</h4>
“for” döngüsü
Örnekteki HTML çıktısında, 3 kez “Liste Elemanı” metnine sahip li elemanları oluşacaktır.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*fIV438s-BS_2HFSa34dGMA.png"><figcaption>For Döngüsü</figcaption></figure>“each” döngüsü
Örnekteki HTML çıktısında, “users” değişkenine tanımlamış olduğumuz dizi elemanları li elemanları içerisine yazılacaktır.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1-Bl6DCZR9NKI5oXl9-rZw.png"><figcaption>Each Döngüsü</figcaption></figure><h4>5- Koşullu İfadeler</h4>
“if” koşulu
Pug içerisinde if koşulunun kullanımı, Javascript diline benzerdir.
Örneğin;
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*K0ru53Y8o3ujmP74DLqQuA.png"><figcaption>If Koşulu</figcaption></figure>“case” koşulu
Case koşulu, Javascript dilindeki “switch” kullanımına benzerdir. Aradaki farkı bir örnekle inceleyelim.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WF43mh9IB_P26BN0w8GoSQ.png"><figcaption>Case koşulu</figcaption></figure>Örnekte de görüldüğü gibi, Javascript dilinde kullandığımız switch sözcüğü, case sözcüğü ile Pug’ın içerinde yer alıyor. Yine Javascript dilinde kullandığımız switch içerisindeki koşulu sağlayan case sözcüğü Pug içerisinde when sözcüğü ile yer alıyor.
<blockquote>Bu kısıma kadar görmüş olduğumuz kullanımların tamamında istersek, Pug’ın söz dizimine bağlı kalmadan Javascript yazarak da işlemlerimizi gerçekleştirebiliriz. Pug, Javascript dili içerisindeki çoğu ifadeyi içerisinde barındırır. Bu yönüyle geliştiricilere, kolaylık sağlar.</blockquote>
Makalenin bu kısmından sonraki kısımlarda göreceğimiz ifadeler, Pug’a özgü ifadelerdir. Bu özellikleri diğer HTML preprocessors’larında da görebiliriz.
<h4>6- Kalıtım (Extends) ve Include</h4>
Örnek bir senaryo olarak, projemizde header, footer ve sidebar adında üç sabit olanımız olsun. Sayfanın içeriği ise dinamik olarak değişken bir alan olsun.
layout.pug adında bir dosya oluşturalım ve içerisine;
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aIuG9H9SLfj39r0AaEFolA.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/01-bir-html-preprocessors-u-pug-js/kalitim-extends-ve-include/layout.pug">layout.pug</a></figcaption></figure>bu kodları yazalım.
include ile belirttiğimiz kısımlar layout dosyası ile aynı dizinde bulunan sabit header.pug, sidebar.pug ve footer.pug dosyalarıdır. block ile belirttiğimiz kısım ise diğer dosyalar tarafından değiştirilmesine (extend edilmesine) izin verdiğimiz kısımdır. Yani, index.pug adında bir dosya oluşturup, içerisine bu dosyadan extend edildiğini belirtirsek, içeriğin dinamik olarak değişmesini sağlayabiliriz.Örneğin;
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XGATpS0ejimp3IR2S1QcBw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/01-bir-html-preprocessors-u-pug-js/kalitim-extends-ve-include/index.pug">index.pug</a></figcaption></figure>include ve extends ifadelerini kullanırken, dosya uzantısı belirtmek zorunlu değildir. Yapılan örneklerde dosya uzantısı belirtilmediğini göreceksiniz.
<h4>7- Mixins</h4>
Sürekli olarak kullandığımız kodları bir mixin haline getirerek, bir yerde değişiklik olunca heryerde değişmesini sağlayabilir ve component bazlı geliştirme yapabiliriz.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VZG0uW6L6cmjJvt0gU4xAg.png"><figcaption>Mixins</figcaption></figure><h3>Sonuç</h3>
Javascript diline kardeş olan Pug hakkındaki düşüncülerim, okunması zor olan HTML kodlarını basite indirgiyor ve içerisinde, Javascript dili ile geliştirme yapmamıza olanak sağladığı için, işimizi kolaylaştırıyor.
Bu makalede kullandığım resimlere ve paylaşmış olduğum bazı kaynak kodlara, makale içerisinde bırakmış olduğum resimlerin altındaki linkler üzerinden ulaşabilirsiniz.
Bu linklerin tamamını görüntülemek için: <a href="https://github.com/yasinatesim/medium-stories/blob/master/01-bir-html-preprocessors-u-pug-js/readme.md">https://github.com/yasinatesim/medium-stories/blob/master/01-bir-html-preprocessors-u-pug-js/</a>
linkini takip edebilirsiniz.
Makaleyi hazırlarken kullandığım kaynaklar;
Pug Documentation: <a href="https://pugjs.org/api/getting-started.html">https://pugjs.org/api/getting-started.html</a>
A Beginner’s Guide to Pug: <a href="https://www.sitepoint.com/a-beginners-guide-to-pug/">https://www.sitepoint.com/a-beginners-guide-to-pug/</a>

Pug, HTML içerisinde Javascript yazarak, HTML kodlarını dinamik hale getirmenize olanak tanıyan bit HTML preprocessors’udur.

Bir HTML Preprocessors’u: Pug Js

Hello everyone 😀, this is my first post. 

I will share the English of my articles on <a href="https://medium.com/@yasinatesim/">medium.com</a> here.

I create the data on my website using the DEV API, medium.com API, and Github API services 😎

I will write my next article is about the publishing process of my website.

Hope to see you in new articles. 👋 👋

My medium profile: <a href="https://medium.com/@yasinatesim/">medium.com/@yasinatesim/</a>

My personal website: <a href="http://yasinates.com/">yasinates.com</a>

Hello everyone 😀, this is my first post.   I will share the English of my articles on medium.com here...

Blog