webdesign / development + awesome
JavaScript a ES6 (masívny kurz)
JavaScript je najpopulárnejší jazyk súčasnosti.
Má najživšiu vývojársku komunitu, o pracovné ponuky nie je núdza.
React, Angular, Vue a Node patria medzi najžiadanejšie technológie.
Všetky z nich vyžadujú moderný JavaScript.
Tento kurz ťa naučí moderný JavaScript.
Je to veľký kurz.
Môžeš si ho kúpiť už teraz, videá doň stále pribúdajú.
Na konci ich bude cez 100.
Teraz ho máš za 129 eur. Zdarma ak máš predplatné.
Plná cena, po dokončení všetkých videí, bude 179 eur.
Nový Webrebel kurz kupuj tu: JavaScript a ES6
pozri si pár drobných ukážok z úvodu, ňach máš predstavu
JAVASCRIPT
JavaScript začal ako skriptovací jazyk v prehliadači.
Slúžil na overenie, čo si správne vyplnil formulár.
Dnes toho zvládne oveľa viac. Vieš ním:
- čítať, upravovať a mazať HTML a CSS
- reagovať na udalosti v prehliadači
- reagovať na akcie používateľa
- ovládať prehliadač samotný
- robiť tak stránky interaktívnymi a meniť ich na aplikácie
Dnes JavaScript existuje aj mimo prehliadača. Node.js ti dovolí jazykom JavaScript programovať server, tým pádom JavaScript dnes vie nahradiť aj PHP, Ruby či Python. Ak sa zameriaš na JavaScript, nebudeš potrebovať žiaden iný programovací jazyk na vytvorenie plnohodnotnej webovej aplikácie.
Tento online kurz sa venuje JavaScriptu v prehliadači. Na skutočných príkladoch sa naučíš syntax a pravidlá jazyka, ktoré platia všade, aj keby neskôr skočíš na server.
Na konci budeš vedieť JavaScript používať v prehliadači aj bez knižníc ako jQuery. Ale hlavne sa naučíš písať dosť moderného JavaScriptu na to, aby si vedel používať Angular, React, Node, Vue a čokoľvek ďalšie, čo príde v budúcnosti.
JAVASCRIPT A ES6
Prvá polovica online kurzu ťa oboznámi s jazykom na menších príkladoch. Dám ti tiež kopu praktických rád pre prácu s Developer Tools v prehliadači. A pochopíš, čím sa JavaScript líši od iných programovacích jazykov. JavaScript sa svojou syntaxou tvári ako bežný OOP jazyk. Ale to iba, beťár, klame telom. V skutočnosti je oveľa divnejší. Ale ako uvidíš, nemá sa za čo hanbiť.
Druhá polovica sa venuje ES6, tzv. modernému JavaScriptu. Modulom, bundlerom, package manažérom. Všetko veci, ktoré potrebuješ zvládnuť pre Angular či React. Tieto technológie samozrejme nemusíš používať, ale po tomto kurze na ne budeš pripravený. Naučíš sa:
- syntax a pravidlá jazyka JavaScript
- JavaScript v prehliadači
- moderný ES6/ES7 JavaScript
- npm / yarn
- skrotiť Document Object Model
- zvládnuť Event Loop
- SVG animácie
- Webpack / Babel
- ES6 moduly
- asynchrónne programovanie, async/await, promises
- kopu iného
POTREBUJEM TO, AK MÁM WEBREBEL 1?
Prvý Webrebel ti dal intro do JavaScriptu. Ale bol zameraný na knižnicu jQuery, dostal si úvod do AJAXu a robili sme hlavne animácie. Tu nepoužívame žiadnu knižnicu, iba čistý jazyk JavaScript.
A hlavne postupne prejdeme na jeho modernú verziu, ES6/ES2015 a ďalej.
Keď k tomu prihodíme module bundlers a transpilers, JavaScript dnes vyzerá inak, ako pred pár rokmi.
Webpack, Babel, Moduly, práca s terminálom.
Uvidíš tu všetky veci, ktoré potrebuješ, ak chceš používať Angular, React alebo Vue.
Všetko veci, ktoré v prvom Webrebelovi neboli.
Po tomto kurze spravím kurz na Vue.js. Podobne ako React alebo Angular ti pomáha s UI, hlavne pri single page stránkach a "reaktívnych" aplikáciách. Predstav si veci ako Netflix, Trello alebo Spotify. Tento JavaScript a ES6 kurz ťa na to pripraví.
Tento kurz počíta s tým, že HTML a CSS máš zmáknuté. Ak si úplný začiatočník, choď najprv do Webrebel 1 videí o HTML a CSS, ktoré sú mimochodom zdarma :)
JavaScript a ES6 sa dá kúpiť tu za 129 eur.
179 po dokončení.
- JavaScript, kto je to?
- JavaScript, pekný je, ale čo sa s ním dá robiť?
- Dám ti knihy od múdrejších ľudí, MDN = áno
- Prvý kód a prvotriedne funkcie()
- Devtools break/point callStack (anonymné funkcie())
- Event {object} console.log Devtools beforeunload
- Šaháme na CSSko, lietame šípkami
- Install #1 Node, npm, package manažéri, Terminal
- Install #2 Textové editory, Sublime nastavenia, JS package
- Install #3 Lepšie dopĺňanie kódu cez Tern.js
- Devtools je plný klenotov, Audits, JS a CSS láska
- Click na mašinu, String vs Number, Type Coercion
- Kolekcia na pole, NodeList vs Array, poľná frustrácia
- DOM Polyfill Shim, si sochár, vyhadzuj kód veselo
- _lodash, externé knižnice, otherDude
- localStorage - ako cookies, len sexy
- JSON formát, náš kamarát, v localStorage
- localStorage limitácie a kde sa používa naozaj
- JSON, tučné triky v Devtools konzole
- Default operátor || "všetko je fajn, keď mám funkciu"
- Document vs. Window object, globálne premenné, JS environment
- MODULE PATTERN #1 anonymné IIFE, local function scope
- MODULE PATTERN #2 fun Declaration vs. Expression, Hoisting
- Ak začínaš + ktorý jazyk si vybrať (či neskoro na takú otázku?)
- Špecialitky #1 JavaScript wat
- Špecialitky #2 Začiatky JS, ECMAScript, Node.js, V8
- Špecialitky #3 JS dnes, JS nemá Classy, letmý stret s Prototypom
- Špecialitky #4 Elegantný kód, Java vs JavaScript
- Špecialitky #5 String, Number, Math.object()
- Špecialitky #6 NaN a Infinity, číselné kuriozity (to sa rýmuje)
- Špecialitky #7 Truthy/Falsy && Coercion|| == vs === comedy !!
- Špecialitky #8 Premenné, Hoisting, Scope, for a VAR vs. LET
- Špecialitky #9 {object} [array] prototype, srandy s FOR cyklom
- Špecialitky #10 funkcie() expression/stmnt, arguments.obj(), hodnota this
- Špecialitky #X-II funkcie() call/apply, "konštruktor" cez new
- 'use strict', buď na mňa BDSM
- SVG formát, SVG HTML element, vektory sú tvoj kamarát
- SVG atribúty, smeksi animácie, appky a galérie SVG ikoniek
- SVG v HTML, aký máš dlhý a nebuď deprecated
- Keď píšem do inputu, SVG kruh sa vypĺňa jak treba
- Ja som mal trojku z matiky, čo sa bojíš
- Točíme kruh, už sa hráme s farbami, dočkal si sa, juch
- Classlist.toggle(), SVG stroke zdedil farbu z color
- SVG + CSS3 bounce animácia, máme spinner jak nišť
- Kompatibilitititalita s vieš čím, finálne SVG slová, úlohy
- Úvod do ES6 alebo ES2015, pretože je to to isté ale ES6 je kratšie
- Tvoj prvý ES6 kód (...rest, => fun, class)
- Ešte stále tvoj prvý ES6 kód (default params, method(), BABEL)
- NPM a rozprávka o moduloch, sadnite si deti
- NPM, Code Reuse, Modul vs Package, [n]ode [p]ackage [m]anager
- NPM, konzolový rýchlokurz, local vs global inštalácia
- NPM init, package.json súbor, sladké dependencies
- NPM, node_modules, koľko ti zaberá? pošli mi tvoj package
- NPM, devDependencies, Production vs Development prostredie
- (npm) BABEL, moderný kód v starých prehliadačoch, Babel pluginy
- (npm) BABEL, ES2015+/ES6+ polyfill veď, watcher
- (npm) BABEL, transpiller, večná súčasť života nášho
- ES6/01 ES6 v zmysle ES2015+
- ES6/02 Arrow => functions(1)
- ES6/03 Arrow functions(2) => pravidlá pre this
- ES6/04 Arrow functions(3) nemá this => non-binding this
- ES6/05 { block scope } 01 let, hoisting, implicit/explicit block
- ES6/06 { block scope } 02 let v cykloch, async programovanie
- ES6/07 CONST vs. VAR vs. LET, style guides
- ES6/08 Object Literal Extensions, objekty sú fajn a teraz ešte viac
- ES6/09 Object destructuring / Destructuring assignment
- ES6/10 ...rest / spread... parametre
- ES6/11 Default parameters vs. Default operator
- ES6/12 Template `Strings`, Smart Strings
- ES6/13 Novinky v String / Number / Math
- ES6/14 Novinky v Array
- ES6/15 Iterators, nový FOR...OF cyklus
- ES6/16 Generator functions* 1
- ES6/17 Generator functions* 2, idGenerator
- ES6/18 Promises 01 - AJAX, len lepšie (teória)
- ES6/19 Promises 02 - timer cez sľub, all, race (prax)
- ES6/20 Asynchrónne programovanie, ASYNC/AWAIT (teória)
- ES6/21 ASYNC/AWAIT (prax), callback hell choď preč
- ES6/22 SET (ako pole, kde každá hodnota je unikát)
- ES6/23 MAP (ako objekt, kde kľúč môže byť aj ne-string)
- ES6/24 Symbol (nový dátový typ)
- ES6/25 Getters, Setters
- ES6/26 Proxies, sprav si špióna, zostaneš čistý
- ES6/27 Chuťovky z budúcnosti, Exponentiation, UNICODE, viac
- ES6/28 Class, extends, super()
- ES6 Modules 01, rozbi kód na súbory
- ES6 Modules 02, z Patternu na Modul
- ES6 Modules 03, IMPORT / EXPORT
- ES6 moduly zatiaľ pomalé, prepáč
- Vue.js appka 01: reaktívny kód
- Vue.js appka 02: reaktívne elementy
- Vue.js appka 03: animácie
- Email obfuscation, skry ho pred robotom;)
- Efektívny kód, async/defer
- link="preload" prefetch preconnect, daj súborom prioritu
- Performance 01 / ako spúšťať menej kódu, Progress Indicator 01
- Performance 02 / Progress Indicator 02
- Performance 03 / odmeraj si FPS (lebo chceš 60fps a nemáš)
- Throttle
- Debounce (video 100, ha!)
- DevTools PerfTools (zmákni Performance Tab v DevTools)
- Rendering / Painting / Scripting / Reflow / Layout v prehliadači
- Ako nájsť BOTTLENECK v kóde cez Performance Tools
- Svižné animácie 01 / ScaleX brácho
- Svižné animácie 02 / žiadny PAINT cez TRANSFORM
- Svižné animácie 03 / oklam oko cez EASING
- Top/Left vs CSS transform (gule nablýskané)
- Compositing
- Čo môžeš a NESMIEŠ meniť, ak chceš rýchle animácie
- will-change
- DOM výkon 01 / odmeraj si koľko ti trvá (kód)
- DOM výkon 02 / prvý veľký performance test
- DOM výkon 03 / 5 spôsobov rýchlej DOM manipulácie
- requestAnimationFrame (a nie setTimeout/setInterval)
- requestAnimationFrame - zosynchronizuj sa s monitorom
- setInterval vs setTimeout vs rAF (kedy ktorý? jeden nikdy)
- Multithreading, buď vláčna, vláknatá
- Web Workers 01
- Web Workers 02, sieťový roboš
- Micro Tasks (rozbi masívny náklad na kúsky)
- 121 269 tipov pre rýchly JavaScript
- 122 Ďalších 167 tipov pre rýchly JavaScript
- 123 Animačné knižnice
- 124 anime.js
- 125 Posledný trik a finále JS efektivity
- Používam BUNDLER, kradnem z Redditu 01
- Používam BUNDLER, kradnem z Redditu 02
- Čo je MODULE BUNDLER? PARCEL vs WEBPACK
- Užitočné NPM package, tvoj švédsky stôl technológií, nažer sa
- PARCEL WORKFLOW 01 sass, babel, autoprefix
- PARCEL WORKFLOW 02 postcss-uncss, build
- BUILD STEP, DEV vs PRODUCTION server, Document Root
- YARN vs NPM
- JavaScript frontend 2018, toto všetko musím vedieť? Spoiler: NIE
- yarn outdated, upgrade-interactive, package.json ~verzie
- Návrh nového projektu, Vanilla Dudes, Class pre formuláre
- Form.js Getters/Setters, žiadne bodkočiarky??
- EVENT DELEGATION
- Create new dude, z Formu do DOMu
- Validácia, HTML5 dataset
- Z JSONu do stránky, default parameters
- Môj proces™, ako som to spravil naozaj, každý je iný #verydeep
- NPM ako TASK RUNNER 01 (Grunt, Gulp)
- NPM ako TASK RUNNER 02, nepotrebuješ Grunt/Gulp
- NPM ako TASK RUNNER 03, NPM je tvoj BUILD TOOL
- WEBPACK
- WEBPACK 4+ zero config - bundling ÁNO, konfigurák NIE
- WEBPACK config file, source maps, cache busting
- WEBPACK plugins, CleanWebpackPlugin, HtmlWebpackPlugin
- WEBPACK config pre DEV a PRODUCTION, Webpack DEV SERVER
- WEBPACK loaders 01, babel, regex, config generátory
- WEBPACK loaders 02, Sass, CSS, style
- WEBPACK extract CSS to file, CleanCSS, PostCSS, PurifyCSS
- WEBPACK img/file loaders, obrázky, CHUNKHASH vs HASH
- Webpack TREE SHAKING (automaticky vysekne nepoužívaný JS kód)
- Náš kód je prerastené prasa, ale taký je život (+ ENV variables)
- WEBPACK ezoterično (Hot Module Replacement, ImageOptim a tak)
- jQuery je mŕtve? Sám si! (pozor: padnú nadávky, rúham sa)
- WEBPACK Visualizer
- JavaScript špecialitky #2, stiahni si moje šťavnaté PDF
- Nečakané CSS tipy a takmer že až programátorské rady
- CLOSURES
- Ukradni mi dáta z kurzov, vypočímatematikuj priemernú dĺžku videí
- PROTOTYPE
- 3 spôsoby ako zadeliť DEDIČNOSŤ v JS
- OLOO vs ES6 Class
- Vlastný NPM package, Maštalizátor 01
- Vlastný NPM package, Maštalizátor 02
- Vlastný NPM package, Maštalizátor 03, NPM PUBLISH, Tomáš žije
- 170 Sme tu, sme povznesení
Do zoznamu postupne pridávam každú novú várku videí.
Edit 17.12.2017, 2 nové videá
Edit 18.12.2017, 4 nové videá
Edit 21.12.2017, 9 nových videí
Edit 30.12.2017, 3 nové... zadania plné domácich úloh;)
Edit 31.12.2017, 4 nové zbierky domácich, dokopy máš 24 úloh
Edit 15.01.2018, 3 nové videá, ES6
Edit 20.01.2018, 6 nových videí, BABEL / NPM
Edit 21.01.2018, 3 nové videá
Edit 13.02.2018, 4 nové (es6)
Edit 14.02.2018, 8 nových (69, nice)
Edit 24.02.2018, 5 nových
Edit 19.03.2018, 11 nových videí
Edit 23.03.2018, 3 nové (es6 časť kurzu done!)
Edit 22.06.2018, 15 nových (vuejs! performance!)
Edit 21.07.2018, 17 nových videí
Edit 23.07.2018, 5 nových
Edit 17.08.2018, 45 nových;) kurz je DONE, 170 videí
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:)
20 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ánkomneukladá 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
Michal [ Nedeľa 17.12.2017, 11:48 ]
Díky! Díky Webrebelu má předplatné lear2code smysl :)
yablko [ Nedeľa 17.12.2017, 18:25 ]
dík:)
...a pridal som 2 videá
31. Špecialitky #7 Truthy/Falsy && Coercion || == vs === comedy !!
32. Špecialitky #8 Premenné, Hoisting, Scope, for a VAR vs. LET
Jozef [ Pondelok 18.12.2017, 10:03 ]
Zdravím vás, je kurz aj pre úplného začiatočníka? Chcel som začať s WEBREBEL 1 , ale to by menilo situáciu. Díík
Jozef [ Pondelok 18.12.2017, 10:14 ]
Mysle som že nemám ani šajnu o HTML a CSS
yablko [ Pondelok 18.12.2017, 19:39 ]
čau, určite by si najprv mal ísť do Webrebel 1
tento nový je pokročilejší a počíta s tým, že html a css dobre poznáš
( a pozri sem https://brm.sk/770/webrebel-html-css-kurz-zdarma )
...
a 4 nové videá
33 Špecialitky #9 {object} [array] prototype, srandy s FOR cyklom
34 Špecialitky #10 funkcie() expression/stmnt, arguments.obj(), hodnota this
35 Špecialitky #X-II funkcie() call/apply, "konštruktor" cez new
36 'use strict', buď na mňa BDSM
yablko [ Štvrtok 21.12.2017, 18:10 ]
9 nových
37 SVG formát, SVG HTML element, vektory sú tvoj kamarát
38 SVG atribúty, smeksi animácie, appky a galérie SVG ikoniek
39 SVG v HTML, aký máš dlhý a nebuď deprecated
40 Keď píšem do inputu, SVG kruh sa vypĺňa jak treba
41 Ja som mal trojku z matiky, čo sa bojíš
42 Točíme kruh, už sa hráme s farbami, dočkal si sa, juch
43 Classlist.toggle(), SVG stroke zdedil farbu z color
44 SVG + CSS3 bounce animácia, máme spinner jak nišť
45 Kompatibilitititalita s vieš čím, finálne SVG slová, úlohy
SVG + animácie
yablko [ Nedeľa 31.12.2017, 10:49 ]
včera 3 nové... zadania plné domácich úloh;)
dnes 4 nové... zbierky domácich!
si sa tešil, jak na nový rok pridám nové videá
ale keďže som prísna učiteľka, namiesto toho som do kurzu pridal 7 kapitol plných domácich úloh, 24 úloh dokopy pre veselú zábavu
ale furt hovorím, jediný spôsob ako sa naučiť písať kód, je písať kód
tak píš kód
plus je tam kopa kvalitného textu, kde do zadaní úloh pridávam informácie a vysvetlenia, ktoré sa do videí nezmestili
takže daj si predsavzatie, že ich všetky v novom roku spravíš, ale po pár týždňoch si povieš, "ok, tak si ich aspoň prečítam teda"
choď, šup
a snáď prežijeme ten ďalší rok, držme si palce
yablko [ Pondelok 15.1.2018, 20:59 ]
3 nové videá, šlapeme ďalej, ES6
46 Úvod do ES6 alebo ES2015, pretože je to to isté ale ES6 je kratšie
47 Tvoj prvý ES6 kód (...rest, => fun, class)
48 Ešte stále tvoj prvý ES6 kód (default params, method(), BABEL)
yablko [ Sobota 20.1.2018, 15:52 ]
6 nových videí NPM / BABEL
V JavaScript svete máš dnes milión nástrojov. Nie všetky potrebuješ poznať, neboj. Každopádne my chceme písať moderný JavaScript, ale zároveň chceme, aby kód fungoval aj v starších prehliadačoch.
Na to potrebujeme Babel.
Aby sme Babel nainštalovali, potrebujeme npm.
Cez npm môžeš sťahovať moduly pre Node.js.
Lenže mi nepracujeme v Node.js, my pracujeme v prehliadači.
Webpack vie Node moduly rozbehať v prehliadači.
Babel je tzv. tanspiller.
Npm je tzv. package manager.
Webpack je tzv. module bundler.
Každý z nich má aj svoju konkurenciu, ale tieto sú asi najpoužívanejšie.
O nich bude táto časť kurzu.
49 NPM a rozprávka o moduloch, sadnite si deti
50 NPM, Code Reuse, Modul vs Package, [n]ode [p]ackage [m]anager
51 NPM, konzolový rýchlokurz, local vs global inštalácia
52 NPM init, package.json súbor, sladké dependencies
53 NPM, node_modules, koľko ti zaberá? pošli mi tvoj package
54 NPM, devDependencies, Production vs Development prostredie
yablko [ Nedeľa 21.1.2018, 15:06 ]
3 nové videá
55 (npm) BABEL, moderný kód v starých prehliadačoch, Babel pluginy
56 (npm) BABEL, ES2015+/ES6+ polyfill veď, watcher
57 (npm) BABEL, transpiller, večná súčasť života nášho
yablko [ Utorok 13.2.2018, 22:53 ]
4 nové videá
zajtra prídu ďalšie
58 ES6/01 ES6 v zmysle ES2015+
59 ES6/02 Arrow => functions(1)
60 ES6/03 Arrow functions(2) => pravidlá pre this
61 ES6/04 Arrow functions(3) nemá this => non-binding this
yablko [ Streda 14.2.2018, 15:12 ]
8 nových
62 ES6/05 { block scope } 01 let, hoisting, implicit/explicit block
63 ES6/06 { block scope } 02 let v cykloch, async programovanie
64 ES6/07 CONST vs. VAR vs. LET, style guides
65 ES6/08 Object Literal Extensions, objekty sú fajn a teraz ešte viac
66 ES6/09 Object destructuring / Destructuring assignment
67 ES6/10 ...rest / spread... parametre
68 ES6/11 Default parameters vs. Default operator
69 ES6/12 Template `Strings`, Smart Strings
(69, nice)
yablko [ Sobota 24.2.2018, 10:20 ]
5 nových
70 ES6/13 Novinky v String / Number / Math
71 ES6/14 Novinky v Array
72 ES6/15 Iterators, nový FOR...OF cyklus
73 ES6/16 Generator functions* 1
74 ES6/17 Generator functions* 2, idGenerator
yablko [ Utorok 20.3.2018, 14:02 ]
11 nových videí
75 ES6/18 Promises 01 - AJAX, len lepšie (teória)
76 ES6/19 Promises 02 - timer cez sľub, all, race (prax)
77 ES6/20 Asynchrónne programovanie, ASYNC/AWAIT (teória)
78 ES6/21 ASYNC/AWAIT (prax), callback hell choď preč
79 ES6/22 SET (ako pole, kde každá hodnota je unikát)
80 ES6/23 MAP (ako objekt, kde kľúč môže byť aj ne-string)
81 ES6/24 Symbol (nový dátový typ)
82 ES6/25 Getters, Setters
83 ES6/26 Proxies, sprav si špióna, zostaneš čistý
84 ES6/27 Chuťovky z budúcnosti, Exponentiation, UNICODE, viac
85 ES6/28 Class, extends, super()
toto sú posledné z es6-prezentácioidnej časti kurzu, potom znova do visual studio code a idem na moduly, importy, exporty, kde môžeš javascript kód rozbíjať do
viacerých súborov a vkladať ich do seba, podobne ako require/include z phpčka napr
- potom vyrobím ďalšiu mini-stránku na štýl sex mašiny, nech nezabudneme ozajstný kód programovať, tam ukážem ďalšie koncepty javascriptové
- potom module bundlers ako webpack/rollup a tzv. build tools
- potom dám trochu teórie o veciach ako event loop, možno rôzne spôsoby ako dosiahnuť dedičnosť v js a iné špecialitky šéfkuchárky
- potom vyrobím posledný kos kódu ozajstný, rozmýšľam, že možno ukážem ako spraviť vlastný blockchain:) a tým to uzavrieme
...a niekde by som tam mal vtesnať videá a visual studio code...
a neskôr mám v pláne z tohoto kurzu vytiahnuť 2 menšie kurzy, podobne ako som to spravil s kurzom Základy programovania a OOP, ktorý je vlastne rozšírená verzia niektorých videí z PHP a Laravel kurzov
potom pôjdem buď na Vue alebo Zákady programovania v JavaScripte alebo si dám oddych od JS na chvíľu a pridám pár videí o CSS Grid Layout do prvého Webrebela
yablko [ Piatok 23.3.2018, 10:23 ]
3 nové videá
86 ES6 Modules 01, rozbi kód na súbory
87 ES6 Modules 02, z Patternu na Modul
88 ES6 Modules 03, IMPORT / EXPORT
o es6 moduloch
jak by názvy mohli napovedať
import/export
a hlavne týmto je es6+ časť kurzu hotová
takže vieme písať nový kód, teraz s ním spravím ďalšiu mini appku, potom module bunlders / build tools
yablko [ Piatok 22.6.2018, 10:24 ]
15 nových videí
prvá ukážka Vue.js! a performance v prehliadači, efektívny kód, animácie, ako nájsť bottleneck, devtools performance tab, ...
89 ES6 moduly zatiaľ pomalé, prepáč
90 [BONUS] Vue.js appka 01: reaktívny kód
91 [BONUS] Vue.js appka 02: reaktívne elementy
92 [BONUS] Vue.js appka 03: animácie
93 [BONUS] Email obfuscation, skry ho pred robotom;)
94 Efektívny kód, async/defer
95 link="preload" prefetch preconnect, daj súborom prioritu
96 Performance 01 / ako spúšťať menej kódu, Progress Indicator 01
97 Performance 02 / Progress Indicator 02
98 Performance 03 / odmeraj si FPS (lebo chceš 60fps a nemáš)
99 Throttle
100 Debounce (video 100, ha!)
101 DevTools PerfTools (zmákni Performance Tab v DevTools)
102 Rendering / Painting / Scripting / Reflow / Layout v prehliadači
103 Ako nájsť BOTTLENECK v kóde cez Performance Tools
yablko [ Sobota 21.7.2018, 12:30 ]
17 nových videí
104 Svižné animácie 01 / ScaleX brácho
105 Svižné animácie 02 / žiadny PAINT cez TRANSFORM
106 Svižné animácie 03 / oklam oko cez EASING
107 Top/Left vs CSS transform (gule nablýskané)
108 Compositing
109 Čo môžeš a NESMIEŠ meniť, ak chceš rýchle animácie
110 will-change
111 DOM výkon 01 / odmeraj si koľko ti trvá (kód)
112 DOM výkon 02 / prvý veľký performance test
113 DOM výkon 03 / 5 spôsobov rýchlej DOM manipulácie
114 requestAnimationFrame (a nie setTimeout/setInterval)
115 requestAnimationFrame - zosynchronizuj sa s monitorom
116 setInterval vs setTimeout vs rAF (kedy ktorý? jeden nikdy)
117 Multithreading, buď vláčna, vláknatá
118 Web Workers 01
119 Web Workers 02, sieťový roboš
120 Micro Tasks (rozbi masívny náklad na kúsky)
efektívne animácie, rýchla DOM manipulácia, rýchly kód
requestAnimationFrame na animácie, web workers... kopa kopa kopa:)
yablko [ Pondelok 23.7.2018, 16:13 ]
5 nových
121 269 tipov pre rýchly JavaScript
122 Ďalších 167 tipov pre rýchly JavaScript
123 Animačné knižnice
124 anime.js
125 Posledný trik a finále JS efektivity
sekcia o efektívnom javascripte je done, idem na module bundlers
yablko [ Piatok 17.8.2018, 13:18 ]
posledných 45 videí
kurz je hotový
má 170 videí, ber ho tu https://www.learn2code.sk/kurzy/online-kurz-javascript-es6
126 Používam BUNDLER, kradnem z Redditu 01
127 Používam BUNDLER, kradnem z Redditu 02
128 Čo je MODULE BUNDLER? PARCEL vs WEBPACK
129 Užitočné NPM package, tvoj švédsky stôl technológií, nažer sa
130 PARCEL WORKFLOW 01 sass, babel, autoprefix
131 PARCEL WORKFLOW 02 postcss-uncss, build
132 BUILD STEP, DEV vs PRODUCTION server, Document Root
133 YARN vs NPM
134 JavaScript frontend 2018, toto všetko musím vedieť? Spoiler: NIE
135 yarn outdated, upgrade-interactive, package.json ~verzie
136 Návrh nového projektu, Vanilla Dudes, Class pre formuláre
137 Form.js Getters/Setters, žiadne bodkočiarky??
138 EVENT DELEGATION
139 Create new dude, z Formu do DOMu
140 Validácia, HTML5 dataset
141 Z JSONu do stránky, default parameters
142 Môj proces™, ako som to spravil naozaj, každý je iný #verydeep
143 NPM ako TASK RUNNER 01 (Grunt, Gulp)
144 NPM ako TASK RUNNER 02, nepotrebuješ Grunt/Gulp
145 NPM ako TASK RUNNER 03, NPM je tvoj BUILD TOOL
146 WEBPACK
147 WEBPACK 4+ zero config - bundling ÁNO, konfigurák NIE
148 WEBPACK config file, source maps, cache busting
149 WEBPACK plugins, CleanWebpackPlugin, HtmlWebpackPlugin
150 WEBPACK config pre DEV a PRODUCTION, Webpack DEV SERVER
151 WEBPACK loaders 01, babel, regex, config generátory
152 WEBPACK loaders 02, Sass, CSS, style
153 WEBPACK extract CSS to file, CleanCSS, PostCSS, PurifyCSS
154 WEBPACK img/file loaders, obrázky, CHUNKHASH vs HASH
155 Webpack TREE SHAKING (automaticky vysekne nepoužívaný JS kód)
156 Náš kód je prerastené prasa, ale taký je život (+ ENV variables)
157 WEBPACK ezoterično (Hot Module Replacement, ImageOptim a tak)
158 jQuery je mŕtve? Sám si! (pozor: padnú nadávky, rúham sa)
159 WEBPACK Visualizer
160 JavaScript špecialitky #2, stiahni si moje šťavnaté PDF
161 Nečakané CSS tipy a takmer že až programátorské rady
162 CLOSURES
163 Ukradni mi dáta z kurzov, vypočímatematikuj priemernú dĺžku videí
164 PROTOTYPE
165 3 spôsoby ako zadeliť DEDIČNOSŤ v JS
166 OLOO vs ES6 Class
167 Vlastný NPM package, Maštalizátor 01
168 Vlastný NPM package, Maštalizátor 02
169 Vlastný NPM package, Maštalizátor 03, NPM PUBLISH, Tomáš žije
170 Sme tu, sme povznesení
HanaLevak [ Streda 19.8.2020, 11:19 ]
Zdravím Vedúci;)
Hej ďakujem moc moc za tvoje free free ;) tutorials. A veľmi pekne ďakujem za brut výklad Javascript'u (keďže sa cítim " ako mechanik co sa rozhodne be a balet-dancer "...)
Ale pohoda👍😁🤓
YoungGenerationShine&OpenedWeb
Support (:o))