Yazılımın ilk 250 günü - Part 3

17 dk okuma

21. Gün

21 gün nasıl da geçmiş gerçekten anlamadım. Çok çalışmak istiyorum, çok öğrenmek istiyorum çünkü işimi çok iyi yapmak istiyorum. 21 gün bu kadar hızlı geçtiyse, her güne daha çok şey sığdırmalıyım diye düşünüyorum. Hayat kısa, göreceli de olsa. Evet bu girizgâhtan sonra bugüne dönebiliriz.
//Sonraki paragraf işle alakası olmamasına ragmen yine de yazdım. Direkt geçebilirsiniz.
/* Bugün event, event listener gibi konuların ne olduğuna, bir websitesi için ne anlam ifade ettiğine ve nerde kullanıldığına bol bol baktım. Kâh dökümanlar içinde, kâh problemler ve çözümleri içinde kayboldum. Gün sonundaki sizin anlattıklarınız da yararlı oldu. Ama bugün şunu düşündüm: Mühendis nedir? Ot’un, çiçeğin,elektriğin, binaların, köprülerin, uçağın, arabanın, işletmenin, fiziğin, matematiğin, uzayın, meteorolojinin, metalurjinin, bilgisayarın, yazılımın mühendisliği varsa eğer; bu çok büyük tabiri nasıl ifade edebilirdik. Çözüm bulma yetisiydi sanırım spesifik bir konu ile alakalı. Mühendisliğin sanata olan benzerliği ne olabilirdi peki? Yaratıcılık olabilir dedim kendime (typeof ‘da-vinci’ === ‘mühendis-sanatçı’ idi). Aradaki fark, birinde estetik ön plandayken diğerinde işe yararlılık, sağladığı kolaylık ve diğer insan faktörleri önemliydi. Bu yaptığımız işte, sanatla bağlantılı olan nokta da yaratıcılık konusu. Sanat eseri günlük hayatta bir işimize yaramayabilir, ama bizim yaptığımız şeyler bir işe yaramalı. Sanat eseri mükemmelliyet tutkusu ile yapılabilir, ama biz mükemmeli yakalamak isterken istediğimiz sonucu hiç elde edemeyebilir ve obsesif ruh haline bürünebiliriz. Dünyanın en hızlı arabasını yapmak eğer bizim mükemmel tanımımıza giriyorsa şöyle düşünebiliriz: Düyanın en hızlı arabasının fotoğrafını çekebilirsin, resmini de çizebilirsin. Hayal de edebilirsin. Ama onu yapman için çok çalışman gerekir. Ekip olarak çalışman gerekir. İnsanlarla uyumluluk gerektirir. Çok para gerekir. Zaman kısıtlaması olabilir. Kısaca mükemmele ulaşmak için çok faktör vardır ve ulaşamasak bile yolunda uygun adımlar atmak yeterlidir diye düşünüyorum. Yaratıcılık mı? Her bir probleme uygun bir algoritma geliştirip çözüme ulaşmak bu işin sanatsal kısmı diye düşünüyorum. Ve bence en çok haz veren kısmı da bu olmalı. Yani CSS’te renk değiştirmekten daha zevklidir diye tahmin ediyorum. Bu da bireylerin bakış açısına göre değişiyor tabii ki de, çoğu şeyin göreceli olması gibi. Lafı çok uzattım kusura bakmayın, sanırım asıl konuya girmeliyim.
*/
Bugün öncelikle beni en çok etkileyen şey bir problem ve ona getirilen bir çözümdü. Basitti ama güzel bir örnekti: Problemimiz web saysası üzerinde oluşturulan 16 ayrı parçaya farklı farklı rastgele renkler verebilmenin algoritmasıydı. Çözüm olarak üretileni çok sevdim: Bir döngü açılıp, 16 kez tekrar etmesi sağlanıp, döngü içine de “.createElement” ve “.appendChild” kullanarak body’ye 16 tane ayrı div ekleniyor (body’nin child’I olarak). Sonrasında “rgb(-,-,-)” içine yazılabilecek en büyük sayı ile en küçük sayı arasında rastgele bir sayı seçen bir fonksiyon yazılıyor. Sonrasında ise birkaç farklı yapı kullanılarak bu divlerin backgroundcolor’ları her mouse’a tıklamada değiştirilebiliyor. Bu yapılar şunlardı: “.addEventListener, .eventobject, event handle property, event handle attribute”.Hepsi de aynı sonucu veren bu farklı yapılardan bugün en çok “.addEventListener”a baktım.
Bu örnekten farklı olarak birkaç örneğe bakmış olsam da bir diğeri de şuydu: site içindeki bir düğmeye tıklayınca açılan bir videoydu. Butona basmadan görünmezken basınca görüntüleyip, sonra da videoya tıklayınca yok olması çok güzeldi. Bunun bir benzeri olarak bizim sitemizdeki bir fotoğrafın tıklanınca gelmesi konusu da bizim için iyi bir örnek oldu diye düşünüyorum hem javascript hem de biraz seo konusunda.
Kısaca nelere bugün baktığımı ve onların ne olduğunu yazmak istiyorum. Bu yazdıklarımı aslında günlük olarak bilgisayarıma kaydettiğim için, ileride tekrar bakıp feyz almak da güzel olur:
  • Html DOM
    Scripting dili ve web sayfası yapısı arasındaki bir arayüz. Tarayıcı her web sayfası için bir DOM oluşturur. Scripting dillerinin web sayfasına ulşamasına ve değiliklik yapmasına DOM izin verir. DOM sayesinde javascript dinamik HTML sayfaları yapabilir.
  • .createElement()
    Bir tag ile yeni bir element düğümüne referans yaratır ve return eder. DOM içine yeni bir element yaratmaz, bunu yapılabilmesi çin “.appenChild()” gibi bir method ile kullanılması gerekir.
  • .innerHTML
    Bir elementin şimdiki içeriğinin değerine ulaşmak için ve üstünde değişiklik yapabilmek için kullanılır. Benzer şekilde “.innerText” ve başka yapılar da mevcut olup aralarında bazı farklar bulunmaktadır.
  • .getElementById()
    id attribute üne sahip bir elementi specific değeri ile döndürür. “id” eşsiz olamlı ve ve birkaç elemanda kullanılmamalıdır. Eğer kullanılırsa sadece ilk uyuşan id’li elementi alacaktır.
  • .querySelector()
    Id,class gibi attribute lerle elementleri sorgulamaktır. Uygulamasını yaptığımız için atlıyorum.
  • Javascript Events
    Bir web sayfası üstünde kuulanıcı interaction’I ya da tarayıcı manipülasyonu, client-side(browser üstünde) javascript event’inin yaratılmasına neden olur. Event’ler javascript fonksiyonu kullanarak DOM’u manipüle etmek(üstünde değişiklik yapmak gibi) için kullanılabilir. Event’ler tıklamadan mouse’u bir elemnt üstünde gezdirmye kadar her şey olabilir. Event’ler web tarayıcı üstündeki javascript API’nin bir parçası olarak tanımlanır.
  • Event Handler
    Javascript’te bir event meydana gelince, event handler yani event listener çalışır.
  • JS Event Handler
    Javascript’in amacı dinamik bir web sayfası yapmaktır, yani eventlere cevap verebilen bir yapı(butona tıklama, sayfayı kaydırma gibi). DOM elementleri eventler ile alakalı bir fonskiyona sahip olabilir. Bu fonksiyonlar event handler olarak adlandırılır ve DOM element bir event target olarak bilinir.
  • Event Object
    Event handler fonksiyonunda parametre olarak geçerler. Event hakkında bilgi tutarlar. Event objeleri event target,event type, ve bağlantılı listener lar hakkında bilgi tutarlar.
  • .addEventListener()
    Event handler ı event target üstündeki spesifik bir event’e eklemeyi sağlayan metoddur. Avantajı ise event target üstüne overwrite yapmadan farklı event’ler ekleyebilmektir. İçinde iki argüman bulunur: Event ismini içeren string ve event handler function.
Çok daha fazla ayrıntı da var fakat uygulama ve görevlerle daha da pekişeceğini düşünürek bu kadar yeter diye düşünüyorum. Bubbling ve capturing gibi şeyler de var fakat sonra da açıklayabilirim.

22. Gün

Bugün verdiğiniz ödevi anlamak,anlamlandırmak için uğraştım. Biraz zaman alsa da üstesinden geldiğimi düşünüyorum. Başta google da “ (‘.class’) ” gibi bazı anahtar kelimeleri aratıp konıuyu anlamak istedim çünkü verilen ödevdeki kodda “.find, .css” gibi methodlar vardı ve bunlar tanımanıyordu. Yani aslında bu kodlar başka bir yerde ya da platformda yazılmış ve burda javascript’e dönüştürülmüş olabilirdi. Ve öyle olduğunu da farkettim. jQuery ile yazılmış yapıların benzerlerinin javascript e uyarlanmış haliydi. Anlamam zaman aldı kodun işleyişinin. Şeyi farkediyorum: başta bazı şeyler göze çok zor görünüyor fakat çözünce yapıyı, aslında ne kadar basitmiş diyor insan. Evet bu kodu şimdi ben yazamayabilirim, ama algoritmasını anlamak da bence önemli ki anladığımı düşünüyorum. Gün içince yine event konusuna biraz baktım ve jQuery ile html dom elementinin manipülasyonu hakkında örneklere baktım. Ben bugünün çok verimli geçtiğini düşünüyorum. Çünkü önümüze problemler çıktıkça ve onlara çözümler üretmeye çalışırken bir şeyler öğreniyoruz gibime geliyor. Aslında object, array, döngü gibi yapıları 157.3545(küsüratlı gireyim de doğru olduğu düşünülsün prensibi) kez gördük ama yine de eksikler çıkabiliyor. Bence de bu kötü ama 22 günde de yine birçok şey yapıp, yeni şeyler öğrendiğimizi düşünüyorum. En azından kendi adıma öyle olduğunu rahatlıkla söyleyebilirim. Günün geri kalanında belki de biraz dinlenmem gerektiğini düşünüp çalışmaya ara verip bulduğum güzel yazıları okudum. Farklı konulara bakmak güzel geldi. Bugünlük bu kadar diyebilirim.

23. Gün

Bugün çok güzel geçti diye düşünüyorum. Özellikle iş sonrası yapılan etkinlik keyif vericiydi benim için. Size, patrona ve bu etkinliği ayarlayan insanlara teşekkür ederim. Evet günümüze geçebiliriz.
Bugün tekrar niteliğinde oldu ve biraz DOM elemetinin manipülasyonu üstüne örnekleri inceleyip kendim de bir şeyler yapmaya çalıştım. Birkaç tane kodu inceleyip, MDN ve benzeri sitelerdeki verilen yönergeleri takip ederek kendimde bir şeyler yapmaya çalıştım. Yapamadığım yerlerde çözümlerine bakıp anlamaya çalıştım. Daha önce işlediğimiz konulara da göz attım. Method, fonksiyon, class, promise gibi konulara tekrar baktım. Oturmayan yerler var mı? Bence çok az (yine de büyük konuşmamalıyım). Evet kullanım şekillerini unuttuğum yapılar var fakat biraz araştırınca hemen hatırlıyorum ve anlıyorum o yüzden çok sorun olacağını pek sanmıyorum. Tek sorunum CSS konularında çok pratik yapmayıp, biraz zorlanmak site tasarımında. Aslında bir site yapısı oluşturdum websiteize bakarak ve bence ilk çalışma için yeterli seviyedeydi ama daha da geliştirilebilir. Aklıma takılan en büyük iki şeyden biri buydu. Diğeri de async ve promise konularında örnek yapmamanın verdiği zayıflık oldu. Daha sonra yapacağız büyük ihtimalle ama söyleyebileceğim eksikliklerden biri de o.
Bugünlük söyleyebileceklerim bu kadardı. Yarın sizin son verdiğiniz ödevdeki metodlara, farklı metodlar ekleyip DOM manipülasyonu ile alakalı çalışmak istiyorum. Deneyeceğim.

24. Gün

Bugün flexbox konusundaki örneklerin, çok daha fazla konuyu pekiştirip bize öğrettiğini düşünüyorum. Bir görevde flexbox yapmayıp absolute’la bir çok yeri yapınca tasarım responsive olmamıştı doğal olarak. Ama bu da bir ders oldu diye düşünüyorum ve sonrasında da flexbox kullanarak da tamamladım tasarımı (sizin de göstermenizle tabii ki).
Son ödevdeki açıklamamız gereken veri yapısını şöyle açıklayabilirim: “Birbirini, yan yana dizilmiş 3 ana sütun içinde tekrarlayan farklı desenlerin oluşturduğu bütün. Halıyı inceleyince her sütun, kendini tekrarlayan desen gruplarına sahip. Her grubun bitişinde, tekrar en baştan aynı grup eklenmekte. Bunu da sadece tahmin edebilirim çünkü halının kesiminden dolayı geri kalan tekrar eden yapıları göremiyoruz. Ama 3 sütunun bitişi ve başlangıcına dikkatli bakılırsa tekrar eden yapı görünmektedir. Çizim kısmını sadece flexbox kullanarak tamamladım. İskelet yapısı benzemekle beraber, veri yapısına döndürmeyi ve iki boyutlu bir diziye nasıl döndüreceğimi düşündüm ama bir sonuç henüz bulamadım. Erken uyuyup, erken uyanıp tekrar düşüneceğim.
Bugün farklı olarak mesai bitiminde başka bir konuya baktım. Daha önce verdiğiniz DOM elementlerini manipüle etmeye yarayan koda bir şeyler eklemeye çalıştım. Örneğin popular kategorilerde ‘title’, ‘alt’, “img” etiketinin ‘title’ı ve “span” etiketinin içinde bulunan metin ifadesi aynıydı. Bunların hepsini (bir element ve onun child elementleri dahil) tek bir kodla güncellemek için ufak bir ekleme yaptım koda. Evet çalıştı, basitti aslında. Bir de mesela istenmeyen bir property eğer etiketlerimizde varsa hepsinde birden silmek için de ekleme daha yaptım. Aslında bu basit eklemeler dışında farklı ve çok güzel algoritmalar kullanmak istedim. Ama doğruyu söylemek gerekirse DOM’da neleri değiştirebileceğim pek aklıma gelmedi. Çünkü zaten en temel şeyler algoritmada bulunuyordu. jQuery ile neleri değiştirebileceğime biraz baktım ondan istifade edebilmek için, bundan sonra arta kalan zamanlarda daha önemli bir şey olmazsa yine bakacağım.

25. Gün

  • Flexbox kavramının iyice oturduğunu düşünüyorum. Bugün ve dün yapılan örneklerle beraber bence çok iyi anlaşıldı, birçok uygulama yaparak.
  • Günün asıl önemli kısmı, flex özelliğini kullanarak HTML’I biçimlendirmekten çok, javascript ile halı desenininden yola çıkarak bir veri yapısı oluşturmaya çalışmakla, bir algoritma kurup onu kodlayacağım dil ile bir şekilde aktarmakla geçti. do…while döngüsü ve sizin dediğiniz yollarla başta denedim ama mantığnıı kafamda oturtamadım ve sonrasında biraz problem üstüne düşünüp, başka hangi çözüm yolları olabileceğini düşündüm. Aklıma en son gelen çözüm metodu ile şansımı denemek istedim. Ama bir mantık hatasından dolayı yazdığım kod doğru çıktıyı vermedi. Ben açıkçası kendi emeğimi tebrik ediyorum kendi kendime. Sonuçta denedim, ama yanlış şeyi denemişim en sonunda anladım en başta farketmem gereken şeyi. Artık daha da net anladım ki bir problem verildiğinde enine boyuna problemi iyi anlamam, sonrasında da iyi bir çözüm yolu geliştirmem gerekiyor. Aslında bunu biliyorum ama farklı algoritmalar karşıma çıktıkça onlar için geliştirilebilecek bambaşka çözüm yolları oluyor. Ve bu da gerçekten başta zorlasa da, bir şeyler yazabilince yabancı bir dilde (programlama dili) insanı çok mutlu ediyor.
Diyeceklerim bu kadardı. Bugün istenen algoritmayı tüm çalışma sonucu kuramadığımı farkettiğim an, daha önümdeki yol uzun diye düşündüm.

Günün klişe mottosu benim için buydu sanırım:

No pain, no gain.

26. Gün

  • Bugün zorlandım, CSS konusunda. Flexbox’ların nasıl kullanıldığını öğrendim. Ama o sitenin tasarımını yaparken bir türlü beceremedim. Sonrasında da kendime biraz zamanayırıp tekrar bakarım diye düşünüp mesai sonrasında gelip bakacaktım ama yarına bırakmaya karar verdim. Bir işi halletmeden yarım bırakmayı hiç sevmiyorum ve bu yüzden çok rahat değilim ama yapamamışsan da yapamamışımdır ve sonra derin bir nefes alıp tekrar başlamam gerekir.
  • Bugün sizin yazdığınız koda sabah baktım. Mantığını da oturtup fonskiyonları, döngüleri her elemanıyla beraber yorumladım. En önemli gördüğüm yerleri de koda yorum satırı olarak ekledim ki, bird aha baktığım da daha rahat anlayabileyim.
  • Bugün öğle vakitlerinde javascript’e bakarken şeyi farkettim: prototype ve constructor kullanımı arasındaki farkı tam anlamamışım. Konu hakkında bir şeyler araştırıp örneklere ve anlatımlara baktım ama hala anladığımı söyleyemem. O farka tekrar bakmam gerekiyor
  • Günün önemli bir aydınlanması javascript’in objelerle uğraşıyor olduğunu farketmek oldu. Fonksiyonlar, diziler aslında bir objeymiş ve null ve undefined dışındaki primitive’ler (boolean, number, bigint, string, symbol) obje değilmiş ama o şekilde davranıyorlarmış javascript için. Bu konuları daha önce işlemiştik diye hatırlıyorum ama unuttuğum için bazı kısımlarını, kendi çapımda bir aydınlama yaşadım.

27. Gün

Bugün mesainin hepsi web sitesi tasarımı ile geçti. Dün başlangıçta yapmakta biraz zorlandım çünkü copy paste yapmadan kendim en baştan yazmak istemiştim. Ama sitenin HTML/CSS elementlerine bakınca da bazı şeyleri almak istedim. Bu sefer iyice karışmıştı. Bu yüzden bugün sabah erkenden uyanıp kendim evde biraz videolarını izledim konu ile alakalı. Sonrasında mesai saatleri içinde de hallettim. Biraz yavaş ve eksikleri olsa da bence güzel bir çalışma oldu.
Mesai sonrasında ise Javascript,algoritma, veri yapıları üstüne biraz araştırma yaptım.

Content aware image resizing in javascript örneğini inceledim. Typescript kullanıldığı için ve şu anki bilgi düzeyimin üstünde olduğu için sadece genel yapıyı ve mantığı kavramaya çalıştım öncelikle. Algoritmayı incelerken Dynamic Programming ile karşılaştım. DP ve recursive fonskiyonlar kullanılarak bir sonucu elde etmek arasındaki farkları öğrendim. En basitinden Fibonacci sayılarını recursive bir fonksiyon ile elde etmek mümkün. Fakat callstack’e o kadar çok işlem atanıyor ki, gereksiz yere sistemi yoruyor ve işlemi uzatıyor. Fibonacci sayılarından 20. terimi bulmak için 21981 kez hesaplama yapılırken, dynamic programming algoritması ile 55 kez hesaplama yapılıp işlem tamamlanabiliyor. Memoization tekniği bu anlamda çok işe yarıyor. Memoization ile, cache benzeri bir yapı kullanılıyor ve daha önce hesabı yapılanlar, bir object içinde tutuluyor. Ve ihtiyaç olduğunda direct ordan çekilebiliyor ve tekrar tekrar hesaplamaların önüne geçiliyor.


Örneğe geri dönüp baktığımda ise şunu gördüm: bir fotoğrafı, anlamlı ya da içeriğin önemli olan ve yapısınının bozulmasını istemediğimiz kısımlarını aynı tutarak o fotoğrafı genişlik veya yükseklik açısından küçültmek, bizim amacımızdı. Bunun için de fotoğraf içindeki pikselleri incelemek ve ona göre işlemler yapmak gerekiyordu. Fotoğraf içindeki her bir pikseli, renk yoğunluğuna göre (pixel’s energy) tanımlayıp, bunun üstünden işlemler yapıldı. Tüm fotoğrafın piksel enerjisi için bir harita oluşturulup, o haritada bir patika elde etmekti amaç. Genişlik daraltılacaksa eğer, fotoğrafın yukarısından aşağısına kadar enerji haritası üstündeki en az enerji yoğunluğu bulunan patika seçilmeliydi. Bunun için de Dynamic Programming algoritması kullanıldı (Dynamic Programming vs Divide-and-Conquer gibi bir kıyasta varmış ama ona sonra bakacağım).

Algoritma ile alakalı konuları anlamayı çok istediğim için ve bir şeyleri çözmeye çalışmak (bence) çok keyifli olduğu için bunlara baktım akşam. Javascript Algorithms isimli bir kaynak buldum ve boş zaman olursa buradan hem bazı konuları tekrar edip hem bilmediklerimi öğrenip hem de farklı sorunlara nasıl çözümler getirilmiş onları anlamaya çalışacağım.

28. Gün

Bugün de genel olarak CSS ile geçti. Konu hakkında çok yeni bir şey öğrenmediğim için bugün bu satırlar uzun olmayacak o yüzden. Çünkü günün çoğunuluğu öğrendiklerimi, gördüklerimi, okuduklarımı, anlattıklarınızı pratik yaparak geliştirmekle geçti genel olarak. Gün sonuna doğru bahsettiğiniz 100 cümlelik liste üstüne düşündüm. Birkaç cümle yazdım ama genel olarak yapılan işin müşteri kitlesini, isteklerini, oyun dünyasındaki alınıp satılan şeylerip ek bilmediğim için sonrasında onları biraz araştırdım. Site hakkındaki şikayetlere, bloglardaki yorumlara, diğer benzer sitelerin bot ya da canlı destek kısmındaki örnek sorulara baktım. Site içindeki agar.io benzeri oyuna girip, siteden oyuna erişen insanları gördüm biraz da merak edip işin doğrusu ağızlarını aradım site hakkında. Daha sonrasında yabancı ülkelerdeki bu işi yapan firmaların web sitelerine göz attım biraz da. Tasarımı çok iyi olan da var kötü görünen de. Site içinde birçok resim bulunup hızlı açılan da, 10 saniye boyunca yüklenmek için kendini parçalayan siteler de.
Bugünlük bu kadardı.

29. Gün

  • Bugünü öncelikle unutmayacağım. 1 ay boyunca node.js ile çalışıp, node.js mi yüklemem gerekiyor gibi saçma(sapan) bir düşünceye vararak kendimle de içten içe yeternice dalga geçtim. Ama bir sebebi vardı sormamın. Çünkü express’in nasıl kurulacağını bilmiyordum ve ilk kez gördüğüm şeyler. Acaba node.js’i kurup onunla beraber ayrı bir şekilde mi açılıyor visual studio’dan diye düşünmüştüm. Kafa karışıklığı. Olabilir diyorum ve devam ediyorum.
  • Bugün daha önce hiç duymadığım kavramlarla karşılaştım. Seri ve parallel iletişim, clock sinyali, mac ve ip adresi farkı, internet101 konuları genel olarak. Birçok bilmediğim şeyle karşılaştım, duyduklarımın aslında ne olduklarını öğrendim. TCP, UDP protokollerini, Websokcket’in ne olduğunu,cloudflare ile ddos attack’ların ve syn attack’ların engellendiğini öğrendim. Daha birçok şeyi not etmişim fakat detaylarına bakamadım express.js'i araştırırken.
  • Express kütüphanesinin (framework ve module olarak da düşünülebilir) ne olduğu üstüne öğleden sonrasında çalıştım. PHP’de http server olarak apache, nginx gibi sunucular kullanılıyor. Express.js’te ise sanal sunucu olarak kendisi var anladığım kadarıyla. Öyle büyük dosyalar ve programlar eklemek yerine bilgisayara, express.js kütüphanesinin indirilmesi yetiyor. Ne için kullanılıyor? Şimdiye kadar javascript’i client-side taraflı olarak işledik, o şekilde çalıştık. Server-side tarafına, back-end’e, yani sitenin beyin kısmına giriş yapmamıştık. Evet, Express burda devreye giriyor. Peki şöyle bir şey var: neden express’e ihtiyaç var? Mesela http modülü de var node.js’in o yetmez miydi? Yetmiyor. Evet ikisi de sunucu yaratmak için kullanılıyor fakat Express.js birçok özellik sunuyor kıyaslanamayacak kadar. Örneğin API tabanlı app tasarımında da kullanılıyor. MVC benzeri bir yapı sağlıyor. Async ve single thread çalışıyor. Çok hızlı I/O sağlıyor denilmiş fakat o kısmı anlamadım açıkçası.
  • Gelelim objelerimize: request ve response diye iki tane objemiz var en göze çarpan. Bu objeler, bir callback fonksiyonunun parametresi olarak geçiyorlar. Bu callback fonksiyonda middleware yada handler olarak geçiyor (arasındaki farka bakmadım henüz anlam ve kullanım olarak).
  • Request objesi HTTP Request’ini sunuyor ve bu objemiz “query string, body, HTTP header, parameters” gibi özelliklere(properties) sahip. Req.query, req.cookies şeklinde bu property’leri çağırabiliyoruz, normal javascript dilinde konuştuğumuz için.
  • Response objesi, HTTP request’I geldiğinde, Express app’i tarafından gönderilen HTTP response’unu belirtir. Tarayıcıya cevap gönderir kısacası. Eğer bir kez res.send(), res.redirect(), res.render() kullanılırsa, tekrar kullanılamaz. İstenmeyen hata verir yoksa. Res.cookies, res.clearCookie, res.redirect res.send gibi method’lara sahip bir objedir.
  • GET ve POST metodu ise REST API oluşturmak için kullanılan HTTP request’leri. (Yüzeysel olarak REST kavramını araştırdım ama sonra gireceğimizi tahmin edip, detaylaı bakmadım). Get metdou ile sadece sınırlı sayıda veri gönderilebiliyor çünkü veri header ile gönderiliyor ama POST metodu ile daha çok gönderilebiliyor çünkü veri body kısmında. Bu nedenle GET metodu güvenli değil çünkü veri URL çubuğunda görünüyor.
  • ‘fs’ in anlamını bilmiyordum, file system module imiş. Bilgisayardaki file system ile çalışmaya izin veriyor. Dosyalar için okuma,yazma, oluşturma, güncelleme,silme, yeniden isimlendirme işlemleri yapılabiliyor.
  • App.use() ve app.get() arasındaki fark:
    • App.get(): Specific bir route için kullanılıyor. Örneğin app.get(‘/book’) denildiyse, book dizinindeki alt dizinlere(child, node, ya da benzeri bir isim) erşiemiyor. Sadece belirtilen dizine erişim sağlıyor. Ve tabii ki sadece method get olduğu sürece erişim sağlıyor.
    • App.use(): Middleware’i uygulamaya bağlamak için kullanılıyor. Middleware function’i yüklemek için kullanılıyor diyebiliriz. Farkı ise şu: spresifik bir route için değil, o dizindeki tüm alt dallar için de geçerli bu method. En büyük farkı aralarında bu oluşturuyor. Ve eğer get gibi kullanmak istersek use’u, regex kullanmak zorunda kalıyoruz ve işlemleri uzatıp karmaşıklaştırabiliyor. O yüzden yeri geldiğinde use, yeri geldiğinde get, yeri geldiğinde all kullanmak gerekiyor. Bu dediğim yerleri ise bir şeyler geliştirdikçe, çalıştıkça öğreneceğim.

30. Gün

Siz bizden her günü rapor olarak yazmamızı istediğiniz günden beri 30 iş günü geçmiş. 1 ayda neler oldu peki? Algoritma, veri yapıları, design pattern javascript ile programlamaya giriş, html css gibi en temel konuları işledik. Birçok şey oturdu diye düşünüyorum bu konular hakkında. Unutulan yerlerde kısa bir google araştırması ile hemen kapabiliyorum. Şimdi server-side kısmına geçtiğimiz için, tekrar konfor alanında (göreceli) çıkıldı ve iyi ki de çıkıldı.
Bugün öğrenilen: client-side ve database arasında iletişimi sağlamak için, client-side ile web-server arasında iletişimi sağlamak için bizim bizim bazı işlemler yapmamız gerekiyor.
Şimdi benim karşıma birisi geldi. Dedi ki ben senin sitenin, şu dizinine gitmek istiyorum. Dedim ki, tamamdır ben bi düşüneyim şimdi dönücem sana. Önce bi adama baktım. Bu adam daha önce buraya gelmiş mi, tanıdık mı(cookies), hangi dizine girmek istiyor (get,post metodlarındaki req.url ya da ilk parametrelerimiz, eğer ben bu adamı o dizine alırsan , sonrasında ne yapmalıyım( redirect, res.send gibi) gibi birçok örneklendirilebilecek durumların sözel olarak belirtilip algoritmasının kurulması ve kod ile yazılması: Bizim bugün yaptıklarımız bu şekildeydi. Client ve server taraflarını birbirine bağladık. Bugünlük bu kadar.