Astăzi, 18 mai 2022, codulluiandrei împlinește un an pe web, timp în care s-au întâmplat multe lucruri cu pagina web pe care ne aflăm acum!
În decembrie 2020, am început să creez site-ul pe care urma să adaug soluții pentru problemele de informatică de pe PBinfo. Însă, nu avea aceeași interfață și nici aceleași sisteme. Totul a pornit cu un design simplu, scris în HTML și CSS, plus puțin JavaScript pentru o bară de navigație, pe data de 18 mai 2021. Nu am făcut, din păcate, fotografii, însă era o pagină cu un cover din Sublime Text al site-ului, un nav-bar simplu cu elemente ce se colorau în mov la hover, text de bun venit și link-uri către rețelele sociale.
Chiar dacă nu aveam nici măcar 100 de probleme de pe PBinfo, am folosit cod PHP pentru accesarea și scrierea soluțiilor, care a rămas același până de curând, la publicarea sistemelor 2.0. Era o listă simplă, fără paginare, fundal mov și carduri gri-albăstrui făcute cu gradient CSS, care aveau doar un # cu ID-ul problemei și numele acesteia. Adresele URL au rămas timp îndelungat aceleași, după formatul începătorilor, codulluiandrei.ro/rezolvari/rezolvare-pbinfo?id=parametru, ceea ce a afectat ulterior indexarea paginilor 2.0, însă am trecut și peste asta! Chiar dacă link-urile erau așa, meta-informațiile erau corecte, reușind astfel să fie locul 1 în topul soluțiilor PBinfo.
După un timp, în luna septembrie, am decis să adaug și un sistem de blog, care nu a stat nici măcar o lună și l-am eliminat, fiind foarte slab în căutările Google și neavând design-ul și ideile necesare la momentul respectiv. Structura URL era /blog/?id=parametru, iar meta-informațiile erau la pământ. Cred că prin iunie - iulie 2021 am decis să adaug și paginare, fiind mai bună la viteza de încărcare. Mare greșeală! Acum o lună aveam peste 90 de adrese doar din paginarea soluțiilor, fiind un sistem simplu cu trimitere de parametri GET. Adresele erau /rezolvari/lista?page=parametru, și am schimbat și la soluții în /rezolvari/rezolvare-pbinfo?id=parametru&page=parametru, sistem care te aducea înapoi la pagina la care ai rămas după accesarea unei soluții.
Tot pe atunci am adăugat un alt sistem de blog și soluțiile CSSbattle și HackerRank. Sistemele erau mai bune, folosind adrese virtuale cu htaccess, care arătau astfel codulluiandrei.ro/nume-articol, însă meta-informațiile nu erau încă suficiente pentru rezultate de top în Google. Cu toate acestea, articolele despre lansarea Windows 11 au atras câțiva utilizatori 😄, fiind subiectul cel mai căutat pe atunci! Soluțiile CSSbattle erau fără căutare, fiind împărțite pe capitole, fiecare cu problemele sale. Astfel, ajungeam să avem pe site o postare de 300 de caractere și una de 3000 de caractere, ambele la categoria de soluții CSSbattle. Paginarea era la fel, plină de erori când venea vorba de indexare. Cele de HackerRank, ca și acum, erau exclusiv pe GitHub, fiind doar niște pagini care te trimiteau către repository-urile respective. Această interfață o puteți vedea în videoclipul (IT Simplu) de mai jos, fiind manualul vizual de folosire a site-ului.
Prin luna decembrie a anului 2021 am decis să fac o schimbare, unind tabelul din baza de date a soluțiilor CSSbattle și HackerRank cu al articolelor de blog, fiind foarte multe fișiere, liste și accesări din diverse locuri în bazele de date. Sistemul acela a funcționat până în ziua adăugării 2.0, de care m-am apucat în luna martie și pe care l-am terminat într-o săptămână intensă de programare. Îi lipsea totuși partea de blog, pe care am adăugat-o luna trecută, însă aceasta contează mai puțin, neînsemnând traficul majoritar de pe site. În prima fază doream să fac ceva modern, cu un framework precum Angular și o bază de date NoSQL, precum Firebase, pentru un timp de răspuns mai bun la soluții, însă după niște teste mai intense am ajuns la concluzia că nu se merita, mai ales că serverul pe care îl aveam era deja configurat pentru PHP și MySQL. Stack-ul pe care îl folosim la site este: PHP (normal și Ajax), CSS (BootStrap, W3CSS și ClassColorJS, pentru scrierea mai ușoară a culorilor din site), JavaScript (normal și jQuery), baza de date MySQL și, desigur, HTML (fără librării sau framework-uri). Toate sistemele sunt rulate de un server Linux Apache. Cam multe, dar își fac treaba 😄! Interfața și codul de la 2.0 au adus performanțe cu 30% mai bune în procente CLS pentru mobil și cu 10% mai bune pentru desktop. Totodată am schimbat și backend-ul de administrator, adăugând funcții care nu erau înainte.
Acum, la mijlocul lunii mai, soluțiile au fost reindexate și mă gândesc la subiecte noi pe care să le povestesc în categoria de blog. Până atunci, poți intra și pe canalul de YouTube IT Simplu, acolo unde postez video-tutoriale despre bazele calculatoarelor.