Compare commits

...

17 Commits

Author SHA1 Message Date
67fdff9fc1 style(fix): remove unintended margin from heading
Some checks failed
/ Build (push) Failing after 1m3s
2024-09-02 12:03:09 +03:00
454271677f fix: small enhancements
All checks were successful
/ Build (push) Successful in 1m22s
2024-08-27 21:41:18 +03:00
176a35afe0 fix: typo
All checks were successful
/ Build (push) Successful in 1m3s
2024-08-26 02:03:21 +03:00
b363806fe2 fix: typo
All checks were successful
/ Build (push) Successful in 53s
2024-08-25 14:39:14 +03:00
eddc0a5bbe chore: update package lock
All checks were successful
/ Build (push) Successful in 1m10s
2024-08-25 14:24:46 +03:00
44b798a631 feat: add new post, "sunucumda neler dönüyor"
Some checks failed
/ Build (push) Failing after 13s
2024-08-25 14:23:04 +03:00
4d0ae0c871 feat: add og url field
All checks were successful
/ Build (push) Successful in 52s
2024-08-13 18:02:02 +03:00
209f61b856 feat: add og title and description
All checks were successful
/ Build (push) Successful in 54s
2024-08-13 17:53:06 +03:00
84eca010c8 feat: add opengraph links
All checks were successful
/ Build (push) Successful in 57s
2024-08-13 17:43:36 +03:00
e123643b09 feat: better introduction
All checks were successful
/ Build (push) Successful in 53s
2024-08-13 14:59:15 +03:00
67e356d412 fix: better entry paragraph
All checks were successful
/ Build (push) Successful in 54s
2024-08-13 00:16:26 +03:00
02e92a3049 feat: responsive images
All checks were successful
/ Build (push) Successful in 54s
2024-08-12 23:43:01 +03:00
0ae7d8dac4 style: add new font
All checks were successful
/ Build (push) Successful in 58s
2024-08-12 23:32:18 +03:00
cee9374b63 fix: typos
All checks were successful
/ Build (push) Successful in 53s
2024-08-12 23:18:00 +03:00
2d1a18c253 feat: add images
All checks were successful
/ Build (push) Successful in 56s
2024-08-12 23:10:13 +03:00
5419f8ce67 style: better styling and clarified text
All checks were successful
/ Build (push) Successful in 1m6s
2024-08-12 23:02:10 +03:00
e4405513e2 fix: typo and long summary not working
All checks were successful
/ Build (push) Successful in 58s
2024-08-11 23:27:21 +03:00
16 changed files with 269 additions and 61 deletions

View File

@ -1,10 +1,14 @@
import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import remarkToc from "remark-toc";
// https://astro.build/config
export default defineConfig({
site: "https://blog.log101.dev",
markdown: {
remarkPlugins: [[remarkToc, { heading: "İçindekiler" }]],
},
integrations: [
tailwind({
applyBaseStyles: false,

BIN
bun.lockb

Binary file not shown.

37
package-lock.json generated
View File

@ -12,6 +12,7 @@
"@astrojs/tailwind": "^5.1.0",
"astro": "^4.10.0",
"htmx.org": "^1.9.12",
"remark-toc": "^9.0.0",
"tailwindcss": "^3.4.3",
"typescript": "^5.4.5"
},
@ -962,6 +963,11 @@
"integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
"dev": true
},
"node_modules/@types/ungap__structured-clone": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@types/ungap__structured-clone/-/ungap__structured-clone-1.2.0.tgz",
"integrity": "sha512-ZoaihZNLeZSxESbk9PUAPZOlSpcKx81I1+4emtULDVmBLkYutTcMlCj2K9VNlf9EWODxdO6gkAqEaLorXwZQVA=="
},
"node_modules/@types/unist": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
@ -4731,6 +4737,24 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/mdast-util-toc": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/mdast-util-toc/-/mdast-util-toc-7.1.0.tgz",
"integrity": "sha512-2TVKotOQzqdY7THOdn2gGzS9d1Sdd66bvxUyw3aNpWfcPXCLYSJCCgfPy30sEtuzkDraJgqF35dzgmz6xlvH/w==",
"dependencies": {
"@types/mdast": "^4.0.0",
"@types/ungap__structured-clone": "^1.0.0",
"@ungap/structured-clone": "^1.0.0",
"github-slugger": "^2.0.0",
"mdast-util-to-string": "^4.0.0",
"unist-util-is": "^6.0.0",
"unist-util-visit": "^5.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@ -6307,6 +6331,19 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/remark-toc": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/remark-toc/-/remark-toc-9.0.0.tgz",
"integrity": "sha512-KJ9txbo33GjDAV1baHFze7ij4G8c7SGYoY8Kzsm2gzFpbhL/bSoVpMMzGa3vrNDSWASNd/3ppAqL7cP2zD6JIA==",
"dependencies": {
"@types/mdast": "^4.0.0",
"mdast-util-toc": "^7.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/request-light": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/request-light/-/request-light-0.7.0.tgz",

View File

@ -15,6 +15,7 @@
"@astrojs/tailwind": "^5.1.0",
"astro": "^4.10.0",
"htmx.org": "^1.9.12",
"remark-toc": "^9.0.0",
"tailwindcss": "^3.4.3",
"typescript": "^5.4.5"
},

Binary file not shown.

BIN
public/ikon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

View File

@ -10,7 +10,7 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
}
.emoji-buttons-container {
@apply flex flex-row gap-2;
@apply flex flex-row flex-wrap gap-2;
}
</style>
@ -75,19 +75,19 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
// @ts-ignore detail attribute is added by htmx
if (event.detail.elt.id != "reaction-buttons") {
showError(
"Sunucuya ulaşılamadığı için tepkiniz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz.",
"Sunucuya ulaşılamadığı için tepkiniz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz."
);
}
},
}
);
formElement.addEventListener(
"htmx:responseError" as keyof HTMLElementEventMap,
() => {
showError(
"Sunucudan kaynaklanan bir hatadan dolayı tepkiniz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz.",
"Sunucudan kaynaklanan bir hatadan dolayı tepkiniz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz."
);
},
}
);
}
</script>

View File

@ -53,8 +53,6 @@ const postLink = `/${post.data.category}/${post.slug}`;
const { Content } = await post.render();
const copyPost = post;
copyPost.body = copyPost.body.slice(0, 500);
const { Content: Summary } = await copyPost.render();
import { Image } from "astro:assets";
import questionMark from "@/images/questionMark.svg";
@ -100,25 +98,15 @@ import calendar from "@/images/calendar.svg";
</div>
</div>
</div>
{options.shortSummary && <p class="post-summary">{post.data.summary}</p>}
{
options.longSummary && (
<>
<Summary />
{post.body.length > 500 && (
<a
class="text-inherit text-sm"
href={`/${post.data.category}/${post.slug}`}>
Devamını Oku
</a>
)}
</>
(options.shortSummary || options.longSummary) && (
<p class="post-summary">{post.data.summary}</p>
)
}
{
options.fullText && (
<div class="text-lg">
<div class="text-lg" id="full-text">
<Content />
</div>
)

View File

@ -1,7 +1,7 @@
---
draft: false
title: İlk Katkınzıın Hikayesi
summary: ık kaynak geliştiriciliğe dair izlenimler.
title: İlk Katkınızın Hikayesi
summary: İlk açık kaynak katkınızı yapmak sandığınızdan çok daha kolay olacak!
category: fikir
subcategory: Rehber
date: 2024-08-11
@ -10,79 +10,91 @@ date: 2024-08-11
<style>
h3, hr {
margin: 1em 0 1em 0
margin: 0.7em 0 0.5em 0
}
#full-text p {
margin: 0.5em 0 0.5em 0;
}
figcaption {
color: gray;
margin-top: -0.8em;
text-align: center;
font-size: 0.9em;
}
</style>
Temel ihtiyaçlarımızı karşılamak için inşa edilmiş yapıları düşünün. Yollar, kaldırımlar, kanalizasyon boruları, elektrik hatları… Nasıl bir şehrin işleyişi için bunlar şartsa, yazılım projeleri için de buna karşılık gelen altyapı niteliğinde yazılımlar var. Bu yazılımlar genellikle herhangi bir ücret talep etmeden, mütevazı bir şekilde üstlerine düşen görevi yerine getiriyorlar. Onlar sayesinde genel ihtiyaçlarımız kolay ve ücretsiz bir şekilde karşılanmış oluyor ve projemize has ihtiyaçlarımıza odaklanabiliyoruz.
Buraya kadar olan kısım gayet anlaşılır, hatta biraz sıkıcı. Eğer mesele açık kaynak yazılımları kullanmaktan ibaretse, zaten daha fazla kelime israf etmemize de gerek yok. Bu yazıda bunları kullanmaktan değil, geliştirmekten bahsedeceğiz. Yazının sonunda açık kaynak geliştirici olmanın yalnızca hayır işi veya vicdani sorumluluk olmadığını, aslında bize sağlanmış bir özgürlük ve kendimizi geliştirmenin eğlenceli bir yolu olduğunu göreceğiz! Şimdi izin verin, açık kaynak konusunu biraz daha açalım.
Yazılım projelerimizin belkemiği olan açık kaynak yazılımlar, kullanıma *açık* oldukları kadar geliştirmeye de *açıklar*. Ne var ki, bunları kullanması ne kadar kolaysa geliştirmesi de bir o kadar çetrefilli! Peki bunun bizi yıldırmasına müsaade edecek miyiz, tabi ki de hayır! Bu yazıda açık kaynak projelerde katkı sağlayıcı olmanın zorluklarını bir kenara bırakıp, bunun aslında bize sağlanmış bir özgürlük ve kendimizi geliştirmenin eğlenceli bir yolu olduğunu göreceğiz!
### Açık Kaynak
ık kaynak yazılım, kabaca ifadesiyle herkesin dilediğince kullanabildiği, değiştirebildiği ve başkalarıyla paylaşabildiği kod anlamına geliyor [(1)](https://www.redhat.com/en/topics/open-source/what-is-open-source). Eğer bu tanım yeterince anlaşılır değilse biraz daha açıkça ifade etmeyi deneyelim. Bir yazılımın açık kaynak olması bu yazılımla alakalı bize üç türlü özgürlük sağlıyor:
1. Bu yazılımı projemiz içerisinde bir kütüphane veya çalıştırılabilir program olarak dilediğimiz şekilde ve ortamda kullanabiliyoruz.
ık kaynak yazılım, kabaca ifadesiyle herkesin dilediğince kullanabildiği, değiştirebildiği ve başkalarıyla paylaşabildiği kod anlamına geliyor [(1)](https://www.redhat.com/en/topics/open-source/what-is-open-source). Daha açık bir şekilde ifade edecek olursak: Bir yazılımın açık kaynak olması, bize bu yazılım ile alakalı üç türlü özgürlük sağlıyor:
1. Bu yazılımı projemiz içerisinde bir kütüphane veya çalıştırılabilir program olarak kullanabiliyoruz.
2. Bu yazılımın kodunda kalıcı düzenlemeler, ihtiyaçlarımız doğrultusunda eklemeler ve çıkarmalar yapabiliyoruz.
3. Yazılımın orijinal veya düzenlenmiş kopyalarını başkalarıyla paylaşabiliyoruz hatta duruma göre satabiliyoruz [(2)](https://snyk.io/learn/open-source-licenses/).
3. Yazılımın orijinal veya düzenlenmiş kopyalarını başkalarıyla paylaşabiliyoruz, hatta duruma göre satabiliyoruz [(2)](https://snyk.io/learn/open-source-licenses/).
İlk bakışta bu kimsenin kalkışmayacağı bir hayır işi gibi görünse de projelerinin hızlı bir şekilde yaygınlaşmasını ve gelişmesini isteyen yazılımcılar ve yazılım firmaları bunlarıık kaynak olarak paylaşmayı tercih edebiliyorlar. Bize de bunları *özgürce* kullanması kalıyor, veya değiştirmesi ve geliştirmesi! Herhalde girişte ne demek istediğim şimdi daha iyi anlaşılmıştır. Tekrarlamak pahasına: Açık kaynak yazılımlara katkı sağlamak hayır işi veya vicdani sorumluluk olarak algılanmamalıdır, ihtiyaçlarımız doğrultusunda bu yazılımlarda değişiklikler yapabilmek bize sağlanmış bir özgürlüktür!
İlk bakışta bu kimsenin kalkışmayacağı bir hayır işi gibi görünse de, projelerinin hızlı bir şekilde yaygınlaşmasını ve gelişmesini isteyen yazılımcılar ve yazılım firmaları bunlarıık kaynak olarak paylaşmayı tercih edebiliyorlar. Bize de bunları *özgürce* kullanması kalıyor… veya değiştirmesi ve geliştirmesi! Girişte özgürlük derken ne kastettiğim herhalde şimdi daha iyi anlaşılmıştır. Açık kaynak yazılımlara katkı sağlamak yalnızca bir hayır işi veya vicdani sorumluluk olarak algılanmamalıdır. Bu yazılımlara katkı sağlayabilmek, ihtiyaçlarımız doğrultusunda bu yazılımlarda değişiklikler yapabilmek aslında bize sağlanmış bir özgürlüktür!
O halde artık açık kaynak projelere nasıl katkı sağlayabileceğimizden bahsedebiliriz. Katkı sağlayıcı olmanın çetrefilli yanları var ve katkıda bulunmak istediğiniz projelerin binlerce satır koduyla ilk kez karşılıştığınızda korkmanız muhtemel; her işin başında olduğu gibi! Bu noktada süreci tanımak işinizi oldukça kolaylaştıracaktır ve özgüveninizi arttıracaktır. Süreci iyi bir şekilde anladığınızda ne kadar tecrübesiz olursanız olun açık kaynak geliştiricisi olmanın mümkün, keyifli ve her açıdan gelişiminize katkı sağlayacak bir iş olduğunu göreceksiniz. Aynı zamanda size ilk katkımdan da bahsedeceğim. Lafı daha fazla uzatmadan ilk adımımızı atalım.
O halde artık açık kaynak projelere nasıl katkı sağlayabileceğimizden bahsedebiliriz. Katkı sağlayıcı olmanın çetrefilli yanları var ve katkıda bulunmak istediğiniz projelerle ilk kez karşılaştığınızda tedirgin olabilirsiniz; her işin başında olduğu gibi! İşte tam da bu noktada katkı sağlama sürecini tanımak işinizi kolaylaştıracak ve özgüveninizi arttıracak. Süreci iyi bir şekilde anladığınızda ne kadar tecrübesiz olursanız olun açık kaynak geliştiricisi olmanın mümkün, keyifli ve her açıdan gelişiminize katkı sağlayacak bir iş olduğunu göreceksiniz. Aynı zamanda size ilk katkımdan da bahsedeceğim, ne kadar da nostaljik!
### İlk Adımlar
İşe bir açık kaynak projeyi gözümüze kestirerek başlıyoruz. Gözünüz korkmasın, bu projeyi uzaklarda aramanıza gerek yok. Daha önce yazdığınız bir projenin bağımlılıklarının olduğu dosyayı (package.json, go.mod vb.) açın. Burada bir liste halinde projede kullandığınız kütüphanelere rastlayacaksınız. Projeyi siz yazdıysanız bu kütüphanelerin az çok ne işe yaradığını biliyor olmalısınız, olmasanız da önemli değil, aralarından bir tanesini seçin. Özel bir kritere ihtiyacınız yok, hangisi hoşunuza giderse! Sonra projenin adını bir arama motoruna yazın ve kütüphanenin kaynak kodunun barındırıldığı internet sayfasına gidin. Burası muhtemelen Github olacak.
Birinci adım açık kaynak bir projeyi gözümüze kestirmek. Projeyi uzaklarda aramanıza gerek yok. Daha önce yazdığınız bir projenin bağımlılıklarının olduğu dosyayı (package.json, go.mod vb.) açın. Burada bir liste halinde projede kullandığınız kütüphanelere rastlayacaksınız. Projeyi siz yazdıysanız bu kütüphanelerin az çok ne işe yaradığını biliyor olmalısınız, olmasanız da önemli değil, aralarından bir tanesini seçin. Sonra projenin adını bir arama motoruna yazın ve kütüphanenin kaynak kodunun barındırıldığı internet sayfasına gidin. Burası muhtemelen Github olacak.
Öncelikle, bu proje ile alakalı öğrenmeniz gereken üç bilgi var:
1. En son katkı (commit) ne zaman yapılmış.
2. Kaç katkı sağlayan (contributor) var.
3. Son ayda kaç katkı isteği (pull request) kabul edilmiş.
Eğer bu ilk katkınız olacaksa en geç 1 hafta önce güncellenmiş, en çok katkı sağlayan ve katkı isteği kabul edilmiş projeyi tercih etmenizi tavsiye ederim. Bu tür projelerin katkı sağlama süreçleri daha sistematik bir hale getirilmiş oluyor, yeni gelenlere daha hoşgörülü yaklaşılıyor ve katkı isteği hızlı bir şekilde cevaplanıyor.
Eğer bu ilk katkınız olacaksa en geç 1 hafta önce güncellenmiş, en çok katkı sağlayan ve katkı isteği kabul edilmiş projeyi tercih etmenizi tavsiye ederim. Bu tür projelerin katkı sağlama süreçleri daha sistematik bir hale getirilmiş oluyor, yeni gelenlere daha hoşgörülü yaklaşılıyor ve katkı istekleri hızlı bir şekilde cevaplanıyor.
### Sorun
Tebrik ederim, ilk adımı attınız, sizi heyecanlandıracak hareketli bir proje buldunuz. Sırada bir sorun bulmak var. Korkmayın, durduk yere bir sorun üretmenize gerek yok. Github vb. platformlarda her projenin sorunlar (issues) kısmı olur, burada projeden faydalanan insanlar, proje ile alakalı karşılaştıkları problemleri yazarlar. Burada biraz vakit geçirmeniz gerekebilir, projeye yeni katılmış biri olarak her sorunu anlamayabilirsiniz.
İlk adımı attıktan ve sizi heyecanlandıracak hareketli bir proje bulduktan sonra sırada bir sorun bulmak var. Korkmayın, durduk yere bir sorun çıkarmanıza gerek yok. Github vb. platformlarda her projenin sorunlar (issues) kısmı olur, burada projeden faydalanan insanlar, proje ile alakalı karşılaştıkları problemleri yazarlar. Bu kısımda biraz vakit geçirmeniz gerekebilir, projeye yeni katılmış biri olarak her sorunu anlamayabilirsiniz.
Hatırlarsanız size ilk katkımın hikayesini anlatacağım demiştim. Hikayem tam olarak burada başlıyor. Ben de Astro ismindeki bir önyüz freymvörkünü (frontend framework) gözüme kestirmiştim. Size tavsiye ettiğim gibi birkaç günümü sorunlar kısmında, yeni açılan sorunları inceleyerek geçirdim. Pek çoğunu nasıl çözebileceğime dair hiçbir fikrim yoktu. Bu durum canımı sıkmıştı.
Hatırlarsanız size ilk katkımın hikayesini anlatacağım demiştim. Aynı bir önceki adımda size söylediğim şekilde ben de Astro ismindeki bir önyüz freymvörkünü (frontend framework) gözüme kestirmiştim. Birkaç günümü sorunlar kısmında, yeni açılan sorun başlıklarını inceleyerek geçirdim. Pek çoğunu nasıl çözebileceğime dair hiçbir fikrim yoktu. Bu durum canımı sıkmıştı.
Bir sabah yeni açılan bir sorun başlığı ile karşılaştım. Test kütüphanelerini değiştirdikleri için Astronun bazı testlerinin güncellenmesi gerekiyordu. Eski testler bu yeni kütüphane kullanılarak tekrar yazılacaktı. Sorun başlığını açan kişi, bu sorunun projeye yeni dahil olmak isteyenler için iyi bir fırsat olduğunu da özellikle belirtmişti. Daha önce test yazmış olduğumdan, ne yapılması gerektiğini kestirebiliyordum. Hemen yorumlar kısmında katkı sunmak istediğimi belirttim. Sırada kodda gerekli değişikleri yapıp katkı isteğini göndermek vardı.
Bir sabah yeni açılan bir başlık ile karşılaştım. Test kütüphanelerini değiştirdikleri için Astronun bazı testlerinin güncellenmesi gerekiyordu. Eski testler bu yeni kütüphane kullanılarak tekrar yazılacaktı. Başlığı açan kişi, bu sorunun projeye yeni dahil olmak isteyenler için iyi bir fırsat olduğunu da özellikle belirtmişti. Daha önce test yazdığımdan, ne yapılması gerektiğini kestirebiliyordum. Hemen yorumlar kısmında katkı sunmak istediğimi belirttim. Sırada, kodda gerekli değişiklikleri yapıp katkı isteğini göndermek vardı.
Sizin de bir sorunu seçtiğinizi varsayalım, dilerseniz sorun başlığının altına sorunla ilgilenmeye başladığınızı yorum olarak belirtebilirsiniz. Genellikle çözülmesi gereken sorun sayısı, katkı sağlayıcıların sayısından fazla olduğundan bunu yazmanıza bile gerek kalmayabilir.
(Yorumumun fotoğrafı)
![Örnek Bir Yorum](../../images/github-yorum.png)
<figcaption>Resim 1: Örnek bir yorum</figcaption>
### Triyaj
Genellikle projeler yapacağınız değişiklikleri orijinal kodda değil kendi kopyanızda (fork) yapmanızı isterler. Büyük projelerin kodunu düzenlemek tabiri caizse *kirli* bir iş olduğundan, proje sahipleri kodu batırmanızı istemezler, muhtemel karışıkların önüne geçmek için kendi kopyanızdan çalışmanızı talep ederler. Neyse ki bir projenin kopyasını oluşturmak birkaç saniyelik oldukça basit bir iştir.
Genellikle projeler yapacağınız değişiklikleri orijinal kodda değil kendi kopyanızda (fork) yapmanızı isterler. Büyük projelerin kodunu düzenlemek tabiri caizse *kirli* bir iş olduğundan, proje sahipleri muhtemel karışıklıkların önüne geçmek adına kendi kopyanızdan çalışmanızı talep ederler. Neyse ki bir projenin kopyasını oluşturmak birkaç saniyelik oldukça basit bir iştir.
Bu aşamada ana klasörün altında `CONTRIBUTING.md` isminde bir dosya olup olmadığını kontrol etmeyi unutmayın. Bu dosyadan ilgili projede katkı sağlama sürecinin nasıl işlediğini ve nelere dikkat etmeniz gerektiğini öğrenebilirsiniz.
Bu aşamada ana klasörün altında `CONTRIBUTING.md` isminde bir doküman olup olmadığını kontrol etmeyi unutmayın. Bu dokümandan ilgili projede katkı sağlama sürecinin nasıl işlediğini ve nelere dikkat etmeniz gerektiğini öğrenebilirsiniz.
Kendi kopyanızı oluşturduktan sonra sıra, sorunun kaynağını tespit etmeye gelir. Buna triyaj denir. Sorun başlığında soruna yol açmış kodun bulunduğu dosyanın ismi bazen verilir, bazen de henüz tespit edilemediğinden verilmez. Bu durumda soruna neyin yol açtığını sizin tespit etmeniz beklenir.
Kendi kopyanızı oluşturduktan sonra sıra, sorunun kaynağını tespit etmektir. Buna triyaj denir. Soruna yol açmış kodun bulunduğu dosyanın ismi bazen verilir, bazen de henüz tespit edilemediğinden verilmez. Bu durumda soruna neyin yol açtığını sizin tespit etmeniz beklenir.
Bunu tespit etmek için öncelikle sorunun açıklamasını dikkatlice okumalısınız. Eğer sorun başlığını açan kişi, sorunun ne üzerine ortaya çıktığını detaylı bir şekilde belirtmediyse bunu sormaktan asla çekinmeyin. Sorunun bütün yükünü omuzlamak zorunda değilsiniz. Sorunu detaylıca açıklamak, başlığı açan kişinin sorumluluğundadır. Pek çok proje raporlanan sorunun yeniden çıkarılabilir (reproducable) olmasını ister. Yani siz de sorunu yaşayan kişiyle aynı adımları takip ettiğinizde aynı hatayla karşılaşıyor olmalısınız.
Bunu tespit etmek için öncelikle sorunun açıklamasını dikkatlice okumalısınız. Eğer sorun başlığını açan kişi, sorunun nasıl ortaya çıktığını detaylı bir şekilde belirtmediyse bunu sormaktan asla çekinmeyin. Sorunun bütün yükünü omuzlamak zorunda değilsiniz. Sorunu detaylıca açıklamak, başlığı açan kişinin sorumluluğundadır. Pek çok proje raporlanan sorunun yeniden çıkarılabilir (reproducable) olmasını ister. Yani siz de sorunu yaşayan kişiyle aynı adımları takip ettiğinizde aynı hatayla karşılaşıyor olmalısınız.
### Çözüm
Sorunu yeniden çıkardıktan sonra sırada bunun kaynağını tespit etmek var. Neyse ki hata ayıklama araçları bize hatanın muhtemel kaynaklarıyla alakalı detaylı bilgiler verebiliyor. Burada size düşen sanki zamanda geriye gider gibi, hatanın ortaya çıktığı fonksiyondan başlayarak fonksiyon çağrılarını geriye doğru takip etmek ve hangi parametrenin, değişkenin veya fonksiyon çağrısının sorunlu olduğunu tespit etmek.
Sorunu yeniden çıkardıktan sonra sıra bunu kaynağını tespit etmekte. Neyse ki hata ayıklama araçları bize hatanın muhtemel kaynaklarıyla alakalı detaylı bilgiler veriyor. Burada size düşen sanki zamanda geriye gider gibi, hatanın ortaya çıktığı fonksiyondan başlayarak fonksiyon çağrılarını geriye doğru takip etmek ve hangi parametrenin, değişkenin veya fonksiyon çağrısının sorunlu olduğunu bulmak.
Benim ilk katkımda yalnızca bir test dosyasında değişiklik yapmam gerektiğinden bu aşamayı atlamıştım fakat çözdüğüm bir başka sorunda [(3)](https://github.com/withastro/astro/issues/10161) problemin kaynağı fonksiyonun eksik bir değer dönmesiydi. Bunu eklediğimde hata çözülmüş oldu. Sorunu çözmem için yalnızca 5 satır eklemem gerekiyordu!
Benim ilk katkımda yalnızca bir test dosyasında değişiklik yapmam gerektiğinden bu aşamayı atlamıştım fakat çözdüğüm bir başka sorunda [(3)](https://github.com/withastro/astro/issues/10161) problemin kaynağı fonksiyonun eksik bir değer dönmesiydi. Değeri tamamladığımda hata da çözülmüş oldu. Sorunu çözmem için yalnızca 5 satır eklemem gerekiyordu!
Sorunun kaynağı olan değişkeni, parametreyi, fonksiyonu vb. tespit ettikten sonra bir çözüm üretmeye çalışın. Eğer bulduğunuz çözüm birden fazla dosyada değişiklik yapmanızı gerektiriyorsa ve işe yarayıp yaramayacağından emin değilseniz hemen sorun başlığına geri dönüp aklınızdaki fikri detaylı bir şekilde yorumlar kısmına yazın. Gereksiz yere vakit kaybetmektense projede tecrübe sahibi birinden geri bildirim almak çok daha mantıklı olacaktır!
Sorunun kaynağı olan değişkeni, parametreyi, fonksiyonu vb. tespit ettikten sonra bir çözüm üretmeye çalışın. Eğer bulduğunuz çözüm birden fazla dosyada değişiklik yapmanızı gerektiriyorsa ve işe yarayıp yaramayacağından emin değilseniz hemen sorun başlığına geri dönüp aklınızdaki fikri detaylı bir şekilde yorumlar kısmına yazın. Gereksiz yere vakit kaybetmektense projede tecrübe sahibi birinden geri bildirim almanız çok daha mantıklı olacaktır!
(örnek geri bildirim fotoğrafı)
Sorunun kaynağını tespit ettiniz, gerekli değişiklikleri yaptınız ve artık aynı adımları tekrar uyguladığınızda sorunun ortadan kalktığını gördünüz! Öncelikle sizi tebrik ederim, zor bir işin üstesinden geldiniz. Fakat kötü bir haberim var, sorunun gerçekten ortadan kalktığına diğer yazılımcıları da ikna etmeniz gerekiyor. Bunun için çözümünüzü test etmelisiniz!
![Örnek Bir Yorum](../../images/github-geribildirim.png)
<figcaption>Resim 2: Örnek bir geri bildirim</figcaption>
Pekala, sorunun kaynağını tespit ettiniz, gerekli değişiklikleri yaptınız ve artık aynı adımları tekrar uyguladığınızda sorunun ortadan kalktığını gördünüz! Öncelikle sizi tebrik ederim, zor bir iş başardınız. Fakat kötü bir haberim var, sorunun gerçekten ortadan kalktığına diğer yazılımcıları da ikna etmeniz gerekiyor. Bunun için çözümünüzü test etmelisiniz!
### Test
Sorunu çözmeyi başardıysanız, test yazması da zor olmayacaktır. Yine de her proje farklı bir test düzeni takip ettiği için projenizin testlerini nasıl kurguladıklarını öğrenmek biraz zaman alabilir. Diğer testleri örnek alarak testinizi yazmaya başlayın. Testiniz, sırayla sorundaki adımları canlandırmalı ve kodun herhangi bir hata vermediğini göstermeli. Bu, aynı zamanda yaptığınız değişiklikleri geri aldığınızda testin hata vermesi gerektiği anlamına geliyor. Duruma göre birden fazla test yazmanız da gerekebilir.
Sorunu çözmeyi başardıysanız, test yazması da zor olmayacaktır. Yine de her proje farklı bir test düzeni takip ettiğinden projenizin testlerini nasıl kurguladığını öğrenmek biraz zaman alabilir. Diğer testleri örnek alarak testinizi yazmaya başlayın. Testiniz, sırayla sorunu aynı adımları takip ederek çıkarmaya çalışmalı ve kodun herhangi bir hata vermediğini göstermeli. Bu, aynı zamanda yaptığınız değişiklikleri geri aldığınızda testin hata vermesi gerektiği anlamına geliyor.
(Astro test klasörü)
### Mutlu Son
Uzun soluklu ve yorucu bir süreç oldu ama artık ilk katkınızı yapmaya hazırsınız! Katkı isteğinizi atın ve beklemeye başlayın. Muhtemelen yaptığınız değişiklikler öncelikle bazı otomatik testlerden geçecek. Sonrasında katkı isteklerini değerlendirmekle görevli biri katkınızı inceleyecek ve yaptığınız değişiklikleri değerlendirecektir. Şanslıysanız isteğiniz hemen kabul edilir fakat zaman zaman ilgili kişi sizden bazı düzenlemeler yapmanızı isteyebilir. Bu hevesinizi kırmasın, projenin uyum içerisinde çalışması için bütün katkıların belirli estetik ve işlevsel kriterlere uyması gerekiyor.
Uzun soluklu ve yorucu bir süreçti ama artık ilk katkınızı yapmaya hazırsınız! Katkı isteğinizi atın ve beklemeye başlayın. Muhtemelen yaptığınız değişiklikler öncelikle bazı otomatik testlerden geçecek. Sonrasında katkı isteklerini değerlendirmekle görevli biri katkınızı inceleyecek ve yaptığınız değişiklikleri değerlendirecektir. Şanslıysanız isteğiniz hemen kabul edilir fakat zaman zaman görevli kişi sizden bazı düzenlemeler yapmanızı isteyebilir. Bu hevesinizi kırmasın, projenin uyum içerisinde çalışması için bütün katkıların belirli işlevsel ve estetik kriterlere uyması gerekiyor.
Düzenlemelerden sonra katkı isteğiniz kabul edilirse öncelikle derin bir nefes alın, sonra bilgisayarınızı kapatıp soğuk bir bardak su için. Aynaya bakıp gülümseyin ve yaptığınız değişiklerin gelecek güncelleme ile beraber binlerce bilgisayara dalga dalga yayılacağını hayal edin.
Düzenlemelerden sonra katkı isteğiniz kabul edilirse öncelikle derin bir nefes alın, sonra bilgisayarınızı kapatıp soğuk bir bardak su için. Aynaya bakıp gülümseyin ve yaptığınız değişikliklerin gelecek güncelleme ile beraber binlerce bilgisayara dalga dalga yayılacağını hayal edin.
Katkı sağlama sürecini son kez özetleyecek olursak:
1. Zevkinize uygun hareketli bir proje seçimi.

View File

@ -0,0 +1,142 @@
---
draft: false
title: Sunucumda Neler Dönüyor
summary: Bu sayfayı sunmamı mümkün kılan, kimisi CI/CD'den, kimsi e-postadan, kimisi konteynerlerden sorumlu servisleri tanıyoruz.
category: teknik
subcategory: Tanıtım
date: 2024-08-25
---
<style>
h3, hr {
margin: 0.7em 0 0.5em 0
}
#full-text p {
margin: 0.5em 0 1.2em 0;
}
figcaption {
color: gray;
margin-top: -0.8em;
text-align: center;
font-size: 0.9em;
}
#toc > ul {
line-height: 2em;
}
li a {
color: black;
}
table {
border: 1px solid slategrey;
padding: 4px;
background-color: #f8f9fa;
margin: 0.5em 0 1.2em 0;
}
th {
text-align: left;
white-space: nowrap;
}
td {
text-align: left;
white-space: nowrap;
}
</style>
Birkaç ay önce, Vercellerin, Firebaselerin, AWSlerin sunduğu sihirlerin etkisini yitirdiği, vadettikleri masal diyarının yerini sermayeci, küçük bir ada ülkesinin aldığı o huzursuz sınıra varmıştım. Bir başka deyişle, bu platformların sunduğu hizmetlerden ücretsiz yararlanma hakkımı kaybetmiştim. Artık bir bedel ödemem gerekiyordu.
Peki bu bedeli ödemek beni özgür kılacak mıydı? Tam aksine, projemi bir PaaSın ahtapot kollarına teslim edeceğim bu sınırın ötesinde kapalı bir ekosistem, internette cevabı olmayan sorular ve desteklenmeyen APIler görüyordum. Karar vermem için bana tanıdıkları o dar vakit içerisinde, daha esnek ve uzun vadeli bir çözüm arayışına giriştim.
Araştırmalarım neticesinde bulduğum çözüm yeni bir teknoloji, yeni bir PaaS değildi. Çözüm geriye, DevOpsun köklerine dönmekti. Kendi CI/CD sistemimi yürütecek, uygulamalarımı sunacak, Docker imajlarımı saklayacak bir sunucu kuracaktım. Kollarımı sıvadım, 2592000 saniyelik sayacımı başlattım ve işe koyuldum.
Sayaç sıfırı gösterdiğinde istediğim özelliklere sahip bir sunucu kurmayı başarmıştım. Yaklaşık 3 aydır işte bu sunucuyu kullanıyorum. Bu tecrübenin kendi sunucusunu kurmak isteyenlere faydalı olacağını düşünerek, sunucumdaki servisleri tanıttığım bu yazıyı kaleme aldım.
<div id="toc">
### İçindekiler
</div>
### Sunucumun Teknik Özellikleri
<table>
<tr>
<th>CPU:</th>
<td>Sanal, tek çekirdek</td>
</tr>
<tr>
<th>RAM:</th>
<td>2 GB</td>
</tr>
<tr>
<th>Harddisk:</th>
<td>50GB</td>
</tr>
<tr>
<th>İşletim Sistemi:</th>
<td>Ubuntu</td>
</tr>
</table>
Sunucumu Linodedan kiraladım. İlk kayıt olduğunuzda 3 ay süreyle kullanabileceğiniz 100$lık hediye kuponu veriyor. Dokümantasyonu çok kapsamlı, destek hizmeti de ihtiyaç duyduğunuzda hızlı bir şekilde dönüş yapıyor. Ayrıca çok kullanışlı ve sade bir arayüzü var. Özellikle AWSden gelenler arayüzün sadeliği karşısında parmaklarını ısırabilir.
### Elektronik Posta: Docker Mailserver
E-posta servisini Docker konteynerleri yeniden başlatıldığı, uygulamam çöktüğü, CI/CD sistemim derleme işlemini bitirdiği zaman haberdar edilmek için kurdum. Diğer başlıklarda tanıttığım bütün servisler bir şekilde e-posta servisiyle bağlantılı.
Bunun için öncelikle bir dizi DNS ayarı yaptım. Bunlar yapılmadığı takdirde e-postalar istenmeyen (spam) olarak işaretleniyor, bazı durumlarda doğrudan engelleniyor, gönderilen adrese bile ulaşmıyor.
Mail sunucusu olarak [Docker Mailserver](https://github.com/docker-mailserver/docker-mailserver) ismindeki bir projeyi kullandım. Bu proje arka planda Postfix ve Dovecot uygulamalarını kullanıyor. Bunları ayrıca kurması çok daha uğraştırıcı. Docker Mailserverde birkaç ufak konfigürasyon ile servisiniz kullanıma hazır hale geliyor. Mail sunucumu test etmek için log101@log101.dev adresine geri bildirimlerinizi gönderebilirsiniz!
### HTTP Sunucusu: Nginx
HTTP sunucusu deyince akla iki isim gelir: Nginx ve Apache. Benim aklıma ilk Nginx geldiği için Nginxi tercih ettim. HTTP sunucusu tüm bu anlattıklarım arasındaki en önemli hizmet çünkü internet sayfalarının kullanıcılara sunulmasından sorumlu.
Sunulacak her uygulama veya internet sayfası için bir konfigürasyon dosyası oluşturmak gerekiyor. Ayrıca sayfaların SSL sertifikalarını üretmek gerekiyor, bunun için Certbot ismindeki bir aracı kullanıyorum.
Uygulamalarımı genellikle ön uçta statik, yalnızca Nginx ile sunulabilecek şekilde yazmayı tercih ediyorum. Arka uçta da her biri için bir Go uygulaması var. Böylece kaynak tüketimimi asgari seviyeye çekmiş oluyorum. Sunduğum örnek bir uygulama: https://konulukonum.log101.dev
### Durum (Status) Sayfası: Gatus
Yaygın internet uygulamalarının bir çoğunun durum (status) sayfası var. Bu sayfalar sayesinde uygulamalara ulaşılamadığında sorunun hangi taraftan (sunucu veya istemci) kaynaklandığını öğrenme imkanı oluyor. Örnek vermek gerekirse: https://discordstatus.com/.,
Ben de kendi uygulamalarım ve servislerimin durumunu görüntülemek için bir durum sayfası oluşturdum. Bunun için konteyner olarak çalıştırılan [Gatus](https://github.com/TwiN/gatus) ismindeki açık kaynak bir projeyi kullandım.
Çalışma mantığı oldukça basit. Konfigürasyon dosyasına Gatusun HTTP isteği atacağı URLlerin listesi veriliyor. Gatus, belirli sıklıkta bu istekler ile hayatta olup olmadıklarını kontrol ediyor. Ulaşamadığı durumda konfigürasyon dosyasında belirtilen adrese e-posta gönderiyor. Durum sayfam için: https://status.log101.dev
### DevOps: Gitea
Github yalnızca kod barındırma değil aynı zamanda bir CI/CD platformu. *Github Actions* sayesinde projelerin kodu derleme, test etme gibi süreçlerden geçirilerek yayınlamaya hazır hale getirilebiliyor. [Gitea](https://github.com/go-gitea/gitea) de Githubun muadili, kendi sunucunuzda barındırabileceğiniz (self hosted) bir proje. Bir diğer alternatif Gitlabe kıyasla çok daha az kaynak tüketiyor. CI/CD sisteminin çalışma şekli de Github ile neredeyse birebir aynı.
Gitea, Github profilini *yeşil* tutmak isteyenler için “mirror push” imkanı sunuyor. Böylece Giteadeki yaptığınız değişiklikler Githubdaki projenize de uygulanıyor. Gitea sayfamı incelemek için: https://git.log101.dev
### Konteyner Kütüğü (Registry): Distribution
Dockerdan kaçabilirsiniz ama saklanamazsınız. O eninde sonunda sizi kendini kullanmaya mecbur bırakır. Docker imajı olarak dağıtılan uygulamaların başka bir sunucuda düzgün bir şekilde güncellenebilmesi için bir konteyner kütüğüne (container registry) kaydedilmesi gerekiyor.
Bunun için Dockerın resmi kütüğü (Docker Hub) kullanılabileceği gibi sunucunuzda kendi kütüğünüzü barındırmak da mümkün. Ben ikinci yöntemi tercih ettim. Bunun için de [Distribution](https://github.com/distribution/distribution/) isminde bir projeyi kullandım. Distributionın kendisi konteyner olarak çalıştırılıyor.
### Otomatik Güncelleme: Watchtower
Docker imajı olarak dağıttığım arka uç uygulamalarımı güncelledikten sonra otomatik olarak yeniden başlatmak için [Watchtower](https://github.com/containrrr/watchtower) isminde bir proje kullanıyorum.
Watchtower, docker imajlarını düzenli olarak kontrol ediyor ve bir güncelleme olduğu zaman konteynerleri yeniden başlatıyor. Ek olarak e-posta bildirim gönderebiliyor. Sistemdeki diğer servisler de konteyner tabanlı olduğu için beni bunları elimle güncelleme derdinden kurtarıyor.
### Gözlemleme: Linux Dash
Peki tüm bu saydığım servisler ne kadar kaynak tüketiyor? Özellikle RAM kapasiteniz yalnızca 2 gigabaytsa sistemin ne kadar kaynak tükettiğini görmek oldukça önemli. [Linux Dash](https://github.com/tariqbuilds/linux-dash) bunun için kullanılabilecek, Node uygulaması olarak çalıştırılan, kendisi de çok az kaynak tüketen bir servis. Bu servis sayesinde sisteminizin durumunu RAM, CPU vb. göstergeler üzerinden takip edebiliyorsunuz. Sunucumun gözlem sayfası için: https://monitor.log101.dev
### Gelecek
Sistemimde çalışan servisleri kısaca tanıtmış oldum. Bunlar şimdilik işimi görüyor fakat yakın gelecekte daha fazlasına ihtiyaç duyacağımı tahmin ediyorum. Özellikle güvenlik açısından sunucumun çok eksiği var. DDoS saldırılarına açık ve bildiğim bilmediğim birçok zafiyete sahip. Yine de kendi CI/CD sistemimi kullanmak ve kodum ile alakalı bütün süreçleri yönetmek projelerime esneklik katıyor.
Kendi sunucunuzu kurmanın, sizin için de keyifli ve kıymetli bir tecrübe olacağına inanıyorum.
Yazımı okuduğunuz için teşekkürler, geri dönüşlerinizi bekliyorum!

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

BIN
src/images/github-yorum.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

View File

@ -1,9 +1,12 @@
---
interface Props {
title: string;
ogTitle?: string;
ogDescription?: string;
ogURL?: string;
}
const { title } = Astro.props;
const { title, ogTitle, ogDescription, ogURL } = Astro.props;
import "../styles/main.css";
---
@ -16,6 +19,16 @@ import "../styles/main.css";
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="generator" content={Astro.generator} />
<meta name="htmx-config" content='{"code": 204, "swap": false}' />
<meta property="og:title" content={ogTitle ?? "blog.log101.dev"} />
<meta property="og:url" content={ogURL ?? "https://blog.log101.dev"} />
<meta
property="og:description"
content={ogDescription ?? "Yazılıma dair..."}
/>
<meta property="og:image" content="https://blog.log101.dev/ikon.png" />
<meta name="twitter:card" content="summary" />
<title>{title}</title>
</head>
<body class="flex justify-center font-sans">

View File

@ -12,6 +12,8 @@ import BookReview from "@/components/BookReview.astro";
const { entry } = Astro.props;
const URL = Astro.url;
const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
export async function getStaticPaths() {
@ -29,7 +31,11 @@ export async function getStaticPaths() {
}
---
<Layout title="log101">
<Layout
title="log101"
ogTitle={entry.data.title}
ogDescription={entry.data.summary}
ogURL={URL.toString()}>
<Header />
{
entry.collection === "blog" ? (

View File

@ -2,7 +2,7 @@
@tailwind utilities;
:root {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-family: "Inter", Calibri, "Trebuchet MS", sans-serif;
font-size: 18px;
@media (min-width: 768px) {
@ -18,11 +18,22 @@ body {
background-color: #f5fffa;
}
img,
video {
max-width: 100%;
height: auto;
}
@font-face {
font-family: "Source Code Pro";
src: url(/fonts/SourceCodePro-Regular.otf.woff2) format("woff2");
}
@font-face {
font-family: "Inter";
src: url(/fonts/Inter-Regular.woff2) format("woff2");
}
@layer components {
.posts {
@apply flex flex-col gap-10 md:gap-8;

View File

@ -3,13 +3,7 @@ export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
fontFamily: {
sans: [
"Gill Sans",
"Gill Sans MT",
"Calibri",
"Trebuchet MS",
"sans-serif",
],
sans: ["Inter", "Calibri", "Trebuchet MS", "sans-serif"],
mono: ["Courier New", "Courier", "monospace"],
},
extend: {},