Media is too big
VIEW IN TELEGRAM
3. Scope & Closure
Lydia explains the concept of scope and closures in JavaScript. They discuss how closures work by referencing lexical environments and demonstrate examples of closures in code. The instructor also covers topics such as hoisting, variable declaration, and block scope.
#lesson
Lydia explains the concept of scope and closures in JavaScript. They discuss how closures work by referencing lexical environments and demonstrate examples of closures in code. The instructor also covers topics such as hoisting, variable declaration, and block scope.
#lesson
Media is too big
VIEW IN TELEGRAM
4. this keyword
Lydia explains the behavior of the "this" keyword in JavaScript. They cover various scenarios, including the global context, regular functions, arrow functions, classes, strict mode, event handlers, and the use of call, bind, and apply methods.
#lesson
Lydia explains the behavior of the "this" keyword in JavaScript. They cover various scenarios, including the global context, regular functions, arrow functions, classes, strict mode, event handlers, and the use of call, bind, and apply methods.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Classes & Prototypes
Lydia explains the concept of classes and prototypes in JavaScript. They demonstrate how classes can be extended and how properties and methods can be added to the prototype. They also discuss the difference between properties defined in the constructor and those added to the prototype. The lesson includes examples and explanations of how prototypes work and how they affect memory usage. The instructor also covers topics such as static methods and the use of object.create to create objects with specific prototypes.
#lesson
Lydia explains the concept of classes and prototypes in JavaScript. They demonstrate how classes can be extended and how properties and methods can be added to the prototype. They also discuss the difference between properties defined in the constructor and those added to the prototype. The lesson includes examples and explanations of how prototypes work and how they affect memory usage. The instructor also covers topics such as static methods and the use of object.create to create objects with specific prototypes.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Generators & Iterators
Lydia demonstrates how to create a generator function using the asterisk symbol and explains that a generator function returns an iterator object. The instructor also shows how to use the iterator object to call the next method and retrieve the yielded values. They discuss the difference between regular functions and generator functions, highlighting the ability to pause and resume execution with generator functions. Additionally, the instructor explains how to create custom iterable objects in JavaScript by implementing the symbol.iterator method.
#lesson
Lydia demonstrates how to create a generator function using the asterisk symbol and explains that a generator function returns an iterator object. The instructor also shows how to use the iterator object to call the next method and retrieve the yielded values. They discuss the difference between regular functions and generator functions, highlighting the ability to pause and resume execution with generator functions. Additionally, the instructor explains how to create custom iterable objects in JavaScript by implementing the symbol.iterator method.
#lesson
Media is too big
VIEW IN TELEGRAM
7. Garbage Collection
Lydia discusses various concepts related to garbage collection in JavaScript. They explain how objects are garbage collected based on their availability in the global lexical environment and how references to objects affect their garbage collection. The instructor also explains the concept of weak maps and how they differ from regular maps in terms of garbage collection. They also discuss closures and when inner functions become eligible for garbage collection. The lesson concludes with a discussion on the event loop and how it interacts with garbage collection.
#lesson
Lydia discusses various concepts related to garbage collection in JavaScript. They explain how objects are garbage collected based on their availability in the global lexical environment and how references to objects affect their garbage collection. The instructor also explains the concept of weak maps and how they differ from regular maps in terms of garbage collection. They also discuss closures and when inner functions become eligible for garbage collection. The lesson concludes with a discussion on the event loop and how it interacts with garbage collection.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Modules
Lydia discusses different module loading mechanisms such as CommonJS, AMD, UMD, and ESM. They explain the characteristics and use cases of each mechanism, including their support for server-side or client-side usage, synchronous or asynchronous loading, and static analysis and tree shaking capabilities. The instructor also demonstrates the order of logs when using a combination of require and import statements in a script. Finally, they compare the differences between require and import, highlighting their conditional usage, hoisting behavior, synchronous or asynchronous loading, and support for static analysis and tree shaking.
#lesson
Lydia discusses different module loading mechanisms such as CommonJS, AMD, UMD, and ESM. They explain the characteristics and use cases of each mechanism, including their support for server-side or client-side usage, synchronous or asynchronous loading, and static analysis and tree shaking capabilities. The instructor also demonstrates the order of logs when using a combination of require and import statements in a script. Finally, they compare the differences between require and import, highlighting their conditional usage, hoisting behavior, synchronous or asynchronous loading, and support for static analysis and tree shaking.
#lesson
Media is too big
VIEW IN TELEGRAM
9. Numbers
Lydia explains the behavior of the post-increment operator and pre-increment operator, as well as the difference between using the "==" and "===" operators. They also discuss the "isNaN" function and the "toString" method for numbers. The lesson concludes with a discussion on the "parseInt" and "parseFloat" functions and how to use the "toString" method with different radix values.
#lesson
Lydia explains the behavior of the post-increment operator and pre-increment operator, as well as the difference between using the "==" and "===" operators. They also discuss the "isNaN" function and the "toString" method for numbers. The lesson concludes with a discussion on the "parseInt" and "parseFloat" functions and how to use the "toString" method with different radix values.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Miscellaneous
Lydia covers various topics including working with maps and sets, freezing objects, using proxies, manipulating arrays, working with default parameters, comparing symbols, and using tagged template literals. The instructor explains the concepts and provides examples to illustrate how they work.
#lesson
Lydia covers various topics including working with maps and sets, freezing objects, using proxies, manipulating arrays, working with default parameters, comparing symbols, and using tagged template literals. The instructor explains the concepts and provides examples to illustrate how they work.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
11. Wrapping Up
Lydia wraps up the course by emphasizing that the goal was to remind students of certain concepts and provide resources for further learning. The instructor also encourages participants to reach out with any additional questions or concerns.
#lesson
Lydia wraps up the course by emphasizing that the goal was to remind students of certain concepts and provide resources for further learning. The instructor also encourages participants to reach out with any additional questions or concerns.
#lesson
Title: Vanilla JavaScript Projects
Description: Put your fundamental JavaScript knowledge into practice through hands-on web projects. Use browser APIs, asynchronous programming, Node.js, and modern tooling to build and deploy web apps, all with vanilla JavaScript!
Link: https://frontendmasters.com/courses/javascript-projects/
Time: 9 hours, 0 minutes
Lessons: 60 / 60
Tags: #course #frontendmasters #720p
Description: Put your fundamental JavaScript knowledge into practice through hands-on web projects. Use browser APIs, asynchronous programming, Node.js, and modern tooling to build and deploy web apps, all with vanilla JavaScript!
Link: https://frontendmasters.com/courses/javascript-projects/
Time: 9 hours, 0 minutes
Lessons: 60 / 60
Tags: #course #frontendmasters #720p
Frontendmasters
Advance Your JavaScript Skills with Practical Web Projects
Put your fundamental JavaScript knowledge into practice through hands-on web projects. Use browser APIs, asynchronous programming, Node.js, and modern tooling to build and deploy web apps, all with vanilla JavaScript!
Media is too big
VIEW IN TELEGRAM
1. Introduction
Anjana Vakil introduces the course and explains that it will cover more advanced features of JavaScript, functional programming, object-oriented programming, and working with browser APIs. Several projects will be created throughout the course to practice and reinforce the advanced concepts presented.
- https://anjana.dev/vanilla-js-projects/
- https://github.com/vakila/vanilla-js-projects
#lesson
Anjana Vakil introduces the course and explains that it will cover more advanced features of JavaScript, functional programming, object-oriented programming, and working with browser APIs. Several projects will be created throughout the course to practice and reinforce the advanced concepts presented.
- https://anjana.dev/vanilla-js-projects/
- https://github.com/vakila/vanilla-js-projects
#lesson
Media is too big
VIEW IN TELEGRAM
2. The DOM
Anjana reviews the Document Object Model (DOM) and explains how it's a way for JavaScript to understand and interact with the HTML document being browsed. Getting and setting element attributes is discussed along with handling events. The browser's console can provide some tips and warnings about working with these APIs.
#lesson
Anjana reviews the Document Object Model (DOM) and explains how it's a way for JavaScript to understand and interact with the HTML document being browsed. Getting and setting element attributes is discussed along with handling events. The browser's console can provide some tips and warnings about working with these APIs.
#lesson
Media is too big
VIEW IN TELEGRAM
3. Dark Mode Switcher Exercise
Students are instructed to implement a dark-mode toggle switch. The HTML and CSS are provided below. When the toggle switch is clicked, the value of a custom data element should alternate between light and dark.
- https://anjana.dev/vanilla-js-projects/dark-mode/index.html
#lesson
Students are instructed to implement a dark-mode toggle switch. The HTML and CSS are provided below. When the toggle switch is clicked, the value of a custom data element should alternate between light and dark.
- https://anjana.dev/vanilla-js-projects/dark-mode/index.html
#lesson
Media is too big
VIEW IN TELEGRAM
4. Dark Mode Switcher Solution
Anjana live-codes the solution to the Dark Mode Switcher exercise.
- https://github.com/vakila/vanilla-js-projects/tree/main/dark-mode
#lesson
Anjana live-codes the solution to the Dark Mode Switcher exercise.
- https://github.com/vakila/vanilla-js-projects/tree/main/dark-mode
#lesson
Media is too big
VIEW IN TELEGRAM
5. Asynchronous JS
Anjana introduces the concept of time in JavaScript and explains the challenges of asynchronous programming. The browser's event loop is discussed, and examples of how it schedules tasks to ensure the browser remains responsive to user interactions are shared.
#lesson
Anjana introduces the concept of time in JavaScript and explains the challenges of asynchronous programming. The browser's event loop is discussed, and examples of how it schedules tasks to ensure the browser remains responsive to user interactions are shared.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
6. Browser APIs
Anjana shares examples of a few Browser APIs and recommends using MDN (Mozilla Developer Network) as a resource. The window and document objects are discussed, and the importance of exploring and understanding browser APIs is emphasized.
#lesson
Anjana shares examples of a few Browser APIs and recommends using MDN (Mozilla Developer Network) as a resource. The window and document objects are discussed, and the importance of exploring and understanding browser APIs is emphasized.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
7. Dates & Times
Anjana explores the Date object and its various methods for representing and manipulating time. The setTimeout and setInterval functions create delays and intervals in code execution. Questions about how the event loop handles the execution of async code, setTimeout, and setInterval are also discussed.
#lesson
Anjana explores the Date object and its various methods for representing and manipulating time. The setTimeout and setInterval functions create delays and intervals in code execution. Questions about how the event loop handles the execution of async code, setTimeout, and setInterval are also discussed.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
8. Clock Exercise
Students are instructed to create a randomly moving clock. The paragraph element in the starter file will hold the current time. Random styles should be applied for the top, left, and color properties every three seconds.
- https://anjana.dev/vanilla-js-projects/clock/index.html
#lesson
Students are instructed to create a randomly moving clock. The paragraph element in the starter file will hold the current time. Random styles should be applied for the top, left, and color properties every three seconds.
- https://anjana.dev/vanilla-js-projects/clock/index.html
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
9. Clock Solution: Displaying Time
Anjana begins coding the solution to the Clock exercise. The current time is displayed and updated every three seconds.
- https://github.com/vakila/vanilla-js-projects/blob/main/clock/finished.html
#lesson
Anjana begins coding the solution to the Clock exercise. The current time is displayed and updated every three seconds.
- https://github.com/vakila/vanilla-js-projects/blob/main/clock/finished.html
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
10. Clock Solution: Random Position & Color
Anjana continues the solution to the Clock exercise. Random values are generated and applied to the displayed time using the top, left and color CSS styles.
#lesson
Anjana continues the solution to the Clock exercise. Random values are generated and applied to the displayed time using the top, left and color CSS styles.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
11. Functions
Anjana discusses functions in JavaScript and explains how they can be used as first-class data. Higher-order functions are introduced, and an example of creating a higher-order logging function is shared.
#lesson
Anjana discusses functions in JavaScript and explains how they can be used as first-class data. Higher-order functions are introduced, and an example of creating a higher-order logging function is shared.
#lesson
👍1