Media is too big
VIEW IN TELEGRAM
23. Keyboard Navigation & Skip Links
Marcy shares some tips for leveraging keyboard navigation and skip links for jumping users past content they want to miss. She also inspects a few high-traffic websites to demonstrate how they use navigation and skip links, including Target.com and GitHub.com.
#lesson
Marcy shares some tips for leveraging keyboard navigation and skip links for jumping users past content they want to miss. She also inspects a few high-traffic websites to demonstrate how they use navigation and skip links, including Target.com and GitHub.com.
#lesson
Media is too big
VIEW IN TELEGRAM
24. Tab Key Navigation & Active Element
Marcy explains some best practices for tab-based navigation and talks through tab key versus arrow key approaches. The Active Element API is also introduced. It provides easy access to the currently focused element.
#lesson
Marcy explains some best practices for tab-based navigation and talks through tab key versus arrow key approaches. The Active Element API is also introduced. It provides easy access to the currently focused element.
#lesson
Media is too big
VIEW IN TELEGRAM
25. Focus Trapping & Keyboard Shortcuts
Marcy demonstrates how focus trapping will keep the focus within a component, rotating between specific elements in scope instead of all elements on a page. Keyboard shortcuts are also a helpful accessibility strategy, and a few approaches are discussed.
#lesson
Marcy demonstrates how focus trapping will keep the focus within a component, rotating between specific elements in scope instead of all elements on a page. Keyboard shortcuts are also a helpful accessibility strategy, and a few approaches are discussed.
#lesson
Media is too big
VIEW IN TELEGRAM
26. Focus Management Exercise
Students are instructed to add focus management to a modal. Focus should be sent into the modal when it is opened. Focus should be restored to the application after the modal is closed.
- https://web-accessibility-v3.vercel.app/topics/focus-management/exercise-5
#lesson
Students are instructed to add focus management to a modal. Focus should be sent into the modal when it is opened. Focus should be restored to the application after the modal is closed.
- https://web-accessibility-v3.vercel.app/topics/focus-management/exercise-5
#lesson
Media is too big
VIEW IN TELEGRAM
27. Visual Considerations
Marcy discusses topics related to visual accessibility. Examples of color contrast, reflow/zoom, reducing motion, and color schemes are shared. Performance metrics are also important, including how many keystrokes it takes to perform an action on the page.
#lesson
Marcy discusses topics related to visual accessibility. Examples of color contrast, reflow/zoom, reducing motion, and color schemes are shared. Performance metrics are also important, including how many keystrokes it takes to perform an action on the page.
#lesson
Media is too big
VIEW IN TELEGRAM
28. Reduced Motion Exercise
Students are instructed to improve the accessibility of the header by using the prefers reduced motion API.
- https://web-accessibility-v3.vercel.app/topics/visual-considerations/exercise-6
#lesson
Students are instructed to improve the accessibility of the header by using the prefers reduced motion API.
- https://web-accessibility-v3.vercel.app/topics/visual-considerations/exercise-6
#lesson
Media is too big
VIEW IN TELEGRAM
29. Wrapping Up
Marcy wraps up the course with additional resources for improving the accessibility of your web applications.
- https://web-accessibility-v3.vercel.app/topics/wrap-up
#lesson
Marcy wraps up the course with additional resources for improving the accessibility of your web applications.
- https://web-accessibility-v3.vercel.app/topics/wrap-up
#lesson
Title: Test Your JavaScript Knowledge
Description: Gain clarity on JavaScript's inner workings, including the event loop and asynchronous programming, scope, closures, and classes with interactive questions designed to enhance your understanding of JavaScript!
Link: https://frontendmasters.com/courses/javascript-quiz/
Time: 2 hours, 11 minutes
Lessons: 11 / 11
Tags: #course #frontendmasters #720p
Description: Gain clarity on JavaScript's inner workings, including the event loop and asynchronous programming, scope, closures, and classes with interactive questions designed to enhance your understanding of JavaScript!
Link: https://frontendmasters.com/courses/javascript-quiz/
Time: 2 hours, 11 minutes
Lessons: 11 / 11
Tags: #course #frontendmasters #720p
Frontendmasters
Test Your JavaScript Mastery: Event Loop/Async, Closures, and More
Gain clarity on JavaScript's inner workings, including the event loop and asynchronous programming, scope, closures, and classes with interactive questions designed to enhance your understanding of JavaScript!
This media is not supported in your browser
VIEW IN TELEGRAM
1. Introduction
Lydia Hallie introduces a Q&A style workshop where they present 50 questions on various topics in JavaScript, including event loop, closures, classes, prototypes, and miscellaneous content like numbers and weak maps. Students will be given time to answer each question, and Lydia provides detailed explanations for each answer. The course aims to enhance participants' understanding of JavaScript concepts.
#lesson
Lydia Hallie introduces a Q&A style workshop where they present 50 questions on various topics in JavaScript, including event loop, closures, classes, prototypes, and miscellaneous content like numbers and weak maps. Students will be given time to answer each question, and Lydia provides detailed explanations for each answer. The course aims to enhance participants' understanding of JavaScript concepts.
#lesson
❤1
Media is too big
VIEW IN TELEGRAM
2. Event Loop & Task Queue
Lydia explains the concept of the event loop in JavaScript. They discuss the different components of the event loop, such as the call stack, task queue, and microtask queue. They also provide examples and explanations of how different tasks and callbacks are scheduled and executed in the event loop.
#lesson
Lydia explains the concept of the event loop in JavaScript. They discuss the different components of the event loop, such as the call stack, task queue, and microtask queue. They also provide examples and explanations of how different tasks and callbacks are scheduled and executed in the event loop.
#lesson
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