Hi Everyone 👋

In this article I’m gonna try to explain what is Webpack, why we need this tool and what is difference than other build automation tools.

Webpack is a Module Bundler, Specialized Task Runner and Compiler.

What does it meaning of three words;

1-Module Bundler: You can work with so many files(js,css, etc…) but if you take a build it, combine the one bundle.js file.

2-Specialized Task Runner: Automates for you the work you need or constantly do in every improvement.(Auto reload, Auto Compile etc...)


Merhabalar,

Uzun bir aradan sonra sizlere son zamanlarda sıklıkla kullandığım matematiksel küme işlemlerini, JavaScript’de nasıl yaparız ve projelerde ne işimize yarar sorusunun cevabını vermeye çalışacağım. Küçük kod satırları ve görsellerle A kesişim B, A kümesinin B’den farkı, A birleşim B kümelerinin çıktısını veren bir yazı hazırladım.


Lazy Loading Nedir?

Herhangi bir modulü, sadece ihtiyaç halinde temin etme durumu tam olarak Lazy Loading’in yaptığı işi özetliyor. Teknik olarak açıklayacak olursak,

İsteğe bağlı olarak modüllerin yüklenmesi işlemidir.(Js, CSS, video, doküman, resim vb.)

Bunu örnekle açıklayalım.

Diyelim ki 100 sayfalık teknik bir doküman okuyorsunuz. O dokümanda size yalnızca son 15 sayfadaki bilgi lazım. Fakat siz bütün dokümanının işinize yaramayacağını, içindekiler sayfasını okuduğunuz halde sayfaları tek tek okuyorsunuz. Bu size iki şey kaybettirir.

1. Vakit
2. Performans

Gereğinden fazla belki de işinize yaramayacak alanları okuduğunuz için vaktinizi, ihtiyacınızdan fazla bilgiyi okuduğunuzda da performansınızı kaybetmiş olacaksınız.

İşte Lazy Loading sizin yalnızca…


Toastr Nedir? Web Uygulamalarında Ne İçin Kullanılır?

Toastr kullanıcıya anlamlı bir mesaj vererek yaptığı işlemdeki durumu anlamasını sağlayan mesajlardır.

Örneğin;
Bir kullanıcının; kullanıcı adı veya şifresini yanlış girdiğinde: Error mesajı olarak bir Toastr baloncuğu gösterirsiniz. İşlem hatalı değilse veya bilgilendirici bir işlem gerektiğinde Info baloncuğu göstermek isteyebilirsiniz.

Bu yazıda; Toastr kütüphanesini, Angular’da nasıl kullanırız bunlardan bahsetmeye çalışacağım.

ng new ngx-toastr-example

Projemizi oluşturduktan sonra istediğimiz editörde açalım ve hızlıca işlemlerimize başlayalım. Ben IDE olarak Visual Studio Code kullanıyorum.

2- Projede tasarımla çok uğraşmamak adına bootstrap kütüphanesini ve toastr paketimizi ekleyelim.

1-) npm install bootstrap
2-) npm install ngx-toastr

Bootstrap’ı ve toastr…

Okan Toper

Frontend Developer @sovoscompliance

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store