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. Ukážka: toto bude nasledovať (predtým ESLint atď.)
  25. VS Code 01 ESLint
  26. VS Code 02 ESLint + Prettier
  27. VS Code 03 Prettier + Vetur vs. js-beautify-html (pre HTML/Vue šablóny)
  28. Vue Snippety + moje VS Code extensions
  29. Užitočné Vue tools, Evan You a Dragonball a prečo Vue??
  30. Vue NPM verzie "[Vue warn]: You are using the runtime-only build of Vue"
  31. Vue Router (iTunes Single Page App začína)
  32. BUILD script, konzolové servery, všetok kód sa stiahne naraz:(
  33. Lazy Loading, Code Splitting (na neskôr, pre bigass stránky)
  34. Vue filters, iTunes app
  35. Axios, práca s API (konkrétne iTunes)
  36. extractData( object destructuring )
  37. Free APIs a rvem si srcco
  38. Vue Style Guide, pravidlá pre Vue kód, Refactoring 01
  39. Refactoring 02
  40. props / $emit, komunikácia komponentov
  41. Event Bus, komunikácia komponentov, Lifecycle Hooks
  42. Komponent má byť samotár (veľmi romantické)
  43. Externé (S)CSS, google a lokálne fonty
  44. "THE" komponenty
  45. Redizajn (toto video si pusti na pozadí, keď si varíš párky)
  46. Sila samostatnosti komponentov (a čo som ukradol?)
  47. Automatický Sass import + animácia objavenia (sa)
  48. Vlastný helper functions PLUGIN, webpack eslint --fix, SPA autofocus
  49. lodash VS. lodash-es, debounce na hľadanie počas písania
  50. Kedy NIE arrow functions, odsekni písmená (auč) a upratovačky
  51. Vuex 01
  52. Vuex 02 state, mutations
  53. Vuex 03 actions, getters
  54. Vuex 04 čistý kód, väčšie Vuex príklady, rozbehni môj kód
  55. History Mode (a čo pre pána znamená 'single page app'?)
  56. Laravel? Huh??
  57. 1 stránka sú 2 appky, poviem ti čo budeme robiť
  58. Laravel 01 inštalácia, routes, artisan, VS Code pluginy
  59. Laravel 02 controllers, views
  60. Laravel 03 login, register, auth, databáza, migrations
  61. Client-side vs. server-side rendering
  62. Ako rozbeháš stiahnutý kód (+ Laravelu bude o kúsok viac)
  63. Laravel/Composer update a čo bude ďalej (v kurze, nie živote)
  64. Master layout a Config súbory
  65. nice (Vue a frontend v Laraveli)
  66. Databáza, migrácie
  67. Modely, kolekcie, z databázy na stránku, juj!
  68. Vzťahy medzi modelmi, auto dopĺňanie 'use'
  69. FAKER (laravel sám naplní databázu, DB SEED)
  70. Usporiadanie dát z databázy, @include šablóny
  71. Escaping, JS frameworky v Laraveli, pluralizácia textu
  72. CRUD, REST, Resource controllers
  73. Podstránka pre kontkrétny článok cez PostController
  74. Fajné formátovanie dátumu cez Carbon... a komentáre!
  75. Cibri™ si vkus
  76. @guest @auth / login / logout / register
  77. Form pre koment, hlavná navigácia, named routes a route()
  78. Form problém 01 CSRF (Cross Site Request Forgery)
  79. Form problém 02 Mass Assignment Exception, odoslanie formu
  80. Uloženie do DB cez vzťah, usporiadanie vzťahov
  81. Validácia formuláru, výpis chýb, lepšie zabezpečenie formu
  82. SLUG v adrese pre lepšie SEO, unique index v DB cez migrate
  83. Debug cez Laravel TELESCOPE, efektívne SQL cez EAGER LOADING vzťahov
  84. Vue FlashMessage komponent
  85. Session, Laravel flash message
  86. Prechod na ES6 import syntax, ESLint a Prettier sú späť
  87. Vue inline-templates
  88. Edit a delete linky, doubleclick, blur, contenteditable
  89. Práva usera, Authorization Policy, @can, iba autor môže zmazať koment
  90. Editácia a mazanie cez AXIOS ajax (aj bez neho)
  91. Polish time! (Poľský čas!) Dokončím úpravy, vyladím mazanie
  92. Vyladím edit komentu, autovyznačím text a blur vráti pôvodný
  93. Flash notifikácia po (ťažko úspešnom) edite a delete
  94. ...nové stále pribúdajú...;)

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)
Edit 12. 05. 2019 32! nových videí (Laravel blog + Vue komponenty)

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

11 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

  11. yablko [ Nedeľa 12.5.2019, 11:52 ]

    32 nových videí!
    komplet blog cez laravel (prihlasovanie, komentáre, ...)
    oživenie, zajaxovanie cez vue komponenty

    Ako rozbeháš stiahnutý kód (+ Laravelu bude o kúsok viac)
    67 Laravel/Composer update a čo bude ďalej (v kurze, nie živote)
    68 Master layout a Config súbory
    69 nice (Vue a frontend v Laraveli)
    70 Databáza, migrácie
    71 Modely, kolekcie, z databázy na stránku, juj!
    72 Vzťahy medzi modelmi, auto dopĺňanie 'use'
    73 FAKER (laravel sám naplní databázu, DB SEED)
    74 Usporiadanie dát z databázy, @include šablóny
    75 Escaping, JS frameworky v Laraveli, pluralizácia textu
    76 CRUD, REST, Resource controllers
    77 Podstránka pre kontkrétny článok cez PostController
    78 Fajné formátovanie dátumu cez Carbon... a komentáre!
    79 Cibri™ si vkus
    80 @guest @auth / login / logout / register
    81 Form pre koment, hlavná navigácia, named routes a route()
    82 Form problém 01 CSRF (Cross Site Request Forgery)
    83 Form problém 02 Mass Assignment Exception, odoslanie formu
    84 Uloženie do DB cez vzťah, usporiadanie vzťahov
    85 Validácia formuláru, výpis chýb, lepšie zabezpečenie formu
    86 SLUG v adrese pre lepšie SEO, unique index v DB cez migrate
    87 Debug cez Laravel TELESCOPE, efektívne SQL cez EAGER LOADING vzťahov
    88 Vue FlashMessage komponent
    89 Session, Laravel flash message
    90 Prechod na ES6 import syntax, ESLint a Prettier sú späť
    91 Vue inline-templates
    92 Edit a delete linky, doubleclick, blur, contenteditable
    93 Práva usera, Authorization Policy, @can, iba autor môže zmazať koment
    94 Editácia a mazanie cez AXIOS ajax (aj bez neho)
    95 Polish time! (Poľský čas!) Dokončím úpravy, vyladím mazanie
    96 Vyladím edit komentu, autovyznačím text a blur vráti pôvodný
    97 Flash notifikácia po (ťažko úspešnom) edite a delete

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