# Hasznos linkek
## Gyakorlás, tutrialok:
- Typehero: https://typehero.dev/aot-2023
- Freecodecamp: https://www.freecodecamp.org/learn/
- Hackerrank: https://www.hackerrank.com/
- Leetcode: https://leetcode.com/
## Munka:
- https://cord.co/search/jobs/ innen már kerestek melóval, szerintem jó kis oldal
- https://www.honeypot.io/en/ innen már kerestek, nem tudom, hogy ez mennyire pörög még ( annyira szerintem nem, de beregisztrálsz, azt kész)
- https://www.flatworld.co/
- https://allremote.jobs/
- https://www.expertlead.com/ ez freelance közvetítő, felvételizni kell, én bent vagyok, SOK MOBILOS REACT NATIVE PROJEKT VOLT AMIVEL KERESTEK, pl. 6-12 hónaposak => lehet jó pénzt keresni azért itt is, sőt
- https://techysium.com/en/ ez azt hiszem valami magyar freelance közvetítő, beregisztrálsz, megcsinálod a profilodat, aztán úgy hagyod, ha jön vaalmi jön, ha nem, nem
- https://allremote.jobs/
- https://javascript.works-hub.com/javascript-jobs
- https://nofluffjobs.com/
- https://www.upwork.com/ ha kalandvágyó vagy
- https://www.fiverr.com/ ha kalandvágyó vagy
- És még 6 millió másik…
## Egyéb
- https://risingstars.js.org/2023/en feltörekvő technológiák github star szerint
## Adatstruktúrák, algoritmusok
- lehet, hogy egyetemen már tanultad ezeket, de a "jobb" helyeken,big tech cégeknél, komolyabb dolgokkal foglalkozó cégeknél, ahol "programozókat" és nem "fejlesztőket" keresnek, ott kérhetik ezeket => bár inkább backenden szerintem
- freecodecampem van egy ilyen rész
- rengeteg videó, tutorial, kurzus van ebben a témában
- data structures: linked lists, hashmaps, binary tree
- algorhitms: sorting algoritmusok, pathfinder, ilyesmi
## Javascript, és egyéb nyelvvel, kóddla kapcsolatos témák, amik kapcsolódhatnak
Hát ez egy végtelen téma, de nagyjából első blikkre.
- Technikai háttér
- mit jelent az, hogy single thread language
- miért jó a javascript, miért nem jó, mire jó, mire nem
- mit jelent az, hogy compiled vs. interpreted language
- mi az, hogy functional programming vs. object oriented programmin
- mi az event loop
- szinkron vs. aszinkron dolgok
- scoping és hoisting (var, let const)
- tudd a különbséget ezek között, tudd, hogy mi a hoisting, tudd, hogy ez jó-e vagy sem, stb.
- Closure => EZ KLASSZIKUS, NÉZZ UTÁNA ÉS ÉRTSD MEG
- Pass by reference vs pass by value => NAGOYN NAGYON NAGYON FONTOS, ÉRTNEI KELL, EZ REACTBEN IS VISSZAKÖSZÖN!!
- Primitive values vs “object”
- Immutability => NAGYON FONTOS! Érteni kell, hogy hogyan nyúlsz objectekhez, hogyan manipulálod őket, hogyan másolod őket, stb. Reactben is fontos, és ez a pass by reference téma megintcsak igazából.
- arrow functions, function declarations
- Loopok
- for loop
- for of
- for in
- while loop
- gyakorolni, gyakorolni, gyakorolni
- ES6
- nézz utána
- destructuring GYAKOROLNI ÉS ÉRTENI, REACTBEN IS FONTOS
- spreading operator GYAKOROLNI ÉS ÉRTENI, REACTBEN IS FONTOS
- Operators
- <, >, <>, =, ==, ===, !==, != EZEKET NAGYON TUDNI kell
- tudni kell, hogy mi az a type coersion => ha kódos interjú van, vagy kvíz, akkor rá szoktak kérdezni, mert ez trükkös téma nagyonis!
- !!, &&, ?? => ezeket is nézd át jól, használjuk a gyakorlatban
- tudd, hogy miért jó ez, miért egyszerűbb pl. így Boolean-t vizsgálni
-
- Array methods (map, some, every, filter, reduce, sort => a sort az trükkös tud lenni! gondolok itt pl stringek sorbarendezésére, stb.)
- jó tudni, hogy hogy működnek, pl. milyen változókhoz tudsz hozzáférni, pl. index
- gyakorolni, gyakorolni, gyakorolni és gyakorolni (freecodecamp, hackerrank, és társai)
- String manipulation
- ez is gyakorlós, ha interjúztatnak élőben, akkor lehet számítani valami string manipulationos feladatra
- template string literal pl.
- Regular expressions
- nagyon jó, ha tudod, alapbvetően ezt is általában már packagek oldják meg, de nézz utána, gyakorold egy kicsit, nem kell pronak lenni
- Fasza ha tudod: Set, Map, Symbol, WeakMap (en sem tudom ezeket mind, Set meg a Map gyakrabban előfordul, abból 1-2 példát megcsinálhatsz, a Setet én használtam nemrég pl.)
- Promise, Asynchronous vs await
- GYAKOROLNI
- jó ha tudod a különbséget a callback, a .then().catch() promise-ok és az async await() promise-ok között
- Recursive functions
- gyakorolni gyakorolni
- megérteni, hogy mi az a "call stack"
- szokták kérdezni, klasszikus, és egyébként hasznos is
## Javascript tooling
FOLYT KÖV (eslint, prettier, konfigurálás, npm, webpack, buildeles, stb.)
- ha a projektedben még nem csináltad, érdemes bekonfigurálni az eslintet, illetve nagyjából érteni, hogy hogy működnek ezek
- prettier szintén
- npm => jó, ha nagyjából érted, hogy mi ez meg hogy működik
- webpack és egyéb bundlerek => csak tudd, hogy mi az a "bundler", annyira nem érdemes elmélyülni benne
## React
TUDD HOGY HOGY MUKODIK!
A legfontosabb, hogy értsd a React lifecyclet, a Virtual DOMot, meg az egész működésts és filozófiát.
- Miért jó a React, miét nem jó a react?
- Kicsit a sztoriját érdemes megtudni, illetve az egész filozófiát a komponens alapú fejlestztésről.
- class komponensek vs. functional komponensenek/hookok
- a class kihalóban, de jó ha tudod, hogy ilyen is volt, illetve a react lifecycle ott szebben látszódik
- Milyen más rendszerek, megoldások vannak?
- pl. VueJs, Angular, Remix, SolidJs, Svelte...meg még ki tudja mi, minden héten van egy új, NEHOGY ELKEZD MEGTANULNI EZEKET, csak tudd, hogy van többféle hasonló rendszer => megnezel roluk 1-1 videot erdekessegkeppen, de semmi tobb!
- Mikor rerenderel a react? => sok ilyen feladat es anyag van a neten, érdemes gyakorolni, kvízeket csinálni
- sajat appodon is erdemes ezzel egy kicsit kiserletezni
- State management
- local state
- reducers
- context API
- redux (csak tudd, hogy kb hogy működik, amúgy kifelé megy a divatból)
- Props
- igazából ez a "mikor renderel újra" témához szorosan kapcsolódik
- tudd, hogy mikor hogyan érdemes propokat átpasszolni, hogy hogyan tudod kikerülni a nem kívánt rerendereket, stb.
- useEffect, useCallback
- tudni kell, hogy mire jó, mi a hátránya
- dependency arrayt érteni kell, érteni kell, hogy mit passzolsz bele és mit nem, hogyan tudod optimalizálni, hogy működik aszinkron dolgokkal
- ide kapcsolódik a Javascript pass-by-reference vs pass-by-value témaköre is, és ide kapcsolódik a useCallback is
- tudni kell, hogy ha mondjuk egy function kerül a dependencty arrayedbe, akkor milyen problémákat kell mitigálnod
- ezt érdemes jól begyakorolni, van egy csomó react playground, ahol érdemes kísérletezni ezekkel
- ha ezt jól tudod, akkor nem lesz gondod a Reacttel sehol sem, és örülni fognak
- tudd, hoyg a listenereket hogyan csatolod és hogyan választod le komponensekről a useEffectben
- ez fontos, mert ha ezt nem jól csinálja valaki, akkor performansz problémák lehetnek, memory leak, stb.
- useRef és refek
- szerintem érdemes tudni, hogy mire jó, hogy működik, és miért jó
- a refeknek az a lényege igazából, hogy tudsz benne úgy tárolni adatot, hogy az "túléli" a rerender ciklust és nem is triggerel rerendert a komponensedben
- a HTML és DOM manipuláció szempontjából is hasznos tudni a refeket, mert azokban tudsz HTML elemeket tárolni és továbbpasszolni pl.
- alapvetően az a jó, ha nem kell sokat használni, de sokszor szükség van rá
- useMemo és React.memo
- megint csak az a jó, ha nem kell használni, de sokszor hasznos és elkerülhetetlen
- tudd, hogy mi az hogy "memoizálni" és kb kész is vagy
- ja és hasznos a react működésének szempontjából, ha a react.memo callbackjében debugolsz kicsit
- meg tudod mondani egy react komponensnek, hogy milyen prop változásokat ignoráljon pl. szóval abban a callbackben bele tudsz nyúlni a komponens életciklusába (csak végső esetben)
- Rendering típusok
- CSR (client-side rendering), SSR, SSG , hydration => mik ezek? Mi a különbség? Mikor használni
- SSR (server side rendering)
- SSG (static site generation)
- hydration =>
- Ez inkább elmélet, jó téma, érdemes tudni róla, freelance dolgoknál megint csak hasznos lehet
- illetve ez szorosan kapcsolódik az SEO témakörhöz
A fent említett react témák mind mind szorosan kapcsolódnak egymáshoz, a lényeg az, hogy érteni kell a React működését.
## React native, cross-platform development
Sok mindent nem tudok ez ügyben elmondani, mivel élesben még nem dolgoztam native projekten, csak saját ügyködes
- React Native - ismered
- Expo => ismered
- Tamagui => cross-platform UI kit, eléggé új cucc, ha később szeretnél freelancerkedni és több platformra fejleszteni, mindenképp ajánlott megnézni, hogy mit tud
- Ui Kitten és egyéb komponens libraryk - ha freelancerkedni akarsz, akkor érdemes megtanulni valami ilyesmit, hogy gyorsabban haladj
## HTML, CSS
- mi a html?
- mi az a SEO? tudj erről egy kicsit beszélni azért, hogy ez miért fontos
- mi az hogy accessibiity, miért fontos? tudj rá példát mondani (röviden)
- HTML semantics => ezzel is ki lehet emelkedni, pl. tudod, hogy mikor kell articlet, sectiont, divet, spant használni => szorosan kapcsolódik az accessibilityhez
- CSS dolgokat is érdemes tudni, flex, grid, centering,
- CSS preprocessorok, "libraryk, frameworkok" - csak tudj ezekről, melyik miért jó, mit használtál eddig, ha úgy van ki is próbálhatod némelyiket, de ez projekt függő, hogy mit használnak
- SASSS
- SCSS
- CSS-in-JS (emotion, styled-components)
- inline styling, stb.
- Ha használsz UI libraryt, akkor mondd el hogy miért, mi jo benne, ismered e DE => kell hogy értsd a CSS alapokat
- Ide kapcsolódik: legnépszerűbb CSS megoldás (talán mondhatni) a Tailwind CSS - nem baj, ha tudsz róla, nem kell nekiállni megtanulni, nézz utána, csak lásd, hogy mit tud, sok projekten szerintem ezzel indulnak (szerintem ma már mobilon is talán)
- ide kapcsolódik a react native szekcióból amiket felsoroltam ott, pl. Tamagui, UI Kitten - csak nézz utána, hogy mik ezek, projektfüggő, de ahol a sebesség számít, ott nem a nulláról fogsz komponsenseket csinálni
- ennek igazából itt az a lényege, hogy meg kell tanulni gyorsan adaptálni technológiákat, ezért jó, ha legalább egybe belekóstolsz, de nehogy újraírj mindent!
- Positioning (absolute, fixed, sticky és egyebek)
- Box model
- Margin, padding, margin-collapse
- flex, grid
- CSS inheritance és hierarchy
- CSS pseudo selectorok és pseudo classok
- vannak új CSS megoldások, szerintem menő, ha tudsz párat, pl. container selector has() function, meg ilyesmi, meg még ki tudja mik vannak, már nagyon rég néztem rá ezekre
- CSS változók, megincsak egy olyan dolog, amire nem valószínű, hogy rákérdeznek, de jó ha tudod
- CSS-el az van, hogy szerintem ma már senki sem ír custom CSS-t (kivéve persze mi), vagy legalábbis szerintem az egész el fog menni ebbe a Tailwind irányba, legalábbis a csapból is ez folyik
## Testing
Szerintem nagyon jó, ha erről tudsz beszélni, és tudsz nekik mutatni példákat, ha kérik, vagy ha van egy "take home" interjú, akkor ha oda is írsz 1-2t, szeretni fogják.
Szerintem ki lehet emelkedni ezzel, szóval ajánlom, hogy írj majd pár tesztet a mostani projektedbe is (nem bonyolult).
- unit testing vs integration testing vs end-to-end testing (tudd, hogy melyik micsoda)
- mi az hogy test driven development?
- írj pár tesztet a projektbe react-testing-library-vel és jesttel (ezek egymásra épülnek, youtube segít)
## WEB-es dolgok, browser, WEB API meg ami még eszembe jut
- hogy működik a web
- mi az, hogy szerver
- mi az, hogy kliens
- mi az hogy request, response
- mi az API
- mi az, hogy REST API
- milyen más APIk vannak még
- Hogyan működik a böngészőb
- Mi az hogy URL, milyen elemekből épül fel, stb.
- Mi az hogy header?
- Mi az hogy cookie?
- localstorage?
- Token?
- Mi az hogy session?
- Mi az az event listener
- Listener, event, custom event, hogy működik ez az egész
- érdemes azért tudni nagyjából pár web apit, window object, DOM, és társai
- DEBUGGING tools
- mindenképp érdemes gyakorolni egy kicsit és ismerni a böngészőt és hogy miket tudsz benne csinálni
## GIT
Ismerd, hogy hogy működik, miért jó.
- ismerd az alapvető commandokat (érdemes terminálban egy kicsit gyakorolni)
- git commit
- git pull
- git push
- git status
- git log
- git merge
- git rebase
- git cherry-pick
- git checkout
- git amend
- .gitignore fájl
- merge vs rebase
- tudd, hogy miért kell branchelni
- érdemes a git flowról olvasni egy kicsit, nem kell nagyon elmélyedni benne
- VS Codeban érdemes megnézni, hogy hogyan tudsz faszán böngészni a repoban pl. git history, commitok ossyehasonlitasa, branchek osszehasonlitasa
- TUDD, HOGY MI AZ A PULL REQUEST, ÉS HOGY NÉZ KI EGY CODE REVIEW - meg tudom mutatni
- mivel használod a gitet, ezért ez már fasza, a saját érdekedben is érdemes a gittel barátságban lenni, nagyon sok időt lehet vele spórolni
## Figma
- ha frontend fejlesztő leszel, akkor designerekkel fogsz együtt dolgozni. A figmat ők használják terveztésre, prototípusok gyártására.
- Ismerkedj meg vele, ha még nem tetted. Jó ha ismered, tényleg. Nem kell azonnal megtervezni egy oldalt, csak tudd, ohgy mi ez, és hogy mit hol találsz benne.
- Egyéb dolgokra is tök hasznos, én a CV-met Figmában dobtam össze => talán ha csinálsz egyet te is ott, máris elég
***
Ezek inkább vegyes témák, a JS Reacten kívül.
## Piac
- Pang, nehezebb bekerülni, mint pár éve
- Mit értek ez alatt? Régen hetente 20 emailt kaptam linkdinen most havonta 1et
- Portfolio => GitHub, legyen valami kézzelfogható, amit megmutatsz
### Véleményem most:
- Mindig legyen nyitva az ajtó
- De nem kell mindenkinek válaszolni meg mindenkivel foglalkozni => azt kell megérteni, hogy amikor azt hiszed hogy nagyon kedves meg keresnek, az valószínűleg csak egy robot, vagy egy körlevél, pl. Linkedinen
- Érdemes figyelni, érdemes “barátokat szerezni”, tudni, hogy mi újság pénzügyileg
- Interjúzz sokat => Glassdoor => itt lehet olvasni cégekről
- Legyen egy alap portfolio, legyen egy minimal önéletrajz, legyen benne mihez értesz, mi érdekel
- Linkedinen van 1 hónap premium => érdemes kihasznalni
- Freelance: upwark, fiverr? => freelance projektek, de sok mobil van, PROBLEMA => indiaiakkal es pakikkal versenyzel => tehát sokkal olcsóbbak mint te, de érdemes nezni
- beszéltem a munkatársammal, ő is "mentorálgatja" az egyik haverját. Azt beszéltük, hogy érdemes így számolni:
- Ő is kb nettó 500at mondott elérhetőnek, viszont ha bérfejleszteni akar az ember, akkor az általában munkahelyváltást jelent. Ez azt jelenti, hogy a piac nagyjából úgy állt be, hogy 1.5-2 évente szoktak váltani az emberek, ha találnak jobb melót, jobb pénzt. A cégek nem fognak megdobálni mindenféle emelésekkel csak azért, mert régóta ott vagy. Ha kivételesen jó vagy, akkor persze "előléptetnek". Az inflációs követő emeléseken kívül nem jellemző, hogy hozzádcsapnak emeléseket, csak mert jó vagy (megtörtént már velem, de összességében nem jellemző). Szóval a lényeg: ha most elmész 500ért dolgozni, akkor úgy számolj, hogy 1-2 évig annyi lesz a fizetésed, ha ugyanazon a helyen maradsz.
- tegnap volt team meeting a cégnél és lesznek új projektek, összességében úgy érzem, hogy talán beindul a cég egy kicsit, szerintem kell majd még ember => ettől függetlenül számtalan más lehetőség van még, a multis vonalat is megnézheted
- a mobilos sráccal beszéltem, megnézi velem a munkádat és elmondja, hogy mit lát nagyjából, és hogy szerinte rá tudnál-e ugrani adott esetben arra a projektre, amin ő van
### Kelet magyarországi Atok
- Mindenkepp tudd, vagy derítsd ki, hogy mennyit érsz => ne az abauji es borsodi élethez merd a pénzt, amit jónak találsz hanem a piachoz
- glassdoor
- linkedin
- egyéb fórumok, ahol ilyesmiről beszélnek (nem vagyok képben annyira)
- ISMERŐSÖKET VÉGIGKÉRDEZNI
- Nagyon fontos szerintem, hogy mindig válaszolj interjún, => ne szégyelld, ha nem tudsz valamit, érdeklődj, nem kell találgatni, az érdkeli őket, hogy hogyan gondolkodsz, rá tudsz-e jönni dolgokra magadtól - SENKI SEM TUD MINDENT
- INTERJÚN UDVARIASAN, DE HATÁROZOTTAN, MAGABIZTOSAN, ÉRDEKLŐDŐEN, LELKESEN => ENNYI A TITOK
## CMS
Megint csak freelance munkához, ha abban gondolkodsz, szerintem érdemes megtanulni egyet. Olvass ezeknek utána röviden, hogy interjún ha szóba kerül esetleg, akkor tudj róla mondani 1 -2 dolgot.
- Mi az a CMS, mire jó, stb?
- Mi az hogy headless CMS?
- Pl. Strapi - open source Javascript Headless CMS, ingyenes self hosting lehetőségge
- Pl. Wordpress - ugye ezt nem kell nagyon bemutatni, de ugye ez php, én nem foglalkoznék már nagyon vele, nem az én világom, de freelancerek még a mai napig főleg ezt tolják
## Adatbázisok
Amiket ideírok inkább csak minden, ami eszembe jut róla, nem kell ezt megtanulni vagy ilyesmi, olvass utána ezeknek egy kicsit, hogy ha esetleg egy beszélgetés során szóbajon, akkor tudj róla mondani 1-2 dolgot.
SQL-t alapszinten azért mindenképp érdemes megtanulni, youtuberól, vagy valamilyen interaktív felületről szerintem bőven elég, talán a freecodecampen is van valami SQL cucc.
- SQL vs NoSql összehasonlítás röviden, melyik mire jó, miért jobb mint a másik, saját vélemény, stb.
- ORM =>
- Mik ezek, és miért jók, mi az előnyük, hátrányuk
- Pl. Prisma (talán a legnépszerűbb jelenleg), Drizzle, TypeORM
- Nézd meg, hogy mire jók ezek, van 3-4 igazán népszerű cucc, ha freelancelnmi akarsz, akkor azért jó ha ismersz ilyet, megint csak a a sebesség miatt
- NoSQL
- a mongot már ismered, én még nem láttam komolyabb projekten
- SQL
- PostgreSQL - talán mondhatni, hogy ez most a standard, mivel open source
- SQLite - szintén népszerű, nem kell vele foglalkoznod
- Redis
- Caching layernek használják főleg, olvass utána egy kicsit, nem kell nekiállni használni
## Egyéb elméleti kérdések, "fundamentals"
- Mobile first development
- SOLID principles (EPAM)
## Egyéb őrületek
- Projektmenedzsmnet
- agilis szoftverfejlesztés
- mit jelent, miért jó, blabla, csak olvass utána
- SCRUM
- ugyanaz, csak tudj róla
- mi az hogy sprint, retro, stb.
- Kanban
- megintcsak ugyanaz, csak egyszer elolvasod, pá
- JIRA szoftver
- ez az industry standard szoftverfejlesztéshez, nem baj ha nem használtad, 1 videónál többet ne szánj rá szerintem felesleges, egyébként simán meg tudom mutatni neked, hogy hogy működik
- Software delivery, DevOPs dolgok
- mi az, hogy devops
- mi az, hogy CI-CD pipeline (tőlem ezt kérdezték pl.)
***
INNEN LENTEBB AZ ÉN SZTORIJAIM VANNAK, NEM ANNYIRA ÉRDEKES
Én mit csinálok:
- UIC Digital
- Ügynökség, megrendelőknek szállítunk le
- Mobil, “izgalmasabb” projektek, pl. Streaming, UEFA,
- Dogloznak Roku-val
- Jelenleg a BBC oldalát csináljuk
- NextJs
- Nulláról, minden komponenst mi építünk
- Az egész cég ezt csinálja
- Izgalmas? Nem
- Alapvetően front end
- Otthonról, napi 1 iroda
- Közepes cég, megnézheted linkdinen
- Esetleg érdekelhet: React Native
Én mit csináltam:
- Semmi szakmai hátterem, oktatásom nincs
- Londonban 1 évet voltam egy startupnál, ott jó emberek dolgoztak
- Haverom 10 éve EPAMnál, ajánlotta, hogy most be lehet kerülni “self-taught developer”
- London után hazajöttem 1 évig csak tanultam
- Volt egy bootcamp boom Magyarországon is (pl. Codecool, Green Fox) => nem mentem ezekbe, magamtól nekiálltam
- Azt se tudtam, hogy mi az a HTML
- Javascript:
- Nyelv
- freecodecamp.org => ezt javaslom
- 1 év után, 1 félkész mobilpap, 1 kész weboldal, 1 félkész “CMS”, és kb ennyi volt, meg egy gagyi portfolio oldal
- Jelentkeztem MINDENHOVA
- Végül 3 ajánlat, EPAM, Kinsta, meg egy másik ulti
- Interjú:
- EPAM:
- Volt HR bemelegítő beszélgetés
- tapasytalatr=l
- Angol
- Meg lássák, hogy mennyire vagy “kajak”
- Merni kell hülyeséget mondani
- Live. Coding
- “Klasszikus” coding feladatok pl. Fizzbuzz => érdemes nézegetni ilyeneket, freecodecamp.org, hackerrank, leetcode
- Közben voltak elméleti kérdések, pl. React, vagy mittudomén “mi lesz ennek a változóak az eredménye” de coding nélkül
- KINSTA
- bEküldtem az anyagomat
- Utána beszélgetés
- Ennyi
- Accenture
- Ugyanaz volt mint az EPAMnál
Kinstánál dolgoztam másfél évet utána
ITT VOLT A SZTORI