Web Components #1 | Web Components Temelleri | Web Components Nedir? Nasıl Kullanılır?
HTML-код
- Опубликовано: 28 мар 2020
- Web Components #1 | Web Components Temelleri | Web Components Nedir? Nasıl Kullanılır?
Merhabalar,
Eğer sizde Vue, React, Angular frameworklerinin size sunmuş olduğu Component yapısından faydalanmak ama bunu yaparken de herhangi bir kütüphane ya da framework kullanmak istemiyorsanız işte bu ders tam size göre.
Web Components, We API'nin bize sunmuş olduğu özelliklerden biridir. 2 videodan oluşacak bu eğitimin ilk videosunda Web Component'in ne olduğuna, nasıl kullanıldığına ve teknik olarak yapısına değineceğiz.
Daha sonrasında teorik konuları geçtikten sonra;
- kendimize ait componentlerin nasıl üretilebileceğine,
- dinamik olarak bilgilerin nasıl aktarılabileceğine,
- props mantığına
- slot ve named slot kavramlarına
- scope işlemlerine
- lifecycle metodlarına
detaylı bir şekilde bakacağız. Sonraki videoda ise bu öğrendiklerimizi daha da yukarı çıkartarak Movie App yapacağız.
Kaynak Kodlara Erişmek için;
github.com/gkandemi/web-compo...
Kanal içerisinde bulabileceğiniz eğitimlerden bazıları;
1. PHP Programlama eğitimi
2. Codeigniter framework eğitimi
3. HTML ve CSS Eğitimi
4. JavaScript Eğitimi
5. JQuery Eğitimi
6. Vue js Eğitimi
7. Nuxt js Eğitimi
8. Node js Eğitimi
9. Express js Eğitimi
10. JavaScript Frameworkleri
11. MongoDB Eğitimi
12. MySQL Eğitimi
13. Docker Eğitimi
14. Go programlama Eğitimi
15. PHP ile proje Eğitimi
16. Codeigniter ile proje Eğitimi
17. Vue js ile proje Eğitimi
18. Nuxt js ile proje Eğitimi
19. Yeni web teknolojilerin tanıtımları
20. IDE kullanımları
gibi daha birçok eğitime ücretsiz olarak ulaşabilirsiniz.
Eğitimleri izlemek için Oynatma listelerine göz atmayı kesinlikle unutmayın!!!
Başlıca oynatma listeleri;
Eğitim Serileri;
► HTML Eğitimi : • HTML Eğitimi
► CSS Eğitimi : • CSS Eğitimi
► MySQL Eğitimi : • MySQL Eğitimi
► JQuery Eğitimi: • JQuery Eğitimi
► PHP Eğitimi : • PHP Eğitimi
► Codeigniter Eğitimi : • Codeigniter Eğitimi
Proje Eğitimleri;
► Asp.Net ile Okul Projesi: • Asp.Net ile Okul Projesi
► Firebase ToDo List Yapımı : • Firebase ToDo List Yapımı
► PHP Codeigniter ile Multi Session Yapımı : • PHP Codeigniter ile Mu...
► PHP Codeigniter Otel Rezervasyon Sistemi : • PHP Codeigniter Otel R...
► Like Dislike Yapımı : • Like Dislike Yapımı
► PHP Codeigniter ile Malzeme Uygulaması : • PHP Codeigniter ile Ma...
► Codeigniter ile AutoComplete Kullanarak Arama Motoru Yapmak : • Codeigniter ile AutoCo...
► PHP Çoklu Kategori Alt Kategori Yapımı : • PHP-PDO ile Sınırsız K...
► Codeigniter ile Çoklu dosya upload işlemi (Dropzone): • Codeigniter ile Çoklu ...
► PHP Codeigniter ile Pagination Yapımı : • PHP Codeigniter ile Pa...
► PHP ile Alışveriş Sepeti Yapımı : • PHP ile Alışveriş Sepe...
► PHP Mailer Kullanımı : • PHP Mailer Kullanımı
► Vue js ile Codeigniter Rest API servisine bağlanmak eğitimi : • Vue.js ile Codeigniter...
► Nasıl yapılır köşesi: • Nasıl Yapılır?
► Vue.js Soru Cevap : • Vue.js Soru Cevap
► Kullandığım teknoloji ile ilgili bilgiler : • Kullandığım Web Yazılı...
Sosyal medyadan takip edin :
● VideoSınıf : www.videosinif.com
● Yazılım Eğitim : www.yazilimegitim.net
● Kişisel Web Sayfam : www.gokhankandemir.com
● Facebook : / kablosuzkedi
● Twitter : / kablosuzkedi
● Instagram : / kablosuzkedi
● Instagram : / yazilimegitim
Really Thanks to @TraversyMedia for the inspiration of the presentation.
Merhabalar,
Eğer sizde Vue, React, Angular frameworklerinin size sunmuş olduğu Component yapısından faydalanmak ama bunu yaparken de herhangi bir kütüphane ya da framework kullanmak istemiyorsanız işte bu ders tam size göre.
Web Components, We API'nin bize sunmuş olduğu özelliklerden biridir. 2 videodan oluşacak bu eğitimin ilk videosunda Web Component'in ne olduğuna, nasıl kullanıldığına ve teknik olarak yapısına değineceğiz.
Daha sonrasında teorik konuları geçtikten sonra;
- kendimize ait componentlerin nasıl üretilebileceğine,
- dinamik olarak bilgilerin nasıl aktarılabileceğine,
- props mantığına
- slot ve named slot kavramlarına
- scope işlemlerine
- lifecycle metodlarına
detaylı bir şekilde bakacağız. Sonraki videoda ise bu öğrendiklerimizi daha da yukarı çıkartarak Movie App yapacağız.
Kaynak Kodlara Erişmek için;
github.com/gkandemi/web-components-fundamentals
Islanıyorum... öyle bi konu
ahaahhaa. yapmayın olm böyle şeyler :D :D :D
Şırıl şırıl oldum hocam valla altın gibi konular bunlar hemde Türkçe..
hocam konuştukça eriyorum . çok iyi anlatıyonuz.
Bilgi paylaştıkça çoğalır ve paylaştıkça güzeldir, sesin titremeden aktardigin bilgiler için teşekkürler güzel insan.
Hocam harikasınız emeğinize sağlık
Allah razi olsun hocam 2020-nin en guzel yanisiniz yemin ederim.
Ne güzel bir yorumdur bu :))) Teşekkür ederim :)
@@kablosuzkedi güzel gününüz olsun. hocam saygılar.
Harika bir video olmuş. Harikasınız.
Sabırsızlıkla bekliyoruz (y)
Sen harika bir detaysın hocam
Harika içerik olmuş abi, ağzına sağlık çok teşekkür ederiz. İyi ki varsın..
hocam siz tek kelimeyle "harikasınız."
Bir adamın her anlattığı mı güzel olur.
Eline diline sağlık krall
Süper nitelikli bilgi 👏👏👏
Framework yapmayı öğretiyorsunuz tebrikler..
Ellerine sağlık, anlatımın çok güzel ve anlaşılır. Vue videonu da izlemiştim yazılım bilimi kanalından, yeni teknolojileri sayende takip ediyorum.
Bu arada the man from earth filmini tavsiye etmen Türkiye şartlarında bazı arkadaşlara ağır gelebilir :D
doğru olabilir :D :D :D ama güzel film :)
tam böyle bir şey ararken.. zevkten dört köşeyim şuan sdfgjdlffdlfgl
Tesekkurler hocam. Sizi cok seviyoruz. Azerbaycandan selamlar. Benim gibi bicok insana yardim etdiyiniz icin cok tesekkur ederiz. Ayrica birden kendimi yorum yazarken buldum bu ayri bisey aslinda ben bakip kecerim cok seye. Ancak size ayri bi sevgi sayqi duyariz. Tesekkurler hocam.
Kardeşim atribute değişikliğinin dinamik olarak ekrana yansıması eksik kalmış bir tek... Ama ikinci video muhtemelen bunu telafi edecektir diye düşünüyorum... Tamda yapmakta olduğum bir proje için bu konuyu araştırıyorum... Ufak tefek ama can alıcı birkaç konu bu video ile birlikte oturmuş oldu bende... Allah razı olsun... Konu seçimlerin çok iyi tebrikler!!!
2.videoda uygulamada bir çok şeyi yapacagiz. 2.video sonunda ödev veriyorum ondan sonra 3.videoyu çekecegim hemen. Orada da Custom Event konusuna değineceğim. Orada Attribute Change konusuna da değinebiliriz :)
özlemişimm
Yabancı kaynak bile bulamadım lütfen devamı gelsin Gökhan abii
Abi çok iyi
Hocam serinin devamı gelsin lütfeeen
tam uyuyacaktım karşıma çıktın harika bir kanala benziyor
Hoşgeldin dostum :)
kablosuzkedi teşekkürler😂
hocam çok heyecanlandım şuan :D npm'e bununla ne componentler publish edilir
Really Thanks to @Traversy Media for the inspiration of the presentation. metni'ni en sona değilde en başa koyarsan iyi olur.
Koyamam çünkü en baş SEO tarafından okunuyor. Yoksa ben de biliyorum koymayi dostum.
Güzel yakalama, tebrikler
Teşekkürler 😘
Bu özellikler yenimi?
Tüm browser'larda çalışıyor mu?
klavye sesine bayılan tek ben miyim? çok iyi bir klavye
:D :D :D
codeigniter 4 egitimleri düşünüyormusunuz
abi nuxtjs ve firebase kullanarak baştan sona kapsamlı bir proje yapabilir misin. ben udemy kursunu bitirdim ama her şey parça parça. Kapsamlı bir tek video yapabilir misin?
Tamam
Gerçekten cok cahilmisim hep duydugum ama zordur diye kacindigim bir konuydu dunyam degisti cooook teşekkürler
PHP siteye Steam kullanıcı id lerini, arkadaşlarını, oyun listesini ve kaç saat oynadığı gibi verileri çekebilir miyiz ?
abi bende webm project foundation components diye bişey var programlar ve özellikler kısmında kaldır bölümü varya orada ben bunu yükelemedim bilgisayarın kendi uygulamasımı
Abi ben kütüphane olaylarnı bilmiyorum ama queryselector falan yazdın jquery kütühanesini mi kullandın bu çalışmada
Sadece JavaScript dostum
Hocam iletişim bilgisi aradım ama göremedim onun için sorumu buradan soruyorum. Projeyi benzer bir şekilde geliştirip kendi github profilimde paylaşabilir miyim ?
Tabi ki. Github üzerinden forklayıp ilerleyebilirsin de :) bu şekilde yaparsan bana da katkı sağlamış olursun. Sonuçta bu eğitimler faydalanmak isteyenler için :)
Laravel eğitimi çekmeyi düşünüyor musunuz ?
Hayir dostum maalesef düşünmüyorum :(
hocam sana mail atmıstım
woocommerce ve pazaryeri apileriyle ilgili
böyle bir video cekersen çok güzel olur. teşekkürler
Wordpress ve türevleri ile ilgili bilgim yok maalesef. Olmasını da istemiyorum açıkçası :) tavsiyem kendiniz kodlayın.
@@kablosuzkedi
Sizin codeigniter videolarından bakarak Kendim kodluyorum zaten.
Soruyu anlatamadım aslında.. Mailde uzun yazmıstın.
Woocommerceden veri çekecek yönetim paneli yazdım ama eksikleri var baya 😰
Neden React, Vue gibi bir alternatifi kullanmamalıyız da bunu kullanmalıyız ben orasını yakalayamadım.Şu sıralar flutter ile ilgileniyorum sadece ve sürekli yeni birşey öğrenmekten yoruldum açıkçası. Yok mu bu geminin bir ayarı :)
Kullanmamalısınız gibi bir idda bulunan arkadaşın yanindan hemen uzaklaşın lütfen!!!! :) Öyle bir şey söylemiyorum. Ya kullanamıyorsan ve Component yapısı yine de yapmak istiyorsan?. Ya da kendi JS framework'ünü yazmaya başlamışsındır; component yapısını yapacaksındır? İşte bu arkadaş onu sağlıyor :)
script'i body tag'in bitişinin hemen önüne koymuşsun zaten, ayrıca defer kullanmanın amacı nedir?
Alışkanlık. Zaten orada da diyorum. Uygulamada birden fazla script ekliyoruz ondan mütevellit. Sen kaldırabilirsin.
deferi kaldırıp dene birde ekleyip dene render işleminde bir fark göreceksin
Hocam merhaba lütfen rica ediyorum, udemy de yayınladığınız php blog scriptinin saylama yöntemi için bir şey yapın, video falan çekin veya kodları yükleyin, bir türlü çözemedim bu sorunu... Yardım ederseniz çok sevinirim
Udemy de benim yayınladığım blog scripti eğitimi yok ki
@@kablosuzkedi yanılıyorsunuz galiba hocam :) vidobu eğitim tarafından yayınlanmış eğitimini var
www.udemy.com/course/php-ile-blog-scripti-yapm/ buyurun hocam bu da linki
İlk olarak o eğitimden haberim yok yani yayınlandığından. Diğer bir konu ise ben oldukça titiz bir insanımdır bu kanalda ve benim Udemy eğitimlerimde görebilirsin bunu. Pagination yok diye herhangi bir eğitime 1 yıldız vermeyin lütfen. Eğitimin amacı pagination değil. Tabi en önemli konu vidobu eğitimlerini çekerken tamamen kendimden uzak bir şekilde eğitimlerim hazırlatıldı maalesef. Bu konu da var. Bilmeden yorum yapmamak lazım. O eğitime pagination eklemem imkansız. Fakat tayfun olsun başka başka eğitmenler olsun pagination dersi çekmişti onu entegre edebilirsiniz.
@@kablosuzkedi merhaba hocam, haklısınız... İlk başta ne yalan söyleyeyim 5 yıldız verdim, kursu bitirdikten sonra bu durumu fark edince sinirlendim 1 e düşürdüm. Ama siz yazdıktan sonra, vermiş olduğunuz ilgiden dolayı tekrardan 4 puana çıkardım, demek ki sistem halen daha güncellemediği için 1 yıldız olarak gözükmüş... Bu konudaki hassasiyetinizi tahmin ederek özür diliyorum...
Amma velakin.
Armağan Amcalar dediki "web components'i öğrenmek için ayırdığınız milisaniyeye yazık".
Yaw o adamda her şeye bok atıyor. Böle tiplere kıl oluyorum. Tamam bilgin olabilir. O zaman sebebini de söliceksin. Bizde öğrenelim. Sebebini söylemiyorsa yaptığı şey artislikten öteye geçmemiş oluyor.
Bunlar en son öğrenilmesi gereken şeyler ama kendi framework'ünü yazabilmek için bunlara hakim olmak gerekiyor.