
Hello again after a year! I've been sharing my journey, goals, and achievements for 6 years. I started this series for just blogging purpose but I see it makes me very motivated for the next advantures. This year has been a good year overall, where I focused more on myself and did a lot of things. I also experienced many things for the first time. Here are the reviews for my journey and goals for 2021.

## Work Life 👨🏻‍💻

![desk-setup](/blog/desk-setup-2021.jpg)

After graduating from university, I was able to focus fully on my job this year. In Jan 2021, I joined the [iyzico](https://www.iyzico.com/). I contributed to both web and mobile applications here and I had a small very friendly team. After working with small companies, iyzico was a good experience for me to work with many people and teams. Pair programming, collaboration, code reviews, test driven development, etc. I experienced many things here for the first time.

⚡️ During the time, I was working on open-source projects like always. I finished one of my favorite projects [React Native Hold Menu](https://github.com/enesozturk/react-native-hold-menu) and shared it with the community. Many people liked and shared it. Thanks to this project, I had a chance to meet and work with many people (special thanks to [Gorhom](https://github.com/gorhom) for helping me to solve some important problems). After a while, I got a message from a person who we follow on Twitter each other. He told me that he liked the project a lot. And he offered me a job. After talking about the details of the job I accepted and joined the [Qooper](https://qooper.io/). I had experienced several interviews and solved test cases, I have to tell that they can be very stressful. After I accept the job, they did not send me a test case. Because they already saw my code. It is really great advantage and of getting a job offer from the open source!

## Kodluyoruz 🎙

This year I tutored for the first time with [Kodluyoruz](https://www.kodluyoruz.org/). It is a company that organizes boot camps for people who want to learn to code for free. They offered me to join them as an instructor and I thought it would be a good experience. I taught JavaScript and React to awesome 30 people. After one and half months almost every one of them completed their journey with a certificate and they developed great projects. Some of them started working with companies. Being part of such things is great motivation for me.

## Paragliding

![paragliding](/blog/paragliding-2021.jpeg)

To be able to continue my paragliding career and fly more, I turned back to Sakarya after getting full-time job with my girlfriend. Here, I flew as many as possible.

💥 In good weather conditions, I pushed my limits and tried acro maneuvers. One of them went wrong.. I crashed for the first time after 5 years in paragliding. When I do a maneuver (helico) I lost all the altitude and did not realize it. I found myself on top of a tree. 🌲 Huh, hopefully, I was ok.

I also went to Oludeniz, Muğla several times to fly there to improve myself, this place is one of the best for paragliding in the world. And, for the next year, I will be there for a long time!

# Goals 🎯

## Habits

- [x] **📗 Read 15 books at least**

Well, I made it double! I finished more than 30 books this year. But I am mostly listening to books. At the beginning of the year, I was living alone and doing many things alone, walking, cleaning home, cooking, etc. While I do these, I always listen to a book. Of course, I have read some of them. I don't have a habit to read books, trying to get that habit by reading some e-books but still leaving them after a while. I will definitely try to read more.

- [ ] **🚶🏻 Walk 100k per month**

One of the things I could not make it. Just before 21 and at the beginning of 21, I was walking regularly every day. I thought I can do it 100k per month. Somehow I stoped walking regularly. One of the reasons for it was my surgery. In February 2021, I had surgery on my left leg. It made it impossible to do it for a long time. But you know it is an excuse. After getting better, I did not care about this goal.

- [x] **🤔 Take self-criticize regularly**

This was the best thing I have ever done in these goals. Definitely. None of us is perfect and will never be. I have some problems with my emotional moods and relations. To fix these, I decided to make self-criticise regularly, write my emotions, what happened and what I did for them etc. This habit allowed me to see and fix some problems in my life. I could not make it regularly but made it several times. It was so helpful.

- [x] **💰 Get better at finance and invest regularly**

I was really bad at finance. I had not enough information about investment types, stock markets, economic changes, and the most important term: money. Investing smartly makes you be retired earlier than you think. I decided to get better at it and should invest regularly and smartly. I have [read some books](https://www.goodreads.com/review/list/102775572-enes-zt-rk?shelf=read) to get started. Now I will be focused more on some intermediate-level topics.

## Tech

- [x] **🧪 Get better in TDD for React & React Native**

I developed many applications with React and React Native until now. But testing is an important thing to make our applications safer and feel confident. Until 2021, I did not write fully tested applications. I put myself a goal about it. And after that, I worked on the applications which we write tests for both units, integrations, and end-to-end tests. I still have lots of things to learn and improve my techniques. I will continue to this goal. It is not 'done' but I put a checkmark on it for now.

- [x] **🃏 Get better in Reanimated**

I kinda got better at it. Reanimated is one of the greatest packages in React Native powered with JSI architecture. I always like good interactions and animations on applications. I developed React Native Hold Menu with Reanimated and also tried to create similar animations/interactions with it. Also, [Gesture Handler](https://github.com/software-mansion/react-native-gesture-handler) is the best friend of Reanimated which developed by the same company. You should check it out!

- [x] **📦 Publish React Native Hold Menu**

I [published it](https://twitter.com/enesozturkdev/status/1367894631346810882)! It was really challenging project for me. The thing I tried to build somehow was hard to work perfectly on both Android and iOS and I tried to solve different problems throughout the project.

Here, there is a fun fact; thanks to this project, my efforts, and people who helped me on this project (especially [Gorhom](https://github.com/gorhom)), I found my first global company (which I am currently working with). Actually, they found me. Our team leader saw my sharing on Twitter and told me he is impressed, asked me if I can work with them. This is very motivating! Another little big detail is that they did not send me a test case. Because they already saw my coding skills, what I've done until now. After experiencing some interviews with test cases, I saw that it is a very stressful process and understand the importance of this advantage very well.

- [x] **🎨 Improve design skills**

I did not create great designs but Figma is my second best friend. I always try to design my ideas with inspiration from the community. Here you can check my profile. I shared some designs from my work.

> Also worth the mention, many of these goals are not finishable but I feel I reached my goals. That is why I put checkmark but will definitely continue them.

## Paragliding Acro 🪂

I have a mini career in paragliding. I am trying to be an aerobatics pilot. It is the hardest path on the paragliding but most adrenalin way! I love to do some maneuvers on air. I was able to do just a few of them this year. To improve yourself in this path, you should fly hours, practice many many many times. Like anything else, you need to spend your time a lot. I do not have to rush, still have some maneuvers for next year 🤘🏽

- [ ] [Helico to SAT](https://www.youtube.com/watch?v=omZDLf9ckxE)
- [ ] [SAT to Helico](https://www.youtube.com/watch?v=Ybk41qEh0x8)
- [ ] [Twister](https://www.youtube.com/watch?v=sfE1FR8-cHc)
- [ ] [MacTwist](https://www.youtube.com/watch?v=sJjJA5RwKsY)
- [ ] ⭐️ [Rhytmic SAT](https://www.youtube.com/watch?v=xwhOmyksXXs) [Would be aweeeeesome!]
- [x] Backfly
- [x] [Helico](https://www.youtube.com/watch?v=wU4O8-FkSHA),
- [x] [Misty](https://www.youtube.com/watch?v=80KguolDEyg),
- [x] [Dynamic Full Stall](https://www.youtube.com/watch?v=Gsbo73AIhzA) done in 2020 🤘🏽

## New Goals 👀

Now, it is time to set new goals for the 2022. I already wrote down some of them and [here](/goals) you can see the list. See you next year!


2021 Review


![React Native SSO](/blog/sso-cover.png)

Bu yazıda React Native uygulamamızda kimlik doğrulama yaparken web dünyasında sıklıkla kullandığımız Single Sign On yönteminin nasıl uygulanabileceğinden bahsedeceğim.

## Single Sign On

Kısaca bahsetmek gerekirse Single Sign On, üçüncü taraf siteler (sağlayıcı demek daha doğru olabilir) üzerinden giriş yapma yöntemidir. Bir web sitesine Google, Microsoft, Github ile giriş yap gibi örneklerini şimdiye kadar zaten kullandık.

Yine çok detaya inmeden bu yöntemin nasıl çalıştığına dair biraz bahsetmekte fayda var. Web sitenize bir sağlayıcı ile giriş yapma eklediniz. Bu Google olsun. Google ile giriş yap butonuna tıkladınız. Google’ın giriş yapma penceresi pop-up şeklinde açıldı. Biz aslında bu pencereyi açarken URL üzerinden bazı bilgiler gönderiyoruz. Bunlardan biri redirect URL. Buraya Google hesabımızla giriş yaptıktan sonra bu pencere bizi redirect URL’i bildiği için web sitemize geri yönlendirdi ve beraberinde bazı bilgiler de verdi. Bunlar kimlik doğrulama bilgileri. Biz de web sitemize gönderilen bu veriyi işleyip içerisinden access token gibi değerleri alıp kimlik doğrulama için kullanıyoruz. Bu şekilde üçüncü taraf sağlayıcılardan sadece veri alarak kimlik doğrulama işlemi yapmış olduk.

React Native tarafında bu akışı sağlayabilmek için kullanıcı `X ile Giriş Yap` butonuna tıkladığında bir browser açıp, onu ilgili URL’e yönlendireceğiz. Daha sonra kullanıcı ilgili sağlayıcı ile giriş yaptıktan sonra browser bizi bazı parametreler ile uygulamamıza geri yönlendirmeli. Bu akışı sağlamak içinse Deep Link’leri kullanacağız. Böylelikle access token’ı aldıktan sonra kullanıcıyı farklı bir sayfaya yönlendirebilelim.

## Kurulum

Kullanıcıyı uygulama dışına çıkarmadan karşısına browser açıp işlemleri orada yaptırmak için [react-native-inappbrowser](https://github.com/proyecto26/react-native-inappbrowser) paketini kullanacağız. Bu paket de ayrıca SSO için gerekli iyileştirmeler yapılmış ve bize kullanabileceğimiz fonksiyonlar sağlıyor.

```js
yarn add react-native-inappbrowser
```

Daha sonrasında aşağıdaki komut ile iOS tarafında ilgili Pod’un kurulmasını tamamlayıp geri dönelim:

```js
cd ios && pod install && cd ..
```

Android tarafta ise tekrar build almaktan başka bir şey yapmamıza gerek yok:

```js
npx react-native run-android
```

Şimdi diğer önemli kurulumları yapıp, sonrasında bu browser tarafına geri döneceğiz.

## Deep Link

Deeplink’e daha önce aşina değilseniz şöyle aktarabilirim; nasıl bir web sitesini açmak için domain’ini giriyoruz ve browser bizi o siteye yönlendiriyorsa, bir mobil uygulamayı da ona ait bir deep link ile açabiliyoruz. Birisi size bir Hepsiburada ürün linki attı ve siz de ona tıkladığınızda telefonunuz Hepsiburada uygulamasını açtı ve o ürüne yönlendirdi. Bunu sağlayan yapı deep link’ler.

React Native’de deep link kurulumunu yapmak için kendi dökümanlarındaki adımları izleyerek uygulamanıza deep link kurulumunu yapabilirsiniz:
Burada dikkat etmeniz gereken nokta, deep link için belirlediğiniz şemanın ne olduğu, çünkü bunu kullanacağız. Ben aşağıda, şemayı **com.yourawesomeapp** olarak belirlemişim gibi ilerledim.

## React Navigation v5 ve Deep Link Kurulumu

React Native uygulaması yazıyorsanız çok yüksek ihtimalle kullandığınız yönlendirme çözümü [React Navigation](https://reactnavigation.org)’dur. Burada ben de onu kullandığım için kurulumu React Navigation v5'e göre yapacağım.

Yukarıdaki yapıda anlattığım gibi Single Sign On sağlayıcısı kimlik doğrulamayı yaptıktan bir redirect URL’e yönleniyordu. Bizim akışta da bu URL bir deep link olacak ve React Navigation yapısı üzerinde belirli bir sayfaya yönlendirmek istiyorsak onu bir alt sayfaya gitmesini isteyeceğiz. Bu alt sayfanın bizim istediğimiz bir ekran ile eşleşmesi için aşağıdaki gibi bir ayarlama yapacağız:

<script src="https://gist.github.com/enesozturk/f17a7179ffc1b72274fac1c5c1e04563.js"></script>

Burada **linking** objesi içerisinde prefixes dizisinde, React Navigation'un algılayacağı link'leri veriyoruz. Biz sadece deep link'imizi verdik. **config** objesi içerisinde de screens altında Hangi sayfanın hangi alt URL ile eşleşeceğini belirttik. Yani **_com.yourawesomeapp://sso-callback_** olan bir deep link'e tıkladığımızda **SingleSignOnCallback** isimli sayfaya yönlenmesini sağlamış olduk.

## In App Browser

En başta kurduğumuz in app browser paketinin kullanımı ile devam edelim. Yapacağımız şey şu: kullanıcıyı browser açıp bir sağlayıcıya yönlendireceğiz. Orada giriş yaptıktan sonra gelen response'u handle edeceğiz.

Ben bu yapı için bir hook oluşturup buradaki iş akışlarını istediğim yerde kolay kullanabilir hale getirmeye çalıştım:

<script src="https://gist.github.com/enesozturk/6ac47988307453265f7def82b66e1fc1.js"></script>

Üzerinden geçmek gerekirse, **useSingleSignOn** hook'u içerisinde ilk önce **getDeepLink** fonksiyonu ile parametre olarak verdiğim path ile bir deep link oluşturduk. Burada iOS tarafında deep link'i encode etmek gerektiği için bu yardımcı fonksiyon oluşturdum. Daha sonra URL'imizi oluşturduk. Burada önemli olan detay en sondaki **redirect_uri** verisi. Buraya oluşturduğumuz deep link'i veriyoruz.

> Bu URL yapısı, AWS Cognito servisinin gerektirdiği bir yapı. Ben Cognito kullandığım için böyle bir URL çıktı fakat muhtemelen farklı sağlayıcılarda farklı yapı gerekecektir.

Daha sonra InAppBrowser'ın **openAuth** fonksiyonu ile url ve deepLink verilerini parametre olarak geçip son parametrede de bazı browser ayarlamaları sağlıyoruz.

Açılan browser içinde giriş yapma bilgilerimizi girdikten sonra response verisinin durumu **success** ise ve içerisinde **url** varsa **Linking** sınıfının **openURL** fonksiyonu ile uygulamamızı o url'e yönlendiriyoruz. Bu bizim yukarıda oluşturduğumuz url ile aynı fakat sonunda bazı parametreler içeriyor. Örnek bir response aşağıdaki gibi:

```js
com.yourawesomeapp://sso-callback#access_token=psKGn235hWurnDXeev1351sYsNTPv_3a9235tPQXLyKAH7G4BHSm3g&id_token=-3qvd4LloidiXxd2DE2dvcjcmq5na3bfM6A8lbXqrUueUMO3jzXzqdA&token_type=Bearer&expires_in=3600
```

Bilgileri ayrıştıracak olursak deep link'imizden sonra `#` ile `access_token`, `id_token`, `token_type` gibi bilgiler döndü. Ben sadece **getSSORedirectUrl** fonksiyonu ile bu #'ı soru işaretine çevirdim ki bunları navigation parametresi olarak kullanabileyim.

useSingleSignOn hook'undan dönen openAuth fonksiyonunu aşağıdaki gibi kullanıyorum:

```js
const { openAuth } = useSingleSignOn(organization);

<Button
  onPress={openAuth}
  type="secondary"
  textId="screens.signIn.buttons.withSSO"
/>
```

Sonrasında ekranda benden bir izin sitedi. Devam dedikten sonra karşılaştığım ekranlar aşağıdaki gibi:

![React Native SSO Screens](/blog/sso.png)

Böylelikle ben bu URL'i kullanarak openURL ile yönlendirdiğimde beni **SingleSignOnCallback** ekranına yönlendirecek. Bu sayfa içerisinde de navigation parametresi olarak bu verileri çekip kullanabilirsiniz. Ben ekstra bir doğrulama yapan API endpoint'ine gönderdiğim için aşağıdaki gibi bir yapı oluşturdum. Kullanıcı doğrulandıktan sonra geri giderek callback sayfasını kapattım.

<script src="https://gist.github.com/enesozturk/1bb9c20b60da566fe20c79d2b26ef2e0.js"></script>

## Sonuç

Böylelikle üçüncü taraf bir kimlik doğrulama sağlayıcısını web'de olduğu gibi React Native uygulamasında sağlamış olduk. Senaryo uygulamaya göre farklılık gösterebilir. Benim kurduğum yapıda Deep link kurulumu, React Navigation ayarlaması, In app browser paketi gibi detaylar bir kaç denemeden sonra istediğim gibi çalıştı ve yardımcı olabileceğini düşündüğüm için paylaşmak istedim. Okuduğunuz için teşekkür ederim.

Ayrıca genel akış planlaması için [Mert Köseoğlu](https://twitter.com/mksglu)'na teşekkürler 🤙🏽

## Kaynaklar

- https://reactnative.dev/docs/linking
- https://reactnavigation.org/docs/deep-linking/
- https://github.com/proyecto26/react-native-inappbrowser
- https://github.com/proyecto26/react-native-inappbrowser/blob/develop/example/android/app/src/main/AndroidManifest.xml#L23
- https://developer.android.com/training/app-links/deep-linking#adding-filters
- https://www.appsflyer.com/resources/everything-marketer-needs-to-know-deep-linking/deep-linking-basics/
- https://www.onelogin.com/learn/how-single-sign-on-works


Bu yazıda React Native uygulamamızda Single Sign On ile kimlik doğrulamanın nasıl kullanılabileceğinden bahsettim.

React Native ile Single Sign On Kimlik Doğrulama


> Bu yazı Lee Robinson tarafında yazılan ve Smash Magazine'de yayınlanan [A Complete Guide To Incremental Static Regeneration (ISR) With Next.js](https://www.smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/)'in çevirisidir. Yazıda ISR merkezli bir anladım olsa da Next.js yazanlar için önemli olan çoğu kavramı içerdiği için başlığı değiştirdim. İyi okumalar dilerim.

Geçtiğimiz yıl, [Next JS 9.3](https://nextjs.org/blog/next-9-3) ile beraber onu hibrit framework'e çeviren Static Site Generation özelliği geldi. Bu makalede Jamstack'in yeni devrimini konuşacağız: Incremental Statik Regeneration (Kademeli Statik Yeniden Oluşturma)

## Static Site Generation Sorunu

Jamstack'in arkasındaki temel mantık, CDN'e gönderilebilen, saniyeler içinde global olarak dağıtılabilir, **önceden oluşturulmuş (pre-rendered) statik sayfalar**. Statik içerik, yüklemesi hızlı, down sürelerine karşı dirençli, crawler'lar tarafından hızlıca indexlenebiliyor. Fakat beraberinde bazı sorunlar getiriyor.

Büyük ölçekli bir projede Jamstack mimarisi geliştirdiyseniz sitenizin build edilmesini uzun süre beklemek durumunda kalmış olabilirsiniz. Sayfa sayısını arttırdıkça build süresi de artar. [target.com](https://www.target.com/)'u ele alalım. Her deployment'ta statik olarak milyonlarca ürünü oluşturmak mümkün mü?

![The Problem with Static-Site Generation: Because build-times scale linearly with the number of pages, you might be stuck waiting for hours for your site to build.](/blog/build-times-regeneration-nextjs.png)

Her sayfası 1ms'de oluşturmuş olsa bile, ki bu gerçekçi bir rakam değil, tüm sitenin oluşturulması için saatler gerekebilir. Büyük websiteleri için Static Site Generation çözümünü kullanmak bu yüzden mantıklı değil. Burada daha esnek, hibrit bir çözüme ihtiyaç var.

## Control Management Systems

Çoğu projede site içeriği koddan ayrılır. Headless CMS çözümleri, geliştirme ihtiyacı olmadan içerik oluşturma ve yayınlamayı sağlar. Fakat geleneksel statik sitelerde bu işlem biraz yavaş olabilir.

100.000 ürünü olan bir e-ticaret sitesini düşünün. Ürün fiyatları sürekli değişiyor olsun. Bir içerik yöneticisi kulaklığın fiyatını 100₺'den 120₺'ye çektiğinde, kullanılan CMS **webhook** aracılığı ile siteyi tekrar build edecek. Bir fiyat değişikliği için uzun süre yeni build'i beklemek tabiki mantıklı bir yöntem değil.

Gereksiz hesaplamalara sahip uzun build süreleri ayrıca ek maliyetler doğurur. Uygulamanızın yeniden build almaya gerek kalmadan hangi ürünlerin değiştiğini anlaması ve kademeli olarak (incrementaly) bu sayfaları güncellemesi en ideal yoldur.

## Incremental Static Regeneration

Next.js, ICR ile geliştiricilerin ve içerik yöneticilerinin, sitenin tamamını build etmeye gerek kalmadan sayfa bazlı static-generation yapmalarını sağlar. Bu sayede uygulamanızı milyonlarca sayfaya scale ederken static sayfaların avantajını elde edersiniz.

ICR ile statik sayfalar build zamanı yerine run-time'da (çalışma anı) oluşturulur. Analitik eventleri, A/B testiler veya diğer metrikler gibi konfigurasyonları build anı ve çalışma anı arasında istediğiniz gibi ayarlama esnekliğine sahip olursunuz.

Az önce bahsettiğimiz 100.000 ürünlü e-ticaret sitesini düşünün. Gerçekçi bir 50ms'lik statik sayfa üretme süresi ile tüm işlem yaklaşık 2 saat sürecektir. ISR ise bize şu iki seçenek arasında dilediğimiz oranda seçim yapmamızı sağlıyor:

**Hızlı Build Süresi**
En popüler 1000 ürünü build-time'da oluştur. Diğer ürünler ise önbellek'de (cache) olmadığı için atılan istekler ile yine kısa sürede sağlanacaktır.

**Yüksek Önbellek Oranı**
Build time'da 10.000 ürünü oluştur. Dolayısı ile kullanıcı isteğinden önce çok fazla ürün sunmuş olacaksınız. Fakat tahmin edeceğiniz üzere daha uzun sürecektir.

![The advantage of ISR: You have the flexibility to choose which pages are generated at build or on-demand. Choose from (A) faster builds or (B) more cached.](/blog/generation-regeneration-nextjs.png)

Bahsettiğimiz e-ticaret sitesi örneğine daha yakından bakalım.

## Başlarken

### Verileri Çekmek (Fetching)

ISR, static sayfalar üretmek için Next.js API'ındaki statik sayfa oluşturmak için kullanılan `getStaticProps` methodunu kullanıyor. Bu methoda `revalidate` prop'unu vererek Next.js'e ISR kullanmasını söylemiş oluyoruz.

![A diagram of the request flow for Incremental Static Regeneration.](regeneration-regeneration-nextjs.png)

1. Next.js sayfa bazlı `revalidation` süresi belirleyebilir. Biz burada 60 diyelim.
1. Ürün sayfasına atılan ilk istek orjinal fiyatlı önbellekteki sayfayı gösterecek.
1. Veri CMS üzerinden güncellensin.
1. İlk istekten sonra ve 60sn'den önce atılan herhangi bir isteğe önbellekteki sayfa dönecektir.
1. 60sn sonra, Next.js hala önbellekteki sayfayı gösterecek fakat revalidate süresi geldiği için arkaplanda sayfayı yeniden oluşturmaya başlayacak.
1. Sayfa başarılı olarak yeniden oluşturulduğunda Next.js önbelleği silip güncellenen sayfayı kullanıcıya sunacaktır. Eğer arkaplandaki yeniden oluşturma başarısız olursa önbellekteki sayfa gösterilmeye devam edecek.

```js
// pages/products/[id].js

export async function getStaticProps({ params }) {
  return {
    props: {
      product: await getProductFromDatabase(params.id)
    },
    revalidate: 60
  }
}
```

### Yolların (Path) Oluşturulması

Next.js hangi ürünlerin build-time'da hangi ürünlerin istek anında (on-demand) oluşturulacağını belirler. Şimdi `getStaticPaths` methodu ile en popüler 1000 ürünü build-time'da oluşturulmasını sağlayalım.

İlk build'den sonra diğer ürünleri için istek atarken Next.js'in nasıl **"fallback"** edeceğini belirleyelim. Burada `blocking` ve `true` olarak iki seçeneğimiz var:

`blocking`
Henüz oluşturulmamış bir sayfaya istek atıldığında, Next.js ilk istekte server-rendering yapacak, sonraki isteklerde ise önbellekten sunacaktır.

`true`
Henüz oluşturulmamış bir sayfaya istek atıldığında, Next.js sayfayı yükleniyor durumu (loading state) ile doğrudan sunacak. Veri çekme işlemi bittikten sonra sayfa yeniden render olacak ve önbelleğe saklanacak. Sonraki isteklerde önbellekteki sonuç sunulacak.

```js
// pages/products/[id].js

export async function getStaticPaths() {
  const products = await getTop1000Products()
  const paths = products.map((product) => ({
    params: { id: product.id }
  }))

  return { paths, fallback: ‘blocking’ }
}
```

## Takaslar (Tradeoffs)

Next.js her şeyden önce son kullanıcıya odaklanır. 'En iyi çözüm' uygulamanın kullanıcısına, sektörüne göre değişir. Geliştiricilere framework dışına çıkmadan farklı çözümler sunarak, Next.js projeniz için doğru aracı seçmenizi sağlıyor.

### Server Side Rendering

ISR her zaman doğru çözüm olmayabilir. Örnek olarak Facebook'un akış sayfası önbellekteki içeriği sunamaz. Bu senaryoda, SSR kullanıp [surrogate keys](https://www.fastly.com/blog/surrogate-keys-part-1) ile kendi `cache-control` header'larınızı belirleyerek içeriğinizi yönetmek isteyebilirsiniz. Böylelikle Next.js'in sağladığı bu hibrit özellik ile framework dışına çıkmadan geliştirme yapabilirsiniz.

```js
// Next.js ile hem getServerSideProps hem de API yönlendirmeleri içinde
// server taraflı oluşturulmuş sayfayı önbellekte saklayabilirsiniz
res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate')
```

SSR ve uç (edge) önbellekleme ISR'a benzer. En temel fark **ilk istek** anıdır. ISR, ilk istek sonucunda statik sayfa dönmeyi garantiler. Arkaplandaki veritabanınızda veya API servislerinizde bir sorun olsa bile, kullanıcılar sunulan statik sayfayı görebilecekler. Ancak SSR gelen isteğe göre sayfanızı oluşturmanızı sağlar.

> Not: SSR'ı önbellekleme yapmadan kullanmak performans sorunlarına yol açacaktır. Kullanıcınızın sitenizi görmesini engellemek istediğinizde her bir ms önemlidir ve bu [TTFB](https://web.dev/time-to-first-byte/) skorunuzda kötü bir sonuca yol açabilir.

### Statik Site Generation

ISR küçük siteler için her zaman mantıklı değildir. Eğer revalidation süreniz tüm sitenin build süresinden büyükse static-site generation kullanmak isteyebilirsiniz.

### Client Side Rendering

React ile Next.js kullanmadan client-side rendering yapıyorsanız (SPA), uygulamanız ön tarafta yükleniyor durumu ile gelecek ve JavaScript ile ilk isteği atacak (örn: `useEffect`'de atılan istek). Bu hosting seçeneklerinizi yükseltse bile (bir sunucuya ihtiyaç olmaması gibi) bazı sorunları da mevcut.

İlk yüklenen HTML'den önce bir pre-rendered içeriğin olmaması SEO'nun kabiliyetini ve hızını düşürür. Ve tabiki JavaScript kapalıyken Client Side Rendering mümkün değildir.

### ISR Fallback Seçenekleri

Eğer uygulamanız verilerinizi hızlı bir şekilde çekiliyorsa `fallback: 'blocking'` kullanmayı deneyin. Yükleniyor durumu ile uğraşmanıza gerek kalmayacak ve önbellekte olsa da olmasa da sayfanız her zaman aynı sonucu dönecek. Eğer veri çekme işleminiz yavaşsa, `fallback: 'true'` kullanıcınıza yükleniyor durumu göstermenizi sağlar.

### ISR: Önbelleklemeden Fazlası

ISR'ı önbellekleme kapsamında anlatmış olsamda, deployment'lar arasında oluşturulan sayfalarınızı saklamak için tasarlanmış yapısı vardır.

Her deployment bir ID anahtarına sahiptir. Bu sayede Next.js statik sayfalarınızın geçmişini tutabilir. Geri gitmek istediğinizde bu ID'yi önceki deployment'ın ID'si ile güncelleyebilir, atomik deployment'lar yapabilirsiniz. Yani geçmiş deploymentlarınızı görebilirsiniz.

ISR ile buna bir örnek:

- Kodunuzu 123 ID'si ile deploy ettiniz.
- Sayfanızda bir yazım hatası (typo) olmuş olsun; 'Ens Öztürk'
- Sayfayı CMS üzerinden güncellediniz. Yeniden deploy'a gerek kalmadı.
- Sayfanız 'Enes Öztürk'ü göstermeye başladığında bellekte saklanacak
- Sonra yanlış bir takım kodları deploy ettiniz ve deployment ID'si 345 oldu.
- Dolayısı ile ID 123'e geri döndünüz ve hala 'Enes Öztürk' görüyorsunuz.

Geri dönüşler ve kalıcı statik sayfalar Next.js'in kapsamı dışında, hosting sağlayıcınız ile ilgili bir olay. ISR'ın cache-control'e sahip SSR'dan farklı olduğunu unutmayın. Önbelleklerin bir süresi var.

## ICR Örnekleri

Incremental Static Regeneration, e-ticaret siteleri, marketing sayfaları, blog postları gibi siteler için çok uygun.

- [E-Commerce Demo](https://nextjs.org/commerce)
  Next.js Commerce, yüksek performanslı, hepsi bir arada bir e-ticaret başlangıç kiti.
- [Github Reactions Demo](https://reactions-demo.vercel.app/)
  Buradaki Github issue'suna bir reaksiyon verdiğinizde onu ISR ile sayfa tekrar oluşturuluyor ve güncelleniyor.
- [Static Tweets Demo](https://static-tweet.vercel.app/)
  Bu proje 30sn'de deploy ediliyor fakat ISR ile istek anında statik olarak 500M tweet oluşturabilir.

## Next.Js Öğrenin

Geliştiriciler ve büyük takımlar hibrit yaklaşımı ve istek anında ISR özelliği için Next.js'i tercih ediyor. ISR ile statik sayfaların faydalarını server-side rendering esnekliği ile sağlayacaksınız. [Next.js hakkında daha fazlasını öğrenebilirsiniz](https://nextjs.org/learn/basics/create-nextjs-app) - Mutlu kodlamalar 🙌🏽

> Lee Robinson


ICR, SSR, SSG gibi önemli kavramlara genel bakış

Next JS ile önemli Jamstack kavramları


<2020></2021>

Merhaba, güzel başlar gibi yapıp, büyük bir kazık atan, bitmek bilmeyen bir yılı, 2020'yi geride bıraktık. Her ne kadar evlere kapansak da benim için hayatın yoğunluğundan bir şey eksilmeyen, dolu dolu geçen bir yıldı. Her yıl olduğu gibi bu yıl başında da geleneği bozmayıp yazımı eksik etmek istemedim. Bu sayede hem bu ana kadar neler yaptığıma bir bakış atma şansım oluyor hem de kendime yeni hedefler koyup bunlar için yola koyulmak adına kendimi motive ediyorum. 2020'de neler yaptığıma bir bakarak başlayayım;

# Mezuniyet 🧑🏻‍🎓

Bu yıl okul-iş hayatını sürdürdüğüm son yılımdı. Üniversitemin son dönemini hiç beklemediğim bir şekilde evde, bilgisayar başında bitirdim. Dersleri ve bitirme projemi de verdikten sonra Sakarya Üniversitesi Bilgisayar Mühendisliği'nden mezun oldum. 🎉 Çok severek, kampüsüne ve manzarasına hayran olarak okuduğum, çevremdeki güzel insanlar ile daha da anlamlı hale gelen bu üniversite zamanlarım, hayatımın çok güzel bir bölümünü oluşturdu ve hep böyle hatırlayacağıma eminim.

# Yamaç paraşütü 🚀

![Ölüdeniz Babadağ üstünde bir](/blog/oludeniz-babadag.jpg)

Üniversite öğretim hayatımın Ekim ayı itibariyle bitmesi ile beraber geride çok güzel dostlar ve anılar biriktirdiğim Sakarya Üniversitesi Yamaç Paraşütü Topluluğu'ndan ayrılmış oldum. Kurulduğu yıldan beri çokça emek harcayıp büyüttüğümüz, üniversite hayatımızın çok büyük bir parçası olan SAÜYPT'ye veda vakti. Şimdiye kadar onlarca pilot yetiştirdik, düzenlediğimiz etkinliklerle havacılık tutkunu bir çok insan ile bir araya geldik, konferanslar düzenleyip yamaç paraşütü sporunu öğrencilere tanıtmaya, onları bu spor ile buluşturmaya çalıştık.
Üniversiteye ilk başladığımda okul topluluklarına önyargılı davranıp hiç birine girmek istemedim. Çünkü bir çokları amacı dışında boş vakit geçirmekten öteye gidemiyordu. Kendi bölümümdeki topluluklar dahil bana bir şey katabileceğini göstermiyordu. Yamaç paraşütü sporu ile tanıştıktan sonra kendimi çok yeni kurulmuş SAUYPT'nin içinde bulmuştum. Bu topluluk bana sayamayacağım kadar güzel şey kattı. Ciddi disiplin isteyen bir sporun içerisinde bulunmak ve eğitimini almak, bu eğitimleri başka insanlara anlatıp onları gökyüzü ile tanıştıran bir topluluğu yönetmenin bir parçası olmak, hem iş hem de sosyal hayatımda büyük katkılar sağladı.

> Yeni üniversiteye başlayan arkadaşlara tavsiyem şudur ki; tutkulu olduğunuz bir alan varsa bununla ilgili varolan topluluğa katılın ve fayda sağlamaya çalışın. Yoksa destek bulun, siz kurun. Bunu yaptığınızda yaşadağınız iyi kötü tüm tecrübeler sizlere öyle fayda sağlayacak ki, mezun olduğunuzda donanımlı bir insan olarak kendinizi öne çıkarmakta hiç zorlanmayacaksınız.

Bu veda cümlelerinin ardından gelelim benim spordaki hedeflerime ve bunlar için yaptıklarıma 🤔

Geçen yıl bu konuda belirlediğim hedeflerin bir çoğunu gerçekleştirdiğimi söyleyebilirim. Bazı akrobasi manevralarını iyi derecede yapacak düzeye gelmek temel hedefimdi. Her ne kadar pandemiden dolayı yılın büyük bir kısmı evde geçse de fırsat buldukça yıllık izinlerimi de kullanarak kız arkadaşımla Ölüdeniz'e uçuş amaçlı gittik. Buradaki zamanımı olabildiğince uçuşa çıkarak pratik yapmakla değerlendirdim. Bunun yanında da çok güzel vakit geçirdik.

Bu yıl ise yine bu amaç doğrultusunda farklı ve daha zor olan akrobasi hareketlerine çalışıp bu süreci biraz daha hızlandırmak istiyorum. Geçen yıl yaptıklarım ve bu yıl tamamlamak istediğim hareketler listesini [burada](https://ozturkenes.com/goals) yazdım bile. Çok fazla özveri gerektiren bu hareketleri dilerim ki başarılı bir şekilde gerçekleştirebilirim. 🤘🏽

# Casemice ❤️

![Casemice ofisinden bir kare](/blog/casemice-ofisinden-kare.jpg)

Üniversite hayatımı anlamlı hale getiren bir diğer şey ise tam 3 yıl önce yazılım geliştirici olarak çalışmaya başladığım [Casemice](http://casemice.com). SAU kampüsünde yer alan, Teknokent'in en güzel manzarasına sahip ofisinde, harika bir çalışma ortamı, çok eğlenceli cana yakın küçük bir ekip ile şimdiye kadar harika ürünler geliştirdik. 3 yıllık çalışma hayatımı bir kez bile kötü bir an, moral bozukluğu, hayal kırıklığı yaşamadan geçirdim desem yalan olmaz. Çünkü eminim bu yapılan işten değil çalıştığım insanların harika olması sayesindeydi. Yazılım bir yana dursun, kişisel hayatımda da yaşadığım zor zamanlarda Casemice'ın desteğini arkamda görmek beni çok şanslı hissettirdi. O yüzden şu teşekkür cümlelerini kendime borç bilirim;

Öncelikle iş sahibimiz olan Mert Yalçıner'e şimdiye kadar bana kattıklarından ötürü çok teşekkür ederim. Kendisi yaptığımız işten önce bizlerin kişisel anlamda iyiliğimizi ön planda tuttuğunu çoğunlukla hissederdim. Belki kendisi farketmese de benimle paylaştığı bazı yönlendirmeler benim hayatımda büyük rol oynuyor. Sıklıkla beraber çalıştığımız, tanıdığım en eğlenceli insanlardan biri olan Caner Civan'a, Metin Özkan'a ve diğer çalışma arkadaşlarıma, İstanbul'da harika işler çıkartan (ve bize iş paslarken üzerimize titreyen 😌️) ekibe çok teşekkür ederim.

Şimdi 3 yılın ardından Casemice'dan ayrılıyorum. Benim için bu kararı vermek ve Sakarya'dan ayrılacak olmak çok zor oldu. Bunu ekip arkadaşlarımla paylaşmanın da benim için bu kadar zor olacağını hiç tahmin etmezdim. Sevgili Casemice, sizleri seviyorum ❤️

## Neler yazdım ⌨️

Bu yıl ne yazık ki yeni teknolojilere bakmakta zaman bulamadım. Geçen yıl serverless, machine learning, blockchain gibi teknolojileri bolca araştırıp en azından bilgi sahibi olmak için ufak örnekler yaparım diye planlamıştım ama pek ilgilenebildiğimi söyleyemem. Yalnızca kullanmış olduğum dil ve framework'lerdeki gelişmeleri takip edip kullanmakla kalmış bulundum. Yılın sonlarına doğru bir projeden ötürü girmiş olduğum Google Firebase dünyası baya hoşuma gitti. Oradaki tecrübemi geliştirmek gibi bir planım var. Bunun dışında test güdümlü geliştirme bilgim sadece teoriden ibaret. Diğer konulara sıçramadan önce test konusunu olabildiğince kavramak ve yazdığım projelerde Snapshot, Unit testing gibi kavramları uygulamak istiyorum.

# Dahası

📝 Yazmak. Bu yıl 5'i çeviri özetinden oluşan toplam 7 yazı paylaşmışım. Ne az ne çok benim için. Bunu bu şekilde sürdürebilirsem ve özellikle bu yazılar spesifik konular hakkında olursa benim için fena olmaz. Bilgi paylaştıkça çoğalır derler. Deneyimlerimizi ve öğrendiklerimizi paylaşmamız gerek. 🙌🏽

📘 Kitaplar. Yılın büyük bir kısmı elime kitap almadım maalesef. Fakat geçen aylarda kullanmaya başladığım ve şurada bahsettim Storytel uygulaması ile bu açığı kapattığımı düşünüyorum. Keşke daha erken keşfetseydim. Ne kadar kitap okumak istesem de elime kitap almaya vakit ayırmıyorum. Fakat iş dışında bir şeyler yaparken (ev temizlerken, yemek yaparken/yerken) kitap dinlemek tam benlik işmiş. Okuduklarımı Goodreads hesabıma kaydediyorum. Kesinlikle denemenizi tavsiye ederim.

✅ Yapılacaklar. Yukarıda anlattığım ve hedeflediklerim dışında daha ufak, eğlence amaçlı yapılacaklar listesi hazırladım kendime. Pandemi olmasaydı bunlar, X'in konserine git, Y tiyatrosuna git vs olurdu. Fakat bu yıl bunlar mümkün olur mu bilmiyorum. Onun yerine kendim ya da yanımdakilerle yapabileceğim, X dilini öğren, hiç yapmadığın bir yemeği yap gibi ufak liste hazırladım.

## Son olarak

Önceki yılın başlarında insanların ne kadar motive olduklarını, hedeflerini paylaştıklarını görmek beni sevindirmişti ve yazımda buna yer vermiştim. Pandeminin büyük bir etkisi olmuş olacak ki bu yıl bu motivasyonu pek göremedim. Evlere kapanmak ve bir süre daha böyle devam edeceğini bilmek herkesi sıkmış durumda. Umuyorum ki, bu yıl bizleri sıkan bu olaydan kısa sürede kurtulur, normal hayatımıza büyük oranda döneriz. Yine de bir çok kişinin bu yıl yapmak istedikleri ile ilgili büyük küçük hedefleri/planları vardır. Umarım, yapanın kendisine ve ülkemize katkısı olan tüm hedefler bir bir gerçekleşir bu yıl.

> Sağlıklı, huzurlu ve mutlu yıllar!


2020'nin nasıl geçtiğine, yeni yıldan beklentilerime dair

2021


> React Native Reanimated’e Giriş

React Native ile mobil uygulama geliştirirken daha iyi kullanıcı deneyimi sağlamak için mutlaka animasyon tasarlamanız ve kodlamanız gerekmiştir. React Native, geliştiricilere animasyonlarını tasarlaması için iki temel API sağlıyor. Bunlar Animated ve Gesture API. Bu iki API ile çok farklı animasyonları tasarlayabiliyor olsak da, dilediğimiz fonksiyonelliği yüksek performanslı sağlamak her zaman mümkün olmuyor. Bunun sebebi, React Native’in ve bu API’ların mimarisinin getirdiği bazı kısıtlamalar.

Bu yazının temel amacı olan **React Native Reanimated** kütüphanesi ise bu kısıtlamaları farklı bir bakış açısı ile çözüyor ve size dilediğiniz animasyonu **60 FPS** gibi bir performansla yürütmenizi sağlıyor. Reanimated’e giriş yapmadan önce Animated API’den biraz bahsetmek istiyorum.

## Animated API

Bildiğiniz gibi React Native ile animasyonlar hazırlamak için React Native’in bize sunduğu **Animated API**’ı kullanıyoruz. Sahip olduğu timing, spring, add, multipy.. gibi fonksiyonları ile yürütmek istediğimiz animasyonu hazırlamamıza ve bir View’ı anime etmemize olanak sağlıyor.

Fakat Animated API bazı kısıtlamalar ile beraber geliyor. Aşağıdaki görsel React Native mimarisinin basitleştirilmiş bir diagramı. İki thread’imiz var. Native kodun yürütüldüğü UI Thread (Main Thread) ve React kodumuzun yürütüldüğü JS Thread. Bu Thread’ler birbirleri ile asenkron olarak JSON mesajı alıp vererek haberleşiyorlar. Buna React Native Asynchronous Bridge (Asenkron Köprü) diyoruz. Animasyonlarımızın saniyede 60 kare ile çalışmasını istiyorsak **bir animasyon karesini** hesaplamak için yaklaşık olarak 16 milisaniyemiz var. UI ve JS Thread’leri arasındaki iletişim asenkron olarak gerçekleştiği için sonraki karenin 16 ms içerisinde hesaplanacağının garantisini veremiyoruz.

![](https://cdn-images-1.medium.com/max/2224/1*GDtQy2DPGUoNZCAHZpqDNg.png)

Eğer [requestAnimateionFrame’i](https://reactnative.dev/docs/animations#requestanimationframe) (JS ile hazırlanan animasyonlarda sonraki kareyi hesaplamak için kullanılan, saniyede 60 çağrı yapmaya çalışan bir fonksiyon) kullanarak Javascript ile animasyon yürütmeyi denersek , özellikle düşük seviyeli Android cihazlarda veya Javascript Thread’inde animasyonumuzun hesaplanacağı sırada, API istekleri, dosya sistemi veya herhangi input/output gibi işlemler yürütülüyorsa animasyonlarımızın 16 ms içerisinde hesaplanamaması çok olası.

Küçük bir örnekle bunları gerçekleyebiliriz. Üzerine dokunarak sayfada herhangi bir yere taşıyabildiğimiz bir topun olduğu aşağıdaki örneğe bakalım. Burada yorum satırında ise JS Thread’ini meşgul edecek setInterval tanımladım. Normalde topu istediğimiz gibi hareket ettirebiliyorken, yorum satırını kaldırdığımda JS Thread’inin meşgul olması bir gecikmeye sebep oluyor ve dokunma etkileşimime çok geç cevap alıyorum. Dolayısı ile kötü bir kullanıcı deneyimi ortaya çıkıyor.

![](https://cdn-images-1.medium.com/max/2484/1*5L1itaAhjMy_x3alUq3CxQ.png)

### useNativeDriver

Animated API’na, aralarında Reanimated kütüphanesinin yaratıcılarından, eski Facebook çalışanı [Krzysztof Magiera](https://twitter.com/kzzzf)’nın da katkıları ile [**useNativeDriver** özelliği gelmişti](https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated). Bu özellik, oluşturmak istediğiniz animasyonları daha başlamadan native tarafa gönderir ve her karenin köprü üstünden geçmesine gerek kalmadan native kodun UI Thread’da çalışmasını sağlar. Böylelikle JS Thread’i başka bir işlemden ötürü meşgul olsa bile animasyon düzgün bir şekilde çalışacaktır.

Fakat yine de performanslı ve çok çeşitli animasyonlar hazırlamak için useNativeDriver yeterli değil. useNativeDriver yalnızca **transform** ve **opacity** gibi non-[layout](https://reactnative.dev/docs/layout-props) özellikleri anime edebiliyor. Dokunma etkileşimlerini (Gestures) anime ederken de, React Native’in built-in dokunmatik sistemi olan JS Responder’in yapısı sebebi ile dokunma etkileşimleri konusunda bazı kısıtlamalara sahip.

Peki bu problemleri nasıl çözeceğiz? Burada devreye, temelde bu problemleri çözmek amacıyla ortaya çıkmış olan, **React Native Reanimated** kütüphanesi giriyor.

## React Native Reanimated

React Native Reanimated, Animated API’a göre daha fazla esneklik ve kontrol sağlayan, performanslı animasyonlar hazırlamanıza imkan veren bir React Native animasyon kütüphanesi.

Reanimated, animasyonlarımızı Javascript Thread’inde imperative şekilde yürütmek yerine, onları JavaScript tarafında declarative bir şekilde hazırlamamızı istiyor. Böylelikle gerekli animasyon için tanımladığımız tüm işlemler veya dokunma (gesture) etkileşimlerini UI Thread’de hesaplayıp çalıştırıyor. Yani useNativeDriver gibi bir özelliğe gerek kalmadan varsayılan olarak tüm işlemleri native tarafta gerçekleştiriyor.

Aşağıdaki tablonun sol tarafında bizim şimdiye kadar JavaScript (React) dünyasında kullandığımız fonksiyon/operatör/koşullar bulunuyor. Sağ tarafta bulunanlar ise onların UI Thread’de yürütülmesini sağlayacak, Reanimated’in sağladığı karşılıkları. Sol taraftaki ifadelerin hepsi JavaScript Thread’inde yürütülürken sağ taraftakiler ise UI Thread’de hesaplanıp/yürütülecek. Reanimated ile animasyonlar hazırlarken sağ taraftaki fonksiyonları kullanacağız.

![](https://cdn-images-1.medium.com/max/2110/1*uFzCX-mD8L3Ze50ZeQxRlg.png)

### Reanimated 2

> React Native Reanimated ekibi yakın zamanda major değişiklikler ile v2'yi duyurdular. Geliştirilen bir çok paketin hali hazırda v1'i kullanması sebebiyle bu yazı serisinin ilk bölümlerinde v1'e odaklanacağım. Performans iyileştirmelerinin yanında kod yazma kolaylığı açısından da farklılıklara sahip olan v2'ye sonraki yazılarımda giriş yapacağım. Bu yazı da ise aktardığım teorik bilgilerden sonra v1'in sağladığı fonksiyonlar ile örneklere başlayacağım.

### Örnek Uygulama

Şimdi basit bir örnek ile Reanimated’in sağladığı fonksiyonları kullanmış ve görmüş olalım. Örneğimizde ekrandaki bir component’in opacity değerini anime ederek fade in/fade out animasyonu hazırlayacağız.

Kullanacağımız Reanimated bileşen ve fonksiyonları aşağıdaki gibi import edelim.

![Reanimated’in sağladığı fonksiyon ve bileşenleri import ettiğimiz kod bloğu](https://cdn-images-1.medium.com/max/2428/1*Z02qZj8hoIGHNxQma8_qbg.png)_Reanimated’in sağladığı fonksiyon ve bileşenleri import ettiğimiz kod bloğu_

> Buradaki fonksiyonların sayısı fazla gözükmesi göz korkutsa da hepsinin anlaşılması ve kullanılması oldukça kolay.

### Animasyonun kodlanması

Şimdi animasyonumuz için gerekli kodları yazmaya başlayalım. Öncelikle anime etmek için basit bir Card ve aksiyon almak için CardToggleButton bileşenlerini tasarladım. Bunları import ederek ana bileşenimde kullanacağım. Sonuçta aşağıdaki gibi bir bileşen oluşturduk;

![](https://cdn-images-1.medium.com/max/2150/1*cToOkEFXyPqXWb-gpZzZ3Q.png)

Şimdi return ifadesinden önce gerekli değişkenlerini tanımlayarak animasyonumuzu hazırlayalım.

Anime edeceğimiz opacity özelliği için **startAnimation** adında Animated Value değişkeni oluşturdum. Daha sonra animasyonun neresinde olduğumuzu bilmek için ihtiyacımız olacak **clock** nesnesini oluşturdum. Daha sonra animasyonumuzun süresini belirlediğimiz duration değişkenini oluşturdum. Burada 1 saniyelik bir animasyon için 1000 değerini kullandım.

```js
const startAnimation = new Value(0)
const clock = new Clock()
const duration = 1000
```

Devamında animasyonun ne zaman başladığını takip edebilmek için kullanacağım **startTime** ve **endTime** değişkenlerini oluşturuyorum. Böylelikle animasyonun ne zaman bitmesi gerektiğini bileceğim. Burada dikkat ederseniz artı (+) operatörü yerine **add() **fonksiyonunu kullandım. Çünkü animasyon süresi boyunca hesaplanacak tüm işlemlerin UI Thread’de gerçekleşmesini hedefliyoruz.

```js
const startTime = new Value(0)
const endTime = add(startTime, duration)
```

Şimdi animasyonun başlangıç ve bitiş değerlerini Animated Value olarak oluşturuyorum. Böylelikle toggle işlemini gerçekleştirmesi için opacity değerini terslemek için hangi değerden başlayıp hangi değere gitmem gerektiğini biliyor olacağım. Kart gözüküyorsa başlangıç değerimiz 1 olur ve biz 0'a gideriz. Kart gözükmüyorsa başlangıç değerimiz 0 olur ve biz 1'a gideriz.

```js
const from = new Value(1)
const to = new Value(0)
```

Şimdi opacity değişkenini oluşturacağız. Burada **clock** değişkeninin değeri ile opacity değerini **interpolate** edeceğiz. Burada yapmamız gereken [interpolate fonksiyonu](https://docs.swmansion.com/react-native-reanimated/docs/nodes/interpolate/)na ilk parametre ile clock değişkenini vermek ve ikinci parametrede bir obje içerisinde gerekli giriş ve çıkış aralıklarını vermek. Giriş değeri olarak başlangıç zamanından bitiş zamanına kadar olan aralığı verdik. Animasyon 1 saniye süreceği için giriş aralığı 1000 oldu. Çıkış değeri olarak ise 0'dan 1'e olduğunu belirttik. extrapolate değeri ile de başlangıç ve bitiş değerlerinin belirttiğimiz değerlerin dışına taşmasını engellemek için **CLAMP** seçeneğini kullandık.

```js
const opacity = interpolate(clock, {
  inputRange: [startTime, endTime],
  outputRange: [from, to],
  extrapolate: Extrapolate.CLAMP
})
```

Şimdi useCode hook’unu kullanarak bu animasyon node’larının değerlerini güncelleyecek kod bloklarını hazırlayacağız. Burada koşul içerisinde startAnimation 1'e eşit ise yani animasyon tetiklenmişse, yürütülecek kod bloğu içerisinde şu işlemleri yaptık;

- Saati başlattık.
- opacity değerini başlangıç çıktı değerine (from) atadık, böylelikle animasyonun ortasında tekrar butona bastığımızda o anki durumdan tersi yönde animasyona devam edecek.
- Bitiş çıktı değerini (varmak istediğimiz değeri) belirledik
- Sayacın şu anki değerini başlangıç zamanına atadık.
- startAnimation değerini 0 yaparak tekrar tetiklenebilecek edebilecek duruma getirdik.

useCode’un ikinci parametresi olarak ise bağımlılıkları girdik. Yani bu bağımlılıklardan biri değiştiğinde üstteki kod bloğu tekrar çalıştırılacak.

```js
useCode(
  () => [
    cond(eq(startAnimation, 1), [
      startClock(clock),
      set(from, opacity),
      set(to, not(to)),
      set(startTime, clock),
      set(startAnimation, 0)
    ])
  ],
  [clock, from, startAnimation, startTime, to]
)
```

Farkettiyseniz kod bloğunda if, ==, ;, setState, gibi ifadeler yerine tamamen Reanimated’in sağladığı fonksiyonları kullanarak ifadelerimizi tanımladık.

Son olarak Anime etmek istediğimiz View’ı aşağıdaki gibi güncelliyoruz. Butona aksiyon olarak startAnimation değerini 1'e çekerek tanımladığımız bloğun yürütülmesini sağlıyoruz.

```js
return (
  <View>
    <Animated.View style={{ opacity }}>
      <Card />
    </Animated.View>
    <CardToggleButton
      onPress={() => {
        startAnimation.setValue(1)
      }}
    />
  </View>
)
```

Çıktı olarak aşağıdaki gibi bir sonuç elde ettik.

![](https://cdn-images-1.medium.com/max/2000/1*kSfIefkFtVp9f2cC5EzcXg.png)

![Geliştirdiğimiz bileşenin son hali ve çıktısı](https://cdn-images-1.medium.com/max/2000/1*IqMLh7DOLTbBlEqkvNTD9Q.gif)_Geliştirdiğimiz bileşenin son hali ve çıktısı_

Hazırladığımız animasyon basit olmasına rağmen bu kadar kod bloğuna sahip olması biraz göz korkutabiliyor. Fakat Reanimated’in Native performans sağlamak için bize sunduğu fonksiyonların çoğunu görmek adına güzel bir örnek oldu. Böyle bir animasyon için tek yol bu olmadığı gibi bu haliyle bazı eksiklikleri içeriyor. Bu örnek ve diğer geliştireceğim örnekler için aşağıdaki repoyu kullanacağım:

[**enesozturk/react-native-reanimated-workshop**](https://github.com/enesozturk/react-native-reanimated-workshop)

Umarım Reanimated’e giriş için faydalı bir yazı olmuştur. Bundan sonraki yazılarda Reanimated 2'ye giriş yapmayı ve onun üzerinden örnekler ile devam etmeyi düşünüyorum. Herkese mutlu kodlamalar 🥳

Kaynaklar:

- [https://docs.swmansion.com/react-native-reanimated/](https://docs.swmansion.com/react-native-reanimated/)
- [https://reactnative.dev/docs/animated](https://reactnative.dev/docs/animated)
- [https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated](https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated)
- [https://www.youtube.com/watch?v=kdq4z2708VM](https://www.youtube.com/watch?v=kdq4z2708VM)
- [https://start-react-native.dev/](https://start-react-native.dev/)
- [https://www.freecodecamp.org/news/how-react-native-animations-work/](https://www.freecodecamp.org/news/how-react-native-animations-work/)


React Native ile 60 FPS Animasyonlar


# Ne olursa olsun 60 FPS animasyonlar hazırlayın

> Düzgün animasyonlar ve dokunma bazlı arayüzler geliştirken 60 fps’e ulaşmak için native çözümler kullanın.

### Sorun: JS bazlı animasyonlar köprü trafiğini meşgul eder ve uygulamanın yavaşlamasına sebep olur.

Mobil kullanıcılar, pürüzsüz, iyi tasarlanmış, etkileşimlerine iyi dönüş sağlayan arayüzlere alıştırlar. Web’i ele aldığınızda ilk başta düşüneceğiniz şeylerden biri bu olmayabilir ama mobil için öyle. Sonuç olarak, uygulamalar, bir çok yerinde, arkada başka bir işlem olmasına rağmen çalışan animasyonlar yürütmek zorundadır.

Önceki bölümden bildiğimiz gibi, köprü üzerinden geçireceğimiz bilgi sayısı kısıtlı. Bu trafikte dahili olarak öncelik belirleyicisi yok. Yani, hem iş hem de animasyonları beraber yürütecek fonksiyonların tasarımı size kalmış durumda. Örneğin iOS’ta yerleşik API’ler uygun önceliğe sahip olacak şekilde planlama yapar ve böylelikle iyi performans sunar.

React Native’de işler biraz daha farklı. Eğer animasyonlarınızı baştan aşağı önceden düşünmezseniz ve bu iş için doğru araçları kullanmazsanız, frame (kare) düşüşleri ile çok yakında karşılaşacaksınız.

### Yavaş animasyonlar uygulama hakkındaki görüşleri etkiler ve bitmemiş görünmesine sebep olur.

Mobil kullanıcılar her zaman animasyonları pürüzsüz, eğlenceli ve kaliteli gözüken uygulamaları severler. Bu, deneyimi yaratan temel bir parçadır.

### Çözüm: Mümkünse, native ve doğru animasyonları kullanın

**Bir kerelik animasyonlar**

Native driver kullanımı animasyon performansını yükseltmek için en kolay yollardan biridir. Fakat, native driver ile beraber kullanılabilen stil özellikleri sınırlıdır. Native driver'ı, hareket (transformations), görünürlük (opacity) gibi değerler için kullanılır fakat renk, yükseklik gibi değerler ile kullanılamaz. Bunlar animasyonları hepsi için yeterli değildir. Çünkü genellikle bir şeyleri göstermek/gizlemek, konumunu değiştirmek istiyorsunuz.

```jsx
const fadeAnim = useRef(new Animated.Value(0)).current;

const fadeIn = () => {
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 1000,
    useNativeDriver: true, // enables native driver
  }).start();
};

// [...]

<Animated.View style={{ opacity: fadeAnim }} />;
```

Daha karmaşık durumlar için React Native Reanimated kütüphanesini kullanabilirsiniz. Bu paket temel Animated kütüphanesini low-level fonksiyonlarını barındırdığı gibi, ayrıca tüm stil özelliklerinin native driver ile kullanmanızı sağlıyor. Ancak, yükseklik, renk gibi değerleri anime etmek sorun olmamasına rağmen, dönüşüm, görünürlük gibi animasyonlar GPU destekli çalıştığı için yine de bir nebze daha hızlı çalışacaktır. Ama normal kullanıcılar bu farkı anlamayacaklardır.

**Dokunma temelli animasyonlar**

Animasyonlar ile en çok yapılmak istenen şey onu dokunma ile kontrol etmektir. Kullanıcılar için bu, arayüzün en eğlenceli kısmıdır. Güçlü bir his oluşturur ve uygulamayı pürüzsüz ve esnek hissettirir. React Native dokunma ile native güdümlü animasyonları beraber yürütmeye geldiğinde çok kısıtlıdır.

Daha karmaşık durumlar için bir diğer harika kütüphane React Native Gesture Handler’dır. Bu kütüphane dokunma etkinliklerini native olarak çözer. Onu Animated ile beraber kullanarak basit bir kaydırmalı element oluşturabilirsiniz. Fakat yinede JS callback’lerine ihtiyaç duyar. Tabiki bunun da bir çaresi var.

Dokunma bazlı animasyonlar için en güçlü çözüm, React Native Reanimated ve React Native Gesture Handler kütüphanelerinin beraber kullanılmasıdır. Bu paketler beraber kullanılmak için tasarlanmıştır ve karmaşık dokunmatik animasyonları native tarafta hesaplamak için olanak sağlar. Buradaki tek sınır sizin yapabileceklerinizdir.

```jsx
import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
import { PanGestureHandler, State } from "react-native-gesture-handler";
import Animated from "react-native-reanimated";
import runSpring from "./runSpring";
const {
  set,
  cond,
  eq,
  add,
  multiply,
  lessThan,
  stopClock,
  sub,
  defined,
  Value,
  Clock,
  event,
} = Animated;

class Snappable extends Component {
  constructor(props) {
    super(props);

    const TOSS_SEC = 0.2;
    const dragX = new Value(0);
    const state = new Value(-1);
    const dragVX = new Value(0);

    this._onGestureEvent = event([
      { nativeEvent: { translationX: dragX, velocityX: dragVX, state: state } },
    ]);

    const transX = new Value();
    const prevDragX = new Value(0);

    const clock = new Clock();

    const snapPoint = cond(
      lessThan(add(transX, multiply(TOSS_SEC, dragVX)), 0),
      -100,
      100
    );

    this._transX = cond(
      eq(state, State.ACTIVE),
      [
        stopClock(clock),
        set(transX, add(transX, sub(dragX, prevDragX))),
        set(prevDragX, dragX),
        transX,
      ],
      [
        set(prevDragX, 0),
        set(
          transX,
          cond(defined(transX), runSpring(clock, transX, dragVX, snapPoint), 0)
        ),
      ]
    );
  }
  render() {
    const { children, ...rest } = this.props;
    return (
      <PanGestureHandler
        {...rest}
        maxPointers={1}
        minDist={10}
        onGestureEvent={this._onGestureEvent}
        onHandlerStateChange={this._onGestureEvent}
      >
        <Animated.View style={{ transform: [{ translateX: this._transX }] }}>
          {children}
        </Animated.View>
      </PanGestureHandler>
    );
  }
}

export default class Example extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Snappable>
          <View style={styles.box} />
        </Snappable>
      </View>
    );
  }
}

const BOX_SIZE = 100;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  box: {
    width: BOX_SIZE,
    height: BOX_SIZE,
    borderColor: "#F5FCFF",
    alignSelf: "center",
    backgroundColor: "plum",
    margin: BOX_SIZE / 2,
  },
});
```

Dokunma etkinliklerini low-level’da ele almak kolay olmayabilir. Ama neyse ki, CallbackNodes (Animated.Value)’u kullanan ve işleyen 3. parti kütüphaneler var. Değer aralığı genellikle 0-1 arasındadır. Fakat bunu enterpolasyon işlemi ile genişletebilirsiniz. CallbackNode’u kullanan güzel örneklerden biri react-native-bottom-sheet ve react-native-tab-view kütüphaneleridir.

```jsx
import * as React from "react";
import { StyleSheet, Text, View } from "react-native";
import Animated from "react-native-reanimated";
import BottomSheet from "reanimated-bottom-sheet";
import Lorem from "./Lorem";
const { Value, interpolate } = Animated;
export default class Example extends React.Component {
  gestureCallbackNode = new Value(0);
  contentPos = this.gestureCallbackNode;
  renderHeader = (name) => (
    <View
      style={{
        width: "100%",
        backgroundColor: "lightgrey",
        height: 40,
        borderWidth: 2,
      }}
    >
      <Text style={{ textAlign: "center", fontSize: 20, padding: 5 }}>
        Drag me
      </Text>{" "}
    </View>
  );
  renderInner = () => (
    <View style={{ backgroundColor: "lightblue" }}>
      {" "}
      <Animated.View
        style={{
          opacity: interpolate(this.contentPos, {
            inputRange: [0, 1],
            outputRange: [1, 0],
          }),
          transform: [
            {
              translateY: interpolate(this.contentPos, {
                inputRange: [0, 1],
                outputRange: [0, 100],
              }),
            },
          ],
        }}
      >
        <Lorem />
        <Lorem />{" "}
      </Animated.View>{" "}
    </View>
  );

  render() {
    return (
      <View style={styles.container}>
        {" "}
        <BottomSheet
          callbackNode={this.gestureCallbackNode}
          snapPoints={[50, 400]}
          initialSnap={1}
          renderHeader={this.renderHeader}
          renderContent={this.renderInner}
        />{" "}
      </View>
    );
  }
}
const IMAGE_SIZE = 200;
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
```

### JavaScript işlemlerinize düşük öncelik verin

Animasyon uygulamasını (implementation) tamamiyle kontrol etmek her zaman mümkün olmayabilir. Örneğin, React Navigation, React Native Gesture Handler ve Animated birleşimini kullanıyor ki buna rağmen çalışmaanı’nda JavaScript kontrolüne ihtiyaç var. .......

```jsx
import React, { useState, useRef } from "react";
import {
  Text,
  View,
  StyleSheet,
  Button,
  Animated,
  InteractionManager,
  Platform,
} from "react-native";
import Constants from "expo-constants";
const ExpensiveTaskStates = {
  notStared: "not started",
  scheduled: "scheduled",
  done: "done",
};
export default function App() {
  const animationValue = useRef(new Animated.Value(100));
  const [animationState, setAnimationState] = useState(false);
  const [expensiveTaskState, setExpensiveTaskState] = useState(
    ExpensiveTaskStates.notStared
  );
  const startAnimationAndSchedlueExpensiveTask = () => {
    Animated.timing(animationValue.current, {
      duration: 2000,
      toValue: animationState ? 100 : 300,
      useNativeDriver: false,
    }).start(() => {
      setAnimationState(!animationState);
    });
    setExpensiveTaskState(ExpensiveTaskStates.scheduled);
    InteractionManager.runAfterInteractions(() => {
      setExpensiveTaskState(ExpensiveTaskStates.done);
    });
  };
  return (
    <View style={styles.container}>
      {" "}
      {Platform.OS === "web" ? (
        <Text style={{ textAlign: "center" }}>
          !InteractionManager works only on native platforms. Open example on
          iOS or Android!
        </Text>
      ) : (
        <>
          <Button
            title="Start animation and schedule expensive task"
            onPress={startAnimationAndSchedlueExpensiveTask}
          />{" "}
          <Animated.View
            style={[styles.box, { width: animationValue.current }]}
          >
            <Text>Animated box</Text>{" "}
          </Animated.View>
          <Text style={styles.paragraph}>
            Expensive task status:{" "}
            <Text style={{ fontWeight: "bold" }}>{expensiveTaskState}</Text>{" "}
          </Text>
        </>
      )}
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",

    paddingTop: Constants.statusBarHeight,
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    textAlign: "center",
  },
  box: {
    backgroundColor: "coral",
    marginVertical: 20,
    height: 50,
  },
});
```

Bu React Native kodu, çalışan bir animasyon bittikten sonra herhangi bir kodun çalışmasını sağlıyor. Pratikte, asıl arayüzün render olmasını beklerken bir placeholder gösterebilirsiniz. JavaScript animasyonlarınızı daha pürüzsüz yapacak ve diğer işlemlerin onu bölmesini engelleyecektir. Pürüzsüz olması genellikle harika bir deneyim için yeterlidir.

### Yararları: 60 FPS’te dokunmatik ve pürüzsüz animasyonların keyfini çıkartın

React Native’de animasyonlar üretmenin tek doğru bir yolu yok. Ekosistem farklı yaklaşımlara sahip çok farklı kütüphaneler ile dolu. Bu bölümdeki düşünceler sadece pürüzsüz arayüz üretmeniz için önerilerimiz. Daha önemli olan şey, her şeyi baştan aşağı kafanızda resmetmeniz ve ihtiyacınız için doğru seçimi yapmanız. JavaScript bazlı animasyonların da iyi çalışacağı durumlar olduğu gibi sadece native animasyonlar ile pürüzsüz yapabileceğiniz durumlar olacaktır.


Ne olursa olsun 60 FPS animasyonlar hazırlayın

React Native Uygulamamı Nasıl Optimize Ederim? [B1:K6]


## 5. Native ile JavaScript arasındaki dengeyi sağlayın

> Hızlı çalışan ve kolay geliştirilen uygulamalar için native ve JavaScript arasındaki dengeyi bulun

### Sorun: Native modüller ile çalışırken, native ve JavaScript arasındaki çizgiyi yanlış yere çiziyorsunuz

React Native ile çalışırken çoğunlukla JavaScript geliştirmesi yapıyorsunuz. Ancak native code yazmanızı gerektirecek bazı durumlar olacak. Örneğin, React Native desteği olmayan üçüncü parti bir SDK ile çalışıyorsunuz. Bu durumda native modül oluşturup bunu React Native'e linklemelisiniz.

React Native, bridge (köprü) adı verilen, JavaScript ve Native taraf arasında iki yönlü iletişim yapan bir soyutlama üzerine kuruludur. Bu iletim eş zamanlı değildir (asynchronous). Bu, iletişimde bir çağrı yapan kişinin sonuçlarının gelmesini beklerken, JavaScript’in hala çalışmakta olduğunu ve başka bir görev için hazır olabileceği anlamına gelir.

Köprüye gelen JavaScript çağrılarının sayısı belli değildir ve uygulamanızda yaptığınız etkileşimleri sayısına bağlı olarak zaman içinde değişebilir. Ek olarak, her bir çağrı zaman alır. Çünkü JavaScript argümanlarının bu iki bölge tarafından anlaşılabilen bir format olan JSON’a çevrilmesi gerekir.

Örneğin, köprü bir veriyi işlerken meşgul olduğunda, başka bir çağrıyı bloklaması ve bekletmesi gerekecektir. Eğer bu bu etkileşim dokunma (gesture) ve animasyon işlemleri ile ilgiliyse, muhtemelen frame düşüşü yaşarsınız. Bazı kütüphaneler başka işler gerçekleşirken, animasyonlar sırasında bu frame kaybını önlemek için tasarlanmıştır. Bu yüzden köprü iletişimini etkili ve hızlı tasarlamak önemlidir.

### Köprü üzerindeki fazla trafik başka işler için daha az alana sebep olur

Köprü üzerindeki fazla trafik demek, React Native’in aynı anda transfer etmek istediği diğer önemli şeyler için daha az alan demektir. Sonuç olarak uygulamanız dokunmatik ve diğer etkileşimlere cevap vermemeye başlar.

### Çözüm: JavaScript tarafında doğru sayıda soyutlama yapın

Native bir modül geliştirirken, çağrıyı hemen native tarafa iletmek ve gerisini orada halletmek iyidir. Fakat doğru argüman setini sağlamamak, doğru argümanların sağlanıp sağlanmadığını kontrol etmek için tüm köprü üzerinde git gel yapmak gibi bazı istenmeyen durumlar olabilir.

Çağrıyı Native modüllere iletmekten başka bir şey yapmayan bir JavaScript modülünü inceleyelim.

```jsx
import { NativeModules } from "react-native";
const { ToastExample } = NativeModules;

export const show = (message, duration) => {
  ToastExample.show(message, duration);
};
```

Eksik bir parametre gönderme durumunda muhtemelen native modül exception (istisna) fırlatacaktır. React Native’in mevcut sürümü JavaScript parametrelerinin ve native kodunuz için gereken parametrelerin senkronize olmasını sağlamak için bir soyutlama sağlamaz. Çağrınız JSON’a dönüştürülür, Native tarafa iletilir ve çalıştırılır.

Bu işlem, çalışması için doğru argümanların hepsini vermesek bile bir sorun çıkarmadan çalışacaktır. Hata, çağrı native tarafta işlendiğinde ve native modül istisna fırlattığında gelecektir.

Böyle bir senaryoda, önceden kontrol etmediğiniz bir hatanın fırlatılmasını bekleyerek vakit kaybedeceksiniz.

```jsx
import { NativeModules } from "react-native";
const { ToastExample } = NativeModules;

export const show = (message, duration) => {
  if (typeof message !== "string" || message.length > 100) {
    throw new Error("Invalid Toast content!");
  }
  if (!Number.isInteger(duration) || duration > 20000) {
    throw new Error("Invalid Toast duration!");
  }
  ToastExample.show(message, duration);
};
```

Üstteki kod yalnızca native modüle bağlı değildir. Her React Native temel bileşeninin, native tarafta eşdeğeri vardır ve prop’ları her defasında köprü üzerinden geçer ve yeni bir render’lama gerçekleşir. Bu Native metodların JavaScript argümanları ile işlenmesi gibidir.

Bunu daha iyi bir açıdan incelemek için React Native’de stillendirme örneğine bakalım.

```jsx
import * as React from "react";
import { View } from "react-native";

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <View
          style={{
            backgroundColor: "coral",
            width: 200,
            height: 200,
          }}
        />
      </View>
    );
  }
}
```

Bir bileşeni stillendirmenin en kolay yolu ona stil objesi vermektir. Eğer dinamik stil değişkenleri ile çalışmıyorsanız bu bir anti-patterndir.

```jsx
import * as React from "react";
import { View, StyleSheet } from "react-native";

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.caontainer}>
        <View style={styles.box} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  box: {
    backgroundColor: "coral",
    width: 200,
    height: 200,
  },
});
```

React Native, stilleri köprü üzerinden geçirmek için çoğunlukla StyleSheet API’sini kullanır. Bu API stillerinizi işler ve köprü üzerinden yalnızca bir defa geçtiklerinden emin olur. Çalışmaanı boyunca, Stil prop’unu Native taraftaki önbelleğe (cache) alınmış stil ile değiştirir.

Sonuç olarak React Native’e, arayüzü güncellemek için her defasında büyük nesne dizileri göndermek yerine, köprü, bu işlemleri çok daha kolay işler ve transfer eder.

### Yararları: Kod daha hızlı ve sürdürülebilir

Şu anda performans sorunları ile karşılaşıyorsanız, bu gibi alıştırmaları native tarafta uygulamak iyi olabilir. Bu yalnızca hız kazandırmaz aynı zamanda iyi bir kullanıcı deneyimi sağlar.

Köprü üzerindeki trafiğin akışını doğru noktada tutmak uygulama performansına önemli bir katkıda bulunacaktır. Burada gördüğünüz gibi, bazı teknikler zaten React Native içerisinde, performansı düşünmemeniz için kullanılıyor. Bunların farkında olmak, yüksek yük altında bile daha iyi uygulamalar üretmenizi sağlayacaktır.


Native ile JavaScript arasındaki dengeyi sağlayın

React Native Uygulamamı Nasıl Optimize Ederim? [B1:K5]


## Her zaman mobil platform için hazırlanmış kütüphaneleri kullanın

> Performansa ve kullanıcı deneyiminden ödün vermeden, mobil cihazlar için tasarlanmış kütüphaneleri kullanın

### Sorun: Mobil odaklı optimize edilmemiş web kütüphaneleri kullanıyorsunuz

React Native web uygulaması geliştirir gibi bir fonksiyonelliğe sahip olsa da, aynı geliştirme ortamında olmadığınızı unutmayın. Mobil geliştirmenin kendi kuralları, uygulamaları ve sınırları vardır.

Örneğin, web uygulaması ile çalışırken, CPU kaynaklarının ne kadar ayrılması gerektiğini düşünmeyiz. Bunun dışında çoğu web uygulaması internete bağlı ve güçlü bataryası olan cihazlar üzerinde çalışır (bilgisayarlar).

### Optimize edilmemiş kütüphaneler fazla batarya tüketimine ve uygulamanızın yavaşlamasına sebep olur. Mobil işletim sistemi uygulamanızın yapabileceklerini kısıtlayabili\*\*

Eğer kullanacağınız kütüphane network işlemleri yapıyorsa, real-time mesajlaşma sağlıyorsa veya ileri seviye grafikler render ediyorsa, mobil odaklı geliştirilmiş bir kütüphaneyi kullanmanız tavsiye edilir. Sebebi basit; bu kütüphaneler tarayıcı yetenek ve sınırlarını göz önüne alınarak web için geliştirildi.

### Çözüm: Kütüphanenizin mobil odaklı, platform bazlı versiyonunu kullanın

Firebase örneğini ele alalım. Firebase web ve mobile için SDK’lar içerir. Her SDK Realtime Database özelliğini destekler.

React Native'de bir sorun yaşamadan Firebase’in web versiyonunu kullanabilirsiniz. Fakat bunu yapmamalısınız. Aşağıdaki örnek bir sorun olmadan çalışabilir, fakat mobile odaklı geliştirilmiş kütüphane ile aynı performansı sağlamaz.

```jsx
import database from ‘firebase/database’;

database() .ref(‘/users/123’) .on(‘value’, snapshot => {
	console.log(‘User data: ‘, snapshot.val());
});
```

Bir de aynı kütüphanenin mobil için geliştirilmiş SDK’sını kullanalım;

```jsx
import database from ‘@react-native-firebase/database’;

database() .ref(‘/users/123’) .on(‘value’, snapshot => {
	console.log(‘User data: ‘, snapshot.val());
});
```

Burada gördüğünüz gibi, çok küçük bir değişimle önemli bir fark yarattık.

### Faydaları: Batarya ömrüne zarar vermeden en hızlı ve performanslı desteği sağladık

Basit şeyler ve maksimum yeniden kullanılabilirlik için kütüphanenin web versiyonunu kullanabilirsiniz. Bu, tarayıcıda harcadığınız az çaba ile aynı özelliklere erişmenizi sağlar.

Ama ileri seviye durumlar için React Native’i mobile SDK ile konuşturabilir ve native fonksiyonellikle genişletebilirsiniz. Böyle bir seçenek performans ve kullanıcı deneyiminde ödün vermeden bir çok platformda aynı anda daha hızlı özellikler oluşturmanıza olanak tanır.


Her zaman mobile platform için hazırlanmış kütüphaneleri kullanın

React Native Uygulamamı Nasıl Optimize Ederim? [B1:K4]


## 2. Belli amaçlar için üretilmiş bileşenleri kullanın

> Kullanıcı deneyimi ve performansı arttırmak için dedicated yüksek görevli bileşenleri nasıl kullanacağınızı bulun.

### Sorun: React Native’in sunmuş olduğu high order bileşenlerin farklında değilsiniz

React Native’de her şey bileşenlerden oluşur. Bileşen hiyerarşisinde Text, View, TextInput gibi ilkel (primitive) bileşenler bulunur. Uygulama geliştirirken, onu küçük bloklara böleriz. Bunun için ilkel bileşenleri kullanırız. Örnek olarak bir Giriş Yap sayfasında girdi almak için peş peşe TextInput’lar, butonlar için Touchable bileşenler kullanırız. Bu gayet doğru bir yaklaşımdır.

React Native bize belli amaçlar için üretilmiş üst düzey (high order) bileşenler sunar. Bunların farkında olmamak veya kullanmamak performans sorunlarına yol açabilir.

### Veri büyüdükçe özel bileşenleri kullanmamak performans ve kullanıcı deneyiminizi etkileyecektir.

Eğer özel bileşenleri kullanmıyorsanız, uygulamanız production’a çıktığında performans iyileştirmeleri yapmaktan ve kullanıcı deneyiminden uzaklaşmış olursunuz. Özel bileşenler daha kapsamlıdır ve mobil senaryoların çoğunu kapsayacak geniş API'lere sahiptir.

### Çözüm: Her zaman özel bileşenleri kullanın. [Örnek: Listeler için FlatList]

Bir liste oluşturmanın en hızlı ve en kötü yolu ScrollView içinde View primitive bileşenlerini render etmektir. Bu, data büyüdüğü zaman sizi bir soruna sürükler. Büyük veri setleri, sonsuz kaydırma, bellek yönetimi, FlatList bileşenin arkasında hali hazırda ele alınmış konulardır.

5000’tane veriyi render eden bir listeyi ScrollView/View ve FlatList yöntemleri ile ayrı ayrı ele aldığınızda farklı gözlemleyebilirsiniz. ScrollView/View yöntemi sağlıklı bir şekilde scroll (kaydırma) etmeye bilir bile.

**Sonuç olarak, FlatList arkaplanda ScrollView ve View bileşenlerini kullanıyor. Peki fark nedir?**

FlatList, çok fazla deneyimsel ve gelişmiş JavaScript hesaplamalarına sahiptir ve böylelikle fazladan render’ları en aza indirger. Bununla beraber verilerinizi ekranda gösterirken har zaman kaydırma deneyimini 60 FPS’te sağlar.

Sadece FlatList kullanmak bazı durumlarda yeterli değildir. FlatList’in performans iyileştirmesi ekranda gösterilmeyen veririnin render edilmemesi üzerine dayalıdır. Bu işlemin en masraflı kısmı yerleşim hesaplamasıdır. FlatList bizin yerleşiminizi ölçer ve kaydırma alanı için ne kadar alan atanacağını hesaplar.

### Yararları: Uygulamanız daha hızlı çalışır. Karmaşık veri yapılarını görüntüler ve daha fazla iyileştirme için size olanak sağlar.

Özel bileşenler sayesinde, uygulamanız her zaman ne kadar hızlı olabilirse o kadar hızlı çalışacaktır. React Native sayesinde otomatik olarak performans iyileştirmesini yapmış oluyorsunuz. Sonraki gelişmeler için bu bileşenleri takip etmeyi unutmayın.

Aynı zamanda FlatList ile sabit bölüm başlığı, kaydırarak yenileme gibi bazı genel arayüz tasarımlarını da uygulamış oluyorsunuz.

## 3. Harici kütüphane seçerken iki kez düşünün

> Hangi JavaScript kütüphanesi ile çalışacağınızı bilmek uygulamalarınızın hızını ve performansını arttırmanızı sağlayabilir.

### Sorun: İçinde tam olarak ne olduğunu bilmediğiniz paketleri seçiyorsunuz

Genellikle, sıfırdan React Native bileşenleri geliştirmek yerine bize işimizi kolaylaştıracak yardımcı JavaScript kütüphaneleri kullanırız. JavaScript ekosistemi böyle bir geliştirmeye teşvik eder ve uygulama yapısını küçük ve tekrar kullanılabilir modüllere bölmenizi sağlar.

Böyle bir ekosistem çok fazla avantajı olduğu gibi ciddi dezavantajlara da sahiptir. Bunlardan biri, geliştiricilerin çok fazla kütüphaneden hangisini seçmekte zorluk çekmesi. Bir kütüphaneyi projeniz için seçerken, genellikle kütüphanenin sağlıklı olduğunu, bakımının yapıldığını anlamak için Github’daki yıldız, issue, geliştirici vs PR sayılarına bakarlar. Gözden kaçırdıkları nokta şudur ki kütüphanenin boyutu, sağladığı özellik sayısı ve kullandığı harici başka kütüphaneler de göz artı edilmemelidir. Bir diğer düştükleri yanılgı da şudur ki, React Native tamamen JavaScript’ten oluştuğunu düşünmek. Bu yüzden web uygulamalarında kullandıkları kısıtlamalar ve egzersizler ile çalışıyorlar. Fakat, mobil geliştirme temelde farklıdır ve kendi kuralları vardır.

### Karmaşık kütüphaneler uygulama hızına zarar verir

Full native uygulamadan farklı olarak React Native uygulaması JavaScript bundle’ı içerir vs bunu bellekte tutar. Daha sonra bu JavaScript Virtual Machine üzerinde ayrıştırılır (parse) ve çalıştırılır. JavaScript kod boyutu performans için önemli bir noktadır.

### Çözüm: Daha seçici olun ve küçük özelleştirilmiş kütüphaneler kullanın.

Bu sorunların üstesinden gelmenin en kolay yolu projeyi önceden yaplandırmak ve doğru stratejiyi kullanmaktır.

Eğer karmaşık bir kütüphane kullanacaksanız, o kütüphanenin sizin işinizi görecek daha küçük hali olup olmadığına bakın.

Bir örnek verelim: En genel işlemlerden biri tarihler üzerindeki değişiklik yapmaktır. Diyelim ki geçen süreyi hesaplayacaksınız. Bunun için Moment JS (67.9 Kb) kullanmak yerine daha küçük boyutlu Day JS (2 Kb)’i kullanabilirsiniz.

```jsx
// moment.js
import moment from ‘moment’
const date = moment(“12-25-1995”, “MM-DD-YYYY”);

// day.js
import dayjs from ‘dayjs’
const date = dayjs(“12-25-1995”, “MM-DD-YYYY”);
```

Eğer başka bir alternatifiniz yoksa, kütüphanenin yalnızca bir parçasını yükleyebiliyor olduğunuza bakın.

```jsx
// Tüm lodash kütüphanesini import etmiş olduk
import { map } from ‘lodash’;
const square = x => x * x; map([4, 8], square);

// Yalnızca ilgili fonksiyonu eklemiş olduk
import map from ‘lodash/map’;
const square = x => x * x; map([4, 8], square);
```

### Faydaları: Uygulamanız daha hızlı yüklenir

Daha hızlı başlatma süresi, daha pürüzsüz etkileşimler, genel görünüm ve his, uygulamanızı diğerlerinin arasından sıyrılmasını sağlar.

[Akamia’nın şu raporuna](https://www.akamai.com/us/en/multimedia/documents/report/akamai-state-of-online-retail-performance-2017-holiday.pdf) göre mobil yükleme sürelerinde yalnızca bir saniyelik bir gecikme geri dönüş oranlarınızı %20 düşürebilir.

Bu yüzden, doğru kütüphane seçiminin önemini göz ardı etmemelisiniz. Üçüncü taraf bileşenlerde daha seçici olmak ilk başta önemsiz gelebilir. Ama kaydedilen tüm milisaniyeler zaman içinde önemli kazanımlar sağlayacaktır.


Belli amaçlar için üretilmiş bileşenleri kullanın

React Native Uygulamamı Nasıl Optimize Ederim? [B1:K2-3]


> Bu not, The Ultimate Guide to React Native Optimization kitabından çevrilmiş notları içermektedir.

React Native, oluşturduğunuz arayüz bileşenlerini, çalışmaanı’nda platforma özel native bileşenlere dönüştürür. Tüm bileşenler size aynı performans ve esnekliği sağlar. Altta yatan bu API ile doğrudan çalışmak yerine siz arayüze odaklanırsınız.

React Native declarative bir kütüphanedir ve rendering işlemini kendisi çözer. Yani uygulamanın ne zaman render edileceğini siz düşünmezsiniz. Sizin işiniz arayüz bileşenlerini oluşturmaktır.

Ancak bu, React Native ile geliştirdiğiniz uygulamanızın aynı hız ve kullanıcı deneyimine sahip olacağı anlamına gelmez. iOS ve Android API çağrılarının performansı hakkında endişelenmemenize gerek olmasa da, bileşenlerinizi nasıl kullandığınız bir fark yaratır.

## 1. UI Re-renderlara dikkat edin

> State işlemlerinin sayısını optimize edin, [Pure](https://www.google.com/search?client=opera&q=pure+components&sourceid=opera&ie=UTF-8&oe=UTF-8) ve [Memoized](https://www.google.com/search?client=opera&q=memoized+components&sourceid=opera&ie=UTF-8&oe=UTF-8) bileşenleri kullanarak uygulamanızı daha az kaynak ihtiyacı ile daha hızlı hale getirin.

Uygulamanın render edilmesi React Native’in sorumluluğundadır. React, bileşenlerinizin (component) üzerindeki değişiklikleri izler, birbiri ile karşılaştırır ve mimarisi gereği bileşenleri yalnızca gerektiğinde tekrar render eder.

Bir bileşen, içinde bulunduğu ebeveyn bileşen tekrar render edildiğinde veya prop’ları değiştiğinde tekrar render edilir.

### Sorun: Gereksiz state güncellemeleri fazladan render döngülerine sebep olur

Yalnızca gerektiğinde ve en az sayıda değişimi izlese de çok fazla state operasyonu performans sorunlarına yol açar. Özellikle düşük performanslı telefonlarda.

### Çözüm: State işlemlerinin sayısını optimize edin ve Pure ve Memoized bileşenleri gerektiği gibi kullanın

Uygulamanızın gereksiz render döngüsüne sokmanın çok fazla yolu vardır. Bu bölümde iki farklı senaryoya değineceğiz. **Controlled Bileşen** ve **Global State**.

### Controlled vs Uncontrolled Bileşenler

Neredeyse her React Native uygulamasında TextInput bileşeni bulunur ve içinde bulunduğu bileşenin state’i ile kontrol edilir. Aşağıdaki gibi;

```jsx
import React, { Component } from ‘react’;
import { TextInput } from ‘react-native’;

export default function UselessTextInput() {
	const [value, onChangeText] = React.useState(‘Text’);

	return (
    <TextInput
        style={{ height: 40, borderColor: ‘gray’, borderWidth: 1 }}
        onChangeText={text => onChangeText(text)}
        value={value}
        />
    );
}
```

Ancak yavaş çalışan cihazlarda ve kullanıcının çok hızlı yazdığını farz ettiğimiz durumlarda arayüz güncelleme problemleri ortaya çıkabilir. Bunun sebebi **React Native’in asenkron yapısıdır.**

Bu senkronizasyon probleminin çözümlerinden biri, value özelliğini (prop) TextInput’tan kaldırmaktır. Sonuç olarak veri tek yönlü akış sağlacaktır. Native taraftan JavaScript tarafına.

```jsx
import React, { Component, useState } from ‘react’;
import { Text, TextInput, View } from ‘react-native’;

export default function PizzaTranslator() {
    const [text, setText] = useState(‘’);

    return (
        <View style={{padding: 10}}>
					<TextInput
            style={{height: 40}}
            placeholder=”Type here to translate!”
            onChangeText={text => setText(text)}
						defaultValue={text}
	        />
        <Text style={{padding: 10, fontSize: 42}}>
            {text.split(‘ ‘).map((word) => word && ‘ ’).join(‘ ‘)}
        </Text>
  </View>
  );
}
```

Bu [videoda](https://youtu.be/83ffAY-CmL4?t=1483) bahsedildiği gibi, bu yönetim bazı durumlarda tek başına yeterli değildir. Örneğin input validation veya masking yaptığınızda, hala kullanıcının girdiği ve güncellediği veriyi kontrol etmeniz gerekebilir. React Native takımı bu sınırlamanın farkında olup aktif olarak bu ve benzeri problemleri çözecek yeni bir mimari üzerinde çalışmaktadır.

### Global State

Bir diğer genel performans sorunlarından biri, bileşenlerin global state’e nasıl bağlandığı ile ilgili. En kötü senaryo, yalnıca TextInput veya CheckBox gibi bir bileşenin state’inin değişmesi ile tüm uygulamanın state’inin değişmesi olabilir. Bunun sebebi kötü bir state management tasarımıdır.

Redux, Overmind.js gibi temel amacı state management olan ve bu iş için optimize edilmiş kütüphaneler kullanmanızı öneriyoruz.

Öncelikle, state management kütüphaneniz bileşenlerinizi yalnızca onları ilgilendiren veriler değiştiğinde güncellemeli. Bu Redux’taki **connect** fonksiyonunun temel görevidir.

Daha sonra, eğer bileşenleriniz state’inizde tuttuğunuz veriden farklı biçime sahip bir veriyi kullanıyorsa, gereği olmayan bir re-render işlemi gerçekleşebilir. Bu durumdan kaçınmak için bir seçici fonksiyon oluşturabilirsiniz.

```jsx
import { createSelector } from ‘reselect’

const getVisibilityFilter = (state) => state.visibilityFilter
const getTodos = (state) => state.todos

const getVisibleTodos = createSelector(
    [ getVisibilityFilter, getTodos ],
    (visibilityFilter, todos) => {
        switch (visibilityFilter) { case ‘SHOW_ALL’:
        return todos
        case ‘SHOW_COMPLETED’:
        return todos.filter(t => t.completed) case ‘SHOW_ACTIVE’:
        return todos.filter(t => !t.completed)
        }
    }
)

const mapStateToProps = (state) => { return {
   todos: getVisibleTodos(state)
 }
}

const VisibleTodoList = connect(mapStateToProps,null)(TodoList)

export default VisibleTodoList
```

Genel bir kötü performans pratiği, state management kütüphanesini React Context ile kendiniz yazacağınız bir Global State ile değiştirilebileceğinizi düşünmenizdir. Bu, başta işinizi görebilir ve kullanacağınız harici kütüphanenin kod yükünü barındırmayacağı için mantıklı gelebilir. **Ama gerekli optimizasyon (memoization) yapılmamış bu mekanizma büyük performans sorunlarına yol açacaktır.** Sonuçta muhtemelen Redux gibi bir kütüphane ile state’inizi tekrar tasarlayacaksınız.

Ayrıca normal bileşen yerine Pure bileşeni memo wrapper ile kullanmak sizi çok fazla re-render’dan kurtarabilir.

### Faydaları: Az kaynak ihtiyacı, daha hızlı uygulamalar

Uygulama performansını sürekli düşünmelisiniz. Ama iyileştirme işlemini en baştan yapmaya çalışmayın. Çünkü buna gerek yok. Olmayan problemleri çözmeye çalışırken vakit kaybedebilirsiniz.

Zor çözüme sahip performans sorunları, kötü bir state management tasarımından kaynaklanmaktadır. İyi tasarlamış olduğunuza dikkat edin.

Tüm bu adımları göz önünde bulundurduğunuzda, uygulamanız daha az kaynak ihtiyacı ve az operasyonla işini yapacaktır. Nihayetinde, bu daha az batarya kullanımı, daha tatmin edici ve etkili kullanıcı arayüzlerine vesile olacaktır.


React Native Uygulamamı Nasıl Optimize Ederim? [B1:K1]


> Öncelikle burada söyleyeceklerim Firebase’in kendisi ile ilgili değil, **react-native-firebase** (RNF) paketiyle ilgili. Dolayısı ile benim karşılaştığım hatalarla sizin de karşılaşacağınızın garantisi yok. Ya da var bence. Neyse.

Merhaba, bir süredir React Native ile geliştirdiğim projede **Push Notifications** özelliği üzerinde çalışıyorum. Aslında bu konuyu çok önceden çözdüğümü sanmıştım. Her şey proje production’a çıktığında yaşadığım sıkıntılarla başladı. react-native-firebase paketini kullanarak geliştirdiğim projede bildirimlerin bazı cihazlarda çalışmaması, ön plan (foreground), arkaplan (background), kapalı (quit) durumlarında bildirim verisinin istenilen şekilde handle edilememesi çok ciddi bir problem oldu. Zira bildirim içerisinde gelen veriyi, bildirime tıkladıktan sonra uygulama açıldığında kullanamayacaksam (yönlendirme, modal açılması veya herhangi bir aksiyon) bildirim özelliğini kullanmamızın bir anlamı yok sanırım.

## Ön plan, arkaplan ve kapalı durumları nelerdir?

Bir bildirimi ele alırken, uygulamanız o anda üç farklı durumda olabilir.

- **Ön plan (foreground)**: Telefonunuzda uygulamanız açık ve ekranda onu görüyorken ki durum.
- **Arkaplan (background)**: Telefonunuzda uygulama açık, fakat arkaplanda çalışıyor. Başka bir uygulamadasınız veya anasayfadasınız.
- **Kapalı (quit)**: Uygulama ölü durumda, ne ön planda ne de arkaplanda çalışıyor.

Bunları bilmekte fayda var. Gelen bildirimi açtıktan sonra bazı durumlarda farklı fonksiyonlar tetikleniyor. Ne yapmak istediğinize bağlı farklı bir tasarım geliştirmeniz gerekebilir. Kurulum sırasında yazdığım kodlarda açıklama satırları ile hangisinin hangi fonksiyonda verildiğini kısa da olsa anlattım.

## Yaşadığım sorunlar nelerdi?

Aslında sorun daha kod yazmadan başlıyor. **Kaynak eksikliği**. RNF’nin dökümanını okuduktan sonra kesinlikle bir eksiklik hissediyorsunuz. Girişeceğiniz iş size hiç güven vermiyor. rnfirebase.io üzerinden paylaştıkları dökümanı takip edip kurulumu yaptıktan ve Firebase konsolu üzerinden gerekli ayarlamaları yaptıktan sonra bildirimleri kullanmaya başlıyorsunuz. Fakat bu yaptıklarınız size hiç bir şey katmıyor. Sadece bildirim almak için gerekli kurulumu yaptınız.

Ben de kurulumları yaptıktan sonra platform bazlı sorunlar yaşadım. Android tarafta, bildirim geliyor fakat yukarıdan popup şeklinde kendini göstermiyor. Yalnızca üstteki durum çubuğunda uygulama ikonu görüyorsunuz. Bildirime tıkladıktan sonra bildirim mesajının detaylarını yakalayamıyorsunuz. Çoğu senaryoda bildirime tıkladıktan sonra uygulama içerisinde bir yönlendirme yapılması gerekir. Yönlendirme için gerekli veriyi yakalayamıyorsanız bildirimin bir anlamı kalmıyor. 🤷🏻‍♂️ RNF’de ‘bildirim’ (notification) ve ‘veri’ (data) mesajı farklı kavramlar ve her ikisinde farklı fonksiyonlar tetikleniyor. Bunları yönetmek zorlaşıyor. Bu tarz sıkıntılar sizi **react-native-push-notifications (RNPN) **gibi farklı kütüphaneleri kurmaya zorluyor. Fazladan uğraştığınız yetmedi bu sefer her iki paket birbirine bağlı kullanmaya başladınız. Ama sorunlar bitti mi bitmedi.. Bildirim mesajı gönderirseniz hem RNF paketi paketinden hem de RNPN paketinden bildirim alıyorsunuz. Bingo. Bir taşla iki kuş. (!) Bunu engellemek için bildirim türünde değil veri türünde mesaj göndermeniz gerekiyormuş vs vs. Bitti mi? Tabiki bitmedi. Ama daha fazla detaya girmeyeceğim. Şayet bu sorunları bir kısmı RNF ile ilgili iken, bir kısmı ise benim yaptığım kurulumun tasarımı ile ilgili olabilir. Sonuç olarak ne yeterli bilgi sahibi oldum ne de istediğim çıktıyı alabildim.

Bir süre uğraştıktan sonra duyduğum ama hiç kullanmadığım bir diğer bildirim alternatifiniz olan **OneSignal** denemeye karar verdim. Her şey hiç tahmin etmediğim kadar kolay oldu.

## OneSignal

Diğer tarafta OneSignal ise mükemmele yakın [dökümanları](https://documentation.onesignal.com/docs) ile size bir bildirimi tüm detayları ile (ikonu, başlığı, alt başlığı, resimi, sesleri, aksiyon butonları vs. vs.) anlatıyor. Tüm bunlar üzerinde dilediğiniz gibi düzenleme yapmanıza olanak sağlıyor. Hangi teknoloji ile çalışacaksanız (iOS, Android, React Native, Flutter, Unity, Ionic vs.) her biri çok güzel anlatılmış durumda. Bunlarla beraber yalnızca mobil bildirimler için değil, Web Notification için dilediğiniz web uygulamasında kurulum yapabilirsiniz, e-mail servisi olarak kullanabilirsiniz. CMS, CRM, Analiz uygulamalarınıza entegre ederek kullanabilirsiniz. [bkz](https://documentation.onesignal.com/docs/integrations)

Push Notification işlemlerine başlamadan önce OneSignal’ın dökümanlarını hatim etmekte fayda var. [Burada](https://documentation.onesignal.com/docs/push-notification-guide) bir bildirim hakkında tüm detayları çok güzel ve çok detaylı anlatmışlar. Sayfadaki tabloda verilen linklerin her birine uğrayarak (ya da sol tarafdaki menüden) okumanızı tavsiye ederim. Zira bildirimin özelleştirilmesi, sesler, linkler (farklı uygulama veya sitelere yönlendirmeler), ikonlar gibi detaylar hakkında daha fazla bildi sahibi olabilirsiniz.

OneSignal’i projemizde kullanmadan önce [buradan](https://documentation.onesignal.com/docs/dashboard) yönetim paneli (dashboard) hakkında ilgili dökümanları okumanızda fayda var. Panel üzerinden bir uygulama oluşturmanız, gerekirse (ki muhtemelen gerekicektir) uygulamanız için segment ve grup oluşturmanız gerekicek. Daha sonra kuruluma geçebilirsiniz.

En basit haliyle hem OneSignal hem de React Native tarafında bir kurulum yapalım.

### OneSignal App oluşturulması

OneSignal’e üye olup giriş yaptıktan sonra [app.onesignal.com](https://app.onesignal.com) adresine gidip yeni bir **New App/Website** oluşturma butonuna basın. Çıkan ekranda uygulama isminizi girip platform seçin. Ben şimdilik Android kurulumu ile başlayacağım.

Daha sonra çıkan modal ekranında sizden **Firebase Server Key** ve **Firebase Server ID** istiyor. Firebase üzerinde oluşturduğumuz Cloud Messaging uygulamasının ayarlarına giderek bunları alabilirsiniz (Firebase konsolunda uygulamayı seçtikten sonra **Ayarlar > Cloud Messaging sekmesi**).\*\* **Bunları OneSignal kurulum penceresinde girdikten sonra ileri diyin. Gelen ekranda **target SDK** olarak **React Native**’i seçin. Bize bir **App ID** veriyor. Bunu aşağıda kurulumu yaparken kullanacağız. **Bu ekranı kapatmayın.\*\* Şimdi React Native kurulumuna geçelim.

## React Native için kurulum

Önce aşağıdaki komutla OneSignal’ın Javascript paketini projemize dahil edelim.

```js
    yarn add react-native-onesignal
```

Daha sonra AndroidManifest.xml dosyasında .MainActivity ismine sahip <activity/> tag’ine android:launchMode="singleTop" özelliğini ekliyoruz.

```html
<iframe
  src="https://medium.com/media/af8a926d51a626f374ffd1ccb608f794"
  frameborder="0"
></iframe>
```

Burada ben kendi projemin Android Manifest dosyasını bazı detayları çıkartarak paylaştım. Şayet Splash Screen kullanıyorsanız. Ayarlarınızın buradaki gibi olması gerekebilir.

Daha sonra android/app/build.gradle dosyasının **en başına **aşağıdaki kod parçasını ekliyorsunuz.

```html
<iframe
  src="https://medium.com/media/4e11ee4d08db447a6518bbd0281faed8"
  frameborder="0"
></iframe>
```

Daha sonra bu sefer android/build.gradle dosyasında android taginin içerisinde compileSdkVersion vebuildToolsVersion numaralarının 26'dan yüksek olduğundan emin olun.

Android için tüm kurulum bu kadar 🙃

> iOS için RNF’den farklı olarak bir kaç kurulum daha gerekiyor. Şimdiye kadar ki adımlar ve iOS işlemleri için [bu linki](https://documentation.onesignal.com/docs/react-native-sdk-setup) inceleyebilirsiniz.

Daha sonra Javascript tarafta eklememiz gereken kodlara bakalım ve kurulumu bitirelim.

Benim uygulamamda App.js içerisinde stateless bir component var. Dolayısı ile aşağıdaki gibi bir tanımlama yaptım.

```js
<iframe src="https://medium.com/media/f10168f13e01332c583e80ad38fe5044" frameborder=0></iframe>
```

Bu kurulumu yapıp uygulamamızı çalıştırdıktan sonra OneSignal telefonunuzun bilgilerini kendisi çekip database’ine kaydediyor. Panel üzerinden bildirim göndermek için ekstra bir kurulum yapmanıza gerek yok. Güzel tarafı da şu; eğer yanlış bir kurulum yaptıysanız size nerede yanlışlık yaptığınızı gösteriyor. Kayıtlı telefonları görmek farklı bir pencerede yine [\*\*Dashboard](https://app.onesignal.com) > Uygulamanız > Audience > All Users\*\* kısmına gidebilirsiniz.

![](https://cdn-images-1.medium.com/max/2162/1*70bPVcViqnHJ91bqrIbaIw.png)

Telefonunuz başarılı bir şekilde kayıt edildiyse sol tarafta tik göreceksiniz. Eğer bir sorun varsa çarpı işaretiyle size hatayı söylüyor. Hatanın üzerine geldiğinizde daha detaylı bilgiye sahip olabilir ve çözebilirsiniz.

Bildirim gönderme işlemine geçmeden önce kullanıcılar kısmında herhangi bir kullanıcıyı test kullanıcısı olarak eklemek için sol tarafındaki Options butonuna basarak **Add to Test Users**’ı seçin. Bir **isim** girip **Add** butonuna basın. Şimdi bu kullanıcıya test bildirimi gönderebiliriz.

Şimdi OneSignal uygulama kurulum penceresine geri dönelim ve modal penceresinde **Check Subscribed Users** butonuna tıklayarak kurulumumuzun başarılı olduğunu doğrulayıp bitirelim. Aynı şekilde burada da kurulum sırasında yaşadığını hatayı görebilirsiniz.

![OneSignal uygulama kurulumu, son adım](https://cdn-images-1.medium.com/max/2000/1*7bktjPg2CLBhCwVn7A_vBw.png)_OneSignal uygulama kurulumu, son adım_

Kurulum başarı ise ilk bildirimleri göndererek OneSignal’i test edebiliriz. 🥳

Şimdi [\*\*Dashboard](https://app.onesignal.com) > Uygulamanız > Messages **sayfasına gelerek **New Push** butonuna tıklıyorum. New Message ekranında bildirim başlığı ve içerik mesajını girdikten sonra sağdaki telefonun altındaki **Send to Test Device** butonuna tıklayın. Çıkan modal penceresinde **hedef cihazı/cihazlar**ı seçerek **Send\*\* butonuna basın ve gönderin.

Bildirim geldi.

![](https://cdn-images-1.medium.com/max/2000/1*1HuXtK2G3RtEM8UdJmZFJg.png)

Üzerine tıkladıktan sonra onOpened fonksiyonu çalıştı ve ekrana alert mesajı ile bildirim mesajını gösterdi.

![](https://cdn-images-1.medium.com/max/2000/1*QupMdtzOy5cFQHI71Pr4qQ.png)

Basitçe OneSignal’in React Native ile kurulumu bu kadar. [Buradan](https://documentation.onesignal.com/docs/mobile-sdk-setup) diğer SDK’lar ile nasıl kurulum yapıldığını. [Buradan](https://documentation.onesignal.com/docs/push-notification-guide) bildirimin nasıl özelleştirileceğini öğrenebilirsiniz. OneSignal kullanmasanız bile bu dökümanlar ile bildirimler hakkında epey bilgi sahibi olmak mümkün.

Şimdilik bu kadar. Okuduğunuz için teşekkür ederim. Herkese iyi günler.

> #EvdeKalın😊


OneSignal in, Firebase out.


<2019></2020>

Merhaba 🙌🏽 Yine yoğun, dolu dolu geçen bir yılı geride bıraktık. Her yıl olduğu gibi bu yıl başında da yazımı eksik etmek istemedim. Artık bir gelenek haline geldi benim için. Aslında bakarsanız bir yandan da faydasını görüyorum diyebilirim. Hem bu ana kadar neler yaptığıma bir bakış atma şansım oluyor hem de kendime yeni hedefler koyup bunlar için yola koyulmak adına kendimi motive ediyorum. [2019](https://ozturkenes.com/blog/ikibin-ondokuz)'da neler yaptığıma bir bakarak başlayayım;

# Yamaç paraşütü 🚀

Önceki yazıda olduğu gibi konuya tutkunu olduğum yamaç paraşütü ile başlayacağım. 🤩

Mayıs ayında Sakarya Üniversitesi Yamaç Paraşütü Topluluğu bünyesinde yamaç paraşütü başlangıç eğitim verdik. Şimdiye kadar gerek topluluk gerekse uçuş okulumuz Fenomen Air Sports'un eğitimlerinde yardımcı eğitmenlik yaparak bir çok öğrencinin yamaç paraşütü ile tanışmasına vesile olduk. Bu sefer farklı olarak teorik eğitimleri topluluk başkanımızla beraber anlattık. Güzel bir eğitim oldu.

![Başlangıç eğitimi teorik dersi anlatırken](/blog/teorik-anlatirken.jpeg)

Geçen yıl bu konuda belirlediğim hedeflerin hepsine ulaştığımı söyleyebilirim. Yine şehir şehir gezip uçtuğumu söyleyemem ama Sakarya'da sıklıkla uçmanın yanında bir kaç defa Ölüdeniz'e gidip uçuşlar gerçekleştirdim.

![Ölüdeniz AirGames'ten bir uçuş :)](/blog/paragliding-oludeniz.jpeg)

Yamaç paraşütü **akrobasi pilotu** olmak en büyük **hedefim.** 🎯 Bunun için gerekli ekipmanı tamamlayıp uçuşlarıma odaklanma fırsatı buldum. Yamaç paraşütünde akrobasi en masraflı dal desem yalan olmaz. Getirisi olmayıp aksine malzemeleri ve eğitimleri açısında masrafı diğer dallara göre daha fazladır. Bunların büyük bir kısmını 2019'da tamamladım. 2020 yılında bu konudaki hedefim uçuşlara odaklanmak, bol antrenman yapmak ve en az 5 akrobasi manevrasını iyi düzeyde yapacak seviyeye gelmek. Dilerim ki istediğim gibi ilerleyebilirim.

📹 Bunların dışında bu konu ile ilgili videolar hazırlamak bir diğer planım. Yamaç paraşütü konusunda çok kısıtlı video içerik var. Bu konuda hem bilgilendirme hem de eğlence amaçlı videolar çekip bir kanal oluşturmak güzel olurdu. Vaktim olursa böyle bir şeyle de ilgilenmek istiyorum.

# Yazılım 👨🏻‍💻

Mesleki anlamda gerek okul gerek iş yerinden dolayı en yoğun yılımı geçirdim. Üniversitedeki son güz dönemine başladım. Okulumun bitmesine hem üzülüyor hem de seviniyorum. Öğrencilik güzel şey. Özellikle ilgili alanda çalışıp kendini geliştirme fırsatınız varsa hem donanımlı mezun olma fırsatını yakalayabiliyor, hemde bunların yanında öğrenci olmanın keyfini çıkartıyorsunuz. Ama kesinlikle çok yorucu oluyor. Beni okulun bitmesini istememe sebep olan şey tamamen bu yoğunluk ve bunun getirdiği yorgunluk.

![Şirketteki çalışma masam](/blog/casemice-calisma-masasi.jpg)

[Casemice](https://casemice.com) firmasında 10 Ocak'ta 2. yılımı bitirdim 🥳 Bu yıl da çok güzel projeler çıkartma fırsatım oldu. Burada eğlenceli bir çalışma ortamına sahip olduğum için şanslı hissediyorum.

## Neler yazdım ⌨️

Bu yıl benim için **React** ve **Django**'nun yılıydı. React ile iş yerinde çok sayıda proje çıkarttım ve çıkartmaya devam ediyorum. Tabiki mobil tarafta **React Native** de buna dahil. Bunlar dışında kendi projelerim oldu. Casemice'ta back end tarafta Django kullanıyoruz. Bende projelerde gördükçe ne kadar kullanışlı, kolay ve performanslı bir çatı olduğunu görüyordum. Ve başladım Django öğrenmeye. İş projelerinde olmasa da kendi projelerim için admin panel ve web servisleri Django ile yazmaya başladım. Gerçekten kullandığım en basitleştirilmiş çatılardan biri. Çok kısa sürede hem yönetim paneli hem web servis yazmanız mümkün. Dolayısı ile Django'yu çok sevdim. Yakın zamanda da React Native + Django kullandığım bir profesyonel projeyi çıkartacağım. Bu da benim için bir tecrübe oldu/olacak. (Bununla ilgili bir yazı gelebilir 🤐)

Geliştirdiğim projelerden beni en çok etkileyen şirket bünyesinde geliştirdiğimiz [İnme 112 🚑](https://apps.apple.com/us/app/i-nme-112/id1479159146) uygulaması oldu. Sağlık bakanlığı tarafından istenen ve yayına alınan uygulama inme vakalarında 112 acil ekibinin en yakın inme merkezine yönlendirilmesi amacıyla kullanılan uygulama. Şu an Bolu ve Düzce şehirlerinde kullanılmaya başlandı. Acil ekiplerinden güzel geri dönüşler aldık. Uygulama farklı haber platformlarına da çıktı (mesela 🙃). Bunları görmek ve olumlu dönüşler almak uygulamayı yazanlar olarak oldukça motive edici. Ve tabiki uygulamayı React Native ile geliştirdim. 👊🏽

Bu yıl da yazılım konusunda ilgilenmek istediğim bir kaç popüler konu var. Bunlardan bazıları **serverless uygulamalar, machine learning, blockchain, dev ops araçları.** Hepsine vakit ayırıp proje geliştirmek kolay olmayabilir ama en azından bilgi sahibi olmak adına bu gibi konular üzerine yoğunlaşıp bilgi ve tecrübe sahibi olmak istiyorum. 🎯

# Dahası

📝 Yazmak. Geçen yılın yazısında da böyle bir başlığa yer vermiştim. Orada şöyle bir cümle geçiyor. **"Bloguma baktığımda bu yıl neredeyse hiç yazı yazmadığımı fark ediyorum. Okuduğum, yazdığım, öğrendiğim şeyler hakkında daha fazla yazı yazıp paylaşmak istiyorum."** Ne yazık ki bu yazıda da aynısını söylemek durumundayım. Bu sefer yüzüm biraz kızarık. 2019'a baktığımda 3 yazı yazdığımı görüyorum. Önceki yılın aynısı. Bunu biraz daha arttırabilirim. Bu konuya vakit ayırıp ilgilendiğim alanlar ile ilgili güzel yazılar çıkartabilirim diye düşünüyorum. Bilgi paylaştıkça çoğalır derler. Bildiğimizi paylaşmamız gerek. 🙌🏽

📘 Kitaplar. Bununla ilgili hedefimi yılın 2. yarısında biraz gerçekleştirdim diyebilirim. Kitap okuma alışkanlığı kazanmak zor. Biraz teşvik etmesi amacıyla [Goodreads](https://www.goodreads.com/user/show/102775572-enes-zt-rk) hesabı açtım kendime. Burada okuduklarımın/okumak istediklerimin kaydını giriyorum. Kitap okudukça buna daha fazla ihtiyacım olduğunu görüyorum her kitapta. Yıl sonuna iki ay kala 4 kitaplık bir hedef koymuştum. Bu kitapların 3'ünü okudum. Dördüncüsünü ise şu an okuyorum. Kitaplar konusundaki motivasyonumu kaybetmesem benim için yeterli. Güzel okuma listeleri beni bekliyor 📖 👀

✅ Yapılacaklar. Yukarıda anlattığım ve hedeflediklerim dışında daha ufak, eğlence amaçlı yapılacaklar listesi hazırladım kendime. X kişisinin konserine git, hiç yapmadığın Y sporunu yap gibi. Bunlar da bunca yoğunluğun arasında güzel anılar katacağını düşündüğüm ve geriye baktığımda hiç yapmadım demek istemediğim şeyler olacak. **Hepimizin vardır yapmak isteyipte bahanelerin arkasına saklandığı şeyler. Hayat kısa, fırsatımız varken yapmak gerek.** 🥳

## Son olarak

Yazımı bu sefer yıl başında paylaşamadım. Şu an ocak ayının son günü. yoğunluktan ve araya iki kez üst üste hastalık girdiği için ilgilenemedim ne yazıkki. Fakat gördüm ki 2020'ye herkes çok motive girmiş durumda. Herkesin bu yıl yapmak istedikleri ile ilgili büyük küçük hedefler/planlar paylaştığını gördüm. Bunu görmek bile çok güzel ve motive edici bir şey. Çevrenideki yakın/uzak herkesin bir planı bir hedefi olması ve bunu paylaşmaları çok güzel. Umarım, yapanın kendisine ve ülkemize katkısı olan tüm planlar/hedefler bir bir gerçekleşir bu yıl.

> Sağlıklı, huzurlu ve mutlu yıllar!


2020

Ted Gibi Konuş


![webpack-gzip-nginx](https://cdn-images-1.medium.com/max/800/1*L3daQ61HYcBYkhV9b5-8bw.png)

# Webpack ile Gzip sıkıştırması ve Nginx server üzerinde sunmak

Merhaba, bu makalede geliştirdiğimiz Webpack kullanarak javascript projesini nasıl sıkıştıracağımızı ve sıkıştırdığımız bu dosyayı Nginx sunucu üzerinde nasıl sunacağımızı göreceğiz.

Öncelikle geliştirme tarafında Webpack’e gerekli pluginleri ekleyerek başlıyorum. Ben sıkıştırma işlemi için iki farklı plugin kullandım. **UglifyJSPlugin** ve **CompressionPlugin**. UglifyJs almış olduğu js dosylarını herhangi bir encoding yapmadan sıkıştırıyor. Ben 3MB’lik dosyaları ~800KB’ye kadar düşürdüğünü gördüm. Compression plugin ise almış olduğu js dosyalarını encoding işlemi yaparak ekstra bir sıkıştırma yapıyor. Fakat çıktı olarak .gzip uzantılı bir dosya üretiyor. Tahmin edersiniz ki bu dosyayı tarayıcımızın okuyabilmesi için decode edilmesi gerekli. **Ve dolayısı ile web sitemizin bir sunucu üzerinde koşuyor olması gerekli.**

Gerekli ayarları yapmaya başlayalım.

Sıkıştırma işlemini yapmak için `uglifyjs-webpack-plugin` ve `compression-webpack-plugin` paketlerini projeye eklememiz gerekli.

```js
yarn add compression-webpack-plugin uglifyjs-webpack-plugin -D
```

Sıkıştırma için gerekli Webpack ayarları:

Ayarlarımızı yaptıktan sonra projeyi `production` modda çalıştırın.

```js
    yarn run prod // "prod": "webpack --mode=production --config webpack.config.js"
```

Bundle dosyalarımızın içine aynı isimli .js ve `.js.gz` uzantılı bir dosyalar
olacak. Bunlar bizim sıkıştırılmış dosyamız. **İki dosyayı da sunucumuza
yüklememiz gerekli. **Fakat Html dosyamıza script dosyamızı eklerden** sadece
.js uzantılı dosyayı ekleyeceğiz.** Yani:

```html
<script type="text/javascript" src="static/bundles/main.bundle.js.gz"></script>
//Yanlış

<script type="text/javascript" src="static/bundles/main.bundle.js"></script>
//Doğru
```

Benim örneğimde toplamda**~2.5MB**’lik bir bundle dosyasını **Uglify JS ile
~600KB’ye** kadar,** compression-webpack-plugin ile ~170KB**’ye kadar indirmiş
oldum.

> ÖNEMLİ: Sıkıştırmış olduğumuz dosyayı kullanabilmeniz için projenizin bir sunucu
> üzerinde servis edilmesi gerekli. Yani .gz uzantılı dosyayı bir .html sayfasına
> kaynak olarak eklerseniz istediğiniz sonucu alamayacaksınız.

Benim örneğimde bu proje Nginx server üzerinde servis ediliyor. Fakat gzip dosyamız için gerekli ayarları **nginx.conf** dosyası içerisinde belirtmemiz gerekli. nginx’in kurulu olduğu dizine gidip (/etc/nginx) aşağıdaki komutla düzenleme işlemini yapıyorum.

```js
    nano ./ngnix.conf
```

Yorum satırı halinde duran gzip ayarlarını aşağıdaki şekilde düzeltelim.

Kaydedip çıktıktan sonra server’i yeniden başlatın.

```js
    services nginx restart
```

İşlem tamam.

Hepsi bu kadar. Siteyi açtığımda Console’da Network sekmesine gelip indirilen dosyayı görebilirsiniz.

172 KB, harika mı ne 😋

![bundled-size](https://cdn-images-1.medium.com/max/800/1*l-ZlwXLmYl1GgXXWfPbQnw.png)

Okuduğunuz için teşekkürler. Sevgilerle..

**Kaynaklar:**

- https://medium.com/tag/javascript?source=post
- https://medium.com/tag/gzip?source=post
- https://medium.com/tag/webpack?source=post
- https://medium.com/tag/nginx?source=post
- https://medium.com/tag/compress?source=post

### [Enes Ozturk](https://medium.com/@enes.ozturk)

Paragliding Pilot - Software Developer


Webpack ile Gzip sıkıştırması ve Nginx server üzerinde sunmak

Webpack Gzip Nginx


Merhaba sevgili JS sevenler 😜 Bugün React ile geliştirme yapabilmek için bir front-end proje kurulumu yapacağız. Projemizde amacımız front-end geliştirme araçlarını kullanarak tüm konfigürasyonun elimizde olduğu bir yapı oluşturmak. Başlamadan önce neleri öğreneceğimize bir değinelim:

- Basit bir Node JS projesi oluşturma
- Webpack kurulumu
- Babel kurulumu
- React kurulumu
- Çıktımızı bir HTML sayfasına yazdırmak.

Şimdi hazırsak kuruluma geçelim.

Öncelikle cihazımızda güncel **Node JS** ve **npm** paket yükleyicisinin olduğundan emin olalım 🤔

Best friendlerimizden olan terminali açıyoruz. Bir klasör oluşturup içeri dalmakla başlıyoruz işe;

```js
mkdir myproject
cd myproject
```

Bir de, _yazdığımız React kodlarının bulunduğu_ `src` isimli bir alt dizin oluşturuyorum.

```js
mkdir src
```

Şimdi bir node js projesi başlatabiliriz. Bunun için aşağıdaki komutu giriyorum.
_'-y' kullanarak bana soracağı soruların hepsine evet diyerek geçiyorum._
Dilerseniz siz kullanmayıp bu soruları cevaplayabilirsiniz.😒

```js
npm init -y
```

Şimdi ilk paketlerimizi yüklemeye hazırız.

## Webpack Kurulumu

Webpack front-end geliştiricileri için vazgeçilmez paketlerden bir tanesi. En büyük amaçlarından **biri** _yazdığımız kodları (js, css veya türevleri) tarayıcımızın anlayacağı kodlara çevirip bize sunması._
İster React yazıyor olur ister başka bir library veya framework, Webpack’i kullanmak geliştirme açısından size büyük avantaj sağlayacaktır.

Aşağıdaki komutumla `Webpack` ve `Webpack-cli` paketlerini yükleyerek Webpack’i projeme dahil ediyorum.

```js
yarn add Webpack Webpack-cli —d
```

Daha sonra `package.json` dosyamıza aşağıdaki kod bloğunu ekliyorum.

```js
"scripts": {
	"dev": "Webpack --watch --mode=development --config Webpack.config.js",
	"prod": "Webpack --mode=production --config Webpack.config.js"
}
```

Webpack’i yükledik. Fakat onun için ufak bir kurulum yapmamız gerekecek. Bu işleme diğer gerekli paketlerimizi de yükledikten sonra devam edeceğiz.
Oluşturulan package.json dosyasını kontrol ederek işlemin başarılı olduğunu görebilirsiniz.

Sonraki adım olarak uygulamamızın çıktısı için bir klasör oluşturmak.
Proje dizinimizde şu komutları giriyorum:

```js
mkdir dist
cd dist
```

Klasörü oluşturduktan sonra geliştirme sürecinde uygulamamızı izleyebileceğimiz bir HTML dosyası oluşturup js çıktımızı içine import ediyoruz.

```js
touch index.html
```

Html dosyamızı aşağıdaki kod satırları ile doldurabiliriz:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width= , initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>React Webpack Babel Project Setup :d</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="./js/main.js"></script>
  </body>
</html>
```

Burada `body` tagı içerisindeki `app` id'sine sahip div bizim için önemli. Yazdığımız react kodunu bu div içerisine gömeceğiz.

Son olarak ana dizine dönmeyi unutmayalım :p

```js
cd ..
```

## Babel Kurulumu

React bileşenlerini (component) yazarken çoğunlukla javascriptin ES6 standardı ve üstünü kullanıyoruz. Fakat sorun şu ki internet tarayıcılarımız bu standartlar ile yazılmış kodların tamamını anlamakta zorlanıyor. Babel ise tam bu noktada bizim büyük bir ihtiyacımızı karşılıyor. Yazdığımız React kodunu tarayıcıların anlayacağı dile çeviriyor. Bunu yapmak için Babel'i Webpack vasıtası ile kullanacağız.

Bunun için önce gerekli Babel paketlerimizi yükleyelim:

```js
npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
```

Şimdi Webpack kurulumuna geçmeden önce ufak bir Babel kurulumu yapacağız. Proje dizinimizde `.babelrc` isimli bir dosya yaratalım.

```js
touch.babelrc
```

Ve içerisine, Babel'in onları kullanması için, indirdiğimiz paketleri atayalım.

```js
{
	"presets": [
		"@babel/preset-env",
		"@babel/preset-react"
	]
}
```

Şimdi hazırsak basit bir Webpack kurulumu ile devam ediyoruuz :d

```js
touch webpack.config.js
```

Ve başlıyoruz içini doldurmaya:

```js
const path = require('path')

module.exports = {
  context: __dirname,
  entry: {
    main: './src/index'
  },
  output: {
    path: path.resolve('./dist/js/'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.jsx|js?$/, exclude: /node_modules/, loader: 'babel-loader' }
    ]
  }
}
```

Kurulumumuz tamam. Biraz son aşamada ne yaptığımızdan bahsedeyim. Önce entry objesi içinde ana .js dosyamızın yolunu verdik. Webpack burada entry olarak verdiğim dosyanın çıktısını output objesi içinde verdiğim yola, yani önceden oluşturduğum `dist` dosyasının içine yazacak.

Bu yazma işleminden önce `transpilling` dediğimiz ES6'dan ES5'e çevirme işini nasıl yapıyor? Tabiki `module` objesi içinde tanımladığım `rules` ile. Burada Webpack'e `.jsx` veya `js` uzantılı dosyaları `babel-loader` paketi ile transpile etmesini söylüyoruz.

Şimdiye kadar gayet güzel gidiyoruz. Webpack ve Babel kurulumu tamam. Peki ne kaldı geriye? Tabiki adam gibi adamlardan React. Canım React :d

Hemen yüklüyoruz serii:

```js
npm install react react-dom --save-dev
```

daha sonra

```js
cd src && touch index.js
```

komutu ile basit bir js dosyası oluşturarak React kodumu yazmaya başlıyoruz.

```js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

export default class Index extends Component {
  render() {
    return <div>Whats up my niggas!</div>
  }
}

ReactDOM.render(<Index />, document.getElementById('app'))
```

Evveeet sayın dostlarım, hazırsak ilk komutumuzu çalıştırarak çıktımızı alalım ve tarayıcımızda sonucu görelim. Bunun için tek yapmamız gereken

```js
npm run dev
```

komutunu çalıştırıp html dosyamızı tarayıcımızda açmak.

Dikkat ederseniz Webpack index.js dosyasını dönüştürdükten sonra dist/js yoluna main.js isminde çıktısını yazdı. Temel amacımıza ulaşmış olduk.

Bu yazımızda Webpack'in Babel ile işbirliği yaparak React'ı nasıl compile ettiğini ve nasıl çıktı alabildiğimizi gördük. Elbette bize sağladığı yararlar bunlar ile bitmiyor. Sayısız kullanım şekli mevcut. Daha etkili bir geliştirme ortamı için gerekli plugin ve kodlama örnekleri görebileceğimiz sonraki yazım için takipte kalın :) Sevgiler ✋


React + Webpack 4 + Babel 7 proje kurulumu


<2018></2019>

Merhaba, 2019'a henüz girmişken geçtiğimiz yıllarda yazdığım gibi ([2017](/yeniyil/2016/12/30/ikibinonyedi/), [2018](/yeniyil/2017/12/31/ikibinonsekiz/)) bu yıl da geride bıraktığımız yıla dönüp kendi adıma biraz anlatayım dedim..

# 2018

Geçtiğimiz iki yazıya baktığımda son üç yıldır aynı durumun içinde olduğumu farkediyorum. Yine final haftasının ortasında girdik yeni yıla.
Aslında bir şey farkedeceğinden değil ama ister istemez sınavların getirdiği heyecan veya kaygılarla böyle güzel bir anı gereksiz bir stresle geçirmiş bulunuyoruz. Her neyse, 2018'de yine bir çok güzel şey yaptığımı söyleyebilirim. Şöyle başlayayım;

# Yamaçparaşütü

![airgames-2018](/blog/airgames-2018.png)

En büyük tutkularımdan biri olan yamaç paraşütüne bu yıl da istediğim şekilde ilerleme kaydettim diyebilirim. Bu spordaki 3. ve en yoğun yılımdı.
Ağırlıklı olarak ileri seviye pilotluk eğitimlerine (P4 - P5) devam ettim. Bu eğitimler için yine farklı şehirlerdeydik. Ocak ayında Denizli Pamukkale'de bir başlangıç eğitmi ile yeni pilot arkadaşlar yetiştirdik. Travertenler ve hemen arkasındaki antik kentin üzerinde uçmak harikaydı. Bir haftalık bir kamptan sonra Sakarya'ya geri döndük ve burada yeni eğitimlere devam ettik. Temmuz ayında tekrar Pamukkale'ye gittik ve burada P4 eğitimi dahilinde bolca termik antrenmanı yaparak yüksek irtifalarda uçtuk.

![pamukkale-yukaridan](/blog/travetenler-antikkent.jpg)

Daha sonra Eylül ayında Kayseri'ye giderek burada P5 eğitimine devam ettim. Bu eğitimde amaç termik hava akımlarını kullanarak çıkılacak en yüksek irtifaya çıktıktan sonra rüzgarı arkanıza alarak gidilecek en uzak mesafeye gitmek. Hava şartları istediğimiz gibi değildi ama iyi antrenmanlar yaptık. Buradan Kahramanmaraş'a geçtik ve uçuşlara burada devam ettik. Kahramanmaraş'tan kalkıp Gaziantep'e, hatta Şanlıurfa'ya uzanan uçuşlar yapmak mümkün. Bende 60KM ve 30KM'lik uçuşlarla eğitimimi tamamladım.

Hem [Fenomen Air Sports](http://www.fenomenairsports.com/) hem de [Saü Ypt](http://instagram.com/sauypt) olarak dolu dolu zamanlar geçirdik. Gerek yerde gerekse havada çok mesafe kat ettik. Yeni insanlarla tanışıp çok güzel dostluklar edindik. Unutamayacağımız, çoğunlukla güzel bazen de zor anlar yaşadık. Bu sporun içinde bulunmaktan ve şuan beraber olduğum insanlarla olmaktan çok mutluyum.

Bu sporu çok seviyorum. Kesinlikle de hayatımın devamında sürekli uğraşacağım asla bırakmayacağım uğraşlarımdan biri olmasını istiyorum. Sevdiğim şeylerde sınırları zorlamayı hep denemişimdir. Yamaç paraşütünde de her ne kadar hali hazırda adrenalinli bir spor olsa da bunu zirvede yaşamanın yolları var. Akrobasi. Yamaç paraşütü akrobasi pilotu olmak hedeflerimden bir tanesi ve bu yıl kendimi buna vermek istiyorum. Gerek eğitim süreci, gerekse de yeni malzeme alma ihtiyacından dolayı maddi olarak zor bir şey olacak. Özellikle öğrenciyseniz. Ama elimden geleni yapacağım tabiki. Umuyorum ki bu alanda hedefime ulaşırım.

# Yazılım

![sau-pembe-gokyuzu](/blog/sau-pembe-gokyuzu.jpg)

Geçen yılın sonlarına doğru bir tweet atmıştım. Ne yazık ki şuan Tweeter profilimi dondurduğum için onu gösteremiyorum. Şöyleydi; React'ı yeni tanımaya başlamıştım ve denemeler yapıyordum. Daha sonra başka bir konu ile ilgili Stackoverflow'da bir hata araması yaparken sağ tarafta, yurt dışında, remote çalışabileceğim React, React Native geliştirici arayan şirketlerin reklamları vardı. Bende bunu üzerine "Aman he iyi ki bir react ile ilgili araştırma yaptım, hemen react developer olduk." diye resimli bir tweet atmıştım. Evet React developerım şuan :D Hayat ne garip, Ocak ayının 10'unda yine Sakarya Üniversitesi Teknokentte bulunan başka bir firmada tam zamanlı olarak çalışmaya başladım ve yaptığım iş React & React Native ile yazılım geliştirmekti.

React ile 5'ten fazla web projesi 1 tane mobil uygulama geliştirdim. Ve geliştirmekten mutluluk duydum. Yazılım geliştirirken hep, bunu nasıl daha iyi yazarım diye araştırmayı sevmişimdir. Bu yüzden yazmanın yanında makaleler okumayı, son gelişmeleri takip etmeyi, daha bilgili insanların fikirlerini almayı alışkanlık haline getirdim diyebilirim.

Benim için en güzel olaylardan biri bu şirkete geçmekti. Burada çok daha güzel bir çalışma ortamı, eğlenceli iş arkadaşları ve iş sahibi, kendimi geliştirebileceğim projeler vs bir çok güzel şey ile karşılaştım. İnsanın çalıştığı işte mutlu olması kadar güzel bir şey yok. Çünkü bu şekilde gerçekten çalışmış gibi olmuyorsunuz.

Mezun olmama bir sene kaldı. Sakarya'da olduğum süre müddetçe burada çalışmak istediğimi rahatlıkla söyleyebilirim. Ama önümüzdeki yılın sonunda çalışmak istediğim yer biraz olmak istediğim şehirle alakalı olacak sanırım. Bu konu her ne kadar kafamı meşgul etse de bunu çok da fazla düşünmek istemiyorum. Bu yıl ki amacım geçen yıllarda da olduğu gibi kendime odaklanıp en donanımlı şekilde yılı, dolayısı ile okulumu tamamlamak olacak. Hem sizin hem benim, yolumuz nereye çıkarsa çıksın, pişman olmayacağımız, aksine mutlu olacağımız kararlar vermemiz dileği ile.

## Peki neler yapmadım?

2018'e dönüp baktığımda gerçekten dolu dolu geçmiş bir yıl görüyorum. Fakat bunların yanında benim için önemli olup, yapmak isteyip te yapamadığım bazı şeyler var. Hepsini olmasa da bir kaç tanesini söyleyebilirim. Bloguma baktığımda bu yıl _neredeyse hiç yazı yazmadığımı_ farkediyorum. Okuduğum, yazdığım, öğrendiğim şeyler hakkında daha fazla yazı yazıp paylaşmak istiyorum. Okumak demişken bu yıl _okuduğum kitap sayısı hayli az_. Bunun sayısını arttırmak istiyorum.

## Başka?

Genel olarak beni ben yapan şeyleri kısa özetlerle anlatmış bulundum. Elbette her biri için yazı yazabilecek kadar dolu dolu geçti hepsi. Ama bir tanesinden hiç bahsetmedim. Arkadaşlarım. Topluluğumuzdan, uçuş okulumuzdan, işten vs bir çok güzel arkadaşlıklar edindim. Onları gerçekten seviyorum. Beni buraya bağlayan en büyük şeylerin başında sanırım onlar (canım tostlarım ve diğerleri..) gelir. Çünkü ailem gibiler. Umarım yollarımız hiç ayrılmaz.

## Son olarak

Bundan sonra her ne kadar şu ana kadar çoktan yapmış olmam gerekse de kendime ileriye dönük hedefler koyup bunlar için çalışacağım. Şimdilik benden bu kadar. Görüşmek üzere..

> Sağlıklı, huzurlu ve mutlu yıllar!


2019


Merhabalar, bugün VS Code kullananlar için Docker eklentisi ile Docker’ı nasıl etkili ve hızlı kullanırız onu göreceğiz. Örnek proje olarak bir Node JS projesi kuracağız.

## Kurulum

Başlamadan önce sistemimizde Docker’ın kurulu olması gerekmekte, bunun için kendi sitesindeki [kurulum yönergelerini ](https://docs.docker.com/install/)izleyebilirsiniz. Ve tabii [VS Code](https://code.visualstudio.com/) kullanıyor olduğunuzu varsayıyorum.

VS Code’u açtıktan sonra eklentiler sekmesinden “Docker” yazıp aratarak kullanacağımız eklentiyi bulup indireceğiz. (Muhtemelen ilk çıkan eklenti olacaktır). Yükledikten sonra VS Code’u yenileyip devam ediyorum.

![](https://cdn-images-1.medium.com/max/2038/1*-Ifg8P1YU6_9gSxsP7jcBA.png)

Farkedeceksiniz ki soldaki ikonların arasına Docker ikonu da eklendi. Bu bizim Docker Explorer’ımız. Buradaki _Images_, _Containers_ ve _Registers_ sekmeleri ile sistemimizdeki image ve container’ları yönetebileceğiz.

![](https://cdn-images-1.medium.com/max/2044/1*K3eZYz9rIP7EosbNIVhmqw.png)

Ayrıca VS Code’a bu eklenti ile beraber yeni komutlar da eklenmiş oldu. Komut satırını açıp (F1) “_docker_” yazıyorum. Buradan bir kaç komutu görebiliriz.

![](https://cdn-images-1.medium.com/max/2038/1*Xsw-RKbaOP1Gh150uRC2Ig.png)

## Node JS

Docker eklentisini göstermek için basit bir Node JS uygulaması kullanacağız. Bunun için gerekli komutları terminal yardımıyla girip projemi oluşturuyorum.

![](https://cdn-images-1.medium.com/max/2976/1*bD_h47CMwHpxyVGer5Ct3A.png)

Daha sonra *index.js *dosyama gerekli kodları yazarak _express_ serverimi hazırlıyorum.

![](https://cdn-images-1.medium.com/max/2976/1*2O8ZwA49Jhj43vQuqTACCw.png)

**_project.json_** dosyamı da projemi başlatamak için kullanacağım komutu ekleyerek düzenliyorum.

![](https://cdn-images-1.medium.com/max/2976/1*sKDbXzrT6XDWayRxdgxm8Q.png)

Şimdi terminalden “**_npm start_**” komutunu verip **3000** portundan uygulamamızın başladığını görebiliriz.

Normal şartlarda docker kullanmak için aşağıdaki adımları izleyecektik:

- Dockerfile oluştur (veya docker-compose.yml).
- Docker komutlarını yaz (FROM, WORKDIR, ADD, EXPOSE, CMD).
- “**_docker build …_**” komutunu kullan.
- “**_docker run …_**” komutunu kullan.

Fakat kullanacağımız eklenti ile tek yapmamız gereken şey şu:

Komut satırını açıp(F1) “**_docker”_** komutunu girin ve ‘_Docker: Add Docker files to Workspace_’ seçin.

![](https://cdn-images-1.medium.com/max/2048/1*oYPgTPB_otPFFLILGFNPYQ.png)

Bize çalıştığımız platform ve port ile ilgili birkaç soru soracak. Bunlara cevap verelim. Node JS’i seçip devam ediyorum.

![](https://cdn-images-1.medium.com/max/2050/1*xoSfU9BGZgzqPSgFUUxOKw.png)

Daha sonra uygulamamızın hangi portu dinleyeceğini seçiyorum. _3000_ girip devam edelim.

![](https://cdn-images-1.medium.com/max/2048/1*dhbDeOfUgxko_9r5sm3JqQ.png)

Projemize .dockerignore, docker-compose.debug.yml, docker-compose.yml, Dockerfile dosyaları eklendi. Bunlar bizim image ve container oluşturmak için gerekli dosyalarımız. Eklenti tarafından otomatik oluşturuldu.

**_.dockerignore_** dosyası Docker’a image’i oluştururken hangi dosyaları görmezden geleceğini söyler.

**docker-compose.debug.yml** bize docker-compose komutunu çalıştırırken debug yapmamızı sağlayacak.

**docker-compose.yml** ise bizim docker servislerimizi yürütmek için kullanacağımız asıl dosya. Container’ımıza başka bir servis veya kaynak eklemek istediğimizde bu dosyayı düzenleyeceğiz.

![](https://cdn-images-1.medium.com/max/2976/1*gdcml3UN1qBEqMUvQ-P4nw.png)

Dockerfile dosyamız ise buradaki en önemli dosyamız. Projemizin kullanacağı environment’ler, kopyalanacağı dizin, kullanacağı port gibi bilgileri eklentimiz bizim için hazırlamış durumda.

![](https://cdn-images-1.medium.com/max/2976/1*h5QRSku8g29DX2AWoZKFhQ.png)

Şimdi Image’imi oluşturarak devam ediyorum. VS Code komut satırını açıp ‘docker’ yazın ve _Docker: Build Image_ komutunu seçin.

![](https://cdn-images-1.medium.com/max/2042/1*zVC-25BpBc5V5AJx8lL8EA.png)

Daha sonra bizden Dockerfile seçmemizi istiyor. Enter’a basıp devam ediyorum.

![](https://cdn-images-1.medium.com/max/2038/1*0wJNx5nZqFe5uOIrQz2_xw.png)

Devamında bizden bir tag yazmamızı isteyecek. Bizim için proje ismi ile bir tag oluşturacak. Bu sizin için uygunsa yine enter’a basıp devam edin. İsterseniz değiştirebilirsiniz.

![](https://cdn-images-1.medium.com/max/2048/1*_5gm_hOVVeSfN7ahAvZ-mA.png)

Aşağıdaki terminalde komutumuza ait logları görebiliriz.

![](https://cdn-images-1.medium.com/max/2048/1*qh3-PpsTb8yogp0_vqwYzQ.png)

Son olarak container’ımızı ayağa kaldırmak için gerekli komutları vermeliyiz. Tekrar komut satırımı açıp “docker run” komutunu veriyorum ve oluşturmuş olduğum _image_’i seçiyorum.

Terminalde şu çıktıyı göreceksiniz.

![](https://cdn-images-1.medium.com/max/2044/1*w8yAzyuNVRDSQpiWXsJL4A.png)

Dikkat ederseniz **_-p 3000:3000_** parametresi ile container’ın oluşturduğumuz sonucudaki 3000' sunucusunu birbirine bağlamış bulunduk. Şimdi **_localhost:3000_** adresine giderek uygulamamızı görebiliriz.

Dilersek image’imizi çalıştırma, container’ımızı başlatma-durdurma ve container’ın terminaline bağlanma gibi komutları Docker Explorer üzerinden de verebiliriz.

![](https://cdn-images-1.medium.com/max/2038/1*lpJZLMBJmWWNLNEiwTQb7Q.png)

![](https://cdn-images-1.medium.com/max/2038/1*IRKufdX6BkNkpV8Bvf4EHw.png)

VS Code Docker eklentisi ile Docker kullanımı basit haliyle bu şekildeydi. Farklı projelere göre eminimki farklılık gösterecektir. Herkese iyi çalışmalar..


VS Code için Docker eklentisi kullanımı

Docker ve VS Code


AirDesign’ın ileri EN-B kanadı Rise 3. Şirken Inn vadisindeki Interlake’nin yanında bulunmakta. Almanya’nın alplerinin kalbinde. Tasarımcı, eski yamaç paraşütü şampiyonu Stephan Steiger.

Kış boyunca kanadı test ettim. Kolombia, Meksika, Avusturalya gibi harika test konumlarına sahip değildim. Yani bu 15 saatlik bir incelemeden çok bir ilk bakıştı.

İlk denemem Fransa’nın güneyinde, ocak ayındaki kısa bir hike&fly denemesiydi. Fark ettiğim ilk şey kanadın ne kadar hafifi olduğuydu. Hafif (light) ve standart (normal) olarak iki versiyona sahip Rise 2'den farklı olarak bu versiyon sadece tek modelden oluşuyor.

Üst yüzeyinde Dominico 20 ve alt yüzeyinde Porcher Skytext 27 kullanıyor. Bu hafif bir malzeme ve köşelerinde bulunan stickerlar kanadı take-off’ta sürüklememeniz için sizi uyarıyor. Özenle kullanılması ve pürüzlü zeminlerde sürüklenmemeli. Kolonlar şık ve canlı. İplerin çoğu kaplamasız ve tüm ağırlık hissiyatı kanada optimize olmuş durumda.

Sonuç olarak hafif, ayrıca kompakt, iyi bir kanat. Rise 2 (L) 5.9kb, superlight versiyonu 4.6kb idi; Rise 3 (L) ise 4.6kg. Yeni tarz gibi gözüküyor, standart model kadar hafif. Ve tabiki AirDesign şuan öyle düşündüklerini doğruluyor.

## **İlk kalkış**

İkinci gözüme çarpan şey ise Rise 2'den daha uzun ve ince olması. Airdesign Rise 3'ü tasarlarken Rise 2'yi taslak olarak almadıklarını söylüyor. Aksine EN-D model olan Hero’dan (Ultra hafif yüksek performans kanat) kopma bir tasarıma sahip. Aspect Ratio değeri winglet teknolojisinden gelen değer ile 5.95 olmuş durumda. (Rise ve Rise 2 5.7 idi)

Winglet modasi geri döndü; ‘fikir’ diyor Airdesign, planlanan aspect ratio değerini büyütüyor, performansı arttırıyor ve ‘istikamet kararlılığını’ arttırıyor. Advance’nin meşhur kulaklarına nazaran bu daha çok kanadın kenarlarında yükselen kulak kapakçıkları gibi. Silüeti ise bir hipster’in bıyıkları gibi. Onlar, hava akışını yönetmek için oradalar. Bu sebeple sürükleme kanadın bu kısmında daha etkili.

Zayıf bir rüzgarda kanat kolayca organize oluyor ve ilk çekişte tepenize geliyor. Başımın üzerine geldiğini, oraya oturduğunu ve benden talimat beklediğini gördüm. Kısacası, kararlı uçuşta iki şey gözlemledim; Kendi öncellerinden daha çevik ve daha hızlı. Şaşırtıcı bir şekilde öyle! Bu kanat harika bir karaktere sahip. İniş için kolay bir yaklaşmadan önce iyi çalışmayan, derme çatma termaller arasında biraz kanatla oynadım.

![](https://cdn-images-1.medium.com/max/3254/1*H1ypUNLR0OVNyOQ_LNbv2g.png)

## **EN-B Konusu**

EN-B’nin geniş bir kavram olduğunu her zaman söyleriz. Bu kanat kasti olarak EN-B kategorisinin en üstüne konulmuş ve minimum orta seviye pilotlara hedeflenmiş durumda. Bunun anlamı; bu kanat eğitimden sonraki ikinci kanadınız değil! Bu, termik ve XC uçuş kanadı. Rise 3'e bakarsanız onu Gin Explorer, Nova Mentor Light serisi, Ozone Swift gibi kanatlarla karşılaştırabilirsiniz.

EN-B sınıfının en üst noktasında bir kanat seçmek bir çok pilotun şuan yaşam tarzı. Bu, daha fazla performansa çıkan bir merdiveni tırmanmak gibi bir durum değil.

Bu yüzden bu tarz kanatların marketi daha izanlı olabilir; onlarla uçan çoğu pilot fazla tecrübe sahibidir.

Bu kanat onları hayal kırıklığına uğratmayacak. Bir çok güncel teknoloji ile bir araya getirilmiş, gösterişsiz ve plastik üzerinde aşırı ağır olmayan trendlere sahip bir kanat.

Gözlerini EN raporunda aşağı indirirseniz büyük asimetrik kapanmalar ve spiral dalıştan çıkışta B’lerle ve temel olarak A’larla eş olduğunu görürsünüz. İlk bakışta herhangi bir zayıf noktası gözükmüyor.

![](https://cdn-images-1.medium.com/max/2000/1*eiABppcWC6kFveY1AqM2pg.jpeg)

## **Sonraki uçuş**

İngiltere’de saat 10'da soğuk bir şubat günü Kent sahiline Sibirya’dan esen rüzgarlar beni kucakladı. Buradaki tek pilot da vazgeçti ve kahve içmeye gitti, ama ben uçmak için çamurlu bir takeoff’a göz yumdum. Mekan 5 km’lik bir faleze sahip fakat uçmak için güçlü bir meltem rüzgarı gerektiriyor. Ben kalktığımda 25 km/h sabit bir rüzgar vardı.

A’lar ve C’ler ile yaptığım kalkışta ben kendimi aksiyonlu bir sıçramaya hazırlamıştım fakat kanat çok iyi geldi ve başımın üzerindeki hava akışı içinde kaya gibi durdu. Bir kravat oldu ve 3–4 kez pompaladım. Ama herşey şaşırtıcı bir şekilde kontrol altındaydı. “Kendine hakim bir kalkış davranışı.” diye düşündüm.

İki saat sonra Rise 3'e oldukça vurulmuştum. Hafif bir kafa rüzgarı ile falez oldukça güzel kaldırıcılar sunuyordu. Uçuş bölgesinin hissiyatı kaykay pisti gibiydi. Kaldıran yerlerde rampaları tırmanmak, en tepede sörf yapmadan önce veya yüksek irtifada martıların hattını takip etmek için öne açılmak gibiydi.

Kanadı bu koşullara kullanmak kusursuz ve Rise 2'den daha iyiydi. Düz, kademeli ve ne yapmak isteğine dayalı dinamik olabilen bir kanat. İstediğim yerde kolayca kullanabileceğim bir kanat olduğunu gördüm.

Speed barını itmek beni güldürdü. İlk yarım speed-bar bana anlık 10km/h verdi. Sonraki yarım GPS’mden okuduğuma göre +14km/h’ a çekti. (Bu bir EN-B için oldukça fazla) Yarım speed kullanarak ve rotamı düzeltmek için arka kolonları kullanarak güle oynaya havada oldukça vakit geçirdim.

Büyük kulak kapatmalar oldukça basit, konforlu ve stabildi (Big Ears’ı sevmeyen ve yapınca sapıtan Rise 2 üzerine bir geliştirme). Pitch (uç boyutlu eksende hava aracının y ekseninde yaptığı hareket. bkz: yunuslama) egzersizi yaparken gördüm ki kanat kolayca sabit pozisyona geri döndü. Kanadı daha fazla öne yatırmak istemedim.

Top-landing (tepe inişi) özellikle tekrar denemek istediğim şeylerden biriydi. Kendimi çok tutulmuş hissettim. Fren hattı ve kanat arasındaki bağlantı çok sabitti. Bazı EN-B kanatlarda olduğu gibi herhangi bir gecikme, salınım ve sendeleme olmadı. **Deneyimli pilotlar buna bayılacaklar; yeni pilotlar ise başta bunu fark etmeyebilirler.**

## Kış sonu

Avusturya’daki Stubai Cup etkinliğinde karlı, soğuk, arka rüzgar koşullarına bağlı bir kalkış yaptım. Düz kalkış oldukça yine şaşırtıcı bir şekilde kusursuzdu. Birkaç adım sonra kanat başımın üzerinde geldi ve tepeden ayrıldım. Sıfır sıkıntı.

Sonunda, İngiltere’nin “10 yılın en nemli Mart’ı”ndan sonra yaz güney İngiltere’ye geldi. İlk termaller oldukça ince ve zayıftı, kalabalık denemezdi. Bir kaç Zeno ile karşılaştım ve onlarla beraber döndük.

Dönüşler kesinlikle Rise 2'den güzeldi (ve çevikti). AirDesign, Rise 3'ü tanıtırken daha az fren kumandası kullanıyor gibiydi. ??

Devamında, bulduğum her termiği tırmanmaya çalıştım. Bu tarz uçuşlarda kanat altında kendinden emin olmalısın. Ve Rise 3 bu hissiyatı oldukça kolay bir şekilde verdi.

Kanatla son test uçuşum bir öğleden sonra termikli, 20 km/h esen bir gündeydi. Şimdiye kadar kanat bir EN-A ve EN-C’ler kadar kolay geldi.

Kalkış yaparken mutluydum. Yalnızca A ve C kolonlarını kullanarak ve frenlere dokunmadan, aşırı çekme ve agresif davranma ihtiyacı duymadan, kanat güzel bir davranış sergiledi. Düzgünce kalktım ve tırmanmaya başladım.

Speed basmak, güçlü termalleri tırmanmak, geri drift olmak, tekrar speed basmak — Bu kanat güçlü bir öğle sonrasının üstesinden iyi geldiği hissiyatını verdi.

## Sonuç

Rise 3 100% kullanılabilir performansı ile iyi bir kanat. Dönüşler güzel, eğim açısı dengesi güven verici ve hızlı. — aslında full speed ile uçarken kanadın hızı beni güldürüyor.

EN-B parantezinin başında, diğer güçlü kanatlar mükemmel kalkış davranışına sahiptir. Ve bu günlük kullanım için hafif bir yapı. Kısa uçuş süresi içinde kendimi kanada sabitlenmiş hissettim. Ve bu beni uçabileceğim her yerde kendimi geliştireceğimi hissettirdi: Zayıf rüzgarlı havadan güçlü havaya kadar.

Bana göre bu çok önemli. Sana güven verecek mi? Uçarken kanadı unutup yalnızca uçuşa odaklanabilecek misin? Kanadın tüm performansını kullanabilecek misin? İstediğin yere koyabilecek misin? Eğer evetse, kazanan sensin. Çünkü kendine güvenen pilotlar iyi uçar.

Tüm bunları kanadın hafif olduğu gerçeği ile birleştir. Ve bir çok pilot için her kutuya sığacak istediğin-yere-git kanadına sahipsin.

Yazar: Ed Ewing — Crosscountry 190

Çeviri: Enes Öztürk


Crosscountry dergisi 190. basımdaki yazı çevirisi

AirDesign Rise 3


Yamaç paraşütleri performans olarak tümüyle incelendiğinde şimdiye kadar harnesler hafife alınıyordu. Bu yazı, içinde Oxford Üniversitesi Aerodinamik Profesörü Adrian Thomas, Gin markasının danışmanı, Ozone’un tasarım şefi, ve Skywalk’un ar-ge müdürü Manfred Kistler’in de dahil olduğu birkaç uzmanın görüşlerini içermektedir.

Kortal Kanibal Race II üzerinde yaptığımız incelemenin bir parçası olan bu yazının ilerleyen bölümlerinde Kortel tasarımcısı Max Jeanpierre ile firmanın işi ve aerodinamikler hakkındaki araştırmaları üzerine boylu boyunca konuştuk. Kortel bazı karmaşık simulasyon ve modellerin doğruluğunu teyit etmek için bize önderlik etti ve programları üzerinde en etkili şekli hesaplamak için 24 farklı prototip yürüttüler.

## Temeller

Öncelikle onunla harness ne olursa olsun temelleri doğru anlamak üzerinde konuştum. Max “_Herhangi bir harnesin giriş açısı kesinlikle çok önemli._” dedi. “_Kesinlikle yatay pozisyon en iyisi ve ayaklar aşağı tarzda uçmak performansı yok eder._” dedi.

Açıkça görülür ki ayaklar aşağı oldukça sürtünme olacaktır. “_15 derecelik bir açıda, sürtünmenin yaklaşık 30%’unu harnesine eklemiş olursun._” dedi.

Bu, Advance’nin orjinal, en hafif harnesinin tasarımcısının 8 yıl önce söylemiş olduklarını doğruladı. — Fakat hala ayakları aşağı pozisyonda uçan bir çok pilot görüyoruz.

Ayaklarının bir nebze yukarıda olması aşağıda olmasından çok daha iyidir. 5 derecelik yukarı açıda sadece 5%’lik sürtünme oluşturursun. Çünkü harnesin ön kısmı bir geminin ön kısmı gibi hava akışını keser. Kollarımız ve başımız en çok sürtünme oluşturan elementlerdir ve ayaklarından daha fazla açıktadır.

“_Aslında kollarımız toplam vücudun oluşturduğu sürtünmenin 30% — 35%’ini oluşturur._” dedi Max. 12 ay önce ‘tabut posizyonu (coffin position)’ üzerine bir makale ön plana çıkardık. Bir çok yarışma pilotu kolları sıkışık süzülerek uçuyor.

## Sürtünmeyi azaltmak

Kortel’in hesaplamalarına göre arka kaporta sürtünmeyi 15% ile 20% arasında azaltmaktadır. İdeal bir uzunluk olduğu konusunda Skywalk ile aynı fikirdeler. — uzunluk herşey demek değildir en nihayetinde.

Aerodinamik için son söylediklerimiz üzerine Manfred Kistler bize, “_Hepsi doğru. Oturaklı harnessler kanadınızı öldürür. Ayaklar aşağı posizyonda en fazla ön yüzeye sahipsiniz._” dedi.

Max Jeanpierre bunun daha da ilerisine gitti. “_Koza harnesste ayaklarınımızı aşağı sarkıttığımızda oluşan sürtünme neredeyse test ettiğimiz bazı sürtünme kanalları ile aynı olduğunu gördük._” dedi.

Bu yaklaşık 4 kg-7 kg sürtünmeye eşit oluyor. Bu değer de standart harnesslerin oluşturduğu sürtünmenin yaklaşık iki katı. Max daha önce bunu 2.5kg — 3kg arasında hesaplamış.

İncelememizde Max bize harnesslerin “hava taşıtının yarısı” olduğunu anlattı. Harnesin sürtünmesini düşürdükçe ve kendini nispeten daha kaygan yaptıkça daha iyi süzüldüğünü fark edersin. Böylece bu, kanat profilinin açısını yassılaştıracak, böylelikle onu daha etkili kılacaktır.

Kortel normal, oturaklı bir harness ve aspect-ratio oranı 8:1 olan standart bir EN-B kanat üzerinde hesaplamalar yaptı. Gördüler ki kanat performansı arka tamponlu bir yarışma koza harnessinde fakat dikey bir oturuş ile 9:1 aspect-ratio’luk bir performans gösterdi. Aynı herness ile yatar pozisyona geçen pilot bu uçuş ile kanadı 9.3'lük bir performansa çıkardı. Daha sonra pilot kollarını saklar pozisyonda uçarak bir 0.3'lük artış daha yakalayarak 9.6 (9.6:1) puana çıktı.

Bu hesaplamalar 8:1'den 10.2:1' gelişim kaydeden Skywalk’unkilerden daha az iyimser olduğunu görüyoruz. İki şirkette harness şeklinin öneminin farkında.

Kask arkasında uzanan tampona ve yassı bir şekle sahip olan harnessler yataydan +10 dereceye kadar bir dizi sarkma açısında en olumlu sonuçları veriyor. Kortel bunun önemli olduğunu, çünkü uçarken doğal olarak açımızın dalgalandığını söylüyor.

Kortel’in ortadan kaldırdığı son mit ise yarış harnesslerinin daha hızlı gitmeye yardımcı olduğudur. Değiller. “_Tüm gelişme batma oranını azaltmaktan gelmektedir._” diyor Max Jeanpierre. “_İyi bir harness ile daha iyi süzülürsün, daha hızlı değil._”

Yazar: Hugh Miller — Crosscountry 190

Çevirmen: Enes Öztürk


Yamaç paraşütünde harnessler ve kaportalarının önemi hakkında

Harnessler ve Kaportaları; Performans Kazancı


Merhaba, 2018'e günler kala geçen yıl da yazdığım [gibi](/yeniyil/2016/12/30/ikibinonyedi/) bu yılda geride bıraktığımız yıla dönüp kendi adıma biraz anlatacağım...

## 2017

2017'ye nasıl girdiğimi hatırıyorum. Finallerin ortasındaydık. Değişen birşey yok, yine finallerin ortasındayız.
Ve maalesef bu çok kötü bir durum. Her ne ise. Farkettim ki 2017'de dilediğim bir çok güzel olayı yaşadım bu sene.
Biraz onlardan bahsetmek istiyorum..

## Yamaçparaşütü

![oludeniz](/blog/oludeniz.jpg)

En büyük tutkularımdan biri olan yamaçparaşütüne oldukça yoğunlaştım ve kendimi geliştirdim. Ve geliştirmeye devam ediyorum. Geçen seneki yazımda bahsettiğim THK'daki eğitimimden sonra okula (Sakarya'ya) döndüm. Sakarya'da Türkiye'nin en iyi ve önemli yamaçparaşütü okulu olan [Fenomen Air Sports](http://www.fenomenairsports.com/) bulunuyor. Burada orta seviye pilotluk eğitimi (P3) almak istiyordum. Yine geçen yazıda bahsettiğim Kocaeli yamaçparaşütü ekibi ile bu eğitime başladık. Bu sebeple hızı bir şekilde malzeme arayışına girdim. Tabiki öğrenci hali sıfır malzeme almak çok zor. Bende ikinci el malzeme bakmaya başladım ve kendime bir yamaçparaşütü takımı topladım. Bu yamaparaşütü, harness, kask ve yedek paraşütten oluşan bir takım. Baktığınız zaman sıfır takımın yarı fiyatına gayet uygun durumda malzeme topladım diyebilirim. Daha sonra eğitim başadı. Toerik eğitimi haftasonları olacak şekide 4-5 haftada bitirdik. Aralarda tabiki hava güze oldukça tepeye çıkıp ucuyorduk. Bu şekide 4 5 ay devam etti. Ucuş saaterimizi tamamladıktan sonra Ölüdeniz planaması yapıldı ve finallerin bittiği tarihte Öüdeniz'e eğitimi tamamlamak için gittik. Öüdeniz bir çok kişinin olduğu gibi benimde hayallerimden biriydi. (Artık normal birşey haline geldi)

![oludeniz2](/blog/oludeniz2.jpg)

Ve tabikide bayildim oraya. Gerek sahili gerek gökyüzünden izlemesi harikaydı. Gökyüzünde yaptığımız acil durum çalışmaları da çok heyecan vericiydi. Devamında eğitim bittikten sonra keyif uçuşlarımızı da yaptıktan yapıp geri döndük. Ben yazı yine Sakarya'da geçirmeye calıştım ve havanın güze oldugu her gün (çoğu günler) uçuşlarımıza Serdivan'da devam ettik. Çok kısa anlatacak olursam yamaçparasütü kariyerim bu şekilde geçti... Daha detaylı bir şekilde önümüzdeki günlerde anlatmak istiyorum.

## Yazılım

![yaz-okulu-son-gun](/blog/msyazokulu/yaz-okulu-son-gun.jpg)

Birinci sınıf bitmek üzereyken tam yazın ne yapsam düşüncesine daldığımda sınıftan bir arkadaşım Microsoft'un yaz okulu programından bahsetti. Başvuruları başlamıitı. Bende durur muyum hemen başvurdum. Kısa bir video çekip diğer bilgierimIe beraber başvurduktan sonra yazın kabul edildiğime dair telefon alıncaki sevincimi hatırlıyorum. Ağustos'ta başlayan 1 aylık yaz okuu için İstanbu'a geri döndüm. Bu yaz okuIu meslek kariyerim açısından bana çok şey kattığını düşünüyorum. Daha once burada geçirdiğimiz zamanla ilgii [yazilar](/posts-by-categories/#microsoft-ref) yazmıştım. Daha sonra İstanbul'da biraz vakit geçirdikten sonra Sakarya'ya geri döndüm. Şuan çalıştığım firmadan ayrılma düşüncem var bir süredir. Kendimi geliştiremediğimi farkettim. Bu benim için çok önemli. Mezun olduktan sonra bu kadar zaman çalışıp staj yapıp kendime bir şey katmadan buradan ayrılırsam çok üzülürdüm. Bu sebeple daha önemli bana daha çok bilgi birikimi kazandıracak işerde çalışmak veya işler yapmak amacı ile buradan ayrılacağım. Şimdilik bu kadar.

2017'yi bu gibi birkaç güzel gelişme ile kapattıktan sonra geriye baktığımda geçen seneki gibi kötü 0laylarin yaşanmadığını görüyorum. Çok şükür de öyle oldu. Ve umuyorum ki bundan sonra da yaşanmaz.

## Bundan sonrası

Bundan sonra her ne kadar şu ana kadar çoktan yapmış olmam gerekse de kendime ileriye dönük hedefler koyup bunlar için çalışacağım. Şimdilik benden bu kadar. Görüşmek üzere..

> Sağlıklı, huzurlu ve mutlu yıllar!


2018


![yaz-okulu-son-gun](/blog/msyazokulu/yaz-okulu-son-gun.jpg)

Evet doluluğuyla çook uzunmuş gibi gelen, aynı zamanda bir çırpıda geçiveren Microsoft Yaz Okulu'nu da geride bıraktık. Bir araya gelmiş 100 kişi ile dolu dolu koskoca 4 hafta geçirdik. Burada geçirdiğimiz bir ayın her günü birbirinden değerliydi. Her gün farklı konuklarımız oldu, onların hikayelerini, geçmiş tecrübelerini dinleyip sorular sorduk. Hepsi bize bir şeyler kattı. Teknik eğitimler aldık. Alanında uzman bir sürü eğitmen ile hem eğlenceli hem dolu dolu vakit geçirdik. Projelerimize kafa yorduk. 4. haftanın sonuna kadar demo çıkarma çabasıyla yoğun bir şekilde çalıştık. Yaptığımız demoları sunduk, seçilen 15 sunum son gün 10 kişilik önemli juri karşısında tekrar sunuldu. Daha sonrasında tekrar ilk beş seçildi. Bu şekilde yaz okulunu tamamlamış olduk. Tüm bunların yanında çok güzel dostluklar edindik, bize yol gösterecek daima yardım edebilecek insanlar tanıdık. Çok güzel anılarımız oldu. Ayrılırken herkes çok üzüldü. Her güzel şeyin bir sonu var derler. Bu da onlardan biriydi.

Eğer sende öğrenciysen ve henüz bu deneyimi yaşamadıysan sonraki yaz için yapılacaklar planına buraya başvurmayı eklemelisin. Sağcılakla :))


Microsoft Yaz Okulu Bitti


Merhabalar, Microsoft yaz okulunun 2.haftasını bitirmiş bulunuyoruz. Bende sizlere bu hafta gördüklerimizi, dinlediklerimizi, öğrendiklerimizi aktaracağım.

## 1.Gün

> 10 yıl sonra ne yapıyor olacaksınız?

![cavityantac](/blog/msyazokulu/cavityantac.jpg)

İkinci haftanın ilk gününde Chief Evangelist olarak görev yapan [Cavit Yantaç]() bizimleydi. Cahit bey kendi öz geçmişini anlatırken orta okulda edebiyat öğretmeninin kendilerinden istediği _"10 yıl sonra ne yapıyor olacaksınız?"_ kompozisyonunun kariyerinde çok önemli bir rol oynadığını belirtti. Yazdığı kompozisyonun içindeki hedeflerin neredeyse hepsinin bir bir gerçekleştirdiğini söyledi. **_Uzun vadeli planlar_** yapmanın bizlere _hangi engelleri aşmak gerektiğini_ söyleyeceğini belirtti. Bizlere de bu tavsiyeyi verdi.

İlk gün eğitimleri [Yiğit Özaksüt]() ile devam etti. Xamarin eğitimi ile başladık. [Mono Framework]()'e biraz değindi.
Eğitimde görmüş olduğumuz faydalı linkleri yine [aşağıda](#faydalı-linkler) vereceğim.

![sercanuslubas](/blog/msyazokulu/sercanuslubas.jpg)

Günün sonunda [Sercan Uslunbaş]() bizimleydi. Kendisi yaklaşık 6 yıl kadar Apple şirketinde Image Processing üzerine çalışmış. Daha sonra kendi şirketini kurmuş. Etkileyici bir kariyere sahip olan Sercan Bey daha sonra sorularımızı yanıtladı. Günü böyle tamamlamış olduk.

## 2.Gün

> "İnandığınız şeyleri davaya dönüştürün."

İkinci gün Turkcell Eski Genel Müdürü [Selen Kocabaş]() ile başladık. Etkileyici bir konuşma yaptı. **_İnandığımız şeyleri davaya dönüştürme_** ve onun için mücadele etmenin çok daha önemli olduğunu belirten Selen hanımın konuşmasından aklımda kalanlar bu mücadele için belirlediği 5 düsturu oldu;

- İste!, Ne yapıyorsan, tutkuyla yap.
- Her şey emek ister, Çalış, çok çalış.
- Karşındakini tanı, onu 'özel' hissettir.
- Öğrenmeye aç ol.
- Zamanını ve enerjini iyi yönet

![ibrahim-kivanc](/blog/msyazokulu/ibrahimkivanc.jpg)

Eğitimlerimiz İbrahim Kıvanç ile devam etti. Bizlere chatbotları anlattı ve örnekler ile pekiştirdi. Chatbotlar bana hem eğlenceli hemde kolay geldi. İbrahim hocanın eğitim içerisinde verdiği faydalı linkler yine [aşağıda](#faydalı-linkler).

İbrahim hocayı eğitimden sonra sahneyi geçen seneki yaz okulunda başarı gösteren [Barış Ceviz]() ve [Ahmet Emre Ceylan]()'a bıraktı. Kendi bildiklerini ve startup deneyimlerini anlattılar.

Son olarak tekrar [Engin Polat]() bizimleydi. Kendisi ile yine eğlenceli bir eğitim geçirdik. Bizlere Web Api ve beraberinde özellikle istenen bazı konuları anlattı.

## 3.Gün

![gamze-cuhadaroglu](/blog/msyazokulu/gamzecuhadaroglu.jpg)

Danone Genel Müdürü [Gamze Çuhadaroğlu]() bizimleydi. İş dünyasında topluma, doğaya, bireye değer veren şirketleri seçmemiz konusunda tavsiyeler verdi.

Güne [Koray Kocabaş]()'ın **_Big Data_** sunumu ile devam ettik. Çok faydalı bir eğitim oldu. Yemeksepeti'nin eski çalışanı olan Koray Kocabaş şuan Hürriyet'te çalışıyor.

Veri toplarken nasıl analiz yapıp bize lazım olan veriyi toplamamız gerektiğini örnekler vererek anlattı. Örneklerine çikolata satan bir e-ticaret sitesinden başlayan Koray hoca yanında getirdiği çikolatalardan dağıtmayı da unutmadı. :)

Whatsapp API ile yaptığı hangi numaranın ne zaman çevrim içi olup olmadığını gösteren konsol uygulaması ile kimlerin birbirleri ile konuştuğunu tespit etmenin mümkün olduğunu gösterdi.

Örneklerinden en çok ilgimi çeken [House of Cards]() dizisi oldu. Netflix tarafından yazılıp çekilen bu filmde Netflix insanların hangi konularda ilgisini çekeceği konusunda iyi bir araştırma yapmış. Bu araştırmanın sonucunda siyaset, entrika gibi konuların daha çok ilgi çektiğini tespit etmişler. Bununla kalmayıp en çok hangi yönetmenin izlendiğini, hangi oyuncunun izlendiği gibi bilgileri de elde edip bunları kullanarak bu diziyi yapmışlar.

Verdiği örneklerde bizlere elde edilen verinin işlenip anlamlı hale getirilmesinin çok daha değerli olacağını belirtti.

Yine Koray hocamızın eğitiminden kalan faydalı linkleri [aşağıda](#faydalı-linkler) bulabilirsiniz.

Koray hocadan sonra [Abdullah Altıntaş]() bizlerleydi. [Azure Event Hub Click Stream]() ve [Stream Analtics]() eğitimleri verdi. Çok güzel bir eğitimdi.

Son olarak [Ufuk Tarhan]() bizimleydi. Dünyanın en iyi 25 fütüristinden biri olan Ufuk hanım bizleri geleceğe gönderip getirdi resmen. Teknolojinin nasıl geliştiğinden bahsederek başlayan Ufuk Hanım, gelecekte bizleri neler beklediğinden, nasıl hazırlanmamız gerektiğinden bahsetti. [Kendisini](https://twitter.com/futuristufuk) takip etmenizi tavsiye ederim.

## 4.Gün

Dördüncü güne [Işıl Hasdemir]() ile başladık. Ses, video, veri dönüşümü ile ilgili işler yapan Işıl hanım, aynı zamanda hayatında spora da çok yer vermiş. Bizlere ağırlıklı olarak **_takım çalışmasının önemli_** olduğunu, **_iyi bir network_** kurmamız gerektiğini, hiç bir zaman **_ben oldum dememek_** gerektiğini (bkz:ikarus), **_hata yapmaktan korkmama_**mız gerektiğini vurguladı.

[Emrah Uslu]() ile eğitimlerimize devam ettik. **_IaaS, Paas ve SaaS_** Servislerinden bahsetti. Yine çok faydalı eğitimlerden biri olan bu eğitimde. Azure'un _Logic App_, _Cognitive Services_, _Function App_ gibi servislerini kullanarak atılan twitin içeriğinin olumlu veya olumsuz olup olmadığını kontrol eden ve e-posta olarak bildiren bir akıllı servis yaptık. Bir çok kişiyi heyecanlandıran bir eğitim oldu.

Son olarak Pegasus'un CEO'su olan [Mehmet Nane]() bizimleydi.
Bizlere verdiği tavsiyelerden birkaçı;

- Çok çalışmak
- Hedeflerini belirlemek
- Farklı olmak
- İyi ilişkiler kurmak
- Heyecanlı olmak

Yaptığımız işlerde olmazsa olmazlardan biri adil olmak olduğunu belirten Mehmet Bey'in konuşması ile günü tamamladık.

## 5.Gün

İkinci haftanın son günü konuşmacı [Kürşat Gök]() ile başladık, bizlere okurken part-time (kendi işimiz ile ilgili) çalışmamız hakkında tavsiye verdi. Bunun bizim için ileriye dönük çok güzel olacağını söyledi. İyi bir network kurmanın öneminden bahsetti.

Bu konuşmadan sonra [Osman Seçkin Karabaş]() bizimleydi ve [Azure Mobile App]() servisini kullanarak nasıl mobil uygulama yapacağımızı uygulama ile gösterdi. Faydalı bir eğitimdi.

Öğle arasından sonra kendi sunumlarımızı yaptık.

Son olarak [Mustafa Acungil]() bizimleydi. [24 Kariyer Tuzağı]() adlı kitabın yazarı olan Musafa Acungil "Dinlediklerinizi davranışlarınıza dönüştürün." tavsiyesini verdi.

Okuduğunuz için teşekkür ederim.

### Faydalı Linkler

## Xamarin

- [Xamarin Eğitimleri](https://www.youtube.com/channel/UCn5tRpsFj6Fa79Q-0edzdjQ/videos)
- [Test için Rest Api](https://jsonplaceholder.typicode.com/)
- [Json2Csharp](http://json2csharp.com/)

## Machine Learning

- [TenseFlow](https://www.tensorflow.org/)
-

## Kitap

- [Start With Why - Simon Sinek]() - İbrahim Kıvanç
- [Atlas Vazgeçti]() - Cavit Yantaç
- [The Age of Reason]() - Cavit Yantaç
- [T-İnsan - Ufuk Tarhan]() - Ufuk Tarhan

## Botlar

- [Botpoet]() - Botlarda şiir yazabilir :)
- [Botlist.co]() - Çeşitli alanlarda yapılan botlar
- [botframework]() - Yapılan botları görebilir, kendi botunuzu yapabilirsiniz.
- [Github Microsoft]() - Microsof'tun Github örnek botlarını bulunduğu hesabı

## Doğal Dil İşleme

- [Api.ai]()
- [Luis.ai]()
- [Azure Cognitive Services]()

## Eğitim

- [Coursera]() - Eğitim sitesi
- [Udemy]() - Eğitim sitesi
- [Plurulsight]() - Eğitim sitesi
- [Edx]() - Eğitim sitesi
- [MVA]() - Eğitim sitesi


Microsoft Yaz Okulu


![microsoft-yazokulu](/blog/msyazokulu/msyazokulu.jpg)

Merhabalar, geçtiğimiz hafta merakla beklediğim Microsoft'un her yıl düzenlediği Yaz Okulu programına başladık. Öncelikle size bu programdan bahsetmek istiyorum. Daha sonra detaylara geçeceğim.

### Microsoft Yaz Okulu Nedir?

Microsoft Yaz Okulu başta da söylediğim gibi her yıl Microsoft tarafından düzenlenen, bir ay süren bir eğitim programıdır. Bu sene 14.sü gerçekleşiyor. Bu eğitim için 100 öğrenci seçiliyor. Sizinle benzer hayallere sahip, benzer kaderi paylaşacağınız 100 kişi ile tanışıyorsunuz. Bu program içerisinde Microsoft teknolojilerini (Mobil, Web, Oyun, IoT, Yapay Zeka vs. geliştirmek için gerekli her şey) öğreniyorsunuz. Bunların dışında birbirinden değerli konuşmacılar geliyor onları dinliyorsunuz. Bu da size girişimcilik, motivasyon, yol göstericilik anlamında çok şey katıyor. Katılmadan önce sizden bir proje isteniyor, aldığınız eğitimlerle bu projeleri bir aylık süre içerisinde yapmaya çalışıyorsunuz. Her ne kadar bir çoğumuzun geliş amacı yazılım-programlama eğitimi almak olsa da bu eğitim kişiye her anlamda bir şeyler kattığı kesin. Sizde eğer hiç katılmadıysanız. Sonraki yaz okulunu iple çekmeye başlamalısınız. :)

### Yaz Okulu Nasıl Geçiyor?

Yaz okulu haftanın 5 günü saat 9:00 - 18:00 arasında gerçekleşiyor. Bu süre içerisinde bir günü tarif edecek olursam;
Öncelikle sabah 8:00-9:00 arasında kahvaltımızı yapıyoruz. 9:00 ilk sunum başlıyor. Genellikle öğle vaktine kadar konuşmalar dinliyoruz.
Daha sonra eğitimler başlıyor. 12:45'te öğle yemeği için 1 saatlik aramız var. Tabii öğle arasına kadar her saat başı 10 dakikalık aralar veriliyor. Bu aralarda çay-kahve-atıştırmalık şeyler yiyip içiyoruz. Aynı zamanda ofiste bulunan masa tenisi, bilardo gibi oyunlar oynayabiliyorsunuz. Daha sonra tekrar eğitim başlıyor yine 10'ar dk aralarla eğitimler sürüyor. Program her gün aynı değil kimi zaman eğitim kimi zaman konuşmacı oluyor. Genel olarak bir günümüz böyle geçiyor.

### 1.Haftada Neler Oldu?

---

#### Birinci Gün

![grup-calismasi](/blog/msyazokulu/mscalisma.jpg)

Bu yıl ki yaz okulu açılışı [Behice Funda](https://www.linkedin.com/in/behice-funda-51817a20/) ve [İbrahim Kıvanç](https://www.linkedin.com/in/ibrahimkivanc/) ile birlikte oldu. Önce kendilerini tanıtıp daha sonra bizlere yaz okulundan, bizleri neler beklediğinden, bizim neler yapmamız gerektiği gibi bilgiler verdiler. Daha sonra Microsoft Türkiye Genel Müdürü [Murat Kansu](https://www.linkedin.com/in/murat-kansu-0103351/) bizimleydi. Kendi hayat hikayesini anlattı ve bizlere tavsiyelerde bulundu. Soru cevap faslından sonra kısa bir ara verdik ve Microsoft Seattle ekibinde görev alan Ceren Metin hanım bizimleydi. O da bizlere **_İngilizce'nin öneminden_**, **_yurt dışında MBA yapmanın_**, ve **_iyi bir Network_** yani bizim deyimimizle iyi bir çevreye sahip olmamanın öneminden bahsetti. Ceren hanımın konuşmasında benim en çok ilgimi çeken şey gelen bir soruya karşılık olarak **_'-Bilmiyorum. Ama istersen araştırırım.'_** demesi oldu. Bir insanda gerçekten ne kadar bilgili olursa olsun eğer bilmediği bir şeyle karşılaşırsa, _bilmiyorum_ demesi bence çok büyük bir şey. Genellikle insanlar bunu yapmak yerine yanlış bilgilendirmeye giderler. Ceren hanımda konuşmasını bitirdikten sonra öğle yemeğinden önce MS Türkiye Genel Müdür Yardımcısı [Kerem Onar](https://www.linkedin.com/in/keremonar/) konuşma yaptı. Diğer konuşmacılar gibi oda öz geçmişini anlattıktan sonra bizlere **_Bulut bilişim_**, **_Yapay Zeka_**, **_IoT_** gibi önemli konuların geleceğinden bahsetti. Öğle yemeğine kadar bu şekilde geçti. Öğle yemeği için hazırlanan program her gün farklı idi. Dört kişilik masalarda her gün farklı biri ile yemek yiyecek şekilde ayarlanmıştı. Bu da kaynaşma, tanışma faslını hızlandırması, farklı insanlar tanımanız açısından güzeldi. Öğle yemeğinden sonra ilk gün için geleneksel bir oyun oynadık. Herkes 10-12 kişilik gruplara ayrılıp masalarımızın üzerindeki dergi, el işi kağıtları,yapıştırıcılar ile verilen tahta üzerinde görseller hazırlayıp konuşma hazırladık. Bu etkinlik grup çalışmasına ne kadar adapte olabildiğimizi göstermiş oldu. Bize verilen bir saatlik sürenin ardından sunumlarımızı yaptık.

#### İkinci Gün

![onur-koc](/blog/msyazokulu/onurkoc.jpg)

İkinci günde Microsoft Türkiye'de CTO olarak görev yapan [Onur Koç](https://www.linkedin.com/in/onurkoc1/?ppe=1) bizimleydi. Yaptığı işten ve tecrübelerinden bahsetti. Önemli konulara değindi. Bu konulardan bazıları şunlardı; **_Konseptleri anlamak ve uzmanlaşmak_**, **_Problem çözme becerisinin iyi olması_**, **_İletişimin Önemi_**, **_Comfort Zone'nizden çıkabilmek_**, **_Mentor seçmek_** gibi şeylerdi. Benim en çok ilgimi çeken Comfort Zone'den çıkmak oldu. İnsanın rahata alıştığı, hayatında yeni şeyleri denemekten alıkoyacak şekilde kendi belirlediği sınırlar içerisinde yaşamasına denir Comfort Zone. Ve biz bunun içinden çıkmadığımız sürece hayallerimize ulaşacağımızı sanmıyorum. Comfort Zone'den çıkmak bizim için bir numaralı kural olmalı diye düşünüyorum. Bu değerli konuşmadan sonra tekrar İbrahim Kıvanç bizimleydi ve önemli bir eğitim verdi. Yaptığı sunumda bahsettiği konular **_Machine Learning_**, **_Internet of Things_**, **_AR & VR_**, **_Chatbots_**, **_DevOps_** gibi konulardı. Tüm bu konular hem günümüzde çok popüler ve geleceğin teknolojilerini içinde barındıran konular olduğu için bir çok kişi pür dikkat dinledi. Öğle arasından sonra tekrar İbrahim Kıvanç bizimleydi ve bu sefer **_UI & UX_** sunumu yaptı. İbrahim hocamızın yaptığı sunumlar çok uzun olsa da bir o kadar da eğelenceliydi aslında. Sunumlar sırasında bir çok not çıkardık. Onlarıda en aşağıda yazacağım [faydalı linkler](#faydalı-linkler) kısmında vereceğim. Sunum içerisinde kendisiniden ve hobilerinden bahsetti. Kendisi sıkı bir Fenerbahçe'li, [fotoğraf çekmeyi](http://ikivanc.tumblr.com/) çok seviyor (çektiği fotoğraflar gerçekten başarılı). Bu eğitimden sonra bir değerli konuşmacı [Zafer Parlar](https://www.linkedin.com/in/zafer-parlar-33146314/?ppe=1) bizimleydi. Yurt dışında, özellikle Hollanda'da ki iş tecrübelerinden sonra Nike Türkiye ayağını kuran ve birçok büyük işe imza atan Zafer beyin ayrıca [Business Over Turkish Coffee](http://www.dr.com.tr/Kitap/Iste-Turk-Business-Over-Turkish-Coffee/Zafer-Parlar/Egitim-Basvuru/Is-Ekonomi-Hukuk/Yonetim-Is-Gelistirme-Kalite/urunno=0000000388764) adlı bir kitabı bulunuyor. Tüm bu anlattıklarından sonra Zafer beyin değinmek istediği konu tüm başarıların ardında başarısızlıkların olduğuydu. Başarısız olmaktan korkmamamız gerektiğini vurguladı. Bu konuşma da bittikten sonra günü bitirdik.

#### Üçüncü Gün

![behice-funda](/blog/msyazokulu/behicefunda.jpg)

Üçüncü gün açılışı [Behice Funda](https://www.linkedin.com/in/behice-funda-51817a20/) 'İkna etme yöntemleri' konuşması ile yaptık. İkna etmek için _etki_,_duygu_,_mantık_ anahtarlarını içinde bulunduran bir konuşma yapmamız gerektiğini söyledi. Bizleri seçerken gönderdiğimiz videoda nelere dikkat ettiklerini vurguladı. Mesela özensiz bir şekilde çekilen videoları sonuna kadar izlemeden elediklerini söyledi. Özensiz dediysem de yatakta uzanırken çekilip gönderilen videolardan bahsetti. Şaşırtıcı ama bu şekilde gönderenler olmuş. (Seneye başvurmayı düşünüyorsanız buna dikkat edin!) Bize etkili konuşma hakkında bilgiler aktardı. İzlememiz ve okumamız için kitap-video [tavsiyelerinde]() bulundu. Daha sonra güne teknik sunumlar dinleyerek devam ettik. Barbaros Günay, Alper Soğukpınar, Nuran Zenginel ile çeşitli konular dinledik. Konu başlıklarından bazıları şöyleydi; **_Services Life Cycles_**, **_Role Definitions_**, **_Agile Development_**, **_Waterfall Model_**, **_Scrum_**, **_DevOps_**. Bu teknik konulardan sonra öğle yemeğinin ardından buraya gelmeden önce yapmayı düşündüğümüz projelerin sunumlarını yaptık. Her kes 1 dakika içerisinde projesini sahneye çıkıp anlattı. Bu şekilde üçüncü günü bitirdik.

#### Dördüncü Gün

![cenk-kivilcim](/blog/msyazokulu/cenkkivilcim.jpg)

Dördüncü gün ilk olarak Cisco Türkiye Genel Müdürü [Cenk Kıvılcım](https://www.linkedin.com/in/cenkkivilcim/?ppe=1) bizimleydi. Bizlere öz geçmişini anlattı. Farklı ülkelerde farklı firmalarda, farklı pozisyonlarda çalışmış. Tüm bunlardan bize aktarmak istediği şey **_Merak Duygusu'nu_** hiç bir zaman kaybetmememiz gerektiği oldu. Ve yeni nesil olarak bizlerin en büyük dezavantajının **_tez canlılık_** olduğunu söyledi. Burada ben de tez canlı biri olarak fazlasıyla hak verdim. Tez canlılığın önüne geçerek bunun yerine sabretmeyi öğrenmeli ve hedeflerimize planlı çalışarak ilerlemeliyiz.

![yigit-ozaksut](/blog/msyazokulu/yigitozaksut.jpg)

Bu konuşmadan sonra çok beklenen eğitmenlerden biri olan Yiğit Özaksüt bizimleydi ve 'C# Temel Giriş' eğitimi verdi. C#'ın temel konularını örnekler yaparak değindi. Günün en etkileyici konuşması Denizbank Genel Müdür Yardımcısı ve Intertech Yönetim Kurulu Üyesi [Dilek Duman](https://www.linkedin.com/in/dilek-duman-435368a/) bizimleydi. Dilek hanım bankacılık yazılım projeleri için zamanında ileri bir teknoloji seçmeyi düşünmüş ve Microsoft ile görüşmüş, Microsoft Türkiye ile görüştükten sonra oradan gerekli yetkiyi alamadığı için gözünü Bill Gates'e çevirmiş ve onunla görüşmüşler. Etkileyici hayat hikayesi ile günü tamamlamış olduk.

#### Beşinci Gün

![goksin-bakir](/blog/msyazokulu/goksinbakir.jpg)

Beşinci gün ilk sunumu [Gökşin Bakır](https://www.linkedin.com/in/goksin-bakir-984b6a4/?ppe=1) 'Blockchain' hakkında yaptı. Nedir? Niçin bu kadar önemli? Gelecekteki önemi nedir? gibi soruların cevabını verdi.

![engin-polat](/blog/msyazokulu/enginpolat.jpg)

Daha sonra yine çok beklenen eğitmenlerden biri olan [Engin Polat](https://twitter.com/polatengin) bizimleydi. 'C# ve Xamarin' eğitimi verdi. Uzun bir eğitim oldu. Değindiğimiz konular şunlardı; **_Interface_**, **_Abstract Class_**, **_Access Modifiers_**, **_Virtual-Override_**, **_Polymorphism_** gibi temel konulardı. Daha sonra gelen istekler üzerine **_Extension Methods_**, **_Entity Freamework_**, **_Dependency Injection_**, **_.Net Standart - .Net Core_** gibi konulara değindi, bize örnekler gösterdi. Günün sonunda geçen yılın MS Yaz Okulu öğrencisi olan ve girişimi ile Silikon Vadisi'ne kadar giden Dilara Keçeci bizimleydi. Başlattıkları VR projesi ile çeşitli ödüller kazandıktan sonra İTÜ Çekirdek'e gitmeye hak kazanmışlar. Farklı satış modelleri farklı proje fikirleri ve stratejiler deneyerek yaşadıkları tecrübeleri çok güzel bir şekilde anlattılar. Gerçekten bir startup başlatmanın ve onu yönetmenin hiçte kolay bir şey olmadığını göstermiş oldular.

## Faydalı Linkler

- [İbrahim Kıvanç Blog](http://www.ibrahimkivanc.com/)
- [Microsoft Cognitive Services](https://azure.microsoft.com/en-us/services/cognitive-services/) - Microsoft'un yapay zeka servislerinin bulunduğu site
- [Hackster.io](https://microsoft.hackster.io) - Yazılım-donanım alanında yapılan projelerin paylaşıldığı faydalı bir portal.
- [Funders and Founders](http://fundersandfounders.com/) - Uzun süredir takip ettiğim Anna Vital adlı sanatçının hazırladığı başarılı insanların özgeçmişlerini anlatan tasarımların bulunduğu site.
- [Uxchecklist](https://uxchecklist.github.io/) - Bir projede A'dan Z'ye nelerin yapılması gerektiğini gösteren site

#### Tasarım

- [Goodui](http://goodui.org) - Bir projede UI olarak nelerin yapılmasını gerektiğini anlatan site.
- [Adobe Color CC](https://color.adobe.com/tr/create/color-wheel/) - Tasarımda renk konusunda yardım edecek bir site
- [MaterielUp]() - Benim gibi sizde tasarım meraklısı iseniz mutlaka takip etmeniz sitelerden biri
- [Dribble]() - Bir diğer kaliteli, güncel tasarımların bulunduğu önemli bir site
- [pttrns]() - Bir diğer tasarım sitesi

#### Wirefreaming

- [Balsamiq](https://balsamiq.com/) - Wirefreaming aracı
- [Proto.io](https://proto.io/) - Wirefreaming aracı
- [Flaticon](https://www.flaticon.com/) - Kaliteli ikonlar bulabileceğiniz site

#### Kitap - Dizi

- [The Laws of Simplicity](https://www.amazon.com/Laws-Simplicity-Design-Technology-Business/dp/0262134721) - UI/UX için kitap önerisi
- [Silicon Valley](http://www.imdb.com/title/tt2575988/) - Benimde severek izlediğim kesinlikle tavsiye ettiğim komedi dizisi

Şimdilik ilk haftadan aktaracaklarım bu kadar kaçırdığım yerler olursa ekleyeceğim. Geri kalan haftalar için takip etmeyi unutmayın. Okuduğunuz için teşekkür ederim. Sağlıcakla.



Merhabalar, geçen gün Azure Web App olarak yayınladığım sitede SMTP kullanırken yapmış olduğum bağlantının başarısız olduğunu gördüm.
Hata şöyleydi;

> System.Net.Mail.SmtpException: The SMTP server requires a secure connection
> or the client was not authenticated. The server response was:
> 5.5.1 Authentication Required. Learn more at

Localde çalışırken Azure'da çalışmıyordu. SMTP kodlarını yazarken önemli bir satırı atlamışım. Şu şekilde kullanarak sorunu çözdüm;

```
public async Task SendAsync(IdentityMessage message)
{
    //Enes Ozturk
    var smtp = new SmtpClient
	{
		Host = "smtp.gmail.com",
		Port = 587,
		DeliveryMethod = SmtpDeliveryMethod.Network, //1 Azure Web App için bu iki satır önemli aksi halde bendeki gibi hata alabilirsiniz.
		UseDefaultCredentials = true, //2
		Credentials = new System.Net.NetworkCredential("xxx@gmail.com", "password"),
		EnableSsl = true
	};

	using (var email = new MailMessage("mail-gonderen-adres@gmail.com", message.Destination)
	{
	    IsBodyHtml = true,
	    Subject = message.Subject,
	    Body = message.Body
	})
	smtp.Send(email);
}
```

Sevgiler..


MS Azure üzerindeki web app ile SMTP mail gönderme

Azure Web App ile SMTP kullanmak


![Exercism](/blog/exercism.png)

Merhabalar, epeydir birşeyler yazmadığımı farkettim. Bende oturup arasıra göz atıp **Python** dili ile problemlerini çözmeye uğraştığım [Exercism](http://www.exercism.io)'den bahsedeyim dedim.

### Exercism.io Nedir?

Adından da anlaşılacağı üzere bir egzersiz yapma sitesi. İçerisinde şuan 37 ve yakında gelecek olan 20 farklı _programlama dili_ - _freamework_ - _tool_'un egzersizleri [bulunmakta](http://exercism.io/languages). Tabiki benzeri bir dolu site veya uygulama vardır. Fakat gerek çeşitliliği, gerek *test güdümlü yazılım*a alıştırması gerekse de komut satırı ile kullanılıyor olması sebebiyle bu içlerinde en çok hoşuma giden oldu.

## Kullanımı

Exercism'e başlamak için Github hesabımızla giriş yapıyoruz.(Galiba sadece öyle giriliyor) Daha sonra komut satırı uygulamasını yüklememiz gerekiyor. [Buradan](http://exercism.io/clients/cli) işletim sisteminize uygun olanı indirip veya komut satırınız üzerinden kurun. Devamında yapılandırma işlemi yapmamız gerekiyor. Bunun için [buradan](http://exercism.io/account/key) hesabınız için atanmış olan key ile komut satırına

```
exercism configure --key={size verilen key}
```

komutunu girerek yapılandırma işlemini tamamlayın.

Bu adımlar bittikten sonra egzersizleri _fetch_ etmeye başlayabilirsiniz.

Örneğin ben [Python](http://exercism.io/languages/python/exercises) egzersizleri sayfasından [ilk egzersizi](http://exercism.io/exercises/python/hello-world/readme) fetch ediyorum.

```
exercism fetch python hello-world
```

almış olduğumuz dosyaların içerisinden çözülmesi istenen _problemin bulunduğu dosya_, yazdığımız fonksiyona ait _test_ dosyası ve bir adet _README_ dosyası geliyor. Dosyayı kullanıdığımız text editörde açıyoruz. (Ben [VS Code](https://code.visualstudio.com/) kullanıyorum). Önce istenen problemi okuyup daha sonra yazmaya başlayabilirsiniz.

Yazdıktan sonra konudumuzu test etmek için komut satırında test dosyamızı çalıştırıyoruz;

```
py hello_world_test.py
```

Eğer çözümümüz doğru ise OK alıyoruz. Yanlışlık varsa kaç tane ve hangi fonksiyonlarda hata verdiğini gösteriyor.

Çözümü tamamladıktan sonra submit etmek için komut satırında problemin bulunduğu klasöre gelip

```
exercism submit hello_world.py
```

komutunu veriyoruz. Submit işleminden sonra komut satırında bize bir link veriliyor. Bu linkten çözümümüz hakkındaki detayları görebilir, diğer insanların çözümlerine ulaşabilirsiniz.

Okuduğunuz için teşekkür ederim. Sevgiler.


Exercism.io Nedir? Kurulum ve kullanımı

Exercism.io


Herkese merhaba. 8 Nisan Cumartesi günü Kadir Has Üniversitesi'nde `Devnot Summit 2017` etkinliği oldu. Bende oradaydım. Birbirinden değerli yazılım geliştiriciler harika sunumlar yaptı. Etkinliğe katılım oldukça fazlaydı. İki farklı salonda eş zamanlı geçen sunumlarda iki salonda tıklım tıklım oluyordu. Etkinlik sırasında sürekli not çıkardım. Araştıracağım ve öğrenmek istediğim onlarca şeyle geri döndüm. Uzun zamandır takip ettiğim yazılımcıları görüp onlar ile tanıştım. Daha önce hiç tanışmamış olmama rağmen birçok insanla samimi bir şekilde sohbet ettik. Bu tarz etkinliklere artık elimden geldiğince katılmaya çalışacağım.

Sunumların hepsi birbirinden değerliydi. [Lemi Orhan Ergin](https://twitter.com/lemiorhan)'in yapmış olduğu _Temiz Kod Tasarımı_ sunumu, [Engin Polat](https://twitter.com/polatengin)'ın yaptığı _Yük
Altında Çalışan Web Uygulamaları Geliştirme_ sunumu, [Burak Selim Şenyurt](https://twitter.com/burakselyum)'un _Script Tabanlı Dillerin Önemi Ve Geleceği_ (en eğlencelisiydi galiba) sunumu aklımdan kalanlardı. Sunumların birindeyken diğerinde aklım kalıyordu.

Etkinliği düzenleyen [Uğur Umutloğlu](https://twitter.com/lemiorhan) ve diğer üstadların emeklerine sağlık. Böyke etkinlerin devamlı olmasını diliyorum.

Hatıra olarak bu resmi bırakıyorum. Kendisi ile tanıştığıma çok memnun olduğum [Burak](buraksenyurt.com) hocam :)

#DevnotSummit
![devnot-submit](/blog/devnot_1.jpg)


Devnot Summit 2017


Bugün yaklaşan vizelerinde bahanesi ile programlama ile ilgili çıkartmak istediğim notları buraya yazmayı planladım.
Kavramları uzunca açıklamaktan çok kendimce kısa kısa özelliklerini yazacağım.

## Static Sınıflar

Static olmayan sınıflardan farkı yok gibi gözükür, fakat;

- Static sınıflar `new` anahtar sözcüğü ile bir örnek oluşturarak kullanılmaz.
- Static sınıflar _sealed_ denen mühürlenmiş sınıflardır. Bu yüzden miras alınamaz veya vermezler.
- Yapıcıları kendinden _private_'dir ve bu, sınıftan nesne üretilmesini engeller.
- Static class oluşturmak, sadece static üye içeren ve _private_ yapıcı içeren normal sınıflar ile aynıdır.
- *Örnek Yapıcı*sı içermez, *Statik Yapıcı*sı içerirler.

## Static Üyeler

- Static üyeler sınıf objesi oluşturulmadan çağırılabilir.
- Static üyelerin bellekteki yeri değişmez. *Sabit*tir
- Bir sınıf içerisinde static üyeler statik olmayan üyelere erişemezler.
- Static olmayan sınıflar içinde static üyeler oluşturulabilir.
- Bu sınıflardan ne kadar nesne oluşturulursa oluşturulsun, static üyenin kopyası yalnızca bir tanedir.
- Static üyeler _overload_ edilebilir fakat _overread_ edilemezler.
- Bir sınıf static ise ancak ve ancak statik üye bulundurabilirler.

```csharp
    class OrnekSinif
    {
        public static int a = 0;
    }
    class Program
    {
        static void Main(string[] args)
        {
            WriteLine(OrnekSinif.a); //Sınıf ismi ile static üyeye eriştik.
        }
    }
```

## this anahtar kelimesi

- Varsayılan sınıfın örneğini referans eder.
- Benzer isimdeki alanların kullanımı sağlar.
- Başka bir metoda nesneyi parametre olarak aktarır.
- Sınıfın indexer(dizi) olarak kullanılmasını sağlar.

## İnterface

- C# ve Java gibi dillerde çoklu kalıtımın yerini interfaceler tutar.
- Birbirleri arasında kalıtım olmayan sınıflara bir mecburiyet bırakırlar.
- Nesneleri oluşturulamaz
- En büyük var olma nedenleri diğer interface ve sınıflara rehber olmalarıdır.
- Yapıcı içermezler
- Tüm üyeleri public kabul edilir.
- Alan(field) içermezler.

## Polymorphism - Çok Biçimlilik

- İki türlüdür;
- Statik Polymorphism => Aynı sınıf içerisinde metodların ve operatörlerin aşırı yüklenmesidir(overloading). (Derleme zamanında)
- Dinamik Polymorphism => Farklı sınıflarda metodların override edilmesi. (Çalışma zamanında)
- Dinamik Çok Biçimlilikte [_abstract_](#abstract) anahtar kelimesi kullanılır;

## Abstract Sınıflar

- _new_ anahtar kelimesi ile örneği oluşturulamaz.
- İnterface'lere benzerler.
- Abstract sınıf içinde yine abstract olarak tanımlanan method en az bir tane bulunması gerekir ve yalnızca tanımlanır. İşlem yapmaz.
- Bu metodlar abstract sınıfı kalıtım olarak alan sınıflarda _override_ edilerek kullanılır.
- Method override edilirken başına _override_ eki gelir.
- Her abstract metod aslında _virtual_'dır.

### Abstract Metodlar

- Somut sınıflar oluşturmak için override edilmesi gereken metodlardır.
- abstract anahtar kelimesi alırlar.

Polymorphism ve Abstract sınıflara şöyle bir örnek verelim:
_KonsereGir_ adlı abstract bir sınıfımız olsun. _Kisi_ adlı sınıfımız bu sınıfı kalıtım alarak içindeki abstract tanımlanan metodu override eder.
Daha sonra _Uygunluk_ adlı sınıfımız ile oluşturulan kişinin konsere girebilmek için uygun olup olmadığını kontrol edelim.

```csharp
public abstract class KonsereGir
    {
        protected int Yas;
        public KonsereGir(int yas)
        {
            this.Yas = yas;
        }
        public abstract bool Kontrol();
    }
public class Kisi : KonsereGir
    {
        public Kisi(int yas)
            :base(yas)
        {
        }

        public override bool Kontrol()
        {
            if (Yas < 18) return true;
            else return false;
        }
    }
    public class Uygunluk
    {
        public void Bildiri(KonsereGir konseregir)
        {
            bool uygunMu;
            uygunMu = konseregir.Kontrol();
            if (uygunMu) WriteLine("Kişi konsere girebilir");
            else WriteLine("Kişi konsere girmek için küçük.");
        }
    }
    class Program
    {
        static void Main(string[] args)
        {
            Uygunluk u = new Uygunluk();
            Kisi k = new Kisi(18);
            u.Bildiri(k);
            ReadKey();
        }
    }
```

## readonly anahtar kelimesi

- Yapıcı fonksiyon içerisinde değer atanmalı aksi halde değiştirilemez.

## base anahtar kelimesi

- Türetişmiş sınıftan anasınıfın elemanlarına erişmek için kullanılır;
- Temel sınıftanki, başka method taradından _override_ edilmiş metodu çağırır.
- Türetilmiş sınıfın örneğini oluştururken hengi temel sınıfın yapıcısını çağıracağını belirtir.

```csharp
public class Person {
    protected string name = "Enes";
    protected string surname = "Öztürk";

    public virtual void BilgiAl(){
        WriteLine($"Name {name}");
        WriteLine($"Surname{surname}");
    }

}
class Ogrenci : Person{
    public string id = "a1b2c3";
    public override void getInfo(){
        base.BilgiAl();
        WriteLine("Ogrenci id: {0}",id);
    }
}
class Program
    {
        static void Main(string[] args)
        {
            Ogrenci ogr = new Ogrenci();
            ogr.BilgiAl();
        }
    }
```

İkinci kullanım:

```csharp
public class TemelSinif{
    int num;

    public void TemelSinif(){

    }
    public void TemelSinif(int i){
        num = i;
        WriteLine($"TemelSinif(int i) içinde");
    }
    public BilgiAl(){
        return num;
    }
}
public class TuretilmisSinif : TemelSinif
{

    public void TuretilmisSinif() : base()
    {

    }
    public void TemelSinif(int i) :base(i)

        num = i;
        WriteLine($"TemelSinif(int i) içinde");
    }
    public BilgiAl(){
        return num;
    }
}
class Program
    {
        static void Main(string[] args)
        {
            TuretilmisSinif ts = new TuretilmisSinif();
            TuretilmisSinif ts1 = new TuretilmisSinif(1);
        }
    }
```


C# Notlar


Bir önceki yazımda Interface'lerin bileşenleri birbirinden ayırmada yardımcı olduğunu söylemiştik. Fakat C# bize `new` anahtarını kullanmak dışında _Interface_ kullanan bir obje oluşturmak için yerleşik bir yöntem sağlamıyor. O halde kodumuz şöyle oluyor;

```
public class PasswordResetHelper
{
   public void ResetPassword()
   {
      IEmailSender mySender = new MyEmailSender();
      //...e-mail detayarını yapılandırmak için interface'i çağırıyoruz
      mySender.SendEmail();
   }
}
```

Bu işlem bizim amacımızı olan _MyEmailSender sınıfını PasswordResetHelper'a dokunmadan değiştirmek_ için pek uygun gözükmüyor.PasswordResetHelper sınıfı _IEmailSender_ interface'i ile e-mailleri ayarlama ve gönderme işlemlerini yapıyor. Lakin bu interface'i kullanan bir obje oluşturmak için MyEmailSender'dan bir nesne oluşturması gerekecek. Aslında işleri biraz daha zorlaştırdık çünkü PasswordResetHelper bizim MyEmailSender sınıfımıza ve IEmailSender interface'imize bağlı oldu.

![Dependency-Injection](/blog/interface1.jpg)

Bizim amacımız ise doğrudan obje yaratmadan interface'i kullanan objeler kullanmak. Bu problem çözümüne ise `Dependency Injection` deniyor. Ayrıca `Inversion of Control (IoC)` olarak ta bilinir.

> Dependency Injection Loosely Coupled denen Geniş Bağlı sistemleri oluşturmak için bir tasarım modelidir. Kafa karıştırıcı olabilmesine karşın özellikle MVC tasarım modelinde oldukça önemlidir.

## Dependency (Bağımlılık) Bozma ve Tanımlama

DI desenini iki parçadan oluşuyor. İlkinde, bileşenimdeki somut sınıf bağımlılığını kaldırıyorum. _--bu örnekte PasswordResetHelper bileşeni_. Bunu parametre olarak interface kabul eden bir sınıf constructor'ı (yapıcısı) oluşturarak yapıyorum;

```
public	class	PasswordResetHelper
{
   private IEmailSender emailsender;
   public PasswordResetHelper(IEmailSender emailsenderParam)
   {
      emailSender = emailsenderParam;
   }
   public void	ResetPassword()
   {
      //IEmailSender mySender =	new MyEmailSender();
      //...e-mai detayarını yapılandırmak için interface'i çağırıyoruz
      emailsender.SendEmail();
   }
}
```

_PasswordResetHelper_ sınıfının constructor'ında _IEmailSender_ interface'inin dependency tanımlaması yapılıyor. Yani IEmailSender'ı uygulayan obje almadıkça bu sınıf oluşturulup kullanılamaz. Bağımlılık tanımlamasında _PasswordResetHelper_ sınıfının artık _MyEmailSender_ ile alkası yok. Bu sınıf sadece IEmailSender interface'sine dayanır. Kısacası PasswordResetHelper sınıfı artık IEmailSender interface'sinin nasıl tanımlandığını bilmiyor diyebiliriz.

## Bağımlılıkları enjekte etme (Injecting Dependencies)

DI iki parçadan oluşuyor demiştik. Birincisi dependency'i tanımlamaydı. İkincisi ise PasswordResetHelper sınıfı tarafından tanımlanan dependency'i `inject`(enjekte) etmektir. Bu sebeple buna _dependency injection_ diyoruz.

Tüm bunların anlamı şudur ki, ben hangi sınıfın _IEmailSender_'i kullanacağında karar vermem, o sınıftan bir nesne oluşturup o nesneyi PasswordResetHelper'in yapıcısına parametre olarak göndermem gerekiyor.

> PasswordResetHelper sınıfı bağımlılıklarını yapıcı metodu ile tanımlıyor. Buna constructor injection da denir. Ayrıca bağımlılıklarımı bir public özellik ile de tanımlayabilirim. Bu da setter injection'dur.

Oluşturmuş olduğumuz bağımlılıklar sınıflarımıza runtime dediğimiz çalışma sırasında enjekte edilirler. Böylelikle uygulamayı çalıştırdığımızda hangi interface'i kullanacağımızı seçebiliriz. Farklı e-mail sağlayıcılarından istediğimi seçip yolumuza öyle devam edebiliriz. Böylelikle DI bize bir önceki [yazımda](https://ozturkenes.com/blog/loosely-coupled-kavrami) resimdeki gibi bir ilişkiye sahip olmamızı sağlaybilir.


MVC Notları - Dependency Injection


### Loosely Coupled (Geniş Bağlı) Bileşen Oluşturmak

Merhabalar. Loosely Coupled kavramını kendi çapımda örnek vererek anlatmaya çalışacağım.

Uygulama geliştirirken elimizden geldiğince
bağımsız bileşen yazmak ve bileşenlerin birbiri ile olan bağlılığını en aza indirgemek isteriz. Çünkü böylesi bir sistem esnek bir sistem olur ve aynı zamanda yönetmesi kolay olur. Özellikle büyük bir proje yazıyorsak altından kalkması çok daha kolaylaşır diyebiliriz.

En ideal çözüm de, tüm bileşenlerin diğerlerinden habersiz olması ve soyut interfaceler ile uygulamanın farklı alanlarında kullanılması. İşte bu yöntem `loosely coupled` olarak biliniyor. Ayrıca uygulama için test yazma ve düzenleme işlemlerini kolaylaştırıyor.

Basit bir örnek vermek istiyorum. Diyelim ki elimizde _MyEmailSender_ adında e-mail gönderen bir bileşen var. Bunun için _IEmailSender_ adında içinde e-mail göndermek için public fonksiyonlar tanımlanmış bir `interface` tanımlarım.
E-mail gönderme ihtiyacı duyan başka bir bileşen olsun. Ona da _PasswordResetHelper_ diyelim. Bu bileşen de interface'im içindeki fonksiyonlar sayesinde e-mail gönderme işlemi yapabilir. Resimde görüldüğü gibi iki bileşenim arasında direkt olarak bir bağlılık yok

![interface](/blog/interface1.jpg)

_IEmailSender_ interface'ini oluşturarak iki bileşenim arasında bir bağlılık olmadığına emin olduk. Şimdi ben _MyEmailSender_ bileşenimi başka bir mail sağlayıcı ile değiştirebilirim.

Az da olsa fikir oluşturması dileği ile..


MVC Notları - Loosely Coupled Kavramı


Merhaba sevgili okurlar. Bir Windows kullanıcısısınız ve benim gibi Linux komutlarını öğrenip geliştirmek istiyorsanız veya belli bir yazılım geliştirme sürecinde Linux Araçlarına ihtiyacınız varsa ve sanal makinaya olsun, dual boot ile Windows'un yanına Linux kurmak olsun istemiyorsanız başka bir çözüm daha var.

Henüz beta aşamasında olan `Bash on Ubuntu on Windows` ile Windows'üzerinde Ubuntu Bash'ı kullanabilirsiniz.

Bir takım özelliklerinden bahsedelim:<br>

1. `grep`, `sed`, `awk` gibi ortak komut satırı yardımcı-programlarını destekler ve çalıştırır.<br>
2. Komut satırı ile dosyalar arası işlemler yapabilirsiniz.<br>
3. Komut satırı yardımcı programlarına dayalı çekirdek programları Bash'ta çalıştırabilirsiniz.<br>

## Kurulum

Öncelikle kurulu işletim sisteminin `64-bit` olması ve `14393.0` veya üstü bir güncelleme sürümünde olması gerekmekte.<br>

![UbuntuBash1](/blog/ubuntubash1.jpg)

Bash'ı Windows'ta çalıştırmak için:

1.Windows Geliştirici(Developer) Mod'u Etkinleştirin.<br>
2.Linux için Windows Altsistem'i (Windows Subsystem for Linux) etkinleştirin.

### Geliştirici Mod'u Aç

1.Ayarlar -> Güncelleme ve Güvenlik -> Geliştiriciler için<br>
2.Geliştirici Mod butonunu seçin.<br>

![UbuntuBash2](/blog/ubuntubash2.jpg)

### Linux İçin Windows Altsistem Aç

1.Başlat üzerinde `Windows özelliklerini aç veya kapat` diye aratıp açın.<br> 2.`Linux için Windows Altsistem`'i seçin ve Tamam'a tıklayın.<br>

![UbuntuBash3](/blog/ubuntubash3.jpg)

Bu işlemi komut satırı üzerinden yapmak isterseniz:
<br>1.Başlat üzerinden `PowerShell`'i yönetici modda açın.

```
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
```

komutunu girin ve bekleyin. Bittiktan sonra kapatabilirsiniz.
Bu işlem bittikten sonra bilgisayarı mutlaka yeniden başlatın.

## Çalıştırın

Başlat üzerinden `cmd`'yi çalıştırıp `bash` komutunu girin veya direk başlat üzerinden bash aratıp açın.
Sizden Lisans için onay isteyecektir. `y` basıp kabul ettikten sonra Ubuntu kullanıcı mod'u yüklenecek ve `Bash on Ubuntu on Windows` kısayolu eklenecektir.

Daha sonra Bash'ı ister kısayol ile ister komut satırına 'bash' komutu girerek çalıştırın.

Yüklemeden sonra Linux dağıtımı `%localappdata%\lxss` dosyasında konumlanacak. Bunun olduça güzel bir sebebi var.

> <p sytle="font-size:20px;"><b>Windows araçlarını ve programlarını kullanarak bu konumda dosyaları düzenlemek veya dosya oluşturmasını önlemek.</b> Eğer bu yapılırsa büyük ihtimalle Linux dosyalarımız bozulacaktır.</p>

## Kullanıcı Oluşturun

Bash'ı ilk çalıştırdığınızda sizden kullanıcı oluşturmanız istenecektir.Bir kullanıcı adı ve şifre belirledikten sonra Ubuntu Bash'ı kullanabilirsiniz. Okuduğunuz için teşekkür ederim.

> Kaynak: https://msdn.microsoft.com/en-us/commandline/wsl/about


Windows 10 üzerinde Ubuntu Bash


...~~2016~~

2017'ye günler kala geride bıraktığımız yıla dönüp kendi adıma biraz anlatmak istiyorum.

## Güzel başlangıçlar...

Bu yıl benim için gerçekten ilgilenmek istediğim alanlarda ilkleri yaşadığım bir yıldı. Geçtiğimiz okul sezonunun bitmesiyle yaz tatilinde YTÜ Teknopark'ta [Corm](http://www.corm.com.tr/) şirketinde gönüllü staj yapmaya başladım.Yazılım alanında ilk stajımdı. Javascript ve teknolojileri üzerine çalıştım. Evet tatil yapmayıp iki ay boyunca çalıştım. Yazılımla uğraşmayı seviyorum. Benim için çok güzel geçmiş iki aydı. Güzel bir deneyim oldu.

Daha sonra yamaçparaşütü kariyerime başlamış bulundum. Aslında daha önce tanışmıştım yamaçparaşütü ile. Serdivan Kırantepe'de dostum Burak Aytürk'le beraber Sayın Kubilay Ertürk hocamıza [tandem](https://www.facebook.com/mavikanatsakarya/?ref=ts&fref=ts) uçuşlarında yardım eder günü onunla geçirirdik. Arada da alır single kanadı yer çalışması yapardık. Bu spor yazarken bile beni heyecanlandırıyor. Önceleri sürekli araştırır, videolar izler bu sporu yapanlara özenirdim. Daha sonra eğitim almaya karar verdim. Aslında öğrenci için maaliyet açısından uygun bir spor değil. Oldukça para harcamak gerekiyor. Fakat imkanlar yok ta değil. Ben Adapazarı Türk Hava Kurumu'na giderek bu imkanı buldum. Türk Hava Kurumu vatandaşlara ücretsiz Yamaçparaşütü, Yelken Kanat, Planör, Serbest Atlayış eğitimleri veriyor. Vatandaşlarına ücretiz havacılık eğitimi veriyor olmaları dünyada hiçbir kurumun yapmadığı birşey. Kurumda çok güzel insanlarla tanıştım. Ara sıra gider saymanımıza yardım ederdik. THK'da puan sistemi var. Belirli konularda yardımlar yapıp puan topluyorsunuz ve bu puanlar sizi eğitime götürüyor. Yazın tercih yaptık ve ikinci tercih ile 19 Eylül-04 Ekim arasındaki eğitimi kazandım. Eskişehir İnönü'de YP Başlangıç eğitimi aldık. İki buçuk hafta benim için o kadar güzeldi ki hayatımda unutamayacağım güzel dosluklar ve anılar biriktirerek geldim. Şimdilik bunu kısa tutmak isterim, daha sonra ayrı bir yazı olarak eğitim maceramızı anlatmayı düşünüyorum.

## Kötü anılar...

Bu yılın bitmesini artık dört gözle bekliyor herkes. Bu yıl bildiğiniz gibi arkamızda çok kötü anılar bıraktık. Öncelikle 15 Temmuz'da yaşanan darbe girişimi. Terör girişimleri, patlamalar, doğuda verdiğimiz şehitler... Bitmek bilmiyor. 2017'ye geçmemiz birşeyi değiştirmeyecek tabi. Sonuçta değişen bir rakam. Fakat 2016'nın bu kadar kötü şeylerle anılması artık bitsin dedirtiyor insana.

## Şuan ve sonrası...

Şuan da 2016-2017 sezonunun ilk dönemini bitirmek üzereyiz. Ben bu sezonda yine durmayıp yamaçparaşütü sezonu da kapanmış iken okulumuz içerisindeki Teknopark'ta [C1 Soft](https://www.yuceyazilim.com.tr/)'ta tekrar gönüllü staja başladım. Asp ile MVC Teknolojisini öğreniyorum. Ofiste zaman oldukça güzel geçiyor. Okul saatine kadar çalışıp derse geçiyorum. Yamaçparaşütü demişken 2017'de çok güzel planlarımız var. Kısaca bahsetmek istiyorum. Kocaeli Kartepe Belediyesi Yamaçparaşütü Takımı kurulacak ve ben dahil yaklaşık 15 kişi takım pilotu olacağız... Geçen çarşamba, Kocaeli'de hoş bir kafede paraşütçülerle buluşup planlar yaptık. Alınacak malzemeler, eğitimler, düzenlenecek festivaller, katılınacak yarışmalar.. Bunları konuşmak hepimiz adına çok heyecan vericiydi. İnşallah hepsi bir bir gerçekleşir...

2017 ve sonrası ne getirir bilmiyorum ama ülkem adına terörün hiçbir türlüsünün yaşanmaması, adaletsizliklerin sona ermesi, bu vatana kastetmek isteyenlerin cezalarını çekmesini istiyorum...

> Sağlıklı, huzurlu ve mutlu yıllar!


2017


Steve Jobs Gibi Düşünmek adlı kitabı okurken, içinde geçen birkaç söz dikkatimi çekmişti. Paylaşmak istedim.

> "Vaktiniz sınırlı onu başkasının hayatını yaşamakla ziyan etmeyin. Diğerlerinin fikirlerinin yarattığı uğultunun iç
> sesinizi boğmasına izin vermeyin. Ve en önemlisi, kendinizi kalbinizin ve sezginizin sizi götürdüğü yere gidecek cesarete sahip olun."<br>-Steve Jobs

> "İşin hayatının büyük bir bölümünü dolduracak, bu durumda hakikaten tatmin olmanın tek yolu çok iyi olduğuna inandığın işler yapmak.
> Ve çok iyi işler yapmanın tek yolu da, yaptığın işi sevmek" <br> -Steve Jobs

> "Başkalarının yapabileceği hiçbir şeyi yapma,
> neredeyse imkansız olmayan hiçbir projeye girişme." <br>Edwin Land

En ilgincime giden de Picasso oldu.

> "İyi sanançılar kopyalar, büyük sanatçılar çalar." <br>-Pablo Picasso

Doğru yorumlanmadığı sürece ilham alanların başını ağrıtacak bir söz olabilir.Bakınız: [Onedio](ttps://onedio.com/haber/-iyi-sanatcilar-kopyalar-muhtesem-sanatcilar-calar-sozune-fazlaca-kapilmis-20-sanatci-729554) :)

Ve tabi son olarak;

> "Think different" -SJ

:)


Steve Jobs Gibi Düşünmek


Bu ülke bunları haketmiyor...
Maalesef bugün de içimze ateş serpen bir haberle daha uyandım. Yine bir terör saldırısı yine askerim, vatandaşım kayıp. Artık bıktık. Bu güzel vatanın bu tür kalleşlerle uğraşması içler acısı bir durum. Bir önceki patlamanın acısı geçmemişken bir patlama daha insana öyle koyuyor ki. Anlatılamaz. Tüm bunlara kasteden ve zemin hazırlayan her kim varsa hem dış güçler olsun hem ülkemizdeki yanlış siyasiler olsun cezalarını misliyle en ağır şekilde çekmeleri artık tek duam. Bizimde bir vatandaş olarak tek görevimiz askerimizin ve polisimizin yanında olmak ve ülke adına doğru seçimler yapmaktır. #kayseri

> İnsan olan vatanını satar mı?<br> Suyunu içip ekmeğini yediniz.<br> Dünyada vatandan aziz şey var mı?<br> Beyler bu vatana nasıl kıydınız?<br>-Nazım Hikmet RAN


Kayseri


<span style="background-color:yellow; color:black">Kimsenin bilemeyeceği şeyler.</span> Bu naçizane kitap ile kitapçının birinde sapsarı kapağının gözüme çarpması ile karşılaştım. Her zamanki gibi kapağını inceledikten sonra ilk yaptığım arka kapağını okumak oldu. Birkaç ilginç, cevabı pek bilinmeyen soru başlığı gördükten sonra açıp baktım içine. Azar azar okumuştum rastgele açtığım yerlerden. Fark ettim ki yazarın dili çok sade ve eğlenceli. Üstelik konularda ilgi çekici, almadan edemedim. Yazar [Sinan Canan]() adlı bir bilim insanı. Haliyle kitabında da bilimsel konulardan bahsediyor. Ülkesine ve Türkçe'mize düşkün biri. Kitabın başlarında bilimsel konulardan çok, toplumsal konulardan bahsediyor. Ülkemizin bilim konusunda neden diğer ülkelerden gerisinde olduğundan. Türkçe'deki yabancı kelimelerin fazlalığından vesaire.. Gerçektende yazar birtane bile yabancı kelime kullanmamış kitabında. Hatta bana yabancı gelen kelimeler eski türkçe kelimelerdi maalesef. Bu yönüyle de acaip ilgimi çekti sayın yazar. Bazı konu başlıklarından bahsedecek olursam; Evrim hakkında neden yanılıyoruz? Tam olarak kaç tane tabiat konunu var, Bilinç dışı eylemlerim, bilinçli eylemlerimden katbekat fazla ise ben, kendim miyim? Gibi... Evrim konusunda insanların neden ayrılığa düştüğü, tabiat kanunları, Kaos teorisi vs. Konular çoğu insanın içten içe merak ettiği fakat kimisinin üstüne fazla düşmediği, fazla düşeninde içinden çıkamadığı ilginç sorulardan oluşuyor genelde. Eğer sizinde bu tarz konulara az da olsa ilginiz varsa ve hem bilgilendirici, hem de hayata karşı sorgulatıcı şeyler okumak isterseniz okumanızı ve;
yazarın [kişisel sayfasını](https://www.sinancanan.net/) takip etmenizi öneririm. Kalın sağlıcakla...


Kimsenin Bilemeyeceği Şeyler kitabı hakkında

Kimsenin Bilemeyeceği Şeyler


Merhabalar. Bu yazımda package.json doyasından bahsedeceğim. Bir Node.js projesi yazarken projemizin içerisinde mutlaka bir package.json dosyamız olur. Bu dosyanın içerisinde proje ile ilgili zorunlu-zorunlu olmayan bazı bilgileri içeren bir dosya bulunmalıdır. Bu bilgilerden bahsedelim.

Öncelikle projemizin olduğu klasörün içerisinde bir not defteri oluşuturup ismini `package.json` olarak değiştiriyorum. (Eğer dosya uzantıları klasör seçeneklerinde açık değilse .json yapamazsınız.) Daha sonra bir text editör ile dosyamı açıyorum.

Burdan sonra her package.json bilgisini altında açıklama ile yazacağım.

Başlamadan önde birkaç yazım kuralından bahsetmek istiyorum.
objeler arasında ','(virgül) kullanılır. ';' ile alt satıra geçme işlemi yapılamaz. Son objenin sonunda hiçbirşey bulunmaz. Hakeza bu objenin içerisindeki nesnelerde de geçerlidir.

## name

Proje için bir isim giriyoruz. Küçük harflerle olmalı. Eğer birden fazla kelime kullanılırsa aralarda '-' olması tavsiye edilir. **Zorunlu**

```
"name" : "proje-ismi",
```

## version

[Semantic Versioning](http://semver.org/) denen bir versiyon tanımlama sistemiyle düzenlenir. O da şu şekildedir;
3 kısımdan oluşur:<br>
1.MAJOR: Farklı bir API değişikliği yaptığında.<br>
2.MINOR: Geriye dönük bir yolda fonksiyonellik eklediğinizde.<br>
3.PATCH: Geriye dönük bug düzeltmesi yaptığınızda.<br>
**Zorunludur.**

```
"verison":"0.0.1", //MAJOR.MINOR.PATCH
```

## description

Projenin tanımıdır. Kısa tutulması tavsiye edilir.

```
"description":"Projenin tanımını yazınız.",
```

## author

Projenin yazarı/yazılımcısı. Umarım ki kendi isminizi yazarsınız.

```
"author":"Enes Ozturk",
```

## script

Kendi node komutunuzu oluşurmanızı sağlayan obje. Yani belirlediğiniz komutlara takma ad veriyorsunuz.

```
"script": {
	"start":"node index.js",
    "win32": "electron-packager . myApp --platform=win32 --arch=ia32"
}
```

Verdiğim örnekte mesela komut penceresine `electron main.js` yazmak yerine `node start` yazıyorum.

## bugs

Projen ile ilgili bugların rapor edileceği adres veya email.

```
"bugs": {
  "url": "https://github.com/kullanici-ismi/proje-ismi/issues"
},
```

## dependencies

Projemizde kullandığımız paketleri kullanmamız/indirmemiz için ihtiyacımız olan obje. **Zorunlu olabilir** Eğer kullanacağımız projenin ihtiyaç duyduğu paketler sistemde global olarak yüklü ise ayrıyetten projeye indirmemize gerek yok. Fakat çok küçük olmayan bir proje yapıyorsanız fazla pakete ihtiyacınız olacağından hepsini global olarak indirmek istemezsiniz. Dolayısıyla buna ihtiyacınız olacak.

```
"dependencies":{
  "socket.io":"*", //yıldız son sürümü yükler
  "express":"4.2.x" //4.2 dağıtımının herhangi bir sürümünü yükler
  "winston":"git://github.com/flatiron/winston#master", // adres vererek yükledim
  "bigpipe":"bigpipe/pagelet" //projenin içerisinde bulunuyorsa ordan çektim
}
```

## licence

İnsanların projeniz hakkında kullanım iznini bilmesini sağlayacak obje. Açık kaynaklı bir proje ise MIT kullanırız.

```
"license":"MIT",
```

Şimdilik bir proje için en çok kullanılan ve gerekli olan objelerden bahsettik. Okuduğunuz için teşekkür ederim.

```
  "name": "proje-ismi",
  "version": "1.2.0",
  "description": "Projenin bir tanımı",
  "author": "İsminiz",
  "scripts": {
    "start": "node index.js",
    "electron": "electron main.js"
  },
  "bugs": {
  "url": "https://github.com/nodejitsu/browsenpm.org/issues"
  },
  "dependencies":{
	"socket.io":"*", //yıldız son sürümü yükler
	"express":"4.2.x" //4.2 dağıtımının herhangi bir sürümünü yükler
	"winston":"git://github.com/flatiron/winston#master", // adres vererek yükledim
	"bigpipe":"bigpipe/pagelet" //projenin içerisinde bulunuyorsa ordan çektim
  }
  "license": "MIT"
```


package.json Nedir?


![Cumhuriyet](/blog/ekim29.jpg)

> "Cumhuriyetimiz öyle zannolunduğu gibi zayıf değildir. Cumhuriyet bedava da kazanılmış değildir. Bunu elde etmek için kan döktük. Her tarafta kırmızı kanımızı akıttık. İcabında müesseselerimizi müdafaa için lâzım olanı yapmağa hazırız." <br/>– Mustafa Kemal Atatürk


29 Ekim Cumhuriyet Bayramı'mız kutlu olsun!


![powershell](/blog/powershell.jpg)

Merhabalar, bugün bilgisayarımızda yüklü olan programların listesini herhangi bir program kullanmadan komut penceresi ile oluşturacağız.

Bu komutu kullanmak için bize gerekli olan şey Windows'un yeni nesil komut satırı uygulaması olan PowerShell. Bunu için başlat menüsünü açıp "powershell" diye aratın. En başta çıkan uygulamayı seçin. Karşımıza PowerShell komut penceresi gelecek.<br/>
Daha sonra aşağıdaki kodu kopyalayıp yapıştırın ve Enter tuşuna basın.

```java
Get-ItemProperty HKLM:\Software\Wow6432Node\Microsoft\Windows\CurrentVersion\Uninstall\* | Select-Object DisplayName, DisplayVersion, Publisher, InstallDate | Format-Table –AutoSize
```

PowerShell bize yüklü programların listesini versiyon, geliştirici, yükleme tarihi gibi bilgiler ile birlikte verecek.

Fakat siz büyük ihtimalle bunları bir dosyada liste şeklinde isteyeceksiniz. Bunu yapması da oldukça kolay.<br/>
Kodumuzun sonuna '>' işareti ekleyip bir yol belirleyeceğiz ve oraya çıkartacağız.

```java
Get-ItemProperty HKLM:\Software\Wow6432Node\Microsoft\Windows\CurrentVersion\Uninstall\* | Select-Object DisplayName, DisplayVersion, Publisher, InstallDate | Format-Table –AutoSize > C:\Users\EnesPc\Desktop\YukluProgramlar.txt
```

(Yukarıdaki komutta dosya yolunu kendi bilgisayarınıza göre ayarlayın.)<br/>
Bu kadar basit. Şimdi oluşturulan dosyayı açıp tam listeyi görebilirisiniz. Okuduğunuz için teşekkür ederim.


Windows'ta yüklü programların listesini çıkartma


![Electron.io](/blog/electron1.jpg)

Herkese merhaba arkadaşlar. Bugün ki konumuz Electron.io.
Kısaca tanımlayacak olursak.
Javascript ile yazılmış olan, Html, Css ve JAVASCRİPT teknolojilerini kullanarak
masaüstü uygulama yazmamıza imkanı tanıyan bir NPM paketidir kendisi.

Javascript'in çok popüler ve esnek bir dil olması şimdiye kadar bize onlarca şey yaptırdı. Şimdi ise masaüstü uygulaması yapıyoruz.

Javascript ile desktop/masaüstü uygulaması geliştimenin en önemli özelliği, yalnızca tek bir paket ile aynı kodu her işletim sistemi için(Windows, OSX, Linux) kullanabiliyor olmanız olabilir.
Yani uygulamayı yazıp çıktısını(.exe) almak istediğimizde birkaç komutla her platformda çalışacak hale getirebiliriz.

## Nasıl çalışıyor?

Programımızı Html, Css, Javascript teknolojileri ile kullanıyoruz demiştik.
Bildiğiniz gibi bu teknolojileri biz Web'te arayüz tasarlama ve client-side programlamada kullanıyoruz.
Aslında bakacak olursak biz masaüstü uygulaması değil bir web sitesi tasarlıyoruz. Electron'un görevi bunu gömülü bir sistem olan Chromium web tarayıcısında açması.
Program çalıştığında karşınızda duran, ne kadar öyle gözükmese de, bir web tarayıcısı yani. (Evet bütün sihir bozuldu. Ama ne yapalım bilmenizde fayda var!)

## Electron.io ile yazılan programlar

Şimdi demeyin vay efendim Html, Css, Javascript ile ne kadar çeşitli masaüstü uygulaması yazılabilir ki diye.
Electron ile yazılmış bir kaç program'a örnek vermek istiyorum.
Yazılmış programların en başında herhalde [Visual Studio Code](https://github.com/Microsoft/vscode) ve
[Atom](https://github.com/atom/atom) gelir. Ve tabiki beraberinde kullanışlı 100'lerce uygulama yazılmış şimdiye kadar.
Tam listeyi [buradan](http://electron.atom.io/apps/) görebilirsiniz.

## Başlayalım

Bu yazdıklarımı, bilgisayarınızda Node.js/NPM yüklü olduğunu HTML/CSS/Javascript bilginiz olduğunu
ve bilgisayarınızda basit bir text editör olduğunu varsayarak anlatıyorum.

Öncelikle projemizi oluşturmak istediğimiz bir yer seçip orada yeni bir klasor oluşturuyoruz.
Ben masaüstüne `'electron-app'` adında bir klasor oluşturdum. Daha sonra terminali açıyoruz.

```
npm install -g electron
npm install -g electron-prebuit
```

`npm install -g electron`: Öncelikle Electron'u bilgisayarımıza global olarak yüklüyoruz.<br/>
`npm install -g electron-prebuit`: Bu modül herhangi birşeyi derlemeye gerek kalmadan Electron'u
NPM üzerinden komut satırları ile kolayca kullanmaya yarıyor.

Yüklememiz tamamlandıysa proje klosörümüzün içinde iki adet dosya oluşturacağız.
`index.html` ve `index.js`. Bu dosyalardan bir tanesi Electron'u kullanmak için oluşturuğumuz JS dosyası. Bu dosyanın içinde Electron modülüne ait pencere oluşturma, boyutlandırma gibi kodlar yer almakta. HTML uzantılı dosyamızda ise uygulamamızın içerisinde göreceğimiz kodlar yer alıyor. Sırayla bakalım;

`index.js`;

```
//Electron paketini kullanarak bir uygulama oluşuturuyoruz.
const {app, BrowserWindow} = require('electron')


// Burada pencere objesini global referans olarak tutuyoruz. Eğer bunu yapmaz isek pencere otomatik olarak kapanacak.
let win

function createWindow () {
  // Yeni bir pencere oluşturuyoruz.
  // Pencere ilk açıldığında genişliği 800, yüksekliği 600 px olacak.
  win = new BrowserWindow({width: 800, height: 600})

  // Uygulamanın içerisine index.html dosyasını yükle.
  win.loadURL(`file://${__dirname}/index.html`)

  // Bu kısım şart değil, yazarsanız uygulama başladığında sağ tarafta konsolu görürsünüz. Kodları incelemek açısından şimdilik kalsın.
   win.webContents.openDevTools()

  // Pencere kapandığında uygulamayı kapat.
  win.on('closed', () => {
    win = null
  })
}

// Bu metod Electron başladığında çağırılacak ve bir tarayıcı penceresi oluşturacak.
app.on('ready', createWindow)

// Tüm pencereler kapatıldığında uygulamayı sonlandır.
app.on('window-all-closed', () => {
  // MacOS sistemlerde uygulama ekranı kapanmasına rağman menü çubuğu hala aktif kalabildiğinden dolayı MacOs için ayriyetten bu kodu yazıyoruz.
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // Yine MacOS'ta Dock üzerinde uygulama iconuna tekrar tıklayınca bir pencere daha açar.
  if (win === null) {
    createWindow()
  }
})

// Bu dosyada uygulama ile ilgili başka ana işlemler kodları yazmaya devam edebiliriz.
// Ayrıca onları başka bir dosyaya yazıp buraya referans vererek kullanabiliriz.
```

`index.html`;

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node
    <script>
      document.write(process.versions.node)
    </script>
    , Chrome
    <script>
      document.write(process.versions.chrome)
    </script>
    , and Electron
    <script>
      document.write(process.versions.electron)
    </script>
    .
  </body>
</html>
```

kodlarını yazıp kaydettikten sonra terminalde projemizin bulunduğu klosöre geliyoruz;

```
cd C:\Users\EnesPc\Desktop\electron
```

Daha sonra

```
electron .  //Noktayı kullanmayı unutmayın :)
```

komutu ile uygulamamızı başlatıyoruz.

![Electron.io](/blog/electron2.jpg)

Bu kadar basit. Gördüğünüz üzere `index.html` sayfamız uygulama içerisinde bize sunuldu. Sağdaki konsol ile kodlarımızı kontrol edebiliriz. Başta bu uygulamanın Chromium denilen browser üzerinde açıldığından bahsetmiştim. Bu konsol bir nevi onun kanıtı.

Electron'u kullanmanın farklı yolları var. Biz en basit yollardan biri ile uygulama oluşturduk. İleriki derslerde Electron.io ile ilgili farklı paylaşımlarda bulunacağım. Şimdilik bu kadar. Okuduğunuz için teşekkür ederim!


Electron.io nedir?


Merhabalar, bugün Bootstrap, Skeleton gibi frameworklerden alışık olduğumuz grid sistemini kendimiz yazmaya çalışacağız. Öncelikle biraz Grid sistminden bahsedelim.

# Grid Sistem Nedir?

Basit bir tanımla başlayacak olalım. Bir Grid sistemi içeriklerin yatayda ve dikeyde düzenli biçime sokulması için oluşturulan yapıdır.

Yararları olarak, üretkenliği arttırmak, çok yönlü olması, düzenli sayfalar için ideal olmaları söylenebilir.

Grid sistemleri iki ana bileşenden oluşur. _rows_ ve _columns_. Yani satır ve sütunlar. Column elementleri Row elementlerine yerleştirilerek kullanılır.Sütunlar ise son yapıyı oluşturur ve ana içeriği bulundurur.
Bazı grid sistemleri ek olarak _container_ içerebilir. Bkz. `Bootstrap`.

Şimdi Başlayalım.

## Box Modeli Resetlemek

Box model dediğimiz yapı grid sistemi için önemlidir. Web tarayıcılar, width ve height özelliği atanan elementler için padding ve border değerleri kendiliğinden içermezler. Bu da responsive bir tasarım için iyi bir şey değildir. Fakat bunu `box-sizing` özelliğinin `border-box`' seçeneği ile hem row hemde column için düzeltebiliriz.

```
.row,.column{
   box-sizin: border-box;
}
```

Şimdi sütunlarımızın genişlik yüzdelerini ayarlayabiliriz. Bu farklı ekran genişliklerinde sütunları otomatik olarak ölçeklendirmeye yarıyor.

# Floatları Temizlemek

Grid sistemi sütunları satırları içerisinde yatay olarak sıralayacak. Bu yüzden bizde olası bir kötü görüntüyü ve bozukluğu önlemek için satırlar üzerinde bir temizlik işlemi yapmamız gerekecek. Bu işleme `Clearfix` deniyor.

```
.row:before, .row:after {
    content: "";
    display: table;
}

.row:after {
    clear: both;
}
```

Burada row elementimizden sonra nasıl bir biçimlendirme gerçekleşeceğini belirtiyoruz. Yani yukarıda da görebileceğiniz gibi `content:"";` ile öncesinde ve sonrasında birşey olmayacağını belirttik. Bu işlem row'un uzatılmasını ve column'ların içine yerleşmesini sağlayacak.

# Sütunları Tanımlama

Sütunlar için, stilimizi iki farklı parçada tanımlıyoruz: _ortak stil_ ve _genişlikler_.
Öncelikle ortak stilimizi yazalım:

```
.column{
   position:relative;
   float:left;
}

```

Sütunlar içerisinde _absolute_ pozisyona sahip içerik barındırabilmesi için _relative_ olarak tanımlandı. Ve daha sonra sola yasladık, ki elementimiz başlamaz ise _display:block_ özelliği alınabilsin.

# <a name="bosluk"></a>Boşlukları oluşturma

Daha kolay okunabilirlik ve estetik için boşlukları oluşturup kullanacağız.

```
.column + .column{
   margin-left:1.6%;
}
```

# Sütun Genişlikleri Hesaplama

Hesaplamaya başlamadan önce, her bir satır için en fazla sütun sayısını saptamamız gerekiyor. En popüler seçim ise
12'dir. Çünkü 1,2,3,4 ve 6'ya bölünebilir. Bu seçim çok farklı kombinasyonları içerebilir.

Her satır için neden en fazla 12 sütun olacağını anlamak önemli. Ne kadar sütun istediğimize bağlı olmaksızın her bir satır için gerekli miktarı tamamlamak gerekiyor. Örnek verecek olursak 4 tane eşit sütun istiyoruz. Bu durumda her biri 3'lü yer kaplayan 4 adet span kullanırız (4x3=12). 12'yi aşan sonuçlar sonraki satırda gösterilir.

Bir sütunun maximum kalınlığını biliyoruz. Şimdi tekli bir sütunun genişliğini hesaplamamız gerekiyor. Bunun için aşağıdaki formulü kullanıyoruz.

`tk = (100 - (g*(g-1)))/ms`

- tk = tekli kolon
- g = genişlik (1.6%)
- mc = maksimum sütun (12)

İşlemi yaptıktan sonra tekli bir sütunun genişliğini `6.86666666667%` olarak hesaplıyoruz. Burdan sonra bu sayı ile diğer sütunların genişliğini hesaplayabiliriz.

`sg = (tsg*sm)+(m*(sm-1))`

- sg = sütun genişliği
- tsg = tekli sütun genişliği (6.86666666667%);
- sütun mesafesi (ne kadar yer kaplayacağı) (1-12)
- m = margin (1.6%) (fazlalık payı-boşluk)

Her sütun için formülü uyguladığımızda aşağıdaki değerler ile karşılaşacağız.

```
.column-1 {
   width: 6.86666666667%;
}

.column-2 {
   width: 15.3333333333%;
}

.column-3 {
   width: 23.8%;
}

.column-4 {
   width: 32.2666666667%;
}

.column-5 {
   width: 40.7333333333%;
}

.column-6 {
   width: 49.2%;
}

.column-7 {
   width: 57.6666666667%;
}

.column-8 {
   width: 66.1333333333%;
}

.column-9 {
   width: 74.6%;
}

.column-10 {
   width: 83.0666666667%;
}

.column-11 {
   width: 91.5333333333%;
}

.column-12 {
   width: 100%;
}
```

## Mobil Telefonlar İçin İyileştirme

Grid sisteminin responsive olmasında şimdiye kadar sorun yok. Akıllı telefonlar gibi küçük ekranlı aygıtlar için sütunların genişliği içeriğin okunaklığını koruması için otomatik olarak ayarlanmalıdır. Media sorguları bu noktada bize yardımcı oluyor:

```
@media only screen and (max-width: 550px) {
    .column-1,
    .column-2,
    .column-3,
    .column-4,
    .column-5,
    .column-6,
    .column-7,
    .column-8,
    .column-9,
    .column-10,
    .column-11,
    .column-12 {
        width: auto;
        float: none;
    }

    .column + .column {
        margin-left: 0;
    }
}
```

Burada ekranın 550px'den daha küçük olan aygıtları için her sütunun ekranın tamamını kullanacak şekilde ayarladık.
Artık burada [boşluklar](#bosluk) işimize yaramayacak. O yüzden onları `margin-left: 0px` ile sıfırladık.

# Kullanalım

CSS ayarlarımızı yaptıktan sonra HTML yazarak grid sistemimizi kullanabiliriz.

```html
<div class="row">
  <div class="column column-4"></div>
  <div class="column column-4"></div>
  <div class="column column-4"></div>
</div>

<div class="row">
  <div class="column column-2"></div>
  <div class="column column-4"></div>
  <div class="column column-4"></div>
  <div class="column column-2"></div>
</div>
```

[Bu linkten](https://codepen.io/assets/embed/ei.js) kodlarımızın çıktısını inceleyebilir, ekleme, düzenleme yapabilirsiniz.
Okuduğunuz için teşekkür ederim, paylaşıp destek olabilirsiniz.


Grid sistemi nedir? Nasıl yazılır?


Merhabalar, CSS'te benim biraz kafamı karıştıran konu olan _nth-child_ ve _nth-of-type_ seçicilerinden bahsetmek istiyorum.

İki seçici bazı durumlarda aynı rakam ile aynı elementleri seçselerde aslında farklı şeyler olduğundan her zaman aynı sonucu vermezler.

`nth-child` : Bu seçici ile **_aynı düzeydeki_ elementlerden index numarasına göre seçim yaparız.** (_0'dan başlamaz dikkat!_) Başına bir tag ismi koymaz isek `body` tagı içerisindeki tüm _parent_ elementler arasından seçim yapar. Tag ismi koyar isek o tag'ler arasından seçim yapar. Hemen bir örnek verelim.

`:nth-of-type`: Bu seçici ise _türe_ göre seçim yapar. :nth-child'ın aksine başında tag bulundurmaz isek, **aynı düzeydeki _değil_, aynı türdeki tüm elementler arasında seçim yapar.**

```html
<div class="container">
  <ul class="list-group">
    <li class="list-group-item">Apple</li>
    <li class="list-group-item">Orange</li>
    <li class="list-group-item">Banana</li>
    <li class="list-group-item">Kiwi</li>
  </ul>
  <p>Hello!</p>
  <p>My name is</p>
  <p>Enes</p>
  <ul class="list-group">
    <li class="list-group-item">A</li>
    <li class="list-group-item">B</li>
    <li class="list-group-item">C</li>
    <li class="list-group-item">D</li>
  </ul>
</div>
```

Mesela böyle bir yapımız var. Burada _parent_ elementimiz _.container_'dır

```
:nth-child(2){
   background:red;
}
```

En genelde _parent_ olarak sadece `.container` class'ına sahip div olduğu için ve biz de `2` indexi seçtiğimiz için onu(.container) atlar(çünkü divimiz 1. indextedir), **_body_ tagini bulur**, onu kırmızı yapar. Tüm ekran kırmızı olur.

Bazı durumlarda bu yöntem kullanılabilir fakat. Çoğu kez hataya yol açar. Mesela şimdi parantez içindeki sayıyı bir bir arttırmayı deneyin. Bu sefer 3'ten sonra `li` taglarına geçmeye başladı. Yani işler biraz karıştı.

## :nth-of-type Kullanımı

```
:nth-of-type(2){
   background:red;
}
```

Bu sefer `:nth-of-type` kullandık. Yine tag kullanmadık. Çıktı olarak ise tüm elementlerin 2.sini ele aldı.(`p, li, ul`)

## CSS Seçiciler Oyunu

CSS'de yeni iseniz ve seçicilerde kendinizi basit alıştırmalarla geliştirmek istiyorum derseniz [CSS Diner](http://flukeout.github.io/) adındaki bu güzel oyunu oynayabilirsiniz.


nth-child ile nth-of-type arasındaki fark nedir?


Merhabalar, bu yazımda birazcık kendimden ve bir an önce bitmesini istediğim yaz tatilimden bahsedeyim diyorum _(He ya bitsin artık :D)._ Yanlış anlaşılmasın, aslında o kadar da kötü geçmiyor. Bu yaz tatilinde kendi adıma güzel şeyler yaptığımı düşünüyorum.

Okulların tekrar açılmasına bir aydan az kaldı artık _(Durun ağlamayın)._ Geçen iki ayda bir yazılım şirketinde stajyer olarak çalıştım _(Evet, henüz bölümün ilk senesine başlamamışken)._ Benim için faydalı olan taraf burası. Oradaki yazılımda ileri seviyedeki abilerimin vermiş olduğu araştırma konuları ve projeler üzerinde çalışarak kendimi C# ve Javascript dillerinde biraz geliştirdim. Özellikle Javascript. Yaptığım araştırmalar, projeler ile JS dünyasını daha iyi tanımış oldum. JS'yi öğrendikçe insanın öğrenesi geliyor.

Bu sene pek tatil yapamamış olsamda kalan günlerimi gezerek geçirmek istiyorum. Her sene bu aylarda genellikle memleketimde olurdum. Denize girer gezer tozardım. Bu sene biraz farklı oldu. Bundan sonrada öyle olacak gibi gözüküyor. Okulların açılacağı günü de iple çekiyorum _(Durun vurmayın)._ Evet evet ilk defa okulların açılmasını iple çekiyorum. Okulumu seviyorum diyebilirim. Aslında bakarsanız beni oraya çeken en büyük etken bu değil.

Sakarya'da bir [yamaç paraşütü](https://www.facebook.com/mavikanatsakarya/?fref=ts) ekibi var ve ben de o ekibin içerisindeyim. Haftanın iki veya üç günü Kırantepe'ye çıkar yolcu uçururuz. Yamaç paraşütü dünyanın en zevkli şeylerinden biri. _Kesinlikle ilerideki yaşam tarzım (İnşallah :d)._ Bir kere yukarı çıktıktan sonra aşağı inmek istemiyorsunuz. Eğer sizinde hayalinizde böyle birşeyi tatmak varsa, hiç çekinmeyin. Gelin derim. _Yükseklik korkunuz mu var?_ Uçmak için gelen yolcuların bir çoğunda yükseklik korkusu var. Fakat havalanıp, aşağı indikten sonra korkularından eser kalmıyor ve tekrar denemek istiyorlar. Kaçırmayın derim.

Şimdilik benden bu kadar, sonraki yazımda görüşmek dileği ile..


Yaz tatili nasıl geçiyor?


Merhabalar <i class="fa fa-hand-paper-o" aria-hidden="true"></i>. Bugün sizlere Github Pages ve Jekyll'den bahsedip bu ikisi ile basitçe nasıl bir blog oluşturulduğundan bahsetmek istiyorum.

## Github Pages nedir?

Github tüm kullanıcılarına kişisel, organizasyon veya proje sayfaları için Github Depoları(Repositories) üzerinden
yönetilen hosting sağlıyor. Ücretsiz bir kullanımı var. Biz kendimize kişisel site(blog) kuracağız.

#### Github Pages kurulumu

Github ile blog oluşturmak için yeni bir _depo_ oluşturun ve ismini **_`kullanıcıisminiz.github.io`_**
olarak ayarlayın. Şimdilik deponuzun içine **`index.html`** dosyası ekleyip içine basitçe **`<h1>Merhaba Dünya!</h1>`**
yazarak deneme için dosyamızı depomuza işleyelim(commit).

![create-index](/blog/createindex.jpg)

Sitemiz tamam. Adres çubuğuna
**`kullanıcıisminiz.github.io`** yazarak sitenizi açın. Sayfada

> Merhaba Dünya!

çıktısını gördüyseniz başarılı bir kurulum yapmış bulunuyorsunuz.
Gihub Pages'i anladıydanız biraz Jekyll'den bahsedelim.

## Jekyll nedir?

_Jekyll_, basit, blog odaklı, static site oluşturucudur. `Ruby` ile yazılmıştır. Github Pages tarafından desteklenen bir mekanizmadır.
Jekyll bizim için gerekli bütün site şablon dosyalarını otomatik olarak oluşturuyor.
`Markdown` sözdizimini destekler. Yani biz içeriğimizi Markdown formatıyla yazarız, Jekyll bizim için bunları `html` formatına çevirir.

## Başlamadan önce

### Windows üzerinde mi çalışıyorsunuz?

Eğer sizde Windows işletim sistemi kullanıyorsanız biraz zahmet olacak ama Jekyll kullanmak için birkaç program kurmamız gerekmekte.
Jekyll Ruby ile yazılmış bir dil olduğu için öncelikle bilgisayarımıza [Ruby](http://rubyinstaller.org/downloads/)'i kurmamız gerekiyor.

Yukarıda verilen linkten sisteminize uygun olanı indirin ve kurulumu yapın. Kurulum sırasında `Add Ruby executables to your PATH` kutusunun işaretli olduğunda emin olun.

Jekyll raw kaynak kodlu birkaç `dependency` dediğimiz pakete sahip olduğu için ve bunları uygun bir şekilde yürütebilmesi için
Development Kit'e ihtiyacımız var. Aynı linkten Development Kit'i indirebilirsiniz.(Biraz aşağıda)

Sisteminize uygun DevKit'i indirdikten sonra dosyaları biryere çıkartın.
`C:\RubyDevKit` tavsiye ederim.Şimdi DevKit'i başlatmak ve Ruby ile bağlamamız gerekiyor.
Terminali açarak.

```
cd C:\RubyDevKit
```

komutu ile ilgili dosyaya girin.

```
ruby dk.rb init
```

komutu ile Ruby kurulumunu otomatik
algılayacak ilgili yapı(configuration) dosyalarımız oluşturulacak. Daha sonra

```
ruby dk.rb install
```

ile oluşturulan dosya ile DevKit Ruby yüklemesine bağlanacak.
Ruby için hepsi bu kadar. Artık Ruby Gem adlı paket sistemine sahibiz. Bu sistem Node.js'in npm paket yöneticisi gibi. Gerekli paketleri `gem` komutu ile yükleyeceğiz.

Terminali açarak

```
gem install jekyll
```

diyerek jekyll bilgisayarımız global olarak kuruyoruz. Artık Jekyll ile site oluşturabiliriz.

Biz bu yazıda sıfırdan bir Jekyll sitesi değilde var olan bir Jekyll temasını Github üzerinde Fork'işlemi ile
koplayayıp kullanacağız. Bu şekilde fazlasıyla zaman kazanırız.

## Bir Jekyll projesi Fork'la

10 binden fazla Fork'u olan [Jekyll-now](https://github.com/barryclark/jekyll-now) adlı projeyi Github profiliniz üzerinden forklayın.

Daha sonra _`Settings`_ kısmından deponun ismini _`kullaniciisminiz.github.io`_ yapın.

Şimdi gerekli dosyaları değiştirmek için depoyu local makinemize, kendi bilgisayarımıza klonlamamız lazım. Ben Github Dekstop kullanıyorum.

Github programımıza açtıktan sonra, sol üst köşeden <i class="fa fa-plus" aria-hidden="true"></i>
işaretine daha sonra `clone`'a tıklayarak yeni bir depo oluşturuyoruz. Dosya yolunu seçtikten sonra tamam diyerek dosyaları
bilgisayarınıza kopyalayın.

Clone işlemi bittikten sonra bir text editör ile clone dosyamızı açın. Ben Visual Studio Code kullanıyorum. Git işlemlerini de
terminal veya Github Desktop kullanmadan halledebiliyorum.

`_config.yml` dosyasını açın. Bu en önemli dosyalardan biri. İçerisindeki `name, description, urls vs..` gibi değişkenler var.
Bunun içerisindeki bazı değişkenleri kendinize göre değiştirin.

Şimdilik karakter sorunu yaşamamak için `_config.yml` dosyamıza `encoding: utf-8` kodumu da ekliyorum ve kaydediyorum.

Şimdi `http://kullaniciisminiz.github.io` adresine giderek sitenize göz atabilirsiniz.

#### Not

Dosyalarınız üzerinde çalışırken bilgisayarınıza kopyaladığınız depo üzerinde değişikler yapacağız fakat bunları her defasında Github'a işlemek bizi biraz uğraştıracak.
Bununla sürekli uğraşmamak için terminalde dosyamızın olduğu yere gidiyoruz.

```
cd C:\Users\EnesPc\Documents\GitHub\oztrkeness.github.io
```

burada `jekyll` komutu ile önce dosyalarımızı build ediyoruz.

```
jekyll build
```

Daha sonra

```
jekyll serve
```

diyoruz. Artık dosyalarımı `localhost:4000` üzerinde servis ediliyor. Bu adrese giderek yaptığınız değişiklikleri Github'a atmadan önce görebilirsiniz.
Fakat bunun aksine

```
jekyll serve --watch
```

komutunu tavsiye ederim. Bu komut yaptığımız değişiklikleri serve komutunun durdurup başlatmamıza gerek kalmadan görmemizi sağlıyor.
Yaptığımız değişiklikleri kaydettikten sonra tek yapmamız gereken sayfayı yenilemek.

## Dosyalara göz atalım

Aşağıda Jekyll site yapımız var inceleyerek daha fazla bilgi edinebilirsiniz.

```
/Users/barryclark/Code/jekyll-now
├─ CNAME # Kendi domain adresimizi içerir (Varsa)
├─ _config.yml #Jekyll'in yapı dosyaları
├─ _includes #Şablon dosyalarında kullanılacak kod parçaları
│  ├─ analytics.html
│  └─ disqus.html
├─ _layouts
│  ├─ default.html # Ana şablon. <head>, <navigation>, <footer> gibi tagları içerir
│  ├─ page.html # Static sayfa düzeni
│  └─ post.html # Postlarımızın sayfa düzeni
├─ _posts # Postarımızın bulunduğu klasör
│  └─ 2014-3-3-Hello-World.md
├─ _site # Jekyll sitemizi inşa ettikten sonra HTML'e çevrilen dosyalarımız burada tutulur ve bize sunulur.
│  ├─ CNAME
│  ├─ LICENSE
│  ├─ about.html
│  ├─ feed.xml
│  ├─ index.html
│  ├─ sitemap.xml
│  └─ style.css
├─ about.md # Static 'Hakkında' sayfamız.
├─ feed.xml
├─ images # Resimlerimizin bulunduğu klasör.
│  ├── first-post.jpg
├─ index.html #Anasayfa düzeni
├─ scss # The Sass style sheets for my website
│  ├─ _highlights.scss
│  ├─ _reset.scss
│  ├─ _variables.scss
│  └─ style.scss
└── sitemap.xml
```
