Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Adem İltar tarafından sunulan bir web geliştirme eğitim serisinin bir bölümüdür. Eğitmen, izleyicilerden gelen yorumları ve sorunları ele alarak uygulamayı geliştirmektedir.
- Videoda, React ve Next.js framework'lerinde web uygulaması geliştirme süreci adım adım anlatılmaktadır. İçerik, side bar tamamlanması, buton komponenti oluşturma (link button ve base button), navigation komponenti stillendirilmesi, yeni sayfaların (explore, notification, messages, bookmark, list, profile) oluşturulması ve router kullanımı ile sayfa geçişlerinin yönetimi konularını kapsamaktadır.
- Eğitmen, kod hiyerarşisini düzenleyerek importları daha düzenli hale getirmekte, Twitter logosunun boyutunu düzeltmekte ve hover efektlerini ayarlamaktadır. Ayrıca, bir sonraki derste tema değiştirme özelliğinin nasıl ekleneceği hakkında bilgi verilmekte ve bu özelliğin sayfadaki değişkenler ve renklerle nasıl entegre edileceği açıklanmaktadır.
- 00:01Dersin Devamı ve Sorun Bildirimi
- Eğitmen, en son side barı neredeyse yüzde yüz tamamlayıp bırakmış olduklarını belirtiyor.
- İzleyicilerden Twitter ve React adlı GitHub hesabında oluşturulan rap'a ufak tefek problemleri bildirmelerini istiyor.
- Twitter logosunun boyutunun hatalı olduğu (30 piksel yerine 26 piksel) sorunu ele alınıyor.
- 02:01Kod Düzenlemeleri
- Menü komponenti navigation içinden constant dosyasına taşınıyor ve import hiyerarşisi düzenleniyor.
- İkonlar için "ikon." adı kullanılarak erişim sağlanıyor.
- Twitter ikonunun font size'ı 30 piksel olarak ayarlanıyor.
- 05:41Buton ve Link Sorunları
- Butonların tıklandığında kendi rootuna gitmesi gerektiği ancak bunun yerine link olarak ayarlanması gerektiği belirtiliyor.
- Constant dosyasında path adında yeni bir değişken oluşturuluyor ve her ikonun nereye gitmesi gerektiği belirleniyor.
- Hover durumunda background rengi ve opacity değerleri ayarlanıyor.
- 09:26Son Düzenlemeler
- Side barın içindeki desktop görüntüsünün padding right değeri 46 piksel olarak ayarlanıyor.
- Butonlara href özelliği ekleniyor.
- Eğitmen, video sırasında ufak detayların gözden kaçabileceğini ve mutlaka iş olarak açılması gerektiğini vurguluyor.
- 10:55Buton Komponentinin Düzenlenmesi
- Buton komponenti, mevcut stillerini koruyarak bazı durumlarda "a" bazı durumlarda "button" olarak kullanılacak şekilde düzenlenecek.
- Komponent çoklanarak "link button" ve "base button" adında iki farklı komponent oluşturulacak.
- "Link button" komponenti "a" etiketi olarak kullanılacak ve "next" kütüphanesinden "link" fonksiyonu ile link oluşturulacak.
- 12:34Komponentlerin Yapılandırılması
- Ana komponent çağrılırken "href" parametresi varsa "link button", yoksa "base button" gönderilecek.
- "Link button" komponentinde tüm parametreler "link" fonksiyonuna, "base button" komponentinde ise "base button" fonksiyonuna aktarılacak.
- "Ref" özelliği props üzerinden dışarı çıkarılacak ve "nav-battan" sınıfına "nav-battan-margin-8" özelliği eklenecek.
- 15:18Stil Düzenlemeleri
- Buton stilleri düzenlenecek ve "text-decoration" özelliği kullanılarak "a" etiketi için stil uygulanacak.
- Navigation için "display flex" ve "flex-direction column" özellikleri eklenecek, elemanlar sola yaslanacak.
- "nav-battan" sınıfına "nav-battan-margin-8" özelliği eklenecek ve dışarıdan gelen stil özellikleri bu sınıfa eklenecek.
- 17:27Sayfa Oluşturma
- "index", "explore" ve "notification" adında üç farklı sayfa oluşturulacak.
- Layout komponenti tüm sayfaların ortasına yerleştirilecek ve dışarıdan gelen mailin arasına girecek.
- "index" sayfası sadece layout ve içine gelecek olan içerikleri içerecek.
- 21:12Sayfa Seçimi ve Menü Düzenlemesi
- Menüdeki varsayılan sayfa "home" olarak ayarlanmış ancak bu manuel olarak verilmiş.
- "router" kütüphanesi kullanılarak sayfa seçimi otomatikleştirilecek.
- Ana sayfaya geldiğinde logonun mavi olmaması için stil düzenlemesi yapılacak.
- 24:32Sayfa Oluşturma ve İsimlendirme
- Bir sonraki bölümde sayfalar hızlıca oluşturulacak ve daha sonra isimleri düzeltilecek.
- Oluşturulan sayfalar: messages, bookmark, list, profile ve mor.
- Sayfa isimlerinin doğru olması önemlidir çünkü hata alındığında konsolda hangi sayfada hata olduğu belirtilir.
- 26:54Gelecek Ders Planı
- Bir sonraki derste Twitter'da mora tıklandığında açılan menüde tema değişikliği yapılacak.
- Tema seçeneğinde beyaz ve light tema (dar tema) seçenekleri eklenecek.
- Seçilen tema sayfa yenilendiğinde bile korunacak ve tema ile ilgili değişiklikler hızlı yapılabilir.