DEV Community: Poyraz Avsever

Tailwind CSS ile Tasarım Sürecini Nasıl Hızlandırabilirsiniz?

Poyraz Avsever — Tue, 10 Sep 2024 16:17:05 +0000

Tailwind CSS, son dönemde front-end geliştiricilerin gözdesi haline geldi. Klasik CSS yazımına göre daha oldukça hızlı ve esnek bir yapı sunması, özellikle hızlı prototipleme ve özelleştirilmiş tasarımlar oluşturma süreçlerinde büyük avantaj sağlıyor. Bu yazıda, Tailwind CSS ile nasıl daha hızlı ve verimli bir tasarım süreci yaratabileceğinizi adım adım ele alacağız. Her şeyden önce gelin “tailwind css nedir ve neden kullanmalıyız?” diye bir soralım.

Tailwind CSS Nedir ve Neden Kullanmalıyız?

Tailwind CSS, klasik CSS yazımında alışık olduğumuz “class tanımla, sonra stilleri yaz” yöntemine alternatif olarak ortaya çıkmış, utility-first (yardımcı sınıf temelli) bir CSS framework’ü. Yani, önceden tanımlanmış küçük stil sınıflarını doğrudan HTML elementlerine ekleyerek stil verebiliyorsun. Örneğin, bir buton için bg-blue-500, text-white, p-4 gibi sınıfları ekleyerek, doğrudan istediğin görünüme hızlıca ulaşabilirsin.

Neden Tailwind Kullanmalıyız?

1- Hızlı ve Kolay
CSS de her yeni stil için bir class yazman gerekiyor. Örneğin, bir butonun arka plan rengi, yazı rengi ve padding gibi özelliklerini tanımlamak için stil dosyana şöyle bir kod yazıyorsun:,



.btn {
  background-color: #3490dc;
  color: #fff;
  padding: 1rem;
}

Tailwind de ise aynı butonu şu şekilde oluşturabilirsin:

<button class="bg-blue-500 text-white p-4">Click Me</button>

Yani, her şey HTML içerisinde çok daha hızlı bir şekilde yönetilebiliyor. Bu da stili hızlıca oluşturmanı ve üzerinde anında değişiklik yapmanı sağlıyor. Üstelik terimler daha basite indirgendiği için kafa karışıklığından da kurtuluyoruz.

2- CSS Dosyası Karmasından Kurtul

CSS’de büyük projelerde zamanla stil dosyaları karmaşık hale gelebilir. Sınıf isimlerini organize etmek ve tutarlı bir sistem oturtmak zor olabilir. Tailwind ile ise her stil bileşeni için yeniden sınıf yazmak yerine, utility sınıflarını kullanarak kod tekrarını ve karmaşayı azaltıyorsun. Yani, tek bir dosya içinde “hangi sınıf hangi stili uyguluyor” derdine girmiyorsun.

3- Responsive Tasarım Kolaylığı

CSS de her ekran boyutu için ayrı media query yazman gerekiyor fakat Tailwind’de bu iş çok daha kolay. Örneğin:



<div class="text-sm md:text-lg lg:text-xl">
  Responsive Metin
</div>

Bu kod, küçük ekranlarda text-sm, orta ekranlarda text-lg, büyük ekranlarda text-xl sınıflarını uygular. Media query yazmaya gerek yok. Bana kalırsa Tailwind’in sağladığı en büyük avantajlardan birisi de bu.

Tailwind CSS’i Daha Verimli Kullanmanın Yolları

Tailwind CSS’in gücünü tam anlamıyla kullanmak için bazı ipuçları işini hızlandırabilir ve kodunu daha temiz hale getirebilir:

1. Config Dosyasını Özelleştir
Tailwind’in sunduğu yapı taşlarını kendi projen için optimize edebilirsin. tailwind.config.js dosyasını kullanarak renk paletlerini, fontları ve spacing değerlerini özelleştirmen, projende tutarlı bir tasarım sistemi oluşturmanı sağlar. Örneğin:



module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#1e3a8a',
      },
      spacing: {
        '128': '32rem',
      },
    },
  },
}

2. apply Direktifini Kullan

Aynı stilleri tekrar tekrar yazmak yerine Tailwind’in apply direktifini kullanarak ortak stilleri bir araya getiren sınıflar oluşturabilirsin. Böylece hem kodun daha temiz olur hem de yönetimi kolaylaşır. Örneği bir butonu projende onlarca defa kullanacaksan @applyile tanımlayabilirsin.



.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

3. PurgeCSS ile Dosya Boyutunu Küçült

Tailwind projelerde kullanılmayan stiller de oluşturur. Bu yüzden dosya boyutunu optimize etmek için üretim aşamasında purge özelliğini kullanarak kullanılmayan stilleri kaldırabilirsin. Bu, özellikle büyük projelerde performansı artırır.



module.exports = {
  purge: ['./src/**/*.html', './src/**/*.js']
}

4. Tailwind JIT Modunu Etkinleştir

Tailwind’in Just-In-Time (JIT) modunu kullanarak, yazdığın sınıfların anında oluşturulmasını ve CSS dosyasının minimum seviyede tutulmasını sağlayabilirsin. Bu mod, Tailwind’in en güncel ve dinamik şekilde çalışmasını sağlar.



module.exports = {
  mode: 'jit'
}

5. Responsive Tasarımı Kolaylaştır

Tailwind ile responsive tasarımlar oluşturmak çok basittir. Sınıfların başına sm:, md:, lg: gibi prefix'ler ekleyerek farklı ekran boyutlarına göre stilleri kolayca tanımlayabilirsin. Bu, mobil uyumluluğu hızla sağlamanın en etkili yollarından biri. Web sitesini tasarlamaya başlarken mobil versiyonlardan başlarsan daha rahat edersin. Küçükten büyüğe



<div class="text-sm md:text-lg lg:text-xl">
  Responsive Metin
</div>

6. Tailwind Eklentilerini Keşfet

Tailwind’in ekosisteminde birçok faydalı eklenti mevcut. Özellikle form bileşenleri, tipografi veya animasyonlar için Tailwind eklentileri işini daha da kolaylaştırabilir. Örneğin, @tailwindcss/formseklentisi ile form stillerini güzelleştirebilirsin. @tailwind-scrollbareklentisi ile scrollbar’larını özelleştirebilirsin. İnternetten detaylı bir aramayla işine yarayanları bulabilir, projelerine kolay bir şekilde entegre edebilirsin.

Bu ipuçlarıyla, Tailwind CSS’i daha verimli kullanabilir ve projelerinde daha temiz, düzenli bir kod yapısına ulaşabilirsin! Kendi projelerinde Tailwind’i kullanarak, hem zaman kazanmaya başlayacak hem de bu alan da daha özgür olacaksın. Bu yazıda sunduğum ipuçları ile Tailwind CSS’i daha verimli kullanabilir, projelerinde fark yaratabilirsin. Hemen dene, iş akışını nasıl dönüştürdüğünü gör!

Başarılar ve keyifli kodlamalar!

Kaynaklar

Tailwind CSS Resmi Dokümantasyonu
Tailwind’in utility-first yapısına dair tüm detaylar ve kullanım örneklerini burada bulabilirsin:

Tailwind CSS Konfigürasyon Rehberi
Tailwind’in tailwind.config.js dosyasını nasıl özelleştirebileceğin hakkında daha fazla bilgi için:

PurgeCSS ile Optimizasyon
Tailwind ile kullanılan PurgeCSS hakkında detaylı rehber için:

Tailwind CSS Just-In-Time (JIT) Modu
Tailwind JIT modunun nasıl etkinleştirileceği ve faydaları hakkında daha fazla bilgi:

Tailwind CSS Eklentileri
Forms, Typography gibi eklentilerin nasıl kullanılacağına dair rehberler:

Bu kaynaklar, Tailwind CSS’i daha derinlemesine öğrenmek ve projelerinde en iyi şekilde kullanmak için faydalı olacaktır.

Kullanıcı Araştırması ve Personas Oluşturma: Tasarımın Gizli Kahramanları

Poyraz Avsever — Mon, 02 Sep 2024 12:09:03 +0000

Tasarım dünyasında, ürünlerimizin kullanıcılarımızın ihtiyaçlarını en iyi şekilde karşılamasını istemek, hepimizin ortak amacı. Ancak bu hedefe ulaşmak için bazen en temel adımları gözden kaçırabiliyoruz. Bu adımlardan biri de kullanıcı araştırması ve personas oluşturma. Gelin, bu iki önemli adımı nasıl gerçekleştirebileceğimizi ve tasarım sürecindeki kritik rollerini birlikte keşfedelim.

Kullanıcı Araştırması: “Yolu Aydınlatan Işık”

Kullanıcı araştırması, tasarım sürecinin temel taşlarından biridir. Ancak ne yazık ki, bu adım sıklıkla atlanabiliyor veya yeterince önemsenmiyor. Peki, neden bu kadar önemli?

Kullanıcı araştırması, gerçek kullanıcıların ihtiyaçlarını, beklentilerini ve zorluklarını anlamamıza yardımcı olur. Yani, tasarımımızın doğru yolda olup olmadığını bilmek için bir tür GPS cihazı gibi düşünün. Anketler, mülakatlar, gözlem ve kullanım testleri gibi yöntemlerle toplanan veriler, tasarım kararlarımızı şekillendirir. Bu veriler olmadan, tasarım sürecimiz kısa bir yolculuk olurdu; hem kullanıcı hem de tasarımcı için tatmin edici olmayan bir yolculuk.

Personas Oluşturma: Kullanıcılarımızı Tanıyalım

Kullanıcı araştırmasından elde ettiğimiz verileri, personas adı verilen karakterlere dönüştürürüz. Persona, gerçek kullanıcıların temsilcisi olan hayali bir karakterdir. Bu karakterler, tasarım sürecinde karar alırken göz önünde bulundurmamız gereken “ideal” kullanıcılarımızı temsil eder.

Bir persona oluştururken, demografik bilgilerden tutun, kullanıcıların hedeflerine, ihtiyaçlarına ve acı noktalarına kadar birçok ayrıntıyı dikkate alırız. Örneğin, “Mert”, 28 yaşında bir yazılım geliştirici olabilir. Mert, verimliliği artırmak isteyen bir teknoloji meraklısıdır ve kullanıcı dostu ara yüzler arar. Mert’in bu özellikleri, tasarım sürecinde ihtiyaçlarını karşılamak için nelere dikkat etmemiz gerektiğini anlamamıza yardımcı olur.

Personas’ın Gücü: Empati ve Odaklanma

Personalar oluşturmanın bir başka avantajı da, ekibinizin kullanıcılarla daha empatik bir bağ kurmasına yardımcı olmasıdır. Persona karakterlerinizle sohbet ederken, onların ihtiyaçlarını ve beklentilerini anlamak daha kolay hale gelir. Bu empati, tasarım kararlarınızda daha bilinçli ve kullanıcı merkezli bir yaklaşım benimsemenizi sağlar.

Ayrıca personas oluşturmak, ekip içindeki tüm paydaşların aynı hedefe odaklanmasına yardımcı olur. Herkesin aynı **“Mert”i, “Elif”i veya “Ahmet”i **tanıması, tasarım sürecinde daha tutarlı ve uyumlu bir yaklaşım sergilenmesine olanak tanır.

Sonuç: Kullanıcılarınızı Tanıyın, Onlara Uygun Tasarımlar Yapın

Kullanıcı araştırması ve personas oluşturma, sadece tasarım sürecinin bir parçası değil, aynı zamanda başarılı bir UX (Kullanıcı Deneyimi) tasarımı için vazgeçilmez adımlardır. Bu adımlar, tasarım sürecinizi bilgiyle donatır ve gerçek kullanıcıların ihtiyaçlarını karşılamanıza yardımcı olur.

Sonuç olarak, kullanıcınızı tanıdığınızda ve onların beklentilerine uygun çözümler sunduğunuzda, sadece daha etkili bir tasarım değil, aynı zamanda daha tatmin edici bir kullanıcı deneyimi elde edersiniz. Tasarım dünyasında başarılı olmak için bu adımları asla atlamayın; çünkü kullanıcılarınızı anlamak, başarılı tasarımların sırrıdır.

“Tasarım sadece nasıl göründüğü ya da nasıl hissettirdiği ile ilgili bir şey değildir. Tasarım nasıl çalıştığı ile ilgilidir.” — Steve Jobs

Yazılım Projelerinde Düzen ve Verimlilik İçin: Conventional Commits Nedir?

Poyraz Avsever — Fri, 23 Aug 2024 20:05:03 +0000

Yazılım geliştirme sürecinde, kod yazmanın ötesinde pek çok detayla uğraşıyoruz. Commit mesajları da bu sürecin kritik bir parçası tabii ki. Ancak commit mesajları, bazen dağınık, anlaşılmaz ve düzensiz olabiliyor. İşte bu noktada “Conventional Commits” devreye giriyor.

Conventional Commits Nedir?
Conventional Commits, commit mesajlarınızı belirli bir formata oturtan bir yazılım standardı. Amaç, her commit’in ne yaptığını net bir şekilde ifade etmek ve proje geçmişini daha anlaşılır hale getirmek. Commit mesajlarınızı bu standarda göre yazmak, projeyi daha düzenli, takip edilebilir ve sürdürülebilir kılar. Gelin şimdi beraber inceleyelim.

Neden Conventional Commits Kullanmalıyız?

1. Anlaşılabilirlik
Commit geçmişinin anlaşılabilir olması hepimiz için önemli. Bu standart, projede yapılan değişikliklerin kolayca takip edilmesini sağlıyor. Büyük projelerde, hangi commit’in hangi sorunu çözdüğünü veya hangi yeni özelliği eklediğini anlamak zaman zaman zorlaştığı için bu gibi standartları kullanmak yazılımcıların işini kolaylaştırıyor.

2. İzlenebilirlik ve Şeffaflık
Commit mesajlarımızı tutarlı ve net hale getirmek, proje geçmişimizde yapılan değişikliklerin izlenmesini kolaylaştırıyor. Özellikle geriye dönük uyumluluğu bozan değişikliklerde, bu düzenlemeler büyük bir avantaj sağlıyor.

Peki Bu Commit Mesajları Nasıl Yazılıyor?

Conventional Commits’e göre, her commit mesajı üç ana bölümden oluşur:

Başlık (Summary): Mesajın türünü ve kısaca ne yaptığını belirtir. Gövde 2- (Body): Değişikliğin detaylarını açıklar. Neden yapıldığını ve nasıl yapıldığını anlatır. Altbilgi 3- (Footer): Breaking changes gibi uyumluluğu bozan değişiklikler veya kapatılan sorunlar burada belirtilir.

Commit Türleri

Commit mesajları belirli türlerle başlar. İşte en yaygın kullanılan türler: Daha detaylı commit türlerini incelemek için tıklayın.

feat: Yeni bir özellik eklenmesi.
fix: Bir hatanın düzeltilmesi.
docs: Sadece dokümantasyonla ilgili değişiklikler.
style: Kodun işleyişini değiştirmeyen biçimlendirme (boşluklar, noktalı virgüller vb.).
refactor: Kodda, işlevini değiştirmeyen yeniden düzenleme.
Gelin beraber örnek bir Commit Mesajını inceleyelim:



feat(login): add JWT authentication

Added JWT authentication to the login process to enhance security.
This change involves updating the login controller and modifying the user model.

BREAKING CHANGE: The user model now requires a JWT token for all login operations.

1. Başlık (Summary):
feat:
Commit türünü belirtir. Burada feat (feature) türü kullanılmış, bu da commit'in projeye yeni bir özellik eklediğini gösterir. Başka türler de kullanılabilir, örneğin fix (bir hatayı düzeltmek), docs (dokümantasyon güncellemeleri) gibi.

(login):
Parantez içinde belirtilen bölüm, bu özelliğin veya değişikliğin hangi modülü veya bölümü etkilediğini gösterir. Burada login kullanılmış, yani yapılan değişiklik, login (giriş) süreciyle ilgilidir.
add JWT authentication:
Bu, commit'in yaptığı spesifik değişikliği kısa ve öz bir şekilde açıklar. Burada, JWT (JSON Web Token) ile kimlik doğrulamanın login sürecine eklendiği belirtiliyor.

2. Gövde (Body):

İlk Cümle:
“Added JWT authentication to the login process to enhance security.”
Bu cümle, yapılan değişikliğin amacını ve sonucunu açıklar. Burada, JWT kimlik doğrulamasının login sürecine eklendiği ve bunun güvenliği artırmak amacıyla yapıldığı belirtiliyor.
İkinci Cümle:
“This change involves updating the login controller and modifying the user model.”
Bu cümle, değişikliğin hangi dosya veya modülleri etkilediğini daha detaylı açıklar. Burada, login controller’ın güncellendiği ve user model’in değiştirildiği belirtiliyor.

3. Altbilgi (Footer):

BREAKING CHANGE:
Bu ifade, uyumluluğu bozan bir değişiklik olduğunu gösterir. Eğer bir commit, mevcut kodun çalışmasını bozacak bir değişiklik yapıyorsa, bu mutlaka belirtilmelidir. Bu, diğer geliştiricilerin bu değişiklikten haberdar olmasını sağlar.
Detay:
“The user model now requires a JWT token for all login operations.”
Bu açıklama, uyumluluğu bozan değişikliğin ne olduğunu detaylandırır. Burada, kullanıcı modelinin artık tüm giriş işlemleri için bir JWT token gerektirdiği belirtiliyor. Bu, diğer geliştiricilerin bu değişikliği uygularken dikkatli olmaları gerektiğini ifade eder.
Sonuç olarak
Conventional Commits, yazılım geliştirme sürecimizi daha düzenli, anlaşılır ve verimli hale getirdi. Commit mesajlarımızı belirli bir yapıya oturtarak, proje yönetimimizi daha sürdürülebilir ve izlenebilir bir hale getirdik.

Eğer siz de projelerinizde daha düzenli bir commit geçmişi istiyorsanız, Conventional Commits’i denemenizi tavsiye ederim.