Fatih Acet

Fatih Acet

Frontend Engineer at GitLab.com

twittergitlabgithubenvelope-olinkedinyoutubeinstagram

JavaScript Debugging ile ilgili bir kac onemli nokta

Bu yazida JavaScript debugging icin onemli olan bir kac puf noktadan bahsedecegim. Bir cok kisinin bildigi bir konu ama bilmeyenlerin gunluk hayatlarini kolaylastiracagini dusundugum icin yazmak istedim. Kisa bir yazi olacak ve ekran goruntuleri Google Chrome’un Developer Tools’undan olacak.

debugger kullanimi

debugger kodumuzun icinde herhangi bir yerde programimizin akisinin durdurmak icin kullanabilecegimiz oldukca yararli bir arkadasimizdir. Ozellikle server tarafindan client’a gonderilen script tag’lari icine yazarsaniz o kodu bulmak icin dakikalarca aramak zorunda kalmazsiniz. Benim en cok kullandigim durum ise ornegin bir buton click’inde calistirilan fonksiyonu DevTools’dan bulmak yerine koddaki fonksiyon icerisine debugger yazip sayfayi yenilemek ve butona tiklamak oluyor. Cok severim kendisini <3

http://take.ms/9R9Q8

Continue to here

debugger yada breakpoint ile kod akisini durdurduktan sonra kodumuzun bir sonraki emin oldugumuz yere kadar ilerlemesini saglamak icin kullanabiliriz. Uzun bir method’u debug ediyorsaniz ve bir akisin en basindan sonuna kadar gitmeniz gerekiyorsa aradaki adimlari atlamak icin kullanabilirsiniz.

http://take.ms/Y8BwA

Conditional breakpoint

Breakpoint’imizin sadece belli bir durumda durmasini istiyorsak kullanabiliriz. Ozellikle bir bug’i fix ederken cok ise yariyor. Diyelim ki for ile bir data icinde donuyorsunuz. 25 tane item’iniz var ama icinden bir tanesi digerleri ile ayni formatta degil. Hata olan satira breakpoint koydugunuz zaman for icinde oldugunuz icin 25 defa ayni yerde durmaniz soz konusu olabilir ama bu sekilde breakpoint’inize bir sart ekleyip “Play” dediginiz zaman sadece sizin sartinizin saglandigi durumda kodun durmasini saglayabilirsiniz.

http://take.ms/h1xUk

Ekran goruntulerini TODOMVC Backbone orneginden aldim.

Comments

Frontend Developer kimdir? Neleri bilmelidir?

Bu video sizlere Frontend Developer'in kim oldugunu, sorumluluklarini ve neleri bilmesi gerektigini anlattim. Umarim yararli bir video olmustur. Begendiyseniz ...

Kullandigim ve isime yarayan bazi uygulamalar

Bu video uzaktan calisirken ozellikle mobil datami ve zamanimi verimli kullanmama yardimci olacak bir kac uygulamayi sizle paylasmak istedim.Bu uygulamalari ...

Server Side Rendering Nedir? VueJS ile basit SSR yapalim

Bu videoda Server Side Rendering'in ne olduguna bakip VueJS ile yaptigim basit bir ornegi sizlerle paylastim. Blogumda YouTube'da yayinladigim videolarin ...

Sektorde Ingilizcenin onemi ve Ingilizce ogrenme ipuclari

Bu videoda esim Didem ile yazilim sektorunde Ingilizce'nin onemi ve Ingilizce konusunda kendinizi gelistirmeniz icin ipuclari verdigimiz bir video kaydettik.

Kolay IK Yazilim Kampi: Genclere egitim ve is firsati

Arkadaslar Kolay IK bir egitim kampi duzenliyor. Yaklasik bir bucuk ay surecek bu egitimde HTML, CSS, JS, NodeJS, Laravel, PostgreSQL, MongoDB, Redis, ...

Git nedir? Neden ve nasil kullaniyoruz?

Ne nedir'in ikinci videosunda Git'den bahsettim. Git'in ne oldugundan, neden kullandigimizdan, oneminden, SSH key'lerin ne oldugundan ve nasil ...

Vue JS, Vue Router ve Vuex SPA Bölüm 4

Vue Router, Vuex ve Firebase kullarak gelistirdigim Vue Single Page Application'in dorduncu bolumu. Bir onceki bolumde uygulamanin anasayfasini yapmistik, ...

Terminal nedir? Neden kullaniyoruz?

Ne Nedir playlist'inin ilk videosunda Terminal'in ne olduguna ve gunluk hayatimizda neden ve nelerde kullandigimizi anlattim. Mac OS icinde yuklu gelen ...

GitLab'da 1. yilim bitti. Ne yaptim, ne ogrendim?

Mayis 2016'da calismaya basladigim GitLab'da bir yil gecirdim ve gectigimiz bir yilin ozetini yapmak icin GitLab'e nasil girdim? Ben GitLab'e girdigimde GitLab ...

Vue JS, Vue Router ve Vuex SPA Bölüm 3

Vue Router, Vuex ve Firebase kullarak gelistirdigim Vue Single Page Application'in ucuncu bolumu. Bu bolumde uygulamamizi ayaga kaldirip, anasayfamizi ...

Vue JS, Vue Router ve Vuex SPA Bölüm 2

Vue Router, Vuex ve Firebase kullarak gelistirdigim Vue Single Page Application'in ikinci bolumu. Bu bolumde Vuex ve Vue Router'in temel prensiplerinden ...

Vue JS, Vue Router ve Vuex SPA Bölüm 1

Vue Router, Vuex ve Firebase kullarak gelistirdigim Vue Single Page Application'in birinci bolumu. Uygulama videolarini ise Playlist'de bulabilirsiniz. Vue JS ile ...

Vue JS, Vue Router ve Vuex SPA Trailer

Vue JS, Vue Router ve Vuex kullanarak gelistirdigim Single Page Application'in tanitim videosu. Uygulama videolarini ise Playlist'de bulabilirsiniz. Vue JS ile ...

Çayı demledin mi? Aile boyu uzaktan çalışma deneyimlerimiz

Bu videoda kanalima esimi de davet ettim, uzaktan calisma tecrubelerimizden bahsettik ve keyifli bir sohbet ortaya cikti. Umarim izlerken siz de keyif alirsiniz.

Jstanbul Meetup: GitLab'da VueJS'i nasil ve neden kullaniyoruz?

Bu videoda 8. Jstanbul Meetup'da, daha once yapmis oldugum bir VueJS sunumu ile bir giris yaptim ve ardindan GitLab'da neden VueJS tercih ettigimizden, ...

All Aspects of Remote Working

The talk about Remote Working I gave in Bilkent University, Ankara.

Yazilim gelistirme ve Frontend uzerine soru cevap canli yayini

Yazilim gelistirme ve Frontend dunyasi uzerine merak ettiginiz sorulara canli yayinda cevap vermeye calisacagim.

Genclere ve kendini gelistirmek isteyenlere tavsiyeler

Bu videoda yazilim sektorunde yeni giris yapacaklara ve kendisini gelistirmek isteyenlere nacizane tavsiyelerimi aktariyorum. Frontend ve yazilim gelistirme ...

JS egitim serisi ve Pro JS kitabi hakkinda

Dogukan Guven Nomak ve Fatih Kadir Akin ile cektigimiz jQuery Biliyorum Ama JavaScript Bilmiyorum videosunda bahsettigim JS kitabi ve JS egitimleri ...

VueJS 11: Swagger ile API tasarlayalim

Bu videoda, Swagger kullanarak basit bir API tasarlayacagiz ve bir sonraki videoda bu API'i kullanarak Vue Form islemleri yapacagiz. Swagger cok uzmani ...

VueJS ile GitLab icin proje yapiyorum

GitLab'de bulunan merge request widget'ini VueJS ile refactor ediyorum. Canli yayinda bakalim neler olacak :)

VueJS 10: Vue JS icin Unit ve E2E testler yazmak

Bu videoda Vue JS uygulamamizi test etmekteyi anlattim. Vue JS uygulamamiz icin Karma, Mocha ve Chai ile Unit test ve Nightwatch ile E2E testler yazdik.

VueJS 09: BONUS 1: Eksik kalan kisimlar

Bu videoda bir onceki videolardan eksik kalan kisimlari anlattigim bir video oldu. Filters, nextTick, event modifiers gibi guzel ve farkli konuladan bahsettim.

VueJS 08: Vue Router

Serinin 8. videosunda Vue Router'dan bahsettim. Vue Router kullanarak biri basit digeri daha kapsamli iki ornek yaptik. Bu videoda yazilan kodlari GitHub ve ...

VueJS 07: Giphy API kullanarak yeni bir app yapalim

Bu videoda bir onceki videoda kullanmaya basladigimiz vue-cli ile yeni bir proje olusturduk ve Giphy API'ini kullanarak yeni bir app yaptik. Diger app'den farkli ...

VueJS 06: vue-cli ve .vue dosyalarinin yapisi

Bu videoda vue-cli'dan ve vue-cli'in kullanimindan bahsettik. Basit bir webpack projesi olusturup, HTML, CSS ve JS'imizin bir arada oldugu .vue dosyalarinin ...

VueJS 05: Components

Bu videoda bir onceki ornekte yaptigimiz Amazon Cart benzeri ekrani Vue Component'i olacak sekilde refactor ettik. Vue'da Component'ler cok onemli bir yer ...

VueJS 04: Computed Properties ile dinamik data kullanimi

VueJS serisinin dorduncu videosu. Daha onceki videolari kanalimda bulabilirsiniz. Bu videoda VueJS'deki Computed Properties'den bahsettim. Bir onceki ...

VueJS 03: Amazon benzeri bir shopping cart yapiyoruz

Bu videoda VueJS'deki v-for ozelligini kullanarak dinamik olarak server'dan cektigimiz data ile Amazon Shopping Cart benzeri bir ekran yapiyoruz. Bu videoda ...

VueJS 02: Hello World!

Bu videoda VueJS'e kod uzerinde giris yaptik. Konu listesi 00:40 GitHub VueJS reposu 01:16 Vue.js anasayfasi 02:19 Awesome Vue 03:00 Vue Hello World ...

VueJS 01: VueJS ile Uygulama Geliştirme Sunumu

VueJS ile ilgili video serimin ilk videosu. Bu video'da daha önce yaptığım VueJS sunumunu tekrar anlattım, bu sayede VueJS'e genel bir bakış atmış olduk.