Categorii
Programare

Portofoliu în lucru

(Lucruri noi sunt în pregătire și cred că voi pune cândva datele de pe Patreon pe blogul prezent.)

  1. Lupii Carpatini Store
  2. https://silviubogan.ro – acesta este site-ul (și blogul) prezent (vechiul blog este aici și în viitor voi copia conținutul aici, pe noul site)
  3. Tutoriale video de Unity în limba română
  4. Timed Silver
  5. SilverEdu Memory Game
  6. SilverEdu Number Snake
  7. qt-mathemakid (legătură la articol Patreon) – software educațional de matematică pentru copiii din clasa a VI-a
  8. qt-file-manager
  9. qt-unelte-dex
  10. Folder Index
  11. qt-cli-folder-index
  12. web-darmaths
  13. qt-crystaldev
  14. web-edu-chimie
  15. qt-analiza-text
  16. qt-generare-orar
  17. web-generare-orar
  18. simulare-postulatele-lui-einstein
  19. qt-acidlink
  20. simulare-efectul-compton
  21. qt-timeout
  22. cs-powerpoint-presentation-resource-extactor
  23. cs-systemuptime
  24. cs-winforms-schimbarea-bazei-intr-un-spatiu-vectorial
  25. rb-humble-bug

Alte link-uri ale prezenței mele online

Mici diplome obținute după terminarea liceului

Această imagine are atributul alt gol; numele fișierului este a8cf2-cert-1014-2443670.jpg
Această imagine are atributul alt gol; numele fișierului este ceb09-cert-1023-2443670.jpg
Această imagine are atributul alt gol; numele fișierului este 0927c-cert-1059-2443670.jpg
Această imagine are atributul alt gol; numele fișierului este 81975-15672718_1815521342054130_1844429403550903196_n.jpg
Categorii
Programare

Trei tutoriale video gratuite de Unity în limba română

Acest articol a fost publicat de mine în engleză, în data de 19.01.2020, pe primul meu blog WordPress, articol cu titlul „Unity video tutorials in Romanian” și cu etichetele tutorial și unity. Acest articol este mai finisat, fiindcă dată fiind și nevoia traducerii în română, mi-am permis să-l retușez.


Pe calea mea de a învăța Unity, am realizat câteva tutoriale gratuite și le-am pus pe YouTube.

Tutorial Unity pentru crearea unei animații de glisare
Tutorial Unity pentru crearea unui indicator de sănătate
Tutorial Unity pentru crearea unui ecran cu numărătoare inversă
Categorii
Programare

Ce face hook-ul useCallback și de ce este foarte bun uneori

Pe scurt, este vorba de optimizarea aplicației React.

Pentru cei care nu știu ce este React, React este un cadru de lucru pe aplicații web. Dacă aveți întrebări despre React, vă răspund în limita timpului disponibil.

Revin:

  1. useCallback nu este pentru ca funcția (primită ca parametru de către useCallback) să nu fie recreată. Ea este recreată. Din câte știu nu s-a inventat procesarea unei funcții în stil leneș (s-ar numi lazily defined functions? nu cred că ar fi folositoare o astfel de facilitate)
  2. useCallback este pentru când referința unui gestionar de eveniment (sau altă funcție) trebuie să fie constantă (de-a lungul mai multor randări), de exemplu:
<Button onClick={myCallback}>Click me</Button>

Acest cod rerandează instanța componentei Button la fiecare schimbare a referinței myCallback. Dacă myCallback este realizat cu useCallback, el este mai eficient.

Este în discuție referința care ajunge la codul de randare. Schimbarea ei duce la rerandare care posibil nu este destul de eficientă în multe cazuri.

Excepția este când componenta, care mai sus se numește Button, conține și o funcție componentShouldUpdate din ciclul de viață al componentelor React ce specifică de exemplu proprietăți la a lor modificare să nu producă rerandare.

Cunoașteți o alternativă pentru componentShouldUpdate în cazul componentelor React de tip funcție?


Aveți întrebări sau sugestii sau vorbe bune? Vă rog să le scrieți în comentarii.

Categorii
Programare

Ce să faci când starea inițială a store-ului Redux nu este configurată în SSR bine?

Cel mai probabil este o problemă foarte mică. Voi vorbi despre ea mai jos.

Când hydrate nu funcționează împreună cu SSR astfel încât apelurile la dispatch făcute la montarea componentelor nu sunt executate deloc pe client, chiar dacă la apăsarea unor link-uri din aplicație unele sunt, atunci încearcă să rezolvi erorile din consola DevTools cu nepotriviri între HTML-ul realizat prin SSR și cel de pe client. Această verificare este valabilă doar în mediu de development, nu și de producție, deci nu afectează performanța aplicației. hydrate doar asociază ascultătorii de evenimente la componentele primite în HTML-ul din SSR, spre deosebire de render.

Categorii
Programare

Mică tehnică de depanare ușoară de TypeScript în Chromium DevTools

Eu folosesc Chromium pentru lucru, nu Chrome. Motivul este că Chromium este OSS. Dar ar trebui să funcționeze cele spuse mai jos și la Google Chrome.

Suportul pentru TypeScript în DevTools este limitat la source maps (cele existente și pentru SCSS), dar ele nu sunt, în formatul prezent disponibile pentru o depanare TypeScript cel puțin la fel de bună ca a JavaScript din unele privințe.

Mă refer la cutiuța de text informativ. Ea apare deasupra unei variabile pentru a-i afișa conținutul și plutește până la un alt eveniment.

Deci, să presupunem că sunt în mijlocul unei sesiuni de depanare și am intrat în modul rupere, eventual am pus și step in, over, out, next etc. Dacă am un cod de felul acesta:

și duc mausul deasupra variabilei Categories, se comportă ca și cum ar fi un comentariu acolo, privind înspre reacția evenimentului mausului. Nu există mesaj informativ pentru Categories, deși în contextul în care se află depanarea, în scopul variabilei Categories, se află poziția de depanare.

Vedem în condiția clauzei condiționale if un lucru important. Este vorba de o instrucțiune relativ complexă care accesează mai multe variabile.

Putem evita această lipsă de informații, care se prelungește și în consola DevTools. Vom crea variabile sau constante temporare, fiecare pe rândul ei, deasupra condiției if. Apoi, restartând sesiunea de depanare (VS Code-ul, tab-ul, server-ul, browser-ul, în funcție de alți factori care și cum), DevTools astfel arată:

Nu ezitați să-mi scrieți comentarii, sugestii, idei, orice feedback!

Toate gândurile bune!

Categorii
Programare

Cum rezolv eroarea VS Code că nu se pot urmări toate fișierele dorite ca urmărite?

Pentru a-și păstra interfața grafică mereu actualizată VS Code trebuie să urmărească fișierele din sistemul de fișiere pentru a vedea dacă un fișier s-a modificat, șters, adăugat, cât despre directoare la fel. Este vorba de fișierele din directorul deschis sau din spațiul de lucru deschis.

Uneori setarea implicită la sistemul de operare, care de asemenea variază, este un număr prea mic de fișiere care pot fi urmărite în același timp.

Răspunsul l-am aflat mai demult și de atunci a fost mutat și restructurat până a ajuns în forma asta: https://github.com/guard/listen/blob/master/README.md și mai jos traduc sumar în limba română.


Pentru Debian, Fedora, RedHat sau alte distribuții similare de Linux, rulează în terminal următoarele comenzi:

$ sudo sh -c "echo fs.inotify.max_user_watches=524288 >> /etc/sysctl.conf"
$ sudo sysctl -p

Dacă folosești distribuția ArchLinux sau Manjaro care este bazat pe Arch, caută directorul /etc/sysctl.d/ pentru fișiere de configurație cu setarea:

$ grep -H -s "fs.inotify.max_user_watches" /etc/sysctl.d/*
/etc/sysctl.d/40-max_user_watches.conf:fs.inotify.max_user_watches=100000

Apoi schimbă setarea în fișierul găsit mai sus la o valoare mai mare (vezi aici pentru motivație).

$ sudo sh -c "echo fs.inotify.max_user_watches=524288 > /etc/sysctl.d/40-max-user-watches.conf"
$ sudo sysctl --system

Pentru a vedea aplicarea acestor comenzi nu trebuie să repornești sistemul și nici vreun program. Modificările au loc imediat.

Aștept păreri și sugestii și feedback!

Toate gândurile bune!

Categorii
Programare

Cum să obții părinții unui anumit commit în Git?

https://www.christianengvall.se/wp-content/uploads/2014/05/Git-Logo-2Color-1024x450.png
sigla Git
ramuri Git

Git este esențial pentru marea majoritate a programatorilor de mulți ani.

Commit înseamnă înregistrare a unei modificări într-un director din sistemul de fișiere.

Un commit poate să se refere la adăugarea, stergerea, modificarea, redenumirea unor fișiere dar și a unor directoare.

Părintele unui commit este, pe scurt, cel din spatele lui. Sunt situații când pot fi mai mulți părinți, de exemplu atunci când ne gândim la commit-uri de tip fuzionare (merge).

Eram obișnuit cu sintaxa asta pentru un interval de commit-uri: A..B dar aceasta nu include cel mai vechi dintre cele 2 commit-uri, facilitate de care aveam nevoie.

Așa că am căutat ce pot pune în loc de cel mai vechi ca să fie inclus: părintele lui! Trebuiesc rulate 2 comenzi sau creat un mic script ajutător dar eu zic că este frumos oricum.

  • git log este comanda care afișează commit-uri filtrate și/sau formatate și/sau ordonate special
  • git log --pretty schimbă formatarea ieșirii
  • git log --pretty=%P înseamnă că afișează hash-urile predecesorilor, nu doar ai părinților, până la primul commit (P ar putea veni de la Parent hashes, cum este descrisă în documentația oficială sintaxa %P)
  • git log --pretty=%P -n 1 afișează doar primul rând de commit-uri ale antecesorilor, și anume părinții unui commit (1 sau 2 la număr)
  • git log --pretty=%P -n 1 <Identificator de commit de pus aici fără parantezele unghiulare> specifică commit-ul pentru care se caută părinții

Inspirație: https://stackoverflow.com/a/44112699/258462.

Multe sunt de învățat și făcut.

Toate gândurile bune!

Categorii
Programare

Cum citești variabile de mediu din fișier cu Razzle și React?

Cum citești variabile de mediu din fișier? Simplu.

Dar ce sunt fișierele cu variabile de mediu?

Sunt fișiere .env care conțin comentarii care încep cu #, și perechi X=Y unde X este numele unei variabile de mediu și Y este valoarea pe care o primește. Au avantajul că poți ține mai multe configurații pentru diferite contexte de utilizare și parolele sau alte date sensibile nu apar în lista de procese a sistemului de operare dacă se folosește acest tip de fișiere. Este ușor să pui fișierele de tip .env în .gitignore.

Cu ce se citesc variabilele de mediu din fișier?

Cu editor de text, cu bash, fish, cu orice program, inclusiv cu pachet NPM.

Și ce legătură are React cu aceste variabile de mediu?

Nu toate variabilele de mediu sunt utile dar se întâmplă uneori ca una să fie utilă, de exemplu crearea de URL-uri absolute la resurse folosite dintr-o componentă React are nevoie de URL-ul de bază care se schimbă la trecerea din modul de dezvoltare înspre modul de construcție-publicare și este pus în PUBLIC_PATH în Razzle pentru modul de producție.

Dar Razzle? Ce este?

Razzle permite să lucrezi pe server și pe client în același timp, cu detectarea automată a fișierelor modificate și recompilarea acestora. Folosește 2 instanțe WebPack în spate care rulează în paralel pentru server și, respectiv, client.

Povestea: citește variabile din fișier în Razzle

  1. Creează un proiect Razzle cu React.
  2. Configurează în fișierul .env nou sau existent variabila de mediu PUBLIC_PATH, variabilă care este folosită de comanda razzle build care e parte din comanda npm start.
  3. Încearcă să folosești process.env.PUBLIC_PATH (sintaxă Node.js) într-o componentă.
  4. Nu reușești fiindcă process există doar în context Node.js.
  5. Înainte de a te da bătut, în codul de randare (React) pe server, incorporează un element <script> ce conține variabila din .env pe care suntem interesați în a o pune în obiectul window.env (care este echivalentul lui process.env în browser, convențional).
  6. Vezi că nu funcționează dar ești perseverent/ă și continui chiar dacă în codul de randare pe server nu s-a putut citi variabila de mediu și window.env este gol sau chiar nedefinit.
  7. Folosește acum pachetul cu numele dotenv pe care îl poți instala cu npm i --save dotenv . Acest pachet se folosește simplu:
import { config } from 'dotenv';
[...]
config({ path: '.env' }); // sau '../../.env'
  1. Apelul din cod de mai sus la funcția config din pachetul dotenv trebuie făcut înainte de a se utiliza, în cazul din acest articol process.env.PUBLIC_PATH.
  2. În mod general, apelul la oricare funcție precum config trebuie pus după toate instrucțiunile import din fișier.

Dacă aveți întrebări, corecții, sugestii (inclusiv pentru articole noi), nu ezitați să scrieți comentarii mai jos.

Toate gândurile bune!

Categorii
Programare

O parte din ce am lucrat în intervalul 28.04-07.05.2021

07.05.2021

06.05.2021

05.05.2021

04.05.2021

03.05.2021

01.05.2021

30.04.2021

29.04.2021

28.04.2021

Categorii
Programare

Cum faci un element să aibă aceeași dimensiune cu un element HTML img

Îmi place să gândesc orice element de design, în afară de conținut de tip text scris de utilizator, în termeni de CSS grid și CSS flexbox. Fiecare celulă are dimensiuni separate pe orizontală și verticală, pe care în general le pun fie la auto, fie la 1fr (care înseamnă spațiul liber disponibil, recalculat dinamic, împărțit la 1).

Utilizări pe care le găsesc la CSS grid:

  1. suprapunerea unor elemente într-o singură celulă sau suprapunerea unor elemente din grid doar parțial cu alte elemente din grid prin crearea de noi celule special făcute pentru a fi intersecții și punerea în ele a unor elemente de obicei decorative;
  2. ajustarea unui <div> care are un background-image sau a unui <svg> să fie de dimensiunea unui <img> care se află în același grid;
  3. layout-uri foarte complexe care necesită responsiveness.

Deci pentru a răspunde la întrebarea din titlu, se pun ambele elemente, și cel dintâi, și cel <img> într-un grid. Gridul își ajustează dimensiunea la conținutul celulei cu <img> și celelalte celule vor primi dimensiunea <img>-ului care în mod implicit este cea originală din fișierul de tip imagine. Ele o vor primi datorită definiției rândurilor și coloanelor din proprietățile grid-template-rows și grid-template-columns.

Sunt curios ce utilizări mai găsiți la CSS grid în afară de cele 3 puncte de mai sus, sau chiar în cele 3 dacă este ceva foarte frumos! Aștept comentariile voastre.