Yazılımın ilk 250 günü - Part 2
15 dk okuma
11. Gün
Bugünün de verimli geçtiğini düşünüyorum. Objeler ve diziler üstüne birçok örnek ile biraz daha pekiştiğini düşünüyorum konuların. 11 gün geçmiş ve birçok konuda fikirlerim oluşmaya başladı.Bugün bir tane site buldum görevlerden arta kalan zamanda: latentflip.
Bu sitede birkaç kendi yazdığım kodu ve bulduğum setTimeout içeren ve diğer benzeri kod yapılarını içeren kodları, çalıştırıp çalışma şekillerine baktım. Call stack, callback queue, ve web api’ler üstüne Biraz daha fazla fikrim oluştu asenkron yapının çalışma şekli hakkında. Özellikle async…await ile alakalı örneklere baktım ve array-object konularından sonra onlar üstüne de çok çalışmak istedim fakat fırsat pek olmadı. Bugün verilen son odevi yarın tamamlamak için çalışacağım çünkü cumartesi akşamı kendime verdiğim tek boşluk.12. Gün
- Bugün verilen görevi önce fonskiyonlar ile, sonra da class kullanarak yaptım. Static kullanımını ve constructor metodunu ayrı ayrı kullanıp, throw ile hata mesajı göndermeyi, “.find, .filter, .foreach, .map, .toString, .includes” gibi yapıları kullanıp object ve array’lerde işlemler yaptım. Daha da pekiştirdim konu üstüne bilgileri.
- Sonrasında Ajax, Xml , Json gibi kavramları biraz araşıtırırken Ajax ın ne olduğu üstüne gittim. Ajax ile web sayfasını yenilemeden sunucuya request gönderme işlemi yapılabiliyor. Sunucudan veri alınıp üstüne işlemler yapılabiliyor. Bu da daha ‘responsive’ ve hızlı bir kullanıcı deneyimine izin veriyor. Günümüzde genelde XML yerine JSON daha çok tercih ediliyor çünkü JSON javascript’in bir parçası durumunda ve bu da daha ‘lighter size’ sağlıyor (Bazı kelimeleri türkçe’ye çevirmek ile uğraşınca çok vakit kayboluyor o yüzden böyle yazıyorum yoksa Tükçe’yi katletmek gibi bir amacım yok :)). Hem JSON hem de XML bilgi paketleme (packaging information) için kullanılıyor. XMLHttpRequest objesi, serverlarla iletişim için kullanılıyor.
- HTTP request nasıl yapılır bakmadan önce HTTP nedire bakmak gerekli gibi. Hyper text => linklenmiş kelime. HTTP web tarayıcı ve web sunucusu arasında iletişim için dizayn edilmiştir. Stateless protokoldür. Yani aynı bağlantıda(connection), server iki istek(request) arasında hiçbir bağlantı-köprü(link) tutmaz. HTTP çerezleri ile stateful oturumların kullanımına izin verilir. Client-server protokoldür. Bu şu anlama geliyor: request client tarafından başlatırılır (web browser yani). Client ve server arasındaki mesajların exchange’I sırasında proxy ler bulunur. Bunlar HTTP response’larını geçici olarak tutabilir (caches) ve sonraki HTTP request’ler için kullanılabilir. Proxy’ler birkaç şey için daha kullanılıyor ama bunu bilmem şu an için yeterli gibi görünüyor. HTTP akış şeması şu şekilde: 1. TCP bağlantısı oluşturulur. 2.HTTP mesajı gönderilir. 3.Sunucu tarafından gönderilen response(cevap) okunur. HTTP request’I oluştumak, sunucu cevabını işlemek ile alakalı işlemler biraz fazla detaylı olduğu için atlıyorum şimdilik. İleride tekrar karşıma çıkacağını düşünüp, şimdilik bu kadar araştırma yeterli diye düşünüyorum.
- SEO hakkında çok güzel açıklamaları ile yol haritaları çizen iki tane site buldum. İkisinin de anlattıklarını referans olarak kabul edip bu süreçte bitirmek istiyorum. Günün SEO konusu: Core Web Vitals.
Bugünlük bu kadardı.
13. Gün
- Bu sabah web’in nasıl işlediğine biraz baktım. Sonrasında görev verilince ona yoğunlaştım. Soru bence çok güzeldi ve üstüne düşünülmesi gereken yerleri vardı. Ben biraz fazla düşünüp birkaç gündür kullanmadığım yapıları kullanmak istedim. Biraz deneme yanılma metodlarını da çok kullandım galiba. Mesela switch case yapısını uzun zamandır kullanmamıştım. Açıkçası zor değildi fakat algoritmasını iyi kurmak gerekiyordu. Elbette eksikleri vardı kodumun fakat genel olarak yaptığım şeyden zevk aldım evet.
- XML, JSON konularına bakmaya başladım sonrasında. Dün zaten AJAX’I araştırırken iyice aşina olmuştum bu konulara açıkçası. Ama bugün JSON’ ın kullanım şeklini öğrendim. JSON web sunucusu ile client arasında iletişimin sağlanmasında işimize yarıyor. Ve tamamen string yapıda, yani text tabanlı bir formattır. Bugün JSON hakkında asıl öğrendiğim şey “.parse()” ve .stringtify()” metodlarıydı. Örneğin JSON objesi, javascript’teki obşeye yapı yönünden aşırı benzemsine ragmen arada çok büyük bir fark vardır. Birisi object’tir, diğer ise sadece bir text(string)tir. Yani bir javascript objesi olarak JSON objesini görmemiz mümkün değildir. Onu bir objeye döndürmek için “.parse()” metodu kullanılır. Tam tersinin istenmesi halinde ise, yani objeyi bir string hale getirmek istiyorsak da stringify metodu kullanılır. Peki neden JSON’a ya da XML’e ihtiyacımız vaR? Çünkü client ve web server arasındaki veri alışverişinde direct bir javascript objesi kullanılmaz; JSON, yani bir text dosyası kullanılır. Parse ve stringify metodlarının örneklerini inceleyip kendim de console’a yazdırıp arsdaki farklarını inceledim.
- JSON’I elde etmek : Bunun için bizim bir API kullanmamız gerekiyor: “XMLHttpRequest” ya da kısa adıyla XHR. Javascript aracılığyla server’dan kaynakları almak için network request’I yapmamızı sağlayan bir Javascript objesidir. Yani bu sayede sayfayı yenilemeden sayfada güncelleme yapılabiliyor. Detaylı ve aynı zamanda basit bir kod yapısını gördüm JSON’ı elde etmek ve request response çağırmak ile alakalı. Okudum, anladığımı düşünüyorum.
14. Gün
Bugün de genel olarak JSON, XML, API, DOM kavramlarına baktım.- API
Application Programming Interface. User Interface’ten farklı olarak bir API, yazılımlar arasında etkileşime izin veren bir yazılımın içinde bulunan kurallar ve özellikler bütünür. Web geliştiricisi (ya da diğer geliştiriciler, sadece web’te kullanılan bir teknoloji değil çünkü), kullanıcının web browser ile etkileşime geçmek için kendi ugulamasında kullanabilir. Mesela getUserMedia API ile ses ve görüntü kaudı alınabiliyor. Geolocation APı ile de konum bilgisi alınabiliyor. Çoğu API sadece secure context’te (HTTPs’de) geçerlidir. Sebebi ise API’ler kullanılarak büyük saldırılara sebebiyet verilebilir. HTTPs’nin temel amacı güçlü API’lerden ulaşan MITM (man in the middle attack) saldırılarını önlemektir. Bazı API’ler güçlü olduğu için sisteme saldırı yapanlar için büyük avantaj sağlıyor. Bu saldırılar ile kullanıcı bilgisayarına düşük seviye erişim sağlayabiliyor saldırıyı gerçekleştirenler. Ya da kullanıcı verilerine erişebiliyor. Ve kullanıcı gizliliği geçersiz kalıyor. Local olmayan kaynakların secure olması için “https:// veya wss://URLs” şeklinde olması gerekiyor. - DOM
Document Object Model. XML ve HTML dokümanları ile etkileşime geçmek için kullanılan bir API’dir. Dom tarayıcıda yüklenen bir doküman modelidir ve dokümanı bir node ağacı olarak sunar (node tree, data structures çalışırken de görmüştüm buna benzer bir ağaç yapısını). DOM web’te en çok kullanılan API’lerden biridir. Dokümanda, kodun her node ile etkileşime girmesine ve ulaşmasına izin verir ve browser’da kodun çalışmasına izin verir. Yani DOM, dokümanın yapısını sunarak web sayfasını script’e veya programlama diline bağlar. DOM ile bi mantıksal ağaca sahibiz. Ağacın her dalı bir node ise bitiyor ve her node da bir object bulunmakta. DOM meodu bizim bu ağaca erişimimizi sağlıyor ve dokümanın yapısnı, stilini, ve içeriğini değiştirmemize izin veriyor. Özet tanım: DOM web üstündeki dokümanın içeriğini ve yapısını içeren objenin veri olarak göstermidir. Dokümanı nodes ve objects olarak gösterir ki, bu da programlama dilinin web sayfaı ile etkileşime geçmesine izin verir. DOM JS’in bir parçası değil ve website oluştumrka için kullanılan bir web API’dir. Node.js, bilgisayar üstünde çalışır ama API’leri sağlar ve DOM API Node.js’in core parçası değildir. Yani DOM hiçbir programlama diline bağlı değil ve dokümanın yapısal gösterimini tek bir API ile sağlar. - XHR
Asenkron ya da senkron olarak değişir.Web workers dışında senkron kullanmamız gerektiğini öğrendim fakat tam detaylı araştırmadım o kısmı. Ama öğrendiğim bir şey var: Performans için kesinlikle asenkronu seçmeliyiz. Senkron execution’I bloklayıp ‘freezing’e sebep olur. Yani unresponsive user experience demek.- Bugün XMLHttpRequest ile işlemler nasıl yapılıyor onları öğrenmeye çalıştım. Baktığım yerlerdi de anladığımı düşünüyorum.Bir örnekte request oluşturmak için bazı adımlar takip edip işlemi gerçekleştirmişti: API’den bilgilere URL ile ulaşılmıştı. AJAX kısmında, response tipi (JSON), event handler kısmı (mesela XHR tamam olunca, server 200 OK! Deyince ne yapılması gerektiği burada belirtildi. İki parametre kullanıp (GET, ‘destination) kullanıp request açılıp gönderildi. Örnek şuydu: Bir web sayfasında bir API vardı ve kullanıcı tarafından girilen bir kelimenin kafiyeli olduğu benzer kelimeleri sonuç kısmında yazdırıyordu. Örneğin amacı neydi? Oluşturulan sitede ne kadar çok kelime araması yapsam da, sonuçlar yazdırılırken asla sayfa yenilemesi olmadı. Yani Ajax bu işe yaradı diye düşünüyorum.
- Gün sonuna doğru HTML,CSS konularına girdim. Açıkcası ço kdaha basit yapıları var fakat Pratik yapmadan öğrenmek biraz zaman alacak gibi. Bugün öğrendiğim en güzel şey konu hakkındaki sizin söylediğiniz bir şeydi: CSS oluşturulurken 3 şekli var. HTML içindeyse CSS dosyamız, inline ve internal olarak kullanım yerine göre değişiyor. Eğer HTML ile aynı klasörde başka bir CSS doyası oluşturuyorsak da o zaman external CSS olarak adlandırıyoruz.
15. Gün
Bugün tamamen CSS ve HTML üstüne çalışmakla, pratik yapmakla, araştırmakla geçti. Javascript’ten bir anda bu konulara girince zorluk yaşadığımı söylemeliyim. HTML’e ne kadar aşina olsam da CSS’le beraber tasarım konularına girmek yabancı olduğum bir şeydi ve bu yüzden en temelinden başlayıp hızlıca birçok şeyi öğrenmek istedim.- HTML ile alakalı konuların çoğunluğunu bitirdim, HTML Forms kalmıştı bir tek ama ona 1 ay önce çalıştığım için ve asıl çalışmam gereken CSS olduğu için biraz da girmedim. Diğerlerini tamamladım.
- CSS’te en temel kavramlardan başlayıp Fletbox’a kadar gelebildim. Birçok örnek inceleyip, üstünde oynamalar yapıp birkaç site tasarımı yaptım fakat ne kadar öğrendin derseniz eğer; 3 ve 2 yi topla derseniz konu hakkında yaparım. Çünkü 3 ve 2 nin tanımını, nasıl kullanıldığını bugün öğrendim. Fakat sin3°+sin2°=? derseniz sinüs ve derecenin anlamını bilmediğim için bunların ne olduğunu araştırmam, örneklerine bakmam, onlara bakıp problem üstünde kendim çözüm üretmem gerekir. Yani yap deyince yapamayabilirim ama nasıl çözüldüğünü araştırıp öğrenip yapabilirim. Bugün kısaca bu şekildeydi.
- Flex, inline-flex, flex-wrap, relative position, justify content, block-inline arasındaki fark, # işaretinin href içinde URL için placeholder özelliği, hover, align-items gibi çok farklı terimler gördüm. Bu terimlerle alıştırmalar yaptım. Ama tek bir görev verilip bunun üstüne aratırma yaparak tek tek kendim HTML ve CSS’I yazarsam daha akılda kalacak bunu biliyorum. O yüzden bugün biraz temel oturtmaya çalıştım yarın da daha çok pratik yapacağım, eğer bu konu üstüne çalışmaya devam edeceksek.
16. Gün
Bugün birbirinden farklı konulara baktım. CSS, HTML, XML ve DOM, ve regex.- CSS ve HTML de bugün tamamen websitemizin tasarımına, site içindeki kodlara baktım ve inceledim. Her kodun neden yazıldığını, her birinin ne işlevi olduğunu anlamaya çalıştım. Elbette çok karışık geldi çünkü baktığım şey büyük bir çalışmanın sonucuydu. O yüzden adım adım her bir elementi incelemeye çalıştım. Bazı yerler başta gereksiz gibi gözükmüştü mesela navigation bar kısmındaki bir kod bir işe yaramıyor sanmıştım başta. Ama sonra tarayıcının boyutunu küçlütünce o kodun da bir işlevi olduğunu gördüm. Responsive web tasarımının kolay olmadığını gördüm. Bazı yerlerde Bootstrap’ten izler vardı, mesela footer kısmındaki 6 tane div elementinde dikkatimi çekti. Öğlene kadar header kısmının bazı yerlerini benzeterek kendim yapmaya çalıştım. Oldu mu? Olmadı ama olacağını düşünüyorum. Çünkü çok zor değil fakat çok uğraştırıcı. Anladım ki algoritma ile alakalı konuları daha çok sevmişim.
- XML ve DOM konusuna gelmeliyim. Başta soruyu anlamaya çalıştım. Sonra bunun için zaten DOM Parser gibi özellikler zaten var neden uğraşmalıyım diye düşündüm. Önce kolay yolu aradım. İnternette bunun için zaten bir fonksiyon olduğunu öğrendim fakat soruda benden istenilen, string bir metinden anlamlı objeler çıkarmanın lagoritması istendiği için Google’dan kopup, algoritması üstüne düşündüm. Gayet mantıklı olduğunu düşündüğüm bir algoritmayı kurmuştum ve üstüne çalışma başlamıştım. Sonra sizin yaklaşım biçimlerinizle farklı bi çözüm yolu görünce kendiminkini bir kenara bıraktım ama yarın sizin çözümünüzü yorumlarken kendi düşündüğümü de nasıl uygulayabilirim onun üstüne çalışacağım.
- Regex’le yapmanızı beklersem, füze atmanızı isterim dediğiniz için regex daha da ilgimi çekti ve sonrasında hep regex nedir, ne için kullanılır, ve örneklerine, kullanımlarına baktım. xmlStirng text’indeki bazı istenenleri regex’le buldum. Birkaç yer I bulamadım ama dediğiniz gibi her şeyi de regex’le bulmak gerekmiyor ya da bulunmuyor sanırım. Yine de üstüne çalışmak ve birkaç şey yazmak güzel oldu diye düşünüyorum.
17. Gün
Bugün iki şey vardı yaptığım: XML’den anlamlı bir DOM objesi çıkarmanın algoritmasını anlayıp eski işlediğimiz javascript konularını, yazdığınız kodu okurken bilgi olarak tazelemek ve CSS çalışmak. HTML kısmında hiçbir problem olduğunu sanmıyorum ama CSS te kavramları birbirine çok karıştırıyorum. O yüzden web sitesi dizaynı konusunda bugün zorlandım. Gün sonunda en azından responsive olan bir header yapabildim. Konu çok fazla görsellikle alakalı olduğu için gün sonunda ve yarın üstüne videolar izleyip üstüne kendim bir şeyler yapmaya çalışacağım. Bugünü bu kadar özetleyebilirim. Eksik kaldığım konuları telafi etmek için elimden geleni yapacağım.18. Gün
Bugün de CSS ve HTML ile geçti. Inspect element dedikten sonra bol bol div’lere dalsam da, azıcık da olsa Sources kısmına girip javascript kodlarına bakınca, anlamamış olsam dahi çok hoşuma gitti. Nedense o konular çok daha cezbedici görünüyor. Evet, bugüne gelelim:- Carousel için internette araştırma yaptım. Javascript ile çalışan bir kod buldum fakat çok karıştırmak istemedim için sadece CSS ve HTML ile yaptım o kısmı. Günün çoğunluğunda websitemizin sadece dizaynına ve nasıl bi yapı oluşturulduğuna bakıp, kendim zaman harcayıp farklı şekilde yapmak istedim. Farklı da oldu, yine benden parçalar vardı. Ama en basitinden body kısmındaki genişliğin sayfa genişliği kadar olmaması bana problem yarattı biraz. O yüzden eski haliyle çalışmaya devam ettim. Sonra doğru işler komple copy-paste e kayıyor ya da kayacak gibi geldi bana ama zaman varsa yine kendim yapmaya çalışacağım.
- Bugün en önemli öğrenilen şey: pratik yapmak gerekiyormuş. Ve bufün çokça yaptım. İki gün önce hiç sevmediğim tasarım işleri bugün biraz yapabilince daha da hoşuma gitti ve daha çok bir şeyler yapmak istedim.
- Çok alakasız olacak ama, internette flexbox ile ilgili çok güzel bi oyun sitesi önerilmiş çokça kişi tarafından, konuyu anlamak için. Yarın sabah erken kalkıp, onu bitimek istiyorum. Bugünde erken uyanıp biraz konu hakkında videolar izledim. Onlar da çok yardımcı oldu.
19. Gün
Bugün sitenin birçok ksımının HTML ve CSS kısmını tamamladım. Birebir aynısı olamdı. Hatta çok fazla farklılık var ama bir web sitesinin tasarımını, sitenin yapısının nasıl olduğunu özellikle websitemiz üstünden incelemek ve tekrar üretmek için bir fırsat oldu. Bol bol flexbox örneği yaptığımı düşünüyorum. Hala daha biraz karşıtırsam da kavramların ne için kullanıldığını, ve kullanım şeklini bol pratik yaparak biraz öğrendim. Ayrıca dün linkini verdiğim siteden de alıştırmalar yaptım.Otomatik olarak içindeki elemanları kayan carousel, zaman sayacı gibi kendim bir şeyler ekledim ya da farklı şeyler oluşturmaya calıştım. Örneğin pop-up olarak büyüyen chatbox’ımızın bir benzerini oluşturdum.
Bugünüm çok fazla pratik yapmakla geçti ve çok da iyi geldi açıkçası bunları yapmak. Amacımız site yapsını, kullanılan elemnetleri anlamak olduğu için oldukça verimliydi.
20. Gün
Bugün öncelikle belirtmeliyim ki, eğer o algoritma yapısını vermeseydiniz işler biraz daha zorlaşırdı. Aslında soruyu sordunuz ve cevabı da siz verdiniz o konuda üzüldüm. Biraz üstüne zaman harcayıp öğrenmeyi yeğlerdim. Ama bu şekilde de hızlı oldu çözüme ulaşmak o ayrı tabii ki. Öncelikle bir JSON String’imiz vardı. Bunu “parser” ile okunabilir bir objeye çevirdikten sonra onu ve yazacağımız javascript kodu ile websitesi üstünde değişiklikler yapabilirdik. Ki ödevin konusu da buydu. Yani amacımız, JSON objesindeki verileri tarayıp, websitemizdeki uygun ve eşleştirmek istediğimiz kısımlarla eşleştirip istediğimz değişiklikleri yapmaktı. Kurmamız gereken algoritma: JSON objesindeki özellikle istenilen property’yi her elementi için tara. Bunu da bir döngü oluşturarak yap. Sonra istenilen HTML dokümanındaki kısmı da döngü içine dahil edip, her element için değerleri güncelle. Burda zorlandığım kısım json objesi,obje,array, ya da html gibi bir konu değildi. Yaşadığım sorun HTML elementlerini javascript aracılığıyla bulmaktı. Bugün öğrendiğim en büyük şey de bu oldu: HTML elementlerini; id,class,tag gibi onları tanımlayan özellikleri ile bulabilmek ve onlar üstünde güncelleme yapabilmek. Günün ilk yarısında ise websitemizin benzeri oluşturmaya çalıştığım site üstünde güncellemeler yapmakla zaman geçti. Header kısmında eksik kalan yerleri tamamladım. Eksiklerimin de ne olduğunu sıralayabilirim aslında ama onları tamamlamak için çok zaman olmadı: body genişliği, karoselin sağ taradındaki elementlerin doğru ayarlanması, yine birkaç düzenleme yapmam gereken yerler(popular kategoriler kısmı gibi), hızlı arama kısmında çıkan seçenekler, sayfa aşağı kaydırılınce yukarı sabitlenen menu çubuğu, ve en önemli eksik de responsive tasarıma uygunluk. Mesela sayfa boyutu küçültülünce orjinal sayfada olan tasarım oluşmuyor. Bazı yerler oldu fakat çoğunluk biraz sorunlu. Bu kadar eksikten bahsedip iç karartmışken artılara gelelim. Sonuçta prons&cons yapmak lazım gerçekçi olmak için. Artılardan biri şuydu: sayfa yapısının nasıl olduğunu temel manada gerçekten öğrendim. HTML elementlerinin, CSS te kullanılan özelliklerden birçoğu ile karşılaşıp taker taker birçok yerde kullandım. Hala daha flexbox ile alakalı terimleri kullanırken karıştırsam da hemen çözümü bulabiliyorum. Pratikle daha da gelişir diye düşünüyorum. Canlı destek pop-up kutusuna site içinde link verip ulaşmayı sağladım bugün mesela. Evet kolay ama yapmak güzel ve basitti. Genel olarak basit şeyler bence bu konular ama zaman alıyor ve uğraştırıyor. Bu da çok normal bizim seviyemiz için diye düşünüyorum.Günün sözü:
“ Limandaki gemiler güven içindedir; fakat gemiler limanlar için yapılmamıştır. ”- J.A Shedd