Fatih Acet

Fatih Acet

Frontend Engineer at GitLab.com

twittergitlabgithubenvelope-olinkedinyoutubeinstagramAbone Ol!

Front End Testing ve Continuous Integration

TL;DR

Bu yazimda Front End gelistirme surecleri icin test ve CI entegrasyonlarini en iyi yontemlerle (best practice) yapmayi gostermek istiyorum.

Kullanilan teknoloji, library ve servisler ise Grunt, Jasmine, Karma Test Runner, IstanbulJS, Coveralls.io ve Travis CI olacak.

Yaziya ait,

  • GitHub reposu buradadir.
  • Travis build sayfasi buradadir.
  • Coveralls kod coverage gecmisi buradadir.
  • Repo’yu clone’ladiktan sonra calistirmak icin suraya bakabilirsiniz.

Suradaki kendi repom icin kabaca Grunt, JasmineJS, Karma, IstanbulJS, Coveralls ve Travis stack’inden olusan bir CI (Continuos Integration) workflow’u oturtmustum. Grunt ile task’lari otomatize ediyorum, Jasmine ile testlerimi yaziyorum, Karma ile testlerimi calistiriyorum, Istanbul ile test coverage bilgilerimi cikartiyorum, Coveralls ile coverage yuzdemi ve coverage gecmisini ogreniyorum ve Travis ile repoma her push ettigim zaman bu islemlerin otomatik olarak tekrar edilmesini ve testlerimin calistirilmasini ve coverage raporunun Coveralls’a gonderilmesini sagliyorum.

Yukardaki workflow’u oturtmak hic kolay olmadi. Cunku bu kadar araci ve servisi entegre edip bir arada calisacagi bir sistem ortaya cikarmak oldukca zahmetli ve ogrenilecek cok materyal iceriyor. Ayrica daha burada belirtmedigim -yazinin konusu ile ilgili olmayan- bir suru baska Grunt task’im daha var. Onlarinda karmasikligi isin icine girince isler bir adim daha zorlasiyor.

Bu yaziyi hem kendime referans olmasi hem de bu kadar bilgiyi paylasmak icin yaziyorum ve oldukca uzun bir yazi olacaga benziyor. Yapacagimiz islerin listesi su sekilde olacak.

  • Yeni bir GitHub repo’su olusturacagiz.
  • Modul yonetimi icin package.json‘imizi olusturacagiz.
  • Task’larimizi yonetmek icin Gruntfile.coffee‘imizi olusturacagiz.
  • Uygulamamiza ait kodlari yazacagiz.
  • JasmineJS ile uygulamamizin testlerini yazacagiz.
  • Testlerimizi calistirmak icin Karma Test Runner’i entegre edecegiz.
  • IstanbulJS kullanarak kod coverage raporumuzu elde edecegiz.
  • Coveralls.io ile coverage durum ve gecmisimiz
  • Travis ile CI entegrasyonu saglamis olacagiz.

Bu adimlardan sonra gelistirme ortamimizda dosyalarimizi her kaydettigimiz zaman testlerimizin tekrar calismasini ve repomuza her push ettigimiz zaman testlerimizin baska bir ortamda calismasini saglamis olacagiz.

GitHub uzerinde yeni bir repo olusturduktan sonra ilk adim olarak package.json ile baslayalim.

package.json

Grunt kullanacagimiz icin npm kullanmamiz gerekiyor. Ilk adimimiz npm icin gerekli olan package.json olusturmak. Bunun icin en kolay yol calisma dizinimizde npm init demek. npm-init package.json‘i olusturmak icin repo’muz hakkinda bir kac soru soracak ve asagidaki package.json‘i olusturacak. npm-init log’unu da suradaki Gist’de gorebilirsiniz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"name": "FE-CI",
"version": "0.0.1",
"description": "Front End Testing and Continuous Integration",
"main": "index.js",
"scripts": {
"test": ""
},
"repository": {
"type": "git",
"url": "git://github.com/fatihacet/fe-ci.git"
},
"keywords": [ "front-end-testing", "continuous-integration", "ci", "grunt", "karma", "jasmine", "istanbul", "coveralls", "travis-ci"
],
"author": "Fatih Acet",
"license": "MIT",
"bugs": {
"url": "https://github.com/fatihacet/fe-ci/issues"
},
"homepage": "https://github.com/fatihacet/fe-ci",
"devDependencies": {
}
}

Gruntfile.coffee

Bu yazidaki ornek kodlar icin CoffeeScript kullanacagim. CoffeScript, JavaScript’e alternatif yazim sekli olan bir dil. Daha kisa, hizli ve anlasilir bir sekilde kod yazmamiza olanak sagliyor. CoffeeScript kullanacagimiz icin Gruntfile’imiz da coffee formatinda olacak. Asagidaki gibi basit ve bos bir Gruntfile.coffee olusturalim.

1
2
3
4
5
6
7
8
module.exports = (grunt) ->

grunt.initConfig()

grunt.loadNpmTasks 'grunt-npm'

grunt.registerTask 'default', 'Default task',->
grunt.task.run []

Gruntfile’imiz hazir olduguna gore test etmek icin calisma dizinimizde grunt komutunu calistirmamiz gerekli. Fakat bunu suan yaptigimiz zaman asagidaki gibi bir cikti gorecegiz. Cunku load ettigimiz npm task’ini npm ile yuklemedik.

1
2
3
4
5
6
acetz:fe-ci facet$ grunt
>> Local Npm module "grunt-npm" not found. Is it installed?

Running "default" task

Done, without errors.

Gruntfile icinde load ettigimiz task’lari npm install TASK_NAME --save-dev ile yukleyip package.json‘imiza otomatik olarak yazilmasini saglayabiliriz. Suan icin bize gerekli olan grunt-npm‘i yuklemek ve package.json’a kaydetmek icin npm install grunt-npm --save-dev dememiz lazim. Asagidaki gibi bir cikti gormemiz gerekiyor.

1
2
3
4
acetz:fe-ci facet$ npm install grunt-npm --save-dev
npm http GET https://registry.npmjs.org/grunt-npm
npm http 304 https://registry.npmjs.org/grunt-npm
[email protected] node_modules/grunt-npm

Projemiz CoffeeScript ile yazilacagi icin grunt-contrib-coffee task’ini yuklememiz gerekiyor. Bunun icin npm install grunt-contrib-coffee --save-dev calistirmamiz gerekiyor.

Buraya kadar geldigimizde package.json‘imiza --save-dev kullandigimiz icin su satirlarin npm tarafindan eklendigini goruyor olmamiz lazim.

1
2
3
4
5
"devDependencies": {
"grunt-npm": "0.0.2",
"grunt": "^0.4.5",
"grunt-contrib-coffee": "^0.12.0"
}

Coffee task’imiz CoffeScript file’larimizi JavaScript’e donusturecek. Fakat bunu yapmasi icin her defasinda bu task’i elle calistirmamiz gerekiyor. Bunu otomatiklestirmek icin bir file watcher task’i kullanmamiz gerekiyor. Bu watcher her file degistigi anda bizim task’larimizi tekrar calistiracak. Task’in adi grunt-contrib-watch. Yuklemek icin npm install grunt-contrib-watch --save-dev dememiz gerekiyor.

Bu adimdan sonra Gruntfile’imizi configure etmemiz gerekiyor. Projemiz icin gerekli olan kodlarimizi src klasoru altina test’lerimizi de tests klasoru altina ekleyecegiz. build klasorunu ise bizim disimizda otomatik olarak olusturulan dosyalar icin kullanacagiz. coffee ve watch task’larini bu klasor yapisini kullanarak assagidaki Gist’deki gibi configure ettim.

Uygulama kodu

Buraya kadar repo’muz ile ilgili on hazirliklar tamamladik simdi asil kod yazma islemine basliyoruz.

Bu ornek icin basit bir Box class’i yazdim. getWidth getHeight clone scale gibi 4 tane method’u var. Bu Box class’i verdigimiz top, right, bottom ve left degerlerine gore o koordinatlarda bir Box olusturacak. Bu yazi icin basit bir class yazip icine 3-5 tane basit method ekleyebilecegim bir ornek dusunuyordum. Aklima Closure Library’nin Box class’i geldi. Onun kucuk ve basit bir ornegini yaptim diyebilirim. Closure Library’de bu Box class’i element’lerin width, height, margin, padding gibi degerlerini hesaplamak icin kullaniliyor. Bizim ornegimizdeki basit Box class’ini asagidak Gist’de gorebilirsiniz.

Asagidaki kodun koordinat duzlemi uzerindeki halini su sekilde olacaktir.

1
2
3
4
5
new Box
top : 200
right : 400
bottom : 400
left : 100

http://take.ms/iSzEa

Testlerimiz

Ideal durumda once test’ler sonra kod yazilir. Buna Red to Green Testing diyorlar. Yani once kirmiziyi gor sonra yesile cevir. Kirmizidan kasit fail eden test, yesilden kasit ise pass eden test. Fakat ben bu yazimda tam tersini yapicam. Siz yaptigimi degil dedigimi yapin :)

Test framework’u olarak ben Jasmine tercih ediyorum. Oldukca basit bir API’a sahip, async test yazmak sadece bir function cagirmak kadar kolay. Uzun zamandan beri kullaniyorum, gayet yeterli ve basit oldugunu dusunuyorum.

Box class’imiz icin yazdigim testleri asagidaki Gist’de gorebilirsiniz.

Karma Test Runner

Karma AngularJS takimi tarafindan gelistirilmis bir test runner ve oldukca basarili. Calistirmasi ve yonetmesi gayet kolay. Kendi icinde watcher’i ile geliyor. Farkli browser’larda calistirmak icin sadece browser ismini yazmamiz yeterli oluyor. Biz bu ornekte Grunt icinde kullanacagiz ve Karma watcher’ini kullanmayacagiz.

Oncelikle bir karma.conf.js‘a ihtiyacimiz var. Ornek bir karma.conf.jsi asagidaki Gist’de gorebilirsiniz.

Simdi Karma test runner’i Grunt ile entegre etmemiz lazim. Bunun icin once grunt-karma paketini yuklememiz gerekiyor. Karma ile testlerimizi PhantomJS ve Chrome browser’inda calistirmayi dusunuyorum. Dolayisiyla Karma PhantomJS ve Chrome launcher’larini da yuklememiz gerekiyor. Ayrica testlerimizi Jasmine ile yazdigimiz icin Karma Jasmine’i de yuklememiz gerekiyor.

1
2
3
4
5
npm install grunt-karma --save-dev
npm install karma-phantomjs-launcher --save-dev
npm install karma-chrome-launcher --save-dev
npm install karma-jasmine --save-dev
`

Simdi Karma task’imizi Gruntfile.coffee‘miza eklememiz gerekiyor. Soyle basit bir task aslinda. Tek yaptigimiz sadece config file’imizin yerini soylemek.

1
2
3
karma          :
tests :
configFile : 'karma.conf.js'

Simdi task’imizi load edelim.

1
grunt.loadNpmTasks 'grunt-karma'

Ve son olarak default task’imiz icinde karma task’imizi calistiralim.

1
2
3
4
5
6
grunt.registerTask 'default', 'Default task', ->
grunt.task.run [
'coffee'
'karma'
'watch'
]

Buraya kadar gelip terminal’imizde grunt calistirdigimiz anda once coffee task’imiz calisip CoffeeScript file’larimizi JavaScript’e cevirecek, karma task’imiz testlerimizi calistiracak ve watch task’imiz ise dosya degisikliklerini dinleyip coffee ve karma task’larimizi tekrar calistiracak. Sonunda soyle bir cikti gormeyi bekliyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
acetz:fe-ci facet$ grunt
Running "default" task

Running "coffee:src" (coffee) task
>> 1 files created.

Running "coffee:tests" (coffee) task
>> 1 files created.

Running "karma:tests" (karma) task
INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Mac OS X)]: Connected on socket 3lBTlIgNmRlo9kBaPnzW with id 9367162
......
PhantomJS 1.9.8 (Mac OS X): Executed 6 of 6 SUCCESS (0.002 secs / 0.002 secs)
......
Chrome 39.0.2171 (Mac OS X 10.10.0): Executed 6 of 6 SUCCESS (0.027 secs / 0.01 secs)
TOTAL: 12 SUCCESS

Running "watch" task
Waiting...

Istanbul Kod Coverage

Kodumuzu yazdik, testlerimizi de yazdik. Bunlari calistiracak ortamimizi hazirladik. Fakat kodumuzun hangi kisimlarini ne kadari test ettigimizi bilemiyoruz. Bu bilgiye ulasmak ve kodumuzun coverage yuzdesini yukarilara cikarmak icin boyle bir araca ihtiyacimiz var. Ben JavaScript icin en populer kod coverage aracindan biri olan IstanbulJS’i tercih ediyorum. Adi neden Istanbul derseniz, gelistiricisi IstanbulJS’i yazdigi anda butun isimler alinmis, bende halilari ile unlu Istanbul sehrinin ismini sectim demis.

Grunt ve Karma kullanmamiz burada islerimizi cok kolaylastiriyor. karma-coverage paketini yukledigimiz zaman karma.conf.js icine bir kac satir eklememiz yeterli olacak. Oncelikle karma-coverage paketimizi yukleyelim.

1
npm install karma-coverage --save-dev

Simdi karma.conf.js‘imizin icine ekleyecegimiz satirlari gostereyim.

1
2
3
4
5
6
7
8
preprocessors: {
'build/tests/**/*.js': ['coverage']
},
reporters: ['dots', 'coverage'],
coverageReporter: {
type: 'lcov',
dir: 'build/coverage/'
}

Bu satirlari ekledikten sonra grunt calistirdigimiz zaman build/coverage klasoru icinde kod coverage raporumuzu goruyor olacagiz. Asagidaki gorselde gorebilirsiniz.

http://take.ms/j9smK

http://take.ms/d1eVl

http://take.ms/fOxyH

Travis CI ile Continuous Integration adimi

Sabahtan beri bir Continuous Integration tutturduk gidiyoruz. Ne demek bu Continuous Integration. Ustalar soyle demis.

Continuous Integration (CI) is a development practice that requires developers to integrate code into a shared repository several times a day. Each check-in is then verified by an automated build, allowing teams to detect problems early.

CI gelistiricilere ortak kullanilan bir repo’ya gunde bir cok kez kod gondermesini saglayan bir gelistirme pratigidir. Her kod gonderimi otomatik bir surecten gecerek dogrulanmasini ve gelistiricilere problemleri erken fark etmesini saglamaktir, seklinde nacizane tercume edeyim.

Bizim CI entegrasyonumuz, kodumuzu GitHub’da host ettigimiz icin, sagolsun GitHub ve Travis tarafindan saglanmis olacak. Biz GitHub’a kod push ettigimiz zaman yada repomuza bir Pull Request geldigi anda Travis’de bir built baslayacak ve Travis bizim kodumuzu cekecek ve testlerimizi calistiracak. Eger testlerimiz patlarsa mail ile bilgilendirecek.

Bunun icin once Travis’e GitHub account’imiz ile login olmamiz gerekiyor. Daha sonrasinda kendi profil sayfanizda repo’larinizi goreceksiniz. Burada repo’nuzu bulup yanindaki toggle’i ON yapmaniz gerekiyor.

http://take.ms/jYBmj

Bunu yaptiktan sonra GitHub’a gidip Travis CI’in Webhooks and Services kisminda gorunuyor oldugunu dogrulamamiz lazim.

http://take.ms/hVVbO

Simdi repomuza Travis CI’in anlayacagi bir configure dosyasi eklememiz gerekiyor. Travis bunun icin .yml uzantisini tercih etmis. Repo’muzda bir .travis.yml‘i asagida bulabilirsiniz.

1
2
3
4
5
6
7
8
9
language: node_js
node_js:
- '0.10'
install:
- npm -d install
- npm install -g grunt-cli
- npm install -g grunt
script:
- grunt ci

Simdi bir repomuza yeni bir push yaptigimiz zaman Travis’in test’lerimizi calistiriyor olmasi gerekiyor. Soyle bir ekran gormeniz lazim.

http://take.ms/flV4y

Hatta soyle guzel bir mail almaniz da lazim.

http://take.ms/yctn2

Travis benim tercih ettigim CI araci. Travis’e alternatif olarak drone.io, wercker.com gibi araclari da kullanabilirsiniz. Sanirim Travis aralarinda en stabil olani ve digerleri gibi public repo’lar icin ucretsiz.

Coveralls

Travis ile CI olayimizi da hallettigimize gore son adim, Istanbul adiminda olusturdugumuz kod coverage dosyasini Coveralls’a gondermeyi saglamak ve Coveralls.io’da kod coverage gecmisimizi gormek.

Bunun icin once Coveralls.io’ya GitHub ile login olmaniz lazim. Daha sonra tipki Travis’de yaptigimiz gibi repo’larinizin oldugu sayfada kendi repo’nuzu Coveralls’da aktif hale getirmeniz lazim. Asagidaki gorselde gorebilirsiniz.

http://take.ms/3fJEk

Daha sonrasinda coveralls npm paketini yuklemek gerekiyor.

1
npm install coveralls --save-dev

Ve son olarak .travis.yml‘a build bittikten sonra coverage data’mizi Coveralls’a gondermesini soylememiz lazim.

1
2
after_script:
- cat ./build/coverage/**/lcov.info | ./node_modules/coveralls/bin/coveralls.js

Bu asamadan sonra coveralls.io’da soyle bir ekran goruyor olmaniz lazim.

http://take.ms/khL60

Build Status ve Coverage badge’lerinin repo’ya eklenmesi

Coveralls’un sayfasindaki BADGE URLS linkinden Markdown’u kopyalayalim. Asagidaki gorselde gorebilirsiniz.
http://take.ms/RTKVH

Ve Travis’in sayfasinda da Build Passing badge’ine tiklayinca cikan modal’daki Markdown’u kopyalayalim. Asagidaki gorselde gorebilirsiniz.
http://take.ms/LYJSi

Bu islem sonunda Build Status ve Coverage Status seklinde iki tane badge elde ettik. Bu markdown’lari repo’muz icindeki README.md’ye paste edip repo’muzdaki README.md’mizi senlendirebiliriz.


Bu blog post’un hakki aslinda 3-4 farkli blog post olmak. Ilerleyen zamanlarda TDD ve BDD hakkinda daha cok yazi yazmak istiyorum. O yazilarda Jasmine ve Karma’ya daha genis deginirim. Fakat bu yazinin da genel olarak guzel bir amaca hizmet ettigini dusunuyorum. Bastan asaga bir entegrasyon yapmis olduk. Yazi altina yorumlarinizi ve GitHub repo‘suna star, fork ve PR’lerinizi bekliyorum. Hatta hatirlatayim PR gonderirseniz Travis’de bir build baslar, su adrese gidip gorebilirsiniz.

ccc. şuku matters. ccc.

Baska yazilarda gorusmek uzere, saglicakla…

Comments

Tatil 2018 Drone Footage

Kas ve Kalkan'da yaptigimiz 2018 tatilimizin drone videosu. Drone: DJI Spark.

Hangi üniversite ve bölümü tercih etmeyeliyim?

Email bultenine abone olmak icin http://bit.ly/acet-subs Üniversite sınav sonuçları yakında açıklanıyor, tercih dönemi yaklaştı. Bilgem Çakır, Selman Kahya ve ...

Faydalı İpuçları #4: Mac OS Pencere Yönetimi | Better Touch Tool

Email bultenine abone olmak icin http://bit.ly/acet-subs Merhaba arkadaşlar Bu videoda Better Touch Tool kullanarak Mac OS pencere yönetimini ...

Sunum: GitLab ve GitLab Frontend'i

Email bultenine abone olmak icin http://bit.ly/acet-subs Herkese merhaba arkadaslar Software Craftsmanship Turkey'de yaptigim GitLab ve GitLab ...

Vue JS SPA'lari deploy etmek: GitLab CI DigitalOcean ve Surge.sh

Email bultenine abone olmak icin http://bit.ly/acet-subs Bu videoda daha onceden olusturdugumuz bir Vue SPA'i GitLab CI kullanarak DigitalOcean'daki bir ...

Faydalı İpuçları #3: VueJS .native event modifier nedir?

Email bultenine abone olmak icin http://bit.ly/acet-subs Selam arkadaşlar Bu videoda, kullandığımız bir child component'in DOM element'ine ait bir event'i ...

Bolum 3: GitLab Chrome Extension'i yapalim

Email bultenine abone olmak icin http://bit.ly/acet-subs Selamlar Ilk iki bolumunu beraber gelistirdigimiz Chrome eklentisine bu bolumde de devam edecegiz.

Bolum 2: GitLab Chrome Extension'i yapalim

Email bultenine abone olmak icin http://bit.ly/acet-subs Selamlar Birinci bolumune asagidaki linkten ulasabileceginiz GitLab Chrome extension'i yapmaya ...

Bolum 1: GitLab Chrome Extension'i yapalim

Email bultenine abone olmak icin http://bit.ly/acet-subs Selamlar Aniden bir canli yayina basladim fakat aklimda olan bir fikri bos vaktim varken kodlamak ...

Biraz sohbet edip AmsterdamJS Tshirt Çekilişi yapalım

Email bultenine abone olmak icin http://bit.ly/acet-subs Oncelikle biraz sohbet edip, bir kac soru cevap yaptiktan sonra AmsterdamJS'den size ozel getirdigim ...

VLOG #06: AmsterdamJS'e gidiyorum

AmsterdamJS etkinliginde VueJS Best Practices konulu bir konusma yapacagim. AmsterdamJS Vlog serisinin ilk videosunda Istanbul'dan Amsterdam'da ...

Benden haberler ve Refactor vs Rewrite konusu

Email bultenine abone olmak icin http://bit.ly/acet-subs Bu videoda en cok merak edilen konulardan biri olan Refactor ve Rewrite konusunu ele aldim.

Yazilimcilar Tasarim Bilmeli mi?

Hakan Ertan Yazilimcilar Tasarim Bilmeli mi? video serisinin 2. videosunda benim de yer almami istedi ve ayni soruyu cevaplamam icin mikrofunu bana uzatti.

Gunluk Latte’mi beraber yapalim

Her gun kahvaltidan sonra yaptigim kahvemi ufak bir video yapmak istedim. iPhone'daki iMovie'yle editledim ve oldukca kullanisli bir app olmus :)

Vuex #03/03: Vuex olmadan nasil yapariz?

Email bultenine abone olmak icin http://bit.ly/acet-subs Vuex mini serisinin son videosunda bir uygulamayi Vuex kullanmadan nasil gelistirebiliriz hakkinda bir ...

VLOG #05: Yerinde Inceleme: Amsterdam'a yaz gelmis mi?

Amsterdam'da havalarin duzeldigini ve yaz geldigini soyluyorlardi. Dun Amsterdam'a donduk ve bugun yerinde inceledik. Sonuc: daha tam gelmemis ama niyeti ...

Vuex #02/03: 15 Dakikada Vuex konseptleri

Email bultenine abone olmak icin http://bit.ly/acet-subs Bu videoda 15 dk icinde size Vuex konseptlerini kolay bir ornekle anlatmaya calistim. Bir onceki videoda ...

GitLab Workflow: VSCode extension for GitLab

This is a product demo of the VSCode extension I built for GitLab. Below you can find related links. Repository: ...

VUEX #01/03: Nedir? Neden kullaniyoruz?

Email bultenine abone olmak icin http://bit.ly/acet-subs Selamlar arkadaslar Bu video ile kanaldaki teknik videolara donus yaptim. Kanalimda daha once Vuex ...

Drone nasil ucurulmaz? DJI Spark Crash

Bugun Rembrandt Park'da talihsiz bir drone kazasi yasadim. 19mt yukseklikte ve yaklasik 40mt ilerimdeydi drone ve bu yukseklikten agaci gecer diye ...

Bilgem Cakir ile Canli Yayindayiz

Bilgem Cakir'la yazilim ve oyun gelistirme uzerine guzel bir sohbet yapacagiz. Canli yayin suresince Bilgem Cakir'a sorularinizi sorabilirsiniz.

NYC'den Fatih Arslan ve SF'dan Cihangir Savas'la beraberiz

Bundan yaklasik 2 ay once Fatih Arslan ve Cihangir Savas'la beraber bir yayin yapma fikrini konusuyorduk. Ortak takvim ayarlamanin zorlugundan dolayi 2 ay ...

VLOG #02: Amsterdam'da ev aradigim ikinci gun

16 Kasim 2017'de Amsterdam'a tasiniyoruz. O yuzden, Amsterdam'a ev bakmak amacli 3 gunluk kisa bir gezi yaptim. Amsterdam'daki ilk gunumu VLOG haline ...

VLOG #01: Amsterdam'a ev bakmaya gidiyorum

Kasim 2017'de Amsterdam'a tasinmayi dusunuyoruz. O yuzden, Amsterdam'a ev bakmak amacli 3 gunluk kisa bir gezi yaptim. Amsterdam'daki ilk gunumu ...

Evde Kahve Yapiyoruz: Espresso, AeroPress, V60 ve Chemex

Merhaba arkadaslar Bugun uzun zamandan beri sozunu verdigim kahve videosunu sonunda yayinliyorum. Sonmez Kartal ile beraber ayni gunde size 4 farkli ...

Blockchain ve Bitcoin Canlı Yayını Alp Işık ve Erman Taylan

Alp Isik YouTube: https://www.youtube.com/user/isikalp91 Twitter: https://twitter.com/alppIsik Erman Taylan Twitter: http://twitter.com/etaylan e-Bulten: ...

Uzaktan Çalışmak: SSK, Vergi ve Fatura işleri

http://uzaktancalismak.com Bu videoda uzaktan calismakla ilgili yayinladigim sitede eksik kalan ve en cok merak edilen konulardan olan SSK, vergi ve fatura ...

Faydalı İpuçları #2: Koddaki bir yerin neresi tarafından çağrıldıgını bulmak

Merhabalar Bu videoda console.trace'den bahsettim. Eger ulasmaya calistiginiz yerin neresi tarafindan cagrildigini bilmiyorsaniz bir debugger koyup stack ...

Sahibinden.com'da karsima cikan Nijeryali dolandiricilar

Merhaba arkadaslar Bu videoda Sahibinden.com'da MacBook Pro satarken karsima cikan Nijeryali dolandiricilarin hikayesini anlattim. Ozellikle bu videoyu ...

Uzaktan calisilacak is bulmak

Bu videoda uzaktan calismak isteyenlere is bulma konusunda yardimci olacak konulardan bahsettim. CV ve cover letter'in oneminden, farkli islere ...

Logitech C930e ve Samson Go Mic inceleme

Merhaba arkadaslar Bu videoda sizlere yeni aldigim Logitech C930e kamera ve Samson Go Mic'in bir incelemesini ve Nikon D3200 DSLR, Go Pro Hero ...

Kod Review nedir? Neden yapilir?

Bu videoda sizlerin istegi uzerine kod review konusunu anlattim. Kod review'in ne oldugundan, neden onemli oldugundan ve kod review yapan kisinin nelere ...

MacBook Mevzusu: Neden çok da şey yapmamak lazım?

Bu videoda gerek emaillerde gerekse canli yayinlarda olsun sikca sorulan sorulardan biri olan MacBook konusuna degindim. Sorular genelde, "Neden herkes ...

Faydalı İpuçları #1: DevTools Break on özelliği

Yeni bir video konsepti olan Tips & Tricks playlist'inde sizlere gunluk hayatta kullandigim, isimi kolaylastiran, yillarin deneyimi ile ogrendigim kolayliklari 2-3 dk ...

Yazilim gelistirme uzerine Soru Cevap Yayini - 2

Bu aralar bebek telasindan dolayi yeni videolara pek zaman ayiramiyorum. O yuzden bir, bir bucuk saat arasinda sorulariniza cevap vermeye calistigim bir yayin ...

Ozel saglik sigortasi deneyimimiz

Bebegimiz ozel saglik sigortasi kapsaminda dunyaya geldi. Ayrica kisisel olarak 2 yildan fazla suredir ozel saglik sigortasi kullaniyorduk. Ozellikle hamilelik ...

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. yılım bitti. Ne yaptım, ne ögrendim?

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