Media is too big
VIEW IN TELEGRAM
18. Accessible HTML Solution: Header & Gallery
Marcy continues the solution for the Accessible HTML exercise. The ProductHeader and ProductImageGallery components are addressed.
#lesson
Marcy continues the solution for the Accessible HTML exercise. The ProductHeader and ProductImageGallery components are addressed.
#lesson
Media is too big
VIEW IN TELEGRAM
19. ARIA
Marcy dives deeper into the Accessible Rich Internet Application (ARIA) specification. While ARIA can help assistive technology better recognize elements on a page, it can also be misused or overused. Built-in, semantic-based accessibility information on elements is typically favored over ARIA added after the fact.
#lesson
Marcy dives deeper into the Accessible Rich Internet Application (ARIA) specification. While ARIA can help assistive technology better recognize elements on a page, it can also be misused or overused. Built-in, semantic-based accessibility information on elements is typically favored over ARIA added after the fact.
#lesson
Media is too big
VIEW IN TELEGRAM
20. Roles, States and Properties
Marcy explains that roles, states, and properties are the building blocks of ARIA. Accessible names and descriptions are also critical for giving clear instructions to users. Some elements have implicit names and descriptions. Other elements will rely on aria-labeledby and aria-describedby to indicate where the name and description are provided.
#lesson
Marcy explains that roles, states, and properties are the building blocks of ARIA. Accessible names and descriptions are also critical for giving clear instructions to users. Some elements have implicit names and descriptions. Other elements will rely on aria-labeledby and aria-describedby to indicate where the name and description are provided.
#lesson
Media is too big
VIEW IN TELEGRAM
21. Live Regions
Marcy introduces Live Regions and explains that they make users aware of things happening without moving their focus. For example, auto-save in a form, banner alerts, and chat widgets. There are two levels of live regions: assertive and polite. Assertive will interrupt other announcements in a time-sensitive way, while polite will wait until other announcements in the queue have been completed.
#lesson
Marcy introduces Live Regions and explains that they make users aware of things happening without moving their focus. For example, auto-save in a form, banner alerts, and chat widgets. There are two levels of live regions: assertive and polite. Assertive will interrupt other announcements in a time-sensitive way, while polite will wait until other announcements in the queue have been completed.
#lesson
Media is too big
VIEW IN TELEGRAM
22. Live Regions Exercise
Students are instructed to use Live Regions to implement accessibility features that announce updates to the shopping cart without moving the user’s keyboard focus.
- https://web-accessibility-v3.vercel.app/topics/ARIA/exercise-4
#lesson
Students are instructed to use Live Regions to implement accessibility features that announce updates to the shopping cart without moving the user’s keyboard focus.
- https://web-accessibility-v3.vercel.app/topics/ARIA/exercise-4
#lesson
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