This media is not supported in your browser
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
This media is not supported in your browser
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
This media is not supported in your browser
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
❤1
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: Server-Side GraphQL in Next.js
Description: Craft schemas, interface types, and resolvers while building a custom GraphQL API with Next.js.
Link: https://frontendmasters.com/courses/server-graphql-nextjs/
Time: 3 hours, 32 minutes
Lessons: 21 / 21
Tags: #course #frontendmasters #720p
Description: Craft schemas, interface types, and resolvers while building a custom GraphQL API with Next.js.
Link: https://frontendmasters.com/courses/server-graphql-nextjs/
Time: 3 hours, 32 minutes
Lessons: 21 / 21
Tags: #course #frontendmasters #720p
Frontendmasters
Create GraphQL APIs from scratch with Next.js
Craft schemas, interface types, and resolvers while building a custom GraphQL API with Next.js.
Media is too big
VIEW IN TELEGRAM
1. Introduction
Scott introduces the course and provides an overview of what will be covered, including building a GraphQL API using Next.js, working with databases, and enabling authentication. Scott also explains the format of the course, which will involve a combination of explanations, live demos, and hands-on practice.
- https://github.com/Hendrixer/server-side-gql
- https://clumsy-humor-894.notion.site/Server-side-GraphQL-55308b7315644a858dd6ccf0201ff13c
#lesson
Scott introduces the course and provides an overview of what will be covered, including building a GraphQL API using Next.js, working with databases, and enabling authentication. Scott also explains the format of the course, which will involve a combination of explanations, live demos, and hands-on practice.
- https://github.com/Hendrixer/server-side-gql
- https://clumsy-humor-894.notion.site/Server-side-GraphQL-55308b7315644a858dd6ccf0201ff13c
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
2. Course Setup
Scott provides instructions on how to set up the development environment for the course. He explains how to fork the repository, install the necessary dependencies using npm, and create a Turso account for the hosted SQLite database. He also guides students through creating a .env file to store secret variables and pushing the database schema to the Turso database.
- https://github.com/Hendrixer/server-side-gql
- https://clumsy-humor-894.notion.site/Server-side-GraphQL-55308b7315644a858dd6ccf0201ff13c
#lesson
Scott provides instructions on how to set up the development environment for the course. He explains how to fork the repository, install the necessary dependencies using npm, and create a Turso account for the hosted SQLite database. He also guides students through creating a .env file to store secret variables and pushing the database schema to the Turso database.
- https://github.com/Hendrixer/server-side-gql
- https://clumsy-humor-894.notion.site/Server-side-GraphQL-55308b7315644a858dd6ccf0201ff13c
#lesson
Media is too big
VIEW IN TELEGRAM
3. What is GraphQL
Scott introduces GraphQL and explains its two main components: the query language and the server component. He discusses how GraphQL allows clients to query data sources and how the server component fulfills those queries. Scott also highlights the benefits of using GraphQL, such as tying into multiple data sources and organizing APIs in a standardized way.
- https://clumsy-humor-894.notion.site/1-What-is-GraphQL-01bbdde7a70f47d4bb6a942626067799
#lesson
Scott introduces GraphQL and explains its two main components: the query language and the server component. He discusses how GraphQL allows clients to query data sources and how the server component fulfills those queries. Scott also highlights the benefits of using GraphQL, such as tying into multiple data sources and organizing APIs in a standardized way.
- https://clumsy-humor-894.notion.site/1-What-is-GraphQL-01bbdde7a70f47d4bb6a942626067799
#lesson
Media is too big
VIEW IN TELEGRAM
4. Schema Type Definition
Scott introduces the concept of the schema definition language (SDL) in GraphQL. He explains that SDL is used to define the structure and types of a GraphQL schema, similar to how a database schema defines the structure of a database. Scott demonstrates how to create a simple GraphQL schema using SDL and shows how to explore and test the schema using Apollo Studio.
- https://clumsy-humor-894.notion.site/2-SDL-c0c6bf4e1d934046a4dbf0880c62082a
#lesson
Scott introduces the concept of the schema definition language (SDL) in GraphQL. He explains that SDL is used to define the structure and types of a GraphQL schema, similar to how a database schema defines the structure of a database. Scott demonstrates how to create a simple GraphQL schema using SDL and shows how to explore and test the schema using Apollo Studio.
- https://clumsy-humor-894.notion.site/2-SDL-c0c6bf4e1d934046a4dbf0880c62082a
#lesson
Media is too big
VIEW IN TELEGRAM
5. Interface Types
Scott explains that an interface is like an abstract type that can be implemented by other object types. He demonstrates how to define an interface in the schema and how to implement it in different object types. He also shows how to query for common fields shared by objects that implement the interface, as well as specific fields for each object type.
#lesson
Scott explains that an interface is like an abstract type that can be implemented by other object types. He demonstrates how to define an interface in the schema and how to implement it in different object types. He also shows how to query for common fields shared by objects that implement the interface, as well as specific fields for each object type.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Union Types
Scott explains the concept of unions in GraphQL and provides an example of a search result where different types of objects can be returned. Scott demonstrates how to define a union type and incorporate it into the query object. He also discusses the syntax for querying fields on union types and how to determine the type of a union object using the " typename" field.
#lesson
Scott explains the concept of unions in GraphQL and provides an example of a search result where different types of objects can be returned. Scott demonstrates how to define a union type and incorporate it into the query object. He also discusses the syntax for querying fields on union types and how to determine the type of a union object using the " typename" field.
#lesson
Media is too big
VIEW IN TELEGRAM
7. Schema Relationships
Scott discusses relationships in GraphQL and demonstrates how to define a one-to-one relationship between a profile and a person, as well as a cyclic relationship where a person has a profile and a profile has a person. Scott also mentions the potential issues with cyclic relationships and the need for additional tools or plugins to prevent abuse or performance problems.
#lesson
Scott discusses relationships in GraphQL and demonstrates how to define a one-to-one relationship between a profile and a person, as well as a cyclic relationship where a person has a profile and a profile has a person. Scott also mentions the potential issues with cyclic relationships and the need for additional tools or plugins to prevent abuse or performance problems.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Directives & Enums
Scott explains that directives are like middleware for fields or entities in a GraphQL schema. He demonstrates how to use the built-in "deprecated" directive to mark a field as deprecated and show a deprecation message in the GraphQL Explorer. He also mentions that custom directives can be created for various purposes, such as authentication.
#lesson
Scott explains that directives are like middleware for fields or entities in a GraphQL schema. He demonstrates how to use the built-in "deprecated" directive to mark a field as deprecated and show a deprecation message in the GraphQL Explorer. He also mentions that custom directives can be created for various purposes, such as authentication.
#lesson
Media is too big
VIEW IN TELEGRAM
9. Queries & Mutations
Scott discusses the difference between queries and mutations, with queries being used to retrieve data and mutations being used to modify or create data. He also demonstrates how to pass arguments to queries and mutations, and how to use input types for more complex arguments. Scott also briefly touches on custom directives, walking through an example of how to create and use a directive called "uppercase" to modify the behavior of a field.
#lesson
Scott discusses the difference between queries and mutations, with queries being used to retrieve data and mutations being used to modify or create data. He also demonstrates how to pass arguments to queries and mutations, and how to use input types for more complex arguments. Scott also briefly touches on custom directives, walking through an example of how to create and use a directive called "uppercase" to modify the behavior of a field.
#lesson