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 frontened developera. Frontend developer vs backend developer vs fullstack developerFrontend developer, frontenďák je človek, ktorý je zodpovedný za časti webovej aplikácie alebo webstránky, ktoré používatelia vidia a interagujú s nimi. Backend developer je človek, ktorá má na starosti všetko to, čo človek nevidí - infraštruktúra, dátový model, databáza. No a potom je tu full-stack developer, ktorý je zmesou frontendu aj backendu a zvládne celý proces návrhu webovej aplikácie od začiatku do konca. Pomôžme si týmto meme pre lepšiu vizualizáciu:[Programátorské meme]V dnešnej dobe sa dosť stiera hranica medzi frontendom a backendom. Je to kvôli tomu, že čoraz viac úloh, ktoré spadajú do oblasti backendu, majú na starosti frontend vývojári. Frontend developer robí najmä tieto úlohy: • rozhoduje o dizajne a štruktúre webstránok, • vyvíja funkcie na dosiahnutie dobrej používateľskej skúsenosti (user experience), • dbá na responzivitu webstránky, • optimalizuje webstránku pre rýchle načítanie a škálovateľnosť v budúcnosti, • volí správnu kombináciu webových technológií pre dosiahnutie najlepšieho výsledku. Zručnosti front-end developeraDobrý frontenďák je na nezaplatenie. Doslova. Pri vývoji webstránok či aplikácií je nesmierne dôležitý a musí preto mať komplexné znalosti nielen z oblasti vývoja webu: • ovládať technológie ako HTML, CSS, JavaScript a ďalšie (čítaj ďalej v článku), • ak vie pracovať s nejakým grafickým softwarom ako napr. Photoshop, Sketch alebo Illustrator, je to veľké plus, • základné znalosti SEO, • dobré komunikačné znalosti, lebo veľa komunikuje s kolegami (grafik, backend developer, projektový manažér, klient), • nezľakne sa problémov a vie ich riešiť. Mzda frontend developeraPodľa portálu platy.sk na Slovensku zarába JavaScript developer (prečo sme vybrali práve pozíciu JavaScript developer sa dozvieš nižšie v článku) od 1.300 Eur až po 2.900 Eur. Záleží od počtu rokov praxe, skúseností, projektoch na akých si už pracoval a tak ďalej. Dobrých JavaScript developerov firmy stále hľadajú, takže keď naskočíš na vlak frontend  developmentu, o prácu budeš mať postarané.[Image] JavaScript je aj extrémne populárny, podľa RedMonk rebríčka je JavaScript číslo 1 čo sa týka popularity na GitHube a Stack Overflow. Keď pohľadáš aj otvorené pozície napr. na Profesii, vyhodí ti to stovky pozícií JavaScript či frontend programátora. A keď si do svojho LinkedIn profilu doplníš, že ovládaš JavaScript a k tomu nejaký JavaScript framework, inbox ti vybuchne od ponúk rôznych IT recruiterov. Poď na to a pozri si návod, ako sa stať frontend programátorom. 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] 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] 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.