• Buradasın

    Front-End Geliştirme

    Özetteki ilgi çekici içerikler

    • Web Tasarımı Eğitim Videosu: Hero/Slider Oluşturma

      Bu video, "The Code Father" tarafından sunulan bir web tasarım eğitim serisinin bir bölümüdür. Eğitmen, sıfırdan başlayarak bir web sitesi tasarımı sürecini adım adım göstermektedir. Videoda, hayali bir kayak merkezi sitesinin tasarım süreci devam etmektedir. Eğitmen, önceki bölümde tamamlanan header (üst menü) kısmının ardından, hero veya slider olarak adlandırılan ana bölümün nasıl oluşturulacağını göstermektedir. Figma programında resim düzenleme, metin ekleme, gölge ekleme ve sayfa boyutlarını ayarlama gibi temel tasarım işlemleri detaylı olarak anlatılmaktadır. Video, web tasarım serisinin bir parçası olup, ilerleyen bölümlerde HTML, CSS, JavaScript ile front-end kısmının ve My Secure Database ile PP kullanarak backend kısmının nasıl yazılacağı gösterilecektir.

      • youtube.com

    • Front-End Geliştirme ve Öğrenme Süreci Üzerine Röportaj

      Bu video, Yavuz adlı bir sunucunun Dokuz Eylül Üniversitesi Yönetim Bilişim Sistemleri son sınıf öğrencisi ve front-end developer olan Furkan Anter ile gerçekleştirdiği bir podcast formatındaki röportajdır. Furkan, mobil uygulama geliştirme ile başlayıp, daha sonra front-end alanına yönelmiş ve şu anda Swift UI kullanarak iOS mobil uygulamaları geliştirmektedir. Röportajda Furkan'ın üniversite tercihleri, yönetim bilişim sistemleri bölümünün ona sağladığı avantajlar ve front-end geliştirme alanındaki deneyimleri ele alınmaktadır. Ayrıca kendi yazılım öğrenme sürecini anlatarak, Freecodecamp ve Screenba gibi kaynaklardan nasıl faydalandığını ve altı ay boyunca her gün 8-10 saat kod yazarak nasıl ilerlediğini paylaşıyor. Videoda front-end alanında kullanılan diller (JavaScript, TypeScript), framework'ler (React, Angular) ve Tailwind CSS gibi teknolojiler hakkında bilgiler de paylaşılmaktadır. Furkan, yazılım öğrenmek isteyenlere "her gün yapmak" ve "istikrarlı olmak" tavsiyesinde bulunarak, front end yazılım öğrenmek isteyenler için pratik bilgiler ve kaynaklar hakkında faydalı bilgiler sunmaktadır.

      • youtube.com

    • React'te useMemo Hook Eğitimi

      Bu video, bir konuşmacının React'teki useMemo hook'unu anlattığı eğitim içeriğidir. Konuşmacı, React'in kendi dokümantasyonundan ve bir front-end yazılımcının makalesinden yola çıkarak konuyu açıklamaktadır. Video, useMemo hook'unun ne olduğunu, nasıl kullanıldığını ve performans optimizasyonu için nasıl faydalı olduğunu detaylı şekilde anlatmaktadır. İlk bölümde teorik bilgiler verilirken, ikinci bölümde bir uygulama örneği üzerinden useMemo'nun pratik kullanımını göstermektedir. Özellikle pahalı hesaplamaları hatırlamak için kullanılan useMemo'nun, render aşamasında nasıl çalıştığı ve dependency array'in işlevi açıklanmaktadır. Videoda ayrıca useMemo'nun useCallback'ten farkı, sadece performans artırımı için kullanılabileceği ve her zaman avantajlı olmayabileceği vurgulanmaktadır. Her input değişikliğinde filtreleme işleminin sürekli yeniden hesaplandığı bir örnek üzerinden, useMemo'nun sadece search state değiştiğinde filtreleme işlemini yeniden çalıştırmasını nasıl sağladığı adım adım gösterilmektedir.

      • youtube.com

    • Surge Unboxing ve Kullanım Rehberi

      Bu video, bir teknoloji içerik üreticisinin Surge adlı CDN ve front-end geliştirme aracı hakkında kısa bir unboxing ve kullanım rehberidir. İçerik üreticisi, Surge'ü bir seneden fazla süredir kullanarak memnun kaldığını belirtiyor. Video, Surge'ün npm ile kurulabilen bir CLI (komut satırı arayüzü) olduğunu ve front-end projelerinin kolayca yayınlanabileceğini anlatıyor. Surge, geliştirme aşamasındaki arayüzleri yayınlamak için ücretsiz kullanılabiliyor, ancak production için SSL kullanmak istenirse ücret gerektiriyor. İçerik üreticisi, Surge'ün nasıl kurulacağını, statik dosyaların nasıl yayınlanacağını ve custom domain kullanımı gibi temel özelliklerini gösteriyor. Ayrıca, Surge'ün her ölçekte arayüz projelerini yayınlayabildiğini ve her build işleminde otomatik olarak test çalıştırılabilmesini sağladığını vurguluyor.

      • youtube.com

    • JavaScript Eğitim Videosu: Giriş ve Temel Kullanımı

      Bu video, bir eğitmen tarafından sunulan JavaScript eğitim serisinin ilk bölümüdür. Eğitmen, Visual Studio Code kullanarak JavaScript'in temel kullanımını göstermektedir. Video, JavaScript'in ne olduğu ve neden öğrenilmesi gerektiği hakkında kısa bir girişle başlıyor. Front-end developerların mutlaka öğrenmesi gereken üç dil (HTML, CSS ve JavaScript) arasında yer alan JavaScript'in, web sayfalarında buton tıklama gibi interaktif özellikler eklemesine olanak sağladığı anlatılıyor. Ardından, Visual Studio Code'da basit bir örnek üzerinden JavaScript'in HTML içeriğini nasıl değiştirebileceği gösteriliyor. Eğitmen, bir p etiketi ve buton kullanarak, butona tıklandığında p etiketinin içeriğinin nasıl değiştirilebileceğini adım adım kodlayarak açıklıyor.

      • youtube.com

    • CSS Flexbox Eğitim Videosu

      Bu video, Prototurk.com için hazırlanmış bir eğitim içeriğidir. Bir eğitmen tarafından sunulan front-end dersinin bir bölümüdür. Videoda, CSS Flexbox kullanarak sosyal platform UI bileşenlerinin nasıl tasarlanacağı adım adım gösterilmektedir. Eğitmen, Google Fonts'tan Mulish fontunu ekleyerek başlayıp, sıfırlama yaparak tasarım sürecini anlatmaktadır. Tasarım, "Front-End Değil" adlı bir site için hazırlanmış olup, komponentler, yazar listesi ve avatarlar gibi bölümlerden oluşmaktadır. Video boyunca flexbox özellikleri (display flex, align items, flex wrap, border radius, transition) ve CSS stilleri detaylı olarak açıklanmaktadır. Ayrıca, sosyal platform UI bileşenleri (follow button, like button, location) gibi tasarım elemanlarının nasıl oluşturulacağı da gösterilmektedir.

      • youtube.com

    • Opsie'de Front-End Gelişim ve AWS Yapılandırma Sunumu

      Bu video, Ankara Üniversitesi Bilgisayar Mühendisliği mezunu bir front-end geliştiricisinin Opsie şirketindeki kariyeri ve teknolojik gelişim süreci hakkında yaptığı bir teknik sunum ve ardından soru-cevap oturumudur. Sunum, konuşmacının kendi tanıtımı, Opsie'deki teknolojik değişimler, front-end yapısının tarihsel gelişimi ve AWS web yapılandırması olmak üzere dört ana başlıkta yapılandırılmıştır. Konuşmacı, 2015'ten günümüze kadar Opsie'de kullandıkları teknolojileri (Java, AngularJS, ReactJS, TypeScript) ve Amazon Web Servisleri (AWS) kullanarak front-end yapısına nasıl adapte olduklarını anlatmaktadır. Soru-cevap bölümünde, Mustafa, İlker, Tanrı, Arif ve Selçuk gibi katılımcılar, farklı frontend framework'lerinin (Angular, React, Vue) kullanımı, TypeScript'in avantajları, statik dosyaların S3 üzerinde yönetimi, frontend ve backend entegrasyonu, test stratejileri ve cloud platform kullanımı gibi konulara değinmektedir. Konuşmacılar ayrıca CORS sorunları, CloudFront CDN çözümü, API Gateway kullanımı ve farklı domainler için yapılandırma zorlukları gibi teknik konuları da ele almaktadır.

      • youtube.com

    • Panda Network ve Panda Uygulaması Hakkında Sunum

      Bu video, bir tasarımcının ve Panda Network'in kurucusunun kendi projeleri hakkında yaptığı bir sunum formatındadır. Konuşmacı, tasarım alanında deneyimli biri olarak kendi yolculuğunu ve Panda Network'in gelişimini anlatmaktadır. Sunumda öncelikle konuşmacının 2000'li yıllardan günümüze kadar olan tasarım yolculuğu kronolojik olarak ele alınmakta, ardından Panda uygulamasının özellikleri, kullanıcı istatistikleri ve gelecek planları paylaşılmaktadır. Video, Panda Network'in 2015'te kurulduğu, tasarım ve geliştirme odaklı projelerin tek çatı altında toplandığı bilgisiyle devam etmekte ve son olarak Panda Focus uygulamasının gelecekteki gelişim planları hakkında sohbet edilmektedir. Sunumda ayrıca Panda uygulamasının 166 ülkeden kullanıcı aldığı, UX designer ve front-end developer'ların en çok kullandığı, 17 milyon tekil kullanıcıya ulaştığı ve ekran koruyucu olarak kullanılabileceği belirtilmektedir. Konuşmacı, Panda Max projesi, Panda Premium, Flexib MacBook, kendi jobboard'u, Gmail ile login olan uygulama ve Asmating uygulaması gibi gelecek projeleri hakkında da bilgi vermektedir.

      • youtube.com

    • Atomik Tasarım ve Front-End Geliştirme Eğitimi

      Bu video, Fatih Kadir Akın tarafından sunulan bir eğitim içeriğidir. Fatih, Protel'de yazılım geliştiricisi olarak çalışmakta, C: Istanbul Org topluluğuna üyesidir ve "Modern JavaScript" adlı bir kitabın yazarıdır. Video, atomik tasarım kavramını, tasarım tarihindeki gelişim sürecini ve Brad Frost'un bu kavramı sistematikleştirmesini anlatmaktadır. İçerikte atomik tasarımın temel prensipleri (atom, molekül, organizma, şablon), style guide kavramı ve tasarım dilinin önemi detaylı olarak ele alınmaktadır. Ayrıca, React, Vue.js ve Angular gibi farklı framework'lerde komponent yapısının nasıl uygulanabileceği ve dosya dizin yapısının nasıl ayarlanacağı konuları da işlenmektedir. Videoda ayrıca tasarım analizi süreci Instagram örneği üzerinden gösterilmekte, kendi şirketinde geliştirilen bir style guide örneği paylaşılmakta ve atomik tasarımın iş akışını nasıl değiştirdiği anlatılmaktadır. Son bölümde ise Suat Bey ile yapılan bir teknik sohbet formatında dosya dizin yapısı hakkında bilgiler paylaşılmaktadır.

      • youtube.com

    • Amazon Web Services Amplify ve GraphQL API Geliştirme Eğitimi

      Bu eğitim videosunda Hatice Edis, Proteintech şirketinde front-end developer olarak çalışan bir yazılım geliştirici, Amazon Web Services'in Amplify toolunu ve GraphQL API geliştirme sürecini anlatmaktadır. Video, Amplify toolunun ne olduğu, nasıl indirileceği ve temel komutlarının (amplify head, configure, console, init, run, push, status, pull, environment, publish, logat, mock, category, update, remove) açıklanmasıyla başlıyor. Ardından GraphQL API oluşturma, authentication ayarları, DynamoDB entegrasyonu ve Epify kullanarak backend servisi oluşturma adımları gösteriliyor. Son bölümde ise oluşturulan API'nin bir todo uygulaması üzerinden nasıl kullanılacağı, hata ayıklama, güncelleme işlemleri ve servisin fiyatlandırması anlatılıyor. Eğitim yaklaşık 10 dakika daha devam edecek ve son beş dakikada soru-cevap bölümü olacak şekilde planlanmıştır. Ayrıca, farklı cihazlarda geliştirme ortamlarını nasıl lokalize edebileceğiniz ve servisin diğer AWS servisleriyle nasıl entegre edilebileceği de videoda ele alınan konular arasındadır.

      • youtube.com

    • Front-End Geliştirme Eğitim Videosu: Git ve Deploy İşlemleri

      Bu video, bir eğitim serisinin bir parçası olup, bir eğitmen tarafından sunulan front-end geliştirme dersidir. Video, önceki derste yapılan bir hata düzeltmesiyle başlayıp, Git ile build klasörünün yönetimi ve Search SSH ile kodun canlı sunucuya deploy edilmesi konularını ele almaktadır. Eğitmen, build klasörünün Git'ten nasıl gizleneceğini, dosyaların nasıl commit edileceğini ve Search SSH ile kodun nasıl canlı sunucuya gönderileceğini adım adım göstermektedir. Video, front-end geliştirme serisinin başlangıç kısmını tamamlamakta ve bir sonraki derslerde CSS ve JavaScript odaklı modüler web uygulaması yazmanın detaylarına değinileceğini belirtmektedir.

      • youtube.com

    • Angular.js ve Firebase Entegrasyonu Eğitim Sunumu

      Bu video, Beşiktaş'ta gerçekleşen bir teknoloji etkinliğinde Markföy'de front-end geliştiricisi olarak çalışan bir konuşmacının Angular.js ve Firebase entegrasyonu hakkında yaptığı kapsamlı bir eğitim sunumudur. Sunum, Bahattin adında bir konuşmacının ERP konusunda çalışma yaptığı bir soru-cevap oturumuyla sonlanmaktadır. Sunum, Angular.js'in temel özellikleri ve avantajları ile başlayıp, Firebase'in ne olduğu, özellikleri ve kullanım alanları hakkında detaylı bilgiler sunmaktadır. Ardından Angular ile Firebase'in entegrasyonu, AngularFire kütüphanesinin kullanımı, veritabanı işlemleri için kod örnekleri ve veri modellemesi anlatılmaktadır. Son bölümde ise katılımcıların soruları yanıtlanmakta ve Firebase'in ölçeklenebilirlik özellikleri, maliyet politikası ve farklı veritabanı sistemleriyle karşılaştırması yapılmaktadır. Sunumda ayrıca Firebase'in gerçek zamanlı veri aktarımı, platform bağımsızlığı, güvenli yapısı, hızlı performansı ve farklı dil desteği gibi avantajları vurgulanmakta, veri çekme, güncelleme, silme işlemleri ve asenkron işlemlerin yönetimi örneklerle gösterilmektedir.

      • youtube.com

    • CSS'de 100vw Viewport Birimi ve Scroll Bar Gutter Stable Değişiklikleri

      Bu podcast, Kevin adlı bir front-end geliştiricisinin sunduğu "General Musings" adlı bir podcasttir. Kevin, front-end geliştirme konularında haftalık içerikler paylaşmaktadır.. Podcast, Chrome'un CSS'de 100vw viewport birimini scroll bar farkında hale getirmesi ve scroll bar gutter stable özelliğinin kullanımını ele almaktadır. İlk bölümde 2023'te CSS çalışma grubu tarafından kararlaştırılan ve Chrome 145'te uygulanacak 100vw viewport biriminin scroll bar farkında hale getirilmesi anlatılırken, ikinci bölümde scroll bar gutter stable özelliğinin 12 milyon web sitesi üzerinde yapılan analizle incelenmesi ve sadece 38 sitede kullanıldığı belirtilmektedir.. Video ayrıca, bu değişikliklerin Chromium tabanlı tarayıcılarda (özellikle Chrome) çalıştığını, diğer tarayıcılarda henüz desteklenmediğini ve Mac kullanıcıları için scroll barları nasıl aktif edebilecekleri konusunda bilgi vermektedir. Kevin, viewport birimlerinin gereksiz yerlerde kullanılmaması gerektiğini ve CSS'in doğru kullanımını öğrenmenin önemini de vurgulamaktadır.

      • youtube.com

    • 30 Yıllık Yazılım Deneyimi Üzerine Soru-Cevap

      Bu video, 6 yaşından beri yazılım yapan ve 30 yıllık deneyime sahip bir uzmanla yapılan soru-cevap formatındadır. Videoda yazılım kariyeri, front-end geliştirme, junior front-end pozisyonlarına başvuru, React ve Angular gibi front-end framework'leri, veritabanı teknolojileri ve mikro servisler gibi konular ele alınmaktadır. Konuşmacı, yazılım kariyerinde başarılı olmak için çalışma, domain design ve sürekli öğrenme gibi önemli noktaları vurgulamaktadır. Ayrıca videoda staj başvurusu yaparken dikkat edilmesi gereken noktalar, farklı mühendislik dallarından yazılım kariyerine geçiş, not ortalamasının iş hayatındaki önemi ve kod yazım tarzı geliştirme yöntemleri gibi konular da tartışılmaktadır. Konuşmacı, kendi deneyimlerinden yola çıkarak kod okumak ve farklı yazılımcıların kodlarını incelemek gibi tavsiyelerde bulunmaktadır.

      • youtube.com

    • Deneyim Tasarımcısı Furkan Açıkgöz ile Röportaj

      Bu video, deneyim tasarımcısı Furkan Açıkgöz ile yapılan bir röportajdır. Furkan, Kocaeli'de doğup büyüyen, İstanbul'da yaklaşık on yıldır yaşayan ve şu an Iyzico'da çalışan bir deneyim tasarımcısıdır. Röportajda Furkan'ın kariyer hikayesi, kullanıcı deneyimi ve tasarım alanına nasıl yöneldiği anlatılmaktadır. Ayrıca tasarım süreci, tasarımın iş ve kullanıcı ihtiyaçlarını nasıl karşıladığı, araştırmaların, kullanıcı testlerinin ve veri analizlerinin önemi ele alınmaktadır. Röportajda Furkan'ın Markafoni'de front-end developer olarak çalışırken UX konusuna ilgi duyması, kullanıcı testleri deneyimleri ve şu anki Iyzico'daki çalışma süreci hakkında detaylı bilgiler paylaşılmaktadır. Tasarmanın sadece estetik değil aynı zamanda iş ve kullanıcı ihtiyaçlarını da karşılaması gerektiği vurgulanmaktadır.

      • youtube.com

    • Web Tasarım ve Programlama Eğitimi Tanıtımı

      Bu video, bir eğitmen tarafından sunulan web tasarım ve programlama eğitimi hakkında bilgilendirici bir tanıtım içeriğidir. Video, web tasarım ve programlama eğitiminin iki ana aşamasını detaylı olarak anlatmaktadır. İlk aşama front-end geliştirme olup, Photoshop ile başlayıp HTML, CSS, JavaScript ve jQuery gibi teknolojilerle devam etmektedir. İkinci aşama ise backend programlama olan PHP ve MySQL veritabanı ile ilgilidir. Ayrıca, web sitesinin yayınlanması, SEO teknikleri ve bakım süreçleri de eğitim kapsamında yer almaktadır. Video, web tasarım ve programlama eğitimi almak isteyenler için kapsamlı bir rehber niteliğindedir.

      • youtube.com

    • Figma'dan Kod'a ve Deploy Edilmiş Siteye Nasıl Geçiş Yapılır

      Bu video, bir front-end mühendisi tarafından sunulan bir eğitim içeriğidir. Sunucu, Figma'dan kod'a ve deploy edilmiş siteye geçiş sürecini adım adım göstermektedir.. Video, Plasmic adlı görsel sayfa oluşturucusunun nasıl kullanılacağını anlatmaktadır. İçerikte, Figma'dan tasarım dosyalarının nasıl kopyalanacağı, Plasmic'e nasıl aktarılacağı, linklerin nasıl ekleneceği ve GitHub'a nasıl deploy edileceği gösterilmektedir. Ayrıca, projenin hem GitHub Pages'a hem de yerel olarak nasıl çalıştırılacağı da açıklanmaktadır. Video, bir sonraki bölümde Plasmic'in tasarım araçlarının nasıl kullanılacağını anlatacağını belirterek sona ermektedir.

      • youtube.com

    • Front-End Developer Olmak İçin Yol Haritası

      Bu video, bir yazılımcının kendi deneyimlerinden yola çıkarak front-end geliştirme yolculuğunu anlattığı eğitim içeriğidir. Konuşmacı, izleyicilerden gelen "front-end developer olmak için hangi dilleri öğrenmem gerekiyor?" sorusuna yanıt veriyor. Video, front-end geliştirme yolculuğunu adım adım anlatan bir roadmap sunuyor. İçerik, internet çalışma prensiplerinden başlayarak HTML, CSS ve JavaScript gibi temel dilleri, responsive design, version control sistemleri, commandline kullanımı, package managers ve pre-processors gibi konuları kapsamaktadır. Konuşmacı, kendi öğrenme sürecini paylaşarak, temel teknolojileri öğrendikten sonra kendi projeleriyle pratik yapmanın önemini vurguluyor. Videoda ayrıca profesyonel yazılım geliştirme ve hobi olarak öğrenme arasındaki farklar, "tutorial tuzağı" kavramı ve Google, Stack Overflow gibi kaynakların kullanımı gibi konular da ele alınıyor. Konuşmacı, şu anda JavaScript, HTML, CSS gibi temel teknolojileri öğrendiğini ve gelecekte framework'leri ve veritabanı kullanımını öğrenmek istediğini belirtiyor.

      • youtube.com
  • Yazeka sinir ağı makaleleri veya videoları özetliyor