A casual friday office day @ Teachfluence

Bu rehberde Developer MultiGroup bünyesinde yeni başlattığımız Android Blast Off bootcamp serimizin websitesine nasıl Contentful ve ve Next.js kullanarak çok basit bir şekilde bir blog sistemi kurduğumu anlatıyor olacağım. Bu yazı biraz da kendi yaptıklarımı pekiştirmek adına yazdığım bir yazı olacak; umarım beğenirsiniz, şimdiden iyi okumalar!

Peki Nedir Bu Contentful?

Content that scales.

Contentful, özünde modern web siteleri ve dijital ürünler için geliştirilmiş güçlü bir içerik yönetim sistemi (CMS). Geleneksel CMS’lerden farklı olarak Contentful, “Headless CMS” kategorisinde yer alıyor. Bu terimi basitçe ifade etmek gerekirse, Contentful içeriğinizi oluşturmanızı ve yönetmenizi sağlarken, bu içeriğin nasıl ve nerede görüntüleneceği konusunda size tam bir özgürlük sunar.

Contentful’un en büyük avantajlarından biri, içeriklerinizi bir kez oluşturup farklı platformlarda (web sitesi, mobil uygulama, akıllı cihazlar vb.) kullanabilmenizdir. API odaklı yapısı sayesinde, geliştirdiğiniz her türlü uygulama için içeriklerinizi kolayca entegre edebilirsiniz.

Contentful’u diğer CMS’lerden ayıran özellikler:

• Esnek İçerik Modelleme: Kendi içerik modellerinizi istediğiniz şekilde oluşturabilirsiniz.
• API Öncelikli Yaklaşım: RESTful API ve GraphQL API seçenekleriyle içeriklerinize kolayca erişim sağlayabilirsiniz.
• Çoklu Dil Desteği: Projelerinizi birden fazla dilde yönetebilirsiniz.
• Medya Yönetimi: Görsel ve dosyalarınızı organize bir şekilde saklayabilir ve kullanabilirsiniz.
• İş Akışı Yönetimi: İçerik oluşturma ve yayınlama süreçlerinizi optimize edebilirsiniz.

Hesap Oluşturma

Contentful’u kullanmaya başlamak için öncelikle bir hesap oluşturmanız gerekiyor. İşte adım adım hesap oluşturma süreci:

1. Contentful web sitesine gidin.
2. Sağ üst köşedeki “Sign up” butonuna tıklayın.
3. Hesabınızı oluşturmak için:

• E-posta adresinizi girin
• Bir şifre oluşturun
• Ya da Google, GitHub veya Apple hesabınız ile oturum açmayı tercih edin

Kayıt işlemini tamamladıktan sonra, bir onay e-postası alacaksınız. E-postadaki bağlantıya tıklayarak hesabınızı doğrulayın.

Hesabınız aktif olduktan sonra, Contentful size bir organizasyon ve ilk space’inizi oluşturmanızı önerecektir. Space, içeriklerinizi ve ayarlarınızı tutacağınız ana konteynerdir.

Space oluştururken:

• Space adı belirleyin
• Hangi amaçla kullanacağınızı seçin (blog, e-ticaret, kişisel proje vb.)
• Örnek içerik şablonlarından birini seçebilir veya sıfırdan başlayabilirsiniz

Ücretsiz planda, sınırlı sayıda içerik ve dosya yükleyebileceğiniz bir yapı mevcut. Ancak bu limitler gördüğüm kadarıyla çoğu kişisel proje ve küçük işletmeler/ekipler için yeterli olacaktır.

Content Type Belirleme

Contentful’da içerik modelleme, “Content Types” (İçerik Tipleri) adı verilen yapılar ile gerçekleştirilir. Content Type, içeriğinizin yapısını belirleyen bir şablondur. Örneğin; bir blog yazısı, bir ürün sayfası veya bir ekip üyesi profili için farklı Content Type’lar oluşturabilirsiniz.

İçerik tipinizi oluşturmak için:

1. Sol menüden “Content model” bölümüne gidin.
2. “Add content type” butonuna tıklayın.
3. İçerik tipinize bir isim verin (örneğin “Blog Post”).
4. İsterseniz bir açıklama ekleyin ve API identifier’ı düzenleyin.
5. “Create” butonuna tıklayın.

Her Content Type’a alanlar (fields) ekleyerek yapısını belirlemeniz gerekir. Örneğin, haydi bizim Android Blast-Off için oluşturduğumuz Content Type’a göz atalım:

• Title (Short Text tipi)
• Slug (Short Text tipi)
• Writers (Short Text tipi)
• Description (Short Text tipi)
• Body (Rich Text tipi)

Yeni bir alan eklemek için:

1. “Add field” butonuna tıklayın.
2. Alan tipini seçin (Text, Number, Date, Media, Location, Reference vb.).
3. Alana bir isim verin.
4. Gerekli diğer ayarları yapın (zorunlu alan mı, görünürlük ayarları, yardımcı metin vb.).
5. “Create and configure” butonuna tıklayın.
6. Ek alan ayarlarını yapılandırın (karakter limiti, format vb.)
7. “Confirm” butonuna tıklayın.

Content Type Alan Seçenekleri

Alan tipleri çok çeşitlidir:

• Text: Kısa veya uzun metinler için
• Rich Text: Biçimlendirilmiş içerik için (kalın, italik, listeler, bağlantılar vb.)
• Number: Sayısal değerler için
• Date: Tarih ve saat bilgileri için
• Location: Coğrafi konum bilgileri için
• Media: Görsel, video ve diğer dosyalar için
• Boolean: Evet/Hayır seçenekleri için
• JSON Object: Karmaşık veri yapıları için
• Reference: Diğer içerik öğelerine bağlantılar için

Contentful’un en beğendiğim yanlarından biri, Content Type’larınızın içeriğini “Zorunlu Alan” olmasından tutun Rich Text için izin verilen yazı türlerine ( H1, H2, B, *i *) kadar çoğu detayı ihtiyacınıza göre düzenlebilmeniz.

İçerikleri Ekleme

Content Type’larınızı oluşturduktan sonra, artık gerçek içerikler ekleyebilirsiniz. Contentful’da her bir içerik öğesine “Entry” adı verilir.

Yeni bir içerik eklemek için:

1. Sol menüden “Content” bölümüne gidin.
2. “Add entry” butonuna tıklayın.
3. Oluşturduğunuz Content Type’lardan birini seçin (örneğin “Blog Post”).
4. İçeriğiniz için gerekli tüm alanları doldurun.
5. Sağ üst köşedeki “Publish” butonuna tıklayarak içeriğinizi yayınlayın.

İçerik oluştururken dikkat edilmesi gereken önemli noktalar:

• Taslak ve Yayınlama: İçeriklerinizi taslak olarak kaydedebilir ve daha sonra yayınlayabilirsiniz.
• Versiyonlama: Contentful, içeriklerinizin tüm versiyonlarını saklar, böylece gerektiğinde önceki bir versiyona dönebilirsiniz.
• İş Akışı: Büyük ekipler için, içerik durumu ve onay süreçleri oluşturabilirsiniz.
• Zamanlanmış Yayınlama: İçeriklerinizin belirli bir tarih ve saatte yayınlanmasını sağlayabilirsiniz (ücretli planlarda).

İçeriklerinizi düzenlemek için, “Content” bölümünden ilgili içeriğe tıklayın. Az önceki görseldekiyle aynı arayüz ile karşılacaksınız. Buradan değişikliklerinizi yaptıktan sonra, “Publish” butonuna tıklayarak güncellemeleri yayınlayın.

Blog’lara Fotoğraf Ekleme

Contentful’da blog yazılarınıza fotoğraf eklemek oldukça kolaydır. Bunun için iki yöntem bulunmaktadır:

1. Media Alanı Kullanarak Fotoğraf Ekleme

Eğer Content Type’ınızda bir “Media” alanı varsa (örneğin, blog yazısının kapak görseli için), bu adımları izleyin:

1. İçeriğinizi düzenlerken, Media alanına tıklayın.
2. “Add media” butonuna tıklayın.
3. Daha önce yüklediğiniz bir görseli seçebilir veya yeni bir görsel/görseller yükleyebilirsiniz.
4. Yeni bir görsel yüklemek için “Upload” seçeneğini kullanın.
5. Bilgisayarınızdan bir görsel seçin ve “Open” butonuna tıklayın.
6. Görseliniz için başlık ve açıklama ekleyin (opsiyonel).
7. “Publish” butonuna tıklayarak görseli yayınlayın.

2. Rich Text Alanı İçine Fotoğraf Ekleme

Rich Text alanı içindeki içeriğinize fotoğraf eklemek için:

1. Rich Text düzenleyicide, görseli eklemek istediğiniz konumu seçin.
2. Araç çubuğundaki “Embed” butonuna tıklayın.
3. “Asset” seçeneğini tıklayın.
4. Daha önce yüklediğiniz bir görseli seçebilir veya yeni bir görsel yükleyebilirsiniz.

Fotoğraf Yönetimi İpuçları

Contentful’da fotoğraflarınızı daha etkili bir şekilde yönetmek için:

• Medya Kütüphanesi: Tüm medya dosyalarınızı “Media” bölümünden yönetebilirsiniz.
• Dosya Organizasyonu: Klasörler oluşturarak medya dosyalarınızı organize edebilirsiniz.
• Görsel Optimizasyonu: Contentful, görselleri otomatik olarak optimize eder ve farklı boyutlarda sunar.
• Alt Metin: Erişilebilirlik için görsellere alt metin eklemeyi unutmayın.
• Görsel İşleme: Contentful’ın API’si aracılığıyla görseller üzerinde crop, resize gibi işlemler gerçekleştirebilirsiniz.

Contentful’un en güçlü yanlarından biri, görsellerinizin otomatik olarak optimize edilmesi ve farklı ekran boyutları için hazırlanmasıdır. URL parametreleri kullanarak görsellerin boyutu, kalitesi ve formatı gibi özelliklerini dinamik olarak değiştirebilirsiniz.

Örneğin:

https://images.ctfassets.net/your-space-id/your-image-id/your-image-filename.jpg?w=800&h=600&fit=fill

Bu URL, görseli 800x600 piksel boyutuna getirir ve içeriği tam dolduracak şekilde yeniden boyutlandırır.

Haydi Next.js ile sitemize bağlayalım!

Buraya kadar biraz daha Contenful platformuna alıştık ve Content Type oluşturmaktan yeni bir gönderi paylaşmaya çoğu şeye değindik. Buradan sonrasında biraz daha tekniğe girerek Contentful hesabımızı bir Next.js uygulamasına nasıl bağlayabileceğimize bakacağız.

Burdan sonra kullanılacak kod örnekleri Android Blast Off sitemizin Github Repository’sinde açık olarak bulunabilir. Oraya uğrarsanız bir yıldızınızı da alırsak çok seviniriz :) Haydi başlayalım!

Contentful Bağlantısının Yapılışı

Öncelikle Contentful SDK’sını projemize eklemeliyiz.

npm install contentful

Sonrasında ise bir Contentful.ts dosyası oluşturarak Contentful istemcimizi yapılandıralım:

import { createClient, Entry } from "contentful"; import { BlogPostSkeleton } from "@/types/contentful";

const client = createClient({ space: process.env.CONTENTFUL_SPACE_ID || "", accessToken: process.env.CONTENTFUL_ACCESS_TOKEN || "", });

Contentful İstemcisi Dosyamız

Gördüğünüz üzeri bu dosya bazı gücenlik bilgileri (environment variable) içeriyor; bu değişkenlerden “Space ID” değişkeninizi projenizin genel ayarlar sayfasından, “Access Token” değişkeninizi ise “API Keys” sekmesinden oluşturabilirsiniz.

Blogları Listeleyelim

Haydi şimdi blogları listeleyeceğimiz sayfafı ve gerekli fonksyionları yazalım. Öncelikle az önce oluşturduğumuz “contentful.ts” dosyasımza “***getBlogPosts” ***adında bir fonksiyon eklemeliyiz.

// src/lib/contentful.ts

export const getBlogPosts = async (): Promise<Entry<BlogPostSkeleton>[]> => { const res = await client.getEntries<BlogPostSkeleton>({ content_type: "dmgBlog", // Bu kısmı kendi Content Type'ınız ile değiştirmelisiniz });

console.log(res.items);

return res.items; };

Bu fonksyionu yazdıktan sonra ise bu blogların hepsini bir sayfada listelemeliyiz. Bunun için “src/app/blog” dizinine bir sayfa oluşturalım.

// src/app/blog/page.tsx

import { getBlogPosts } from "@/lib/contentful"; import Link from "next/link"; import { Card, CardContent, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; import { Button } from "@/components/ui/button";

export const revalidate = 60; // ISR

export default async function BlogIndexPage() { const posts = await getBlogPosts();

return ( <div className="min-h-screen flex flex-col font-montserrat-semi"> {/* Fixed top spacing */} <div className="h-[20vh]"></div>

{/* Content container */} <div className="w-11/12 md:w-4/5 max-w-6xl mx-auto"> <header className="mb-12 md:mb-16 text-center"> <h1 className="text-3xl md:text-4xl font-bold mb-5 text-white"> Blog{" "} <span className="bg-gradient-to-r text-secondary">Yazıları</span> </h1> <p className="text-gray-400 mb-8 max-w-2xl mx-auto text-sm md:text-base"> Android Blast-Off hakkında yazdığımız bütün içerikler bir arada! Haydi sen de hemen okumaya başla. </p> </header>

{/* Blog posts grid /} <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> {posts.map((post) => ( <Card key={post.sys.id} className="mb-6 bg-gray-800/70 backdrop-blur-sm border border-gray-600/30 hover:border-accent hover:bg-gray-800/80 hover:shadow-lg hover:shadow-gray-900/20 transition-all duration-300 group overflow-hidden rounded-xl w-full" > <CardHeader> <p className="text-secondary text-sm mb-4"> {new Date(post.sys.createdAt).toLocaleDateString("tr-TR", { year: "numeric", month: "long", day: "numeric", })} </p> <CardTitle className="text-white group-hover:text-white/90 transition-colors text-xl md:text-2xl font-bold"> {String(post.fields.title) || "Untitled Post"} </CardTitle> {/ Writers section */} {Array.isArray(post.fields.writers) && post.fields.writers.length > 0 && ( <div className="text-accent text-sm mt-2"> {post.fields.writers.length === 1 ? "Yazar: " : "Yazarlar: "} {post.fields.writers.join(", ")} </div> )} </CardHeader>

<CardContent> <p className="text-white/90 text-sm md:text-base"> {typeof post.fields.description === "string" ? post.fields.description : "Read this interesting blog post to learn more..."} </p> </CardContent>

<CardFooter className="flex justify-between items-center pt-2"> <Link href={/blog/${post.fields.slug}} passHref> <Button className="bg-gray-700/90 hover:bg-gray-600/90 text-white font-medium shadow-md hover:cursor-pointer hover:shadow-lg transition-all duration-200 border border-gray-500/30" aria-label={Read ${ String(post.fields.title) || "Untitled Post" }}

Yazıyı Oku </Button> </Link> </CardFooter> </Card> ))} </div> </div> </div> ); }

Bloglarımız Listelediğimiz Sayfamız

Bu sayfa Contentful’daki tüm yazılarımızı dinamik bir Card komponentine dağıtarak her detayı kullanıcılarımıza gösterdiğimizden emin olmamızı sağlıyor. Burayı istediğiniz gibi şekillendirebilirsiniz.

Artık bu fonksiyonumuz ve sayfamız sayesinde belirli bir Content Type’a ait bütün yazılarınıza ulaşabileceğiniz bir sayfanız var.

Blog Sayfası ve Ayarlamalar

Evet artık bütün bloglarımızı listelediğimiz bir sayfamız olduğuna göre, şimdi ise bu blogları okunabilir bir şekilde kullanıcılara göstermeliyiz.

Bunun için yapmamız gereken ilk şey tekil blog yazılarının içeriklerini çekmek. Tekrardan “contentful.ts” dosyamıza gelerek bu sefer de “getPostsBySlug” adında bir fonksiyon yazmalıyız.

export const getPostBySlug = async ( slug: string ): Promise<Entry<BlogPostSkeleton> | null> => { const res = await client.getEntries<BlogPostSkeleton>({ content_type: "dmgBlog", // 👇 safely assert it as any "fields.slug": slug, locale: 'en-US', } as any); // acceptable in this specific case

return res.items[0] ?? null; };

Bu fonksiyon bizim oluşturduğumuz her Entry için gerekli alanları çekmemizi sağlıyor.

Son adım olarak ise “src/app/blog/[slug]” dizini içeriinde bir sayfa oluşturarak çektiğimiz içerikleri uygun yerlere yazmamız gerekiyor.

// src/app/blog/[slug]/page.tsx

import { getPostBySlug } from "@/lib/contentful";
import { notFound } from "next/navigation";
import { documentToReactComponents } from "@contentful/rich-text-react-renderer";
import { BLOCKS, INLINES, MARKS, Document } from "@contentful/rich-text-types";
import Image from "next/image";

interface BlogPostPageProps {
  params: Promise<{
    slug: string;
  }>;
}

export const revalidate = 60;

// Helper function to extract text from Contentful rich text document
function extractTextFromRichText(node: any): string {
  if (!node) return '';
  if (typeof node === 'string') return node;
  if (Array.isArray(node)) return node.map(extractTextFromRichText).join(' ');
  if (node.nodeType === 'text') return node.value;
  if (node.content) return extractTextFromRichText(node.content);
  return '';
}

export default async function BlogPostPage({ params }: BlogPostPageProps) {
  const { slug } = await params;
  const post = await getPostBySlug(slug);
  if (!post) return notFound();

  const { title, body, writers } = post.fields;
  const createdAt = post.sys.createdAt;
  const formattedDate = new Date(createdAt).toLocaleDateString("tr-TR", {
    day: "numeric",
    month: "long",
    year: "numeric",
  });

  // Calculate reading time
  let readingTime = 1;
  if (body) {
    const text = extractTextFromRichText(body);
    const wordCount = text.trim().split(/\s+/).length;
    readingTime = Math.max(1, Math.ceil(wordCount / 200));
  }

  const isValidBody =
    typeof body === "object" &&
    body !== null &&
    "nodeType" in body &&
    body.nodeType === "document" &&
    Array.isArray(body.content);

  // Define rendering options for the rich text
  const options = {
    renderMark: {
      [MARKS.BOLD]: (text: React.ReactNode) => <strong>{text}</strong>,
      [MARKS.ITALIC]: (text: React.ReactNode) => <em>{text}</em>,
      [MARKS.UNDERLINE]: (text: React.ReactNode) => <u>{text}</u>,
      [MARKS.CODE]: (text: React.ReactNode) => (
        <code className="bg-gray-800 px-1 py-0.5 rounded">{text}</code>
      ),
    },
    renderNode: {
      [BLOCKS.PARAGRAPH]: (node: any, children: React.ReactNode) => (
        <p className="mb-4">{children}</p>
      ),
      [BLOCKS.HEADING_1]: (node: any, children: React.ReactNode) => (
        <h1 className="text-3xl font-bold mt-8 mb-4">{children}</h1>
      ),
      [BLOCKS.HEADING_2]: (node: any, children: React.ReactNode) => (
        <h2 className="text-2xl font-bold mt-8 mb-3">{children}</h2>
      ),
      [BLOCKS.HEADING_3]: (node: any, children: React.ReactNode) => (
        <h3 className="text-xl font-bold mt-6 mb-3">{children}</h3>
      ),
      [BLOCKS.UL_LIST]: (node: any, children: React.ReactNode) => (
        <ul className="list-disc pl-6 mb-4">{children}</ul>
      ),
      [BLOCKS.OL_LIST]: (node: any, children: React.ReactNode) => (
        <ol className="list-decimal pl-6 mb-4">{children}</ol>
      ),
      [BLOCKS.LIST_ITEM]: (node: any, children: React.ReactNode) => (
        <li className="mb-1">{children}</li>
      ),
      [BLOCKS.QUOTE]: (node: any, children: React.ReactNode) => (
        <blockquote className="border-l-4 border-accent pl-4 italic my-4">
          {children}
        </blockquote>
      ),
      [BLOCKS.HR]: () => <hr className="my-8 border-gray-600" />,
      [BLOCKS.EMBEDDED_ASSET]: (node: any) => {
        const asset = node.data.target;
        if (!asset || !asset.fields) return null;

        const { title, description, file } = asset.fields;
        if (!file || !file.url) return null;

        const { url, details } = file;
        const { height, width } = details?.image || { height: 400, width: 600 };

        return (
          <div className="my-6">
            <Image
              src={`https:${url}`}
              alt={description || title || "Blog image"}
              width={width}
              height={height}
              className="mx-auto rounded-lg"
              priority={false}
            />
            {description && (
              <p className="text-sm text-center text-gray-400 mt-1">
                {description}
              </p>
            )}
          </div>
        );
      },
      [INLINES.HYPERLINK]: (node: any, children: React.ReactNode) => (
        <a
          href={node.data.uri}
          className="text-blue-400 hover:underline"
          target="_blank"
          rel="noopener noreferrer"
        >
          {children}
        </a>
      ),
    },
  };

  return (
    <main className="min-h-screen px-6 pt-[25vh] pb-12 font-montserrat-mid text-gray-300">
      <div className="max-w-3xl mx-auto">
        {/* Authors */}
        {writers && Array.isArray(writers) && writers.length > 0 && (
          <p className="text-sm mb-2 text-accent text-left md:text-center">
            {writers.length === 1 ? 'Yazar:' : 'Yazarlar:'} {writers.join(', ')}
          </p>
        )}
        <p className="text-sm mb-5 text-accent text-left md:text-center">
          {formattedDate} <span className="mx-2">•</span> {readingTime} dk okuma süresi
        </p>
        <h1 className="text-4xl font-extrabold font-montserrat text-secondary mb-15 text-left md:text-center">
          {typeof title === "string" ? title : "Untitled"}
        </h1>
        
        <article className="prose prose-lg max-w-none text-white">
          {isValidBody ? (
            documentToReactComponents(body as unknown as Document, options)
          ) : (
            <p className="text-red-500">Blog içeriği geçersiz veya eksik.</p>
          )}
        </article>
      </div>
    </main>
  );
}

Tekil Blog Sayfamız

Bu dosyada Contentful’dan gelen Rich Text kısımları gibi alanların hangi birimlerinin (H1, Italic, Markdown vs. ) nasıl görünmesini istediğinizi ayarlayabilir ve kendinize göre değiştirebilirsiniz.

Tüm bunları yaptıktan sonra aşağıdaki gibi 2 sayfaya sahip olmalısınız.

Bloglar SayfamızTekil Blog Yazılarımız

Teşekkürler

Ve işte Contentful ile bir blog sistemi kurmak aslında bu kadar kolay, burdan sonra sayfalarınızı istediğiniz gibi kişiselleştirebilir ve yazılarınızı kolaylıkla Contentful üzerinden paylaşabilirsiniz. Buraya kadar okuduğunuz için teşekkür ederim, bir sonraki yazılardan haberdar olmak için takip etmeyi unutmayın.

Bu yazıda, “Temiz Kod” yazmanın genel prensiplerinden bazılarına göz atıyor olacağız. İlerleyen bölümlerdeki kod örnekleri TypeScript ile yazıldı fakat bu prensipleri çoğu dil için benzer şekillerde uygulayabilirsiniz.

Bu yazıyı Catalina Turlea’nın “The Checklist of My Code Review” başlıklı içeriğinden ilham alarak ve kendi yorumlarımı da katarak Türkçeye kazandırmak amacıyla kaleme aldım. Bu sürece vesile olan Göker Güner’e de ayrıca teşekkür ederim.

“Clean Code” hakkında daha fazla kaynağa göz atmak isterseniz aşağıdakilere bakmayı unutmayın;

• Mert Senkaya’nın Swift detaylarına girerek yazdığı yazıya
• Fatih Güzel’in “ilke #2 — clean code” isimli videosuna
• Robert C. Martin’in Clean Code isimli kitabı

1. Kendinizi tekrar etmeyin — DRY (Don’t Repeat Yourself) Prensibi

Aşağıdaki kod parçasını bir göz atalım:

// Array'imizin boş olmadığını düşünelim if (array.length === 1) { submitFormWithValues("Tek değer seçildi", array); } else { submitFormWithValues(array.length + " değer seçildi", array); }

Bu ilk başta normal gibi görünebilir, ancak daha yakından bakarsanız, fonksiyonun 2 çağrısı arasındaki tek fark bir parametre olmasına rağmen, bu fonksiyon 2 kez çağrılmaktadır.

Örneğin, fonksiyonun adını değiştirirsek veya üçüncü bir parametre eklersek, kodunuzda yineleme olduğu için kodu 2 yerde değiştirmeniz gerekecektir.

Bu durum aşağıdaki gibi bir yaklaşım ile önlenebilir:

let string = array.length === 1 ? "Tek değer seçildi" : array.length + " değer seçildi"; // Now we can call the method only once submitFormWithValues(string, array);

Artık fonksiyonun değişmesi durumunda, kodu yalnızca tek bir yere uyarlamamız gerekecektir — artık tekrarlama yok.

Bunun için pek çok örnek verilebilir, ancak temel olarak bir fonksiyonda veya dosyada aynı şeyleri birden fazla gördüğünüzde, değişken kısmı olabildiğince azaltarak yinelenen kodu nasıl kaldırabileceğinizi kendinize sorun.

2. Boolean değerler döndürmek

function isEmpty(array: string[]): boolean { if (array.length === 0) { return true; } else { return false; } }

Boolean değerler döndürdüğünüz durumlarda kodunuza biraz daha dikkatli bakarsanız genellikle işinize yarayacak daha basit bir yol olduğunu görebilirsiniz

function isEmpty(array: string[]): boolean { return array.length === 0; }

Aynı durum nesneler üzerindeki boolean özellikleri hesaplarken de geçerlidir. Mesela aşağıdaki gibi bir kod bloğunuz olduğunda:

function hideHeaderIfEmptyTableView(): void { if (datasource.length === 0) { header.hidden = true; } else { header.hidden = false; } }

Bu şekilde uzun bir blok yazmak yerine aşağıdaki gibi boolean değerleri ayarladığınız (veya döndürdüğünüz) bir if durumunuz varsa bu değerleri direkt olarak kullanabilirsiniz.

function hideHeaderIfEmptyTableView(): void { header.hidden = (datasource.length === 0); }

3. Girinti seviyesini azaltın ve erken çıkışları (return) kullanın

Kodunuzda ne kadar çok girinti seviyesi varsa, okunması ve anlaşılması o kadar zorlaşır.

Beynimiz aynı anda yalnızca sınırlı sayıda koşulu tutabilir, bu nedenle ne kadar çok döngüye sahip olursanız, beyninizin bunu anlamlandırması için o kadar fazla çaba gerekir.

Bu bir nevi erken çıkış kuralı ile aynı konsepti temsil eder. Tüm kodunuzu bir if bloğuna sarmak yerine (tüm kod girintilidir), önce döngünün yürütülmediği koşulu ekleyebilir ve bu durumda sadece geri dönebilirsiniz.

Aslında oldukça basit, aşağıdaki kod bloğu yerine:

function myMethod(elements: string[]): void { if (elements.length > 0) { for (const element of elements) { // bir takım işlemler } } }

Daha ayrık bir yaklaşım gösterebilirsiniz:

function myMethod(elements: string[]): void { if (elements.length === 0) { return; }

for (const element of elements) { // bir takım işlemler } }

Siz de takdir edersiniz ki bu biraz zevk ve stil meselesidir, ancak takip etmenin çok daha kolay olduğunu ve kontrol akışının biraz daha doğrusal olduğunu düşünmek bence yanlış olmaz.

4. “Utangaç” Kod

The Pragmatic Programmer’da belirtildiği gibi, kodunuz her zaman “utangaç kod” olmalıdır.

Her şeyi mümkün olan en küçük kapsamla yazın ve kapsamı yalnızca gerçekten ihtiyacınız varsa artırın — örneğin, her şey private olarak başlayın; özellikleriniz, yöntemleriniz, sınıflarınız...

Bu kuralın geçerli olduğu bir başka yol da nesnelerinizin sahip olduğu özelliklerin açıklanma düzeyidir. Diyelim ki içinde bir resim içeren özel bir UI bileşeniniz var ve bu resim bileşeninizin dışından da ayarlanabilmelidir.

Görüntüyü bir okuma/yazma özelliği olarak göstermek yerine, sınıfınızın içinde ilgili özelliği güncellemek için bir yöntem sağlayabilirsiniz. Görüntü yalnızca salt okunur olarak gösterilecektir ve ayrıca özelliğinizde ayarlanan değerler üzerinde daha fazla kontrole sahip olabilirsiniz.

5. Boş fonksiyonları ve kullanılmayan oluşturulmuş kodları kaldırın

En iyi kod, varolmayan koddur.

Kullanmadığınız tüm kodları (IDE tarafından oluşturulmuş olsa bile) silmeyi alışkanlık haline getirin. Boş metotları, kullanılmayan değişkenleri, içe aktarmaları, modası geçmiş yorumları projenizde bırakmayın.

Kod silmek, bir geliştirici olarak en sevdiğiniz etkinliklerden biri olmalıdır çünkü aslında projenizin daha temiz ve minimal bir hale gelmesine yardımcı olur.

“Mükemmelliğe eklenecek bir şey kalmadığında değil, çıkarılacak bir şey kalmadığında ulaşılır” — Antoine de Saint-Exupery

Aynı şey yorumlanmış kodlar için de geçerlidir. Orada öylece bırakmayın. Zaten kaynak kontrol aracınızdaki (git vs.) tüm geçmişe sahipsiniz, bu yüzden kaldırın. Eğer tekrar ihtiyacınız olursa, dosyanızı geri döndürebilirsiniz — her ne kadar benim deneyimlerime göre, emin olmadığınız kodlara nadiren geri dönersiniz (ilk etapta yorumlamaya karar vermenizin nedeni bu olabilir).

Dikkate alınması gereken diğer hususlar

Kodunuzu gözden geçirirken şunu her zaman aklınızda bulundurmalısınız:

• Sabit kodlanmış değerler: Öncelikle kendinize şunu sormanız gerekir: Statik değeri kaldırmanın bir yolu yok mu? String, float, ints ne olursa olsun. Eğer cevap evet ise, devam edin ve daha iyi hale getirin :) Eğer ondan kurtulmanın bir yolu yoksa, onu statik bir değişkende saklayın (ya da kullandığınız dilde formatı her ne ise).

İsim, değere defaultImageWidth veya controllerIdentifier gibi bir bağlam sağlayacak ve bir süre sonra koda geri döndüğünüzde ne anlama gelmesi gerektiğini anlamanızı kolaylaştıracaktır. Bir başka faydası da, deneyimlerime göre, bazen bu değerlerin daha fazla yerde tekrar tekrar ortaya çıkmasıdır. Bunları bir değişkende saklamadan, değeriniz 3'ten 4'e değiştiğinde kodu her yerde değiştirmeniz gerekirdi — tekrarlanan bir koda sahip olurdunuz.

• Ekip standartları ve yönergeleri — her zaman standartların herkes tarafından takip edildiğinden emin olun ve kod incelemenizde bazı şeylerin gözden kaçmasına izin vermeyin. Bu, değişkenleri adlandırmanın tutarlı yollarını, kod biçimlendirmesini, ekibinizde üzerinde anlaşmaya varılan diliniz için en iyi uygulamaları, adların, yöntemlerin ve kararların herkes için aynı anlama gelmesine dikkat etmeyi içermelidir.
• Hatalarınızı kaydedin — belki barizdir, ancak özellikle kodunuz zaten üretimde olmadığı sürece bunun değerini göremeyeceğiniz için bahsetmeye değer olduğunu düşünüyorum (o zaman değişiklik yapmak biraz zor, en azından mobil uygulamalar için). Kodunuz geçersiz bir duruma ulaştığında veya bazı özellikler yanlış yapılandırıldığında, bazı şeylerin imkansız olduğunu düşünseniz bile, hatayı günlüğe kaydettiğinizden ve mesaja mümkün olduğunca fazla bilgi eklediğinizden emin olun. Bunun kaç kez işe yarayacağına inanamayacaksınız.

Bu yazıda sizlere çoğu yazılım dilinde karşılabileceğiniz, bazıları bariz bazıları ise biraz daha zor fark edilebilen “Clean Code” prensiplerinden TypeScript örnekleri ile bahsetmeye çalıştım, umarım sizin için faydalı olmuştur.

I've recently read Ali Abdaal's New York Times Best Seller 'Feel Good productivity' and I've taken very nice lessons for myself while reading it. Here are the most impactful highlights I noted down, I hope you can take something for yourself from my notes.

Part 1: Energise

Chapter 1: Play > Page 35

Mihaly Csikszentmihalyi (pronounced ‘chick-sent-me-hi’),

Part 2: Unblock

Chapter 6: Get Started > Page 149

r/ GetMotivatedBuddies

Chapter 6: Get Started > Page 151

I find that the best accountability buddies meet five criteria: being disciplined (they must stick to what you’ve agreed to), challenging (they know what it means to help you move on to the next level), patient (they don’t jump to conclusions or rush you into making decisions), supportive (they’re there with words of encouragement) and constructive (they must know how to give you honest feedback and constructive criticism).

Part 3: Sustain

Chapter 7: Conserve > Page 158

Finally, there are burnouts that relate to doing the wrong stuff. Your mood is suffering because of the weeks, years or decades when you’ve put all your efforts into something that doesn’t bring you joy or meaning, and it has worn you down. You’ve been using your energy in the wrong way. I call these misalignment burnouts.

Chapter 7: Conserve > Page 160

We accept more work than we can do, and fail to take the breaks in our working day that we require. We sprint all the time.

Chapter 7: Conserve > Page 161

Jobs’ message was clear: no was just as important as yes. ‘I’m actually as proud of the things we haven’t done as the things I have done,’ Jobs said.

Chapter 7: Conserve > Page 162

we say yes to things in the present, but in the long term, they’re going to grind us down.

Chapter 7: Conserve > Page 164

If it isn’t a ‘hell yeah’, it’s not worth doing.

Chapter 7: Conserve > Page 165

‘Would I be excited about this commitment if it was happening tomorrow? Or am I only thinking about saying “yes” to it because it’s easier to make it a problem for my future self?’

Chapter 7: Conserve > Page 167

So the goal is to spend most of our time focused on just one task–but not beat ourselves up if we occasionally lose concentration.

Chapter 7: Conserve > Page 170

In most aspects of our lives, if things go slightly wrong we don’t let ourselves get blown entirely off course.

Chapter 7: Conserve > Page 170

‘I’ve spent five minutes on social media; I might as well continue to do so for the next three hours.’

Chapter 7: Conserve > Page 171

‘If you haven’t managed to get deep into the practice, that’s ok. Don’t worry. You can simply begin again.’

Chapter 7: Conserve > Page 175

Remember Dr Adcock. Even if you’re in the business of saving lives, breaks aren’t a special treat. They’re an absolute necessity.

Chapter 8: Recharge > Page 178

‘doomscrolling’.

Chapter 8: Recharge > Page 182

quintessential

Chapter 8: Recharge > Page 182

Hobbies are the first way we can integrate CALM activities into our lives.

Chapter 8: Recharge > Page 191

Well, the simplest way is to actively schedule moments of ‘nothingness’ into your week. Some nights, you don’t need to go for a walk or paint a picture. Some nights, you should simply let yourself zone out.

Chapter 8: Recharge > Page 193

The Reitoff principle is the idea that we should grant ourselves permission to write off a day and intentionally step away from achieving anything. For many of us, the challenge of rest lies in the act of stepping back from the things we think we should be doing. We’re conditioned to value self-control, grit and persistence. We equate rest with laziness, weakness or failure.

Chapter 8: Recharge > Page 193

this short-term ‘unproductiveness’ gives me time to reset and recharge.

Chapter 8: Recharge > Page 193

By doing less today, you can do more of what matters tomorrow.

Chapter 8: Recharge > Page 194

Find an activity or project that makes you feel Competent, Autonomous, Liberated and Mellow.

Chapter 9: Align > Page 199

External motivation is the form of extrinsic motivation that’s the least autonomous; instead of us being motivated by any kind of internal force, we’re being controlled by the opinions, rules and rewards offered by others.

Chapter 9: Align > Page 201

when we think about death, we get a clearer view of life.

Chapter 9: Align > Page 205

It promised to turn my vague ideas about what I wanted into a clear picture underpinned by evidence. The approach was called the ‘odyssey plan’.

Chapter 9: Align > Page 205

But Burnett’s design mindset offers an unusual way to answer the question. He invites you to reflect on:

Chapter 9: Align > Page 206

The odyssey plan inspired me to focus on growing my business,

Chapter 9: Align > Page 209

The wheel of life, Dr Lillicrap explained, was a coaching framework we could use to define success for ourselves. You start by drawing a circle and slicing it up into nine segments. Around the edges of each spoke of the wheel, you write down the major areas of your life. Below are the ones that Dr Lillicrap recommended as a starting point, although you could also come up with your own. We’ve got three for Health (Body, Mind and Soul); three for Work (Mission, Money, Growth) and three for Relationships (Family, Romance, Friends).

Chapter 9: Align > Page 211

the ‘12-month celebration’. This is my favourite method to convert dreams into actions. The idea is simple. Imagine it’s twelve months from now and you’re having dinner with your best friend. You’re celebrating how much progress you’ve made in the areas of life that are important to you over the last year. Look back over the values that you identified in the wheel of life. Now, write down what you’d want to tell your best friend about your progress in each of them.

Chapter 9: Align > Page 212

Ask yourself: ‘If I was to make the 12-month celebration a reality, what would I need to do over the next year to get there?

Chapter 9: Align > Page 214

My favourite way to integrate long-term values into day-to-day decisions draws upon a simple fact: short-term targets feel much easier to reach than long-term ones.

Chapter 9: Align > Page 214

‘Proximal goals hadn’t just helped these children solve problems–they’d changed the way they looked at math.’

Chapter 9: Align > Page 215

Personally, I have my 12-month celebration saved in a Google Doc, bookmarked on my computer’s web browser. Whenever I sit down to begin work, I open up that Google Doc and scan through it to remind myself what my 12-month celebration looks like. Then, under each of the areas of health, work and relationships, I choose one subcategory to focus on. Here’s what my three alignment quests looked like this morning:

Chapter 9: Align > Page 215

H–Gym session 15.30–16: 30 W–Make progress in writing Chapter 9 R–Call Nani (my grandma) Last Word: Think Like a Productivity Scientist

Chapter 9: Align > Page 220

At the time, I was getting all the basic tactics wrong. Instead of viewing productivity in terms of what made me feel good, I was viewing it in terms of discipline: how much pressure I could pile on myself to just do more. Instead of trying to integrate play, power and people into every ward round, I was catastrophising about my sense of boredom, powerlessness and loneliness

Introduction

This has been something I really struggled when I first try to setup a config for accessing my docker containers using my domain and at the time I couldn't find a proper document that I can understand so I told myself why not write it yourself so here it is.

Update Your System

As a classic, update your system and later install NGINX to your machine.

sudo apt update sudo apt install nginx

NGINX Setup

After that, go to the following directory and create a config file for your application

cd /etc/nginx/sites-available/ sudo nano /etc/nginx/sites-available/my-app

Later, add the following to your config file with the correct information

server { listen 80; server_name my-app.your-domain.com;

location / { proxy_pass http://localhost:port-of-your-app; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }

You can check the ports of your docker applications using docker ps inside your machine.

Then create a symlink from the file you created to the folder where NGINX holds enabled sites.

sudo ln -s /etc/nginx/sites-available/my-app /etc/nginx/sites-enabled/

after that test your config file and restart your nginx instance

sudo nginx -t sudo systemctl restart nginx

Set DNS Records

For every app you create with the statements below here, you need to set separate DNS records in your domain provider.

Here is how you can do it:

1. Go to your domain provider
2. Open your domain settings and find DNS Records
3. Create a new "A" record with the following configs: - Name (Subdomain): the name you used in the creation process. (e.g. my-app)

• Value: Public IP Address of your server (where you run your application)

You can check if the DNS Records have been changed using this tool. It should show the IP Address of your server when you input your subdomain (my-app.yourdomain.com) if you have done everything correctly.

SSL Certification

sudo apt install certbot python3-certbot-nginx sudo certbot --nginx -d my-app.your-domain.com

Additional Commands

List the symlinks (enabled NGINX instances) created for your applications:

ls -l /etc/nginx/sites-enabled/

Example output:

/etc/nginx/sites-enabled/my-app -> /etc/nginx/sites-available/my-app

List the available sites for NGINX:

ls /etc/nginx/sites-available/

Side Notes:

1. In case you fuck-up in the process ( like I did :D ) here you can find the default enabled site config file for NGINX. Located under

/etc/nginx/sites-enabled/default

1. You should keep the places where "my-app" is written same, so for example if you are setting up a config for uptime kuma everywhere you should use "kuma" (name depends on you). If you change any of those to a different string it will not work as I experienced.