Nuxt 3 - Dersleri 47

Youtube üzerinden paylaştığım ücretsiz eğitimler.

front-endnuxt3.jsvue
Nuxt 3 Dersleri - Giriş - Bölüm 1

Nuxt 3 Dersleri - Giriş - Bölüm 1

Merhaba arkadaşlar, yeni bir eğitim serisi ile karşınızdayım. Bu seride Nuxt' un yeteneklerine göz atıp sonrasında da gerçek dünya örneği yapacağız. Bu videoda Nuxt nedir, neye benziyor gibi sorulara cevap arıyoruz. Kanalıma abone olup, ilgili arkadaşlarınızla paylaşırsanız sevinirim. Kanalıma Abone Olmayı Unutmayın: https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ?sub_confirmation=1 Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 Dersleri - Proje Yapısı - File System Routing - Auto-imports ve Dev Tools - Bölüm 2

Nuxt 3 Dersleri - Proje Yapısı - File System Routing - Auto-imports ve Dev Tools - Bölüm 2

00:00 Giriş 00:24 nuxt.config.ts dosyası ne işe yarıyor? 00:47 .nuxt klasörü ne işe yarıyor? 01:14 Nuxt dökümantasyonundaki kategori sistemi nasıl çalışıyor? 01:30 Klasör yapısı hakkında 01:45 Server klasörü (backend) 02:34 Nuxt Developer Aracı 03:06 İlk sayfamızı (NuxtPage) oluşturuyoruz (file-system routing) 04:52 İlk componentimizi oluşturup kullanıyoruz 06:00 Auto-Import mekanızması Kanalıma Abone Olmayı Unutmayın: https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ?sub_confirmation=1 Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 Dersleri - Layouts - Assets - Styling - Bölüm 3

Nuxt 3 Dersleri - Layouts - Assets - Styling - Bölüm 3

Vue 3 Dersleri - Layout Tasarımı ve Yönetimi - https://www.youtube.com/watch?v=z7C4RLG_mMA 00:00 Giriş 00:10 Assets klasörü 01:11 Public ve Assets klasörü arasındaki farklar 03:12 Layouts (NuxtLayout) 04:36 Meraklısı için bilgiler 07:40 Css (Style Sheet) dosyalarını Nuxt projesi içerisinden nasıl kullanıyoruz? Kanalıma Abone Olmayı Unutmayın: https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ?sub_confirmation=1 Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 Dersleri - Routing - Middleware - Seo & Meta Data - Bölüm 4

Nuxt 3 Dersleri - Routing - Middleware - Seo & Meta Data - Bölüm 4

00:00 Giriş 00:14 Nasıl Middleware (route middleware) oluşturuyor ve kullanıyoruz? 01:37 Her yerde çalışan (Global) Middlewareları nasıl tanımlıyoruz? 02:43 Middleware içerisinden layoutu nasıl değiştiriyoruz? 03:16 Meta data bilgilerini nasıl yönetiyoruz? (useHead) 04:47 Seo için gerekli olan bilgileri nasıl yönetiyoruz? (useSeoMeta) 05:54 Routing tanımlarken parametreleri nasıl yönetiyoruz? Kanalıma Abone Olmayı Unutmayın: https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ?sub_confirmation=1 Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 - Modüller - Tailwind CSS

Nuxt 3 - Modüller - Tailwind CSS

Bu videoda biraz soluklanıp, Tailwind ile projemizin tasarımını gelecek için bir miktar güncelliyoruz :) 00:00 Giriş 00:22 Nuxt Modules Nedir? 01:00 Tailwind Kurulumu 01:28 Projemize Modül olarak Tailwind i ekliyor ve ayarlarını yapıyoruz 03:07 Tailwind Css i kullanarak uygulamamız için basit bir layout hazırlıyoruz. Kanalıma Abone Olmayı Unutmayın: https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ?sub_confirmation=1 Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 Dersleri - Data Fetching - useFetch - useAsyncData - $fetch - Bölüm 5

Nuxt 3 Dersleri - Data Fetching - useFetch - useAsyncData - $fetch - Bölüm 5

Bu videonun odağı her ne kadar data fetching konusu olsada, konunun etrafını ören diğer konular ve başlıklar hakkında da bir çok şeyi anlatmaya, aktarmaya çalıştım. Video uzamasın diye bazı şeyleri kesmek zorunda kaldım fakat ilerleyen videolarda bunlarında (Nuxt Dev Tools üzerinden Payload ı gözlemleme, key verilmediğinde url den bir key oluşturulması gibi..) üzerinden geçeceğiz :) Umarım faydalı olur. 00:00 Giriş 01:55 useFetch ile data fetch konusuna giriş yapıyoruz 03:32 $fetch ile requestimizi yapıp neler olup bittiğine bakıyoruz 04:24 useAsyncData ile request yapıp davranışına bakıyoruz 07:54 Örneklerimizde kullanmak için server tarafında hello adında bir end-point oluşturuyoruz 08:44 Sayfalar arası geçişlerde yükleniyor ibaresini göstermek - NuxtLoadingIndicator 10:13 Lazy Loading konusuna bakıyoruz 11:55 useNuxtData ile cache mekanızmasının kullanıma bakıyoruz. clearNuxtData ve refreshNuxtData fonksiyonlarını öğreniyoruz. 13:18 useFetch in refresh fonksiyonu öğreniyoruz 13:45 Transform fonksiyonu ile aldığımız datayı değiştiriyoruz. 14:59 Watch ile reactive objelerdeki değişikliklere göre yeniden request nasıl gönderiyoruz ona bakıyoruz. 15:25 Computed URL ile değişen parametreye göre requestin nasıl gönderilmesi gerektiğini öğreniyoruz. Kanalıma Abone Olmayı Unutmayın: https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ?sub_confirmation=1 Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 Dersleri - Server - Bölüm 6

Nuxt 3 Dersleri - Server - Bölüm 6

00:00 Giriş 00:12 Nuxt ın altında ki Nitro Servera göz atıyoruz (https://nitro.unjs.io) 00:27 Nitro nun altında ki h3 Http Servera göz atıyoruz (https://h3.unjs.io) 01:22 Server klasörü ve yapısı (api, middleware, routes vb..) 01:52 Nuxt Developer Tool dan bahsediyoruz 02:35 Oluşturduğumuz Api End Pointini inceliyoruz 03:25 Routes klasörü ne işe yarıyor? 04:36 End point içerisinden parametre işlemlerini nasıl yapıyoruz? 05:34 Front-End den Back-End de oluşturduğumuz end-pointe nasıl parametre gönderiyoruz? (getQuery, getRouterParam) 06:35 Body ile bilgileri back-end e gönderiyoruz (readBody) 08:34 Nuxt ile back-end de Validasyon işlemini nasıl yapıyoruz? (getValidatedQuery, readValidatedBody) (TypeScript-first schema validation with static type inference - https://zod.dev) 10:05 Nuxt Server Middleware 12:46 Nuxt 3 Storage kullanımı (redis, fileSystem vb..) Kanalıma Abone Olmayı Unutmayın: https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ?sub_confirmation=1 Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt Dersleri - Rendering Modes - Bölüm 7

Nuxt Dersleri - Rendering Modes - Bölüm 7

00:00 Giriş 00:10 Nuxt 3 Render yöntemleri neler? (server side, client side rendering (ssr, csr vb..)) 00:20 Render etmek ne demek? Render hikayesinin kısa tarihi 01:46 Universal Rendering nedir? 02:40 Hydrate nedir? 04:12 Nuxt uygulamamızın buildi alıyoruz (yarn build) ve oluşan buildi inceliyoruz. (.output) 08:13 Nuxt uygulamamızın buildini generate (yarn generate) ile birlikte alıyoruz ve oluşan dosyaları tekrar inceliyoruz. 09:55 Nuxt configden ssr bilgisini false olarak ayarlayıp uygulamızı SPA (single page application) olarak generate ediyoruz. Kanalıma Abone Olmayı Unutmayın: https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ?sub_confirmation=1 Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Yapay Zekâ Chat Asistanı Nasıl Yapılır? - Bölüm 1 | Nuxt 3 - Ollama

Yapay Zekâ Chat Asistanı Nasıl Yapılır? - Bölüm 1 | Nuxt 3 - Ollama

Bu videoda Ollama yı kullanarak lokalimizde çalışan bir ai chat asistanı (ilkel ChatGPT) yapıyoruz. 2. Bölümü şuradan izleyebilirsiniz https://www.youtube.com/watch?v=EtzgoA5Wz18 Get up and running with large language models, locally - https://ollama.com Projenin kaynak kodlarına şuradan ulaşabilirsiniz https://github.com/apoStyLEE/nuxt-ollama-chat 00:00 Giriş 00:15 LLM ne demek? (Large Language Models (Büyük dil modelleri)) 00:50 Ollama nasıl kullanılır? (ollama run {llm}) 01:20 Yapacağımız uygulama da hangi kütüphaneleri kullanacağız? 02:50 Tailwind CSS ile birlikte ChatGPT benzeri bir UI tasarlıyoruz 06:40 Bilgiyi Http den Stream olarak okumak ne demek? 08:00 Ollama Js kütüphanesini kullanarak back-end imi yazmaya başlıyorum. (https://github.com/ollama/ollama-js) 10:45 Yazdığımız end-pointi front-end den çağırarak ekranda gösteriyoruz 12:11 Kodumuzu güncelleyerek ilgili yapıyı Stream haline çeviriyoruz 13:22 Stream i okuyup düzgün bir şekilde ekranda gösteriyoruz 13:56 Vs Code eklentisi Codeium (Copilot gibi bir yapay zeka asistanı) dan bahsediyorum. https://codeium.com 18:43 Yazdığımız mesaja gelen cevabı ekranda düzgün bir şekilde gösteriyoruz. Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Yapay Zekâ Chat Asistanı Nasıl Yapılır? - Bölüm 2 | Nuxt 3 - Ollama

Yapay Zekâ Chat Asistanı Nasıl Yapılır? - Bölüm 2 | Nuxt 3 - Ollama

Bu videoda Ollama yı kullanarak lokalimizde çalışan bir ai chat asistanı (ilkel ChatGPT) yapıyoruz. Get up and running with large language models, locally - https://ollama.com Projenin kaynak kodlarına şuradan ulaşabilirsiniz https://github.com/apoStyLEE/nuxt-ollama-chat Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 - Prisma - ORM

Nuxt 3 - Prisma - ORM

Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt ile Trello Klonu Yapıyoruz - Vue Drag & Drop

Nuxt ile Trello Klonu Yapıyoruz - Vue Drag & Drop

FormKit' in duyurduğu Drag & Drop kütüphanesiyle Trello benzeri bir pano tasarımı yapıyoruz. http://drag-and-drop.formkit.com 00:00 Giriş 00:50 Drag & Drop Nedir? 02:10 Drag & Drop kütüphanesini nasıl kullanıyoruz? 04:00 Trello benzeri bir layout oluşturuyoruz (kanban board) 07:00 Oluşturduğumuz arayüzün drag & drop implementasyonunu yapıyoruz. 16:50 Yeni kart oluştur özelliğini ekliyoruz 18:30 Yeni liste oluştur özelliğini ekliyoruz Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 Dersleri - Optimistic Updates - Bölüm 9

Nuxt 3 Dersleri - Optimistic Updates - Bölüm 9

00:00 Giriş 00:38 Optimistic Update Nedir? 02:00 Nuxt ile optimistic update nasıl yapılır? 04:20 Drag & Drop handleEnd eventi nasıl kullanılıyor? 07:20 Nuxt useNuxtData kullanımı 08:00 useFetch onResponseError fonksiyonunu nasıl kullanıyoruz? 09:10 Hata olduğunda yapılan işlemin geri alınması Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 Dersleri - Zod Schema Validation

Nuxt 3 Dersleri - Zod Schema Validation

JSON Schema - https://json-schema.org TypeScript-first schema validation with static type inference - https://zod.dev https://vee-validate.logaretm.com/v4/ - https://vee-validate.logaretm.com/v4/guide/composition-api/typed-schema#zodiac https://unjs.io/blog/2023-08-15-h3-towards-the-edge-of-the-web#runtime-type-safe-request-utils 00:00 Giriş 00:20 JSON Nedir? 00:50 Validasyon ne demek? 03:45 Schema Validasyonu (şema doğrulama) ne demek? 06:20 Zod ile schema nasıl tanımlanır? 06:20 Zod ile schema nasıl tanımlanır? 09:00 Nuxt projemizde Zod ile validasyonu nasıl yapıyoruz? 16:00 Nuxt projemizin backend inde Zod ile validasyonu nasıl yapıyoruz? (readValidatedBody, gwtValidatedQuery) Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 Dersleri - Nuxt Content - Bölüm 10

Nuxt 3 Dersleri - Nuxt Content - Bölüm 10

Çok hızlı, modern web sayfalarını, modern teknikler kullanarak Nuxt Content ile oluşturabilirsiniz. Nereden başlamalıyım? Bence buradan başlayabilirsiniz :) 00:00 Giriş 02:30 Nuxt Content Kurulumu 03:30 Markdown kullanarak ilk içeriğimizi oluşturuyoruz 05:00 Markdown Nedir? ilk kez duyanlar için küçük bir açıklama 08:20 Nuxt Content ile Navigasyon nasıl yapılır? (ContentNavigation) 10:05 Markdown a Meta bilgileri nasıl ekliyoruz? 11:00 Markdown içerisinden Vue componentlerini nasıl kullanıyoruz? 17:20 Oluşturulan Markdown dosyalara nasıl query yapıyoruz? (queryContent) Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

TanStack Query Nedir? Nuxt ile Nasıl Kullanılır?

TanStack Query Nedir? Nuxt ile Nasıl Kullanılır?

00:00 Giriş 00:50 Nuxt TanStack Query Kurulumu 02:40 TanStack Query Nedir? 05:40 Nuxt Projemizde TanStack Query kullanarak bir örnek yapıyoruz Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

WordPress' ten Nuxt' a Geçiş Nasıl Yapılır?

WordPress' ten Nuxt' a Geçiş Nasıl Yapılır?

Bu videoda, apostylee.com u yenilemek / modernize etmek için ihtiyacım olan bir konuyu sizlerle paylaştım. Wordpress içeriklerini nasıl markdown' a dönüştürüp Nuxt Content ile kullanabiliriz konusuna değindim, umarım faydalı olur. Bu arada videoda da bahsediyorum, içeriklerinizi markdown a dönüştürdükten sonra Hugo, Ghost ya da benzeri her yerde kullanabilirsiniz. Converts a WordPress export XML file into Markdown files. https://github.com/lonekorean/wordpress-export-to-markdown 00:00 Giriş 01:57 Wordpress Export to Markdown uygulamasına bakıyoruz 02:45 Wordpress deki içerikleri XML olarak dışarı aktarıyoruz 03:55 XML leri Markdown a çevirmeye başlıyoruz 06:50 Nuxt uygulamamızda dışarı aktardığımız markdown içerikleri göstermek için ilgili geliştirmeleri yapıyoruz. 11:30 Kategorileri göstermek için ilgili geliştirmeleri yapıyoruz 17:30 more (daha fazla göster) mekanızmasına bakıyoruz Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt ile MongoDB Nasıl Kullanılır? mongoose ile CRUD yapıyoruz

Nuxt ile MongoDB Nasıl Kullanılır? mongoose ile CRUD yapıyoruz

The world's most popular document database is now the world's most versatile developer data platform. https://www.mongodb.com Elegant mongodb object modeling for node.js https://mongoosejs.com/ A Nuxt module for simplifying the use of Mongoose in your project. https://docs.arashsheyda.me/nuxt-mongoose 00:00 Giriş 00:40 Nuxt uygulamamıza Mongoose modulunu ekliyoruz 03:00 İlk modelimizi - şemamızı oluşturuyoruz 05:10 Nuxt uygulamızın apisine oluşturduğumuz şemayı kaydedecek end-pointi yazıyoruz 08:10 Nuxt Developer aracından Mongoose ile ilgili menüye bakıyoruz 08:40 User Create formumumuzu yapıyoruz 11:50 Silme işlemini yapıyoruz Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 Dersleri - Internationalization - Lokalizasyon - i18n - Bölüm 11

Nuxt 3 Dersleri - Internationalization - Lokalizasyon - i18n - Bölüm 11

00:00 Giriş 00:15 i18N - Internationalization nedir? 01:10 Nuxt i18N Nasıl kullanılır? https://i18n.nuxtjs.org 02:20 Nuxt projemize i18N ekliyoruz ve nasıl kullanıldığına bakıyoruz 07:40 i18N nin sağladığı yardımcı fonksiyonlar (helpers) 10:47 Visual Studio Code i18n-ally Eklentisine giriş Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

i18n-Ally Kullanarak Nuxt Uygulamasının Lokalizasyonunu Nasıl Yapılır?

i18n-Ally Kullanarak Nuxt Uygulamasının Lokalizasyonunu Nasıl Yapılır?

00:00 Giriş 00:35 i18n-ally Visual Studio Code Ayarları 01:35 Nuxt projemizin lokalizasyon ayarlarını güncelliyoruz 05:25 i18n-ally nasıl kullanılıyor? 05:56 i18n-ally lokalizasyon yaparken hayatımızı kolaylaştıran özellikleri 11:49 Nuxt i18n Routing Strategy ayarları (no_refix, NuxtLinkLocale) Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt Uygulamasını Vercel ile Nasıl Yayınlarız? Nasıl Deploy Ederiz?

Nuxt Uygulamasını Vercel ile Nasıl Yayınlarız? Nasıl Deploy Ederiz?

00:00 Giriş 00:30 Vercel e deploy edeceğimiz basit Nuxt uygulamasını tanıyoruz 00:50 Vercel e login olup projemizi ekliyoruz 01:45 Deploy edilecek projemizin Vercel üzerinden ayarlarını yapıyoruz 02:45 Uygulamamızı Deploy ediyoruz 04:20 Deployments, Analytics, Speed Insights, Logs, Storage ve Settings ayarlarına bakıyoruz 07:30 Projemizi değiştirip yeniden deploy ediyoruz 09:10 Nuxt uygulamamızı generate ediyor ve static olarak deploy ediyoruz. Bunun için Vercel in Build Command özelliğini kullanıyoruz. (nuxt build) 11:00 Nuxt generate sırasında oluşan 404 hatası ve çözümü. (nitro prerender failOnError) Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Directus Nedir? Headless CMS Nedir?

Directus Nedir? Headless CMS Nedir?

Docker Nedir? Nasıl Kullanılır? Front-End geliştiriciler kullanmalı mı? - https://youtu.be/n4yhqKOY80c Docker - Giriş https://www.youtube.com/watch?v=pxXOsDzLr9I Docker - Image & Compose https://www.youtube.com/watch?v=nl9BztQGpno 00:00 Giriş 00:20 Headless CMS Nedir? 01:00 Directus Nedir? 01:30 Self-Hosted Nedir? 01:45 Ömer Yiğit Aker Övüyorum :D @dotyigit (Self-Hosted) 02:55 Directus Kurulumuna Giriş - Docker 04:35 Kurulum için gerekli olan docker-compose dosyamızı oluşturuyoruz 06:10 Directus ı bilgisayarımızda çalıştırıyoruz 06:30 Directus ın temel özelliklerine bakıyoruz 07:20 Directus Collection nedir? Yeni bir collection oluşturup bakıyoruz. 10:30 Access Control Mekanızmasına bakıyoruz. Roller vs.. 11:25 Directus Flows Nedir? Bir örnek yapıp bakıyoruz. Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt ile Directus Nasıl Kullanılır? Headless CMS

Nuxt ile Directus Nasıl Kullanılır? Headless CMS

İlk videoyu izlemeyi unutmayın. Directus Nedir? Headless CMS Nedir? https://youtu.be/44Xog5QRVGY 00:00 Giriş 01:05 Nuxt için Directus kurulumunu yapıyoruz 01:50 Directus ın Nuxt Devtools ayarları 02:10 Directus da collection oluşturuyoruz 03:15 Nuxt içinden Directus daki collectiona API üzerinden erişiyoruz 04:25 Directus Access Control ayarları 07:15 Nuxt developer tools içerisinden Directus kullanımı 08:10 Directus Types Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt Hub - İlk Bakış

Nuxt Hub - İlk Bakış

NuxtHub http://hub.nuxt.com Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt ile FFmpeg Nasıl Kullanılır? Video Nasıl İşlenir?

Nuxt ile FFmpeg Nasıl Kullanılır? Video Nasıl İşlenir?

FFmpeg - https://ffmpeg.org FFmpeg Download - https://ffmpeg.org/download.html A fluent API to FFMPEG - https://github.com/fluent-ffmpeg/node-fluent-ffmpeg 00:00 Giriş - FFmpeg nedir? 02:30 FFmpeg nasıl kurulur? 02:50 Fluent ffmpeg i projemize ekliyoruz 03:40 Video uploadı ve ffmpeg için API end-point imizi yazıyoruz 06:30 FFmpeg ile video içerisinden ekran görüntüsünü alacak ayarları yapıyoruz 11:15 Nuxt ile video upload yapıyoruz 15:30 Yüklediğimiz dosyayı diske yazıyoruz 23:50 Nuxt ile yüklediğimiz videoyu FFmpeg kullanarak yeniden boyutlandırıyoruz. Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Docker Nedir? Nasıl Kullanılır? Front-End geliştiriciler kullanmalı mı?

Docker Nedir? Nasıl Kullanılır? Front-End geliştiriciler kullanmalı mı?

Önceki docker videolarım; Docker - Giriş https://www.youtube.com/watch?v=pxXOsDzLr9I Docker - Image & Compose https://www.youtube.com/watch?v=nl9BztQGpno 00:00 Giriş - Docker Nedir? 01:22 Sanallaştırma nedir? Sanallaştırma teknolojileri nelerdir? 03:25 Docker hub nedir? 05:40 Docker Compose nedir? 06:20 Docker Desktop 06:40 Image, Container, Volume nedir? Bunları öğreniyoruz Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Front-End Yol Haritası - Zamansız

Front-End Yol Haritası - Zamansız

- Temeller - JavaScript - Temel mekanızmalar - Dom nedir? - Fetch / Ajax (XHR) - Frameworks - Vue - React - Angular - Svelte - HTML - Varsayılan davranışlar - Form - Div - P - Semantic ne demek? - Header - Article - Footer - Nav - CSS - Layout Nedir? - Frameworks - Tailwind CSS - Bootstrap - Diğer - Paket yönetici nedir? - Tarayıcı Nedir? - Http - Cookie - Local Storage - Data Nedir? - JSON - XML - Database - Git - (github, gitlab) - Geliştirme Ortamı - ESLint - Prettier - Vite - Webpack - package.json - Seçim Nasıl Yapılır? - Framework - Herhangi bir şey

Http Nedir? Tarayıcılar Nasıl Çalışır? Cookie, Local - Session Storage Nedir?

Http Nedir? Tarayıcılar Nasıl Çalışır? Cookie, Local - Session Storage Nedir?

00:00 Giriş 00:15 Http nedir? 01:15 Developer tools ile Network sekmesinden Request / Response u gözlemliyoruz. 04:00 Http Methodları Nelerdir? GET, POST, DELETE, PUT 04:55 Http Status Kodları. 200, 404, 403, 401, 500 06:58 Http protokolünün versiyonları 07:35 Tarayıcılar nasıl çalışır? Html, Render, JavaScript Engine 09:50 Content Type, Mime Type Nedir? 14:00 Chromium Nedir? 14:30 Local Storage Nedir? Key / Value Database 16:00 Session Storage Nedir? 16:45 Cookie Nedir? 18:00 Cookie Güvenliği, Http Only Ne demek? Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 ile Netflix Klonu Yapıyoruz - Giriş - Bölüm 1

Nuxt 3 ile Netflix Klonu Yapıyoruz - Giriş - Bölüm 1

Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 ile Netflix Klonu Yapıyoruz - Authentication - Bölüm 2

Nuxt 3 ile Netflix Klonu Yapıyoruz - Authentication - Bölüm 2

Nuxt Auth ile ilgili videolar; Nuxt 3 Dersleri - Authentication - Auth.js - Bölüm 8 - Giriş https://youtu.be/0QCyrrnKm_8 Nuxt 3 Dersleri - Authentication - Auth.js - Bölüm 8 - Detaylar https://youtu.be/6T_-OJ53T3g Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 ile Netflix Klonu Yapıyoruz - Profil Seçimi & Admin - Bölüm 4

Nuxt 3 ile Netflix Klonu Yapıyoruz - Profil Seçimi & Admin - Bölüm 4

Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt ile shadcn ui Nasıl Kullanılır?

Nuxt ile shadcn ui Nasıl Kullanılır?

shadcn/ui - https://ui.shadcn.com shadcn-vue - http://shadcn-vue.com Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt ile algolia nasıl kullanılır? Algolia Nedir? Search Nedir?

Nuxt ile algolia nasıl kullanılır? Algolia Nedir? Search Nedir?

Algolia - https://www.algolia.com/ Algolia - Vue Instant Search https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/vue/ Nuxt Algolia - https://algolia.nuxtjs.org Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 ile Netflix Klonu Yapıyoruz - Refactoring - KAOS - Bölüm 10

Nuxt 3 ile Netflix Klonu Yapıyoruz - Refactoring - KAOS - Bölüm 10

Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Nuxt 3 ile Netflix Klonu Yapıyoruz - Search - Final

Nuxt 3 ile Netflix Klonu Yapıyoruz - Search - Final

Bu seri beni hem mental hem de zihinsel olarak çok fazla yordu. Bu şekilde erken bir final bende istemiyordum fakat şartlar şimdilik böyle gerektirdi. Muhtemelen hiç bir zaman gerçek dünya uygulaması yapma çukuruna bir daha düşmeyeceğim. Daha kısa videolarla yolumuza devam.. Nuxt ile yaptığımız Netflix Klonu uygulamasının kaynak kodlarına şuradan ulaşabilirsiniz: https://github.com/apoStyLEE/nuxt-netflix-clone Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee

Cursor - AI Code Editor

Cursor - AI Code Editor

The AI Code Editor - https://www.cursor.com Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee