Agilný vývoj - úvod do problematiky

V dizajne ako takom je veľmi dôležité, aby bol výsledok práce jasný a každý mu chápal. Či už je to vo forme zalomenia textu, orezania fotografie alebo navrhnutia loga. Za týmto účelom sa okrem iných pomôcok často využíva aj aplikácia zlatého rezu, o ktorom si teraz niečo povieme.  Z angl. „Golden ratio“  hovoríme o konkrétnom matematickom pomere, ktorý sa veľmi často vyskytuje aj v prírode a dizajnové odvetvie sa nim inšpiruje. Zlatý rez nám pomáha dosiahnuť čo najprirodzenejšie pôsobiace proporcie, tvary či štruktúry. “Zlatý rez vznikol už v starovekom Grécku” Ide o veľmi špeciálne číslo – 1,618. Vychádza zo známej Fibonacciho postupnosti a jeho aplikáciu môžeme nájsť aj v prírode, napríklad v tvare morskej mušle či vo formácii oblakov pri hurikánoch. Táto postupnosť  je tvorená vždy sumou dvoch predchádzajúcich čísel (0-1-1-2-3-5-8-13-21-...). A práve z tejto sekvencie odvodili už v starovekom Grécku zlatý rez (golden ratio), aby vedeli lepšie vyjadriť rozdiely medzi číslami sekvencie. Ako používať zlatý rez v dizajne  Aplikácie zlatého rezu do dizajnérskej profesie vôbec nie je tak náročná, ako by sa mohlo na prvý pohľad zdať. Jeho využitím môžeme vytvárať napríklad proporcionálne layouty na web. Ak chceme navrhnúť web, ktorý má vedľa priestoru pre hlavný obsah aj sidebar, tak práve s využitím zlatého rezu vieme stanoviť ich presnú šírku.  Ak by sa jednalo povedzme o priestor so šírkou 960px, tak priestor pre hlavný obsah by mal mať šírku 593px (960px / 1,618) a sidebar šírku 367px (593px / 1,618). Samozrejme, že v praxi do toho vstupuje viacero ďalších faktorov (napr. padding), no logiku tohto pomeru to deklaruje vynikajúco.[Image]A keďže toto číslo vychádza zo sekvencie nekonečného množstva čísel, tak jeho opakovaným aplikovaním získame rôzne veľkosti (dĺžky, šírky,...), s ktorými môžeme v dizajne pracovať a vyskladať z nich funkčné a intuitívne UI.   Ako sme si už hovorili, zlatý rez sa dá aplikovať v podstate na všetky oblasti dizajnu či kreatívy. Ukážeme si k tomu niekoľko príkladov. Orezávanie obrázkov  Ak ide iba o orez prázdneho priestoru na kraji fotografie, vec je jednoznačná. Ale ak treba orezať aj samotný obsah fotografie či obrázku, situácia sa mení. Výsledok musí ostať vyvážený a tie najdôležitejšie veci na obrázku by mali mať svoje miesto. Práve s tým nám vie pomôcť zlatý rez.[(Zdroj: industrydev.com)] Typografia a hierarchia  Vieme si tiež pomôcť pri výbere správnej kombinácie veľkosti použitých fontov. Takto bude mať názov, podnázov a samotný text tú správnu veľkosť a hierarchia medzi nimi bude okamžite jasná.[(Zdroj: Invisionapp)] UI Webdizajn  Rozloženie jednotlivých elementov a plôch na webe rozhoduje o tom, ako intuitívne sa bude návštevník webu cítiť. A rovnako aj, či sa mu to bude páčiť. Ako sme už skôr písali v článku, napríklad šírka jednotlivých stĺpcov je vďaka zlatému rezu jasne stanovená.[(Zdroj: Apiumhub)] LogoA posledným príkladom je využívanie zlatého rezu pri tvorbe loga. Tu to možno na prvý pohľad nie je až tak očividné. No verte, že zlatý rez sa tu aplikuje veľmi často a aj tie najznámejšie logá boli vytvorené práve s jeho pomocou.[(Zdroj: Twitter, NatGeo)]Niekedy ho v logu nájdete jednoducho (National Geographic logo), inokedy je to trošku skryté (Twitter logo). Práve v tom druhom prípade bolo logo vytvárané za pomoci série kružníc s jasne danými veľkosťami. Tie pomáhali vytvárať všetky krivky a záhyby loga, až kým z neho nevzniklo ikonické logo, ktoré pôsobí prirodzene a pekne. A nie je to náhoda. Zlatý rez je nie je technika, je to skôr myšlienkový proces. Vedieť ho aplikovať efektívne chce svoj čas. Určite sa však oplatí pohrať sa s ním a skúšať podľa neho vytvárať nejaké layouty či orezávať dôležité fotografie. Šikovnú pomôcku v podobe špirály zlatého rezu nájdeš tu.

Ľudia sa nás často pýtajú, ako sa stať frontend developerom, aké technológie by mali ovládať, čo všetko vedieť, kde začať a aká je správna postupnosť jednotlivých online kurzov. Na základe našich skúseností, rád od lektorov ako Yablko a ďalších, sme v tomto článku dali dokopy študijnú cestu budúceho frontend developera. Kurzy cez úrad práce alebo špecializované IT online kurzy môžu byť vynikajúcim odrazovým mostíkom. Frontend developer vs backend developer vs fullstack developerFrontend developer je človek, ktorý je zodpovedný za časti webovej aplikácie alebo webstránky, ktoré používatelia vidia a interagujú s nimi. Backend developer rieši všetko na pozadí – infraštruktúru, dátový model, databázy. Potom je tu fullstack developer, ktorý zvláda frontend aj backend a pokrýva celý proces návrhu webovej aplikácie. Na lepšiu predstavu sa môžeme pozrieť na programátorské meme.[Programátorské meme] Dnes sa hranica medzi frontendom a backendom stále viac stiera, čo znamená, že veľa úloh spadajúcich do backendu môže preberať front end developer. Preto je dôležité vedieť nielen základy, ale mať širší pohľad na technológie a funkcie. Úlohy frontend developeraFrontend developer sa venuje najmä týmto oblastiam: • rozhoduje o dizajne a štruktúre webstránok, • vyvíja funkcie na dosiahnutie vynikajúcej používateľskej skúsenosti, • dbá na responzivitu webstránky, • optimalizuje web pre rýchle načítanie a škálovateľnosť, • volí kombinácie technológií pre dosiahnutie najlepšieho výsledku. Zručnosti front-end developeraDobrý front end developer musí mať komplexné znalosti v oblasti vývoja webu. Mal by ovládať technológie ako HTML, CSS, JavaScript a ďalšie nástroje (čítaj ďalej v článku). Grafické zručnosti, ako práca s Photoshopom, Sketchom alebo Illustratorom, sú veľkým plusom. Základné znalosti SEO sú užitočné pri optimalizácii webstránok, a tiež dobré komunikačné schopnosti, pretože vývojári často spolupracujú s grafikmi, backend developermi, projektovými manažérmi či klientmi. Ak sa chceš naučiť viac o jednotlivých technológiách, web developer kurz je skvelou príležitosťou, ako naštartovať kariéru. Mzda frontend developeraPodľa portálu platy.sk na Slovensku zarába JavaScript programátor (prečo je táto pozícia vyhľadávaná, sa dozvieš nižšie) od 1.300 Eur do 2.900 Eur v závislosti od skúseností a praxe. Dobrí JavaScript programátori sú na trhu stále žiadaní, čo znamená, že ak sa rozhodneš stať frontend developerom, práca ťa určite neminie.[Mzda Front-end developera.] JavaScript je nesmierne populárny. Podľa rebríčka RedMonk je JavaScript na GitHube a Stack Overflow technológia číslo jedna. Ak na Profesii vyhľadáš pozície pre JavaScript alebo frontend programátorov, nájdeš stovky možností. A ak na LinkedIn uvedieš, že zvládaš JavaScript spolu s niektorým JavaScript frameworkom, môžeš očakávať správy od IT recruiterov. Tak sa pusť do toho a zisti ako sa stať programátorom s pomocou našich rád a kurzov cez úrad práce alebo iných IT kurzov. Ako sa stať frontend developerom?Nenechaj sa odradiť a choď za svojim cieľom. V texte nižšie sme vypichli podľa nás tie najdôležitejšie technológie, ktoré by si ako dobrý frontenďák mal ovládať. Poďme na to. “TL;DR: HTML, CSS a JavaScript sú chrbtovou kosťou frontend developmentu. Frontend development kombinuje práve tieto tri technológie a k tomu JavaScriptové frameworky (alebo knižnice).” Krok číslo 1: HTML a CSSToto je úplne prvá téma, ktorej by si sa mal venovať, pokiaľ máš v pláne byť frontend developerom. Je to alfa a omega celého frontend developmentu. HTML a CSS používajú všetky weby, všetky webové aplikácie. HTML a CSS ťa zadarmo naučí kurz Webrebel 1: HTML, CSS a JavaScript. Všetky videá o HTML a CSS sú k dispozícii zadarmo, stačí sa prihlásiť do kurzu. V tomto kurze sa naučíš aj dôležité veci o tom, ako vôbec internet funguje, ako fungujú prehliadače, čo je HTTP a HTTPS, DNS, JSON, XML a kopec ďalších skratiek, ktorým teraz možno nerozumieš, ale v procese tvorby webstránok sú to dôležité znalosti. A keď budeš pri CSS, venuj mu poriadne veľa času. Môže sa zdať, že je ľahké pracovať s CSS, ale na jeho zvládnutie je potrebného veľa času. Skús sa opýtať backend developera, prečo nie je frontendistom? Šanca, že ti odpovie, "Lebo neznášam CSS" je dosť vysoká. Sledovať videá nestačí a preto si určite počas ich sledovania rob domáce úlohy, ktoré v kurze sú. Urob si svoje vlastné portfólio, ponúkni sa svojim známym, že im spravíš webstránku, rob maličké projektíky len tak pre svoje potešenie a takto sa budeš zdokonaľovať a chytíš písanie kódu za pačesy.Ukážka HTML, CSS, JavaScript |Zdroj: https://moz.com/blog/javascript-seo [Ukážka HTML, CSS, JavaScript |Zdroj: https://moz.com/blog/javascript-seo] Krok číslo 2: píš lepšie CSSLepšie CSS sa naučíš písať napríklad vďaka preprocesorom. Známymi preprocesormi sú Sass, Less alebo Stylus. Preprocesor je program, ktorý spracuje kód v jednom formáte (napr. Sass) a zmení ho na kód v druhom formáte (CSS). Vďaka Sass vieš písať menej kódu a bude prehľadnejší.  Keď budeš robiť na webových projektoch, je dobré ovládať aj nejaký ten CSS framework. Najväčšími frajermi na tomto poli sú pravdepodobne Bootstrap a Foundation. Bootstrap je iniciatíva Twitteru a zaslúži si veľkú pochvalu za zavedenie responzívneho dizajnu vo veľkom meradle. Bol to prvý framework, ktorý podporoval filozofiu 'mobile-first'. Pomocou Bootstrapu vieš relatívne rýchlo vytvárať responzívne weby.  Ak je pre teba Bootstrap zbytočne obmedzujúci v tom, ako tvoj dizajn bude vyzerať, vyskúšaj CSS framework Tailwind 2. Je pre ľudí, ktorí chcú mať flexibilitu a tvoriť vlastný dizajn. Tailwind je intuitívny a moderný CSS framework, ktorý sa dá rýchlo naučiť. Krok číslo 3: trošku prikúrime - JavaScriptJavaScript bude pre teba ako frontend developera bezpochyby najdôležitejšou zručnosťou. Ako sa naučiť JavaScript? Logická odpoveď: začni základmi. Nebuď povrchný, ale ani v úvode nechoď do úplných detailov. Learning by doing je naše odporúčanie, keď sa učíš JavaScript: 1. Nauč sa základy JavaScriptu, 2. Nauč sa React, Vue alebo Angular, 3. Pochopíš, že nemáš dobré základy JavaScriptu, 4. Vráť sa k bodu 1. a nauč sa poriadne JavaScript. JavaScript je už niekoľko rokov po sebe najpopulárnejším programovacím jazykom, pozície vyžadujúce JavaScript pribúdajú ako huby po daždi. Keď budeš vedieť JavaScript, o robotu máš postarané. Yablko pripravil parádny kurz o modernom JavaScipte. Tento kurz ťa naučí písať moderný JavaScript, budeš vedieť jeho syntax (ES6 a ES7), aby si nepísal spaghetti code a pravidlá jazyka. Okrem toho, zvládneš nástroje ako package managers (správa závislostí) npm a yarn, skrotíš DOM, budeš vedieť používať nástroje ako Webpack a tak ďalej. V kurze je takmer 23 hodín materiálu o modernom JavaScripte, bude to fuška, ale výsledok bude stáť za to. Krok číslo 4: vyber si svoj osud - Vue, React, AngularKeď si zvládol predchádzajúce tri kroky, si pripravný naučiť sa pracovať s mocnými nástrojmi v podobe JavaScript frameworkov alebo knižníc. Aktuálne v roku 2021 sú najviac v kurze Angular, React a Vue. Nemusíš vedieť všetky, radšej jeden a poriadne. Každá z týchto technológií má svoje pre a proti a sú určené na komplexný vývoj frontendových webových aplikácií. Tieto frameworky sú si podobné a pokiaľ sa naučíš jeden, prejsť na iný framework nie je až také náročné. Poďme si teraz veľmi stručne predstaviť spomínané tri frameworky. Angular je vývíjaný spoločnosťou Google, prvýkrát bol vydaný v roku 2010 a je postavený na TypeScripte. Otcom Angularu je Slovák Miško Hevery. V roku 2016 bol predstavený výrazný update tohto frameworku - Angular 2, v rámci ktorého došlo aj k vypusteniu "JS" z názvu. Okrem Googlu samotného používajú Angular weby ako PayPal, Upwork, Microsoft a ďalšie. React je vyvíjaný ďalším gigatnom - Facebookom, ktorý ho okrem iného používa v aplikáciách Instagram či WhatsApp, na Reacte fičia aj weby Netflixu či Uber. Prvý release bol v roku 2013 a ide o JS knižnicu pre vytváranie používateľských rozhraní (UI).  Vue je najmladším JS frameworkom v tomto výbere. Vue za sebou síce nemá žiadnu veľkú firmu, ale tiež je používaný veľkými firmami, napr. Alibaba, Behance alebo GitLab. S príchodom Vue 3 v septembri 2020 prešlo Vue na TypeScript.JavaScript frameworks Angular, React, Vue. [JavaScript frameworks Angular, React, Vue]BONUSGitGit sa používa vo väčšine vývojárskych firiem, čím skôr sa naučíš s Gitom pracovať, tým lepšie pre teba. Git je verziovací systém, vďaka ktorému sa môžeš kedykoľvek vrátiť k pôvodnej verzii svojho kódu, zdieľaš kód s kolegami spolupracovníkmi, pracuješ v tíme. Git ovládaš cez príkazový riadok alebo si nainštaluješ nejaké GUI pre Git. Git ti vlastne ukladá celú históriu tvojho projektu do repozitára. Svoje repozitáre ukladáš na akomsi hostingu - čo môže byť GitHub, GitLab či Bitbucket. TestovanieAk chceš byť úplný kráľ, svoj kód určite aj testuj. Vyhneš sa tak mnohým problémom pri vývoji. Pri JavaScripte sú najpoužívanejšie knižnice pre testovanie Jest, Mocha, Chai. ZáverNezabúdaj, nemusíš dokonale ovládať všetko z vyššie uvedeného. V tomto článku sme sa snažili priniesť ti prierez technológií, ktoré by si mal ovládať, pokiaľ sa chceš stať frontend programátorom. Mohlo by sa zdať, že ich je priveľa a bojíš sa, že to nezvládneš. Pre dodanie sebadôvery si prečítaj tieto príbehy absolventov našich kurzov, ktorí sa rozhodli zmeniť kariéru. Alebo si pozri zopár rozhovorov s absolventami na našom YouTube. Nikdy nie je neskoro začať s programovaním. Keď sa rozhodneš pre vzdelávanie formou online kurzov, najdôležitejšie je vydržať. Držíme ti palce. Kódovaniu zdar!

String je základný dátový typ v programovacích jazykoch. Slúži na uchovanie textu. Ak chceme napísať String tak text vložíme medzi dvojité úvodzovky.  val cesta = "cesta";Vo väčšine prípadov je to dostačujúce. Čo ak do textu chceme nastaviť cestu na súbor ako text. C:\work\tools\__test Musíme ho vložiť do premennej typu String a všetky lomítka zdvojiť - escapnúť.  val cesta = "C:\\work\\tools\\__test";Kotlin má aj pomôcku a tou je Raw String. Na napísanie textu použijem trikrát dvojité úvodzovky na začiatku aj na konci. val cestaRaw = """C:\work\tools\__test"""Raw String nám umožňuje zapísať String na viac riadkov bez nutnosti spájania pomocou +.  Mám text, ktorý chcem napísať na viac riadkov. Čo musím spraviť ak to chcem v jednom Stringu? Všetky časti spojím pomocou + a pridám špeciálnu značku pre nový riadok \n. val text = "1 639,33\n" + "6 540,03\n" + "8179,36\n" + "+2500,04"Pri Raw Stringu len stlačím enter pre nový riadok a pokračujem v písaní. val textRaw = """1 639,33 6 540,03 8179,36 +2500,04"""Tento spôsob ale nie je pekne čitateľný – všetok text mám zasadený na ľavú stranu, lebo nechceme aby sme tam dali napr. taublátor – v pôvodnom textne nebol.  Čo môžeme spraviť je pridať nejaké špeciálnu značku na začiatok riadku, ktorý chcem odsadiť a potom poviem, že všetko na ľavo od značky spolu so značkou považujem len za odsadenie textu. Pridajme značku (hocijakú): val textRaw = """1 639,33 #6 540,03 #8179,36 #+2500,04"""Teraz povieme, že # je špeciálna značka pre odsadenie. val textRaw = """1 639,33 #6 540,03 #8179,36 #+2500,04""".trimMargin("#") A môžeme odsadiť pre lepšiu čitateľnosť: val textRaw = """1 639,33 #6 540,03 #8179,36 #+2500,04""".trimMargin("#")Alebo použijeme default znak oddeľovača, čo je pipe |. val textRaw = """1 639,33 |6 540,03 |8179,36 |+2500,04""".trimMargin()Teraz sa tieto dva Stringy budú rovnať. println("${text == textRaw}") //truePoužitie v reálnej aplikácii Určite by si rád videl príklad z reálnej aplikácie. Jedným z takýchto príkladov by bolo použitie pri písaní Android aplikácie. Presnejšie napríklad pri písaní príkazov pre dopyt na databázu v Room frameworku, ktorý sa používa na zjednodušený prístup k databázam. V Room píšeme takzvané Dao triedy na prístup k databáze. Vezmime si jeden príklad kde chcem napsíať SQL príkaz na vybratie filmov z databázy. @Query("SELECT id, movie_name, genres, directors year FROM MOVIES") suspend fun getAllMovies(): List<MovieShort>Príkaz by si rád napísal na viacero riadkov aby bol lepšie čitateľný. @Query("SELECT id, movie_name, genres, directors year " + "FROM MOVIES") suspend fun getAllMoviesInShortForm(): List<MovieShort>Alebo použiješ Raw String. @Query(""" SELECT id, movie_name, genres, directors year FROM MOVIES """)Určite si vieš predstaviť ako sa ti zlepší čitateľnosť, ak budeš mať zložitejšie select príkazy v kombinácii napríklad s join.