Robot
Складчик
- #1
[Udemy] AstroJS 101: Build Blazing Fast Frontends [Ohans Emmanuel]
- Ссылка на картинку
[Udemy] AstroJS 101: Build Blazing Fast Frontends! (Ohans Emmanuel)
What you'll learn
- Learn to use React, Preact, Svelte, Vue, and Beyond in your Astro application.
- Understand Component Islands: a Modern Web Architecture for Building Faster Websites.
- Build Modern Practical Real-world Applications.
- Get Started with Astro: One of the Fastest Frontend Libraries Out There.
- Understand Responsible Hydration and Why it Matters.
- Learn How Component Islands Work in Astro.
- Understand the Behaviour of Astro Component Markup, Styles and Scripts.
- Learn what "Zero Javascript" Means in Practical Terms.
- Learn the Powerful Astro Template Syntax and How it Differs from JSX.
- Build your own Component Islands Implementation from Scratch.
Requirements
- You already know basic HTML, CSS and Javascript
- You know the basics of Typescript e.g., you know what types are
Description
Are you tired of sluggish web performance? Frustrated with heavy JavaScript frameworks bogging down your websites? It's time for a revolution, and Astro is leading the charge!
Problem Statement: In the fast-paced world of web development, speed and efficiency are everything. Traditional JavaScript frameworks often sacrifice performance for flexibility, leaving developers with bloated sites and sluggish load times. Astro changes the game by putting speed at the forefront, empowering developers like you to create lightning-fast websites with ease.
Course Overview: Join us in this comprehensive online course where we'll demystify Astro, the game-changing JavaScript framework built for speed. Whether you're a seasoned developer or just starting your journey, you'll gain invaluable insights into how Astro empowers you to build performant websites like never before.
At the end of the course you'll gain in-depth understanding into Astro, and have a rock-solid introduction to Astro - the framework designed for speed.
Highlights:
1 Astro Fundamentals:
- Harness the power of Astro to build your personal website from scratch.
- Set up a local development environment effortlessly.
2 Component Islands Mastery:
- Dive deep into Astro's groundbreaking architecture of component islands.
- Discover how Astro extracts your UI into smaller, isolated components, ensuring blazing-fast load times.
- Learn to leverage the flexibility of Astro with your favorite frameworks like React, Vue, Svelte, and Tailwind CSS.
3 Practical JavaScript Insights:
- Demystify the concept of "zero JavaScript" and its real-world implications.
- Understand why shedding the JavaScript runtime overhead is a game-changer for web performance.
4 Mastering Astro Components:
- Get hands-on with Astro component markup, styles, and scripts.
- Unlock the full potential of Astro's template syntax, distinct from JSX.
5 Unleash Component Islands:
- Dive deep into the core of Astro's architecture and build your own component islands from scratch.
- Comprehend the magic of Astro's component islands and their pivotal role in web development.
6 Optimized Hydration:
- Explore responsible hydration and why it's critical for seamless user experiences.
7 The Island Advantage:
- Gain a profound understanding of why component islands are essential for modern web development.
Embrace the Future of Web Development.
Astro isn't just another framework; it's a revolution in web development. By the end of this course, you'll have the skills and knowledge to create faster, more efficient websites with Astro, leaving your competition in the dust.
Say goodbye to sluggish web performance and hello to a new era of web development!
Enrol now and become a master of speed and innovation with Astro!
Who this course is for:
- Web developers looking to build modern content websites
- Frontend (React, Vue etc.) engineers who want to build much faster websites
Спойлер: Содержание складчины
1 Build your first Astro Application
01.1 (Extra) PDF Understanding Astro (500+ Page Practical Book to Master Astro).html [1k 158]
01.2 Understanding Astro (Download Ebooks - PDFEpub).html [116]
01.3 Understanding Astro (Read online on Github).html [124]
02.1 Project overview.mp4 [24m 736k 715]
02.2 Read the entire section transcript online.html [143]
02.3 The Completed Project Source Code.html [122]
03.1 Installing NodeJS and Setting up your Code Editor.mp4 [21m 735k 714]
03.2 Astro editor setup for other code editors.html [102]
03.3 Download NodeJS.html [91]
04 The Astro Install Wizard.mp4 [16m 231k 298]
05 Understanding the Astro Project Structure.mp4 [59m 865k 648]
06 Introduction to Astro Pages.mp4 [26m 878k 929]
07 The Anatomy of an Astro Component.mp4 [39m 872k 319]
08 Astro Component Styles.mp4 [65m 954k 620]
09 Reusable Page Layouts.mp4 [74m 733k 267]
10 Capitalising component names.mp4 [36m 927k 820]
11 A Test on What You've Learned So Far.html [151]
12 The global style directive.mp4 [37m 667k 239]
13 Custom fonts and global CSS.mp4 [36m 823k 230]
14 Independent Astro components.mp4 [60m 884k 682]
15 Adding interactive scripts to Astro components.mp4 [45m 926k 491]
16 Adding an Interactive theme toggle.mp4 [62m 220k 630]
17 The global() selector.mp4 [26m 947k 397]
18 Event Handling.mp4 [25m 837k 552]
19 Theming via CSS variables.mp4 [54m 26k 381]
20 Accessing global client objects.mp4 [116m 561k 677]
21 The magic of scripts.mp4 [51m 936k 210]
22 A Test on What You've Learned So Far.html [151]
23 Leveraging inline scripts.mp4 [61m 377k 988]
24 Beware of Global Selectors in Scripts.mp4 [54m 576k 345]
25 Using Markdown for Pages.mp4 [29m 610k 243]
26 How to Navigate between Astro Pages.mp4 [13m 459k 54]
27 Uniformity via Markdown Layouts.mp4 [36m 223k 504]
28 Composing Layouts in Astro.mp4 [25m 939k 296]
29 Astro Component Props.mp4 [43m 460k 902]
30.1 Leveraging Markdown Frontmatter Properties.mp4 [101m 416k 365]
30.2 Markdown Page Images (find images with the same name).html [147]
31 Interactive Navigation State with Astro Scripts.mp4 [47m 674k 924]
32 Composing Astro Components.mp4 [148m 730k 42]
33 A Test on What You've Learned So Far.html [151]
34 Complete Component Card Navigation.mp4 [28m 342k 901]
35 Astro's Template Flow of Data.mp4 [70m 357k 54]
36 The Dark Side of definevars.mp4 [57m 304k 241]
37 How to Load Multiple Files in Astro - Part 1.mp4 [77m 894k 160]
38.1 How to Load Multiple Files in Astro - Part 2.mp4 [85m 681k 947]
38.2 The Completed Project Source Code.html [122]
39 A Test on What You've Learned So Far.html [151]
40 Deploying a static Astro site.html [5k 603]
41.1 How Fast is Our Astro Website Shocker!!!.mp4 [11m 376k 504]
41.2 The Completed Project Source Code.html [122]
2 Astro Components In-depth
42 Introduction.mp4 [15m 675k 511]
42 Read the entire section transcript online.html [143]
43 The Javascript Runtime Fatigue.mp4 [73m 688k 856]
44 Ditching the Javascript Runtime.mp4 [42m 54k 133]
45 What is an Astro Component - Part 1.mp4 [31m 13k 771]
46 Manual Astro Installation and Rendering HTML.mp4 [20m 295k 215]
47 The Bliss of Composability.mp4 [27m 686k 102]
48 The Root Element and Local Styles in Compositions.mp4 [20m 390k 575]
49 Hoisting the Head Element.mp4 [51m 118k 154]
50 Revisiting the Component Script Section.mp4 [97m 972k 921]
51 Fetching Data in Astro.mp4 [53m 186k 483]
52 Revisiting the Component Template Section.mp4 [86m 998k 688]
53 Dynamic Tags in Astro.mp4 [30m 595k 826]
54 The Magic of Slots in Astro.mp4 [65m 859k 465]
55 Similarities and Differences to JSX.mp4 [64m 728k 644]
56 What is an Astro Component Conclusion.mp4 [6m 782k 144]
3 Build Your Own Component Island
57 Final Component Island Implementation (Annotated Source Code).html [158]
57 Introduction.mp4 [13m 492k 477]
57 Read the entire section transcript online.html [143]
58 A Brief History of how we Got Here.mp4 [9m 869k 178]
59 The Basics of Client-Side Rendering (CSR).mp4 [26m 597k 329]
60 The PROs and CONs of Client-Side Rendering.mp4 [17m 83k 423]
61 The Basics of Server-Side Rendering (SSR).mp4 [14m 463k 50]
62 The PROs and CONs of Server-Side Rendering (SSR).mp4 [14m 56k 593]
63 Server-Side Rendering with Client-Side Hydration.mp4 [19m 406k 747]
64 The Pros of Server-Side Rendering With Client-Side Hydration.mp4 [12m 304k 352]
65 Partial Hydration for the Win.mp4 [16m 950k 929]
66 Where do Component Islands Come From.mp4 [16m 248k 585]
67 Objectives and API Design.mp4 [39m 891k 169]
68 Getting Started with Mini-island.mp4 [38m 734k 322]
69 The Content Template element.mp4 [24m 628k 251]
70 Hydration Implementation.mp4 [76m 6k 751]
71 Partial Hydration Implementation - Part 1.mp4 [115m 171k 895]
72 Partial Hydration Implementation - Part 2.mp4 [61m 363k 733]
73 Clientvisible Lazy Hydration Implementation.mp4 [31m 126k 336]
74 Clientmedia Lazy Hydration Implementation.mp4 [46m 368k 488]
75 Vue Framework Support (Mini-island).mp4 [55m 247k 986]
76 Preact Framework Usage (Mini-island).mp4 [61m 975k 607]
77 Conclusion.mp4 [7m 184k 564]
77 Final Component Island Implementation (Annotated Source Code).html [158]
4 The Secret Life of Astro Component Islands
78 Introduction.mp4 [7m 958k 628]
78 Read the entire section transcript online.html [143]
80 Step 1 Build an Astro site.mp4 [32m 899k 671]
80 The Starter Template.html [122]
81 Step 2 Install the Framework Integration.mp4 [18m 657k 555]
82 Steps 3 & 4 Write and Render the Framework Component.mp4 [35m 638k 705]
83 Getting Started with Responsible Hydration.mp4 [15m 424k 314]
84 The Clientload Directive.mp4 [19m 771k 956]
85 The Clientonly Directive.mp4 [19m 185k 146]
86 The Clientidle Directive.mp4 [13m 152k 99]
87 The Clientvisible Directive.mp4 [21m 633k 912]
88 The Clientmedia Directive.mp4 [9m 901k 338]
89 Using Multiple Frameworks in Astro.mp4 [41m 630k 989]
89 When Should you Use a Framework Component.mp4 [15m 839k 141]
90 Sharing State between Component Islands.mp4 [98m 277k 38]
90 Signals from Preact.html [96]
90 Signia from tldraw.html [93]
90 Solid signals.html [109]
90 SvelteТs stores.html [104]
90 VueТs reactivity API.html [161]
91 Handling Props (and Children) in Framework Components.mp4 [58m 554k 707]
92 Using Multiple Slots in Framework Components.mp4 [66m 575k 974]
93 Nested Framework Components.mp4 [14m 883k 482]
94 Astro Island Gotchas.mp4 [38m 461k 704]
95 Conclusion - Why islands.mp4 [8m 601k 945]
5 Conclusion
96 Thank you, and Goodbye (for now).html [1k 322]
Объем: 3.46 Гб.
Материал на английском языке
What you'll learn
- Learn to use React, Preact, Svelte, Vue, and Beyond in your Astro application.
- Understand Component Islands: a Modern Web Architecture for Building Faster Websites.
- Build Modern Practical Real-world Applications.
- Get Started with Astro: One of the Fastest Frontend Libraries Out There.
- Understand Responsible Hydration and Why it Matters.
- Learn How Component Islands Work in Astro.
- Understand the Behaviour of Astro Component Markup, Styles and Scripts.
- Learn what "Zero Javascript" Means in Practical Terms.
- Learn the Powerful Astro Template Syntax and How it Differs from JSX.
- Build your own Component Islands Implementation from Scratch.
Requirements
- You already know basic HTML, CSS and Javascript
- You know the basics of Typescript e.g., you know what types are
Description
Are you tired of sluggish web performance? Frustrated with heavy JavaScript frameworks bogging down your websites? It's time for a revolution, and Astro is leading the charge!
Problem Statement: In the fast-paced world of web development, speed and efficiency are everything. Traditional JavaScript frameworks often sacrifice performance for flexibility, leaving developers with bloated sites and sluggish load times. Astro changes the game by putting speed at the forefront, empowering developers like you to create lightning-fast websites with ease.
Course Overview: Join us in this comprehensive online course where we'll demystify Astro, the game-changing JavaScript framework built for speed. Whether you're a seasoned developer or just starting your journey, you'll gain invaluable insights into how Astro empowers you to build performant websites like never before.
At the end of the course you'll gain in-depth understanding into Astro, and have a rock-solid introduction to Astro - the framework designed for speed.
Highlights:
1 Astro Fundamentals:
- Harness the power of Astro to build your personal website from scratch.
- Set up a local development environment effortlessly.
2 Component Islands Mastery:
- Dive deep into Astro's groundbreaking architecture of component islands.
- Discover how Astro extracts your UI into smaller, isolated components, ensuring blazing-fast load times.
- Learn to leverage the flexibility of Astro with your favorite frameworks like React, Vue, Svelte, and Tailwind CSS.
3 Practical JavaScript Insights:
- Demystify the concept of "zero JavaScript" and its real-world implications.
- Understand why shedding the JavaScript runtime overhead is a game-changer for web performance.
4 Mastering Astro Components:
- Get hands-on with Astro component markup, styles, and scripts.
- Unlock the full potential of Astro's template syntax, distinct from JSX.
5 Unleash Component Islands:
- Dive deep into the core of Astro's architecture and build your own component islands from scratch.
- Comprehend the magic of Astro's component islands and their pivotal role in web development.
6 Optimized Hydration:
- Explore responsible hydration and why it's critical for seamless user experiences.
7 The Island Advantage:
- Gain a profound understanding of why component islands are essential for modern web development.
Embrace the Future of Web Development.
Astro isn't just another framework; it's a revolution in web development. By the end of this course, you'll have the skills and knowledge to create faster, more efficient websites with Astro, leaving your competition in the dust.
Say goodbye to sluggish web performance and hello to a new era of web development!
Enrol now and become a master of speed and innovation with Astro!
Who this course is for:
- Web developers looking to build modern content websites
- Frontend (React, Vue etc.) engineers who want to build much faster websites
Спойлер: Содержание складчины
1 Build your first Astro Application
01.1 (Extra) PDF Understanding Astro (500+ Page Practical Book to Master Astro).html [1k 158]
01.2 Understanding Astro (Download Ebooks - PDFEpub).html [116]
01.3 Understanding Astro (Read online on Github).html [124]
02.1 Project overview.mp4 [24m 736k 715]
02.2 Read the entire section transcript online.html [143]
02.3 The Completed Project Source Code.html [122]
03.1 Installing NodeJS and Setting up your Code Editor.mp4 [21m 735k 714]
03.2 Astro editor setup for other code editors.html [102]
03.3 Download NodeJS.html [91]
04 The Astro Install Wizard.mp4 [16m 231k 298]
05 Understanding the Astro Project Structure.mp4 [59m 865k 648]
06 Introduction to Astro Pages.mp4 [26m 878k 929]
07 The Anatomy of an Astro Component.mp4 [39m 872k 319]
08 Astro Component Styles.mp4 [65m 954k 620]
09 Reusable Page Layouts.mp4 [74m 733k 267]
10 Capitalising component names.mp4 [36m 927k 820]
11 A Test on What You've Learned So Far.html [151]
12 The global style directive.mp4 [37m 667k 239]
13 Custom fonts and global CSS.mp4 [36m 823k 230]
14 Independent Astro components.mp4 [60m 884k 682]
15 Adding interactive scripts to Astro components.mp4 [45m 926k 491]
16 Adding an Interactive theme toggle.mp4 [62m 220k 630]
17 The global() selector.mp4 [26m 947k 397]
18 Event Handling.mp4 [25m 837k 552]
19 Theming via CSS variables.mp4 [54m 26k 381]
20 Accessing global client objects.mp4 [116m 561k 677]
21 The magic of scripts.mp4 [51m 936k 210]
22 A Test on What You've Learned So Far.html [151]
23 Leveraging inline scripts.mp4 [61m 377k 988]
24 Beware of Global Selectors in Scripts.mp4 [54m 576k 345]
25 Using Markdown for Pages.mp4 [29m 610k 243]
26 How to Navigate between Astro Pages.mp4 [13m 459k 54]
27 Uniformity via Markdown Layouts.mp4 [36m 223k 504]
28 Composing Layouts in Astro.mp4 [25m 939k 296]
29 Astro Component Props.mp4 [43m 460k 902]
30.1 Leveraging Markdown Frontmatter Properties.mp4 [101m 416k 365]
30.2 Markdown Page Images (find images with the same name).html [147]
31 Interactive Navigation State with Astro Scripts.mp4 [47m 674k 924]
32 Composing Astro Components.mp4 [148m 730k 42]
33 A Test on What You've Learned So Far.html [151]
34 Complete Component Card Navigation.mp4 [28m 342k 901]
35 Astro's Template Flow of Data.mp4 [70m 357k 54]
36 The Dark Side of definevars.mp4 [57m 304k 241]
37 How to Load Multiple Files in Astro - Part 1.mp4 [77m 894k 160]
38.1 How to Load Multiple Files in Astro - Part 2.mp4 [85m 681k 947]
38.2 The Completed Project Source Code.html [122]
39 A Test on What You've Learned So Far.html [151]
40 Deploying a static Astro site.html [5k 603]
41.1 How Fast is Our Astro Website Shocker!!!.mp4 [11m 376k 504]
41.2 The Completed Project Source Code.html [122]
2 Astro Components In-depth
42 Introduction.mp4 [15m 675k 511]
42 Read the entire section transcript online.html [143]
43 The Javascript Runtime Fatigue.mp4 [73m 688k 856]
44 Ditching the Javascript Runtime.mp4 [42m 54k 133]
45 What is an Astro Component - Part 1.mp4 [31m 13k 771]
46 Manual Astro Installation and Rendering HTML.mp4 [20m 295k 215]
47 The Bliss of Composability.mp4 [27m 686k 102]
48 The Root Element and Local Styles in Compositions.mp4 [20m 390k 575]
49 Hoisting the Head Element.mp4 [51m 118k 154]
50 Revisiting the Component Script Section.mp4 [97m 972k 921]
51 Fetching Data in Astro.mp4 [53m 186k 483]
52 Revisiting the Component Template Section.mp4 [86m 998k 688]
53 Dynamic Tags in Astro.mp4 [30m 595k 826]
54 The Magic of Slots in Astro.mp4 [65m 859k 465]
55 Similarities and Differences to JSX.mp4 [64m 728k 644]
56 What is an Astro Component Conclusion.mp4 [6m 782k 144]
3 Build Your Own Component Island
57 Final Component Island Implementation (Annotated Source Code).html [158]
57 Introduction.mp4 [13m 492k 477]
57 Read the entire section transcript online.html [143]
58 A Brief History of how we Got Here.mp4 [9m 869k 178]
59 The Basics of Client-Side Rendering (CSR).mp4 [26m 597k 329]
60 The PROs and CONs of Client-Side Rendering.mp4 [17m 83k 423]
61 The Basics of Server-Side Rendering (SSR).mp4 [14m 463k 50]
62 The PROs and CONs of Server-Side Rendering (SSR).mp4 [14m 56k 593]
63 Server-Side Rendering with Client-Side Hydration.mp4 [19m 406k 747]
64 The Pros of Server-Side Rendering With Client-Side Hydration.mp4 [12m 304k 352]
65 Partial Hydration for the Win.mp4 [16m 950k 929]
66 Where do Component Islands Come From.mp4 [16m 248k 585]
67 Objectives and API Design.mp4 [39m 891k 169]
68 Getting Started with Mini-island.mp4 [38m 734k 322]
69 The Content Template element.mp4 [24m 628k 251]
70 Hydration Implementation.mp4 [76m 6k 751]
71 Partial Hydration Implementation - Part 1.mp4 [115m 171k 895]
72 Partial Hydration Implementation - Part 2.mp4 [61m 363k 733]
73 Clientvisible Lazy Hydration Implementation.mp4 [31m 126k 336]
74 Clientmedia Lazy Hydration Implementation.mp4 [46m 368k 488]
75 Vue Framework Support (Mini-island).mp4 [55m 247k 986]
76 Preact Framework Usage (Mini-island).mp4 [61m 975k 607]
77 Conclusion.mp4 [7m 184k 564]
77 Final Component Island Implementation (Annotated Source Code).html [158]
4 The Secret Life of Astro Component Islands
78 Introduction.mp4 [7m 958k 628]
78 Read the entire section transcript online.html [143]
80 Step 1 Build an Astro site.mp4 [32m 899k 671]
80 The Starter Template.html [122]
81 Step 2 Install the Framework Integration.mp4 [18m 657k 555]
82 Steps 3 & 4 Write and Render the Framework Component.mp4 [35m 638k 705]
83 Getting Started with Responsible Hydration.mp4 [15m 424k 314]
84 The Clientload Directive.mp4 [19m 771k 956]
85 The Clientonly Directive.mp4 [19m 185k 146]
86 The Clientidle Directive.mp4 [13m 152k 99]
87 The Clientvisible Directive.mp4 [21m 633k 912]
88 The Clientmedia Directive.mp4 [9m 901k 338]
89 Using Multiple Frameworks in Astro.mp4 [41m 630k 989]
89 When Should you Use a Framework Component.mp4 [15m 839k 141]
90 Sharing State between Component Islands.mp4 [98m 277k 38]
90 Signals from Preact.html [96]
90 Signia from tldraw.html [93]
90 Solid signals.html [109]
90 SvelteТs stores.html [104]
90 VueТs reactivity API.html [161]
91 Handling Props (and Children) in Framework Components.mp4 [58m 554k 707]
92 Using Multiple Slots in Framework Components.mp4 [66m 575k 974]
93 Nested Framework Components.mp4 [14m 883k 482]
94 Astro Island Gotchas.mp4 [38m 461k 704]
95 Conclusion - Why islands.mp4 [8m 601k 945]
5 Conclusion
96 Thank you, and Goodbye (for now).html [1k 322]
Объем: 3.46 Гб.
Материал на английском языке
Зарегистрируйтесь
, чтобы посмотреть скрытый авторский контент.
