Mindenkinek, aki nem ismeri a történetemet ("kattintson az olvasáshoz"), ifj. front-end fejlesztő, akinek nincs CS diplomája vagy bootcampje. 2022 januárjában kezdtem el tanulni a front-end fejlesztést, és már 3 hónapja dolgozom főállású front-end fejlesztőként. Ebben a cikkben megosztom a legjobb életmentő eszközeimet a front-end fejlesztők számára.

Kezdő front-end fejlesztőként nem tudom, hogyan csináljak mindent, vagy azt sem tudom, mit tegyek. Néha az sem jó választás, ha egyszerű kérdéseket tesz fel a csapatvezetőnek. Ilyen helyzetekben természetesen a Google a legjobb segítő, de néhány eszköz életmentő is lehet. Essünk neki.

1. ColorZilla

Minden böngészőben ColorZillát használok. Alapvetően abban segít, hogy egy másodperc alatt pontos színkódokat kapjak a weboldalakról. Természetesen a színkódokat mindig megtalálja az inspect menüből, de miért vesztegeti az idejét, ha pillanatok alatt megtalálja?

A munkahelyemen már 3 különböző projekten dolgozom, és 7 különböző projektjük van bent. Mindegyik rendelkezik adminisztrációs panellel, ügyféloldali oldalakkal, és az egyiknek van egy extra céloldala is. Ezekben a projektekben a Reacton, a Nextjs-en és a Svelte-en dolgozom. Egyik percben kódot írok a Reactban, másik percben pedig a Svelte-t írom. És az egyik projektnek nincs Figma fájlja, de van egy eredeti oldala (egy népszerű oldal hivatalos török ​​oldalát készítjük), és a funkcióit a nulláról klónom. Itt a ColorZilla sokat segít nekem!

2. JSON Viewer Pro

Az egyik projekt, amin dolgozom, olyan, mint egy pokol API-integráció. Úgy értem, egyetlen projektben nem lehet több API. A mi sr. a háttérfejlesztő hamarosan letilt, mert szinte minden nap kérek új API-t!

Nos, amikor megnézem az új API URL-t, túl nehéz megérteni, hogy mely adatok vannak ott, és hogyan kell azokat rendszerezni. A JSON Formatter Pro segítségével minden API URL JSON formátumban lesz, és akár egy kattintással másolhatja az elérési utat. Nehéz volt megértenem a hosszú és bonyolult utat, de ez a kiterjesztés megmenti az életemet.

3. Képernyőrögzítő

Fejlesztőként a probléma megértése kulcsfontosságú. Mint ifj. fejlesztő, mindent megtesz annak megértése, hogy a csapatvezetőd mit szeretne tőled. Ha távolról dolgozik, nehéz mindent helyesen megérteni az írással. A Screen Recorder sokat segít nekem itt. Ha valamit nem értek, felveszem a képernyőmet mikrofonnal, és megkérdezem, mire van szükségem. Akkor is használom, amikor mindennap beszámolok arról, hogy mit csináltam.

4. Automatikus átnevezési címke (VS-kód)

Mint ifj. front-end fejlesztő, inkább HTML CSS-sel tervezem meg az oldalt, mintsem kulcsfontosságú funkciókat írok. Természetesen SOK funkciót írok, de valahányszor tervezési feladat van, hirtelen az én feladatom. És szeretem. Nem számít, melyik keretrendszert használja, az automatikus átnevezési címke segít a HTML-ben. Az egyik projektnél a Chakra UI-t használjuk a tervezéshez, és sokat váltok a „Box” és a „Flex” között a Chakra UI-ban. Az automatikus átnevezési címke kiterjesztéssel ez automatikusan fele az erőfeszítésnek.

5. Tailwind CSS (tudom, hogy nem „eszköz”)

Igen, igazad van. A Tailwind CSS nem „eszköz”. De ez életmentőbb, mint mások, amiket itt írtam, ezért nem akartam befejezni az említést róla. Nos, szerintem nincs olyan, aki ne ismerné a Tailwind CSS-t, de ez egy CSS keretrendszer. Sokkal gyorsabbá és egyszerűbbé teszi a tervezési utat.

Ezenkívül a Tailwind CSS legjobb része az, hogy mindent töröl, amit nem használ! Tehát egyetlen hátránya sincs a használatának. Webhelye vagy webalkalmazása nem lesz lassabb, mert a Tailwindot használja. Nincs annál rosszabb, mint egyedül CSS-t írni! Ezért szeretem a legjobban!

Befejező…

Még mindig csak kezdő vagyok ebben a szektorban, szóval lehetnek jobb lehetőségek, vagy valami, amiről nem is tudok. De csak meg akartam osztani, hogy mit használok, és mit szeretek használni. Természetesen van néhány más bővítmény is, például a React Developer Tools és az ES7+ a VS Code-hoz, de nem hiszem, hogy meg kell említenem őket.

Ha van valami tanácsa más eszközökkel kapcsolatban. Kérjük, ne habozzon írni a megjegyzésekben. Szeretem megosztani a gondolataimat erről az útról, de nincs is jobb motiváció, mint a kommentek itt! Találkozunk a következő cikkben, ami nem tudom mikor lesz! Továbbá, ha úgy gondolja, hogy a tartalom hasznos, az alábbi tippekkel támogathat engem 😇.