5 shortcut és 5 magic tool webfejlesztőknek

Shortcuts - VS Code

Sok ablak van nyitva VS kódban? 

Ne egérrel váltogass! A megnyitott tabok között váltogathatsz az alábbi parancsokkal

Ctrl + tab

Ctrl + shift + tab

Át kell nevezni valamit, ami több helyen van használva? 

Az alábbi parancs elég okos, hogy a scope-on belül mindenhol kicserélje a változó nevét.

Ctrl+r, r

Nem emlékszel hol volt az a fájl a file explorerben? 

Ctrl + e

majd kezd el gépelni például azt, hogy "service"

Elcsúsztak a sorok? Rossz a formázás?

Alt + Shift + f

Lusta vagy mentegetni?

Ctrl + Alt + S -> minden fájl mentése, vagy

Alt + f, p, s (File > Preferences > Settings)

+1 A felejthetetlen, aki helyetted gondolkodik:

Ctrl + . 

Toolok

Ditto

Ez a program képes elmenteni az előző 100 vágólapodat. Sokszor azt kívánom bár lenne ebből egy biokompatibilis agyba építhető változat is. Ez a hasznos toolocska nem csak szöveget de bármilyen képet is képes eltárolni amit az elmúlt időben Ctrl+c-vel mentettél.

https://ditto-cp.sourceforge.io/

VS Code extension - Bracket Pair Colorizer 2

Ha előfordult veled, hogy nem találtad egy zárójel elejét, vagy végét, ez az extension neked való. 

VS Code extension - Code Spell Checker

A falra tudtam volna mászni, amikor a JS kódom elszállt és nem tudtam mi az oka. Majd kiderült, hogy egy triviális elgépelés okozza. A typscript szerencsére az ilyeneket már kezeli, de ha plain JS-sel dolgozol rengeteg időt spórolhat meg. 

Persze tudom itt könnyű kiszúrni, de próbáld csak meg az invoiceOrderLineContractorDataSorce-ban :)

És a legjobb, hogy a Ctrl + .-tal természetesen tudod javítani a helyes szótári szóra.

Metszet és Vázlat - Időzített kivágás

Gondolom a metszet és vázlatot már ismered (vagy snipping tool). Mi van akkor, ha valami csak akkor jelenik meg, ha felé viszed az egeret?

Notepad++

Ha valamit gyorsan ki kell másolni és értelmezni, rengetegszer hívom segítségül. Olyan hasznos tool-ok vannak benne, mint a JSON és XML formatter.

Postman, Fiddler

A postman-ról már volt szó korábban, API teszteléshez kiváló. Tokeneket tudsz megadni authentikáció-hoz HTTP kéréseket küldeni, ezeket collection-ökbe foglalni, és gépek között megosztani az account-od segítségével.

A Fiddler 4 pedig egy olyan proxy amely a hálózati forgalmat figyeli.

Nektek mik a kedvenc tooljaitok? Add hozzá commentben ;)

Mobil alkalmazás fejlesztési technológiák

Ebben a posztban arról lesz szó, hogy ha el akarsz kezdeni mobil alkalmazásokat fejleszteni, milyen lehetőségeid vannak. Én nagy rajongója vagyok a PWA (Progressive Web Application - Progresszív webalkalmazás) technológiának ezért nem ígérem, hogy ez a poszt teljesen elfogulatlan lesz. De igyekszem bemutatni mik léteznek ma a piacon.

Natív fejlesztés

A natív fejlesztésen az eszköz számára natív (saját) kódolási nyelven programozott alkalmazásokat értjük. Ez Android esetében a Kotlin és a Java, míg iOS eszközök esetében a Swift és az Objective-C. Ezekhez a nyelvekhez a Google és az Apple saját SDK-kat (Software development kit) biztosít, amelyek pl az Android studio esetében emulátort is tartalmaznak adott eszközökre.

Előnyei

• Általában gyorsabbak, mivel közvetlenül hozzáférnek az eszköz interfészeihez (memória, kamera, stb)
• Lehetővé teszik a fejlesztő számára, hogy az eszköz teljes eszközkészletét elérjék (pl Contacts, IMEI stb)
• Egyes platformokhoz egyedi felhasználói élmény tervezhető

Hátrányai

• Nehéz megtanulni a natív programozási nyelveket, vagy Projekt manager szempontból többe kerül egy natív fejlesztő.
• Egy adott appot minden eszközre külön kell leimplementálni.
• Ha a projekted elején választasz egy platformot (iOS, Android) lehet hogy csak az eszközök 50%-án lesz elérhető az alkalmazásod
• Nagy teljesítményű gép kell az emulátorok futtatásához, iOS-re fejlesztett app esetében kell vennünk vagy bérelnünk egy MAC minit a fejlesztéshez.

Cross platform - React Native / Ionic Cordova / Xamarin / Kivy

Cross-platform fejlesztésnek nevezzük, amikor az eszköz számára nem natív nyelven írjuk le az alkalmazásunkat, és aztán egy fordító segítségével lefordítjuk egy az eszköz számára futtatható programra. Mobil fejlesztés tekintetében a két elterjedt framework ehhez az ionic és a react native. Mindkettőben HTML, CSS és Javascript alapokon írjuk meg az alkalmazásunkat, amit a keretrendszer által biztosított fordító fordít le native alkalmazássá. A Xamarin esetében C# nyelven míg a Kivy esetében Python-ban írjuk meg a kódunkat.

Ehhez a tradícionális webfejlesztő eszközöket szoktuk használni, leggyakrabban visual studio code-ot, ha debuggolni is szeretnénk. (bár hozzátesztem, hogy az igazi fejlesztők VIM-et használnak, esetleg pillangók szárnyával térítik el a felső atmoszféra áramlatait, hogy ezt lencseként használva a kozmiklus sugárzást koncetrálják a chip-en és átbillentsék a megfelelő bit-et https://xkcd.com/378/ ).

Előnyei

• Nem kell megtanulni a natív programozási nyelveket
• Egy webalkalmazás logikáját részben újra lehet használni a natív alkalmazáshoz
• Elég sok natív funkciót elérsz
• Az alkalmazásod Android-ra és iOS-re is lefordítható

Hátrányai

• Nem biztos, hogy minden natív funkcionalitást elérsz.
• Android és iOS natív funkciók használatakor eltérések lehetnek a két eszközben, ezért ide eszköz specifikus kódokat kell implementálnod. pl (if (platform == 'iOS'...stb)

Progresszív webalkalmazás

A progresszív webalkalmazás egy olyan webalkalmazás, amely a web és a böngészők fejlődésének köszönhetően lehetővé teszi a webalkalmazás számára, hogy bizonyos natív funkciókat biztosítson. Ilyen funkciók például, hogy kitűzhetőek a kezdőképernyőre és offline futhatnak. Tehát ha elmegy az internet a webalkalmazás akkor sem fog 404-et dobni, hogy a T-Rex-es játékkal játszhass.

Előnyei

• Nem kell megtanulni a natív programozási nyelveket
• Egy webalkalmazás logikáját újra tudod hasznosítani egy tradícionális web alkalmazáshoz
• Natív funkciók tekintetében a leggyakrabban használt perifériák (kamera, kezdőképernyő elérhető - https://whatwebcando.today/)
• Az alkalmazásod Android-on és iOS-es is működik, teljesen cross platform, ugyanaz a kódbázis.
• Nem kell app-store-on keresztül deployolni a saját alkalmazásod

Hátrányai

• Nem érhető el a contact lista, memória, és egyéb hardver közeli natív funkció
• A cache kezelése nehézkes lehet, főleg ha update-elni akarod az alkalmazásod.

A progresszív webalkalmazásokról egy külön posztot is fog még készülni, mivel ez tartozik a web-programozás témakörébe. Remélem sikerült megvilágítanom neked milyen lehetőségeid vannak, ha mobil fejlesztésre adod a fejed. Akár natív, akár cross-platform fejlesztést választasz, a legfontosabb, hogy sokat gyakorolj, nézz végig tutorialokat és légy kitartó. Sok sikert!

Ha tetszett a poszt kérlek értékeld a blogot, ezen az anonim kérdőíven (3 kérdésben), vagy kezdj el követni. (lehetőleg nem az utcán, hanem itt, vagy alább)

Web programozás oktató anyagok

1/1 - Hozd létre az első weboldalad
1/2 - Hozz létre magadnak egy portfolio oldalt HTML, Javascript és CSS segítségével
1/2 - B Javascript bevezető
1/3 - Bevezetés a forráskód kezelő rendszerekbe.

1/4 - Web API és REST, szerver oldali programozás

1/5 - Statikus weboldalak hosztolása felhőszolgáltatónál ingyen

1/6 - MongoDb, Rest API, ASP .Net Core

1/7 - SPA, AngularJS, Bootstrap

1/8 SPA , AngularJS, Bootstrap - 2

.

Miért érdemes megtanulnod programozni?

Üdvözöllek az oldalon!

Czimer Kristóf vagyok, szoftverfejlesztő. Azért hoztam létre ezt a blogot, hogy segítsek azoknak, akik szeretnének megtanulni, vagy továbbfejlődni webfejlesztőként. Meggyőződésem, hogy ezt a tudást nem csak olyanok tudják majd elsajátítani, akik több évig egyetemen tanultak ilyen szakirányon, hanem mindazok, akikben megvan az érdeklődés a technológia és a kitartás a tudás megszerzése iránt.

Ha figyeled a trendeket akkor feltűnthetett már, hogy

• fejlesztőként elég jól lehet keresni
• egyre több fejlesztőre lesz szükség, mivel az IT egy olyan terület, amely egyre több munkát csinál magának.
• egyre több olyan fejlesztő dolgozik az iparban, aki nem rendelkezik egyetemi végzettséggel, és (Magyarországon is egyre inkább) kezd kiveszni a papír iránti igény
• Ezen kívül az élet egyre több területén kell tudni programozni olyan szakmákban is ahol pár éve ez talán még fel sem merült,

és úgy gondolom, hogy ezek a trendek folytatódni fognak. Ha érdekel hogy hogyan kell összerakni magadnak (vagy akár másnak) egy weboldalt, üzleti alkalmazást, vagy hogyan működnek a webalkalmazások amelyekkel chat-elsz, vagy épp dokumentumokat mentesz, tarts velem!

Kérdezz felelek

Ha bármi kérdésed van, tedd fel ide nyugodtan. Vagy anonim módon jelezz vissza itt