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.
Po tomto kurze budeš chápať aj Angular/React, naučím ťa princípy.

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

Kupuj, kým je v zľave za 99 eur (alebo v rámci predplatného) a uč sa hneď:)
Ako býva zvykom, postupne pridávam videá.
Kým ich nebude 100. (Možno 150.)

Edit: Ok, kurz je hotový.
142 videí. 17 hodín. 27 minút.

Samozrejme kurz je tiž súčasťou predplatného.

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. Laravel 6 / 01 laravel UI a HELPERS package
  95. Laravel 6 / 02 frontend v Laravel 5 vs 6 + ako inštalovať inú verziu
  96. Laravel 6 / 03 novinky, vylepšenia, Ignition errors
  97. Laravel 6 / 04 update na Laravel 6.0 + ako vymazať Telescope
  98. Takýto ADMIN PANEL budeme vyrábať! JUJ!
  99. 98 Smooth scroll k elementu a VERY SORRY
  100. 99 Vue a Laravel Admin Panely, Dashboardy a CMSká
  101. 100 Admin panel frontend kostra
  102. ADMIN PANEL Vue Router
  103. Admin Panel šťavnatý BULMA.CSS dizajn
  104. Cez API ťahám Posty, API controllers, API routes
  105. Dáta čo prišli z API nakreslím do tabuľky či troch
  106. Lazy Loading a import() a zisti, či je žiadosť AJAXová
  107. Auto reload, Hot Module Replacement
  108. Vyhľadávanie v Posts, filtrovanie tabuľky
  109. VUE WATCHERS a search component
  110. VUE MIXINS a reusable kód pre komponenty
  111. Transformuj dáta na polceste z DB do JSONu (a taktiež vzťahy)
  112. Moment.js pre pekné dátumy v JS (a v našej tabuľke)
  113. MATERIAL DESIGN ikonky v BULME pre EDIT LINKY do tabuľky
  114. Podstránka pre konkrétny POST (a Resource všeobecne)
  115. Pekné EDITAČNÉ LINKY pre Resource podstránky
  116. Admin podstránka pre KOMENTÁR (a upratovacie práce)
  117. REDIRECT cez router, 404 NOT FOUND a dôležitosť STATUS kódov
  118. Mažeme cez API, API status kódy a mesidže
  119. 118 ROUTER-LINK namiesto šupáckych linkov pre šupákov
  120. 119 CREATE FORM formulár pre pridanie nového postu
  121. 120 SLUG sa AUTOMATICKY vytvára počas písania
  122. 121 AUTH vs API AUTH, len prihlásenec sa dostane do admin panelu
  123. 122 Uložíme nový post do DB a všetko bude krásne
  124. 123 VALIDÁCIA 01: na strane servera
  125. 124 VALIDÁCIA 02: na strane VUE, inputy sa budú červenať
  126. Computed property ZRADA (vyfintím slug)
  127. TRIX wysiwyg EDITOR
  128. Zmena na ZNOVU-POUŽITEĽNÝ formulár - reusable, bitches!
  129. EDIT FORM 01: predvyplníme hodnoty (aj trixu)
  130. EDIT FORM 02: zajepíšeme zmeny do databázy
  131. API AUTH, TOKENY, prečo, DDOS, middleware, RATE LIMITING
  132. API AUTH cez jednoduchý API TOKEN 01
  133. BEARER TOKEN, api auth cez jednoduchý API TOKEN 02
  134. JWT, JSON WEB TOKEN, OAUTH
  135. HASHED tokeny (pre verejné API)
  136. + a - SPA appiek a ZÁVER KURZU AHOJ ČAU SRANDA BOLA

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)
Edit 03. 10. 2019 8 nových! (Laravel 6 + admin panel cez VUE SPA)
Edit 28. 10. 2019 17 nových!! (VUE SPA/API admin panel)
Edit 08. 11. 2019 7 nových (SPA)
Edit 10. 11. 2019 5 nových
Edit 07. 12. 2019 6 nových (KURZ JE DONE!!)

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

16 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

Archivovaný archív je bez komentárov. Radšej.