Web uygulamalarda temel ihtiyaçlardan biri, bir işlem gerçekleşirken veya gerçekleştikten sonra kullanıcının haberdar edilmesidir. Toast mesajlar burada yardımımıza yetişir. Bunu hakkıyla yapan yığınla NPM paket var ancak bazen yeterli olmayabiliyorlar, araya girip bir şeyleri değiştirmemiz gerekiyor. Peki kendimiz yazsak nasıl yazardık? — Toast mesaj temelde kolayca call edilebilen bir function olmalıdır.

Web uygulama geliştirirken, kullanıcının sayfayı yenilemesini beklemeksizin yeni bilgilerden haberdar olmasını gerektiren senaryolarla karşılaşırız. Bu durumlarda başvurduğumuz yöntemlerin başında WebSocket gelir. — WebSocket’in oluşturduğu iletişim kanalları sayesinde, kullanıcının herhangi bir istekte bulunmasını beklemeksizin, ekranına yeni bilgiyi gönderebiliriz. Yazışma (WhatsApp, Messenger vb.) uygulamalarının tamamı bu standart ile çalışır.

Web uygulamalarına eklenen renk değiştirme opsiyonu son zamanlarda kullanıcı deneyimi (UX) standartlarının bir parçası haline geldi. Eğer projenizde Tailwind CSS Framework’ü kullanıyorsanız bunu ayarlamak çok kolay. — Bir VueJS projesine Tailwind CSS’in nasıl install edileceğini önceki yazılarımda açıklamıştım. Tailwind CSS ve GitHub Copilot’u birlikte kullanarak kendi UI standartlarınızı yapay zekadan yardım alarak nasıl kısa sürede tanımlayacağınızı da yine başka bir yazımda açıklamıştım.

VueJS’te componentler arasında iletişim kurmanın onlarca yolu var. v-model bu yollardan oldukça kullanışlı olanı. HTML inputlardaki bilgileri reaktif bir şekilde yakalamak için v-model kullanarak ‘two way binding’ kurarız. Peki HTML input dışında kendi oluşturduğumuz componentle de v-model ile iletişim kurabilir miyiz, evet. —

“Amerika’yı yeniden keşfetmenin alemi yok, hazır bir paket varsa kullan konuyu kapat” ezberinin haklılık yanı elbette var ancak kullandığınız paket sayısı arttıkça projenin sağlığı zarar görebiliyor. Bu nedenle gelişen teknolojiyi takip edip, paket kullanmadan yapılabilecek işlemleri kendimiz yapmalıyız. — GitHub Repo: https://github.com/gayret/vue-drag-and-drop Canlı demo: https://vue-drag-and-drop.netlify.app

Teknolojinin durdurulamaz gelişimine ayak uyduran developer’lar development sürecini hem kısaltıp hem de daha keyifli hale getirebilir. — GitHub Copilot ve Tailwind CSS birlikte verimli bir şekilde kullanıldığında frontend developer’ın angarya işleri otomatikleşiyor.

Yazılım geliştirmede kararlılık (stabilite) ve hız çok önemlidir. Bundan beş yıl önce Frontend geliştirmek zaman alan bir deneyimdi. Sadece development ortamı ve hot reload imkanı oluştururken bile GulpJS gibi araçlara mahkumduk, optimizasyonu zahmetliydi ve tutarsızlıklarla karşılaşırdık. Gelişen teknolojiyle (ve framework’lerle ) artık hot reload; üzerinde hiçbir kontrolümüz olmayan, otomatikman kendini gerçekleştiren default bir özellik.

Kod okunurluğu son derece önemli, projeye sonradan dahil olacak developar’ların hızlıca sürece adapte olabilmesi için kodların bir bakışta anlaşılır yazılması gerekiyor. Özellikle de son zamanlarda ülkemizdeki developar’ların çok sık firma değişikliği yapması sonucu kod okunurluğunun önemini daha çok hissetmeye başladık. Yazılımın her alanında olduğu gibi CSS’te de bir şeyi yapmanın…

Projenizdeki bir bölümü, birçok sayfada kullanmanız gerekiyor ama bazı sayfalarda içeriğinin yeniden şekillendirilmesi gerekiyorsa slot element yardıma yetişiyor. Hadi başlayalım Bu senaryoya uygun bir örnek olarak Layout’u değerlendirebiliriz. Layout adında bir componentimiz olsun ve projemizdeki (Login hariç) tüm sayfalarımızı sarmalasın. Layout’umuz dört farklı bölümden oluşsun. Header, Aside, Main, Footer. Böyle bir Layout’da…