Aklıma gelenleri yazıya döktüğüm, deneyimlerinden bahsettiğim, teknik yazılarla sektöre katkı sağladığım blog sayfası. Aşağıdaki kategorilerden ilgini çeken içeriklere kolayca erişebilirsin.

Kategoriler:

React Uygulamasına Test Yazalım

Yazılım08 Nisan 2023 7 dk okuma

Uzun zamandır beklenen bir yazı dizisiydi. Aslında ben de test üzerine kendimi geliştirmek için ufakta olsa birkaç bir şey yapmak istiyordum. Bu yazı da anlatacağım için benim için bir bahane olmuş oldu. Ee bildiğiniz gibi eğer öğrenmek istediğin bir şey varsa onu birisine anlatmak gerek. Gerek ki daha iyi öğrenesin... O yüzden karşınızdayım :)

Yazıya başlamadan önce hemen backlink geçeyim. Serinin 1. yazısını okumayanlara buraya alalım. React Uygulamasına Test Yazalım #1

Test nedir, unit test nedir, integration test nedir gibi kısımlara giriş yapmadan direk konunun içine gireceğiz. Daha akılda kalıcı olması için bir proje geliştirdim ve bunu github üzerinden herkese açık bir şekilde paylaştım. Hem bu şekilde sizler de projeyi inceleyebilir ve test konusunu en azından bir noktaya kadar anlayabilirsiniz.

Projeyi İnceleyelim

Aslında projeyi basit tutmaya çalıştım. Bu şekilde odaklanmamız gereken konuya daha iyi bir biçimde kafa yorabiliriz. Proje, basit bir misafir defter uygulaması. Tamamen localde çalışan, api bağlantısı olmayan, birkaç component'ten oluşan bir proje. Projenin canlı halini Guestbook adresinden inceleyebilirsiniz.

Github üzerinden kaynak kodlarına ulaşmak isterseniz de github.com/berat/guestbook adresinden ulaşabilirsiniz. Ayrıca projeyi geliştirirken ekran kaydı alıp youtube üzerinden paylaştım.

Unit Testlerle Başlayalım

Aslında tam olarak hangi durumları keşfetebilirim pek bilemedim. Ama aklıma gelenler sırasıyla şunlar;

  • Component render oluyor mu?
  • Disable/enable durumları doğru bir şekilde çalışıyor mu?
  • Input value'ları doğru bir şekilde çalışıyor mu?
  • Buton tıklamaları sonra olan adımlar doğru bir şekilde gerçekleşiyor mu?

gibi sorulara cevap almaya çalıştım. Tabii yazdığım test yine basit kalıyor. Bunun daha ilerisi redux bağlantısı ve api bağlantısı olan bir uygulamada mock datalar ile test yazmak ve store değişikliğini test etmek olacaktır. Ama tabii bunlar ileri konular. Şimdilik bunlar işimizi görecektir.

Yorumun yazılacağı form component

import { memo, useEffect, useState } from 'react';

const INITIAL_STATE = {
  name: '',
  comment: ''
};

const Form = ({ setComments }) => {
  const [values, setValues] = useState(INITIAL_STATE);
  const [buttonDisabled, setButtonDisabled] = useState(true);

  const handleChange = event => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  useEffect(() => {
    const getValues = Object.values(values);

    const isEmpty = getValues.some(item => item === '');

    if (isEmpty) setButtonDisabled(true);
    else setButtonDisabled(false);
  }, [values]);

  const onSubmit = () => {
    setComments(prev => [
      ...prev,
      {
        id: Math.floor(Math.random() * 999999),
        name: values.name,
        comment: values.comment
      }
    ]);
    // reset values
    setValues(INITIAL_STATE);
  };

  return (
    <div id="form">
      <input
        type="text"
        placeholder="Adınız"
        name="name"
        value={values.name}
        onChange={handleChange}
      />
      <textarea
        rows={2}
        placeholder="Mesajınız"
        name="comment"
        value={values.comment}
        onChange={handleChange}
      ></textarea>
      <button onClick={onSubmit} disabled={buttonDisabled}>
        Gönder
      </button>
    </div>
  );
};

export default memo(Form);

Burada bir input bir textarea bir de button olan basit bir component. Bu componentin çalışması için de gerekli olan bazı fonksiyonlar var. Bunları özetlemek gerekirse şöyle;

  • handleChange fonksiyonu input ve textarea'ların value'larını state'e kaydetmek için kullanılıyor.
  • useEffect hook'u ise input ve textarea'ların boş olup olmadığını kontrol ediyor. Boş ise buton disable oluyor.
  • onSubmit fonksiyonu ise butona tıklandığında çalışıyor. Burada da setComments fonksiyonu ile state'e yeni bir yorum ekleniyor. Ayrıca input ve textarea'ların value'ları sıfırlanıyor.

Yorumun yazılacağı form component testi

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Form from './Form';

describe('should render', () => {
  test('input', () => {
    render(<Form />);

    const input = screen.getByPlaceholderText('Adınız');

    expect(input).toBeInTheDocument();
  });
  test('textarea', () => {
    render(<Form />);

    const textarea = screen.getByPlaceholderText('Mesajınız');

    expect(textarea).toBeInTheDocument();
  });
  test('button', () => {
    render(<Form />);

    const button = screen.getByRole('button');

    expect(button).toBeInTheDocument();
  });
});

test('case button dissable props', () => {
  render(<Form />);

  // get elements
  const input = screen.getByPlaceholderText('Adınız');
  const textarea = screen.getByPlaceholderText('Mesajınız');
  const button = screen.getByRole('button');

  expect(button).toBeDisabled();

  userEvent.type(input, 'test');
  userEvent.type(textarea, 'test');

  expect(button).not.toBeDisabled();
});

Test caselerin açıklamalarına takılmayın. Siz daha açıklayıcı ve yerinde ifadeler kullanın :)

Burada ise adım adım şöyle ilerliyorum;

  • input, textarea ve button elementlerinin render olup olmadığını kontrol ediyorum. Bunları bir test scope içerisinde de yapabilirsiniz, sorun olmayacaktır. Ben biraz daha anlaşılır olmasını istediğimden dolayı ayırarak yazdım. Burada yapılan işlemler ise component'i çağır, hangi element'in render olup olmadığını kontrol etmek istiyorsun onu çağır ve toBeInTheDocument fonksiyonu ile kontrol et. Eğer render olmuyorsa zaten fail verecektir.
  • Bir diğer test case'i ise butonun disable olup olmama durumu. Butonun disable olması için input ve textarea'nın boş olması gerekiyor. O yüzden ilk aşamada bu inputların value'larını dolduruyorum. Daha sonra ise not.toBeDisabled fonksiyonu ile butonun disable olmadığını kontrol ediyorum. Burada ekstra olarak userEvent kütüphanesi ile input ve textarea'ların value'larını değiştirdim.

userEvent kütüphanesi ile input değerini girebiliyor, trigger yaratabiliyor ya da herhangi bir şey upload edebiliyorsun. Detaylı kullanım için şu sayfayı inceleyebilirsiniz.

Diğer component'i de ayrıca yazmak istemedim. Çünkü birbirine benzeyen yapı olduğu için tek component üzerinden hepsini anlatmış oldum. İncelemek isterseniz github üzerinden detaylı bir şekilde inceleyebilirsiniz.

# Şimdi sırada Integration Test

Bence tek başına unit testler yeterli olmuyor. Çünkü componentler birbirleriyle bağlantılı olabiliyor. Bu yüzden integration test ile uçtan uca bir test yazmak gerekiyor. Benim tercihim burada Cypress oluyor. Çünkü yazımı olsun, sunduğu imkanlar olsun benim için 1-0 öne geçiyor.

Gerekli kurulumları yaptıktan sonra sıra geliyor test yazmaya. Benim testimde 4 adım var. Bunlar;

  • Öncelikle testin yazılacağı adrese gidilecek. Benim örneğimde "/" olacak. (1)
  • Daha sonra input ve textarea seçilip gerekli değerleri ile doldurulacak. (2)
  • Input ve textarea'nın değerleri girildikten sonra butona tıklanacak. (3)
  • Butona tıklandıktan sonra aslında girilen veriler ekranda gözükmesi gerekiyor. Bu nokta da vermiş olduğum HTML etiketi sayesinde kontrol ediyorum. (4)
describe('first test', () => {
  it('post a comment', () => {
    cy.visit('/'); // (1)

    // inputları doldur. (2)
    cy.get('input[type="text"]').type('Berat Bozkurt');
    cy.get('textarea').type('Bu bir deneme yorumdur.');

    // butona tıkla (3)
    cy.get('button').click();

    // yorum gönderildi mi kontrol et. (4)
    cy.get('article p').invoke('text').should('eq', 'Bu bir deneme yorumdur.');
  });
});
Tüm kaynaklar ve dökümanlar yazının en altında bulunmaktadır.
  • cy.visit fonksiyonu ile adresimize gidiyoruz.
  • cy.get fonksiyonu ile elemanlarımızı seçiyoruz.
  • cy.get(XX).type fonksiyonu ile elemanların değerlerini giriyoruz.
  • cy.get(xx).click fonksiyonu ile butona tıklıyoruz.
  • cy.get(XX).invoke('text').should('eq', 'TEXT') fonksiyonu ile elemanın içerisindeki text ne ise TEXT ile yazdığımız değer ile eş değer mi onu kontrol ediyoruz. Çünkü should fonksiyonuna gönderdiğimiz ilk parametre eq.

Integration test yazma işlemini tamamladıktan sonra ister terminal istersen browser üzerinden test işlemi gerçekleşiyor. Benim tercihim browser üzerinden test işlemi gerçekleştirmek. Çünkü browser üzerinden test işlemi gerçekleştirdiğimde eğer bir hata varsa o hata ile karşılaştığım zaman hata mesajı ile karşılaşıyorum. Bu da benim için daha anlaşılır oluyor.

Sonuç

Aslında test yazmak o kadar da zor olmadığını görüyoruz. Sadece bunun için gerekli zamanı ayırıp case'leri belirlememiz gerekmektedir. Daha sonra ise daha kaliteli ve sağlam bir kod yapısı oluşturmuş oluyoruz. Çünkü case'lerimiz belli. Eğer component ileride bir revize geçirecekse bug yaratma olasılığımız çok ama çok azalıyor. Hem de test coverage ile yazdığımız component'lerin ne kadar test edildiğini görebiliyoruz. Bu da projenin kalitesini arttırıyor.


Yazıyı bitirmeden önce beni aşağıdaki sosyal medya hesaplarımdan takip edebilirsiniz. Aklınıza takılan bir şey olması halinde mesaj ya da olmasına da gerek kalmadan bir selam gönderebilirsiniz.

Kaynakça

İşte Benim için 2022

Kişisel30 Aralık 2022 4 dk okuma

Yine bir bakmışız ki bir yılın daha sonuna gelmişiz. Bugün (Cuma) izinli olduğumdan dolayı bir sevinçle her zaman olduğu gibi yine koca yılı değerlendirdiğim bir yazı yazıyorum. Ama öncesinde gelin 2021 yılı benim için nasıl geçmiş ona bir göz atalım. Hemen şuraya tıklayın ve okuyup gelin hadi ben senin için bekliyorum...

23 yıllık hayatımın belki de en yoğun, stresli ve bir o kadar yorucu geçen yılıydı. Neler oldu neler... hazırsanız gelin başlayalım hadi.

Evlendim

Yaklaşık 7 aylık bir düğün ve ev hazırlığı sürecini atlatıp evlendim. Saç beyazlaması ve kilo kayıpları ile geçen bu günler yerini rahatlığa ve huzurluğa bıraktı. Dönüp geriye baktığımda aklıma gelen şeylerin başında stres, yorgunluk ve borç :)

Yeni eve taşındım

Üniversiteye kadar hep aile evindeydim. Üniversiteye geçtikten sonra 2 sene yurtta kaldım. Zaten sonra da pandemi patlak verince eve geçtik ve aile ile yaşamaya devam. Ta ki evlenene kadar. Evlendikten sonra Sakarya'ya taşındım ve ilk defa eve çıktım. Bilmediğim bir şehirde, bilmediğim bir mahallede yeni bir hayat kurmak... Tıpkı her şeye tekrardan başlamak gibi.

Yeni çalışma ortamım
Yeni çalışma ortamım

Yeni eve geçtikten sonra da kendime yeni bir çalışma ortamı yarattım. Şu an en sade şekilde hazır. Zamanla yeni ekipmanlar ve oyuncaklarla zenginleştirmeyi planlıyorum. Şimdilik bu kadar işimi fazlasıyla görüyor.

İngilizcemi geliştirdim

Gerek ingilizce makaleler okuyarak gerekse ingilizce videolar izleyerek ingilizcemi geliştirdiğimi söyleyebilirim. Ama en çok iş hayatımda yoğun ve aktif bir şekilde kullandığımdan dolayı gelişimin daha fazla olduğunu rahat bir şekilde söyleyebilirim. Tabii asla ama asla tam olmayacağım bunun için kelime ezberleme süreçlerine ağırlık vermem gerektiğini de biliyorum. Hatta bununla ilgili bir side proje geliyor ama şimdilik sır :)

Blogumu geliştirdim

Blogumu yepyeni bir görünümle tekrardan geliştirdim ve yayına aldım. Burayı daha çok günlük/not defteri gibi davranıp yeni özellikler ekleyip geliştirmeye de devam ediyorum. Burası adeta arka bahçemmiş gibi davranıp yeni teknolojiler, özellikler deneyip duruyorum. Bu şekilde güncel kalmak gerçekten hoşuma gidiyor.

Blogtaki bir özellik
Blogtaki bir özellik

Belki de farketmemişsinizdir diye kısaca birkaç sayfamdan ve yazımdan bahsetmek isterim;

  • İnternette gezinirken hoşuma giden ilgimi çeken web sayfalarını kaydediyorum ve kaydettiklerimi de Yer imleri sayfasında paylaşıyorum.
  • Fotoğraflara karşı da ayrı bir ilgim olduğu için çektiğim fotoğrafları Fotoğraflar sayfası altında paylaşıyorum.
  • Hayatımda olan özel anları ise Journey sayfasında paylaşıyorum. Bu şekilde dönüp baktığımda bazı tarihleri kolay bir şekilde hatırlıyor ve gözümün önüne getirebiliyorum. Unutkan olmak kötü bir şey arkadaşlar...
  • Aktif olarak kullandığım uygulamaları paylaştığım bir sayfa yayımlamıştım. Merak mı ettiniz? Neler kullanıyorum? sayfasına bakabilirsiniz.

Side projeler geliştirmeye başladım

Boşa kalan vakitlerimde belki bir ek gelir olur diye birkaç uygulama yapıp yayınlamak istiyorum. Buradaki kazanç sağlama düşüncelerimin başında ilk olarak reklam geliri, bir diğeri destek geliri, son olarak da emin değilim ama uygulama içi ücretli özellikler olabilir. Şu an halı hazırda üzerinde çalıştığım iki projem var. Her iki proje de mobil platformlar ve chrome extension şeklinde paylaşacağım.

Aeropress ile kahve yapmaya başladım

Çalışırken kahve içmeyi seviyorum. Normalde Nescafe 3'ü 1 arada yaparak içerim ama biraz heyecan olsun diye Aeropress ile kahve yapmaya başladım. Sert bir kahve içmeyi sevmiyorum açıkcası. Süt ile karıştırıp içiyorum. Bazen mocha bazen de caramel latte yaparak içiyorum.

Caramel latte
Caramel latte

Yeni fotoğraflar çektim

Fotoğrafçılık aslında her an yanımda olan bir hobi. Gözüme güzel bir şey gelirse telefonu çıkarıp hemen çekerim. Boş bir vaktimde ise Lightroom ile düzenleyip mutlaka paylaşırım. Bu süreç gerçekten beni dinlendiriyor ve huzur veriyor, tatmin ediyor.

Çektiğim fotoğraflarÇektiğim fotoğraflarÇektiğim fotoğraflarÇektiğim fotoğraflarÇektiğim fotoğraflarÇektiğim fotoğraflar
Çektiğim fotoğraflar

Acısıyla tatlısıyla geçen 365 gün. Bambaşka hayaller, yepyeni umutlar ile yeni yıla birkaç gün kaldı. Kalın sağlıcakla!

MacOS'ta Birden Fazla Github Hesabı Nasıl Kullanılır?

Teknik07 Ekim 2022 2 dk okuma

Eğer sizde benim gibi bilgisayarınızda birden fazla github hesabı kullananlardansınız problem yaşamışsınızdır. Sürekli hesap değiştirmek, config ayarlamak... Bir süre sonra insanı darlamakta. O yüzden bugün uyguladığım bir çözümü sizlerle de paylaşmak istedim.

Not: Bu anlattıklarım MacOS işletim sistemi için geçerlidir.

1. SSH Key Oluşturalım

# öncellikle ssh dizinine gidiyoruz
cd ~/.ssh  

# burada kisisel mail adresinizi ve dosya adını giriyorsunuz
ssh-keygen -t rsa -C "[email protected]" -f "kisisel-github" 

# burada iş mail adresinizi ve dosya adını giriyorsunuz
ssh-keygen -t rsa -C "[email protected]" -f "is-github" 

2. SSH Key'leri Bilgisayarımıza Kaydedelim

# burada kisisel github hesabınızın ssh key'ini ekliyoruz
ssh-add -K ~/.ssh/kisisel-github

# burada iş github hesabınızın ssh key'ini ekliyoruz
ssh-add -K ~/.ssh/is-github 

3. SSH Key'leri Github Hesaplarımıza Ekleyelim

### ssh keyimizi kopyalayıp kişisel github hesabımıza kayıt edelim.
pbcopy < ~/.ssh/kisisel-github.pub

Burada kopyalanmış olan kodu Github ayarlarından yeni SSH ekle deyip bu kodu kaydedelim. Aynı işlemi bir sonraki adım için de uygulayın.

### ssh keyimizi kopyalayıp iş github hesabımıza kayıt edelim.
pbcopy < ~/.ssh/is-github.pub

4. Config Dosyasını Oluşturalım

# config dosyasını oluşturalım ve düzenleyelim.
touch ~/.ssh/config
open -e ~/.ssh/config

Açılan pencerede şu yapılandırmaları ekleyelim.

#kişisel
Host kisisel-github.com
	HostName github.com
	User git
	IdentityFile ~/.ssh/kisisel-github

#iş
Host is-github.com
	HostName github.com
	User git
	IdentityFile ~/.ssh/is-github

5. İş Projelerine Özel Config Oluşturalım

İş ile ilgili projelerimizde özel bir config dosyası oluşturmamız gerekiyor. Bunun için iş ile ilgili olanların hepsini bir klasörde tutup oradan config dosyasını çekeceğiz. Bu şekilde iş klasörüne geçince farklı git bilgileri, kişisel projelerinize geçince de farklı bir git hesabı ile çalışmış olacaksınız. Bu şekilde aslında bölünmeden sağlıklı bir şekilde iş ve kişisel hesaplarınızı kullanabilirsiniz.

# iş klasörünüze gidin ve .gitconfig oluşturun
touch ~/work/.gitconfig
open -e ~/work/.gitconfig

Şimdi içerisine şu yapılandırmaları ekleyelim.

[user]
    name = Berat Bozkurt
    email = [email protected]

Şimdi son adım olarak ana .gitconfig dosyamıza iş klasöründe oluşturduğumuz yapılandırmaları dahil edelim. Bunun için şu yapılandırmayı eklemeniz yeterlidir.

# ana .gitconfig dosyasını açalım.
open -e ~/.gitconfig

# açılan pencerede bu yapılandırmaları ekleyelim.
[user]
    name = Berat Bozkurt
    email = [email protected]
[includeIf "gitdir:~/works/"]
    path = ~/works/.gitconfig

Arkanıza yaslanın ve kodunuza bakın. Sürekli hesap değiştirmekle, giriş yapmakla uğraşmayın. Keyifle kodlayınız...

Sevgiler.

Referanslar:

Neler Yapıyorum? Aklımda Neler Var? #4

Kişisel19 Eylül 2022 3 dk okuma

Eylül ayı bayağı üretken geçmiş gibi gözüküyor. Eski düzenime dönüp gerekse işlerimde gerekse blog'da aktif olmaya başladım. Bu şekilde devam ettiği için mutluyum. Çünkü bu şekilde kendimi daha iyi geliştirdiğimin farkındayım. Bundan dolayı da en azından belli bir süre boyunca böyle devam etmesi süper!

Neler Yapıyorum?

30 Temmuz'da düğünüm oldu ve bekarlığa veda ettim. Bu süreçte kah yorulduk kah koşturduk derken bayağı yoğun geçen bir dönem oldu. İstesen de istemesen de o stres her türlü oluyormuş. Bunu öğrendim; kilo veriyorsun, saçların beyazlıyor, durgunlaşıyorsun ve daha bir çok şey. Tatlı telaş falan da diyorlar ama öyle düşünmüyorum :) Her neyse yine de iyisiyle kötüsüyle bu süreci de kazasız belasız atlattık.

Düğünden hemen sonra 31 Temmuz'da yeni bir şehire yeni bir eve göç ettik. Artık bundan sonra memleketimiz Sakarya -şuanlık-. Yeni hayatımıza yeni bir şehir tercih ederek bilmediğimiz bir ortamın, bilmediğimiz bir iklimin ve bilmediğimiz insanların ortasında kendimizi bulduk. Bu şekilde hayallerimizi gerçekleştirmek için bir adım atmış oluyoruz. Ama hayaller biter mi? Asla...

Bir diğer yandan da blogu geliştirmeye devam ediyorum. Yeni bir görünümle ve özelliklerle şu an yayında. Zamanla yeni özellikler de getirmeyi düşünüyorum. Bu şekilde istediğim kıvama getirip rahat bir şekilde yazı yazma noktasına erişmeyi hedefliyorum.

Ayrıca kariyer adımlarımı da atmaya devam ediyorum ve Swift öğrenerek şu an yeni bir dile yelken açtım. Bu şekilde software engineer yolunda ilerlemeyi düşünüyorum. Frontend ve backend bir şekilde var. Mobil'de aslında react-native var ama native iOS tarafımı geliştirmek istedim. DevOps tarafı şu an için muallak. Bunu zaman gösterecektir.

Aklımda Neler Var?

Aklımda teknik olarak iki yazı fikri var. Bunlardan birisi sıfırdan Swift ile uygulamalar yapma temalı, diğeri ise React uygulamasına test yazalım serisinin 2'ncisini yazmayı düşünüyorum. Ufak bir spoiler vereyim. Bu sefer integration test yazacağız ve cypress kullanacağız, öhö öhö neyse hadi devam edelim...

Yazıları ne zaman yazacağım henüz belli değil ama biraz zaman alabilir. Bu aralar yoğunluğum var. Ama en yakın zamanda diyelim biz şimdilik. :)

Evlilikten sonra kendime yeni alışkanlık edinmeye çalışıyorum ve bu noktada blogu da o denli geliştirip gelişmeleri paylaşmayı planlıyorum. Daha aktif olmak adına şimdiden iki farklı sayfa ekledim. Bunlardan biri Yer imleri bir diğeri ise Yolculuk sayfası.

Gelecek ne gösterir bilmem ama küçük çaplı birkaç iOS uygulama yapmayı ve backend tarafında (Node.JS) kendimi geliştirmek adına birkaç ufaklı büyüklü projeler yapmayı planlıyorum. Bu şekilde bir sonraki iş yerimde software engineer olarak çalışmayı hedefleyebilirim. Kariyer planını da bu şekilde şekillendirebilirim diye düşünüyorum. Varsa yorumu olan istedikleri zaman benimle iletişim geçebilir.

Javascript İpuçları #1

Yazılım06 Eylül 2022 2 dk okuma

Günlük hayatta kullandığımız kodları yeri geliyor bazen daha sade bir şekilde yazmak istiyoruz. Kısım kısım bunlar işimizi çok kolaylaştırırken bazıları ise okunabilirliği bozabiliyor. Bu yazıda javascript ile ilgili birkaç ipucu paylaşacağım.

Alt başlıkları yazarken genel adı olanları ingilizce olarak yazacağım. Bu şekilde araştırmak isteyenler için anahtar kelimeyi vermiş olurum.

Nesnelerde Koşullu anahtar

Elimizde bir nesne olduğunu varsayalım. Bu nesneye de ekstra bir özellik tanımlamak için önce bir koşul koymamız gerekiyor. Bunu ise eğer bu özelliğimiz boş ise bu keyi listelemek istemiyoruz. Bunun için Logical And başlığından yararlanabiliriz. Hadi gelin örneğimize bakalım.

    const name = "Berat";
    const surname = "Bozkurt";
    const age = 23;
    const photo = null;
    const title = "frontend developer"

    const user = {
        name,
        surname,
        age,
        ...photo && {photo},
        ...title && {title}
    }

    console.log(user); {name: "Berat", surname: "Bozkurt", age: 23, title: "frontend developer"}

Yukarıdaki örnekte photos değişkeni herhangi bir değer dönmediği için user nesnesine eklemedik ve daha sade bir yapı oluşturmuş olduk.

Bu yapıyı daha çok API'ye gönderirken boş değerli key'leri göndermek istemediğim zaman kullanıyorum. Bu şekilde daha temiz bir yapı oluşturmuş oluyor. Ayrıca nesnemizdeki özellikler fazla olduğu zaman da kontrol etmek ayrıca kolay olmaktadır.

Nullish Coalescing Operator (??)

Kontrolünü sağladığımız değişkenin değeri eğer null veya undefined ise istediğimiz değeri atayabiliriz. Şöyle bir örnekle bunu somutlayabiliriz. PostCard diye bir bileşinimiz olsun. Bu bileşenin içinde de bir öne çıkarılan görseli olsun. Eğer bu öne çıkarılan görsel eklenmediyse buraya arkaplanı gri olan bir görsel yükleyeceğimizi düşünelim. Hadi bunu koda dökelim.,

var firstImage =
  'https://tr.m.wikipedia.org/wiki/Dosya:Image_created_with_a_mobile_phone.png';
var secondImage = null;

var firstPostImage = firstPostImage ?? 'https://via.placeholder.com/150';
var secondPostImage = secondImage ?? 'https://via.placeholder.com/150';

console.log(firstPostImage); // https://tr.m.wikipedia.org/wiki/Dosya:Image_created_with_a_mobile_phone.png
console.log(secondPostImage); // https://via.placeholder.com/150

Logical And (&&)

Kontrolünü sağladığımız değişkenin değeri eğer null veya undefined değilse istediğimiz değeri atayabiliyoruz. Somut bir örnek olması için şu örneği verebilirim. Kullanıcı başarılı bir şekilde sisteme giriş yaptıysa 'Hoşgeldiniz Berat Bozkurt' yazsın.

var user = {
  name: 'Berat',
  surname: 'Bozkurt',
  isLogin: true
};

var welcomeMessage = user.isLogin && 'Hoşgeldiniz ' + user.name + ' ' + user.surname;

console.log(welcomeMessage); // Hoşgeldiniz Berat Bozkurt

Teknik yazılara bu şekilde başlangıç yapıp devamını da kısa sürede yazmak ümidiyle yazıyı sonlandırmak istiyorum. Sağlıcakla!

Neler Yapıyorum? Aklımda Neler Var? #3

Kişisel03 Nisan 2022 2 dk okuma

Yoğun geçen ve geçmekte olan bir sürecin ardından bir blog yazmak için bilgisayara oturdum. Ramazan'ın 2. günü ve dışarıdaki yoğun rüzgarlardan dolayı elektrik kesintisini verimli ana geçirmek istedim. Bundan dolayı da açtım VS Code'u yazmaya başladım. Eveett bugün neler yaptığımı ve aklımda neler olduğunu sizlere dökeceğim. Eh hadi başlayalım madem.

OSF Digital'e yeni girmiştim ve yaklaşık 5 ayım oldu. Trial period sürecini atlayıp terfi alarak çalışmaya devam ediyorum. Bu süreçte her şey çok güzel gidiyor ve biraz daha dolu dolu geçmesi için atılkan olup daha fazla aktif olmak istiyorum. Bu şekilde hem kişisel gelişimimi hem ingilizcemi hem de teknik becerilerimi geliştirmeyi hedefliyorum. Aynı zamanda büyük bir şirket olduğundan dolayı da oturmuş bir düzen var ve tüm süreçlerin nasıl işlediğini çok iyi bir şekilde öğrenmiş, benimsemiş ve aşina olmuş oluyorum.

Bir diğer tarafta ise nişanlandım ve yaza düğünüm var. Beyaz eşyadır, mutfak araç gereçleridir, ev arayışıdır gibi tatlı telaşlarımız var. Tabii bi o kadar da stresli bir süreç. Bir an önce tüm bu hazırlıklar bitsin de artık yeni hayatımıza başlayalım diyor insan. Bununla birlikte ev ile ilgili olan her şeye aşina olmaya başladım. Belki yakında teknoloji kanalı açıp hangi süpürge alınmalı hangi ütü alınnmalı diye bir video çekerim(!)

Takip edenlerin bildiği üzere blogu Gatsby ile geliştirmiştim ve alacağımı aldıktan sonra teknolojiyi değiştirdim. Teknoloji olarak tüm yapıyı Next.js'e geçtim ve artık geliştirmeleri buradan devam edeceğim. Bu şekilde blogu bir not sitesi haline getirip çevrim içi bir not defteri geliştirmeyi planlıyorum. Tabii zamanla tasarım da değişikliğe uğrayacaktır. Bu şekilde boş zamanlarımda uğraş olması için kendime icat çıkartıyorum.

Tüm bunların haricinde ise Şems(@akseyh) ile yeni bir projeye giriştik ve yeni bir ürün çıkarmaya odaklanıyoruz. Eski enerjime dönmek ümidiyle bu paragraf burada sonlansın.

Büyük ihtimal bu serinin bir sonraki yazısını Sakarya'daki evimde çalışma odamda yazıyor olacağım. O zaman böyle dolu dolu paylaşım yaparız ki blogu da yakında çoğunlukla kişisel yazılar üzerine dönecek gibi. Çünkü bolca yazıp içimi dökmek istiyorum. Geleceğe bir şeyler bırakmak gerek.

Ayrıca tüm bu süreçler bittikten sonra da Twitter'a yoğunlaşıp biraz tanınırlığı arttırıp network geliştirmek istiyorum.

Yazmakta zorlandığımı da söylemeden geçmek istemiyor ve esenlikler diliyorum. Sevgiler!

Özetle 2021

Kişisel27 Aralık 2021 3 dk okuma

1 yıldır bu blogu kullanıyorum ve açtığım zamanlar yine yılın son günleriydi. O zaman Yıllardan 2020 idi... yazısını yayınlamıştım. Bu sefer ise 2021 için bir yazı yazma vakti geldi ve bu satırları yazıyorum. Öhö öhö neyse uzatmayalım. Hadi devam edelim.

Hayat

Dünyalar güzeli bir kızla tanıştım ve daha önce tatmadığım duygular hissediyorum. Birçok şeyimi paylaştım ve yakın zamanda da hayatımı paylaşacağım. Güzel günler yakın :)

yaklaşık 1.5 yıldır çalışmış olduğum işten ayrılarak OSF Digital ile yeni bir yolculuğa başladım. Şirket içindeki dilin İngilizce olması ise benim için ayrı bir macera ve zorluk oluyor. Mesaiden sonraki yorgunluk, anlatılamaz... Ama bir yandan da planladığım kariyer hedefimi uyguladığım için mutluyum.

Üniversite hayatımı bitirdim sayılır. Tüm derslerimden geçerek okulla olan ilişkimi bitirdim. Bu şekilde artık öğrencilik hayatımı da sonlandırmış oldum.

13 tane yazı yazdım

Galiba yılda ortalma 13 yazı yazıyorum. Bir önceki sene de aynı şekilde olmuştu. Bu sene de geleneği bozmadık ve 13 tane yazı yayınlamışım. Artık ingilizce içerik üretmiyorum. İyi mi yapıyorum? Yapmıyorumdur büyük ihtimal ama onun yerine farklı şeylerle ilgileniyorum.

Şimdi gelin eskiden yeni doğru yazdığım yazıları linkleyelim.

Github'da 5 proje paylaştım

Tam zamanlı bir işte çalıştığımdan dolayı çok fazla proje üretip projelere destek olamıyorum. Aslında 2'si özel toplam 7 proje paylaştım. Onların çoğu da case çalışmalardı. Yapmış olduğum bu case'leri ise genelde bilmediğim teknolojiler kullanarak öğrenme sürecimi devam ettirmiş oldum. Önümüzdeki sene ise bir projeye destek olmayı planlıyorum. Bu seneyi de bu şekilde geçiririm gibi. Hayırlısı...

Blogun Kaynak Kodları

Şu anda olduğunuz blogun kaynak kodlarını paylaştım. İlk defa Gatsby kullandığım için kendime özel bir tema ile şekillendirmek istedim. Sonucunda ise böyle bir sonuç ortaya çıktı. Bknz: https://github.com/berat/homepage

Görsel Arama Projesi

İlk defa Typescript kullandığım bir proje. Aynı zamanda ise seviyemi gösterdiğine inandığım bir proje. Çünkü önceki zamanlarda paylaştığım projeler biraz daha javascript dünyasında ilk zamanlarımdı. Bu proje ise case'lerden biri. Bknz: https://github.com/berat/hipo-case/tree/master/src

Gatsby Unsplash Plugin

Blogumda fotoğraflarımı paylaşmak için Unsplash kullanmaya karar verdim. Bundan dolayı da eksik olan bir ihtiyacı gidermek için Gatsby'e bir plugin yazdım. Bknz: https://github.com/berat/gatsby-unsplash

Angular Example

İlk defa Angular kullanmış olduğum projeyi yine aynı zamanda profilimde paylaştım. Benim için güzel bir deneyim oldu. Yine case'lerden biri. Bknz: https://github.com/berat/angular-example

Daha fazlası için beklerim https://github.com/berat

Farkındalık, İlkler, Beğenilmek

Eh hadi öyleyse 2022'ye Merhaba!

Nasıl Araştırma Yapıyorum

Kişisel17 Aralık 2021 5 dk okuma

Günümüzde herkes yazılımcı olmaya karar verir ama önemli olan devamını getirebilmek. Çünkü birçok kişi bu karardan geri döner. Eh tabi böyle olunca da tüm bu heves ve istek birden sönüverir. Ama diyelim ki siz onlardan biri değilsiniz hatta yazılımda belli bir konuma geldiniz. Ha siz şöyle gelin bakalım. Kahvenizi/Çayınızı almanız için bekliyorum sizi. Hadi bir sonraki paragrafta görüşürüz.

Günlük hayatta kullandığımız bir çok şeyi ezbere yapamayız veyahut bilmediğimiz bir konuda öğrenme sürecimizin olması gerekir. Bu noktada doğru bir araştırma yaparak istediğimiz sonuca erkenden ulaşmamız gerekir. Bu erken sonuca oluşanca kısa sürede bilgiye ulaşıyoruz. Ama bir yandan da araştırma yaparken edinen bilgilerden uzaklaşmış oluyoruz. Hadi tüm bunları bir yere bırakalım ve elinizde bir sorun olduğunu ve bunu mümkün olduğunca kısa sürede çözmeniz gerektiğini varsayalım.

1- Google'da araştırmak.
2- Hazır bir paketse döküman sayfasına göz atmak.
3- Github'ta ilgili repolarda ve issue'larda gezinmek.
4- Her şeyi bırakın ve sorundan uzaklaşarak.

Nelerden bahsedeceğimi kısacık bahsettiğime göre ilk maddeden başlayalım mı?

Google'ı etkili bir şekilde kullanmak.

Öncelikle Türkçe aramalardan uzak kalmakta fayda var. Tamam kabul ediyorum. Eğer çok genel ve yaygın bir konu hakkında araştırma yapıyorsanız kullanabilirsiniz. Ama aksi durumda İngilizce aramak işinizi daha da kolaylaştıracaktır. Yeri gelmişken Türkçe aramasına örnek vermek isterim.

Bu araştırmalarla daha hızlı çözüme ulaşırsınız. Kullanın, eyvallah. Ama ingilizceniz kötüyse siz direkt ingilizceye yönelin. Daha da rahat hissedecekseniz ilerleyen zamanlarda.

Bundan sonrası ingilizce araştırmalar hakkında bahsedeceğim. Öncelikle eğer yapmanız gereken bir kısmı nasıl yapacağınızı bilmiyorsanız. Şöyle bir arama işinizi kurtaracaktır. Hadi gelin inputta otamatik tamamlama nasıl yapılır öğrenelim.

Bu şekilde nasıl yapıldığına dair onlarca sitelere ulaşabiliriz. Stackoverflow'u duymuşsunuzdur. Eğer yok ben stackoverflow haricinde başka siteye gitmem, orada araştırmak istiyorum derseniz de buyrun.

O kadar site baktınız ama hepsi jQuery ile alakalı. Ama siz illa javascript ile yapmak istiyorsunuz. O halde gelin javascript kelimesi geçen siteleri filtreleyelim. Bu şekilde arama ekranında çıkan sonuçlarda mutlaka Javascript geçen bir kelimeyi koyu şekilde göreceksiniz.

Son çıkan bir versiyondan dolayı hata alıyorsunuz. Bu hatayı çözmek için de son zamanlarda paylaşılan içeriklere göz atmak istiyorsanız. Öyleyse gelin kolay bir şekilde tarihe göre filtreleyelim. Google'a araştırmanız gerekeni yazdıktan sonra sırasıyla Araçlar > Herhangi bir zaman > "Tarihi Seç" adımlarını izleyebilirsiniz.

Döküman sayfasına göz atmak.

Yukarıda bahsettiğim gibi döküman sitesini inurl: içine yazarak kolay bir şekilde bulabilirsiniz. Ayrıca direkt döküman sayfasına gidip menülerden veyahut arama bölümünden ulaşabilirsiniz. Burada önerebileceğim pek spesifik örneğin yok. Gayet basit, kısa ve net.

Github'ta repo ve issue içerisinde kaybolmak.

Burada son zamanlarda akıl ettiğim bir yöntemden bahsedeceğim. Ama yoookk öyle hemen değil, okumaya devam ediniz efenim.

Bir paket kullanıyorsunuz diyelim. Hadi bu moment paketi olsun. Ama bu paketi nasıl kullanmanız gerektiği hakkında bir bilginiz yok. Öncelikle Readme dosyasını dikkatlice okumanız gerekmektedir. Genellikle orada nasıl kullanılması gerektiği hakkında bir bölüm olur.

Orada kullanımı hakkında bir bölüm gördünüz ve denediniz. Ama bir sorun var çalışmıyor. Şimdi hemen sayfayı kapatmayın da bekleyin. İlk adım issue'lara gidip neler yazılmış edilmiş araştırılmalı.

Moment ile tarihi formatlamak için bir şeyler yaptın ama çalışmadı. O yüzden issue sayfasında arama yaparak filtreleyebilirsiniz. İnsanların sormuş olduğu soruları süzerek atılan cevaplardan cevabınızı bulabilirsiniz. Bazı zamanlar bu şekilde çözüme daha çabuk ulaşılırken bazı zamanlar dipsiz kuyuya inme hissi uyandırılıyor.

Burada bir ipucu vermek isterim. Genelde basit sorunları kapatılan issue'larda daha rahat bulabilirsiniz.

Evveettt, ilk başta dediğim yönteme gelebiliriz. Öhö öhö! Son zamanlarda test yazmak ile ilgili araştırmalar yapıyorum. Araştırmalar sonucunda aslında fonksiyon olsun, paketin kullanımı olsun hepsi testlerde anlatılmaktadır. Sonuçta teste bekelenen bir değer var. Bu şekilde çözüme hızlı bir şekilde ulaşılmaktadır. Hemen bir örnekle anlatalım.

Elimde olan bir tarihe 8 dakika daha eklemek istiyorum. Ama bunu nasıl yaparım bir fikrim yok. O kadar araştırma yaptım ama sonuca ulaşamadım. Tamam sakinleşin, repoyu açın, test dosyalarını bulun, ilgili testi açın ve kodu okuyun. Aha işte bulduk. "Vay arkadaş bu kadar kolay mı bu" dediğinizi duyar gibiyim. Evet aslında öyleymiş :)

Kodu açıklama gereği duymuyordum ama not geçeyim istedim. ilk parametre yapılan işlem, ikinci parametre beklenen sonuç, üçüncü parametre ise yapılan işlemin tanımı.

Sonuca ulaşamadın mı? Hadi mola vakti!

Bir soruna uzun zaman maruz kalmak bir süre sonra insanı kör eder derecesine getiriyor. Aslında biraz ara vermek size çok iyi gelecektir. Böylelikle dinç bir şekilde sorunun derinliklerine inip aslında çözümü şu olmalı diyeceksiniz ve çözüme gideceksiniz.

Hem kendinizi de bu kadar yormayın yav. Güzel bir şarkı açın, arkanıza yaslanın ve uzaklara dalın. O da ne? Çözümü buldun, bak. Eeee bazen hiç beklemediğiniz anda aklınıza gelir!

Uyumadan önce bir şeyler karalamak istedim. Bu yazıyı yazma fikrim ise twitter'da dolaşırken böyle bir tweet atılmıştı. Ben de bildiklerim blogla paylaşmak istedim.

O tweeti yazıya ekleyecektim ama bulamadım. O yüzden ekleyemiyorum.

Esenlikle kalınız efenim. Yine bekleriz!

Neler Kullanıyorum

Kişisel30 Kasım 2021 4 dk okuma

Bu aralar iş değişikliği durumu olduğundan dolayı bilgisayarımı sıfırlayacaktım. Kullandığım ayarları ve bazı konfigurasyonları not ederken bunları neden paylaşmıyorum diye kendime sordum. Dolayısıyla oturup hemen bu satırları yazıyorum. Ayrıca gatsby ile tema yapmadan önce araştırmalar yaparken böyle yazılar çok fazla görüyordum. Bu iş değişikliği benim için buna vesile olmuş oldu.

MacOS'ta Neler Kullanıyorum

Çalışırken Macbook ile birlikte harici monitör, klavye ve mouse kullanıyorum. Öncelikle her gün ilk gördüğüm ekranın ne olduğunu ve hangi uygulamalarımı kullandığımı göstereyim.

homepage
homepage

Anasayfayı çok basit tutmaya özen gösteriyorum. İlgili olan dosya türlerini de grupluyorum. Bu şekilde aradıklarımı daha kolay ulaşıp kalabalık olmasını önlemiş oluyorum.

Klasör olarak da kişisel projelerimi www, iş ile ilgili olan proje, döküman ve dosyaları works ve bunların haricindeki olan işleri de Folder ile tutmaktayım. Mesai saatler içerisnde works klasörü sürekli açıkken mesaiden sonra www klasörü yoğun kullanıyorum.

Launchpad 1. Sayfa
Launchpad 1. Sayfa

Launchpad ekranını ise çok fazla ziyaret etmiyorum. Ama orayı da elden geçirip hemen ulaşmak istediğim ve nadirde olsa kullandıklarımı buraya attım. MacOS'ta varsayılan olarak gelenleri bir klasör içinde tutarak diğerlerini rastgele yerleştirdim. Bir diğer sayfasında ise çok nadir kullandıklarımı yerleştirdim ki bir şeyleri ararken zorlanmayayım.

Launchpad 2. Sayfa
Launchpad 2. Sayfa

Şimdi gelelim hangi uygulamarı neden kullanıyorum. Eğer varsa konfigurasyonlarım nasıl, hep birlikte bakalım.

  • Visual Studio Code: Şimdiye denediğim birkaç editörden sonra seçtiğim editör oldu. Konfigurasyon dosyası için buyrun: Gist
  • iTerm: Terminal olarak bence en iyisi. Konfigurasyon için gist
  • Spark: Birkaç mailimi ekleyip hepsini birden yönetebiliyorum.
  • Fantastical 2: Takvim ile ilgili tüm işlerimi buradan yönetiyorum.
  • Bartender 3: Menü bar'da bir süre sonra çok fazla uygulama gözüktüğü zaman rahatsız oluyorum. Bu şekilde kullanmadıklarımı gizleyebiliyorum.
  • Raycast: Spotlight alternatifi olarak bu uygulamayı kullanıyorum. Bu uygulamanın güzelliği nedir?
    -Yaklaşan bir toplantım olması halinde bu ekranı açarak hemencik katılabiliyorum.
    -Hesap yapmak için sadece 2 + 2 yazmam gerekli. Cevabın 5 olduğunu bana söylüyor(!). Aynı şekilde döviz hesaplamalarını da kolayca yapabiliyorum.
    -Sıklıkla uğradığım linkleri kısayol atayıp çok hızlı bir şekilde giriş yapabiliyorum.
    ve daha fazlası...
  • Mos: Harici bir mouse kullandığımdan dolayı scroll hareketinin smooth ve ters-tüz durumları için kullanıyorum.
  • Unsplash Wallpapers: Arasıra arkplan resminden sıkılıyorum. Bunun için uygulamanın bana önerdiği görsellerden birini beğenip kullanıyorum.

iPhone'da Neler Kullanıyorum

iPhone yeni geçtiğimden dolayı yeni uygulamalar araşındayım. O yüzden temel olarak kullandığım uygulamalar şöyledir.

page 1
page 1

Gördüğünüz üzere iPhone ile varsayılan olarak gelen uygulamaların hepsi burada yer almaktadır. Bunlardan hariç olarak Spark'ı görüyorsunuz. Bilgisayarımda da kullandığımdan dolayı tek tıkla tüm hesaplarımı yine olduğu gibi telefonda da kullanabiliyorum. Bu şekilde herhangi bir hesap girişimi yapmama gerek kalmıyor.

Ayrıca widget'larda gördüğünüz gibi hava durumu ve kur takip uygulamasını koydum. Bu şekilde uygulamaya girmeden hızlı bir bakış atabiliyorum. gün içerisinde sıklıkla baktığım yerleri bu şekilde widget olarak eklemek kulanım kolaylığı sağlıyor

page 2
page 2

Bir diğer sayfada ise günümün en çok zamanı geçirdiğim sayfa. Sosyal medya uygulamaları, bankalar, oyun... Herkesin bildiği uygulamalar haricinde ben ekstra olarak neler kullanıyorum gelin bakalım.

  • Notion: Büyük çapta notlarımı notion üzerinde tutuyorum. Bu şekilde daha kalıcı olmuş oluyor. Basit ve todo gibi işlerimi Apple'ın varsayılan not uygulamasıyla daha hızlı hallediyorum.
  • Lightroom: iPhone'a geçiş sebebimin ilk maddesidir. Fotoğrafçılığa karşı ilgim var. Aynı zamanda çektiğim fotoğrafları da düzenlemeyi çok seviyorum. O yüzden olmazsa olmazlardan lightroom'dur.
  • Dualingo: Ara sıra dil pratikleri yaptığım uygulama. Bu aralar biraz boşlamış olabilirim
  • Moov: Bazen araç kiralamak gerekiyor. Bu uygulama ile çok hızlı ve güvenilir bir şekilde araç kiralama işlemi yapabiliyorum.
  • Midas: Yeni üye olduğum ve gerek Türkiye gerekse Amerika'daki şirketlere yatırım yapabiliyorsun. Şu an sadece analiz ve araştırma aşamasındayım.

Ekstra MacOS kullanacak kişiler için bir tavsiye vereyim. Logitech Mouse M510 işinizi çok fazla kolaylayacaktır. Ekran geçişleri olsun, geri gitme olsun, butonları özelleştirebiliyorsunuz.

Şimdi bilgisayara format atabiliriz :)

Yazılıma Nasıl Başlanılmamalı

Kişisel02 Ekim 2021 4 dk okuma

Elimden geldiğince çevremdekileri yazılım öğretmeyi ve bir işin ucundan tutmayı aşılıyorum. Eğer birisi öğrenme sürecinde ise de ona elimden gelen desteği gösteriyorum. Gerekse üniversitede gerekse çevremdeki insanları incelediğimde bir kaç yanlış durum görüyorum, kanaatimce. Bu yazıda bunlardan bahsetmek istiyorum.

Her şey yazılım değildir

Eğer yazılım öğrenmeyi kafanıza koymuşsanız, her şeyin yazılımdan ibaret olmadığını bilmelisiniz. Sabah akşam yazılım öğrenerek belki bir yere gelebilirsiniz ama sadece bir yere kadar. Önemli olan iletişim becerilerinizi de geliştirmek, yazılım ekosisteminde rahat bir şekilde konuşmak, öğrendiğini paylaşmak, iyi bir okuyucu ve problem çözücü olmak... ve daha bir çok şey. Aynı zamanda kendinizi bu alanlarda da geliştirmeniz gerekmektedir.

Sırtımı yaslar kodumu yazar geçerim diyerek bu meslek icraat edilmez, edilebilir ama edilemez. Ne kadar kod yazıyorsanız o kadar da kod okumasını bilmeniz ve problemleri o denli çözmeniz gerekmektedir. Sonuçta bizim işimiz problem çözmektir. Problem çözmek için de sorunu iyi anlayıp onu iyi bir şekilde analiz etmeliyiz. Analizler sonucunda araştırmalar yapıp çok fazla kod incelemek, edindiğimiz bilgileri de takım arkadaşlarıyla paylaşmamız gerekmektedir. Bu şekilde ortaya daha iyi bir ürün ortaya çıkarabiliriz.

Öğrendiklerini kendine saklama

Yazılım öğrenme süreci çok güzel gidiyor. Her gün yeni şeyler öğreniyorsun ve kendini geliştiriyorsun. Peki kendine neden bir blog tutmuyorsun? Ya da neden kendine bir youtube kanalı açmıyorsun? Öğrendiklerini başklarıyla paylaşsan ve onları da öğrenme sürecine dahil etsen daha iyi bir ilerleme kaydetmez misin?

Öğrendiklerini paylaşmak insanlara ben bunları öğrendim ve bir sonraki yazımda da şunları öğreneceğim demenin bir yoludur. Yazdıkça ya da video çektikçe çevre de edinmiş olursun. Herhangi bir durumda sorabileceğin, tartışacağın insanlar olacaktır. Veyahut herhangi bir ihtiyaçta sana bir mesaj atacak kişiler olmuş olacaktır.

Projecik değil proje oluştur

Herhangi bir dil öğrenirken zaten her zaman proje yapacaksındır. Bu projeler; hesap makinesi, to-do uygulaması olacaktır genelde. Bu projeleri zaten yap. Ama aslında önemli olan büyük çapta bir proje yapıp ne gibi sorunlarla karşılacağını ve o sorunlara nasıl yaklaşacağını bilmen gerekir. Bunu en iyi öğrenme şekli de aslında gerçek anlamda bir proje yapmaktan geçiyor. Eğer çevrenizde sizin gibi birileri varsa beraber ekipçe çalışmak daha da iyi olacaktır.

Yaptığınız projeleri pazarlamayı da öğrenmeniz gerekmektedir. Projeleri açık kaynak yapacaksanız eğer zaten github, gitlab üzerinden paylaşırsınız. Bunun için o araçları iyi ve doğru bir şekilde kullanıp insanların kolayca incelemesine olanak sağlayabilirsiniz. Projeyi geliştirirken öğrendiklerini, hatalarını blog olarak yazıp paylaşmayı da unutma.

Kendini pazarlamayı unutma

Yazılım öğreniyorsun ama kim seni biliyor? Ya da kim bu sürecine ortak? Eğer amaç sadece hobi olarak yazılım öğrenmek değilse kendini de pazarlamalısın. Kendini pazarlamalısın çünkü profesyonel olarak bu işi yapmaya başlayacağın zaman tüm bu yaptıklarının önemi çok büyük olacak ve sana bir basamak görevi görecektir.

Bu bağlamda twitter, github, linkedin gibi araçları aktif bir şekilde kullanıp kendini öne atman gerekmektedir. Bu sosyal mecralarını özgün ve dolu bir şekilde kullanmaya da özen göster.

Her şeyi öğrenme

Tüm teknoloji oturup öğrenmekle uğraşma. Bazılarını sonraya sakla. Çünkü her proje geliştirdiğinde yeni şeyler öğreniyorsun. Büyük ihtimal zamanında bıraktığın teknolojileri o zaman kullanmak zorunda kalacaksın. Gerçek bir projede de kullanıp öğrenmiş olacaksın. Böylelikle geçmişte zaman kaybetmemiş olursun.

Peki neleri öğrenmeliyim? diye soruyorsan şöyle bir ipucu vermek isterim. Seçtiğin title'a göre iş ilanlarını incele. En çok hangi teknolojiyi istiyorlarsa onları öğrenmeye başla.

Bu konuda kendimden örnek vermek istiyorum. Geçmişte öğrenmek istediğim çok şey oldu ama çoğuna bakmadım bile. Çünkü o zaman yapmam gereken projeler vardı ve yeni bir teknoloji öğrenmeme fırsatım yoktu. Şu an yaptığım study case'lerde bilmediğim teknolojileri gerçek bir proje üzerinde kullanıp öğrenmiş oluyorum. Öğrenme sürecimi de bu şekilde devam ettiriyorum.


Aslında tüm bunları yaptıktan sonra yeterli bir noktaya geldiğinde iş teklifleri almaya başlayacaksın. Bu şekilde iş başvurusunda bulunmak yerine sana gelen teklifleri değerlendirip istediğin işi kabul edip o projede çalışma fırsatı bulacaksın. Kendimizi şunu sormamız gerekiyor. İşlere başvurup kendimi beğendirmek mi yoksa gelen tekliflerden beğendiğimi kabul etmek mi?

Bana Feedback Ver!

Kişisel05 Ağustos 2021 2 dk okuma

Yorgun ve yoğun geçen günlerin ardından tekrar yazmak güzel. Son zamanlarda kitap okumaya başladım ve ondan mütevellit yazma heyecanı oluştu. O yüzden iki gündür ne yazsam diye düşünüyordum. Etkisini gördüğüm ve önerdiğim bir konu üzerine yazmak istedim. Konumuz feedback almak. Hazırsanız hadi başlayalım.

Daha yolun başındaysanız "acaba ne öğrenmem gerekiyor?Hangi yönlerim zayıf? Bu konu hakkında nasılım?" gibi sorular sormaya başlıyorsunuz. Bu noktada çalıştığınız insanlardan feedback almak etkili oluyor.

Tabii feedback aldığınız her kişi sizi olumlu anlamda yorumlayabilir. O yüzden sizi açık açık yermesini söyleyebilirsiniz. Çünkü bu şekilde eksik yönlerinizi görüp ona göre yol çizmeniz kolaylaşıyor. Ayrıca bu şekilde dışarıdan nasıl biri olduğunuzu anlamayı da kolaylaştırıyor diyebilirim.

Sonuçta bir takım çalışmasının içinde olduğumuzdan dolayı insanlarla ilişkisinden tutun yazdığınız kodun okunabilirliğine kadar olan tüm konular önem arz etmektedir. Çünkü aynı pencerede eksiksiz ve doğru bir şekilde olmak önemlidir. Bundan dolayı belki eksik olduğunuz bir yönünüzden farkında olmayabilirsiniz. Dışarıdan bir görüşü öğrenmek her zaman etkili olacaktır.

Şimdiye kadar yaptığım görüşmelerde ise bir kaç şirket kötü olan yanımı veya feedback alıp almadığımı sordular. Böylelikle işe alacak arkadaşları daha iyi tanımaya çalışıyorlar ve önem veriyorlar.

Velhasıl kelam, feedback verme ve alma kültürümüzün olması lazım. Bu şekilde ortamımızı ve geleceğimizi daha iyi bir şekilde inşa edip huzurlu ve güzel bir şekilde hayat sürebiliriz.

Esenlikler efenim...

Neler Yapıyorum? Aklımda Neler Var? #2

Kişisel04 Temmuz 2021 2 dk okuma

Yazmayalı uzzuuun zaman oldu. Böyle olunca da yazarken zorlanıyorum. Ekstra olarakta şu giriş yazılarını yazmayı hala beceremiyorum. Öhö öhö, neyse hadi başlayalım

Neler yapıyorum?

Üniversite ile olan işlerimi pratikte bitirdim. Çünkü finallerimi de bitirip okul hayatımı şimdilik bitirdim. Pratikte mezun olduğumu söyleyebilirim. Sadece teknik olarak mezun değilim. O yüzden yoğun bir dönemi geride bıraktım ve bundan sonrası istediğim şekilde yönetebileceğim bir zaman.

Şu anki şirketimde yaklaşık olarak 11. ayım ve kariyer hedeflerim doğrultusunda iş değiştirme girişimi içerisindeyim. Bu doğrultu da gelen teklifleri değerlendirip bu hedeflere doğru emin bir adım atmak istiyorum. Bu şekilde olunca da haliyle zamanım biraz stresli geçiyor. Çünkü bu iş ile tam zamanlı çalışma düzenine geçeceğim ve bir düzen kurmam gerekecek.

Eskisi kadar yeni proje geliştiremiyorum ve mesaiden sonra kendi gelişimim için çok fazla bir şey yapmıyorum. Genelde kafa dağıtmaya yönelik aktiviteler yapıyorum.

Hayatımda daha önce tatmadığım bir duyguyu tadıyorum ve bu bana inanılmaz şekilde bir enerji veriyor. Galiba çok mutluyum :)

Daha önce mobil uygulamalarımı markete gönderip orada birkaç şey deneyeceğimi söylemiştim. Bunun için daha önceden geliştirdiğim mobil uygulamalar üzerinden gördüğüm eksik kısımlarını giderip olması gereken özellikleri hazır hale getiriyorum. Bu kısmı biraz ağırdan alıyorum. Çünkü gerekli motivasyonum henüz yok.

Bu süre zarfında bir kaç mülakata girip istenilen projeleri yaparken kendimi geliştiriyorum. Kendimi nasıl geliştiriyorum? Benden istenen projeleri daha önceden kullanmadığım araçları/teknolojileri kullanarak geliştiriyorum. Bu şekilde öğrenme sürecimi aynı anda yürütmüş oluyorum.

Mülakatlara girdiğimi söyledim. Bu sayede kendimi daha iyi bir şekilde ifade edip hangi konularda eksiğimin olduğunu görüp mülakat tecrübesi ediniyorum. Bunu da gelişim olarak sayabiliriz :)

Neler Yapacağım?

Sektörden insanlarla görüşmeler yaptığımı söylemiştim ama bu geçtiğimiz süre boyunca bunu aksattım. Tekrardan bu görüşmelere devam edip yeni insanlar tanımak istiyorum.

Teknik ingilizce olarak kendimi geliştirmeye çalışacağım. Bu noktada yaptığım tüm işlerde ingilizce kullanamya özen göstereceğim. Tabii ki özen göstermek yeterli olmuyor. Bununla birlikte araştırma da yapacağım. Bu şekilde hem kelime bilgimi arttırıp hem de teknik olarak kendimi daha doğru ve güzel bir şekilde ifade edebileceğim.

Yapabildiğim kadar blog içeriklerine devam etmek istiyorum. Edindiğim tecrübeleri, öğrendiğim yeni bilgileri ve düşüncelerimi aktaracağım.

Bu Blog Artık Açık Kaynak

Yazılım28 Mart 2021 2 dk okuma

Yeni teknoloji öğrenirken mutlaka proje yaparak pratik yaparım. Çünkü bu şekilde pratik yaptıktan sonra öğrendiğin bilgilerin kalıcı hale geldiğini düşünüyorum.

Uzun zamandır Gatsby öğrenme arzum vardı ve bir türlü fırsat bulamıyordum. Bir noktadan sonra öğrendiğim bilgileri paylaşma isteği duydu ve kendime bir kişisel blog oluşturma kararı aldım. Aslında ilk başlarda Next.js ile geliştirme düşüncesi vardı ama yeni bir challenge olması için gatsby ile yapmaya başladım. Projeyi hedeflediğim noktaya getirdiğim zaman paylaşmayı planlıyordum. Bu zamana kadar ise tasarımı kullanmak isteyen bir kaç kişiden mesaj aldım ve hatta geçen günlerde bunu twitter'da paylaştım.

Her neyse, velhasıl kelam...

Blogu kodlamaya başlamadan önce herhangi bir tasarım çizmedim. Starter-blog ile başladım ve yavaş yavaş yol kattetim. Öncesinde basit bir tasarım ortaya çıktı ve nabzı yoklamış oldum. Daha sonrasında ise şu anki görünümünü aldı. Ayrıca gtmetrix sonuçları ise şu şekilde

Gtmetrix
Gtmetrix

Temada neler var?

  • Blog yazılarını markdown ile oluşturuyorsun.
  • Favori projelerini sitenin anasayfasında gösterebiliyorsun.
  • Flickr'da paylaştığın fotoğrafları aynı zamanda burada da paylaşabiliyorsun.
  • Dileyen ziyaretçin karanlık temayıda kullanabilir.
  • Twitter'da paylaştığın zaman gelen cevapları o yazının altında gözüksün diye Webmention.io desteği.

Aslında bu yazıyı çok fazla uzatmak istemiyorum. Çünkü Github üzerinde oluşturduğum Readme dosyasında detayları görebilirsiniz.

Kaynak Kodlar

Eğer katkıda bulunmak isterseniz çekinmeyin lütfen. Her PR ve issue'lara açığım. Eğer kendi blogun için kullanacaksan bana bir selam göndermeyi unutma :)

Repo'ya git

Git Sildiğin Değişikliği Geri Getir!

Yazılım28 Şubat 2021 2 dk okuma

Yaklaşık bir saat önce yeni birkaç özellik yazdım ve o arada git pull yapmadığım için git push yaparken hata verdi. Onları kurtarayım derken yaptığım değişiklikler gitti. Bu gibi senaryolarda yapacak bir şey yok deyip yeniden yazamya başlardım. Ama bu sefer, belki bir yol vardır diye google yolunu tuttum.

Eğer yaptığınız değişikliği git add yaptıysanız dosyalar hashlenmiş oluyor. Bu demek oluyor ki git bunu sizin yerinize tutuyor. Ki git'in olayı da bu değil midir? Sonra anlamadığınız şekilde bir şeyler oldu, yaptınız ve bir takım olaylar gelişti. Değişiklikleriniz gitti. Sakin ol ve derin bir nefes alıp yazıyı okumaya devam et.

  git fsck --lost-found

bu kodu kullanarak hashlenmiş olan önceki değişikliği geri getirin. Bu kodu yazdıktan sonra size aşağıdaki gibi bir çıktı oluşturuyor. Aslında bu çıktının aynısı .git/lost-found klasörü içinde de kayıt ediyor.

Checking object directories: 100% (256/256), done.
dangling commit 42fd85940eb2f76f32d4be5ac2d4b***********
dangling commit 831acdb7115a6284f6e969ac90c7f***********
dangling tree 8cc268a3f48c08cd95329fcd73cc306***********
dangling commit ef7fe1814a47fbf89cbcbb1ce39e4***********

Çok güzel, yaptığımız değişikliklerin hash'lerine ulaşmış olduk. Şimdi git cat-file diye bir komuttan yardım alacağız. Bu kod kısacası, yapılan değişikliklerin içerik, tür ve boyut bilgilerini sağlıyor.

Önce geri getirmek istediğimiz değişikliğin hangisi olduğunu öğrenmek istiyoruz. Bunun için aşağıdaki kodu yazıp commit mesajınıza bakarak doğru bir hash olduğunu doğrulayabilirsiniz.

ef7fe181 ifadesi yukarıdaki hash çıktılarının ilk 7 hanesidir.

git cat-file -p ef7fe181
tree dafb6a5fabb658210e2fa1534670f6***********
parent 84da27f33676589e46711ad35468***********
author Berat Bozkurt <[email protected]> 1614455618 +0300
committer Berat Bozkurt <[email protected]> 1614455618 +0300

upload files

Daha sonra ise aynı işlemi bu kez tree hash'ini yazarak devam ediyoruz.

git cat-file -p dafb6a5f
100755 blob 1437c53f70bc211ec65739ec4a8c***********	.gitignore
100755 blob 4b412a3cfa4cabbb3a3d8175d265***********	README.md
040000 tree eaeb7e5f2932b079d4837ca65395***********	components
100644 blob 23c81abc6d8bb55de4bfb9567c8a***********	data.js
100755 blob 36aa1a4dc28f1a7d72c037a4ef0d***********	jsconfig.json
100755 blob 8b94735e5d6a222a721b72f9d543***********	package.json
040000 tree e615f7e6d7712b0e91e484b70529***********	pages
040000 tree 45eb3bc0909b493adf37d7bcb11a***********	public
100755 blob 9f7c9dcc239336c67b8f024a91fe***********	site.config.js
040000 tree 9d0b469049594f9921be80ee33e3***********	styles
100755 blob 52c5fa66a84de8b4387803ec20c8***********	yarn.lock

Artık hangi kısımdaki değişiklikler kaybolduysa oradaki içerikleri kolay bir şekilde alabiliriz. Onun için yine aynı kodu kullanıyoruz.

git cat-file -p  4b412a3
### Hello World

Hello World!

Gördüğünüz gibi dosya içeriğini görmüş oluyoruz. Benim edindiğim tecrübe bu şekildeydi. Belki daha iyi ve temiz bir yol vardır ama o yolu keşfedene kadar benim için en iyi yol budur :)

Şimdi Git ve yaptığın değişiklikleri geri getir!

Kaynaklar

Aklımda Kalsın: React'ta Hataları Yakalayalım

Yazılım15 Şubat 2021 2 dk okuma

İnsan yeni proje geliştirdikçe ve özellikle müşterilere çıkacaksa mutlaka bir şeyin eksik veya yanlış olduğunun farkına varıyor. Bu farkına vardığınız şeyler ise sizin ya eski tecrübelerinizi konuşturup bir fikir ortaya atmanızı ya da eğer benim gibiyseniz bu ihtiyaçları gidermek için yeni şeyler öğrenip onları başarılı bir şekilde uygulamak gerekir.

O yüzden eğer yazılıma YENİ BAŞLIYORSAN mutlaka proje yapmalısın. Çünkü yaptığın projeler, kişisel gelişiminin daha verimli bir şekilde artmasını sağlıyor. Aslında tek başına bunu iyi yapıyorsun. Çünkü ben o kısımları yaşadım ve gelişim bir seviyeye kadar oluyor. Kendini bir an önce bir ekibe atmak iyi oluyor. Çünkü farklı kafalar görmüş oluyor ve olması gereken bir çözümü öğrenip ona göre çalışmalar yapabiliyorsunuz.

Bugün bir mobil uygulama yaptığınızı düşüneceğiz. Uygulamanızı hazırlayıp test etme aşamasına geçtiniz. Telefonunuzdan uygulamanıza girdiniz ve açılmıyor (beyaz sayfada kalıyor). Hemen kontrol ediyorsunuz ve local'de çalıştırdığınızda hata alıyorsunuz. Endişelenmeyin çok olası bir durum :) İşte sizin yaşadığınız bu problemi ileride kullanıcılarınızı karşılarken almamak, hatta doğru bir şekilde söylemek gerekirse, kullanıcılarınızı bilgilendirmek iyi bir tercih olacaktır. "Lütfen tekrar deneyin", "Lütfen uygulama yapımcısı ile iletişime geçin", "Hatayı bildirin"


import React, { Component } from "react"

export default class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { error: null, errorInfo: null }
  }
  componentDidCatch(error, errorInfo) {
    console.log({
      error: error,
      errorInfo: errorInfo,
    })

    this.setState({
      error: error,
      errorInfo: errorInfo,
    })
  }

  render() {
    if (this.state.errorInfo) {
      return <h1> BE CAREFULL, DUDE! </h1>
    }
    return this.props.children
  }
}

Yukarı kodda belli olduğu gibi react'taki componentDidCatch lifecycle yöntemini kullanıyoruz. Bu şekilde ekrana gelen tüm hataları buradan yakalayıp istediğimiz gibi işlemlere sokabiliyoruz. Burada bildiğim kadarıyla şunları yapabilirsiniz:

  • Hata olduğu zaman bunun için hazırlanan endpoint ile sürekli iletişim halinde olabilir.
  • Eğer Sentry gibi bir servis kullanıyorsanız tetikleme işlemleri yapabilirsiniz.
  • Bir mobil uygulama olduğunu düşünürsek Alert mesajı verebilirsiniz.

Aslında anlaşılması kolay bir şey ama bunun varlığından haberdar olmak önemli.

Şimdi gelin bu kodu uygulamaya nasıl uygulayacağız. Öncelikle src/index.js dosyasını açalım ve <App />'i kapsayacak şekilde yazalım.

import { StrictMode } from "react"
import ReactDOM from "react-dom"

import App from "./App"
import ErrorBoundary from "./ErrorBoundary" 

const rootElement = document.getElementById("root")
ReactDOM.render(
  <StrictMode>
    <ErrorBoundary>
      <App />
    </ErrorBoundary>
  </StrictMode>,
  rootElement
)

Şimdi daha iyi bir kullanıcı deneyimine sahip ve nerede hata olduğunu kolayca bir şekilde bulmanızı sağlayan bir uygulama yazmaya başlayabilirsiniz :)

Kendime Kodlar: TypeScript

Yazılım13 Şubat 2021 3 dk okuma

Eğer kariyerinizi belirleyip o alanda daha iyi bir seviyeye gelmek istiyorsanız mutlaka teknolojileri takip etmelisiniz. En azından güncel kalmalısınız. Özellikle benim gibi yolun başındasınız bu süreçler biraz sizi yoracaktır. Eğer bu iş sizin için bir hobi ise bu süreç eğlenceli bir hal alacaktır.

Söz dizimlerini aklımda tutmakta zorlanıyorum. O yüzden yeni başladığım teknolojilerde mutlaka söz dizimlerini hatırlamak için örnek bir proje üzerinden takip ederim. Bu şekilde yazmak daha kolay oluyor. Yeni bir teknolojiye başlarken ise odaklandığım nokta mantığını anlamak. Bu mantığı anlama kısmı ise piyasanın içinde olduğunda daha kısa sürüyor.

Bu yazıda ise daha sonra gelip bakacağım için kod bölümleri olacak. Aslında sizlerde burayı cheatsheet olarak kullanabilirsiniz.

TypeScript Tipleri (Types)

Tahminimce en yaygın kullanılanları bir kod bloğu içinde inceleyelim.

let isim: string = 'berat'; // String tipinde olmalı.
let yas: number; // Number tipinde olmalı
let numara: any; // Herhangi bir tip olabilir
let teknolojiler: string[]; // Stringler'den oluşan bir dizi

yas = 22;
numara = "555 555 55 55";
teknolojiler = ["React", "Redux"]

console.log(`${isim}, ${yas}, ${numara}, ${teknolojiler.join(" - ")}`) // "berat, 22, 555 555 55 55, React - Redux" 

enum mantığını kafamda kuramadığım için bir tweet attım ve verilen cevap sonucunda biraz da olsa anladım diyebilirim.

Anladığım kadarıyla enum ile tanımlanan tip yapısından çıkmamanı sağlıyor. Ama kanaatimce onun yerine string literal union kullanmak daha kolay.

Genelde bu terimleri bilmem ve alışkın değilim. Ama bir noktadan sonra bunları bilmek ve bilgi sahibi olmak gerekir. O yüzden kullanarak bunları öğreniyorum.


enum Boyutlar {
  kucuk = "10px",
  orta = "50px",
  buyuk= "100px"
}

console.log(`Aldığım ürün ${Boyutlar.orta} boyutundaydı.`) //"Aldığım ürün 50px boyutundaydı." 

Tuple sabit bir arrayin içindeki elemanların tipi belli ise kullanabileceğiniz bir tip.


let errors: [number, string];
errors= [404, "Not found!"]; 

Diğer tiplerden biri ise unknown'dur. Any ile arasındaki tek fark; eğer daha önceden tipini belirlediğiniz bir değişkeniniz varsa unknown olarak tanımladığınız değişkeni o değişkene atayamazsınız. Hemen örnek verelim.

let durum = true;

let a: any = status // çalışır

let b: unknown;

durum = b; // hata verir

Object Type yani nesne tipini belirlemek.


let kullanici: {
  isim: string;
  yas: number;
  numara: any;
  maas: () => number
}

kullanici = {
  isim: 'Berat',
  yas: 22,
  numara: 5555555555
}

TypeScript Union Type

Kısacası değişkenin alacağı değerleri sınırlamak veya birkaç farklı tipte değer atamasına olanak sağlıyor.


let pozisyon: {
  rol: "admin" | "user"; // sadece admin ya da user değerini alabilir.
  TC: string | number; // değer string ya da number tipini alabilir.
}

TypeScript Fonksiyonlar (Functions)


const yazdir = (isim: string, yas: number, TC: string | number, numara?: string) : any => {
  return `${isim} ${yas} ${TC} ${numara}`
} 

yazdir("Berat", 22, 11111111111)

Tüm olayı tek fonksiyon ile anlatmaya çalıştım. Şimdi gelin neler var bakalım;

  • isim: string parametreleri bu şekilde gönderiyoruz. Daha önceden de kullandığımız gibi.
  • numara?: string burada ? işareti devreye geliyor. Eğer bu paramtereyi almak zorunda değilsek soru işareti kullanıyoruz. Eğer soru işareti kullanmazsak ve bu parametre gelmezse kod hata verecektir.
  • (...) : any fonksiyon değer döndürecek ve bu değerin any tipinde olması gerektiğini söylüyoruz.

Şuan yukarıda değindiğim konuları aktif olarak kullandığım için bunlar üzerine bu yazıyı oluşturdum. İlerleyen zamanlarda eminim ki class, interface gibi kısımlarla çok ilgileneceğim. O zaman bu yazıyı günceleriz :)

Aslında TypeScript ile ilgili bir proje yapmak isterdim ama örnek projeleri ve videoları incelediğim kadarıyla o kadar karışık bir olay gibi gözükmüyordu. O yüzden sadece genel özelliklerini bir yere not etmek yeterli olacaktı.

Kaynaklar

İzledim: Hayattan Bir Gün (Belgesel)

Kişisel08 Şubat 2021 2 dk okuma

Zaman zaman gelecek, geçmiş, insanlar hakkında düşünürüm. İnsanlar hakkında düşünürken aslında empati kurmaya çalışırım ve başkası nasıl düşünüyor, nasıl yaşıyor, neler yapmak istiyor... diye giden sorulara cevap aramaya çalışırım. Çünkü hala aklımda bir takım sorular ve cevabını bulmak zor oluyor. Bu da benim keşfetme çabam işte :)

Acaba ben şu an bu yazıyı yazarken dünyanın başka yerinden tanımadığım hatta varlığını bile bilmediğim birisi ne yapıyor? Mutlu mu? Ağlıyor mu? Acaba o da başkasını mı düşünüyor?

Aslında bu şekilde insan yaşadığı hayattan ders alabilir, şükredebilir veya keyfini çıkarabilir. Çünkü ben şu an sağlıklı bir şekilde nefes alıp hayalimdeki mesleği yapabiliyorsam belki bazıları, bir solunum cihazına bağlı veya yeterli imkanları sağlayamadığı için hayalindeki mesleğe yapamıyorlar. Aslında bunlar çok basit bir örnek.

Bu belgesel aslında ikincisi. İlk belgesel 24 Temmuz 2010 yılından toplanan videolardan oluşmaktadır. İkinci yani son çıkan belgesel ise 25 Temmuz 2020'den toplanan videolardan oluşmaktadır. Aslında ilk önce ilk çıkan belgeseli izleyip daha sonrasında ikincisini izleyebilirsiniz.

İkinci belgeselinden rakamlarından bahsetmek gerekirse; 192 ülkeden 65 dilde toplam 324.705 video gönderilmiş. En sonunda ise ortaya 1 saat 25 dakika 52 saniyelik bir belgesel ortaya çıkmış. Kaynak

Belgeselde Türkiye'den 3 bölüm yakaladım. Bunu farkedince insanın yüzünde bir tebessüm olmuyor değil tabii :)

2010 yılında çekilen belgesel

2020 yılında çekilen belgesel

React Uygulamasına Test Yazalım #1

Yazılım28 Ocak 2021 4 dk okuma

Ülkemizdeki şirketlerin bir çoğu --dersem yanılmam sanırım-- test yazma taraftarı değiller. Sanırım bunu bir zaman kaybı olarak görüyorlar. İlk zamanlarda ben de öyle görüyordum, belki şimdi de öyle görüyorum, bundan tam emin değilim. Her neyse, bugün sizlerle react uygulamamıza nasıl test yazarız? Hangi araçları kullanırız? Mantığı nedir? bunlardan bahsedeceğim. Eğer ihtiyaç duyarsam belki bu yazının 2. partını da yazabilirim. Söz vermeyelim :) Yazmıştım ama bu yazıda basit bir örnek yapalım. Bir sonraki yazıda biraz daha detaylı bir örnek yaparız.

Yandaki kelimelerin ne anlama geldiklerini ve ne amaçla kulanıldıklarına hakim olursanız bu yazı daha faydalı olacaktır. Unit test, Jest, EnzymeTeker teker ne işe yaradığını, nedir, ne değildir gibi tanımlar yapmayacağım. Bu şekilde tanımlardan bahsetmeyi de beceremiyorum. Bunun için bir kaç arama ile kolayca bilgi sahibi olabilirsiniz. (Bunun için yazının altına bir kaç kaynak bırakacağım.) Hadi örnek uygulamaya geçelim.

Öncelikle bir senaryo düşünelim

  • Bir adet input
  • Bir adet buton

kullanalım. İnput'a yazılan metni bir state'e kaydedip butona tıkladığımız zaman state'teki değeri console.log ile ekrana verelim. Bunun için şöyle bir sayfamız olacak.

import React, { useState } from "react"

export default function SearchBox(props) {
  const [text, setText] = useState("")

  const onChange = e => {
    setText(e.target.value)
  }

  const onClick = e => {
    console.log("State'teki değerimiz: ", text) 
  }

  return (
    <div className="search-box">
      <input
        type="text"
        onChange={onChange}
        value={text}
        placeholder="Ara"
        className="search-input"
      />
      <button type="submit" className="button-click" onClick={onClick}>
        Tıkla
      </button>
    </div>
  )
}

Başlangıç seviyesinde olsanız da çok kolay bir şekilde anlayabileceğiniz bir bileşen. Yine de açıklamak gerekirse; input'a yazılan her yazı state'te tutuluyor ve butona tıkladığı zaman state'teki değer console.log ile yazılmaktadır. İlk aşama için belki bu örnek işimizi görecektir.

Bu şekilde bir bileşen oluşturduktan sonra şimdi sırada test yazmak var. Bu aşamada kodların hepsini vermek yerine kısım kısım verip üzerinden anlatayım. Belki bu şekilde daha iyi anlaşılır olur. Zaten ayrıca projeyi github üzerinden de paylaşacağım. Oradan daha detaylı bir şekilde inceleyebilirsiniz.

import React from "react"
import { render, fireEvent } from "@testing-library/react"
import SearchBox from "./SearchBox"

Öncelikle gerekli olan kütüphaneleri dosyamıza dahil ediyoruz. SearchBox bileşene verdiğim isim.


it("renders correctly", () => {
  const { container, queryByPlaceholderText } = render(<SearchBox />)
  const button = container.getElementsByClassName("button-click").length

  expect(button).toBeTruthy()
  expect(queryByPlaceholderText("Search")).toBeTruthy()
})

Bileşendeki elemanlarımızın doğru bir şekilde yüklendiğini kontrol etmek için böyle bir kapsamımız var. Burada render fonksiyonu içinde SearchBox bileşenini gönderiyoruz ve buradan container ve queryByPlaceholderText'i çekiyoruz.

container : Bileşen içindeki tüm elemanara ulaşmamızı sağlıyor. Bunu elemente class ismi ile ulaşmak istediğimden dolayı kullandım. Bunu kullanmadan elemente bir id değeri yazarak queryAllByTestId ile de ulaşabilirdim.
queryByPlaceholderText : Bileşen içinde input olduğu için bu input'a placeholder değeri ile ulaşıyorum.

Aslında bu kapsamda bileşen içindeki buton ve input elementlerini çağırıp render edilip edilmediğini kontrol ettim.


describe("Input value", () => {
  it("renders correctly", () => {})
}

Genel bir başlık altında test işlemi yapacaksak describe fonksiyonunu kullanabiliriz.


Şimdi ise input'a yazı yazdırıp butona tıklama olayını test edelim. Bakalaım ekranda ne göreceğiz.

it("triggers onClick function", () => {
  const requestClick = jest.fn()

  const { container, queryByPlaceholderText } = render(
    <SearchBox requestClick={requestClick} />
  )

  const searchInput = queryByPlaceholderText("Search")
  const button = container.querySelector(".button-click")

  fireEvent.change(searchInput, { target: { value: "örnek veri" } })
  fireEvent.click(button)
  expect(requestClick).not.toHaveBeenCalled()
})

jest.fn() işleminin tam işlevi nedir bilmiyorum ama internette sahte bir işlev olarak geçiyor.
Yukarıda bahsettiğim gibi bileşen içerisindeki elemanlara ulaştık. Burada ekstra olarak bileşenimize props olarak requestClick gönderdik.

Daha önceden sayfada dahil ettiğimiz fireEvent fonksiyonu ile click ve change event'ini oluşturuyoruz. Burada ekstra olarak change event'ini oluştururken içine birkaç parametre gönderemliyiz. Bunlardan biri hangi input'un change event'ini kontrol ediyoruz. Bir diğerisi ise örnek bir veri gönderiyoruz. Buradaki mantık ise şudur; Normalde input'a yazdığımız yazıyı okumak için onChange={e => console.log(e.target.value)} şeklinde bir event'imiz olur. O yüzden test kapsamındaki veriyi de o şekilde göndermek gerekecek.

Daha sonra expect ile buton'a tıklatıp veriyi ekranımızda görüyoruz.


Kaynak kodlarına buradan ulaşabilirsiniz. Ayrıca yazının bir sonraki serisinde bu repo üzerinden geliştirmeye devam edeceğimm.

Kaynaklar

Neler Yapıyorum? Aklımda Neler Var? #1

Kişisel23 Ocak 2021 3 dk okuma

Eski blogumda bu tarz bir yazı dizisi paylaşıyordum. Bu yazılar ile aslında rapor verip biraz iç döküyordum. Aslında bu şekilde insanlarla etkileşim halinde kalıp neler yaptığım ve yapacaklarım üzerinden ufak bir bilgi geçiyorum. Bu yazıları ayda bir defa yayınlama gibi bir düşüncem var. Bu şekilde ilerleyen zamanlarda dönüp bu yazıları okuduğumda bu zamanları hatırlamam için de bir yardımcı olacaktır.

Neler yapıyorum?

Aslında geçtiğimiz hafta aynı zamanda final haftam olduğundan dolayı benim için çok yoğun bir haftaydı. Hemen bir günümden bahsetmek istiyorum.

  • 11:00'da toplantı.
  • 4 saat mesai.
  • Mesai'den sonra olursa toplantı.
  • Kalan diğer saatlerde ise ders çalışma.
  • Varsa eğer başka kişilerle tanışmak için yapılan görüşmeler.

Bu tempoda bir hayat olunca insan ister istemez yoruluyor. Bu tempo bittikten sonra da büyük ihtimal kendimi boşlukta hissedeceğim.

Blogumda yeni bir API servisi yazdım. Bu API servisinde şimdilik sadece yazıyı beğenme butonunda kullanıyorum. Büyük ihtimal ilerleyen zamanlarda abone olma bölümü için özel bir form hazırlarım. O zaman API'deki servisler çoğalacaktır.

Bir önceki yazımda mobil uygulama yayımlayıp onlara ASO çalışmaları yaparak biraz da mobil uygulama pazarına giriş yapmak istediğimi belirtmiştim. Bunun için bir kaç adım atıp varolan uygulamalarımda durum analizini yaptım. Ayriyeten google play console hesap açtım. Aslında ilk uygulamamı yayımlamak için sadece bir kaç geliştirmeler yapıp pazar için içerikleri ve görüntüleri hazırlamak olacaktır.

Üniversite'de "Proje 2" dersi kapsamında gRPC ile bir proje yaptım. Şu an projenin teslimi üzerinde çalışmalar yapıyorum. Belki ilerleyen günlerde bunun hakkında Türkçe bir içerik hazırlayıp yayınlarım. Çünkü kaynak konusunda ciddi sıkıntılar var.

Neler Yapacağım?

Aslında ilk sırada test yazmak olacak. Hem yurt dışında test yazma konusuna ciddi bir önem verdiklerini gözlemledim hem de çalıştığım şirkette test yazma konusunda ilk adımlar atıldı. Bu yüzden önümüzdeki günlerde test üzerine birtakım çalışmalarım olacak. Bunun için yine bir yazı yayımlayıp belki örnek bir proje üzerinden bir anlatım yapabilirim.

Pandemi boyunca sektörden insanlarla tanışıp onlar ile sohbet etmeye ve aklımda olan bir kaç soruyu soruyorum. Birkaç gün önce Alpcan Aydın (@alpcanaydin) ile bir görüşme yaptık. Güzel bir sohbetin ardından bana bir fikir önerdi. "Neden bu konuşmaları bir blog şeklinde yayınlamıyorsun? Belki başkaları senin sorduğun sorulardan veya sohbetten yararlanmak ister" dedi ve aslında güzel bir fikir. Bunun hakkında biraz daha düşünmek istiyorum. Cepte olan bir fikir :)

Paylaşmayı düşündüğüm mobil uygulamalar üzerinde birtakım geliştirmeler yapıp pazara hazır hale getireceğim. Yavaş yavaş yayına çıkıp bunlar için analizler ve senaryolar çıkaracağım. Bu şekilde güzel bir deneyim elde ettikten sonra tüm bilgileri açık bir şekilde paylaşmayı planlıyorum.

Aynı zamanda gönüllü olarak çalışacağım bir side-project üzerinde geliştirmelere başlayacağım. Projedeki diğer kişiler farklı ülkede olduğundan dolayı ortak dil İngilizce olacak. Bu aslında benim için çok iyi bir durum. Aslında beni bu projeye önerdiği için Şeyma Mektepli (@SMektepli)'ye teşekkürlerimi iletiyorum.

Aslında blogda teknik paylaşımlar yapmayı da planlıyorum. Ama bu yönümün iyi olduğunu bilmediğimden dolayı fazla sıcak yaklaşamıyorum. Bunun yerine belki deneyimlerimi ve ufak kod parçaları ile birlikte yoğurup paylaşırım.

Hadi Yelken Açalım Yeni Deneyimlere

Kişisel01 Ocak 2021 2 dk okuma

21 yaşındayım ki aslında 22 de diyebiliriz. 3 gün sonra 22 oluyorum. Ama hiç fark etmez. Bu zamanları iyi değerlendirmek ve farklı alanlarda deneyim kazanıp bilgi sahibi olmak gerekir. Ki ben öyle düşünüyorum. Aslında insanı geliştiren de bu değil midir? Yeni deneyimler, yeni bakış açıları, yeni düşünceler...

İşten arta kalan vaktimde tam anlamıyla yaptığım bir proje yoktu. Ben de boş kalmamak ve liseden beridir aklımda olan mobil uygulama yayınlayıp para kazanma fikri :) Her ne kadar para kazansam ya da kazanmasam da önemli deği. Buradaki amaç mobil uygulama çıkarıp insanların kullanması ve pasif gelir sağlamak. Hem de bu zamanada kadar okudğum, gördüğüm şeyleri deneyip bunlar gerçekten işe yarıyor mu diye denemek lazım.

Hemen aklımda neler var ufaktan bahsedeyim; Madem o kadar react native yazıyoruz neden uygulama yapıp yayınlamıyorum? Diyerek çıktığım bu yolda ilk adımı atıp google play store hesabımı açtım ve ilk uygulamayı göndermek için hazırda bekliyor. Daha önceden yaptığım ama yayınlamadığım bir kaç uygulamam vardı. O yüzden onları aralıklarla yayınlayıp bir kaç deneme yapacağım.

Bu yolculukta beni neler bekliyor?

  • ASO çalışması yapmak.
  • Uygun reklam yerleşimi yapabilmek.
  • Kullanıcı kazanmak.
  • Global bir uygulama olacağı için kazanım oranlarını ölçmek.
  • Kullanıcı kazanmak için reklam vermek.

O zaman ne diyoruz? Takipte kalmaya devam edin :)

Yıllardan 2020 idi...

Kişisel20 Aralık 2020 4 dk okuma

Yine bir yılı ardımıza bırakıp yeni bir yıla yeni umutlarla ve hedeflerle başlıyoruz. Peki ama her şeyden önce biz bu yıl neler yaşadık, neler yaptık, neler öğrendik... Anı yaşarken insan bunun farkında olamıyor ama oturup düşününce aklına bir sürü şey geliyor. Seni sen yapanın aslında bu yaşanmışlıklar olduğunu görmüş oluyorsunuz.

2021 yıl için hedeflerimi belirtmeme gerek yok. Zaman içerisinde bunların neler olduğu zaten ortaya çıkacaktır. O yüzden gelin biz 2020'ye bakalım.

Tabii 2020 insanlık için kötü bir yıl oldu. Korona virüsü, orman yangınları, patlamalar, depremler... tüm insanlığı derinden etkiledi.

5 Türkçe, 8 İngilizce Yazı Yazdım

Normalde yazmayı seven biriyim. Ama kendime ait bir adres olmadığı için açıkcası yazma isteği olmuyordu. Ama bundan sonra ayda 1 ya da 2 yazı olmak üzere bir şeyler yazacağım. Aslında bu sene 5 yazı yazdım ama bu yazıların yanında ingilizceye çevirdiğim 8 yazı bulunmaktadır.

Eskiden yeni doğru bir sıralama ile yazdığım yazılar.

Aslında İngilizce'ye ne kadar ağırlık verdiğim buradan belli oluyor. Şu an bu yazıları Türkçe yazıyorum ama eminim ki ilerleyen zamanlarda blogu çoklu dil yapacağım. O zaman ingilizce yazılarda gelecektir. Tabii bu benim için fazladan bir çaba oluyor.

Github'da 8 proje paylaştım

Yeni bir işe başladığımdan dolayı son aylar fazla aktif olamadım. Ama öncesinde yaklaşık 9 proje üretip bunları açık kaynak olarak paylaştım. Bu sene toplam 941 tane commit yapmışım. Bunların bazıları react native ile mobil projesi, bazıları react ve node.js projesi idi. Aynı zamanda github'da yaygın olarak kullanılan bir projeyi Türkçe'ye çevirerek destekte bulundum. Hasura GrapHQL Engine

Davetiyem.co Projesinin Kaynak Kodları

Yaklaşık 1.5 yıl yayında olan projemi rafa kaldırdıktan sonra bunun sadece rafta olmaması gerek dedim ve kaynak kodları açık bir şekilde paylaştım. API /w Node.js - Front-end /w Next.js

Kelime Kartı Mobil Uygulaması

İngilizce kelimelerini kolaylıkla öğrenmek için hazırlamış olduğum bir mobil uygulama projesinin kaynak kodlarını herkese açık olarak paylaşmak istedim. WordBox

Twitter Bot

Medium'da yazdığım yazıyı desteklemek için kendi projemde kullandığım twitter botunu açık kaynak olarak github üzerinden paylaştım. Bu şekilde daha anlaşılır olmasını hedefledim.

Replike Twitter Projesi

Tüm projelerimde React yazdığım için vue ile bir proje yapmak istedim. Bunun için daha önce React ile yaptığım projeyi Vue ile yaptım. İki projenin de Twitter replika projesi olmasına önem verdim çünkü bu şekilde aralarındaki farkı daha kolay anlayabilecektim. Aynı bu fark hakkında düşündüklerimi de blog olarak yazdım. Benim Fikrimce: React ve Vue

Covid App

Adem İlter'in hazırlamış olduğu eğitim setini izledikten sonra yaptığım ilk uygulama. Covid App

Tek sayfalık bir kişisel sayfa

Next.js ile kişisel sayfamı hazırladığım, tasarımıyla birlikte paylaştığım bir proje.

Preview URL component

Yazılan hedef URL'nin graph bigilerini çeken küçük bir bileşen.

Yeni Şeyler

Pandemiden dolayı üniversiteler uzaktan devam ediliyor ve sürekli evde olduğumuz için yeni şeyler için fazla vaktimiz oluyor. Haliyle bu vakitleri iyi değerlendirmek gerek.

İlk yaptığım rubik küp alıp biraz oynamak oldu. Daha sonrasında iyice odaklanıp nasıl çözeceğime kafa yordum. Ama bir sonuca varamayıp youtube üzerinden bir kaç video izleyip mantığını kavradım. Bir kaç kere çözdükten sonra haz almamaya başlayınca bir kenera attım.

En azından bir enstrüman çalmak gerektiğini düşündüm ve bağlama ile ilk açılışı yaptım. Notaları öğrendikten sonra bir kaç parça ile açılışı yaptım ve şu an 7-8 parça ile pratik yapmaya devam ediyorum.

Bigdata Teknoloji şirketinde part-time front-end developer olarak çalışmaya başladım.

Biraz Gururlanmak, Farkındalık Olmak ve Mutluluk...

Özel Teşekkür Adem İlter'e

Youtube Kanalı üzerinden yayınladığı eğitim setleri sayesinde bu yıl benim için inanılmaz verimli geçti. Oradan edindiğim bilgileri projelerimde ve işimde kullanıyorum. O yüzden buradan kendisine teşekkürlerimi iletiyorum.

Merhaba Dünya v3.0

Kişisel12 Aralık 2020 2 dk okuma

v3.0 çünkü daha önceden çok fazla blog yazma girişimlerim oldu. Bu blogu'da onların bir devamı olarak görebiliriz. Çünkü yazmayı ve blog tutmayı küçüklükten beri seviyorum. Bu da benim online günlüğüm olsun.

"Merhaba Dünya v2.0" yazısını başka bir adreste yayınladığım tarih tam olarak 30 Haziran 2015. 5 yıl aradan sonra v3.0 yazıyorum, değişik bir duygu.

Burada toplanma amacımıza gelelim. Gördüğünüz üzere yeni bir yerde yine birlikteyiz. İlk blogumu lise 2 ya da 3'e giderken yazıyordum. İlk yazılarım, yorumlarım ve okuyan bir kitlem o zaman olmuştu. Hatta ilk paramı o zamanlarda kazanmıştım. Burada tabii para kazanma gibi bir düşüncem yok. Tamamen düşüncelerimi, deneyimlerimi ve öğrendiğim şeyleri yazarak paylaşmayı planlıyorum.

Burada yazılacak olan genel kategoriler yazılım ve kişisel olacaktır. Yazılım, kategorisinde aslında fazka kod paylaşmayı seven biri değilim ama zaman zaman kod paylışımı olacak. Ama genel itibariyle yaşadığım bir sorun sonrası çözümünü ya kendim anlatacağım ya da özet geçerek hemen kaynak bir link belirteceğim. Zaten zamanla her şey daha da belli olacaktır. Kişisel, kategorisinde ise aklıma gelen herhangi bir konu, haftalık veyahut aylık raporlar ve bu tarz bir çok şeyler ile karşılacaksınız.

Bu siteyi Gatsby ile kodladım ve geliştirmeye devam ediyorum. O yüzden github üzerinden henüz paylaşmadım. Paylaştığım zaman zaten duyursunu da yaparım. Fırsat buldukça blogu günceleştirip daha fonksiyonel, tasarımsal olarak güzel, içerik olarak ise dolu dolu olmasına özen göstereceğim.

görüşürüz
görüşürüz

Öyleyse yeni yazılarda görüşmek dileğiyle. Sağlıcakla kalın!

Güzel Bir Deneyim ve Başarısızlık Hikayesi...

Kişisel26 Eylül 2020 5 dk okuma

Davetiyem.co yani dijital düğün davetiye oluşturma projesini 19 Ocak 2019 tarihinde yayına almıştım. Yaklaşık 2 yıldır yayında olan projemi 27 Eylül 2020 itibari ile sonlandırmış bulunmaktayım. Tamamen deneyim kazanmak ve bir şeyler başarabilmek için çıktığım bu yolda güzel deneyimler ve birikimler kazandım. Burada ise kendime bir kaç şeyler demek ve bu süreç içerisinde neler öğrendiğimi, neleri yanlış yaptığımı sizlerle de paylaşmak istedim.


Teksen hiçbir şeysin!

Tamam, çok güzel. Bir fikrin var ve inanıyorsun ki ben bunu başaracağım. Kendine inanıyorsun ve pozitifsin, çok güzel. Peki yanında kim var? Projeyi geliştirirken kimlerle çalışacaksın? Çalışma arkadaşların kim?

Ben en büyük sorunlarımdan biri projede yalnız olmamdı. Bundan dolayı ki her şeye benim koşmam ve halletmem gerekiyordu. Bu şekilde tamamen kendimi yordum ve verimli bir şekilde proje üzerinde düşünemedim. Odağını sadece bir yönde toplamak o işe olan verimliliğini arttıracaktır. Sadece 3 kişi olduğunuzu düşünsene. Sen yazılım tarafında bakıyorsun, bir arkadaşın tasarım kısmına, diğer arkadaşın ise pazarlama. Bence 3 kişi ile güzel bir çalışma bile çıkarılır. Yeter ki görev dağılımı yapın ve herkes gönülden çalışsın.

Bir an önce pazara çıkın!

Zamanında şöyle bir tweet atmıştım.

Gerçekten de öyle. Çünkü bir şekilde o projeyi uygulama haline getirebilirsin. Neden hala kodlama üzerine kafa yoruyoruz ki? Zaten hiçbir şey düşündüğünüz gibi olmuyor ve yayına aldıktan sonra bir çok şeyi değiştiriyorsunuz. Fikrinizi en basit şekilde (MVP) uygulama haline getirin ve yayına alın. Zaten yayındayken de bir şeyler ekleyip bir şeyler de kaldıracaksın. Kodlama ile neden bu kadar çok vakit kaybediyoruz?

İsterseniz fikri kodlamak için 5–6 ay harcayın. Başarı garanti mi? Projeyi bir an önce yayına alıp pazarlama ve kullanıcıyı uygulamada tutmak — kullanıcı kazanmak demiyorum, dikkat edin — için çalışmalar yapın.

Pazarlamaya ağırlık verin!

Projede tasarımı yapan, yazılım tarafıyla ilgilenen, sosyal medya ve blog sayfaların yöneten bendim. Ama gelgelelim pazarlama dünyası. Diğerlerini bir şekilde yapabiliyorsun ama pazarlama çok ayrı bir dünya. Ben kendi çevremde paylaşabildiğim kadarıyla paylaşıyordum ama bu yeterli değildi. Pazarlama kısmına ağırlık verip kullanıcılara ulaşır ve güzel bir stratejiyle de kullanıcıyı uygulamada tutarsınız.

Bütçesiz çok zor!

Bütçesiz bir seviyeye kadar oluyor, olamam demem ama. Bu seviye girişimi kurduktan ilk 1 ay falan. Bir aydan sonra belli bir takım harcamalar yapılması gerekiyor. Yoksa uygulama olduğu yerde kalır ve sizin tek yaptığınız bugün uygulamayı kaç kişi kullanmış, kaç kişi üye olmuş.


Bu süreçten çıkardığım konular genel itibariyle bu şekilde. Birazda bana kazandırdıklarından konuşmaya ne dersiniz?

Projeden maddi olarak kazandığım rakam bu şekilde. Sadece blog sayfasında adsense kullanıyordum ve son zamanlarda günde bir kaç tık alıyorduk. Toplanan miktar bu şekilde :)

Projeyi son 1–2 aydır ücretli versiyona geçtim ama ne gelen oldu ne de giden :) O yüzden üyeliklerden bir kazancım olmadı. Kazancım olmadığı gibi kullanıcı kazancım da olmadı.

Buraya uzun uzun maddi kazançları yazıp sizi heyecanlandırmak isterdim ama maalesef ki durumlar bundan ibaret :)

  • Aynı zamanda üniversite öğrencisi olduğum için yurt dışından ve yurt içinden bir kaç şirkete başvuruyordum. Onlarla yaptığımız bir görüşmede bir start-up’a sahibim dediğim zaman çok daha ilgili oluyorlardı. Küçük bir proje olmasına rağmen start-up olarak bahsediyordum. Daha sonra da konuşma direkt projem üstünden devam edip neler yaptığımı ve neler kullandığımı anlatıyordum.
  • Kendi fikrimce bu şekilde bir yaklaşım sizin üretken ve çalışkan bir birey olduğunuzu gösteriyor. Çünkü bu yaşlarda (20) genellikle bir şeyler tüketilmekte.
  • Projeyi yayına almadan ve aldıktan sonra bir çok kişiye ulaşıp görüş ve yorumlarını almaya çalışıyordum. Yazdığım onca kişi birbirinden farklı düşünceye, yaşam kalitesine, farklı yaş aralıklarına sahip. Bundan dolayı farklı açıdan yaklaşmamı sağlıyordu.
  • Bu şekilde insanlarla ulaşarak aynı zamanda dostluk kazandığım da oldu. Ben onların fikirlerini dinledim, onlar beni dinledi… Girişimci ruha sahip insanlarla dostluk kurmak gerçekten farklı dünya. Çünkü ya her şeye problem olarak yaklaşıyorlar ya da her şeye bir çözüm olarak yaklaşıyorlar.
  • Lise zamanlarında ön tarafını kodladım ve arka tarafı için yeterli bir bilgiye sahip değildim. Bir kaç kişi aradım ve anlaştığımızı düşündüm ama yarı yolda bırakıldım. Bundan dolayı python öğrenme fırsatı doğdu ve kendimi bilmediğim bir bahçenin içinde buldum. Zorlanarak da olsa bir şekilde kodlamayı başardım. Burada biter mi? Tabii ki hayır, devamı mutlaka gelir. Araştırarak, deneyerek, sorarak… bir şekilde projeyi gerçekleştirmeye çalışıyordum. Velhasıl kelam kendimi hiç ummadığım bir yerde bulup yeni teknolojilerde öğrenip kullanırken buldum.
  • Özellikle teknoloji ve pazarlama alanında çok farklı deneme yanılmalarım oldu. Eğer ki yazılımcı iseniz hangi alanda uzmanlaşmak istiyorsanız bence o alan üzerinde geliştirmeler yapın. — bu söylediklerim yolun başında olanlar içindir — Çünkü geleceğe çok büyük bir yatırım oluyor. Tabii ben javascript ile ilgilendiğim için node.js ve react ile işlerimi halletim. Bu yolu seçerek çok doğru yaptım. Neden mi? Çünkü zaman zaman dönüp koda baktığım zaman neyi yanlış yaptığımı, nasıl bir yol izlediğimi görüp bunun daha iyi ve doğru yolunu kestirebiliyor ve öğrenebiliyorum.
  • Son olarak da sosyal medya için konuşmak istiyorum; Eğer hedef kitleniz 35–40 yaş ve üstü ise kesinlikle facebook, hedef kitleniz 50 yaş altıysa tabii ki instagram ve hedef kitleniz kadınsa pinterest’i unutmayın. Reklamları da buna göre çıkarsanız güzel bir dönüş almanız kaçınılmazdır.
  • Dediğim gibi çok fazla insanlarla konuşup onların fikirlerini duydum. Yeni tanıştığım insanlarla konuşurken onların da düşünme şekillerini biraz da olsa aldım. Tasarlarken ve kodlarken nasıl bir yoldan geçtiğimi gördüm. Pazarlarken sürecin ne kadar zor olduğunu ve hangi mecraları aktif olarak kullanacağımı öğrendim. Velhasıl kelam iyi öğrendim.
  • Başarısız mı olduk? Olmadı mı? Fark eder mi? Bir daha deneriz. Bardağın dolu tarafından bakıp çıkarılan dersler eşliğinde yeni bir proje ile hedefi 12'den vurmaya bir adım daha yaklaşırız. Yine mi olmadı? Demek ki eksiklerimiz var ki yeni derslere ihtiyacımız oluyor. Öğrenmemiz gerek.

Yazıyı bitirmeden önce demek istediğim son şey. Düşün, uygula, geliştir, mutlu ol! Hiçbir şey hayal ettiğin gibi olmaz. Hiçbir şey o kadar da kolay değil!

React vs Vue: Benim Fikrimce.

Yazılım21 Mayıs 2020 3 dk okuma

Şu an kariyerime freelance olarak devam ettiğim için front-end dünyasındaki bir çok teknolojiler ile proje üretmeye çalışıyorum. Bir proje geldiği zaman hangi teknolojiye kullanmak daha mantıklıysa onu seçerek projeye geliştirmeyi amaçlıyorum. O yüzden teknolojiler hakkında bilgi sahibi olmalı ve pratik için projeler üretmeliydim.

Normalde React ile projeler geliştiriyorum ve aslında gayet memnundum. Biraz zaman boşluğum olunca da vue ile basit bir proje yaptım ve mantığını anlamama fazlasıyla yeterli oldu. Böyle bir yazı yazmak istiyordum. O yüzden react öğrenmeye başladığım ilk zamanlarda yaptığım projeyi tekrardan vue ile yazdım. Bu şekilde karşılaştırmam daha kolay olacaktı.


Başlamadan önce repo ve demo adreslerine aşağıdan ulaşabilirsiniz.

React

Github Repo: https://github.com/berat/react-practical

Demo: https://practical-react.herokuapp.com/

Vue

Github Repo: https://github.com/berat/vuejs-practical

Demo: https://vuejs-practical.surge.sh/


Başlıklar şeklinde yazmak isterdim ama terimsel ifadelere fazla hakim değilim. O yüzden maddeler halinde yazacağım.

  • React bildiğim için vue ile proje geliştirmem çok kolay oldu. React başladığım zaman her şeye yeni başladığım için bu süre uzundu. Eğer her ikisinide öğrenemk isterseniz vue ile başlamanızı tavsiye ederim. Başlangıç aşamasında vue dökümanı gerçekten çok başarılı.

  • Kodlama stili olarak React derim. Vue yazım standardını beğenemedim. HTML’in içine if, for yazmak bana göre değil.

  • Redux mı Vuex mu diye sorsalar kuşkusuz vuex derim. Vuex’da statelerle uğraşmak gerçekten kolay ve hemen sonuç alıyorsun. Redux öğrendiğim zaman sanırım 1–2 gün harcamıştım.

  • Router olayında ise bir seçim yapamam. Bana göre ikisi de basit ve kullanışlı. O yüzden burayı es geçelim.

  • Vue da kod yapısını oluşturmak için <template> <script> <style> şeklinde kullanıyorsun. Hiç bir zaman bunu zorla kullanmalısın (v-if, <template>) denilen durumları sevmedim. Kod yazarken istediğim şekilde yazmayı seviyorum. O yüzden benim için Angular ve Vue aynı, React ise farklı yerde.

  • React yazarken Hooks kullanıyorum. O yüzden useEffect ile işimi görüyordum. Bildiğim kadarıyla vue’da en çok kullanılan 5–6 tane yaşam döngüsü var ve bunları kullanmak gerçekten çok kolay ve anlaşılır ama bir seçim yapmam gerekirse React tarafında oyumu kullanırım. vue’da Hooks gibi bir şey var mı bilmiyorum

  • Vue devtool, React devtool’un çok çok önünde bile.Vue devtool’u o kadar güzel tasarlamışlar ki kullanması çok kolay.


Eğer sen hangisini önereceksin diye soracak olursanız, size diyeceğim tek şey. “Birisini öğren ve sadece başla”. Birisini öğrenmeye başladıktan sonra diğerini yazmak gerçekten çok kolay olacak. Daha sonra sana hangisi daha mantıklı gelirse zaten onu kullanırsın. İkisinide dene tarafını seç!

Kesinlikle birbirini ayıran noktalar olabilir ama ben sadece yüzeysel olarak geçmek istedim. Bir haftasonu projesi yapacaksam kesinlikle vue seçerim. Ama diğer projelerde react kullanmaktan şaşmam.

VSCode Dünyam

Yazılım18 Nisan 2020 2 dk okuma

Selamlar, uzun zamandır bir şeyler yazmadığımı fark ettim. Bildiğiniz üzeri evleredeyiz ve eğitime uzaktan devam ediliyor. Bu kadar boş zamanımız varken kendimi eğitmeye ve proje geliştirmeye devam ediyorum. Bu zamanı verimli bir şekilde geçirmeye çalışıyorum. Bu zamanlarımın çoğu ise VSCode ekranına bakmak ile geçiyor. O yüzden burası benim dünyam sayılıyor ve dünyamı da güzelleştirmek için belli bir takım eklentiler, temalar ve ayarlar yapmak gerekiyor. Belki de bugün sizlerle aynı dünyayı paylaşacağız. Kim bilebilir :)


Eklentiler

Önereceğim eklentiler dışında snippetler ve code runner için eklentiler kullanıyorum. Bunların zaten kullandığını varsayıyorum.

1- Backet Pair Colorizer | İncele

Eklenti sayfasından aldım
Eklenti sayfasından aldım

Eğer (süslü, köşeli) parantezler içerisinde boğuluyorsanız kurmanız gereken bir numaralı eklentidir. Her paranteze ait bir renk belirlenir ve hangi alan ile ilgileniyorsanız daha iyi odaklanabilirsiniz.

2- Colorize | İncele

Twitter’da da paylaşmış olduğum bir eklenti. Tweet’de göreceğiniz gibi renk kodlarınızı bu şekilde renkli hale getirerek hangi renk olduğunu kolay bir şekilde görmenize imkan veren bir eklenti.

3- Highlight Matching Tag | İncele

Eklenti sayfasından aldım
Eklenti sayfasından aldım

Eğer (süslü, köşeli) parantezler içerisinde boğuluyorsanız kurmanız gereken bir numaralı eklentidir. Her paranteze ait bir renk belirlenir ve hangi alan ile ilgileniyorsanız daha iyi odaklanabilirsiniz.

4- Markdown-formatter | İncele

Eklenti sayfasından aldım
Eklenti sayfasından aldım

Size tavsiye ettiğim son eklenti ise markdown-formatter. Eğer .md uzantı dosyanıza içerik hazırlıyorsunuz bu eklenti ile işinizi hızlandırabilirsiniz.


Temalar

Temalar için birden fazla tercihim var. Çünkü o anki mod halime göre o an farklı temalar kullanabiliyorum.

1- Palenight Theme | İncele

En fazla kullandığım temalardan biridir. Bu tonlarda kod yazarken odaklanabildiğim ve gözlerimi yormadığı için bu temayı çok fazla kullanıyorum.

2- Night Owl | İncele

Eğer erken saatlerde kod yazıyorsam açık renkli temalar kullanmaya özen gösteriyorum. Bir çok tema denedim ama bu temada karar kıldım.

3- Andromeda | İncele

Eğer biraz daha renkli bir tema arıyorsanız size bu temayı önerebilirim. Ama bir süre sonra göz yorgunluğuna neden olabilir. O yüzden kullanmayı fazla tercih etmiyorum.


Font olarak JetBrains Mono kullanıyorum. Bu tarz fontları gerçekten çok seviyorum. Javascript kodu yazdığınız zaman => bu şekilde görmek yerine birleşik görmek gerçekten güzel.