imagine-fundal

Blog / 🎉 Un an pe web
facebook instagram whatsapp tiktok twitter

Astazi, 18 mai 2022, codulluiandrei implineste un an pe web, timp in care s-au intamplat multe lucruri cu pagina web pe care ne aflam acum!

In decembrie 2020 am inceput sa creez site-ul pe care urma sa adaug rezolvari pentru problemele de informatica de pe PBinfo. Insa, nu avea aceeasi interfata si nici aceleasi sisteme. Totul a pornit cu un design simplu, scris in HTML si CSS, plus putin JavaScript pentru o bara de navigatie, pe data de 18 mai 2021. Nu am facut, din pacate, fotografii, insa era o pagina cu un cover din Sublime Text al site-ului, un nav-bar simplu cu elemente ce se coloram in mov la hover, text de bun venit si link-uri catre retelele sociale.

Chiar daca nu aveam nici macar 100 de probleme de pe PBinfo am folosit cod PHP pentru accesarea si scrierea rezolvarilor, care a ramas acelasi pana de curand, la publicarea sistemelor 2.0. Era o lista simpla, fara paginare, fundal mov si carduri gri-albastrui facute cu gradient CSS, care aveau doar un # cu id-ul problemei si numele acesteia. Adresele URL au ramas timp indelungat aceleasi, dupa formatul incepatorilor, codulluiandrei.ro/rezolvari/rezolvare-pbinfo?id=parametru, ceea ce a afectat ulterior indexarea paginilor 2.0, insa am trecut si peste asta! Cu toate ca link-urile erau asa, meta-informatiile erau corect, reusind astfel sa fie locul 1 in topul rezolvarilor PBinfo.

Dupa un timp, in luna septembrie, am decis sa adaug si un sistem de blog, care nu a stat nici macar o luna si l-am eliminat, fiind foarte slab in cautarile google si neavand design-ul si ideile necesare la momentul respectiv. Structura URL era /blog/?id=parametru, iar meta-informatiile erau la pamant. Cred ca prin iunie - iulie 2021 am decis sa adaug si paginare, fiind mai buna la viteza de incarcare. Mare greseala! Acum o luna aveam peste 90 de adrese doar din paginarea rezolvarilor, fiind un sistem simplu cu trimitere de parametrii GET. Adresele erau /rezolvari/lista?page=parametru, si am schimbat si la rezolvari in /rezolvari/rezolvare-pbinfo?id=parametru&page=parametru, sistem care te aducea inapoi la pagina la care ai ramas dupa accesarea unei rezolvari.

Tot pe atunci am adaugat un alt sistem de blog si rezolvarile CSSbattle si HackerRank. Sistemele erau mai bune, folosind adrese virtuale cu htaccess, care aratau astfel codulluiandrei.ro/nume-articol, insa meta-informatiile nu erau inca suficiente pentru rezultate de top in google. Cu toate astea, articolele despre lansarea Windows 11 au atras cativa utilizatori 😂, fiind subiectul cel mai cautat pe atunci! Rezolvarile CSSbattle erau fara cautare, fiind impartite pe capitole, fiecare cu problemele sale. Astfel, ajungeam sa avem pe site o postare de 300 de caractere si una de 3000 de caractere, ambele la categoria de rezolvari CSSbattle. Paginarea era la fel, plina de erori cand venea vorba de indexare. Cele de HackerRank, ca si acum, erau exclusiv pe GitHub, fiind doar niste pagini care te trimiteau catre repository-urile respective. Aceasta interfata o puteti vedea in videoclipul (IT Simplu) de mai jos, fiind manualul vizual de folosire a site-ului.

Prin luna decembria a anului 2021 am decis sa fac o schimbarea, unind tabelul din baza de date a rezolvarilor CSSbattle si HackerRank cu al articolelor de blog, fiind foarte multe fisiere, liste si accesari din diverse locuri in bazele de date. Sistemul acela a functia pana in ziua adaugarii 2.0, de care m am apucat in luna martie si pe care l-am terminat intr-o saptamana intensa de programare. Ii lipsea totusi partea de blog, pe care am adaugat-o luna trecuta, insa aceasta conteaza mai putin, neinsemnand traficul majoritar de pe site. In prima faza doream sa fac ceva modern, cu un framework precum angular si o baza de date NoSQL, precum Firebase, pentru un timp de raspuns mai bun la rezolvari, insa dupa niste teste mai intense am ajuns la concluzia ca nu se merita, mai ales ca server-ul pe care il aveam era deja configurat pentru PHP si MySQL. Stack-ul pe care il folosim la site este: PHP (normal si Ajax), CSS (BootStrap, W3CSS si ClassColorJS, pentru scrierea mai usoara a culorilor din site), JavaScript (normal si jQuery), baza de date MySQL si desigur HTML (fara librarii sau framework-uri). Toate sistemele rulate de un server Linux Apache. Cam multe, dar isi fac treaba 😂! Interfata si codul de la 2.0 au adus performante cu 30% mai bune in procente CLS pentru mobil si cu 10% mai bune pentru Desktop. Totodata am schimbat si backend-ul de administrator, adaugand functii care nu erau inainte. Cand am lansat 2.0 am publicat si website-ul de postari diverse stiitot.ro, care avea pana atunci o categorie separata pe site.

Acum, la mijlocul lunii mai, rezolvarile au fost reindexat si ma gandesc la subiecte noi pe care sa le povestesc in categoria de blog. Pana atunci, poti intra si pe canalul de YouTube IT Simplu, acolo unde postez video-tutoriale despre bazele calculatoarelor.

imagine

pbinfo / 1308

imagine

pbinfo / 340

imagine

pbinfo / 3063