Nový kurz: Vue.js + SPA (single page aplikácie)

napísal , 15 Dec 2018 [ CSS HTML JavaScript jQuery Tutoriály Videá ]

Reaktívne frameworky (Vue, React, Angular) ti pomáhajú programovať svižné UI. Zo statického HTML kódu spravia živú šablónu. Samotnému HTML kódu pridáš pravidlá, a vždy keď príde zmena, sám sa podľa nich upraví.

Môžeš programovať cez komponenty. Vue ti dovolí vymyslieť si vlastné HTML elementy a naprogramovať im výzor a správanie. A keď príde zmena, prehliadač sám vymení len daný komponent, nemusí refreshnúť celú stránku.

Reaktívne frameworky držia UI zosynchronizované s dátami. Ak máš v premennej 3 články, 3 články svietia aj na obrazovke. Ak jeden vymažeš, automaticky zmizne z obrazovky. Zabudni na jQuery selecty, appendy, Vue to spraví za teba.

Tento kurz ťa naučí reaktívne frameworky.
A naučí ťa Vue.js. A single page aplikácie.

🔥 🔥 🎉 Nový kurz kupuj tu Vue.js + SPA (single page aplikácie) 🎉 🔥 🔥

Kupuj, kým je v zľave za 99 eur a uč sa hneď:)
Ako býva zvykom, postupne pridávam videá.
Kým ich nebude 100.

pozri si pár ukážkok z kurzu, ňach máš predstavu, šak nebudeš kupovať len tak, ňe?

Môžem tu vypisovať, kým sa mi prsty neodlomia a neodkráčajú v proteste do západu slnka, ale veď pozri videá. Vieš jak sa hovorí - lepšie raz youtube, ako tisíckrát čítať. Kukaj tú mágiu.


MÔŽEM SA TI S NIEČÍM PRIZNAŤ?

Úprimne? Vue je strašná sranda. A toto zatiaľ vyzerá byť môj najlepší kurz. Ja viem, že to hovoria všetky kapely o každom novom albume. Ale ja nie som kapela. A ja to nehovorím. A teraz to hovorím. Tento sa mi podaril:)

Vytvorím niekoľko mini stránok. Jednu veľkú single page appku. Všetok kód si môžeš stiahnuť. Dostaneš úlohy, na ktorých si Vue precvičíš. Prístup do diskusie. Kopu materiálov na stiahnutie. Pod každým videom je malý článok s ďalším infom. Čiže 100 videí, 100 blogov. Choď do toho. Ja by som išiel.


TAKTO TO BUDE PREBIEHAŤ?

V prvej časti kurzu ťa naučím Vue.js.
Resp. naučím ťa reaktívne frameworky a konkrétne použijem Vue.js.
To znamená, že keby sa po tomto kurze rozhodneš prejsť na React alebo Angular, budeš presne vedieť, čo sa deje.

V druhej časti kurzu vyrobím veľkú stránku.
Prvá časť kurzu bude plná menších príkladov, druhá bude plná jednej veľkej reality. V prvej sa naučíš Vue.js, v druhej ho použijeme a spravíme skutočnú stránku, veľkú Single Page Aplikáciu™.

To sú stránky ako Netflix, Spotify a Gmail.
Ja spravím single page admin rozhranie pre skutočnú stránku.


PREČO VUE?

Malý, rýchly, šikovný, použiteľný bez build tools, raketovo naberá na popularite, najlepší pre začiatočníka pre pochopenie konceptov za reaktívnymi frameworkami, najlepšia vstupná brána do tohoto sveta. A ako bonus, nestojí za ním monolitická korporácia. Angular = Google, React = Facebook.

Ale môj cieľ je znova naučiť ťa Vue tak, že hneď pochopíš aj React alebo Angular, keď sa na ne pozrieš. Tento kurz ťa naučí reaktívne frameworky ako také. A použijem na to Vue.

V mojich kurzoch sa vždy snažím vysvetliť dôvod. Nielen ukázať Vue, ale vysvetliť, čo je jeho pointa. Prečo existuje. Čím je iný ako to, čo sme mali pred ním. Prečo ťa má zaujímať, ak poznáš JavaScript alebo jQuery. Na akých konceptoch stojí a na čo sa hodí.

Pretože vždy existujú alternatívy. Hlavne v JavaScript svete. Ja ťa naučím Vue tak, aby si chápal aj React a Angular. Riešia podobné problémy, len trocha inak. Kód vyzerá inak, ale teba nedostane. Ty budeš chápať, čo ten kód robí a prečo.


ČO POTREBUJEŠ VEDIEŤ?

Potrebuješ základy HTML, CSS a JavaScriptu. Úprimne, Vue.js je jednoduchší ako čistý JavaScript. Po správnosti by som ti mal tvrdiť, že potrebuješ vedieť JS, keď sa chceš učiť framework.

Ale bol by som pokrytec. Ja som sa najprv naučil jQuery, až potom (aj jeho používaním) som sa postupne doučil JavaScript. Toto isté sa tebe môže stať s Vue. Ale HTML potrebuješ určite. A CSS silno pomôže. A potrebuješ mať pojem o programovaní:)

V neskorších videách Vue kurzu budem používať NPM, Module Bundlers a ďalšie JS tools. Ak ich nepoznáš, google ti pomôže vysomáriť sa zo základov. Ak sa to ale chceš naučiť poriadne, mám kurz presne na to.

Ak si nikdy neprogramoval, mám kurz, v ktorom sa síce pracuje v PHP, ale naučí ťa základy programovania. Má to priam v názve.

Prípadne ak poznáš jQuery alebo si videl nejaké tie JS videá z Webrebel 1 kurzu, pokojne môžeš ísť na Vue.

🔥 🎉 Vue.js + SPA (single page aplikácie) online kurz sa dá kúpiť tu za 99 eur. 🎉 🔥

Samozrejme ak máš predplatné, kurz dostaneš automaticky.

  1. Vue preview 01 (ukážem ti Vue.js)
  2. Vue preview 02 (zbúcham rýchlo stránku)
  3. Vue preview 03 (v kurze všetko vysvetlím)
  4. Ako bude kurz prebiehať? Čo ťa naučím? To sú otázky
  5. Výhoda Vue oproti React alebo Angular
  6. Pointa reaktívnych frameworkov, UI == dáta, source of truth

rozbaliť zvyšné epizódy

  1. Ak by som to chcel spraviť v čistom JS (pretože masochizmus)
  2. Čo potrebuješ pre tento kurz? Vedieť, napríklad
  3. Components 01 - programovanie cez komponenty
  4. Vymysli si vlastný HTML element (Components 02)
  5. <slot>, [props], :key (Components 03)
  6. Single File Components, toto chceš! (Components 04)
  7. Scoped Styles, komponent má vlastné CSS (Components 05)
  8. Event a Key modifikátory, progress bar (Components 06)
  9. Jeden ROOT element? Prečo? Otáznik? (Components 07)
  10. Komunikácia komponentov cez $emit (Components 08)
  11. Nemusíš všetko (+ frustrujúce úlohy)
  12. Virtual DOM (Toretto?)
  13. BULMA, pretože prečo nie
  14. v-if, v-show, :class, [disabled]
  15. Computed Properties
  16. Poo
  17. Vue animácie cez komponent
  18. Čo má byť komponent? Tvoja mamka (prečo som to povedal, prepáč, som zlý človek)
  19. v-cloak, prestaň blikať, čo robíš
  20. Vue CLI / GUI / UI / Hui / Dui / Lui / Chui rýchlokurz
  21. CLI 01 Babel, Typescript, PWA (Progressive Web Apps), Router
  22. CLI 02 Vuex, Preprocessing, Unit testing, End-to-End testing
  23. CLI 03 ESLint, Prettier, Linter / Formatter, Vue CLI config
  24. VS Code 01 ESLint
  25. VS Code 02 ESLint + Prettier
  26. VS Code 03 Prettier + Vetur vs. js-beautify-html (pre HTML/Vue šablóny)
  27. Vue Snippety + moje VS Code extensions
  28. Užitočné Vue tools, Evan You a Dragonball a prečo Vue??
  29. Vue NPM verzie "[Vue warn]: You are using the runtime-only build of Vue"
  30. Vue Router (iTunes Single Page App začína)
  31. BUILD script, konzolové servery, všetok kód sa stiahne naraz:(
  32. Lazy Loading, Code Splitting (na neskôr, pre bigass stránky)
  33. Vue filters, iTunes app
  34. Axios, práca s API (konkrétne iTunes)
  35. extractData( object destructuring )
  36. Free APIs a rvem si srcco
  37. Vue Style Guide, pravidlá pre Vue kód, Refactoring 01
  38. Refactoring 02
  39. props / $emit, komunikácia komponentov
  40. Event Bus, komunikácia komponentov, Lifecycle Hooks
  41. Komponent má byť samotár (veľmi romantické)
  42. Externé (S)CSS, google a lokálne fonty
  43. "THE" komponenty
  44. Redizajn (toto video si pusti na pozadí, keď si varíš párky)
  45. Sila samostatnosti komponentov (a čo som ukradol?)
  46. Automatický Sass import + animácia objavenia (sa)
  47. Vlastný helper functions PLUGIN, webpack eslint --fix, SPA autofocus
  48. lodash VS. lodash-es, debounce na hľadanie počas písania
  49. Kedy NIE arrow functions, odsekni písmená (auč) a upratovačky
  50. Vuex 01
  51. Vuex 02 state, mutations
  52. Vuex 03 actions, getters
  53. Vuex 04 čistý kód, väčšie Vuex príklady, rozbehni môj kód
  54. History Mode (a čo pre pána znamená 'single page app'?)
  55. Laravel? Huh??
  56. 1 stránka sú 2 appky, poviem ti čo budeme robiť
  57. Laravel 01 inštalácia, routes, artisan, VS Code pluginy
  58. Laravel 02 controllers, views
  59. Laravel 03 login, register, auth, databáza, migrations
  60. Client-side vs. server-side rendering
  61. ...nové videá stále pribúdajú, kým ich nebude okolo 100;)

učiť sa môžeš už dnes, kurz je live, ďalšie videá postupne pridávam
Edit 18. 12. 2018 2 nové videá + niekoľko úloh
Edit 19. 12. 2018 ďalšia várka šťavnatých úloh
Edit 22. 12. 2018 3 nové videá (PWA, Vuex, Router, ESlint, Prettier atď.)
Edit 10. 01. 2019 4 nové videá (VSCode + Extensions)
Edit 14. 01. 2019 4 ďalšie
Edit 15. 01. 2019 ešte novšie 4
Edit 16. 01. 2019 6 ďalších
Edit 22. 01. 2019 8 nových videí
Edit 30. 01. 2019 4 nové (o Vuex)
Edit 05. 02. 2019 1 nové (o History Mode)
Edit 09. 02. 2019 6 nových (Laravel + Vue)

Ak chceš nové info o všetkom, choď na facebook.com/yablko.smrdi.
Ak chceš ďalšie moje videá, choď na youtube.com/yablko.
Ak chceš všetky kurz na rok, skús predplatné.
Ak sa ti kurz páči, povedz každému:)

napísal , 15 Dec 2018

10 komentárov

komentuj ku každému komentáru sa v databáze ukladá iba meno, text a dátum, iba za účelom zobrazenia pod článkom
neukladá sa email, IP adresa ani informácie o prehliadači a údaje sa nepoužívajú na reklamu, newsletter, na žiadnu ekonomickú aktivitu, nikam sa neposielajú, sú v databáze len aby sa mohli zobraziť pod článkom
  1. yablko [ Sobota 22.12.2018, 13:46 ]

    3 nové videá (PWA, Vuex, Router, ESlint, Prettier atď.)

    27 CLI 01 Babel, Typescript, PWA (Progressive Web Apps), Router
    28 CLI 02 Vuex, Preprocessing, Unit testing, End-to-End testing
    29 CLI 03 ESLint, Prettier, Linter / Formatter, Vue CLI config

  2. yablko [ Štvrtok 10.1.2019, 19:54 ]

    4 nové videá

    30 VS Code 01 ESLint
    31 VS Code 02 ESLint + Prettier
    32 VS Code 03 Prettier + Vetur vs. js-beautify-html (pre HTML/Vue šablóny)
    33 Vue Snippety + moje VS Code extensions

  3. yablko [ Pondelok 14.1.2019, 20:59 ]

    4 nové

    34 Užitočné Vue tools, Evan You a Dragonball a prečo Vue??
    35 Vue NPM verzie "[Vue warn]: You are using the runtime-only build of Vue"
    36 Vue Router (iTunes Single Page App začína)
    37 BUILD script, konzolové servery, všetok kód sa stiahne naraz:(

  4. yablko [ Utorok 15.1.2019, 12:45 ]

    a 4 ešte novšie

    38 Lazy Loading, Code Splitting (na neskôr, pre bigass stránky)
    39 Vue filters, iTunes app
    40 Axios, práca s API (konkrétne iTunes)
    41 extractData( object destructuring )

  5. yablko [ Streda 16.1.2019, 17:17 ]

    5 ďalších

    42 Free APIs a rvem si srcco
    43 Vue Style Guide, pravidlá pre Vue kód, Refactoring 01
    44 Refactoring 02
    45 props / $emit, komunikácia komponentov
    46 Event Bus, komunikácia komponentov, Lifecycle Hooks

  6. yablko [ Streda 16.1.2019, 20:12 ]

    ešte jeden

    47 Komponent má byť samotár (veľmi romantické)

  7. yablko [ Utorok 22.1.2019, 16:16 ]

    8 nových videí

    48 Externé (S)CSS, google a lokálne fonty
    49 "THE" komponenty
    50 Redizajn (toto video si pusti na pozadí, keď si varíš párky)
    51 Sila samostatnosti komponentov (a čo som ukradol?)
    52 Automatický Sass import + animácia objavenia (sa)
    53 Vlastný helper functions PLUGIN, webpack eslint --fix, SPA autofocus
    54 lodash VS. lodash-es, debounce na hľadanie počas písania
    55 Kedy NIE arrow functions, odsekni písmená (auč) a upratovačky

  8. yablko [ Streda 30.1.2019, 12:26 ]

    4 nové o VUEX

    56 Vuex 01
    57 Vuex 02 state, mutations
    58 Vuex 03 actions, getters
    59 Vuex 04 čistý kód, väčšie Vuex príklady, rozbehni môj kód

  9. yablko [ Utorok 5.2.2019, 15:51 ]

    nové video

    60 History Mode (a čo pre pána znamená 'single page app'?)

  10. yablko [ Sobota 9.2.2019, 20:39 ]

    6 nových videí začína laravel + vue

    61 Laravel? Huh??
    62 1 stránka sú 2 appky, poviem ti čo budeme robiť
    63 Laravel 01 inštalácia, routes, artisan, VS Code pluginy
    64 Laravel 02 controllers, views
    65 Laravel 03 login, register, auth, databáza, migrations
    66 Client-side vs. server-side rendering

ku každému komentáru sa v databáze ukladá iba meno, text a dátum, iba za účelom zobrazenia pod článkom
neukladá sa email, IP adresa ani informácie o prehliadači a údaje sa nepoužívajú na reklamu, newsletter, na žiadnu ekonomickú aktivitu, nikam sa neposielajú, sú v databáze len aby sa mohli zobraziť pod článkom