DEV Community: Onur Elibol

Frontend Developerlar için İş başvurusu ve Kariyer tavsiyeleri

Onur Elibol — Sun, 21 Mar 2021 22:10:43 +0000

Herkese merhaba!

Yazılım dünyasına adım atmaya hazırlanan arkadaşlar ile, bu zamana kadar edindiğim tecrübeleri derleyip paylaşmak istedim. Bu yazıyı, ağırlıklı olarak Frontend developerlar için hazırlamış olsam da, değineceğim bir çok nokta yazılım dünyasındaki herhangi bir iş başvurusu için de kullanılabilir. Yazıya iş başvurusu yapmadan önce nelere dikkat edilmeli, iş başvurusu yaparken şansınızı artıracak, önemli olabilecek, aklıma gelen şeyleri dahil etmeye çalıştım. Bahsettiğim her madde, şirketten şirkete farklılık gösterebilir. Bunların dışında bir kaç kişisel tavsiyemi de ekledim.

Çayınızı kahvenizi aldıysanız başlayalım :)

Başvurmadan önce nelere dikkat etmeliyim?

Başvurmadan önce dikkat etmeniz gerekenlerden birincisi, eğer ilan ingilizce verilmiş ise ve ingilizce bir gereklilik olarak belirtilmiş ise, ve yeterli ingilizce derecesine sahip değilseniz başvurmayı tekrar gözden geçirin derim :) Global düzeyde iş yapan şirketler, adayları pre-screening'den geçirirler. İngilizce yeterliliğiniz yok ise, ya pre-screening'den önce elenirsiniz, ya da pre-screening'de İK ile karşılaştığınızda hızlı bir şekilde elenirsiniz.

İngilizceye önem verin, yeterli olmaya değil, çok iyi bir noktaya getirmeye çalışın. Globalde faaliyet gösteren şirketlerde iş yapmak istiyorsanız, kendinizi alanınızda daha iyi bir noktaya taşımak istiyorsanız, ingilizce çok çok çok önemli. Dokümantasyonları okuyabilip daha iyi anlamak, yeni çıkan herşeyi hızlıca öğrenebilmek, iletişim kurabilmek adına ingilizce yazılım dünyasının olmazsa olmazı.

Bunun dışında, yeterlilik kısmında "mutlaka gerekli" olan teknolojilere dikkat edin. 1-2 tanesi eksik ise sorun olmayabilir, nitekim tamamı eksik ise muhtemelen dönüş alamayabilirsiniz. Biraz da şans işi bu kısım, çünkü bazı şirketler spesifik bi alanda uzmanlaşmış birini ararken, diğerleri verdikleri ilan üzerinden hem uzman, hem de yetiştirmek için başlangıç seviyesinde birini arıyor olabilirler.

Linkedin profilinizi mutlaka tamamlayın, güncel tutun. Unutmayın, Linkedin Facebook veyahut Instagram değil, profesyonel sayılabilecek bir resminizi koyun. Teknik bilginizi, iş/staj deneyimlerinizi ekleyin. Linkedin üzerinde aktif olmaya çalışın, okuduklarınızı paylaşın, ilgi duyduğunuz alanlarda bulunan gruplara katılın. Head hunter'lar buradan size kolaylıkla erişebilsin.

CV'de nelere dikkat etmeliyim?

En önemli etkenlerden birisi, CV'nizin göze hitap etmesi. Özellikle Frontend geliştiriciler için, bunun kritik önem taşıdığını düşünüyorum. Beyaz sayfanın üzerine gelişi güzel, rapor gibi yazılmış bir CV, akşama kadar 147 adet başvurunun üzerinden geçmiş olan, IK'da çalışan Sevda hanımın gözüne hitap etmediği (edemediği) için arada kaynayabilir (bkz. burası çokomelli). Sabır gösterip CV'ye baktığında ise, neyin nerede yazdığını kolay bir şekilde takip edemeyeceği için sizi pas geçebilir (bkz. UX). Becerilerinizi henüz CV yazma aşamasında göstermeye başlayın. Bildiğiniz teknolojileri, okuduğunuz okulu, iş deneyiminizi, diğer olması gereken herşeyi, bir web uygulaması yapar gibi ciddiye alarak güzel bir layout ile yapın. Sıfırdan uğraşmak istemezseniz, ufak bir arama ile bir sürü template bulabilirsiniz.

Örnek:

Eğer başvuracağınız iş ilanı ingilizce ise, CV'nizi ingilizce olarak hazırlayıp gönderin. Başvurduğunuz şirket Global bir şirket ise, İK bölümü Türkiye'de olmayabilir. Bu durumda CV'nizden birşey anlaşılmayacağı için büyük ihtimalle pas geçerler.

Bir diğer önemli nokta ise yazım hataları. CV'nizi yazdıktan sonra mutlaka ama mutlaka herşeyi dikkatlice kontrol edin. CV'nize bakan İK olabilir, başka bir yazılımcı da olabilir (muhtemelen işiniz daha zor olur bu durumda). "CV'de bir sürü yazım hatası var, acaba nasıl kod yazıyo?" gibi bir soru oluşturacak hatalar olmasın. Netice olarak yaptığımız iş dikkat gerektiren bir iş ve dikkatsiz olduğunuz izlenimini bırakmak istemezsiniz.

Mutlaka ama mutlaka github profil linkiniz, var ise bitirdiğiniz projelerin linki CV'de bulunsun. Neyi nasıl yaptığınızı, yazdığınız kodu, ne seviyede olduğunuzu gösterebilmek adına çok önemli. (Github ile ilgili daha derin bilgi yazının ilerleyen kısımlarında).

İş/staj deneyiminizin altında, kısada olsa bu süreçte neler yaptığınızı, hangi teknolojileri kullandığınızı açıklayın.

İlgi çekebilecek kısa bir giriş kısmı yazın. Bu kısımda hangi teknolojilere hakimsiniz, hangi alanda kendinizi geliştirmek istiyorsunuz, hangi konularda kendinize güveniyorsunuz bunları kısa ve net bir şekilde yazın.

Örnek:

Hi! My name is X and I have been passionate about development of robust system infrastructure, with consideration of customer needs, functionality, latest technology and programming standards. My main domain is X, however, I am interested in Y and Z also.

Mezuniyet belgesi, transkript vs. gibi ekstra dökümanları göndermeyin, CV'nize eklemeyin. İşin açıkçası Türkiye'de bunları CV'de görmeyi bekleyen şirketler varmı bilmiyorum, fakat globalde bu tarz belgelerin hiç bir önemi yok.

Doğruluğu olmayan, emin olmadığınız ve arkasında duramayacağınız hiç bir şeyi eklemeyin. Bilmediğiniz veyahut çok üstünkörü bildiğiniz bir teknolojiye aşırı hakimmiş gibi göstermeyin. Unutmayın, CV'nize eklediğiniz her şey karşı taraftan size yol, su, soru, assignment olarak dönebilir.

Github ve hobi projelerimde nelere dikkat etmeliyim?

Bu bölümdeki bilgilerin çoğunu özellikle Frontend developerlar için yazıyorum. Diğer alanlar için de prensip olarak uygulanabilecek bir kaç şey olabilir.

Bu noktada en önemli tavsiyem, bolca hobi projesi yapıp Github'a ekleyin. Yazdığınız her satır kod Github'da bulunsun. Hobi projesi için, "ama benim aklıma bir şey gelmiyor" dediğinizi duyar gibiyim :) Bu projelerin çok ileri seviyede olması gerekmiyor. Kendi portfolyönüzü oluşturduğunuz kişisel bir web sayfası, basit bir to do list uygulaması, basit bir oyun (quiz, adam asmaca), film kütüphanesi gibi şeyler yapılabilir. Burada önemli olan şey yaptığınız projenin ne kadar karmaşık olması değil, sizin, yazılım dünyasına olan ilginizi ve öğrenme hevesinizi gösterebilmeniz.

İkinci önemli olan şey ise bir önceki maddede bahsettiğim hobi projelerinizin düzgün bir şekilde çalışması. Örneğin kişisel web sayfası yaptıysanız, deploy ettiğiniz yerde çalışıyor olsun. Evet, yaptığınız şey basit olabilir, ama özenle yapılmış olsun, hataya yer bırakmayın. Unutmayın, profesyonelliğe adım atmak istiyorsunuz, yaptığınız işler de olabildiğince profesyonel bir şekilde yapılmış olsun, gelişigüzel yapılmış görünmesin. Portfolyönüzü teknik anlamda kontrol eden kişiye temiz ve dikkatli çalıştığınızı, size güvenebileceğini gösterin.

Yine hobi projelerinizle alakalı olarak; kodunuzu mutlaka ama mutlaka ingilizce yazın. Yazılım dünyasının dili ingilizcedir. Türkiye içerisinde ufak/orta çaplı bir şirkete başvurduğunuzda bu sorun olmayabilir, nitekim globalde iş yapan bir şirkete başvuracaksanız, bu çok önemli. İngilizce kod yazmayı prensip haline getirin. Global standartları takip edin ve uygulamaya çalışın.

create-react-app veyahut vue/cli ile oluşturduğunuz projelerde, README.md dosyasını olduğu gibi bırakmayın. Projenizle ilgili ufakta olsa bir açıklama yazın, bir yere deploy ettiyseniz linkini koyun.

.gitignore dosyasını oluşturup, repository'de bulunmaması gerekenleri (.DS_Store, thumbs.db vs.) mutlaka ekleyin. JavaScript projeleri için, node_modules klasörü örneğin. Bu klasörün repository'de bulunması amatörce bir hata olarak algılanabilir.

ayrica bkz.

Github kullanmak sizin için standart olsun. Her proje, her satır, her karakter için Github kullanın ve Github'i en efektif şekilde kullanmaya çalışın. Bütün değişikliklerinizi tek commit içerisine koyup çarşamba pazarının dijital hali gibi göndermeyin. Her yaptığınız değişikliği ayrı ayrı commitler ile gönderin. Bunun sebeplerinden birisi, projenizin repository'de geçmişini çok net bir şekilde gösterebilmek. İkinci sebebi de kendiniz için, yaptığınız bir değişiklikte projeniz çalışmamaya başlar ise, o noktaya rahatlıkla dönebilmeniz ve hataya neyin sebep olduğunu bulabilmek (Git'in binbir faydasından sadece birisi). Command Line üzerinden git kullanmak hoşunuza gitmiyor ise, ücretsiz olarak Source Tree kullanıp işleri kolaylaştırabilirsiniz. Git kullanımının bir çok farklı metodolojisi var, bu konuyu da derinlemesine araştırmanızı tavsiye ederim.

Bunların dışında kodunuza özen gösterin, yazım hataları, indentation, code-style'a dikkat edin, tutarlılık olsun.

Örnek vermek gerekirse, bir yerde

if (case) {
  console.log()
}

yazdıysanız, başka bir yerde

if(case) {
    console.log()
  }

gibi bir tutarsızlık olmasın (bununla ilgili ek bilgi Bonus kısmında, bkz. ESLint).

Bonus

Yukarıda bahsettiğim şeyler dışında iletmek istediğim bir kaç kişisel tavsiyem ve bir kaç ek bilgi daha var. Uygulayıp uygulamamak sizlere kalmış. Nitekim global anlamda iş yapabilmek ve kendinizi/yaptığınız işi bir üst seviyeye taşıyabilmek adına uygulamanızı tavsiye ederim.

Yukarda en son "kodunuzda tutarsızlık olmasın" demiştim. Bu tarz hataları gidermek için ve JavaScript'te best-practice olan şeyleri hızlıca uygulayabilmek için ESLint ve Prettier gibi araçları mutlaka kullanın. (bkz. ESLint nedir?) Her IDE'de (VS Code, IntelliJ vs.) kodunuzu otomatik olarak düzeltmek için bir fonksiyon vardır (Format Document), en kısa zamanda bunu uygulamaya başlayın ve alışkanlık haline getirin.

Temiz kod yazmaya özen gösterin. Yazılım dünyasında her şey teknik anlamda guru olmaktan ibaret değil. Bir noktadan sonra kaç dil bildiğinizin veyahut ne kadar hızlı iş çıkardığınızın pek bir önemi kalmıyor. Yazdığınız kodun temiz olması, kolaylıkla maintain edilebilmesi, sizden sonra projeye göz atan kişinin yazdığınız kodu kolaylıkla anlayabilmesi de çok önemli. Her şey kod yazıp çalıştırmaktan ibaret değil. Tavsiyem, kod yazarken kitap yazdığınızı ve sizden sonra başka birisinin bunu okuyacağını/anlamaya çalışacağını aklınızda bulundurarak kod yazın.

Temiz kod demiş iken Uncle Bob'u es geçmeyelim:

Teknik yanınızın dışında, teknik olmayan yanınızı da geliştirmeye çalışın. Daha önce de dediğim gibi, her şey teknolojiden ibaret değil. Karakter olarak şirket kültürüne ve katılacağınız ekibe uygun olup olmadığınız da önemli.

Kendinizi ilerletmek adına, veyahut bir yol çizebilmek adına aşağıda vereceğim yol haritasına mutlaka göz atın.

Frontend Developer Roadmap

Baktınız mı? Gözünüz korktumu? Korkmasın :) Yol haritasındaki her şeyi bilmenize gerek yok, bilmeye de imkan yok zaten. Fakat uzmanlaşmak istediğiniz alanda neleri bilmeniz gerektiğine en azından bir göz atın. Vakit buldukça bu haritadan seçip öğrenmeye çalışın, en azından neyin ne olduğu konusunda fikir edinin.

Yeterli seviyeye geldiğinizde açık kaynak kodlu projelerde yer almaya çalışın. Bu sizin ne kadar ilgili olduğunuzu, öğrenme hevesinizi, becerilerinizi gösterebilmek için en iyi fırsatlardan birisi. "Nereden başlayacağım?" derseniz, Github üzerinde yüz binlerce proje mevcut. Herhangi birini gözünüze kestirip, forklayıp, değişiklikleri yapıp pull request göndererek başlayabilirsiniz.

Bütün bunların dışında eklemek istediğim bir şey var. Yazılım dünyasında iş başvurusu yaptığınızda, hangi üniversiteden mezun olduğunuzun çok büyük bir önemi yok. Bu madde belki her şirket/rol için geçerli olmayabilir, netekim yazılım dünyasında hangi okuldan mezun olduğunuzun dışında, bir çok önemli faktör var.

Kod yazmayı üniversitede öğrenmiş de olabilirsiniz, veyahut YouTube/Udemy üzerinden dersler ile de öğrenmiş olabilirsiniz. Ama diplomadan önce yazılım dünyası ile ne kadar ilgili olduğunuz, neler bildiğiniz/yapabildiğiniz, yeni teknolojileri öğrenme arzunuz, problem çözmeyi sevmeniz, temiz kod yazabilmeniz, daha önce yaptığınız işler gibi bir sürü önemli faktör var. Bu saydıklarım olmadan, Stanford'dan bile mezun olsanız farketmiyor. Bu "üniversite eğitimine gerek yok" demek değil tabiiki. Anlatmak istediğim şey, iş başvurusu yaptığınızda tek önemli faktörün üniversite ismi veyahut diploma notu olmadığı.

Son söz olarak, bu tavsiyelerin her birini yapmak zorunda değilsiniz. Yazdıklarım, "yazılım dünyasında iş nasıl bulunur"'un kuralları veyahut formülü değil, nacizane tavsiyelerimdir.

Bol şans diliyorum :)

Creating custom components with Vuetify - Inheriting props/events/slots in Composition API

Onur Elibol — Sat, 14 Nov 2020 11:46:51 +0000

Hi everyone!

Lately I have been working on customising Vuetify components to have default component look/feel and I wanted to share some best practices that I have learned. In this article, I will try to show you how to inherit/forward props, events and slots from the parent component with minimal effort. I took Vuetify as an example here, but the practices could be applied on any other UI framework that offers props/events/slots. Hope it will be useful for someone at some point.

Why

Basically the main reason is that you sometimes have a use-case to cover, and you need to create a re-usable/customisable component based on a Vuetify (or any other UI framework) component. Well here comes the why; when you create a custom component, you don't want to lose what the UI framework you use offers by default.

I am going to define 2 different use-cases here to base my examples on.

First use-case is to be able to use Vuetify components with pre-defined props, for example v-text-field by default outlined, with a standard color etc. But you still want to be able override outlined or color property outside even if they are defined by default.
Second use-case is building a custom component based on Vuetify components. Let's say you are going to build a component that is a combination of v-text-field and v-card. But you still want to be able to use default props/events/slots of v-text-field on your custom component without defining it all manually.

With the next version of Vuetify (v3.0 Titan), this cases will be covered easily actually. Here is an example how it is going to look like:

Vuetify 3 updates

But as long as we don't have any access to these stuff yet, we are still stuck with the current approach. So here comes how we can do it with minimal effort.

How

Now when you are using Vuetify, all the components have some sort of pre-defined props/events/slots. To cover both use-cases above, most important thing is inheriting these props/events/slots from the parent component. So how do we do that?

Lets start with creating our custom text field with pre-defined props:



// CustomTextField.vue
<template>
  <v-text-field
    :value="value"
    outlined
    color="primary"
    @input="v => $emit('input', v)" />
</template>

Great, now we can use it like:



// Parent.vue
<custom-text-field v-model="value" />

Note: v-model is sugar syntax for :value="value" @input="v => $emit('input', v)"

We have created our CustomTextField and it is by default outlined and has primary color. Now what about if we want to use flat or dense or any other prop that v-text-field has oncustom-text-field? Or what if we need to override outlined and color property at some point, how are we going to do that? Basically we can't, as outlined and color is defined statically here and nothing is changing them.

So currently adding these props to our custom component as below would NOT work (for now):



<custom-text-field v-model="value" dense :outlined="false" />

This because of we are not inheriting any props that were sent from Parent.

Inheriting Props

To inherit props from parent, we can use a small trick that would help us. In Vue, each parent component sends the attributes that are added itself. To access those we can simply use $attrs in our template to bind everything that were sent from parent like this:



// CustomTextField.vue
<template>
  <v-text-field
    v-bind="$attrs"
    :value="value"
    outlined
    color="primary"
    @input="v => $emit('input', v)" />
</template>
<script>
  export default {
    inheritAttrs: false
  }
</script>

And voila! Now our <v-text-field> inside CustomTextField component inherits all attributes that were added to <custom-text-field>. So we can now easily use every prop that v-text-field provides on <custom-text-field> and override anything pre-defined props inside like this:



// Parent.vue
<custom-text-field v-model="value" dense :outlined="false" />

IMPORTANT

The way $attrs behave differs between Vue 2.x and 3.x! Some differences are:

In Vue 2.x $attrs does not include styles and classes that were sent from parent
In Vue 3.x $attrs includes styles and classes that were sent from parent. Also $listeners are now included inside $attrs which I will talk about later

For more information check details at Vue 3 docs.

Inheriting Events

Alright, we are now inheriting props from parent so we can use our custom text field as we are using v-text-field with props. So what about events? How can we forward all the events that are happening on <v-text-field> to <custom-text-field>?

The solution is simple here as well:



// CustomTextField.vue
<template>
  <v-text-field
    v-bind="$attrs"
    :value="value"
    outlined
    color="primary"
    v-on="$listeners"
    @input="v => $emit('input', v)" />
</template>
<script>
  export default {
    inheritAttrs: false
  }
</script>

We just bind $listeners with v-on and thats it! So now we can easily add any event that <v-text-field> provides to <custom-text-field> like this:



// Parent.vue
<custom-text-field
  v-model="value"
  dense
  :outlined="false"
  @blur="onFocus"
  @keypress="onKeypress" />

IMPORTANT

$listeners is removed in Vue 3.x and is included inside $attrs. So if you are using Vue 3.x, binding the component with $attrs will be enough to bind $listeners, like here:



// bind props, attrs, class, style in Vue 3.x
<v-text-field v-bind="$attrs" />

For more information check details at Vue 3 docs.

Inheriting Slots

Slots are a little bit different than props or events. There is for sure different ways to do this, but here is what I am doing to forward all the slots that were sent from parent to child.

I start with picking all the slot names that were sent from the parent inside a computed:



// CustomTextField.vue
export default {
  setup(props, ctx) {
    const parentSlots = computed(() => Object.keys(ctx.slots))

    return { parentSlots }
  }  
}

Then inside the <template> part I am looping through the slots to declare all the slots dynamically like this:



// CustomTextField.vue
// Vue 2.x way, binding $listeners with v-on not needed in Vue 3.x
<template>
  <v-text-field
    v-bind="$attrs"
    :value="value"
    outlined
    color="primary"
    v-on="$listeners"
    @input="v => $emit('input', v)"
  >
    <!-- Dynamically inherit slots from parent -->
    <template v-for="slot in parentSlots" #[slot]>
      <slot :name="slot" />
    </template>
  </v-text-field>

</template>
<script>
export default {
  setup(props, ctx) {
    const parentSlots = computed(() => Object.keys(ctx.slots))

    return { parentSlots }
  }  
}
</script>

Note that # is shorthand for v-slot. Here we could also use:



<template v-for="slot in parentSlots" #[slot]="props">
  <slot :name="slot" :props="props" />
</template>

to forward slot props as well. But the v-text-field component then does not render the slots that has not any props. I suppose this is a bug in Vuetify. Issue here

Great! So now we are even forwarding v-text-field slots from parent to child which means we can use slots of <v-text-field> like this:



// Parent.vue
<custom-text-field
  v-model="value"
  dense
  :outlined="false"
  @blur="onFocus"
  @keypress="onKeypress"
>
  <template #label>Custom Label</template>
  <template #message>Custom Message</template>
</custom-text-field>

BONUS: Custom usage of props/events/slots

We are now done with inheritance. But what if you need to use some of your $attrs on another element? For example inside your custom component, you have <v-text-field> and <v-card> and you want share color property in both. At this point there are different ways to go. But as long as I like to keep things organised, I use computed to organise/control it from one point.

Example:



// CustomTextField.vue
// Vue 2.x way, binding $listeners with v-on not needed in Vue 3.x
<template>
  <div>
    <v-text-field
      v-bind="[textFieldDefaults, $attrs]"
      :value="value"
      v-on="$listeners"
      @input="v => $emit('input', v)"
    >
      <template v-for="slot in parentSlots" #[slot]>
        <slot :name="slot" />
      </template>
    </v-text-field>

    <v-card v-bind="cardDefaults">
      <v-card-text>I am a card</v-card-text>
    </v-card>

  </div>
</template>
<script>
export default {
  setup(props, ctx) {
    const parentSlots = computed(() => Object.keys(ctx.slots))

    const textFieldDefaults = computed(() => ({
      outlined: true,
      dense: true,
      color: 'primary'
    }))

    const cardDefaults = computed(() => ({
      color: ctx.attrs.color || 'primary'
    }))

    return { parentSlots, textFieldDefaults, cardDefaults }
  }  
}
</script>

So what is happening here? We have created 2 computed variables, one for v-text-field defaults and one for v-card.

In textFieldDefaults we define our default text field props and then binding it with v-bind=[textFieldDefaults, $attrs]. If any of default values were sent from top, values inside $attrs overrides our default props.
In cardDefaults we only take color property. If you wish, you could easily add any other prop or listener that were sent from the parent here.
Both textFieldDefaults and cardDefaults must be declared as computed, to be able make them reactive and listen to the changes that are happening in parent.

Conclusion

To sum up, Vue offers many different options for us to achieve what we need to do. It is very easy to create custom components that are based on any UI framework without losing what the framework already offers us. There could be for sure some edge cases, but I think with the approach I tried to explain above, you can solve most of them. Hopefully, this post helped you to understand the concept!

Thank you for reading!