Open in app

Sign In

Write

Sign In

Safa Gayret
Safa Gayret

147 Followers

Home

About

3 days ago

FrontEnd’de çok şey değişiyor: SPA öldü, yaşasın SSR

Malumunuz ReactJS, web uygulamaları geliştirirken kullanılan en popüler JavaScript kütüphanesi. Son zamanlarda, ReactJS yerine NextJS kullanımının teşvik edildiğini duymuş olabilirsiniz. Bunun sebebi ReactJS’in yeni dökümanında yer alan Installation kısmı. Burada artık create-react-app yerine create-next-app yazıyor.

Spa

3 min read

FrontEnd’de çok şey değişiyor: SPA öldü, yaşasın SSR
FrontEnd’de çok şey değişiyor: SPA öldü, yaşasın SSR
Spa

3 min read


Sep 18, 2022

Hemen kullanabileceğiniz 4 yeni HTML element

Okullarda üzerine düşülmeyen, detaylarıyla incelenmeyen HTML, verimli kullanıldığında fazladan JS ve CSS yazmaktan kurtaran bir teknoloji. — Sanılanın aksine HTML, tüm browser’lar tarafından desteklenen yeni özellikler de kazanıyor. Takip etmekte fayda var. Gelin gönül rahatlığıyla kullanabileceğiniz 4 yeni elementi inceleyelim. Datalist Standart input ile kullanıcılardan karmaşık (kuralsız) veriler alabiliriz. En fazla placeholder attribute ile kullanıcıyı bilgilendirerek tam olarak istediğimiz bilginin ne olduğunu belirtebiliriz. Yeni gelen Datalist elementi…

HTML

2 min read

Hemen kullanabileceğiniz 4 yeni HTML element
Hemen kullanabileceğiniz 4 yeni HTML element
HTML

2 min read


Sep 17, 2022

Kendi toast mesajınızı yazın

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.

JavaScript

2 min read

Kendi toast mesajınızı yazın
Kendi toast mesajınızı yazın
JavaScript

2 min read


Jul 26, 2022

WebSocket, VueJS’te nasıl kullanılır? (Hazır paket kullanmadan)

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.

Websocket

1 min read

WebSocket, VueJS’te nasıl kullanılır? (Hazır paket kullanmadan)
WebSocket, VueJS’te nasıl kullanılır? (Hazır paket kullanmadan)
Websocket

1 min read


Jul 7, 2022

VueJS’te TailwindCSS ile Dark Mode ayarı nasıl yapılı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.

Tailwind Css

2 min read

VueJS’te TailwindCSS ile Dark Mode ayarı nasıl yapılır
VueJS’te TailwindCSS ile Dark Mode ayarı nasıl yapılır
Tailwind Css

2 min read


Jul 2, 2022

Parent Component ile Child Component arasında v-model ilişkisi kurmak

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. —

Vuejs

2 min read

Parent Component ile Child Component arasında v-model ilişkisi kurmak
Parent Component ile Child Component arasında v-model ilişkisi kurmak
Vuejs

2 min read


Jun 15, 2022

VueJS’te sürükle bırak yapmak (Hazır paket kullanmadan)

“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

Vuejs

2 min read

VueJS’te sürükle bırak yapmak (Hazır paket kullanmadan)
VueJS’te sürükle bırak yapmak (Hazır paket kullanmadan)
Vuejs

2 min read


Jun 5, 2022

Bırakın UI’ı yapay zeka yazsın

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.

Github Copilot

2 min read

Bırakın UI’ı yapay zeka yazsın
Bırakın UI’ı yapay zeka yazsın
Github Copilot

2 min read


May 29, 2022

Tailwind CSS, Vite ile oluşturulmuş VueJS 3'e nasıl kurulur?

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.

Tailwind Css

2 min read

Tailwind CSS, Vite ile oluşturulmuş VueJS 3'e nasıl kurulur?
Tailwind CSS, Vite ile oluşturulmuş VueJS 3'e nasıl kurulur?
Tailwind Css

2 min read


May 21, 2022

Yeni CSS özelikleri nasıl çalışıyor :is() :has()

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…

CSS

2 min read

Yeni CSS özelikleri nasıl çalışıyor :is() :has()
Yeni CSS özelikleri nasıl çalışıyor :is() :has()
CSS

2 min read

Safa Gayret

Safa Gayret

147 Followers

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.

Following
  • Mehmet Demirel

    Mehmet Demirel

  • Vue Mastery

    Vue Mastery

  • ALTUĞ BİLGİN ALTINTAŞ

    ALTUĞ BİLGİN ALTINTAŞ

  • Nicky Christensen

    Nicky Christensen

  • Gizem Saruhan

    Gizem Saruhan

See all (44)

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech