Görselleri doğrudan veritabanında tutmak yerine görsellerin dosya adlarını veritabanında tutmanız daha uygun olacaktır. Genellikle böyle yapılır.
Görselin PHP tarafında yeniden boyutlandırılması konusu burada işlenmiş: yusufsezer.com.tr/php-resim-boyutlandirma
Burada örneğin telefondan çekilmiş 5mb boyutlu bir fotoğrafın önce sunucuya upload edilmesi, sonra PHP tarafından işlenmesi durumu var. Bu kaynak yönetimi açısından maliyetli bir işlem.
Upload etmeden önce boyut kontrolü de yapsanız bu sefer de kullanıcılar upload işleminden önce görseli düzenlemekle uğraşmak zorunda kalırlar.
Benim tavsiyem görseli front-end tarafında boyutlandırmanız ve tam istediğiniz boyutlarda büyük ve küçük görselleri upload etmenizdir.
Bu adreste görselin front-end tarafında nasıl boyutlandırılacağı örneklendirilmiş: imagekit.io/blog/how-to-resize-image-in-javascript
Burada görseli alıp bir <canvas></canvas> elementi içinde yeniden boyutlandırıyor ve yeni oluşan görüntüyü bir <img /> elementine basıp gösteriyor. Sizin kodu kendinizce düzenlemeniz gerekecek.
Görselleri alan PHP kodunun yalnızca boyut ve ebat kontrolü yapması sunucuya daha az yük bindirmiş olur.
Merhaba. Infinity, javascript'te sonsuzu ifade etmek için kullanılmış bir anahtar kelimedir. Number.POSITIVE_INFINITY diyerek elde edilebilir.
Sizin durumunuzda çok büyük ihtimalle bir sayıyı 0'a bölüyorsunuz ve js bir sayıyı sıfıra sonsuz defa bölebileceğinizi söylemeye çalışıyor.
Aldığınız değerlerden biri sayfa ilk yüklendiğinde (ilk Infinity bastığına göre) 0 olup sonradan başka bir değere dönüşüyor olabilir.
Böyle bir siteyi yapabilmek için şu konulara hakim olmak gerekiyor:
1) Site içi SEO çalışmaları yapılmış.
2) Google Analytics ve Google Etiket Yöneticisi (GTM) kullanılmış.
3) HTML, CSS, Javascript zaten bilinmeli.
4) Sitede React kullanılmış. Tek sayfa site. Backend olarak Next kullanılmış. Yani temel bir NodeJS bilgisi üzerine ReactJS ve NextJS hakimiyeti gerekiyor.
5) Sunucu gereksinimini sanırım Vercel üzerinden sağlamış ki bu NextJS'i en keyifli kullanıldığı platform.
6) Vercel kullanıyorsa (kullansın kullanmasın fark etmez gerçi ama) Git de kullanıyordur.
7) Kodlama üzerine ileri düzeye çıkmış kişiler genelde tasarım için tasarım becerileri yüksek kişilerle çalışırlar. Bu sitenin yazılımcısı React Native ile mobil uygulama da geliştirdiğini belirtmiş. Muhtemelen tasarımı yapan kişi bu sitenin yazılımcısıyla tasarımını net şekilde paylaşabilmek için Adobe XD veya Figma kullanıyordur. Ayrıca tasarımcı, görselleri düzenlemek için Adobe ürünleri olan Photoshop, Illustrator vb programlardan da yararlanıyordur.
Bu işlere yeni girişecek biri için yol haritası belirtmek gerekirse,
!) İngilizce! Bundan sonraki adımlara devam ederken bir yandan da İngilizcenizi ilerletmelisiniz. Buna mutlaka zaman ayırmak zorundasınız. Çünkü Türkçe kaynaklar bi'yerden sonra tükenecek ve yeni teknolojileri takip edemez hale geleceksiniz ve ayrıca yurtdışından iş alma fırsatlarını da kaçıracaksınız. Yani iki işi bir arada yürütün: Kodlama ve dil.
1) HTML ve CSS'in temel düzeyde öğrenilmesi.
2) "Tasarım yanım güçlüdür, çok hoşa giden tasarımlar çıkarabileceğime inanıyorum." diyen biri için Figma kullanımının öğrenilmesi. Eğer tasarım üzerine uzmanlaşılacaksa diğer görsel düzenleme programları da öğrenerek buradan devam edilir. HTML ve CSS'i temel düzeyde bilen yetenekli bir tasarımcı, kodlamaya en elverişli tasarımları bu programlar yardımıyla oluşturacaktır.
!) Spor ve beslenme! Çok önemli. Vaktinizin çoğu bilgisayar başında geçecek. Eğer yatkınlığınız varsa karadelik gibi sizi içine çekecek bir yoldasınız. Sağlınızı siz hiç fark etmeden, sinsice bozulabilir ve bu listeyi tamamlayamadan tıkanabilirsiniz. Mutlaka spora da önem verin. Hiç spor yapamadığınız gün bile mutlaka 15 dk olsun tempolu yürüyüş yapın. Sağlıklı besinler tüketin. Sağlıksız olanları tüketecekseniz de abartmadan tüketin. Su içmeyi unutmayın. Yoğurt yemeyi unutmayın. Bedeninize gereken önemi vermezseniz vakitsizce size karşılık verir! "He hee taam taam" demeyin. Ciddiyim.
3) HTML ve CSS'e hakimiyet ve temel Javascript'in öğrenilmesi.
!) Git kullanımı. Github kullanımı. Yaptığınız projeleri arşivlemeli ve paylaşmalısınız. Hangi tarihte hangi teknolojiyle ilgilendiğiniz Github profilinizden görülebilecektir ki bu da size iş verecek olanların güvenini artırır. Ayrıca artık projeleriniz için belli bir bilgisayara bağlı kalmayacaksınız. İstediğiniz bilgisayara projenizi hemen indirip çalışmaya devam edebileceksiniz. Projelerinizde bir hata yaptığınızda geri dönebileceksiniz. Git kullanımını öğrenin ve bundan sonraki adımlarda kullanın.
4) Javascript'e hakimiyet ve yardımcı kütüphanelerin kullanımı. Özellikle JQuery öğrenilmeli çünkü Javascript temeli olan kişi için öğrenimi kolaydır. Bu noktada artık front-end tasarımlar yapabilirsiniz hatta muhammederdem.com'un aynı görünümünü dâhi oluşturabilirsiniz. JQuery öğrenmeye gerek olmadığını, onun artık eskidiğini söyleyenlere aldırmayın. Doğru söylüyorlar ama aldırmayın. Çünkü çoğunluktaki sitelerin front-end'i halen JQuery kullanıyor. Yani şu ana kadarki bilginizle para kazanmaya ve güzel tasarımları kodlamaya başlayabilirsiniz. Diğer adımdaki teknolojileri öğrenmek başlangıçta zor gelebilir. Sonuçta bu yolda motivasyon da önemli. Ayrıca front-end yazılımcıya ihtiyaç duyan birçok şirkette işe girebilir veya freelance işlerden (tabi bunun yasal ayağını da hesaba katarak) para kazanabilirsiniz. Direkt web yazılım işindeki bazı şirketlerde veya web sitesi hizmeti de veren reklam ajanslarında front-end olarak çalışmanız mümkün.
5) Site içi SEO hakkında bilgi. Arama motorlarının sitenizi tararken nelere dikkat ettiğinin öğrenilmesi. Özellikle dinamik içeriklerin arama motorlarına nasıl bildirileceğinin öğrenilmesi. Yaptığınız sitelerin Google'da hızlı şekilde üst sıralara çıkmasını sağlamanın yollarını öğrenmeniz gerekiyor.
!) LinkedIn üyeliği. Mutlaka olsun ve özen gösterin. Artık güzel işler hayata geçiren bir yazılımcısınız. Buradan zaman içine kendinize bir ağ oluşturun. Burada kendinizi nasıl olması gerektiği gibi gösterebileceğinizle ilgili araştırmalar yapın. Burası size beklenmedik kapılar açabilecek bir mecra.
6) NodeJS nedir? Ne işe yarar? (Ne işe yaramaz ki?) Temel bir bilgi edinilmeli. Bundan sonra her şeyi NodeJS üzerine inşa etmeye başlayacaksınız.
7) Piyasaya hakimiyeti nedeniyle ReactJS'e temel düzeyde başlangıç. Kodun derlenerek çalışmasının mantığını anlamanız gerekiyor. Burada tarayıcı uyumluluğu probleminden sıyrılıp Javascript'in de yeni nesil kodlarını kullanmaya başlayacaksınız. 4.adımda eski tarayıcılarda da çalışabilmesi için Javascript'in birçok yeni nesil kodundan mahrumdunuz. Artık Promise(), map(), filter(), arrow functions ve daha birçok avantaj emrinize amade olacak ve kodlarınız NodeJS ile kullanılan bazı araçlar yardımıyla eski tarayıcılara da uyumlu hale dönüştürülecek.
8) Piyasaya hakimiyeti nedeniyle ReactJS'e hakimiyet. Routing yapısıdır, useMemo(), useCallback(), useContext() kullanımıdır, Redux'tır vb. artık ne varsa öğrenilmeli, kullanılmalı. Bu aşamayı tamamladığınızda artık büyük ölçekli şirketlerde front-end olarak çalışabilirsiniz. Maaşınız iyi durumdadır. Mesai sonrası front-end işler alabileceğinizi de düşünürsek... Eğer İngilizceniz de yeterince ilerlediyse artık yurtdışından front-end iş almanız da mümkün.
9) Svelte'e göz atın. Evet belki React piyasaya hakim ama Svelte bize gösterdi ki birçok iş React'a göre çok daha basit ve performanslı yapılabilirmiş. Meğerse sanal-dom yaklaşımı en iyi yaklaşım olmayabilirmiş. Yepyeni bir versiyonla karşımıza çıkmazsa bi'gün React da JQuery gibi eski teknoloji sayılabilir. React'ı çok iyi bilin ama geleceğiniz için sakın React bağımlısı olmayın.
!) Azıcık sosyalleşin yahu. Yetenekli ve iyi huylu arkadaşlar edinin. Sevginiz yoksa birini bulun. Ruhunuzu aç bırakmayın.
10) Artık React üzerine kendini geliştirmiş bir front-end uzmanısınız. Svelte'e bakın ve kendinizi geliştirin, hatta yapacağınız profesyonel bir işte Svelte'e şans verin derim. Peki VueJS? Bence VueJS ReactJS'den daha hoştur ama neticede ikisi de aynı yaklaşıma sahip: sanal-dom. Ama Svelte gibi bir örnek çıkmışken bi'gün Vue'nin React'ı tahtından edebileceğini sanmıyorum. Bu adımda demem o ki, React dışındaki front-end teknolojilere de göz atın. Farklı yaklaşımlar görmek dizi daha da geliştirecektir.
11) Backend'e geçme zamanı! Buraya kadar geldiğinize göre PHP, NextJS, .NET, Python vs. karşılaştınız. Web servislerden veri çekip sitenizde gösterdiniz. Artık bu teknolojilere girme zamanı. React'çı olduğunuz için NextJS, sunucu tarafı için size uygundur. Bunun kullanımını öğrenin ve Vercel ile kullanımını da araştırın. Sanırım Vercel ücretsiz host sağlıyor. Bunun yanında veritabanlarına da girmeniz gerekecek. Şu an için çok ileri düzeye çıkmanıza gerek yok ama NextJS ve bir veritabanı kullanarak örneğin üyelikli basit bir film sitesi örneğini tek başınıza çıkarabilecek düzeye gelmelisiniz. İlle de NextJS kullanmak zorunda değilsiniz tabi ama ReactJS bildiğiniz için çoğunlukla karşınıza NextJS çıkacaktır.
12) Firebase nedir öğrenin. Kullanın. Bir noktaya kadar ücretsiz hizmet sunar. Firebase deneyiminiz olması sizin için büyük artı olacak.
13) ExpressJS öğrenin. API'lar yazmaya başlayın. Web sitelerinizi bu API'lardan beslemeye başlayın. Güvenli ve performanslı çalışacak endpoint'leriniz olsun.
14) Mikroservis mimarisini araştırın. Bu yaklaşımın neden kullanıldığını, mantığını anlayın.
15) Docker kullanmayı öğrenin ve Docker üzerinde mikroservis mimarisini kullanmayı deneyimleyin. Farklı web servisleriniz arasında iletişim kurmayı deneyimleyin. Sunucu tarafında performans artışı sağlayabileceğiniz yolları araştırın.
16) Artık sunucu yönetimine geçmeye başladığınız için burada kesiyorum. Nereye doğru dallanacağınız size kalmış. Ama artık gönül rahatlığıyla evlenebilecek, çoluk çocuğa karışabilecek, istediğiniz bir ülkede iyi bir hayat yaşayabilecek durumdasınız. Çalıştığınız yerler, yaptığınız işler sizi bi'yerlere doğru çekecektir. Kendinizi yapmaktan hoşlanmadığınız bir işi profesyonel olarak yapmaya başlamış bulabilirsiniz. Ara sıra profesyonel yaşantınıza dışarıdan bakın ve aldığınız/almak üzere olduğunuz kararlarla kendinizi 1-2-3-5-10 yıl sonra nerede gördüğünüzü düşünün. Gireceğiniz/girmeyeceğiniz yol sizi ideallerinize yaklaştırır mı diye düşünerek hareket edin.