Bu makalede aşağıdaki görselde de görebileceğiniz kartlardan yapacağız. Kartları sadece HTML5 ve CSS3 kullanarak kodlayacağız.

Böylece #3 numaralı istek makale kapanmış olacak :)

Not : Issues sayfasında varolan makale isteklerini görebileceğinizi, hatta yeni makale isteğinde bulunabileceğinizi biliyor muydunuz?

Öncelikle projeyi kendi bilgisayarımızda oluşturabilmek için nodejs.org adresinden en güncel NodeJs kurulumunu indirelim ve bilgisayarımıza kuralım.

Kurulum bittikten sonra hemen projemiz için yeni bir dizin oluşturalım, Command Prompt penceresi açalım ve aşağıdaki komutu çalıştıralım;

Eğer bilgisayarınıza daha önce http-server npm paketini kurmadıysanız öncelikle aşağıdaki komutu çalıştırarak http-server paketini kurmanız gerekiyor;

Proje için oluşturduğumuz dizinde bir index.html bir de index.css dosyası oluşturalım, index.html dosyası içerisine aşağıdaki html kodlarını yazalım;

Card nesnemizin parçaları;

Şimdi index.css dosyasını açarak stil vermeye başlayabiliriz.

İlk olarak body elementinin font‘unu Segoe UI yapalım ve http://localhost:8080/ adresini açalım ve aşağıdaki gibi bir sayfa gördüğümüzden emin olalım;

Şimdi index.css dosyasına aşağıdaki kodu ekleyelim;

Eklediğimiz .card css class‘ı sayesinde bütün card nesnesini genişliği 150px olan bir çerçeve içerisine almış olduk;

Sırada başlığı düzeltmek var, index.css dosyasını açalım ve aşağıdaki kodu ekleyelim;

Böylece artık sayfamız aşağıdaki şekilde gözükmeye başlamalı;

Sırada, card nesnesinin asıl parçası var, hemen index.css dosyasını açalım ve aşağıdaki kodları ekleyelim;

Böylece artık sayfamız aşağıdaki şekilde gözükmeye başlamalı;

Son olarak, icon ve açıklama alanının stilini de ekleyelim;

Böylece artık sayfamız aşağıdaki şekilde gözükmeye başlamalı;

Bütün index.css dosyası aşağıdaki gibi olmalı;

Tüm Material Icon listesini Material Icons sayfasında bulabilirsiniz. Değişik renkler ve değişik icon‘lar ile sizler de istediğiniz gibi bir card tasarımı yapabilirsiniz.

Not : Bu makalenin orjinalini Build a Minimalist HTML Card in just 53 lines of code (with Flexbox) adresinden okuyabilirsiniz

Bu makaleyi okumadan önce Angular etiketindeki diğer makalelerimi okumanızı tavsiye ederim.

Geçtiğimiz hafta Yazılım Mimarı olarak, çeşitli projelerine yardımcı olduğum bir müşteride yeni başladığımız Angular projesinde global bir event mekanizması kurgulamamız gerekti.

Bu yapacağımız event mekanizması sayesinde, uygulamanın herhangi bir nesnesinden fırlatacağımız bir bilgiyi, tamamen başka bir nesne (hatta nesneler) alıp, kendi istediği gibi işleyebilecek.

Örneğin, ürünler dizisi içerisinde bir üründe yeralan Sepete Ekle butonuna basıldığında, eğer ekranda sepetin tamamı gözüküyorsa yeni bir satır oluşsun, sepetin tamamı gözükmüyorsa oluşmasın, login olduysak ödeme sayfasına gidelim, olmadıysak Giriş Yap uyarısı çıksın, gibi..

Hemen yeni bir Angular projesi oluşturalım;

Projeye yeni bir Service eklemek için aşağıdaki komutu çalıştıralım;

Bu sayede, projenin çeşitli dosyalarında kullanabileceğimiz, Injectable() bir servisimiz oluştu.

Yeni oluşturduğumuz servisi açalım ve aşağıdaki kodları içerecek şekilde güncelleyelim;

Bu servisin Injectable() olmasını sağladık, fakat hala instance‘i alınıp kullanılabilir. constructor() method içerisinde kurguladığımız mantık sayesinde bu servisin yeni instance‘inin alınmasının önüne geçmiş olduk.

GetInstance() methodu ile de, bir çeşit Singleton Pattern implemente etmiş olduk.

broadcast() methodu, parametre ile aldığı bilgiyi, Global Messaging servisine kendini bağlamış (attached) olan her nesneye iletir.

messaging$ değişkenini ise, başka nesnelerin Global Messaging servisine kendilerini bağlayabilmeleri için ekledik.

Örnek kullanımı, app.component.html dosyasını açalım ve aşağıdaki 2 satırı ekleyelim;

Özellikle ikinci satırdaki kullanıma dikkat edelim. message değişkeni olduğu hali ile değil, json karşılığı ile ekrana gelecek. Bir değişkeni olduğu hali ile değil, bir takım değişikliklerin uygulandığı hali ile kullanmak için Angular PipeTransform sınıfını kullanıyoruz.

Son olarak, app.component.ts dosyasını açalım ve aşağıdaki şekilde güncelleyelim;

AppComponent class‘ı OnInit interface‘ini implemente ediyor ve ngOnInit() methodu içerisinde GlobalMessagingService class‘ının GetInstance() methodu aracılığı ile instance‘ına ulaşıyor ve messaging$ değişkeni aracılığı ile global event‘e subscribe oluyor. Tek yaptığımız ise, event aracılığı ile gelen değeri message değişkenine atamak.

sendMessage() methodunda ise GlobalMessagingService class‘ının GetInstance() methodu aracılığı ile instance‘ına ulaşıyor ve broadcast() methodunu istediğimiz bir parametre ile çağırıyoruz.

Yukarıdaki örnekte { title: 'Laptop', price: 1200, command: 'SepeteEkle', date: new Date() } parametresi ile çağırdığımız için ekrandaki butona her bastığımızda messaging$ değişkeni üzerinden kendini bağlamış her nesne, sepete 1200 değerinde bir Laptop eklendiğini öğrenecek.

Yazılım Mimarı olarak, çeşitli projelerine yardımcı olduğum bir müşteride UWP uygulamalarının birinde nesneleri çeşitli sebeplerden dolayı ölçeklendirmemiz gerekti.

Ölçeklendirme (Scaling) işini yazılımsal yapmamız gerekiyordu.

İnternette yaptığım araştırmalar sonucunda en verimli yolun XAML Binding‘ler ile olduğunu buldum.

Böylece ölçeklendirme işini ekran kartının işlemcisine (GPU) bırakabiliyoruz. Bilgisayarın işlemcisi (CPU) ise bizim asıl yapmasını istediğimiz işler için müsait kalıyor, örneğin, veritabanı işlemleri, web servis işlemleri, vs.

Hemen yeni bir Blank App (Universal Windows) projesi oluşturalım;

MainPage.xaml dosyasını açalım ve içerisine aşağıdaki kodları yazalım;

Bu ekranda dikkat etmemiz gereken birkaç nokta var,

• Slider nesnesi ile, ekrandaki Grid nesnesini hangi oranda ölçeklendireceğimizi belirliyoruz
• Grid nesnesinin RenderTransform özelliği ve ScaleTransform sınıflarını kullanıyoruz
• Grid nesnesinin ScaleX ve ScaleY özelliklerini Slider nesnesinin Value özelliğine bağlıyoruz
• Grid içerisine koyduğumuz tüm nesneler, Grid ile birlikte otomatik olarak ölçeklendirilecekler

Uygulamayı çalıştırıp kullandığımızda aşağıdaki gibi bir sonuç elde etmemiz lazım;

06 Mayıs 2017 tarihinde DevNot Developer Summit Ankara 2017 etkinliği gerçekleştirildi.

Ben de Yük Altında Çalışan Web Uygulamaları Geliştirme konulu oturumda konuşmacı olarak yer aldım.

Etkinlikte gerçekleştirdim konuşmayı aşağıdaki videodan izleyebilirsiniz;

Etkinlikte kullandığım sunumu da aşağıda bulabilirsiniz;

Etkinliği gerçekleştirmemizi sağlayan sevgili arkadaşım Uğur Umutluoğlu‘na ve etkinliğe katılan tüm arkadaşlara teşekkür ederim.

Geçtiğimiz yıl, geliştirilmesine yardımcı olduğum bir e-ticaret sitesi projesinde bir gün aşağıdaki gibi kodlar yazıyordum;

Eminim benim gibi sizler de zaman zaman if-else blocklarını veya switch-case blocklarını yukarıdaki gibi kullanıyorsunuzdur.

Yukarıdaki kodda yanlış bir durum gözükmese de, ya biri birgün yeni bir arama methodu ekleyecek olsa? Hatta biri bir arama methodunu silmek istese?

İşte bu tip durumlarla karşılaşılabilir, bu durumu nasıl ortadan kaldırabilirim diye düşünerek, küçük egzersizler yapmaya başladım.

Sonunda aklıma şöyle bir fikir geldi;

• Dictionary<TKey, TValue> sınıfından bir değişken tanımlasam ve Key için SearchArea, Value için Action tiplerini belirlesem
• Bu değişkene istediğim SearchArea için istediğim Action'ları eklesem
• Bir arama yapılacağı zaman SearchArea'a uygun Action'ları getirsem ve sırasıyla onları çağırsam?

Böylece istediğim SearchArea için bir veya daha fazla Action tanımlayabilir, onları çağırabilirim.

Nasıl fikir ama? :) (O zaman farkına varmasam da Delegate Dictionary isminde bir pattern zaten varmış)

Yukarıdaki adımların koda dökülmüş hali;

Sizce de daha güzel gözükmüyor mu? :)