Blog

Calculează Online - Site cu tot felul de calculatoare și generatoare de date

Tue, 27 Jun 2023 10:04:09 GMT

Am realizat un nou site care să vină în ajutorul oamenilor. Acesta se poate găsi la adresa calculeazaonline.ro.

E făcut în ASP.NET Core pe parte de server. Îl am hostat pe DigitalOcean într-un container de Docker. E foarte convenabil să ți câteva containere pe un host ca acesta. Te asigur că site-urile tale sunt rapide și nu ai treabă cu tot felul de furnizor de hosting. Problema e că trebuie să înveți cum funcționează Docker. Practic nu ai mai nimic mură în gură, cum e cazul unui furnizor clasic de hosting.

Pe partea de frontend am folosit Bootstrap 5 și Vanilla JavaScript. De când a apărut Bootstrap 5, am renunțat la jQuery și scriu doar cod de JavaScript.

De ce am realizat acest site?

Acum voi explica și care este planul pentru acest site.

Am tot căutat să văd ce cuvinte au cea mai mică concurență. Scopul site-ului e să ajungă la cel puțin 10000 de vizitatori unici pe zi.

Este un obiectiv măreț pentru căutările din România, dar mă gândesc că în 2-3 ani voi ajunge la cifrele acestea. Momentan (27 Iunie 2023) am 7 funcții pe site, voi incerca să adaug cel puțin 100 de calculatoare și generatoare diferite.

]]>

3 Pasi Simpli Pentru A Creste Performanta Site-ului

Thu, 26 Aug 2021 13:36:22 GMT

In articolul trecut ti-am relatat despre de ce ar trebui sa alegi sa dezvolti aplicatii web. In articolul de azi, iti voi spune cum sa faci site-uri rapide.

Viteza de incarcare a unui site este unul dintre cele mai importante aspecte care poate impacta numarul de vizitatori al unui site si profitul generat. Daca un site se incarca greu, cel mai probabil utilizatorii vor iesi de pe el si vor cauta in alta parte. De exemplu, cei de la Walmart au remarcat ca pentru fiecare secunda mai putin la incarcarea paginii, rata de conversie crestea cu 2%.

Pe langa cresterea ratei de conversie, prin imbunatatirea vitezei de incarcare creste scorul seo al site-ului si implicit creste numarul de vizitatori.

Cum sa masori viteza de incarcare a unui website

Sfatul meu este sa te bazezi pe Lighthouse, tool-ul intern oferit de Google Chrome.

Pentru a accesa aceasta functionalitate, apasa tasta F12 si selecteaza tab-ul Audit/Lighthouse din fereastra ce a aparut. Alege categoria Perfomance si ruleaza test-ul. La finalul testului iti va aparea un scor, care reprezinta cat de repede se incarca site-ul tau in raport cu alte site-uri. {{ "sfaturi-perfomanta-site.PNG" | asset_url | img_tag: alt: 'sfaturi performanta lighthouse', class: 'img-fluid mx-auto'}}

Lighthouse iti ofera si o serie de sfaturi folositoare pentru a creste performanta site-ului.

In cele ce vor urma iti voi descrie o serie de pasi, pe care eu ii realizez la toate site-urile mele pentru a ma asigura ca se incarca rapid.

Foloseste un proxy precum Cloudflare

Primul pas pe care il fac la toate site-urile mele e sa instalez Cloudflare. Acesta este un proxy intre utlizator si site-ul final. Are o multitudine de optiuni de a bloca atacatorii, dar si pentru a creste performanta site-urilor.

Cea mai folositoare optiune este cea de Cache. Odata ce ai introdus site-ul pe Cloudflare, aceasta optiune este deja activa.

Cloudflare va salva in reteaua sa de servere o copie pentru resurse precum imagini, filmulete, pagini statice. Atunci cand browserul unui utilizator va incerca sa downloadeze aceste resurse, Cloudflare i le va oferi de pe cel mai apropiat server.

O alta functionalitate foarte buna este cea de compresie a resurselor. Cloudflare poate folosi compresia de tipul Brotli pentru a micsora marimea resurselor transmise catre utilizatori.

Cloudflare este de departe cel mai bun serviciu de acest tip, oferind aceste functionalitati de baza pe gratis. L-am folosit de nenumarate ori, iar rezultate sunt uimitoare.

Minifica resursele CSS si Javascript

Toate site-urile populare folosesc intensiv CSS si Javascript, oferindu-le utilizatorilor o interfata atractiva, moderna si interactiva.

Odata cu trecerea timpului, aplicatiile web au devenit din ce in ce mai complexe. Din acest motiv si fisierele de stiluri si cod pentru client au crescut la fel de repede.

Majoritatea site-urilor au fisiere de cateva sute de kilobiti ce trebuie downloadate de catre fiecare utilizator. Fisierele de acest tip sunt scrise de catre o multitudine de programatori sau web designeri. De aceea, de obicei aceste fisiere contin spatii libere, comentarii, variabile neutilizate, si nume de variabile lungi. Aceste lucruri nu sunt necesare de catre browser pentru a le interpreta, ci doar de oameni pentru a le intelege mai usor.

Procesul de stergere a lucrurilor neesentiale din cod, se numeste minificare.

Pentru a minifica resursele poti utiliza librarii oferite de Gulp sau Grunt sau poti folosi servicii online precum acesta.

Optimizeaza imaginile

Deseori imaginile cauzeaza incarcarea inceata a site-ului. Multe imagini ocupa peste 1 MB, iar acest lucru poate duce rapid la incarcarea greoaie a unui site daca o pagina are cateva poze de aceasta marime.

O solutie pentru a optimiza o imagine este prin compresie. Exista doua tipuri de compresie: fara pierdere de calitate si prin pierdere de calitate. Se poate reduce apoape insesizabil calitatea imaginii pentru a reduce dimensiunea imaginilor.

O alta metoda este de a converti imaginile intr-un format cat mai optim. Un asftel de format este WebP. In raport cu formatul PNG, WebP ofera imagini cu 26% mai mici.

]]>

Ce tip de aplicatii sa faci

Sat, 02 Jan 2021 09:43:14 GMT

Nu am mai scris pe blog de la începutul anului. Nu am stat degeaba, am scris două articole pentru platforma 4Mayo: unul despre proiectul de generare a datelor și unul despre complexitate algoritmilor. Astăzi o să iți vorbesc cum sa începi un proiect personal si la ce sa fi atent.

Anul acesta a fost foarte diferit: mult timp petrecut în casă. Acest lucru nu este un dezavantaj daca știi ce trebuie sa faci. Daca nu ai făcut mai nimic in perioada asta, nu te panica, mai ai timp!

Am mai spus-o, dar o repet: cel mai bun mod de a învăța programare este prin realizarea proiectelor personale. Când ma gândesc la proiecte personale exista 3 mari opțiuni de aplicații pe care un programator le poate face: desktop, mobile si web. Aplicațiile desktop sunt bune pentru programele ce necesita putere de procesare mare, aplicațiile mobile sunt utile pentru programele care rezolva probleme concrete, iar aplicațiile web asigura compatibilitate si ușurință in utilizare. De-a lungul timpului am încercat toate tipurile de aplicații, dar în final am rămas la cele web.

Avantaje aplicații web

Compatibilitate: aplicațiile web rulează pe orice tip dispozitiv unde exista un browser. Acest lucru este un avantaj important, întrucât mai mulți oameni au acces la aplicație, deci mai mult succes. Ușor de creat: nu trebuie sa știi trei limbaje diferite daca vrei sa creezi aplicația si pentru desktop si pentru mobil. Update automat. Când faci update la aplicație, ești sigur ca utilizatorii vor folosi versiunea cea mai nouă. Exista problema cache-ului, dar poți sa aprofundezi aceasta problema si sa scapi de ea destul de ușor.

Ți-am enumerat mai sus câteva avantaje, evident există și dezavantaje precum faptul că nu poți sa faci aplicații ce necesita putere mare de procesare. De asemenea, o aplicație web nu poate să utilizeze multiple funcții hardware. De asemenea, aplicațiile web nu funcționează daca nu ai o conexiune buna la internet. Progressive web apps dorește să rezolve aceasta problema, dar încă nu a câștigat popularitate intre utilizatori.

Mereu trebuie să te gândești dacă lucrul pe care îl faci în prezent poate să-ți folosească și în viitor. Aplicațiile web nu par să dispară, vor apărea noi framework-uri de JavaScript și noi funcții ale browserelor vor permite accesare ficționalităților de hardware. Ultimul mare update este WebAssembly, funcție ce va permite scrierea si rularea codului aproape la nivel nativ. Deja au început câteva jocuri mai vechi, precum Doom3, sa poate fi jucate direct in browser.

Aplicațiile mobile sunt la modă acum, la fel cum aplicațiile desktop au fost la moda acum 15-20 de ani. Nici unele, nici altele nu o sa dispară prea curând, dar cota lor va fi in continua scădere (pana si Internet Explorer încă mai e utilizat).

Eu am ales sa fac în viitor doar aplicații web.

PS: In luna Noiembrie, am mai realizat un site.

]]>

Cum sa generezi date random

Sun, 05 Jul 2020 08:50:24 GMT

Anul trecut prin Noiembrie, m-am apucat cu cel mai bun prieten al meu sa facem un site. Ne-am gândit noi ca un site ușor de făcut, dar cu multe chestii de învățat ar fi un site de generare de date atât pentru programatori, cat și pentru oamenii obișnuiți.

Randommer.IO - Data Generator

Ne-am gândit noi ca un site ușor de făcut, dar cu multe chestii de învățat ar fi un site de generare de date atât pentru programatori, cat și pentru oamenii obișnuiți. Zis și făcut (bine mai mult zis decât făcut), am început sa lucram la site. Primele funcții au fost cele de generare de numere, fiind destul de ușor sa generezi in C# un număr aleatoriu.

new Random().Next(min,max);

După aceea am zis noi ca ar fi mișto sa generam numere de telefon valide aleatorii pentru fiecare tara. Aici a fost primul hop. Am găsit pe Wikipedia prefixele pentru toate tarile și codurile pentru rețele (de exemplu +40 pentru Romania și 76 pentru Telekom/Cosmote). Problema a fost ca datele nu prea erau complete și era destul de greu sa copiezi și sa organizezi într-o tabela datele de pe Wikipedia. Pana la urma, a venit și soluția: am găsit o librărie de validare de numere de telefon oferita de Google. Am luat librăria și am observat ca pentru fiecare tara erau expresii regulare cum trebuie sa arate număr de telefon. Ne-am gândit noi și am zis: Ba da nu ar trebui sa existe o modalitate ca pe baza regex sa poți sa generezi un cuvânt in funcție de regulile setate. Am găsit încă o librărie pentru a face acest lucru (cum zic istoricii: Norocul tine cu cei buni) și așa a apărut generatorul de numere de telefon.

In timpul căutărilor noastre tot găsisem servicii contra cost ca sa validezi numere de telefon. Practic ce făceau ei e sa folosească librăria gratuita a celor de la Google și sa o pună in spatele unui API. Nu ceva foarte complicat, astfel ca am zis hai sa facem și noi servicii REST API pentru funcționalitățile site-ului și sa le oferim gratuit. Am pus o limita zilnica destul de generoasa, dar necesara pentru a evita atacatorii și i-am dat drumul. Serviciul e protejat de un api key generat după ce utilizatorul își face cont pe site.

Serviciul nostru deja ofera urmatoarele functionalitati:

Generare de numere

număr aleatoriu
secvență aleatorie

Aruncare zaruri
Generare numere de telefon si validare telefoane internationale
Calculare hash pentru algoritmi precum MD5 si SHA256
Convertire numere romane la arabice si invers
Criptarea mesajelor prin cifrul lui Caesar
Generare de text Lorem Ipsum.
Procesator de text.
Generare credit card-uri incluzând număr de card, CCV și data de expirare.
Generare coduri numerice personale pentru Statele Unite ale Americii.
Generare de nume și prenume englezești.
Calculator de date
Calculare timp între doua date. Îți afișează cât timp a trecut între doua date.
Convertire timp unix în dată normală.

Ce servicii ne-am mai propus:

funcții de convertire pentru diferite unități de măsura. Vom avea funcții de convertire pentru distanta, greutate, volum.
funcții matematice
calculare indicatori de sănătate, precum calculare indice masa corporala.

Site-ul serviciilor: Random Data Generator

]]>

NET Core 3 si ASP.NET Core 3

Sun, 27 Oct 2019 06:45:46 GMT

.NET CORE 3

A apărut pe 23 septembrie 2019 si aduce in prim plan suport pentru aplicațiile desktop:Windows Forms si Windows Presentation Foundation, suport pentru C# 8, executabil sub forma unui singur fișier si multe altfe featururi.

Suport pentru Windows Form si WPF

Ești entuziasmat când auzi ca aplicațiile desktop sunt acum migrate la Core? Da? Îmi pare rău sa-ti spun, dar aceste tehnologii nu vor fi suportate pe alte sisteme de operare in afara de Windows. Știu deja te-ai fi gândit oare cum au reușit sa creeze ferestrele pe linux, cum arata evenimentele. Si ei s-au gândit si au zis ca nu le migrează momentan.

Built-in JSON suport

Dupa ce toata lumea a folosit librăria Newtonsoft pentru JSON, Microsoft a adus modificări in framework, creând propriile clase pentru citirea json-urilor. Explicatia din spate e ca Newtonsoft foloseste clasa string care UTF-16, ceea ce implicit inseamna mai multe conversii. Din statistici reiese ca noua componenta de JSON este mai rapida decat ce ofera cei de la JSON.NET, dar exista pe piata alte librarii care sunt mult mai rapide.

ASP.NET CORE 3

Blazor

Blazor este una dintre cele mai importante componente cu care vine asp.net core 3. Acest framework te ajuta sa faci partea de client cu ajutorul .NET, fara sa mai utilizezi javascript. Practic poti refolosi codul de pe server si cel client. Practic acest framework vine, in special, in ajutorul developerilor de .Net ce vor sa realizeze aplicatii web de tip SPA(Single Page Application). Problema cu care vine Blazor este una majora: se fac foarte multe apeluri ale serverului. Pentru o simpla apasare de buton se trimit 2 apeluri catre server. Acest lucru implica implicit mai multe resurse pentru server.

gRPC

gRPC este un framework pentru apelurile de la distanta, adica versiunea mai noua de WCF, ce vine ca o alternative viabila. gRPC este vazut ca un inlocuitor pentru Windows Comunication Foundation, un framework destul de vechi, care deja in core 3 a mai ramas doar cu partea de client.

SignalR

Este o tehnologie ce putea fi folosita din versiuni anterioare. Acest framework se foloseste de web sockets pentru a comunica in mod bidirectional intre server si client, pentru aplicatii in real time. Hai sa luam un clasic exemplu: vrei sa faci un chat, cum faci sa stii ca celalalt utilizator a trimis un mesaj, pai ai tot trimite request la fiecare cateva secunde sa vezi la server daca sunt mesaje noi. Cu socketi si signalR se deschide o conexiune ce ramane deschisa si pe care serverul va trimite informari.

]]>