├── .gitignore ├── README.md ├── a-journey-with-vue-router ├── README.md ├── manifest.json └── notes │ ├── 01-vue-js-set-up-vue-router-and-add-the-root-application-route.md │ ├── 02-vue-js-create-routes-in-vue-and-understand-the-path-hierarchy.md │ ├── 03-vue-js-access-route-parameters-in-a-vue-component.md │ ├── 04-vue-js-create-subroutes-displaying-one-or-more-vue-components-with-the-children-key.md │ └── a-jounrney-with-vue-router-live-workshop-notes.md ├── add-internationalization-to-react-app-using-react-intl ├── README.md └── notes │ ├── 01-install-and-configure-the-entry-point-of-react-intl.md │ ├── 02-convert-a-hard-coded-string-using-react-intl-formatted-message.md │ ├── 03-render-content-with-placeholders-using-react-intl-formatted-message.md │ ├── 04-render-content-with-markup-using-react-intl-formatted-html-message.md │ ├── 05-format-date-and-time-using-react-intl-formatted-date-and-formatted-time.md │ ├── 06-format-a-date-relative-to-the-current-date-using-react-intl-formatted-relative.md │ ├── 07-format-numbers-with-separators-and-currency-symbols-using-react-intl-formatted-number.md │ ├── 08-render-content-based-on-a-number-using-react-intl-formatted-message.md │ ├── 09-use-a-react-intl-higher-order-component-to-format-messages-and-get-current-locale.md │ ├── 10-write-tests-for-react-intl-output-using-enzyme-and-jest.md │ ├── 11-use-webpack-to-conditionally-include-an-intl-polyfill-for-older-browsers.md │ └── images │ ├── 02-convert-a-hard-coded-string-using-react-intl-formatted-message-book-information.png │ ├── 02-convert-a-hard-coded-string-using-react-intl-formatted-message-books.svg │ ├── 02-convert-a-hard-coded-string-using-react-intl-formatted-message-english-translation.png │ ├── 02-convert-a-hard-coded-string-using-react-intl-formatted-message-french-translation.png │ ├── 02-convert-a-hard-coded-string-using-react-intl-formatted-message-homepage.png │ ├── 02-convert-a-hard-coded-string-using-react-intl-formatted-message-spanish-translation.png │ ├── 02-convert-a-hard-coded-string-using-react-intl-formatted-message-toggle-button.png │ ├── 03-render-content-with-placeholders-using-react-intl-formatted-message-author-translate.png │ ├── 03-render-content-with-placeholders-using-react-intl-formatted-message-average-rating-translate.png │ ├── 03-render-content-with-placeholders-using-react-intl-formatted-message-review-translate.png │ ├── 04-render-content-with-markup-using-react-intl-formatted-html-message-markdown-render.png │ ├── 05-format-date-and-time-using-react-intl-formatted-date-and-formatted-time-2-digit-date.png │ ├── 05-format-date-and-time-using-react-intl-formatted-date-and-formatted-time-formatted-time.png │ ├── 05-format-date-and-time-using-react-intl-formatted-date-and-formatted-time-long-month-date.png │ ├── 05-format-date-and-time-using-react-intl-formatted-date-and-formatted-time-numeric-date.png │ ├── 06-format-a-date-relative-to-the-current-date-using-react-intl-formatted-relative-relative-date-days.png │ ├── 06-format-a-date-relative-to-the-current-date-using-react-intl-formatted-relative-short.png │ ├── 06-format-a-date-relative-to-the-current-date-using-react-intl-formatted-relative-update-interval.gif │ ├── 07-format-numbers-with-separators-and-currency-symbols-using-react-intl-formatted-number-currency.png │ ├── 08-render-content-based-on-a-number-using-react-intl-formatted-message-conditional-reviews-many.png │ ├── 08-render-content-based-on-a-number-using-react-intl-formatted-message-reviews-before.png │ ├── 08-render-content-based-on-a-number-using-react-intl-formatted-message-zero-reviews.png │ └── 09-use-a-react-intl-higher-order-component-to-format-messages-and-get-current-locale-object-placeholder.png ├── advanced-javascript-fundamentals ├── README.md └── notes │ ├── 02_javascript-working-with-primitive-types.md │ ├── 03_javascript-autoboxing-primitive-types-in-javascript.md │ ├── 04_javascript-understanding-prototypal-inheritance-within-javascript.md │ ├── 05_javascript-understanding-the-difference-between-prototype-and-__proto__-in-javascript.md │ ├── 06_javascript-working-with-var-let-const-and-block-scopes.md │ ├── 07_javascript-implicit-binding-of-the-this-keyword.md │ ├── 08_javascript-arrow-functions-and-lexical-scoping-this.md │ ├── 09_javascript-explicit-binding-of-the-this-keyword.md │ ├── 10_javascript-private-variables-with-iifes.md │ ├── 11_javascript-use-implicit-and-explicit-coercion-in-javascript.md │ ├── 12_javascript-de-sugar-an-es6-class-and-the-extends-keyword.md │ ├── 13_javascript-es6-class-constructors-and-the-super-keyword.md │ ├── 14_javascript-working-with-static-properties-on-a-class.md │ ├── 15_javascript-how-to-use-strict-mode.md │ └── 16_javascript-wtf-is-a-closure.md ├── advanced-sql-for-professional-developers ├── .all-contributorsrc ├── README.md ├── exercises │ ├── 00-setup.md │ ├── 01-import-data.md │ ├── 02-cast-int-to-string.md │ ├── 03-enum.md │ ├── 04-profile.md │ ├── 05-CTE.md │ ├── 06-filter-data.md │ ├── 07-transactions.md │ ├── README.md │ ├── product-data.csv │ ├── purchases-data.csv │ ├── solutions │ │ ├── 01-import-data.md │ │ ├── 02-cast-int-to-string.md │ │ ├── 03-enum.md │ │ ├── 04-profile.md │ │ ├── 05-CTE.md │ │ ├── 06-filter-data.md │ │ └── 07-transactions.md │ └── user-data.csv └── notes │ ├── 01-postgresql-bulk-insert-and-export-data-with-csv-files-with-postgres-copy-command.md │ ├── 02-postgresql-on-conflict-do-something-clause-in-postgres.md │ ├── 03-postgresql-casting-types-in-sql.md │ ├── 04-postgresql-create-a-custom-sql-enum-type.md │ ├── 05-postgresql-profiling-queries-with-sql-explain-analyze.md │ ├── 06-postgresql-common-table-expressions-in-sql.md │ ├── 07-postgresql-conditional-returns-with-sql-case-then.md │ ├── 08-postgresql-create-variables-and-blocks-with-do-declare-in-sql.md │ ├── 09-postgresql-perform-multiple-steps-in-one-with-sql-transactions.md │ ├── 10-postgresql-filter-grouped-and-aggregated-data-with-sql-having.md │ ├── 11-postgresql-create-and-safely-handle-nulls-in-sql.md │ ├── 12-postgresql-aggregate-inline-filters-in-sql.md │ ├── 13-postgresql-work-with-json-data-in-sql.md │ ├── 14-postgresql-pattern-matching-and-regular-expressions-in-sql.md │ └── images │ ├── bulk-insert-reverse-to.png │ ├── bulk-insert.png │ ├── case-statement-anatomy.jpg │ ├── casting-types-1.png │ ├── casting-types-2.png │ ├── explain-sql-output.jpg │ ├── json-data.png │ ├── like-illustration.jpeg │ ├── sql-bulkimport.gif │ └── withwithoutfilter.jpg ├── auditing-react-apps-for-accessibility-08733265 ├── README.md └── notes │ ├── 01-react-audit-component-accessibility-using-storybook.md │ ├── 02-egghead-write-unit-tests-for-accessibility-using-jest-axe-and-reactdom.md │ ├── 03-egghead-write-unit-tests-for-accessibility-using-jest-axe-and-enzyme.md │ ├── 04-egghead-write-unit-tests-for-accessibility-using-jest-axe-and-react-testing-library.md │ ├── 05-egghead-write-e2e-tests-for-accessibility-using-axe-core-and-selenium-webdriver.md │ ├── 06-egghead-write-e2e-tests-for-accessibility-using-axe-core-and-cypress.md │ ├── 07-egghead-automate-accessibility-audits-with-github-actions.md │ ├── 08-audit-app-accessibility-with-the-lighthouse-ci-cli.md │ └── 09-automate-lighthouse-audits-with-github-actions.md ├── beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd ├── README.md └── notes │ ├── 01-react-course-introduction-beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd.md │ ├── 02-react-set-up-a-react-environment-with-create-react-app.md │ ├── 03-react-create-and-style-a-list-of-data-with-react.md │ ├── 04-react-reorder-a-list-with-react-beautiful-dnd.md │ ├── 05-react-persist-list-reordering-with-react-beautiful-dnd-using-the-ondragend-callback.md │ ├── 06-react-customise-the-appearance-of-an-app-during-a-drag-using-react-beautiful-dnd-snapshot-values.md │ ├── 07-react-customise-the-appearance-of-an-app-using-react-beautiful-dnd-ondragstart-and-ondragend.md │ ├── 08-react-designate-control-of-dragging-for-a-react-beautiful-dnd-draggable-with-draghandleprops.md │ ├── 09-react-move-items-between-columns-with-react-beautiful-dnd-using-ondragend.md │ ├── 10-react-conditionally-allow-movement-using-react-beautiful-dnd-draggable-and-droppable-props.md │ ├── 11-react-create-reorderable-horizontal-lists-with-react-beautiful-dnd-direction-prop.md │ ├── 12-react-reorder-columns-with-react-beautiful-dnd.md │ ├── 13-react-optimize-performance-in-react-beautiful-dnd-with-shouldcomponentupdate-and-purecomponent.md │ └── 14-react-customize-screen-reader-messages-for-drag-and-drop-with-react-beautiful-dnd.md ├── build-a-backend-with-prisma-in-a-typescript-node-project-ca6628d3 ├── README.md └── notes │ ├── 01-prisma-install-the-prisma-vs-code-extension.md │ ├── 02-prisma-initialize-prisma-in-a-typescript-node-project.md │ ├── 03-prisma-create-a-model-for-a-table-and-run-migrations.md │ ├── 04-prisma-use-prisma-studio-to-create-a-record.md │ ├── 05-prisma-use-prisma-client-to-find-many-records-in-a-table.md │ ├── 06-prisma-use-prima-client-to-select-a-subset-of-data.md │ ├── 07-prisma-create-a-database-record-with-prisma-client.md │ ├── 08-prisma-use-express-to-create-data-dynamically.md │ ├── 09-prisma-create-a-relation-between-two-tables-in-the-prisma-schema.md │ ├── 10-prisma-use-prisma-client-to-query-for-related-data.md │ ├── 11-prisma-use-prisma-client-to-connect-related-tables-when-creating-new-data.md │ └── 12-prisma-limit-the-amount-of-returned-data-with-prisma-client.md ├── build-a-modern-user-interface-with-chakra-ui-fac68106 ├── SUMMARY.md └── notes │ ├── 01_react-install-and-setup-chakra-ui-in-a-react-project.md │ ├── 02_react-build-a-layout-with-the-container-flex-and-vstack-component-in-chakra-ui.md │ ├── 03_react-build-a-2-column-form-with-the-simplegrid-formcontrol-and-input-component-in-chakra-ui.md │ ├── 04_react-create-a-dark-mode-switcher-in-chakra-ui.md │ ├── 05_react-implement-responsive-design-in-chakra-ui.md │ ├── 06_react-define-custom-colors-and-fonts-in-chakra-ui.md │ ├── 07_react-use-theme-extensions-in-chakra-ui.md │ ├── 08_react-override-the-built-in-component-s-styles-in-chakra-ui.md │ └── 09_react-create-custom-variants-in-chakra-ui.md ├── build-a-react-native-application-for-ios-and-android-from-start-to-finish ├── README.md └── notes │ ├── 01-create-a-react-native-app-and-run-it-on-the-ios-simulator-and-android-emulator.md │ ├── 02-reload-the-simulator-when-changes-occur-in-react-native-apps.md │ ├── 03-display-and-format-text-in-a-react-native-application.md │ ├── 04-layout-react-native-components-with-flexbox.md │ ├── 05-style-components-in-a-react-native-app-with-stylesheet.md │ ├── 06-accept-user-input-with-react-native-textinput.md │ ├── 07-write-to-the-console-log-in-a-react-native-app.md │ ├── 08-use-the-debugger-in-a-react-native-app.md │ ├── 09-style-react-native-components-differently-on-ios-and-android.md │ ├── 10-clean-up-the-folder-structure-and-imports-in-a-react-native-app-with-absolute-paths.md │ ├── 11-scroll-elements-on-a-react-native-screen-with-scrollview.md │ ├── 12-display-a-list-of-items-in-react-native-with-flatlist.md │ ├── 13-make-a-touchable-button-in-react-native.md │ ├── 14-fetch-data-from-an-http-server-in-a-react-native-application-using-fetch-or-axios.md │ ├── 15-display-local-and-remote-images-in-react-native.md │ ├── 16-add-icons-to-a-react-native-app-with-react-native-vector-icons.md │ ├── 17-show-a-new-screen-with-react-navigation-and-stacknavigator.md │ ├── 18-customize-the-stacknavigator-header-with-react-navigation-in-a-react-native-app.md │ ├── 19-pass-data-between-screens-when-navigating-with-stacknavigator.md │ ├── 20-add-bottom-tabs-to-a-react-native-app-with-react-navigation.md │ ├── 21-add-a-modal-screen-that-pops-up-from-the-bottom-with-react-navigation.md │ ├── 22-ensure-text-fields-don't-get-covered-by-the-on-screen-keyboard.md │ ├── 23-show-a-spinner-while-submitting-a-form-in-react-native-with-activityindicator.md │ ├── 24-save-and-retrieve-data-on-the-device-in-a-react-native-app-with-asyncstorage.md │ ├── 25-change-the-splash-screen-for-ios-apps-built-with-react-native.md │ ├── 26-change-the-splash-screen-for-android-apps-built-with-react-native.md │ ├── 27-change-the-app-icon-for-react-native-apps-on-ios.md │ ├── 28-change-the-app-icon-for-react-native-apps-on-android.md │ ├── 29-run-a-react-native-app-on-an-ios-device.md │ ├── 30-run-a-react-native-app-on-an-android-device.md │ ├── 31-build-an-ios-react-native-app-for-uploading-to-the-ios-app-store-or-testflight.md │ └── 32-build-an-android-react-native-app-for-the-google-play-store-or-for-ad-hoc-distribution.md ├── build-a-real-time-data-syncing-chat-application-with-supabase-and-next-js-84e58958 ├── SUMMARY.md └── notes │ ├── 01_supabase-create-a-new-supabase-project.md │ ├── 02_javascript-navigate-the-supabase-admin-interface.md │ ├── 03_postgresql-create-postgresql-tables-using-supabase-s-interface.md │ ├── 04_javascript-configure-supabase-auth-to-allow-users-to-login-with-github.md │ ├── 05_javascript-use-triggers-to-automatically-update-your-supabase-tables.md │ ├── 06_javascript-set-up-a-supabase-client-in-next-js.md │ ├── 07_javascript-set-up-a-login-page-in-next-js-with-supabase-s-auth-session.md │ ├── 08_javascript-set-up-github-authorization-with-supabase.md │ ├── 09_javascript-manage-third-party-authorization-errors-in-supabase.md │ ├── 10_postgresql-executing-raw-sql-using-supabase-s-interface.md │ ├── 11_javascript-retrieve-data-with-a-supabase-api-request.md │ ├── 12_javascript-subscribe-to-database-changes-using-supabase-s-realtime-client.md │ ├── 13_javascript-enable-realtime-only-for-individual-tables-using-supabase_realtime.md │ ├── 14_javascript-insert-submitted-data-to-superbase-tables.md │ ├── 15_next-js-keep-track-of-the-current-user-using-next-js-with-supabase.md │ ├── 16_javascript-logout-and-update-users-with-react-and-supebase-s-upsert-method.md │ ├── 17_javascript-request-user-details-for-a-given-user-using-supabase-s-api.md │ ├── 18_javascript-retrieve-and-displaying-user-details-with-user-subscriptions.md │ ├── 19_supabase-deploy-a-supabase-application-to-production-with-cloudflare-pages.md │ └── 20_cloudflare-building-supabase-serverless-workflows-with-cloudflare-workers.md ├── build-a-server-rendered-reactjs-application-with-nextjs ├── README.md └── notes │ ├── 01-introducing-build-a-server-rendered-reactjs-application-with-nextjs.md │ ├── 02-render-text-within-a-server-side-reactjs-app-with-nextjs.md │ ├── 03-implement-a-custom-materialui-theme-on-the-server-using-hoc.md │ ├── 04-render-material-ui-components-with-nextjs.md │ ├── 05-populate-a-nextjs-application-with-data-using-async-await.md │ ├── 06-create-custom-routes-within-nextjs-using-expressjs.md │ ├── 07-dynamically-instantiate-routes-on-id-with-nextjs-and-expressjs.md │ ├── 08-leverage-nextjs-getInitialProps-lifecycle-hook-to-load-individual-posts.md │ ├── 09-style-nextjs-applications-using-css-in-js-and-styled-jsx.md │ └── 10-deploy-a-nextjs-application-to-the-web-with-the-now-cli.md ├── build-a-site-from-scratch-with-nextjs-typescript-emotion-and-netlify ├── README.md └── notes │ ├── 01-create-a-next.js-app-from-scratch-with-create-next-app.md │ ├── 02-enable-typescript-support-in-a-next.js-app.md │ ├── 03-add-global-styles-to-a-next.js-app.md │ ├── 04-add-css-in-js-styles-with-emotion-to-a-next.js-app.md │ ├── 05-add-static-routes-to-a-next.js-app.md │ ├── 06-create-dynamic-routes-with-next.js.md │ ├── 07-adding-absolute-imports-to-next.js-app.md │ ├── 08-use-static-generation-with-getstaticprops-in-next.js-with-typescript.md │ ├── 09-use-static-generation-for-dynamic-blog-pages-with-next.js.md │ ├── 10-set-up-netlify-deployments-for-a-next.js-blog.md │ ├── 11-add-client-side-transitions-to-a-next.js-app.md │ ├── 12-serve-static-files-with-next.js.md │ ├── 13-use-head-tag-in-next.js-to-add-metatags-to-a-site.md │ ├── 14-add-a-netlify-form-to-a-site-to-gather-user's-feedback.md │ └── 15-change-a-site-name-in-netlify.md ├── build-a-video-chat-app-with-twilio-and-gatsby ├── README.md └── notes │ ├── 01-build-a-page-layout-in-gatsby.md │ ├── 02-create-a-react-form-in-gatsby.md │ ├── 03-generate-dynamic-routes-in-gatsby-with-reach-router.md │ ├── 04-manage-application-state-in-gatsby-with-react-hooks.md │ ├── 05-generate-an-access-token-for-users-with-twilio-serverless-functions.md │ ├── 06-consume-a-generated-twilio-token-in-gatsby-with-react-hooks.md │ ├── 07-restrict-access-in-gatsby-with-protected-routes.md │ ├── 08-connect-video-to-a-room-with-react-hooks-in-gatsby.md │ ├── 09-show-video-in-gatsby-from-remote-participants-with-react-hooks.md │ └── 10-handle-disconnected-participants-with-react-hooks-and-the-twilio-api.md ├── build-advanced-components-with-react-hooks-810906cc ├── SUMMARY.md └── notes │ ├── 01_react-build-a-wizard-component-using-usestate-react-hooks.md │ ├── 02_react-create-a-wizard-component-using-compound-components-and-usecontext-react-hook.md │ ├── 03_react-validate-use-of-context-using-a-custom-hook-and-the-usecontext-react-hook.md │ ├── 04_react-use-useeffect-react-hook-to-define-the-total-number-of-pages-for-the-wizard-component.md │ ├── 05_react-manage-component-state-by-using-the-usereducer-and-usecallback-react-hooks.md │ ├── 06_react-implement-the-state-reducer-pattern-using-the-usereducer-react-hook.md │ └── 07_react-create-a-flexible-api-by-using-custom-react-hooks.md ├── build-an-app-with-react-suspense ├── README.md └── notes │ ├── 01-react-build-an-app-with-react-suspense-intro-and-setup.md │ ├── 02-react-import-components-lazily-with-suspense-react-lazy.md │ ├── 03-react-catch-errors-with-a-react-error-boundary-component.md │ ├── 04-react-understand-how-react-lazy-communicates-loading-status-to-suspense-and-error-boundaries.md │ ├── 05-react-wrap-fetch-requests-to-communicate-pending-error-and-success-status-to-react-suspense.md │ ├── 06-react-separate-api-utility-functions-from-react-components.md │ ├── 07-react-track-async-requests-with-react-s-usestate-hook.md │ ├── 08-react-enable-suspense-features-with-experimental-concurrent-mode-using-reactdom-createroot.md │ ├── 09-react-de-prioritize-nonuser-blocking-updates-with-react-usetransition-s-starttransition-function.md │ ├── 10-react-bypass-receded-views-with-react-usetransition-s-timeoutms-option.md │ ├── 11-react-display-loading-states-conditionally-with-react-usetransition-s-ispending-boolean.md │ ├── 12-react-delay-the-appearance-of-a-loading-spinner-with-css-in-react.md │ ├── 13-react-get-previous-resource-values-with-react-s-usedeferredstate-hook.md │ ├── 14-react-hoist-react-component-state.md │ ├── 15-react-avoid-this-common-suspense-gotcha-in-by-reading-data-from-components.md │ ├── 16-react-coordinate-fallback-rendering-with-the-react-suspenselist-component.md │ ├── 17-react-reveal-suspense-components-in-order-with-suspenselist-s-revealorder-prop-in-react.md │ ├── 18-react-avoid-too-many-spinners-with-react-suspenselist-s-tail-prop.md │ ├── 19-react-pass-react-components-a-usetransition-wrapped-state-setting-callback.md │ ├── 20-react-augment-react-resource-json-with-custom-properties.md │ ├── 21-react-extract-reusable-react-components-with-an-as-prop-render-props-and-react-fragment.md │ ├── 22-react-connect-a-new-endpoints-in-a-react-suspense-app.md │ ├── 23-react-provide-suspensified-data-to-react-components-with-context-and-usecontext.md │ └── images │ ├── 03-review-an-aws-cloud-formation-stack-deployed-with-aws-cdk-trigger-image.png │ ├── 07-change-the-properties-of-a-lambda-function-deployed-with-aws-cdk-lambda-config-image.png │ ├── 08-attach-an-api-gateway-to-a-lambda-function-deployed-with-aws-cdk-api-gateway.png │ ├── 09-pass-environment-variables-to-a-lambda-function-deployed-with-aws-cdk-env-image.png │ ├── 11-create-and-deploy-an-s3-bucket-with-aws-cdk-s3-buckets.png │ ├── 12-make-the-contents-of-an-s3-bucket-deployed-with-cdk-public-closed-buckets.png │ ├── 15-create-a-custom-aws-cdk-construct-custom-construct-images.png │ ├── 16-create-a-dynamo-db-table-with-aws-cdk-dynamodb-image.png │ ├── 16-create-a-dynamo-db-table-with-aws-cdk-storage-illustration.png │ └── 25-deploy-a-site-with-https-support-behind-a-cdn-with-cdk-cdn.png ├── build-an-app-with-the-AWS-cloud-development-kit ├── README.md ├── exercises │ ├── README.md │ └── community-solutions.md └── notes │ ├── 00-intro-and-welcome.md │ ├── 01-install-aws-cloud-development-kit-cdk-and-create-a-new-project.md │ ├── 02-build-and-deploy-a-sample-aws-cloud-development-kit-stack-to-aws.md │ ├── 03-review-an-aws-cloud-formation-stack-deployed-with-aws-cdk.md │ ├── 04-clear-an-initial-aws-cdk-stack-to-start-building-an-app-from-scratch.md │ ├── 05-create-and-deploy-a-lambda-function-with-aws-cdk.md │ ├── 06-review-and-execute-a-lambda-function-deployed-with-cdk-in-aws-console.md │ ├── 07-change-the-properties-of-a-lambda-function-deployed-with-aws-cdk.md │ ├── 08-attach-an-api-gateway-to-a-lambda-function-deployed-with-aws-cdk.md │ ├── 09-pass-environment-variables-to-a-lambda-function-deployed-with-aws-cdk.md │ ├── 10-run-lambda-functions-built-with-cdk-locally-using-aws-sam.md │ ├── 11-create-and-deploy-an-s3-bucket-with-aws-cdk.md │ ├── 12-make-the-contents-of-an-s3-bucket-deployed-with-cdk-public.md │ ├── 13-create-an-s3-event-notification-to-trigger-a-lambda-function-on-file-upload.md │ ├── 14-use-a-bucket-deployment-to-upload-a-file-to-s3-when-deploying-a-cdk-stack.md │ ├── 15-create-a-custom-aws-cdk-construct.md │ ├── 16-create-a-dynamo-db-table-with-aws-cdk.md │ ├── 17-get-all-items-from-a-dynamo-db-table-deployed-with-cdk-using-document-client-api.md │ ├── 18-debug-permission-issues-and-allow-a-lambda-function-to-access-data-from-a-dynamo-db-table.md │ ├── 19-adding-data-to-a-dynamo-db-table-with-put-operation.md │ ├── 20-delete-an-item-from-a-dynamo-db-table-with-delete-operation.md │ ├── 21-add-external-dependencies-to-an-aws-lambda-function-deployed-with-cdk.md │ ├── 22-connect-react-app-to-a-serverless-backend-deployed-with-cdk-and-fix-cors-issues.md │ ├── 23-add-a-custom-cloud-formation-stack-output-with-cdk.md │ ├── 24-deploy-a-static-website-to-s3-with-aws-cdk.md │ ├── 25-deploy-a-site-with-https-support-behind-a-cdn-with-cdk.md │ ├── 26-destroy-an-aws-cdk-stack.md │ └── images │ ├── 03-review-an-aws-cloud-formation-stack-deployed-with-aws-cdk-trigger-image.png │ ├── 07-change-the-properties-of-a-lambda-function-deployed-with-aws-cdk-lambda-config-image.png │ ├── 08-attach-an-api-gateway-to-a-lambda-function-deployed-with-aws-cdk-api-gateway.png │ ├── 09-pass-environment-variables-to-a-lambda-function-deployed-with-aws-cdk-env-image.png │ ├── 11-create-and-deploy-an-s3-bucket-with-aws-cdk-s3-buckets.png │ ├── 12-make-the-contents-of-an-s3-bucket-deployed-with-cdk-public-closed-buckets.png │ ├── 15-create-a-custom-aws-cdk-construct-custom-construct-images.png │ ├── 16-create-a-dynamo-db-table-with-aws-cdk-dynamodb-image.png │ ├── 16-create-a-dynamo-db-table-with-aws-cdk-storage-illustration.png │ └── 25-deploy-a-site-with-https-support-behind-a-cdn-with-cdk-cdn.png ├── build-static-pages-dynamically-using-next-js-and-the-notion-api-34849fc4 └── notes │ ├── 00_next-js-pre-generate-static-pages-with-next-js.md │ ├── 01_next-js-request-page-data-for-next-js-from-the-notion-api.md │ ├── 02_next-js-use-the-notion-api-to-request-block-data-in-next-js.md │ ├── 03_next-js-use-slugified-titles-for-url-in-next-js-with-the-notion-api.md │ ├── 04_next-js-request-notion-database-data-from-the-api-with-next-js.md │ ├── 05_next-js-request-paginated-data-from-notion-api-with-next-js.md │ ├── 06_next-js-mutate-database-fields-with-next-js-using-the-notion-api.md │ └── 07_next-js-use-next-js-incremental-static-regeneration-to-pregenerate-notion-api-pages-on-demand.md ├── build-user-interfaces-by-composing-css-utility-classes-with-tailwind ├── README.md └── notes │ ├── 01-tailwind-composing-css-utility-classes-with-tailwind-course-introduction.md │ ├── 02-tailwind-compile-tailwind-to-css-with-gulp.md │ ├── 03-tailwind-create-custom-utility-classes-in-tailwind.md │ ├── 04-tailwind-apply-mobile-first-responsive-classes-in-tailwind.md │ ├── 05-tailwind-style-elements-on-hover-and-focus-with-tailwind-s-state-variants.md │ ├── 06-tailwind-change-styles-on-multiple-elements-with-tailwinds-group-hover.md │ ├── 07-tailwind-control-what-variations-are-generated-for-each-utility-class-module-in-tailwind.md │ ├── 08-tailwind-keep-specificity-in-check-when-working-with-tailwind.md │ ├── 09-tailwind-extending-tailwind-with-responsive-custom-utility-classes.md │ ├── 10-tailwind-abstract-utility-classes-to-bem-components-in-tailwind.md │ ├── 11-tailwind-create-a-responsive-card-component-by-composing-tailwind-s-utility-classes.md │ ├── 12-tailwind-customize-tailwind-s-naming-convention-for-generated-utility-classes.md │ └── 13-tailwind-removing-unused-css-in-tailwind-with-purgecss.md ├── building-a-customizable-animated-skeleton-loader-in-react-native-51f6231d ├── README.md └── notes │ ├── 01-react-native-create-linear-gradients-in-react-native-using-react-native-linear-gradient.md │ ├── 02-react-native-using-react-native-linear-gradient-for-making-white-text-visible-on-light-images.md │ ├── 03-react-native-mask-ui-elements-in-react-native-with-react-native-masked-view.md │ ├── 04-react-native-using-animated-style-from-reanimated-2-to-animate-a-view.md │ ├── 05-react-native-create-a-skeleton-placeholder-for-your-app-content.md │ └── 06-react-native-animating-a-skeleton-loader-using-reanimated-2.md ├── building-an-opengraph-image-generation-api-with-cloudinary-netlify-functions-and-react-914e ├── README.md └── notes │ ├── 01-figma-designing-opengraph-unfurls-in-figma.md │ ├── 02-react-building-an-opengraph-image-react-component-in-codesandbox-based-on-a-figma-design.md │ ├── 03-netlify-setting-up-a-new-github-repo-to-deploy-functions-on-netlify-with-make-and-netlify-toml.md │ ├── 04-netlify-scaffolding-and-deploying-a-netlify-function-in-javascript.md │ ├── 05-netlify-using-playwright-to-screenshot-the-dom-and-return-an-image-from-a-netlify-function.md │ ├── 06-react-compiling-a-react-to-an-iife-with-rollup-to-execute-and-render-in-a-headless-browser.md │ ├── 07-puppeteer-setting-the-viewport-on-a-playwright-headless-browser.md │ ├── 08-html-5-testing-an-opengraph-image-with-the-twitter-card-validator.md │ ├── 09-http-passing-variables-to-serverless-functions-using-query-strings.md │ ├── 10-javascript-using-cloudinary-as-a-write-through-cache-for-a-netlify-function-that-generates-images.md │ ├── 11-netlify-using-_redirects-files-on-netlify-to-make-netlify-function-urls-more-user-friendly.md │ └── images │ └── Screen Shot 2020-08-11 at 9.09.39 PM.png ├── building-maps-with-react-leaflet ├── README.md └── notes │ ├── 01 - A Little Overview of Maps │ ├── 01-course-introduction.md │ ├── 02-lesson-1-a-little-overview-about-maps.md │ └── 03-update-the-avatar-image-to-a-picture-of-yourself.md │ ├── 02 - Add React Leaflet Map to a React App │ ├── 04-group-1-your-first-map.md │ ├── 05-lesson-2-adding-your-first-react-leaflet-map-to-a-new-react-application.md │ ├── 06-install-leaflet-and-react-leaflet.md │ ├── 07-adding-a-new-map-to-the-search-page.md │ └── 08-style-leaflet-map-using-css.md │ ├── 03 - Customizing Maps with Mapbox │ ├── 09-lesson-3-customizing-your-react-leaflet-map-with-a-mapbox-basemap-style.md │ ├── 10-create-a-mapbox-account.md │ ├── 11-creating-a-map-style-in-mapbox.md │ ├── 12-creating-an-api-key-in-mapbox.md │ ├── 13-create-an-environment-variable-for-the-api-key.md │ ├── 14-configuring-a-mapbox-endpoint-for-our-map-style.md │ ├── 15-customizing-our-map-with-our-map-style-endpoint.md │ ├── 16-extra-env-variables.md │ └── 17-create-an-environment-variable-for-the-api-key.md │ ├── 04 - Add Your First Location Marker │ ├── 18-lesson-4-adding-a-marker-to-a-map-to-point-to-a-location-with-react-leaflet.md │ ├── 19-find-our-favorite-location.md │ ├── 20-add-a-marker-component-with-our-location.md │ ├── 21-fix-a-library-conflict-so-our-marker-image-shows.md │ ├── 22-add-a-popup-component-to-display-the-name-of-our-location.md │ └── 23-add-a-second-marker-for-your-second-favorite-location.md │ ├── 05 - Leaflet State in a React App with Hooks │ ├── 24-group-2-managing-map-data.md │ ├── 25-lesson-5-managing-leaflet-state-in-a-react-app-with-hooks.md │ ├── 26-adding-a-ref-to-our-map-component.md │ ├── 27-accessing-our-leaflet-map-instance-inside-a-react-use-effect-hook.md │ ├── 28-use-our-leaflet-map-instance-to-re-add-our-marker-to-the-map.md │ ├── 29-review-a-simple-example-of-mismanaged-state.md │ └── 30-recreate-the-marker-from-our-second-favorite-location.md │ ├── 06 - Your First GeoJSON Document │ ├── 31-lesson-6-create-your-first-geo-json-document-and-add-restaurant-locations-to-the-map.md │ ├── 32-understanding-the-basics-of-geo-json.md │ ├── 33-using-geojson-io-to-create-your-first-geo-json-document.md │ ├── 34-manually-add-a-new-restaurant-location-to-the-geo-json-document.md │ ├── 35-create-a-new-geo-json-file-and-import-it-into-the-app.md │ ├── 36-add-geo-json-location-data-to-the-map.md │ └── 37-add-another-location-to-the-map.md │ ├── 07 - Smarter Popups with GeoJSON │ ├── 38-lesson-7-add-restaurant-info-to-geo-json-documents-and-display-it-in-a-tooltip-on-the-map.md │ ├── 39-updating-our-geo-json-data-to-include-restaurant-information.md │ ├── 40-adding-popups-to-all-of-our-markers.md │ ├── 41-adding-restaurant-information-to-our-popups.md │ ├── 42-update-the-styles-of-our-popups.md │ ├── 43-change-the-background-color-of-the-popup.md │ └── 44-add-another-restaurant-attribute.md │ ├── 08 - Markers and Shaded Regions │ ├── 45-group-3-customizing-your-map.md │ ├── 46-lesson-8-add-restaurant-delivery-zones-to-map-with-shaded-regions.md │ ├── 47-adding-a-delivery-radius-to-our-restaurant-data.md │ ├── 48-using-the-delivery-radius-to-add-a-shaded-circle-to-the-map.md │ ├── 49-only-showing-the-delivery-radius-on-marker-hover.md │ └── 50-change-the-color-of-the-delivery-zone.md │ ├── 09 - Location Markers with Custom Images │ ├── 51-lesson-9-customize-restaurant-location-markers-with-custom-images.md │ ├── 52-recreate-restaurant-markers-with-geo-json-configuration-option.md │ ├── 53-replace-the-default-location-markers-with-a-custom-image.md │ ├── 54-add-the-default-shadows-back-to-our-markers.md │ └── 55-replace-the-marker-with-custom-html-and-style-with-css.md │ └── 10 - Leaflet's Geolocation API │ ├── 56-lesson-10-use-leaflet-s-geolocation-api-to-find-locations-near-you.md │ ├── 57-add-a-marker-to-a-location-when-clicking-a-button.md │ ├── 58-create-a-button-that-finds-your-location-and-navigates-the-map-to-that-location.md │ ├── 59-use-the-browser-s-location-to-add-a-marker-to-the-map.md │ ├── 60-add-a-circle-to-the-map-designing-the-accuracy-of-the-browser-s-location.md │ └── 61-clean-up-location-event-handler-resources-when-page-unmounts.md ├── building-serverless-web-applications-with-react-aws-amplify ├── README.md └── notes │ ├── 01-react-install-configure-the-aws-amplify-cli.md │ ├── 02-react-native-create-configure-an-aws-amplify-project-with-a-react-application.md │ ├── 03-react-native-use-the-aws-amplify-withauthenticator-hoc-to-implement-a-react-user-authorization-flow.md │ ├── 04-react-native-manually-sign-up-new-users-in-react-with-aws-amplify-auth-class.md │ ├── 05-react-native-create-interact-with-an-aws-appsync-graphql-api-with-aws-amplify.md │ ├── 06-react-native-create-interact-with-a-serverless-rest-api-with-aws-lambda-from-react.md │ ├── 07-react-native-store-data-in-amazon-s3-with-react.md │ ├── 08-react-deploy-your-react-application-to-aws-using-the-amplify-cli.md │ └── images │ ├── 05_aws-console-search.png │ └── 05_aws-console.png ├── composable-gatsby-themes ├── README.md └── notes │ ├── 01-set_up_shopify_account.md │ ├── 02-set_up_a_wordpress_account.md │ ├── 03-set_up_and_run_gatsby.md │ ├── 04-convert_gatsby_site_to_yarn_workspace_project.md │ ├── 05-overview_of_gatsby_site.md │ ├── 06-create_gatsby_theme_marketing.md │ ├── 07-build_an_advanced_gatsby_theme_shopify.md │ ├── 08-creating_a_blog_theme.md │ ├── 09-use_schema_customization_to_support_mdx_and_wordpress.md │ └── 10-powering_blogpost_with_wordpress_and_mdx.md ├── composing-closures-and-callbacks-in-javascript ├── README.md ├── images │ ├── 19-operators.png │ ├── egghead-exploring-the-patterns-in-the-operators-closures_callbacks.png │ ├── javascript-compose-closures-and-callbacks-to-create-new-functions-compose-pipe.png │ ├── javascript-create-an-ifelse-operator-to-fork-on-a-condition-ifElseOperator.png │ ├── javascript-walkthrough-the-data-flow-of-the-word-game-combine.png │ ├── javascript-walkthrough-the-data-flow-of-the-word-game-fetching_word.png │ ├── javascript-walkthrough-the-data-flow-of-the-word-game-initial_steps.png │ ├── javascript-walkthrough-the-data-flow-of-the-word-game-repeatif_logic.png │ ├── javascript-what-is-a-callback-in-javascript-callback.png │ └── map.png └── notes │ ├── 01-intro-to-callbacks-broadcasters-and-listeners │ ├── 01-what-is-a-closure-in-javascript.md │ ├── 02-what-is-a-callback-in-javascript.md │ ├── 03-can-a-function-be-a-closure-and-a-callback.md │ ├── 04-compose-closures-and-callbacks-to-create-new-functions.md │ ├── 05-defining-the-broadcaster-and-listener-relationship.md │ ├── 06-time-is-a-hidden-variable-in-javascript.md │ ├── 07-solve-callback-hell-with-composition.md │ └── 08-passing-values-through-callback-hell.md │ ├── 02-establish-callback-and-closure-patterns-async │ ├── 09-create-a-function-to-configure-settimeout.md │ ├── 10-return-a-function-to-cancel-an-async-behavior.md │ ├── 11-wrap-addeventlistener-in-a-function-for-more-control.md │ ├── 12-create-a-utility-function-to-control-setinterval.md │ ├── 13-combine-multiple-async-behaviors-with-a-merge-function.md │ ├── 14-use-lodash-curry-when-functions-return-functions.md │ ├── 15-match-function-requirements-with-lodash-partial-and-flip.md │ ├── 16-create-a-buffer-to-pair-values-together-with-zip.md │ ├── 17-pass-an-array-to-a-callback-with-a-forof-function.md │ └── 18-pass-a-done-symbol-when-an-async-function-is-done.md │ ├── 03-build-advanced-async-behaviors-with-pattern │ ├── 19-create-an-operator-function-to-modify-behaviors.md │ ├── 20-transform-values-with-a-map-operator.md │ ├── 21-prevent-certain-values-with-a-filter-operator.md │ ├── 22-use-pipe-to-clean-up-functions-wrapping-functions.md │ ├── 23-start-with-the-api-you-want-then-implement.md │ ├── 24-define-a-function-to-set-common-behaviors-in-operators.md │ └── 25-use-buffers-to-store-values-until-a-condition-is-met.md │ ├── 04-implement-pattern-common-async-scenarios │ ├── 26-building-a-counter-ui-by-composing-callbacks.md │ ├── 27-building-a-timer-ui-by-composing-callbacks.md │ ├── 28-building-a-word-matching-game-by-composing-callbacks.md │ └── 29-create-a-win-condition-with-a-mapdone-operator.md │ ├── 05-use-completion-pattern-to-enable-repitition-and-sequencing │ ├── 30-repeat-a-broadcaster-that-is-done.md │ ├── 31-repeat-when-done-with-a-repeat-operator.md │ ├── 32-comparing-repat-to-start.md │ ├── 33-marking-done-based-o-a-condition.md │ ├── 34-create-a-sequence-of-broadcasters.md │ └── 35-map-a-sequence-based-on-values.md │ ├── 06-bring-pattern-to-react │ ├── 36-adding-react-to-a-vanilla-parcel-project.md │ ├── 37-create-a-broadcaster-in-react-with-usestate-and-useeffect-hooks.md │ ├── 38-create-a-custom-usebroadcaster-hook.md │ ├── 39-pass-a-listener-to-a-usecallback-hook.md │ ├── 40-create-a-custom-uselistener-hook-around-usecallback.md │ ├── 41-explaining-the-uselistener-code.md │ ├── 42-map-a-sequence-of-values-in-react-with-usebroadcaster.md │ ├── 43-handling-an-enter-keypress-with-uselistener-and-react.md │ ├── 44-map-a-sequence-based-on-input-text-in-react.md │ ├── 45-creating-a-debounce-operator-to-limit-listener-calls.md │ ├── 46-wrap-fetch-in-a-broadcaster-in-react.md │ ├── 47-cancel-a-fetch-request-with-a-broadcaster-and-react.md │ └── 48-map-an-error-to-a-broadcaster-value-in-react.md │ ├── 07-build-light-search-box-react │ ├── 49-build-a-live-search-box-with-useBroadcaster-and-useListener-in-React.md │ ├── 50-fixing-bugs-in-our-live-search-box.md │ ├── 51-create-an-ifelse-operator-to-fork-on-a-condition.md │ ├── 52-merge-multiple-uselistener-hooks-in-react.md │ ├── 53-compare-usebroadcaster-and-uselistener-to-the-standard-react-hooks.md │ ├── 54-remember-to-check-for-done.md │ ├── 55-save-network-requests-by-using-a-cache.md │ └── 56-fix-race-conditions-due-to-caching-and-canceling.md │ ├── 08-implement-word-game-with-patterns-react │ ├── 57-share-the-same-broadcaster-values-across-multiple-listeners.md │ ├── 58-limit-to-a-single-shared-broadcaster-each-new-event.md │ ├── 59-combine-two-broadcasters-to-compare-values.md │ ├── 60-compose-operators-to-implement-game-logic.md │ ├── 61-fetch-a-new-data-based-on-conditions.md │ ├── 62-create-an-initialize-operator-to-clear-an-input-field.md │ ├── 63-combine-broadcasters-in-logical-order.md │ ├── 64-refactor-game-state-to-a-single-repeating-broadcaster.md │ ├── 65-check-broadcasters-are-properly-cancelled-in-operators.md │ ├── 66-organizing-operators-and-cleaning-up.md │ └── 67-walkthrough-the-data-flow-of-the-word-game.md │ └── 09-conclusion │ ├── 68-exploring-the-patterns-in-the-operators.md │ └── 69-comparing-similarities-with-popular-async-libraries.md ├── construct-sturdy-uis-with-xstate ├── README.md └── notes │ ├── 01-introducing-construct-sturdy-uis-with-xstate.md │ ├── 02-handle-http-request-state-with-xstate.md │ ├── 03-invoke-an-xstate-service-when-entering-a-state.md │ ├── 04-block-a-state-transition-with-a-guard.md │ ├── 05-control-transition-order-with-parallel-states.md │ ├── 06-communicate-between-state-machines-in-different-components.md │ ├── 07-save-previous-state-with-history-state.md │ └── 08-execute-code-when-entering-and-exiting-states-using-activities.md ├── courses ├── animate-react-apps-with-framer-motion-aa83f52c │ ├── README.md │ └── notes │ │ ├── 01-react-control-animations-with-framer-motion-s-animate-prop?pl=animate-react-apps-with-framer-motion-aa83f52c.md │ │ ├── 02-egghead-use-initial-prop-to-define-the-beginning-state-of-animations?pl=animate-react-apps-with-framer-motion-aa83f52c.md │ │ ├── 03-egghead-customize-animations-with-the-transition-prop?pl=animate-react-apps-with-framer-motion-aa83f52c.md │ │ ├── 04-egghead-animate-through-multiple-states-with-keyframes?pl=animate-react-apps-with-framer-motion-aa83f52c.md │ │ ├── 05-egghead-clean-up-your-components-with-variants?pl=animate-react-apps-with-framer-motion-aa83f52c.md │ │ ├── 06-egghead-animate-elements-removed-from-the-dom-with-animate-presence?pl=animate-react-apps-with-framer-motion-aa83f52c.md │ │ ├── 07-egghead-animate-elements-when-their-layout-changes?pl=animate-react-apps-with-framer-motion-aa83f52c.md │ │ ├── 08-egghead-create-dynamic-animation-values-for-different-elements-with-custom?pl=animate-react-apps-with-framer-motion-aa83f52c.md │ │ ├── 09-react-install-framer-motion-and-create-a-motion-component?pl=animate-react-apps-with-framer-motion-aa83f52c.md │ │ ├── 10-react-create-micro-interactions-with-gesture-props?pl=animate-react-apps-with-framer-motion-aa83f52c.md │ │ └── 11-react-animate-svg-paths?pl=animate-react-apps-with-framer-motion-aa83f52c.md ├── architect-an-extensible-digital-garden-with-next-js-tailwind-and-nx-53f7628f │ ├── README.md │ └── notes │ │ ├── 01-next-js-create-a-next-js-web-application-with-nx.md │ │ ├── 02-next-js-create-a-new-next-js-page-component-with-nx-generators.md │ │ ├── 03-next-js-understanding-next-js-getstaticprops.md │ │ ├── 04-next-js-understanding-next-js-getstaticpaths.md │ │ ├── 05-tailwind-setup-next-js-with-tailwind-in-a-nx-workspace.md │ │ ├── 06-tailwind-configure-tailwind-purging-in-a-nx-workspace.md │ │ ├── 07-tailwind-configure-tailwind-in-a-nx-monorepo-with-potentially-multiple-apps-and-libs.md │ │ ├── 08-tailwind-configure-and-use-tailwindcss-jit-mode-with-nx.md │ │ ├── 09-tailwind-use-getstaticpaths-to-retrieve-a-list-of-markdown-files-to-render-with-next-js.md │ │ ├── 10-next-js-generate-an-nx-library-to-implement-our-markdown-rendering-for-our-next-js-app.md │ │ ├── 11-next-js-parse-a-markdown-document-with-gray-matter.md │ │ ├── 12-mdx-render-markdown-with-next-mdx-remote-in-our-next-js-page-component.md │ │ ├── 13-next-js-embed-react-components-in-our-markdown-with-mdx-in-a-next-js-app.md │ │ ├── 14-next-js-use-react-components-for-native-html-tags-with-mdx-and-next-js.md │ │ ├── 15-next-js-dynamically-loading-react-components-with-next-mdx-remote-and-next-js-dynamic-imports.md │ │ ├── 16-next-js-using-environment-variables-with-next-js-and-nx.md │ │ ├── 17-next-js-add-fast-refresh-support-to-our-mdx-files-with-nx-support-for-custom-next-js-servers.md │ │ ├── 18-next-js-scaffold-a-new-blog-post-article-automatically-with-nx-workspace-generators.md │ │ ├── 19-next-js-run-an-nx-generator-with-the-nx-console-vscode-extension.md │ │ ├── 20-next-js-add-prompts-to-an-nx-workspace-generator.md │ │ ├── 21-next-js-configure-storybook-for-your-react-based-nx-workspace-library.md │ │ ├── 22-tailwind-configure-tailwind-for-your-storybook-setup-in-an-nx-workspace.md │ │ ├── 23-react-develop-react-components-in-isolation-with-storybook-and-nx.md │ │ ├── 24-react-share-react-components-in-next-js-applications-with-nx-workspace-libraries.md │ │ ├── 25-cypress-write-e2e-tests-for-our-next-js-application-with-nx-and-cypress.md │ │ ├── 26-cypress-write-cypress-tests-for-our-react-storybook-components-with-nx.md │ │ ├── 27-next-js-export-a-next-js-application-with-nx.md │ │ ├── 28-next-js-setup-vercel-to-deploy-an-nx-based-next-js-application.md │ │ ├── 29-nx-only-build-what-changed-with-nx-affected-commands.md │ │ ├── 30-mdx-register-our-markdown-articles-with-the-nx-dependency-graph.md │ │ └── 31-nx-only-deploy-to-vercel-what-has-been-affected-using-nx.md ├── auditing-react-apps-for-accessibility-08733265 │ └── notes │ │ ├── 02-react-render-components-with-reactdom-to-write-tests-with-jest-and-jest-axe.md │ │ ├── 03-react-write-unit-tests-for-accessibility-using-jest-axe-and-enzyme.md │ │ ├── 04-react-write-better-unit-tests-with-react-testing-library-and-jest-axe.md │ │ ├── 05-javascript-test-accessibility-at-runtime-with-selenium-webdriver-and-axe-core.md │ │ ├── 06-cypress-write-e2e-tests-for-accessibility-using-axe-core-and-cypress.md │ │ ├── 07-eslint-automate-accessibility-audits-with-github-actions.md │ │ ├── 08-javascript-audit-an-app-s-rendered-pages-locally-with-lighthouse-ci-cli.md │ │ └── 09-aria-automate-lighthouse-audits-with-github-actions.md ├── build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de │ ├── SUMMARY.md │ └── notes │ │ ├── nuxt-js-create-a-new-nuxt-project.md │ │ ├── nuxt-js-create-dynamic-pages-to-render-content-pages.md │ │ ├── nuxt-js-deploy-your-digital-garden-on-netlify.md │ │ ├── nuxt-js-explore-writing-content-in-markdown-files-using-nuxt-content.md │ │ ├── nuxt-js-fetch-content-using-the-created-lifecycle-hook.md │ │ ├── nuxt-js-setup-and-configure-nuxt-content.md │ │ ├── nuxt-js-statically-generate-notes-using-asyncdata.md │ │ ├── nuxt-js-use-frontmatter-to-add-metadata-to-notes.md │ │ ├── nuxt-js-use-sortby-to-sort-notes-by-frontmatter-keys.md │ │ └── nuxt-js-use-the-computed-property-to-filter-notes-by-tag.md ├── build-a-react-app-with-authorization-and-authentication-8bbacfe9 │ ├── SUMMARY.md │ └── notes │ │ ├── aws-check-for-user-specific-roles-using-aws-amplify.md │ │ ├── aws-configure-authorization-on-aws-amplify.md │ │ ├── aws-create-data-models-using-aws-amplify-and-populate-data.md │ │ ├── aws-create-new-posts-using-aws-amplify-s-datastore.md │ │ ├── aws-create-sample-data-using-aws-amplify-s-auto-generate-seed-data.md │ │ ├── aws-deploy-data-models-on-aws-amplify.md │ │ ├── aws-deploy-your-app-to-aws-amplify.md │ │ ├── aws-fetch-data-server-side-using-withssrcontext.md │ │ ├── aws-link-your-aws-amplify-backend-to-your-frontend.md │ │ ├── aws-sign-in-and-out-users-using-aws-amplify-s-auth.md │ │ └── aws-use-withauthenticator-to-create-a-sign-in-ui.md ├── build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20 │ ├── SUMMARY.md │ └── notes │ │ ├── 01_supabase-create-a-supabase-project.md │ │ ├── 02_supabase-create-a-table-in-supabase.md │ │ ├── 03_next-js-create-a-next-js-app-with-tailwind-css.md │ │ ├── 04_supabase-query-data-from-supabase-using-next-js.md │ │ ├── 05_supabase-use-next-js-to-query-a-single-record-from-supabase.md │ │ ├── 06_supabase-implement-third-party-authentication-with-github-in-next-js-using-supabase.md │ │ ├── 07_supabase-add-relationships-between-tables-in-supabase-using-foreign-keys.md │ │ ├── 08_supabase-use-postgres-functions-to-implement-database-logic-with-supabase.md │ │ ├── 09_supabase-use-supabase-to-subscribe-to-database-events-with-postgres-triggers.md │ │ ├── 10_supabase-create-a-stripe-customer-with-next-js-api-routes.md │ │ ├── 11_next-js-generate-a-custom-api-key-to-secure-an-api-route-in-next-js.md │ │ ├── 12_supabase-automatically-create-a-stripe-customer-for-each-user-with-supabase-function-hooks.md │ │ ├── 13_next-js-make-user-state-globally-accessible-in-next-js-with-react-context-and-providers.md │ │ ├── 14_supabase-implement-authorization-using-row-level-security-and-policies.md │ │ ├── 15_supabase-implement-gated-content-using-row-level-security-with-supabase.md │ │ ├── 16_next-js-use-stripe-js-to-query-product-data-and-pre-render-with-next-js.md │ │ ├── 17_next-js-create-shared-nav-bar-in-next-js-with-_app-js.md │ │ ├── 18_supabase-query-dynamic-supabase-data-in-static-pages-using-next-js.md │ │ ├── 19_supabase-pass-supabase-session-cookie-to-api-route-to-identify-user.md │ │ ├── 20_next-js-charge-customer-for-stripe-subscription-in-next-js.md │ │ ├── 21_next-js-subscribe-to-stripe-webhooks-using-next-js-api-routes.md │ │ ├── 22_supabase-use-the-supabase-service-key-to-bypass-row-level-security.md │ │ ├── 23_supabase-create-a-client-page-that-requires-authentication-in-next-js-using-getserversideprops.md │ │ ├── 24_next-js-allow-customer-to-manage-their-subscription-with-stripe-customer-portal.md │ │ ├── 25_supabase-subscribe-the-ui-to-database-changes-with-supabase-real-time.md │ │ └── 26_supabase-configure-stripe-for-production-and-deploy-next-js-application-with-vercel.md ├── build-data-driven-applications-on-the-edge-with-workers-and-workers-kv-4932f3ea │ ├── SUMMARY.md │ └── notes │ │ ├── cloudflare-create-a-cloudflare-workers-kv-namespace.md │ │ ├── cloudflare-create-a-new-cloudflare-workers-project-with-wrangler.md │ │ ├── cloudflare-edit-stored-data-using-the-cloudflare-kv-key.md │ │ ├── cloudflare-filter-data-with-cloudflare-workers-kv-keys.md │ │ ├── cloudflare-identify-users-in-a-cloudflare-worker-by-ip-to-serve-user-specific-data.md │ │ ├── cloudflare-read-data-from-cloudflare-workers-kv-with-binding-get.md │ │ ├── cloudflare-set-complex-key-values-in-a-cloudflare-workers-kv-namespace.md │ │ ├── cloudflare-update-cloudflare-workers-kvs-data-from-an-api-route.md │ │ └── cloudflare-write-data-to-cloudflare-workers-kv-store-with-binding-put.md ├── cloud-infrastructure-fundamentals-with-aws-ee4bb845 │ ├── SUMMARY.md │ └── notes │ │ ├── aws-add-an-api-gateway-http-endpoint-trigger-to-a-lambda-function-in-aws.md │ │ ├── aws-compare-aws-documentdb-dynamodb-and-rds.md │ │ ├── aws-configure-an-aws-s3-user-in-the-aws-cli.md │ │ ├── aws-connect-to-an-aws-ec2-instance-via-ssh.md │ │ ├── aws-course-outro-where-to-go-after-learning-the-cloud-infrastructure-fundamentals.md │ │ ├── aws-create-a-new-aws-rds-instance.md │ │ ├── aws-create-a-user-with-programmatic-s3-access-with-aws-iam.md │ │ ├── aws-create-an-aws-s3-bucket-for-hosting-a-static-react-app.md │ │ ├── aws-create-and-configure-an-aws-ec2-instance.md │ │ ├── aws-delete-an-aws-rds-instance.md │ │ ├── aws-introduction-to-cloud-infrastructure-fundamentals-with-aws.md │ │ ├── aws-overview-of-aws-elastic-compute-cloud-ec2-purpose-and-pricing.md │ │ ├── aws-overview-of-aws-lambda-and-api-gateway.md │ │ ├── aws-overview-of-aws-relational-database-service-rds-features-and-pricing.md │ │ ├── aws-overview-of-s3-simple-storage-service.md │ │ ├── aws-streamline-deployments-to-aws-s3-with-a-deploy-script-in-package-json.md │ │ ├── aws-understand-the-advantages-of-aws-and-cloud-services.md │ │ └── aws-write-and-test-your-first-aws-lambda-function.md ├── cloudflare-pages-6aaa00a1 │ └── notes │ │ ├── 00_egghead-deploy-a-nextjs-and-contentful-project-to-cloudflare-pages.md │ │ ├── 01_egghead-set-up-cloudflare-workers-locally.md │ │ ├── 02_egghead-create-a-secret-with-cloudflare-wrangler-and-add-airtable-credentials.md │ │ ├── 03_egghead-create-an-airtable-data-handler.md │ │ ├── 04_egghead-create-an-airtable-form-submission-function.md │ │ ├── 05_egghead-publish-a-cloudflare-worker-and-submit-data-with-an-html-form.md │ │ ├── 06_egghead-redirects.md │ │ ├── 07_egghead-rollbacks.md │ │ ├── 08_egghead-setting-up-airtable.md │ │ └── 09_egghead-setup-deploy-hooks.md ├── confidently-testing-redux-applications-with-jest-typescript-16e17d9b │ ├── SUMMARY.md │ └── notes │ │ ├── 01_jest-intro-to-confidently-testing-redux-applications-with-jest-typescript.md │ │ ├── 02_redux-exploring-the-sample-app-for-the-redux-testing-course.md │ │ ├── 03_jest-adding-jest-with-typescript-support-to-a-vite-application.md │ │ ├── 04_egghead-configuring-code-coverage-for-typescript-files-in-jest.md │ │ ├── 05_egghead-adding-tests-for-a-redux-reducer.md │ │ ├── 06_egghead-adding-more-test-cases-for-a-redux-reducer.md │ │ ├── 07_egghead-using-jest-in-watch-mode-with-test-todo-to-test-a-redux-reducer.md │ │ ├── 08_egghead-unit-testing-a-basic-redux-selector.md │ │ ├── 09_egghead-unit-testing-a-memoized-redux-selector-built-with-reselect-rtk.md │ │ ├── 10_egghead-unit-testing-a-memoized-selector-that-derives-data-from-multiple-reducers.md │ │ ├── 11_egghead-mocking-out-our-api-helper-with-jest-mock.md │ │ ├── 12_egghead-unit-testing-redux-thunks-with-a-mock-dispatch-function.md │ │ ├── 13_egghead-unit-testing-redux-thunks-using-redux-mock-store.md │ │ ├── 14_egghead-unit-testing-redux-thunks-and-associated-reducer-methods-using-your-app-s-redux-store.md │ │ ├── 15_egghead-additional-redux-thunk-unit-tests-for-increased-code-coverage.md │ │ ├── 16_jest-intermission-pep-talk-testing-redux-applications.md │ │ ├── 17_redux-testing-redux-connected-react-components-with-react-testing-library-basic.md │ │ ├── 18_redux-dispatching-actions-to-a-redux-store-to-test-a-redux-connected-react-component.md │ │ ├── 19_redux-creating-a-utility-file-for-rendering-redux-connected-react-components-in-tests.md │ │ ├── 20_redux-applying-our-redux-test-helpers-to-an-existing-component-test.md │ │ ├── 21_redux-troubleshooting-tests-with-react-testing-library-s-debug-helper.md │ │ ├── 22_redux-using-react-testing-library-s-waitfor-method-to-test-asynchronous-behavior.md │ │ ├── 23_redux-using-react-testing-library-s-findby-methods-to-test-asynchronous-behavior.md │ │ ├── 24_redux-simulate-clicks-in-a-test-with-the-user-event-library.md │ │ ├── 25_redux-testing-accessible-form-elements-with-react-testing-library-s-findbylabeltext-query.md │ │ ├── 26_redux-testing-visible-text-with-react-testing-library-s-getbytext-query.md │ │ ├── 27_redux-using-preloaded-state-from-multiple-reducers-for-testing-a-react-component.md │ │ ├── 28_redux-simulate-typing-into-form-fields-in-tests-with-the-user-event-library.md │ │ ├── 29_redux-testing-accessible-form-elements-with-react-testing-library-s-getbytitle-query.md │ │ ├── 30_redux-testing-components-with-jest-dom-s-tohaveclass-matcher.md │ │ ├── 31_redux-a-comprehensive-example-of-testing-redux-connected-react-components.md │ │ └── 32_redux-concluding-thoughts-on-confidently-testing-redux-applications-with-jest-typescript.md ├── craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898 │ ├── README.md │ └── notes │ │ ├── 01-tailwind-intro-to-styling-custom-uis-with-tailwind-utility-classes.md │ │ ├── 02-tailwind-scaffolding-a-multi-panel-app-layout-with-flexbox.md │ │ ├── 03-tailwind-making-panels-scrollable-with-flexbox.md │ │ ├── 04-tailwind-customizing-tailwind-s-color-palette-with-your-brand.md │ │ ├── 05-tailwind-adding-custom-fonts-to-tailwind.md │ │ ├── 06-tailwind-building-a-hoverable-server-selector-with-svg.md │ │ ├── 07-tailwind-conditionally-applying-classes-based-on-the-active-url.md │ │ ├── 08-tailwind-conditionally-applying-classes-based-on-the-active-url.md │ │ ├── 09-tailwind-building-the-active-server-indicator-using-group-and-transform-utilities.md │ │ ├── 10-tailwind-solving-the-duplication-problem-with-components.md │ │ ├── 11-tailwind-building-the-server-header-using-arbitrary-values-from-the-jit-compiler.md │ │ ├── 12-tailwind-styling-the-channel-list-and-controlling-layout.md │ │ ├── 13-tailwind-identifying-repeated-patterns-while-dynamically-generating-the-channel-list.md │ │ ├── 14-tailwind-styling-the-active-channel-link-with-a-new-dynamic-url-segment.md │ │ ├── 15-tailwind-using-a-state-variable-to-add-unread-states-to-the-channel-nav.md │ │ ├── 16-tailwind-building-collapsible-categories-with-rotating-arrow-icons.md │ │ ├── 17-tailwind-building-the-channel-header-with-flexbox-shrink-and-truncating-text.md │ │ ├── 18-tailwind-styling-the-search-box-using-the-forms-plugin.md │ │ ├── 19-tailwind-using-components-to-dynamically-generate-the-channel-s-messages.md │ │ ├── 20-tailwind-dynamically-generating-the-server-and-channel-navs.md │ │ └── 21-tailwind-using-responsive-design-to-hide-the-desktop-navigation.md ├── effectively-build-restful-apis-using-next-js-api-routes-41c2b1ea │ ├── README.md │ └── notes │ │ ├── 01-next-js-create-a-static-rest-endpoint.md │ │ ├── 02-next-js-create-a-dynamic-api-route.md │ │ ├── 03-next-js-create-a-catch-all-api-route.md │ │ ├── 04-next-js-create-an-optional-catch-all-api-route.md │ │ ├── 05-next-js-handle-different-http-verbs-in-an-api-route.md │ │ ├── 06-next-js-add-a-middleware-to-a-next-js-api-route.MD │ │ ├── 07-next-js-create-an-api-route-using-the-next-connect-package.md │ │ ├── 08-next-js-add-middleware-to-an-api-route-created-with-next-connect.md │ │ └── 09-next-js-hide-sensitive-information-from-the-consumers-of-the-api.md ├── graphql-and-vue-3-8152749d │ └── notes │ │ ├── vue-js-add-routing-to-your-vue-3-application-with-vue-router.md │ │ ├── vue-js-compare-vue-3-setup-script-with-the-options-api.md │ │ ├── vue-js-create-a-conditionally-rendered-modal-in-vue-3.md │ │ ├── vue-js-create-a-data-driven-child-component-in-vue-3.md │ │ ├── vue-js-create-a-data-driven-vue-3-component-with-apollo.md │ │ ├── vue-js-create-a-dynamic-route-with-vue-router.md │ │ ├── vue-js-create-a-graphql-mutation-in-graphiql.md │ │ ├── vue-js-create-a-vue-3-form-with-v-model.md │ │ ├── vue-js-create-a-vue-3-project-with-vite.md │ │ ├── vue-js-encapsulate-logic-with-vue-3-composable.md │ │ ├── vue-js-generate-a-mongodb-database-for-a-graphql-backend.md │ │ ├── vue-js-handle-graphql-request-errors-in-vue-3.md │ │ ├── vue-js-handle-optimistic-updates-with-the-vue-3-usemutation-composable.md │ │ ├── vue-js-implement-an-infinite-scroll-using-graphql-with-the-vue-3-usequery-composable.md │ │ ├── vue-js-listen-for-custom-emitted-events-in-vue-3-parent-components.md │ │ ├── vue-js-pass-an-id-in-a-vue-3-app-through-query-parameters-to-a-graphql-query.md │ │ ├── vue-js-provide-defaultapolloclient-from-apollo-composable-to-your-vue-3-app.md │ │ ├── vue-js-set-up-the-apollo-client-in-a-vue-3-project.md │ │ ├── vue-js-use-graphql-mutations-in-vue-3-with-the-usemutation-composable.md │ │ ├── vue-js-use-refetch-from-vue-3-usequery-composable-to-ensure-fresh-data.md │ │ └── vue-js-use-template-literals-with-router-link-to-create-dynamic-routes-in-vue-3.md ├── local-app-development-with-the-firebase-emulator-ebd4a2a8 │ └── notes │ │ ├── firebase-create-and-use-callable-functions-with-the-firebase-function-emulator.md │ │ ├── firebase-disable-firebase-emulators-when-in-production.md │ │ ├── firebase-get-started-with-firebase-http-cloud-functions.md │ │ ├── firebase-import-seed-data-for-your-firebase-emulators.md │ │ ├── firebase-initialize-firebase-emulators-in-your-app.md │ │ ├── firebase-initialize-the-firestore-emulator.md │ │ ├── firebase-intro-to-use-the-firebase-emulator-to-create-safe-test-environments-for-angular.md │ │ ├── firebase-overview-of-the-demo-application-and-tools-we-ll-use.md │ │ ├── firebase-overview-of-the-different-firebase-cloud-functions.md │ │ ├── firebase-setup-the-firebase-authentication-emulator.md │ │ ├── firebase-watch-for-changes-and-trigger-functions-with-the-firestore-emulator.md │ │ └── firebase-when-to-use-the-oncall-or-onrequest-firebase-cloud-functions.md ├── migrate-a-client-side-application-to-react-18-beta-9379f0d1 │ ├── README.md │ └── notes │ │ ├── 01-react-gradual-adoption-strategy-of-react-18.md │ │ ├── 02-react-update-react-dependencies-with-the-next-version-tag.md │ │ ├── 03-react-replace-legacy-root-api-with-new-root-api.md │ │ ├── 04-react-use-react-18-s-new-root-api-alongside-the-legacy-root-api.md │ │ ├── 05-react-replace-legacy-root-api-s-callback-argument.md │ │ ├── 06-react-conditionally-render-with-legacy-root-api-or-new-root-api.md │ │ ├── 07-react-opt-in-to-automatic-batching-with-createroot.md │ │ ├── 08-react-remove-unstable_batchedupdates-calls.md │ │ ├── 09-react-opt-out-of-automatic-batching-with-reactdom-flushsync.md │ │ ├── 10-react-handle-class-component-setstate-edge-case-with-reactdom-flushsync.md │ │ └── 11-react-stay-up-to-date-on-react-18-progress-with-the-react-working-group.md ├── react-optimization-cookbook-d67d54ba │ ├── SUMMARY.md │ └── notes │ │ ├── react-add-the-why-did-you-render-package-to-catch-unnecessary-updates-in-react.md │ │ ├── react-code-split-components-with-react-lazy-loadable-components.md │ │ ├── react-containerization-of-state-within-child-react-components.md │ │ ├── react-course-introduction-react-optimization-cookbook.md │ │ ├── react-debounce-callbacks-on-dom-events-in-react-apps.md │ │ ├── react-memoize-a-function-with-usecallback-in-react.md │ │ ├── react-memoized-values-with-react-usememo.md │ │ ├── react-optimize-function-components-with-react-memo.md │ │ ├── react-profile-react-components-with-the-devtools-profiler.md │ │ ├── react-tree-shake-your-react-application-modules.md │ │ ├── react-use-the-react-production-build.md │ │ ├── react-view-package-sizes-in-a-react-app-with-webpack-analyzer.md │ │ └── react-virtualize-long-lists-of-data-in-react.md └── refactor-a-react-application-to-typescript-c70bffa0 │ ├── SUMMARY.md │ └── notes │ ├── eslint-configure-emmet-eslint-and-prettier-extensions.md │ ├── react-configure-build-tools-to-work-with-typescript.md │ ├── react-install-and-configure-typescript-and-dependencies.md │ ├── react-refactor-a-react-application-to-typescript.md │ ├── react-refactor-a-react-component-using-typescript.md │ ├── react-type-a-radio-button-component-in-react-using-typescript.md │ ├── react-type-react-hooks-using-typescript.md │ ├── react-use-typescript-to-type-a-react-class-component.md │ ├── react-use-typescript-to-type-react-usereducer.md │ ├── react-walkthrough-of-the-refactoring-project.md │ └── typescript-download-typescript-importer-and-javascript-and-typescript-nightly-for-vscode.md ├── create-amazing-animations-with-greensock-notes ├── README.md └── notes │ ├── 01-setup-greensock-as-a-module-with-parcel.md │ ├── 02-animate-and-center-an-element-to-a-click-event-with-greensock.md │ ├── 03-rotate-an-element-based-on-previous-values-with-greensock.md │ ├── 04-create-animation-steps-with-greensocks-timeline.md │ ├── 05-pause-or-resume-an-animation-by-checkout-isactive-with-greensock.md │ ├── 06-manually-control-the-animation-with-progress-in-greensock.md │ ├── 07-animate-From-a-variable-point-with-from-and-fromto-in-greensock.md │ ├── 08-control-an-array-of-elements-with-the-same-animation-in-greensock.md │ ├── 09-stop-animations-with-killtweensof-and-killall-in-greensock.md │ ├── 10-animate-between-css-classes-with-greensock.md │ ├── 11-spin-elements-in-3d-with-greensock.md │ ├── 12-control-the-shared-3d-perspective-of-multiple-elements-with-greensock.md │ └── 13-loop-a-tween-forever-using-yoyo-and-repeat-with-greensock.md ├── data-structures-and-algorithms-in-javascript ├── README.md ├── assets │ ├── 02-javascript-queue-data-structure-in-javascript-Dequeue.gif │ ├── 02-javascript-queue-data-structure-in-javascript-Enqueue.gif │ ├── 02-javascript-queue-data-structure-in-javascript-Length.gif │ ├── 02-javascript-queue-data-structure-in-javascript-Peek.png │ ├── 02-javascript-queue-data-structure-in-javascript-Queue.png │ ├── 02-javascript-queue-data-structure-in-javascript-isEmpty.gif │ ├── 03-javascript-priority-queue-javascript-data-structure-Priority-Queue.gif │ ├── 04-javascript-stack-data-structure-in-javascript-Stack-Length.gif │ ├── 04-javascript-stack-data-structure-in-javascript-Stack-Peek.png │ ├── 04-javascript-stack-data-structure-in-javascript-Stack-Pop.gif │ ├── 04-javascript-stack-data-structure-in-javascript-Stack-Push.gif │ ├── 04-javascript-stack-data-structure-in-javascript-Stack-isEmpty.gif │ ├── 04-javascript-stack-data-structure-in-javascript-Stack.png │ ├── 05-javascript-linked-list-data-structure-in-javascript-Linked-List-Delete.gif │ ├── 05-javascript-linked-list-data-structure-in-javascript-Linked-List-Get.gif │ ├── 05-javascript-linked-list-data-structure-in-javascript-Linked-List-Head.png │ ├── 05-javascript-linked-list-data-structure-in-javascript-Linked-List-Length.gif │ ├── 05-javascript-linked-list-data-structure-in-javascript-Linked-List-Pop.gif │ ├── 05-javascript-linked-list-data-structure-in-javascript-Linked-List-Push.gif │ ├── 05-javascript-linked-list-data-structure-in-javascript-Linked-List-Tail.png │ ├── 05-javascript-linked-list-data-structure-in-javascript-Linked-List-isEmpty.gif │ ├── 05-javascript-linked-list-data-structure-in-javascript-Linked-List.png │ ├── 06-javascript-javascript-graph-data-structure-Graph-Add-Edge.gif │ ├── 06-javascript-javascript-graph-data-structure-Graph-Add.gif │ ├── 06-javascript-javascript-graph-data-structure-Graph-Find.png │ ├── 06-javascript-javascript-graph-data-structure-Graph-Symmetry.png │ ├── 06-javascript-javascript-graph-data-structure-Graph.png │ ├── 07-javascript-breadth-first-javascript-search-algorithm-for-graphs-Breadth-First-Search.gif │ ├── 08-javascript-write-a-depth-first-search-algorithm-for-graphs-in-javascript-Depth-First-Search.gif │ ├── 09-javascript-tree-data-structure-in-javascript-Tree-Traversal.gif │ ├── 09-javascript-tree-data-structure-in-javascript-Tree.png │ ├── 10-javascript-build-a-binary-tree-in-javascript-and-several-traversal-algorithms-Binary-Tree.png │ ├── 10-javascript-build-a-binary-tree-in-javascript-and-several-traversal-algorithms-Tree-In-Order.gif │ ├── 10-javascript-build-a-binary-tree-in-javascript-and-several-traversal-algorithms-Tree-Post-Order.gif │ └── 10-javascript-build-a-binary-tree-in-javascript-and-several-traversal-algorithms-Tree-Pre-Order.gif └── notes │ ├── 01-javascript-course-introduction-data-structures-and-algorithms-in-javascript.md │ ├── 02-javascript-queue-data-structure-in-javascript.md │ ├── 03-javascript-priority-queue-javascript-data-structure.md │ ├── 04-javascript-stack-data-structure-in-javascript.md │ ├── 05-javascript-linked-list-data-structure-in-javascript.md │ ├── 06-javascript-javascript-graph-data-structure.md │ ├── 07-javascript-breadth-first-javascript-search-algorithm-for-graphs.md │ ├── 08-javascript-write-a-depth-first-search-algorithm-for-graphs-in-javascript.md │ ├── 09-javascript-tree-data-structure-in-javascript.md │ ├── 10-javascript-build-a-binary-tree-in-javascript-and-several-traversal-algorithms.md │ ├── 11-javascript-sort-an-array-with-a-javascript-do-while-loop-using-bubble-sort.md │ ├── 12-javascript-sort-an-array-with-a-nested-for-loop-using-insertion-sort-in-javascript.md │ ├── 13-javascript-divide-and-recurse-over-an-array-with-merge-sort-in-javascript.md │ └── 14-javascript-recursively-sort-an-array-in-javascript-with-quick-sort.md ├── designing-graphql-schemas ├── README.md └── notes │ ├── 01-course-intro-for-designing-graphql-schemas.md │ ├── 02-setup-an-apollo-graphql-server-with-automatic-mocking.md │ ├── 03-kicking-off-a-graphql-schema-design-process.md │ ├── 04-naming-conventions-for-query-fields-in-graphql.md │ ├── 05-when-and-why-to-use-nullable-vs-non-nullable-fields-in-graphql.md │ ├── 06-evolving-a-graphql-schema-incl-breaking-changes-without-affecting-a-single-user.md │ ├── 07-naming-conventions-for-fields-with-graphql-aliases-in-mind.md │ ├── 08-paginate-entries-using-the-connection-specification.md │ ├── 09-extending-graphql-connections-with-additional-fields-and-arguments.md │ ├── 10-naming-top-level-query-fields-in-graphql.md │ ├── 11-mutation-input-payload-structure-in-graphql.md │ ├── 12-design-graphql-mutations-by-focusin-on-the-domain-rather-than-the-data-model.md │ ├── 13-optimising-graphql-mutations-for-static-usage.md │ ├── 14-graphql-mutations-to-update-connections.md │ └── 15-tradeoffs-when-designing-graphql-mutations-to-update-multiple-properties-on-one-entity.md ├── develop-accessible-web-apps-with-react ├── README.md └── notes │ ├── 00-intro.md │ ├── 01-eslint-plugin.md │ ├── 02-react-axe.md │ ├── 03-axe-browser-extension.md │ ├── 04-tota11y-plugin.md │ ├── 05-high-contrast-plugin.md │ ├── 06-color-contrast-macOS.md │ ├── 07-color-contrast-windows.md │ ├── 08-voiceover-macOS.md │ ├── 09-navigate-safari-voiceover.md │ ├── 10-test-landmark-regions.md │ ├── 11-define-landmarks.md │ ├── 12-semantic-HTML.md │ ├── 13-headings.md │ ├── 14-heading-levels.md │ ├── 15-form-controls.md │ ├── 16-input-labels.md │ ├── 17-accessible-labels.md │ ├── 18-accessible-labels-2.md │ ├── 19-add-extra-labels.md │ ├── 20-accessible-descriptions.md │ ├── 21-test-alt-text-.md │ ├── 22-alt-attributes.md │ ├── 23-test-color-contrast.md │ ├── 24-fix-color-contrast.md │ ├── 25-not-just-color.md │ ├── 26-live-regions.md │ ├── 27-manage-focus.md │ └── 28-accessible-design-patterns.md ├── efficient-javascript-array-manipulation-da4e └── notes │ ├── 01-javascript-3-ways-to-update-the-content-of-an-array-of-objects-with-javascript.md │ └── 02-javascript-4-ways-to-populate-an-array-in-javacript.md ├── egghead-talks-full-stack-development-in-the-era-of-serverless-computing └── README.md ├── egghead-talks-sleeping-better-at-night ├── .all-contributorsrc ├── README.md └── assets │ ├── egghead-talks-sleeping-better-at-night-aplitools-after.png │ ├── egghead-talks-sleeping-better-at-night-applitools-testing.png │ ├── egghead-talks-sleeping-better-at-night-applitools-visualization.png │ ├── egghead-talks-sleeping-better-at-night-applitools.png │ ├── egghead-talks-sleeping-better-at-night-kent-testing-tweet.png │ ├── egghead-talks-sleeping-better-at-night-meme.jpg │ ├── egghead-talks-sleeping-better-at-night-probability-diagram.png │ ├── egghead-talks-sleeping-better-at-night-sizzy.gif │ └── egghead-talks-sleeping-better-at-night-testing-spectrum.png ├── egghead-talks-things-every-software-engineer-should-know-about-neurodiversity └── README.md ├── eject-create-react-app-and-use-gatsby-for-advanced-react-app-development ├── README.md ├── excercises │ ├── 01-extract-pages-from-CRA-to-gatsby.md │ ├── 02-install-a-plugin.md │ ├── 03-query-data.md │ ├── README.md │ ├── graphiql.png │ └── solutions │ │ ├── 01-extract-pages-from-CRA-to-gatsby │ │ ├── gatsby-node.js │ │ ├── package.json │ │ ├── src │ │ │ ├── pages │ │ │ │ ├── about.js │ │ │ │ ├── app.js │ │ │ │ └── index.js │ │ │ └── templates │ │ │ │ └── pokemon-page.js │ │ └── yarn.lock │ │ ├── 02-install-a-plugin │ │ ├── .gitkeep │ │ ├── README.md │ │ ├── gatsby-config.js │ │ ├── package.json │ │ ├── src │ │ │ ├── components │ │ │ │ ├── header.js │ │ │ │ ├── image.js │ │ │ │ ├── layout.css │ │ │ │ ├── layout.js │ │ │ │ └── seo.js │ │ │ ├── images │ │ │ │ ├── gatsby-astronaut.png │ │ │ │ └── gatsby-icon.png │ │ │ └── pages │ │ │ │ ├── 404.js │ │ │ │ ├── index.js │ │ │ │ └── page-2.js │ │ └── yarn.lock │ │ └── 03-query-data │ │ ├── data │ │ └── pokemons.json │ │ ├── gatsby-config.js │ │ ├── gatsby-node.js │ │ ├── package.json │ │ ├── src │ │ ├── pages │ │ │ ├── about.js │ │ │ ├── app.js │ │ │ └── index.js │ │ └── templates │ │ │ └── pokemon-page.js │ │ └── yarn.lock ├── notes │ ├── 01-gatsby-setup-the-simplest-gatsby-project.md │ ├── 02-gatsby-create-gatsby-static-pages-manually.md │ ├── 03-gatsby-create-static-pages-programmatically.md │ ├── 04-gatsby-create-client-only-routes-dynamic-pages.md │ ├── 05-gatsby-breaking-down-a-plain-react-app.md │ ├── 06-gatsby-extract-gatsby-static-pages-from-a-plain-react-app.md │ ├── 07-gatsby-convert-react-routes-with-a-dynamic-param-to-programmatic-static-pages.md │ ├── 08-gatsby-create-dynamic-pages-in-gatsby.md │ ├── 09-gatsby-share-common-markup-between-pages-in-gatsby-using-layouts.md │ ├── 10-gatsby-migrate-authentication-from-a-plain-react-app-to-a-gatsby-app.md │ ├── 11-gatsby-using-a-gatsby-plugin-bcf8a626.md │ ├── 12-gatsby-fetch-and-query-data-at-build-time-in-gatsby.md │ └── 13-egghead-combine-build-time-and-client-runtime-data-in-a-gatsby-app.md └── sketch-notes │ ├── 01-sketch-note-gatsby-system.png │ ├── 02-sketch-note-pages.png │ └── 03-sketch-note-progressive-enhancement-animation.gif ├── fix-common-git-mistakes ├── README.md └── notes │ ├── 01-change-a-commit-message-that-hasnt-been-pushed-yet.md │ ├── 02-add-more-files-and-changes-to-a-commit-before-pushing.md │ ├── 03-remove-files-from-staging-before-committing.md │ ├── 04-remove-changes-from-a-commit-before-pushing.md │ ├── 05-use-and-compare-the-different-git-reset-options-hard-soft-and-mixed.md │ ├── 06-recover-local-changes-from-git-reset-hard-with-git-reflog.md │ ├── 07-undo-a-commit-that-has-already-been-pushed.md │ ├── 08-push-a-new-branch-to-github-that-doesnt-exist-remotely-yet.md │ ├── 09-copy-a-commit-from-one-branch-to-another.md │ ├── 10-move-a-commit-that-was-committed-on-the-wrong-branch.md │ ├── 11-use-git-stash-to-save-local-changes-while-pulling.md │ ├── 12-explore-old-commits-with-a-detached-head-and-then-recover.md │ ├── 13-fix-a-pull-request-that-has-a-merge-conflict.md │ ├── 14-cleanup-and-delete-branches-after-a-pull-request.md │ ├── 15-change-the-commit-message-of-a-previous-commit-with-interactive-rebase.md │ ├── 16-git-ignore-a-file-that-has-already-been-committed-and-pushed.md │ ├── 17-add-a-file-to-a-previous-commit-with-interactive-rebase.md │ ├── 18-fix-merge-conflicts-while-changing-commits-during-an-interactive-rebase.md │ ├── 19-squash-commits-before-they-are-pushed-with-interactive-rebase.md │ └── 20-completely-remove-a-file-from-pushed-git-history.md ├── flexbox-fundamentals ├── README.md └── notes │ ├── 01-flexbox-using-flex-direction-to-layout-content-horizontally-and-vertically.md │ ├── 02-flexbox-using-order-to-rearrange-flexbox-children.md │ ├── 03-flexbox-demystifying-alignment-in-flexbox-children.md │ ├── 04-defining-dimensions-on-flexbox-children-flex-basis.md │ ├── 05-flexbox-using-flex-shrink-and-flex-grow-to-make-flexbox-children-resize-correctly.md │ ├── 06-flexbox-combining-the-flexbox-sizing-properties-using-the-flex-shorthand.md │ ├── 07-flexbox-turning-a-flexbox-into-a-grid-using-flex-wrap-and-align-content.md │ └── 08-flexbox-using-flexbox-in-websites-and-applications.md ├── gatsby-theme-authoring ├── .all-contributorsrc ├── README.md └── notes │ ├── 01-set-up-yarn-workspaces-for-gatsby-theme-development.md │ ├── 02-add-static-data-to-a-gatsby-theme.md │ ├── 03-create-a-data-directory-in-gatsby-using-the-on-pre-bootstrap-lifecycle.md │ ├── 04-set-up-to-create-data-driven-pages-in-gatsby.md │ ├── 05-create-data-driven-pages-in-gatsby-with-graph-ql-and-create-pages.md │ ├── 06-display-sorted-data-with-use-static-query-in-gatsby.md │ ├── 07-display-and-query-data-by-id-with-gatsby-context-and-use-static-query.md │ ├── 08-style-and-format-dates-in-react.md │ ├── 09-configure-a-gatsby-theme-to-take-options.md │ ├── 10-make-gatsby-themes-extendable-with-gatsby-theme-ui.md │ ├── 11-use-and-override-a-theme-in-gatsby-with-component-shadowing.md │ ├── 12-publish-a-gatsby-theme-to-npm.md │ ├── 13-consume-a-theme-in-a-gatsby-application.md │ ├── 14-use-component-shadowing-to-override-gatsby-theme-components.md │ └── images │ ├── 02-add-static-data-to-a-gatsby-theme-graphql-playground.png │ ├── 05-create-data-driven-pages-in-gatsby-with-graph-ql-and-create-pages-individual-pages.png │ ├── 05-create-data-driven-pages-in-gatsby-with-graph-ql-and-create-pages.png │ ├── 06-display-sorted-data-with-use-static-query-in-gatsby-formatted.png.png │ ├── 07-display-and-query-data-by-id-with-gatsby-context-and-use-static-query-event-page.png.png │ ├── 07-display-and-query-data-by-id-with-gatsby-context-and-use-static-query.png.png │ ├── 08-style-and-format-dates-in-react-multiple-day-before.png │ ├── 08-style-and-format-dates-in-react-multiple-one-day.png │ └── 11-use-and-override-a-theme-in-gatsby-with-component-shadowing-styled.png ├── get-started-with-angular ├── README.md └── notes │ ├── 01-say-hello-world-to-angular-2.md │ ├── 02-create-a-simple-angular-2-component.md │ ├── 03-manage-angular-2-elements-with-events-and-refs.md │ ├── 04-control-angular-2-events-with-event-and-event-handlers.md │ ├── 05-share-services-and-data-with-angular-2-dependency-injection.md │ ├── 06-provide-and-share-values-with-angular-2-dependency-injection.md │ ├── 07-loop-through-angular-2-components-with-ng-for.md │ ├── 08-pass-values-into-angular-2-components-with-input.md │ ├── 09-sync-values-from-inputs-with-angular-2-s-ng-model-two-way-binding.md │ ├── 10-pass-events-from-angular-2-components-with-output.md │ ├── 11-write-css-inside-of-angular-2-components.md │ ├── 12-apply-css-classes-conditionally-with-angular-2-s-ng-class.md │ ├── 13-use-global-css-inside-angular-2-components.md │ └── images │ ├── angular-apply-css-classes-conditionally-with-angular-2-s-ngclass-green-border-on-mousedown.gif │ ├── angular-create-a-simple-angular-2-component-component-hierarchy.png │ ├── angular-create-a-simple-angular-2-component-our-first-component.png │ ├── angular-loop-through-angular-2-components-with-ngfor-list-of-messages-displayed.png │ ├── angular-manage-angular-2-elements-with-events-and-refs-reference-equals-element-itself.png │ ├── angular-pass-events-from-angular-2-components-with-output-update-event-console.png │ ├── angular-pass-values-into-angular-2-components-with-input-message-display.png │ ├── angular-pass-values-into-angular-2-components-with-input-simple-form-loop.png │ ├── angular-provide-and-share-values-with-angular-2-dependency-injection-api-injection-display.png │ ├── angular-say-hello-world-to-angular-2-cli-default-page.png │ ├── angular-say-hello-world-to-angular-2-lets-get-started-webpage.png │ ├── angular-share-services-and-data-with-angular-2-dependency-injection-mailservice-message-display.png │ ├── angular-sync-values-from-inputs-with-angular-2-s-ngmodel-two-way-binding-externally-change-message-within-input-box.gif │ ├── angular-sync-values-from-inputs-with-angular-2-s-ngmodel-two-way-binding-input-changes-message.png │ ├── angular-use-global-css-inside-angular-2-components-grab-classes-from-global-stylesheet.png │ ├── angular-use-global-css-inside-angular-2-components-ignoring-global-styles.png │ ├── angular-use-global-css-inside-angular-2-components-universally-applied-css.png │ ├── angular-write-css-inside-of-angular-2-components-input-text-bold-on-focus-and-button-border.png │ ├── angular-write-css-inside-of-angular-2-components-margin-bottom-simple-form-component.png │ └── angular-write-css-inside-of-angular-2-components-styles-isolated-within-component.png ├── getting-started-with-recoil-in-react-1fca ├── notes │ ├── 00_react-set-up-recoil-in-a-new-react-app.md │ ├── 01_react-create-shared-state-with-recoil-in-a-react-app.md │ ├── 02_react-read-a-value-from-recoil-with-userecoilvalue.md │ ├── 03_react-compute-a-value-in-recoil-using-a-selector.md │ ├── 04_react-write-a-custom-recoil-hook-to-reset-a-value-in-the-recoil-state.md │ └── 05_react-use-async-functions-in-a-recoil-selector.md └── rubric.md ├── graphql-query-language ├── README.md └── notes │ ├── 01-send-a-query-with-graphql-playground.md │ ├── 02-query-a-list-of-objects-with-graphql.md │ ├── 03-query-an-enumeration-type-with-graphql.md │ ├── 04-send-a-nested-graphql-query.md │ ├── 05-filter-a-qraphql-query-result-using-qrguments.md │ ├── 06-renaming-fields-with-graphql-aliases.md │ ├── 07-use-variables-to-filter-a-query-result-with-graphql.md │ ├── 08-query-connected-data-with-the-graphql-query-language.md │ ├── 09-create-operation-names-for-graphql-queries.md │ ├── 10-use-an-input-type-to-create-an-account-with-graphql-mutation.md │ ├── 11-authenticate-a-user-with-a-graphql-mutation.md │ ├── 12-send-check-out-mutation-with-graphql-as-an-authorized-user.md │ ├── 13-change-check-in-status-with-a-graphql-mutation.md │ ├── 14-reuse-graphql-selection-sets-with-fragments.md │ ├── 15-explore-refactored-graphql-queries.md │ ├── 16-query-graphql-interface-types-in-graphql-playground.md │ ├── 17-query-lists-of-multiple-types-using-a-union-in-graphql.md │ ├── 18-listen-for-data-changes-in-realtime-with-graphql-subscription.md │ └── 19-query-a-graphql-apis-types-with-introspection-queries.md ├── introduction-to-state-machines-using-xstate ├── README.md └── notes │ ├── 01_xstate-course-intro-and-overview.md │ ├── 02_javascript-eliminate-boolean-explosion-by-enumerating-states.md │ ├── 03_xstate-replace-enumerated-states-with-a-state-machine.md │ ├── 04_xstate-use-an-interpreter-to-instantiate-a-machine.md │ ├── 05_xstate-use-xstate-viz-to-visually-develop-and-test-your-machine.md │ ├── 06_xstate-add-actions-to-transitions-to-fire-side-effects.md │ ├── 07_xstate-trigger-actions-when-entering-and-exiting-a-xstate-state.md │ ├── 08_xstate-replace-inline-functions-with-string-shorthands.md │ ├── 09_xstate-use-internal-transitions-in-xstate-to-avoid-state-exit-and-re-entry.md │ ├── 10_xstate-send-events-to-the-machine-with-the-xstate-send-action-creator.md │ ├── 11_xstate-track-infinite-states-with-with-xstate-context.md │ ├── 12_xstate-how-action-order-affects-assigns-to-context-in-a-xstate-machine.md │ ├── 13_xstate-use-activities-in-xstate-to-run-ongoing-side-effects.md │ ├── 14_xstate-conditionally-transition-to-states-with-guards-in-xstate.md │ ├── 15_xstate-simplify-state-explosion-in-xstate-through-hierarchical-states.md │ ├── 16_xstate-multiple-simultaneous-states-with-parallel-states.md │ ├── 17_xstate-recall-previous-states-with-xstate-history-states-nodes.md │ ├── 18_xstate-use-xstate-null-events-and-transient-transitions-to-immediately-transition-states.md │ ├── 19_xstate-delay-xstate-events-and-transitions.md │ ├── 20_xstate-invoking-a-promise-for-asynchronous-state-transitions-in-xstate.md │ ├── 21_xstate-invoke-callbacks-to-send-and-receive-events-from-a-parent-xstate-machine.md │ └── 22_xstate-invoke-child-xstate-machines-from-a-parent-machine.md ├── learn-the-fundamentals-of-css-and-sass-to-create-modern-and-responsive-layouts-f341 └── notes │ ├── 01-css-create-a-basic-responsive-grid-system-with-css-grid.md │ ├── 02-css-apply-aspect-ratio-sizing-to-images-with-css-object-fit.md │ ├── 03-css-create-basic-effects-with-css-box-shadow.md │ ├── 04-flexbox-create-an-automatically-responsive-flexbox-gallery.md │ ├── 05-egghead-create-viewport-responsive-layout-spacing-using-css-clamp.md │ ├── 06-scss-access-theme-color-values-with-sass.md │ ├── 07-css-apply-image-filter-effects-with-css.md │ ├── 08-css-define-and-use-css-custom-properties.md │ └── 09-html-5-create-an-accessible-group-of-form-fields.md ├── learn-to-use-vim ├── README.md ├── cheatsheet │ ├── Learn to use vim cheatsheet.xd │ └── learn-to-use-vim-cheatsheet.pdf └── notes │ ├── 01-intro-to-vim.md │ ├── 02-moving-around-in-vim.md │ ├── 03-vim-s-different-modes.md │ ├── 04-saving-files-in-vim.md │ ├── 05-vim-s-built-in-commands.md │ ├── 06-combining-vim-commands.md │ ├── 07-copy-and-paste-inside-of-vim.md │ ├── 08-configure-vim.md │ ├── 09-the-vim-config-file.md │ └── 10-introduction-to-vim-plugins.md ├── manage-application-state-with-jotai-atoms └── notes │ ├── 01-react-share-state-between-react-components-with-jotai-useatom.md │ ├── 02-egghead-derive-state-from-a-jotai-atom-in-react.md │ ├── 03-egghead-prevent-rerenders-and-add-functionality-with-jotai-write-only-at.md │ ├── 04-react-structure-jotai-atoms-and-add-functionality-to-a-react-app.md │ ├── 05-react-preserve-state-by-combining-multiple-jotai-atoms-into-one-atom.md │ ├── 06-react-add-additional-functionality-by-creating-jotai-atoms-that-hold-atoms.md │ ├── 07-react-compose-jotai-atoms-to-update-atom-values-from-different-react-components.md │ ├── 08-react-delete-data-in-a-jotai-atom-by-composing-and-filtering-atoms.md │ ├── 09-react-undo-actions-on-state-by-implementing-an-undohistory-feature-with-jotai-atoms.md │ └── 10-react-isolate-state-in-an-application-with-jotai-provider.md ├── manage-complex-tic-tac-toe-game-state-in-react-dddda3f8 ├── course-rubric-rquality-results.md └── notes │ ├── 01-javascript-create-a-2-dimensional-grid-for-our-tic-tac-toe-game.md │ ├── 02-css-map-over-a-2-dimensional-array-to-create-a-game-grid-in-react-with-css-grid.md │ ├── 03-react-convert-a-3x3-tic-tac-toe-grid-interactive-by-adding-buttons-in-react.md │ ├── 04-react-handle-user-input-by-adding-state-to-the-tic-tac-toe-grid-with-react-usereducer.md │ ├── 05-react-reset-react-state-with-a-button-and-function-in-our-tic-tac-toe-game.md │ ├── 06-javascript-check-for-winning-conditions-in-react-usereducer-for-tic-tac-toe.md │ └── 07-javascript-prevent-impossible-states-and-check-for-draw-conditions-with-guard-statements-in-react.md ├── manage-react-state-with-recoil-fe987643 ├── README.md └── notes │ ├── 01-react-update-recoil-state-in-react-using-userecoilstate.md │ ├── 02-react-display-computed-data-using-recoil-selectors-in-react.md │ ├── 03-react-use-selectorfamily-to-take-arguments-in-your-recoil-selectors.md │ ├── 04-react-use-recoil-selectors-to-make-api-calls-in-react.md │ ├── 05-react-handle-recoil-asynchronous-selectors-using-loadables-in-react.md │ └── 06-react-choose-the-right-hook-for-your-recoil-state.md ├── manipulacion-eficiente-de-arreglos-con-javascript-1e17fc6f └── notes │ ├── 01-javascript-4-formas-de-llenar-un-arreglo-en-javascript.md │ ├── 02-javascript-3-formas-de-actualizar-un-arreglo-de-objetos-en-javascript.md │ ├── 03-javascript-como-eliminar-elementos-dentro-de-un-arreglo.md │ └── 04-javascript-4-formas-de-remover-elementos-duplicados-de-un-arreglo-con-javascript.md ├── merge-objects-in-javascript-34b172d4 ├── SUMMARY.md └── notes │ ├── 01_javascript-shallow-merge-two-objects-in-javascript.md │ └── 02_javascript-deep-merge-objects-in-javascript-with-spread-lodash-and-deepmerge.md ├── modern-redux-with-redux-toolkit-rtk-and-typescript-64f243c8 ├── SUMMARY.md └── notes │ ├── 01_react-intro-to-modern-redux-with-rtk-and-typescript.md │ ├── 02_react-setup-and-explore-our-shopping-cart-application-to-learn-redux-with-typescript.md │ ├── 03_react-add-redux-and-the-redux-toolkit-rtk-to-an-existing-application.md │ ├── 04_react-splitting-our-redux-store-into-multiple-slices-using-the-createslice-method.md │ ├── 05_react-creating-a-rootstate-type-and-typed-hooks-for-type-aware-redux-interactions.md │ ├── 06_react-access-redux-data-in-a-component-with-the-typescript-enabled-useappselector-hook.md │ ├── 07_react-create-a-reducer-with-redux-toolkit-and-dispatch-its-action-with-the-useappdispatch-hook.md │ ├── 08_react-building-a-reducer-method-to-add-an-item-to-the-shopping-cart.md │ ├── 09_react-create-a-selector-to-aggregate-data-from-our-redux-store.md │ ├── 10_react-use-createselector-from-redux-toolkit-to-build-a-memoized-selector.md │ ├── 11_react-combining-data-from-two-redux-slices-to-build-our-shopping-cart.md │ ├── 12_react-aggregate-price-information-from-two-different-slices-with-createselector.md │ ├── 13_react-how-to-apply-types-to-redux-selectors.md │ ├── 14_react-adding-a-button-that-dispatches-an-action-to-redux-to-remove-an-item-from-the-shoppingcart.md │ ├── 15_react-dispatching-actions-to-redux-when-an-input-field-fires-its-blur-event-with-typescript.md │ ├── 16_react-using-typescript-and-redux-to-model-the-different-states-of-our-checkout-form.md │ ├── 17_react-handling-custom-actions-in-our-slice-with-extrareducers-and-the-builder-api.md │ ├── 18_react-using-thunks-to-dispatch-actions-over-time.md │ ├── 19_react-using-createasyncthunk-and-the-builder-api-to-generate-redux-actions-for-an-api-call.md │ ├── 20_react-handling-errors-in-async-thunks-with-builder-addcase.md │ ├── 21_react-using-the-response-from-an-async-thunk-to-update-the-redux-state.md │ ├── 22_react-accessing-global-state-inside-of-async-thunks-with-typescript.md │ └── 23_react-using-the-redux-devtool-support-built-in-to-redux-toolkit.md ├── nuevas-caracteristicas-de-es2020-en-javascript-dd47b252 ├── SUMMARY.md └── notes │ ├── 01-javascript-encadenamiento-opcional-en-javascript.md │ ├── 02-javascript-operador-fusion-nula-nullish-coalescing-en-javascript.md │ └── 03-javascript-importar-modulos-de-javascript-de-forma-dinamica-en-el-navegador.md ├── package.json ├── react-crash-course-with-hooks-ca06 └── notes │ ├── 00_egghead-write-your-first-react-component-with-codesandbox-io.md │ ├── 01_egghead-how-react-works.md │ ├── 02_javascript-think-in-react-by-breaking-your-ui-into-components.md │ ├── 03_javascript-write-a-custom-function-component-in-react-with-jsx.md │ ├── 04_javascript-building-a-tree-of-ui-components-in-react-with-children-or-with-self-closing-tags.md │ ├── 05_javascript-reusing-custom-react-components-by-passing-data-down-as-props.md │ ├── 06_javascript-create-state-data-that-can-change-in-a-react-component-with-usestate.md │ ├── 07_javascript-create-a-button-in-react-that-changes-local-state-and-automatically-updates-the-ui.md │ ├── 08_javascript-display-a-list-in-react-by-looping-over-an-array-of-items.md │ ├── 09_javascript-adding-styles-to-react-components-with-css-or-inline-styles.md │ └── 10_javascript-perform-asynchronous-actions-like-fetching-http-data-in-react-with-useeffect.md ├── react-real-time-messaging-with-graph-ql-using-urql-and-one-graph ├── README.md ├── assets │ ├── egghead-write-a-graphql-subscription-query-in-a-graphiql-editor-request-response.gif │ ├── egghead-write-a-graphql-subscription-query-in-a-graphiql-editor-websockets.gif │ ├── graphql-query-multiple-services-with-onegraph-graphiql-editor-onegraph-communication.png │ ├── graphql-query-multiple-services-with-onegraph-graphiql-editor-onegraph-payload.png │ ├── graphql-query-multiple-services-with-onegraph-graphiql-editor-traditional-communication.png │ └── graphql-query-multiple-services-with-onegraph-graphiql-editor-traditional-payloads.png ├── exercises │ ├── README.md │ └── community-solutions.md └── notes │ ├── 01-graphql-query-multiple-services-with-onegraph-graphiql-editor.md │ ├── 02-graphql-query-multiple-services-with-urqls-graphql-client-in-react.md │ ├── 03-graphql-refactor-commonly-used-variables-into-a-utils-file-to-be-shared-across-our-react-app.md │ ├── 04-graphql-write-an-authenticated-graphql-query-in-onegraph.md │ ├── 05-graphql-install-and-create-an-onegraph-authentication-object-within-a-react-application.md │ ├── 06-graphql-create-an-authprovider-component-for-our-react-application-to-use-through-react-context.md │ ├── 07-08-egghead-authprovider-component-and-pass-auth-headers-to-urql-fetchOptions.md │ ├── 09-graphql-query-github-comments-with-onegraph-through-urql-s-client-in-react.md │ ├── 10-graphql-display-graphql-data-with-a-react-component.md │ ├── 11-graphql-style-a-list-component.md │ ├── 12-graphql-use-a-graphql-mutation-to-create-a-github-issue-comment.md │ ├── 13-graphql-use-urqls-usemutation-to-create-github-issues-in-a-react-app.md │ ├── 14-css-style-a-react-input-component-with-css-in-js.md │ ├── 15-graphql-write-a-graphql-subscription-query-in-the-graphiql-editor.md │ ├── 16-react-extract-a-react-view-component-from-a-commentquery-component.md │ ├── 17-react-write-a-subscription-graphql-query-in-react-with-urql.md │ ├── 18-react-reduce-a-graphql-subscription-stream-into-a-collection-with-urql.md │ ├── 19-react-display-graphql-subscription-results-in-a-react-ui.md │ └── 20-react-use-a-graphql-query-and-subscription-together-to-fetch-the-history-and-current-comments.md ├── scale-react-development-with-nx ├── README.md └── notes │ ├── 01-create-a-new-empty-nx-workspace.md │ ├── 02-generate-a-new-react-app-with-nx.md │ ├── 03-generate-new-projects-for-nx-with-nx-console.md │ ├── 04-running-a-react-app-in-the-browser-with-nx.md │ ├── 05-install-and-use-external-npm-packages-in-an-nx-workspace.md │ ├── 06-add-styling-to-a-react-app-inside-an-nx-workspace.md │ ├── 07-configure-assets-for-my-react-app-in-an-nx-workspace.md │ ├── 08-create-a-shared-react-library-in-an-nx-workspace.md │ ├── 09-generate-a-typescript-library-in-an-nx-workspace.md │ ├── 10-use-the-nx-dependency-graph-to-visualize-your-monorepo-structure.md │ ├── 11-create-react-feature-libraries-in-an-nx-workspace.md │ ├── 12-create-an-express-backend-api-in-an-nx-workspace.md │ ├── 13-use-run-commands-to-launch-the-api-and-app-of-an-nx-workspace.md │ ├── 14-connect-to-an-express-js-api-from-a-react-app-in-an-nx-workspace.md │ ├── 15-share-and-reuse-functionality-with-libraries-in-nx.md │ ├── 16-share-code-between-a-react-frontend-and-node-js-backend-application-in-nx.md │ ├── 17-use-storybook-to-develop-react-components-in-nx.md │ ├── 18-use-cypress-and-storybook-to-test-your-react-components-in-isolation.md │ ├── 19-run-jest-tests-for-a-react-app-with-nx.md │ ├── 20-building-your-react-app-with-nx.md │ ├── 21-linting-a-react-app-with-nx.md │ ├── 22-scale-ci-runs-with-nx-affected-commands.md │ └── 23-speed-up-with-nx-computation-caching.md ├── serverless-cf0acfbf └── notes │ ├── 00_egghead-serverless-set-up-project.md │ ├── 01_egghead-serverless-set-up-local-dev.md │ ├── 02_egghead-serverless-netlify-dev-typescript.md │ ├── 03_egghead-serverless-add-form.md │ ├── 04_egghead-serverless-submit-function.md │ ├── 05_egghead-serverless-submit-form-to-function.md │ └── 06_egghead-serverless-deploy.md ├── simplify-react-apps-with-react-hooks ├── notes │ ├── 02-react-class-component-to-function-component.md │ ├── 03-deep-comparison-with-useref.md │ ├── 04-safe-setstate-on-mounted-component.md │ ├── 05-06-generic-code-to-custom-hook.md │ ├── 07-refactor-class-component-using-useContext.md │ ├── 08-refactor-renderprop-using-custom-hook.md │ ├── 09-componentdidmount-componentwillunmount-refactor.md │ ├── 10-dynamic-import-using-lazy-suspense.md │ └── 11-preload-components-using-useeffect.md └── readme.md ├── src ├── index.js └── public │ ├── error.html │ ├── index.html │ └── success.html ├── sync-state-across-components-with-recoil-in-react ├── 01-use-recoil-atom-to-share-state-between-two-react-components.md ├── 02-use-userecoilvalue-hook-to-read-a-value-from-a-recoil-atom.md └── 03-use-selectors-to-calculate-derived-data-based-on-state-stored-within-a-recoil-atom.md ├── synchronize-client-and-server-state-in-react-using-apollo-client-a45b3b89 ├── SUMMARY.md └── notes │ ├── 01_egghead-perform-graphql-queries-using-apollo-s-usequery-hook.md │ ├── 02_egghead-why-have-a-client-side-graphql-cache.md │ ├── 03_egghead-use-fetch-policies-in-apollo-to-keep-your-queries-fast-and-fresh-with-the-latest-data.md │ ├── 04_egghead-handle-loading-states-for-your-graphql-queries.md │ ├── 05_egghead-handle-graphql-query-error-states-using-apollo.md │ ├── 06_egghead-use-the-retrylink-in-apollo-to-retry-queries-after-an-error.md │ ├── 07_egghead-make-graphql-mutations-with-the-usemutation-apollo-hook.md │ ├── 08_egghead-understand-how-apollo-stores-data-in-its-cache.md │ ├── 09_egghead-update-the-local-cache-automatically-when-making-mutations.md │ ├── 10_egghead-optimise-queries-to-ensure-all-entities-are-normalised-in-the-apollo-cache.md │ ├── 11_egghead-handle-item-deletions-in-apollo-using-refetchqueries.md │ ├── 12_egghead-manually-modify-the-cache-to-remove-deleted-items.md │ ├── 13_egghead-use-optimistic-updates-to-build-uis-that-react-immediately-to-user-actions.md │ ├── 14_egghead-evict-deleted-items-from-the-apollo-cache.md │ ├── 15_egghead-use-fetchmore-and-merge-field-policies-to-dynamically-load-more-items-into-a-list.md │ ├── 16_egghead-use-read-field-policies-to-query-local-client-state.md │ ├── 17_egghead-use-the-readfield-helper-to-get-the-id-of-items-in-read-field-policies.md │ ├── 18_egghead-use-reactive-variables-to-hold-local-client-state-in-apollo-s-cache.md │ ├── 19_egghead-implement-cache-redirect-policies-to-avoid-slow-network-requests-for-new-queries.md │ ├── 20_egghead-incrementally-migrate-from-rest-to-graphql-using-the-restlink.md │ ├── 21_egghead-keep-queries-in-sync-with-the-backend-by-polling-for-new-data.md │ ├── 22_egghead-subscribe-to-immediate-live-updates-from-your-server.md │ ├── 23_egghead-append-graphql-subscription-updates-to-existing-queries.md │ └── 24_egghead-provide-quick-app-start-up-times-by-syncing-the-apollo-cache-with-local-storage.md ├── test-react-components-with-enzyme-and-jest ├── README.md └── notes │ ├── 01-course-overview-testing-react-components-with-enzyme-and-jest.md │ ├── 02-install-enzyme-and-configure-jest.md │ ├── 03-test-against-different-react-releases-with-enzyme.md │ ├── 04-shallow-render-a-react-component-with-enzyme.md │ ├── 05-find-nodes-from-a-shallow-rendered-component.md │ ├── 06-understand-the-different-accepted-selectors-in-enzyme.md │ ├── 07-test-enzyme-rendered-components-with-jest-snapshots.md │ ├── 08-test-react-component-props-with-enzyme-and-jest.md │ ├── 09-fully-render-react-components-with-enzyme.md │ ├── 10-test-simulated-event-handlers-with-enzyme.md │ ├── 11-test-new-component-state-with-set-state-in-enzyme.md │ ├── 12-test-react-component-lifecycle-methods-with-enzyme.md │ ├── 13-test-react-component-methods-with-enzyme.md │ ├── 14-test-redux-connect-components-with-enzyme.md │ └── 15-testing-react-forms-with-enzyme.md ├── testing ├── README.MD └── notes │ └── test.md ├── testing2 ├── README.MD └── lessons │ └── test.md ├── the-beginner-s-guide-to-react ├── README.md └── notes │ ├── 00-react-a-beginners-guide-to-react-introduction.md │ ├── 01-react-create-a-user-interface-with-vanilla-javascript-and-dom.md │ ├── 02-react-create-a-user-interface-with-react-s-createelement-api.md │ ├── 03-react-create-a-user-interface-with-react-s-jsx-syntax.md │ ├── 04-react-use-jsx-effectively-with-react.md │ ├── 05-react-render-two-elements-side-by-side-with-react-fragments.md │ ├── 06-react-create-a-simple-reusable-react-component-50d59130.md │ ├── 07-react-validate-custom-react-component-props-with-proptypes-9e1b5b13.md │ ├── 08-react-understand-and-use-interpolation-in-jsx.md │ ├── 09-react-rerender-a-react-application-bea3a0e6.md │ ├── 10-react-style-react-components-with-classname-and-inline-styles.md │ ├── 11-react-use-event-handlers-with-react-bd53256d.md │ ├── 12-react-manage-state-in-a-react-component-with-the-usestate-hook.md │ ├── 13-react-manage-side-effects-in-a-react-component-with-the-useeffect-hook.md │ ├── 14-react-use-a-lazy-initializer-with-usestate.md │ ├── 15-react-manage-the-useeffect-dependency-array.md │ ├── 16-react-create-reusable-custom-hooks.md │ ├── 17-react-manipulate-the-dom-with-react-refs-cad5c6be.md │ ├── 18-react-understand-the-react-hook-flow.md │ ├── 19-react-make-basic-forms-with-react-cfc2ec08.md │ ├── 20-react-make-dynamic-forms-with-react-d69753ec.md │ ├── 21-react-controlling-form-values-with-react-4627dd2d.md │ ├── 22-react-using-react-error-boundaries-to-handle-errors-in-react-components.md │ ├── 23-react-use-the-key-prop-when-rendering-a-list-with-react-12564a86.md │ ├── 24-react-lifting-and-colocating-react-state.md │ ├── 25-react-make-http-requests-with-react-2fc53967.md │ ├── 26-react-handle-http-errors-with-react.md │ ├── 27-react-install-and-use-react-devtools.md │ ├── 28-react-build-and-deploy-a-react-application-with-codesandbox-github-and-netlify.md │ ├── 29-react-a-beginners-guide-to-react-outro.md │ └── images │ ├── logo.png │ ├── react-a-beginners-guide-to-react-introduction-setupsetup.png │ ├── react-build-and-deploy-a-react-application-with-codesandbox-github-and-netlify-codesandbox.png │ ├── react-build-and-deploy-a-react-application-with-codesandbox-github-and-netlify-deploy.png │ ├── react-build-and-deploy-a-react-application-with-codesandbox-github-and-netlify-website.png │ ├── react-create-a-user-interface-with-react-s-jsx-syntax-babel.png │ ├── react-install-and-use-react-devtools-devtools.png │ ├── react-install-and-use-react-devtools-devtools2.png │ ├── react-install-and-use-react-devtools-filter.png │ ├── react-install-and-use-react-devtools-profiler.png │ ├── react-install-and-use-react-devtools-twitter.png │ └── react-understand-the-react-hook-flow-hook-flow.png ├── thinking-reactively-with-rxjs ├── README.md └── notes │ ├── 01-rxjs-course-intro.md │ ├── 02-rxjs-use-reactive-rxjs-based-solutions-for-complex-problems.md │ ├── 03-rxjs-break-down-a-requirement-into-small-problems.md │ ├── 04-rxjs-pipe-events-to-numbers-and-maintain-a-running-count-using-the-scan-operator.md │ ├── 05-rxjs-create-safe-and-predictable-observable-abstractions.md │ ├── 06-rxjs-maintain-shared-observable-state-using-the-scan-and-sharereplay-operators.md │ ├── 07-rxjs-use-the-filter-and-pairwise-operators-to-determine-when-to-show-and-hide-the-spinner.md │ ├── 08-rxjs-build-an-observable-from-a-simple-english-requirement.md │ ├── 09-rxjs-expose-complex-reactive-code-as-simple-function-based-apis.md │ ├── 10-rxjs-encapsulate-complex-imperative-logic-in-a-simple-observable.md │ ├── 11-rxjs-extend-your-reactive-logic-using-observable-like-proxies-that-delay-or-drop-events.md │ ├── 12-rxjs-use-combinelatest-to-only-emit-notifications-when-certain-events-have-happened.md │ ├── 13-rxjs-maintain-self-resetting-state-in-your-observable-streams-using-the-scan-operator.md │ ├── 14-rxjs-build-an-event-combo-observable.md │ ├── 15-rxjs-extend-promises-by-adding-custom-behaviour.md │ ├── 16-rxjs-simplify-usage-of-your-reactive-service-by-building-an-rxjs-operator-to-manage-it-for-you.md │ └── 17-rxjs-use-exhaustmap-to-wait-for-open-combos-to-finish-before-starting-new-ones.md ├── up-and-running-with-redux-observable └── notes │ ├── 01-react-add-redux-to-a-react-application.md │ ├── 02-redux-use-actions-to-modify-the-state-of-the-redux-store.md │ ├── 03-redux-observable-add-redux-observable-to-an-existing-redux-project.md │ ├── 04-redux-debug-redux-observable-with-redux-dev-tools.md │ ├── 05-redux-use-redux-observable-for-simple-ajax-requests.md │ ├── 06-redux-create-a-queue-of-ajax-requests-with-redux-observable-and-group-the-results.md │ ├── 07-redux-debounce-user-input-to-avoid-repeated-ajax-requests.md │ ├── 08-redux-handle-network-errors-gracefully.md │ ├── 09-redux-filter-a-stream-to-exclude-empty-values.md │ ├── 10-react-use-an-action-to-cancel-an-ajax-request.md │ ├── 11-react-testing-the-output-of-epics.md │ ├── 12-redux-mocking-an-ajax-request-when-testing-epics.md │ ├── 13-redux-use-tests-to-verify-updates-to-the-redux-store.md │ └── course-quality-rubric.md ├── up-and-running-with-svelte-3 ├── README.md └── notes │ ├── 01-wtf-is-svelte.md │ ├── 02-create-a-new-project-with-svelte-3.md │ ├── 03-add-data-to-html-markup-using-svelte-3.md │ ├── 04-up-and-running-with-svelte-3.md │ ├── 05-create-a-new-svelte-3-component-to-render-it-inside-of-another-component.md │ ├── 06-declare-and-pass-in-properties-to-a-svelte-3-component.md │ ├── 07-compose-components-with-slots-in-svelte-3.md │ ├── 08-use-named-slots-to-compose-multiple-components-in-svelte-3.md │ ├── 09-render-html-directly-into-a-component-in-svelte-3.md │ ├── 10-use-svelte-3-to-gracefully-show-and-hide-DOM-elements.md │ ├── 11-use-reactive-declarations-to-compute-component-state-in-svelte-3.md │ ├── 12-loop-over-and-render-a-list-of-data-using-an-each-block-in-Svelte-3.md │ ├── 13-use-await-block-to-wait-for-a-promise-and-handle-loading-state-in-svelte-3.md │ ├── 14-use-dom-events-and-event-modifiers-in-svelte-3.md │ ├── 15-use-an-onmount-lifecycle-method-to-fetch-and-render-data-in-svelte-3.md │ ├── 16-use-svelte-3-stores-to-share-data-between-multiple-unrelated-components.md │ ├── 17-set-a-value-to-a-svelte-3-store.md │ ├── 18-use-auto-subscriptions-in-svelte-3-to-avoid-memory-leaks-when-using-stores.md │ ├── 19-tween-a-value-and-dynamically-update-the-dom-with-svelte-3.md │ └── 20-create-a-new-svelte-project-with-typescript-support.md ├── web-components-f902 └── notes │ ├── 00_javascript-render-hello-world-text-with-custom-elements.md.md │ ├── 01_html-5-build-flexible-html-with-htmltemplates-using-slots-and-web-components.md.md │ ├── 02_html-5-avoiding-css-conflicts-via-shadow-dom-css-encapsulation.md.md │ ├── 03_html-5-allow-external-styling-of-a-web-component-s-shadow-dom.md.md │ ├── 04_javascript-web-components-explicit-api-s-using-class-methods.md.md │ ├── 05_javascript-using-custom-events-as-a-web-component-api.md.md │ └── 06_javascript-enabling-css-manipulation-inside-the-shadow-dom-using-the-part-pseudo-class.md.md └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .env 3 | .vscode 4 | node_modules -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/02-convert-a-hard-coded-string-using-react-intl-formatted-message-book-information.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/02-convert-a-hard-coded-string-using-react-intl-formatted-message-book-information.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/02-convert-a-hard-coded-string-using-react-intl-formatted-message-english-translation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/02-convert-a-hard-coded-string-using-react-intl-formatted-message-english-translation.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/02-convert-a-hard-coded-string-using-react-intl-formatted-message-french-translation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/02-convert-a-hard-coded-string-using-react-intl-formatted-message-french-translation.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/02-convert-a-hard-coded-string-using-react-intl-formatted-message-homepage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/02-convert-a-hard-coded-string-using-react-intl-formatted-message-homepage.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/02-convert-a-hard-coded-string-using-react-intl-formatted-message-spanish-translation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/02-convert-a-hard-coded-string-using-react-intl-formatted-message-spanish-translation.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/02-convert-a-hard-coded-string-using-react-intl-formatted-message-toggle-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/02-convert-a-hard-coded-string-using-react-intl-formatted-message-toggle-button.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/03-render-content-with-placeholders-using-react-intl-formatted-message-author-translate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/03-render-content-with-placeholders-using-react-intl-formatted-message-author-translate.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/03-render-content-with-placeholders-using-react-intl-formatted-message-average-rating-translate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/03-render-content-with-placeholders-using-react-intl-formatted-message-average-rating-translate.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/03-render-content-with-placeholders-using-react-intl-formatted-message-review-translate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/03-render-content-with-placeholders-using-react-intl-formatted-message-review-translate.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/04-render-content-with-markup-using-react-intl-formatted-html-message-markdown-render.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/04-render-content-with-markup-using-react-intl-formatted-html-message-markdown-render.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/05-format-date-and-time-using-react-intl-formatted-date-and-formatted-time-2-digit-date.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/05-format-date-and-time-using-react-intl-formatted-date-and-formatted-time-2-digit-date.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/05-format-date-and-time-using-react-intl-formatted-date-and-formatted-time-formatted-time.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/05-format-date-and-time-using-react-intl-formatted-date-and-formatted-time-formatted-time.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/05-format-date-and-time-using-react-intl-formatted-date-and-formatted-time-long-month-date.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/05-format-date-and-time-using-react-intl-formatted-date-and-formatted-time-long-month-date.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/05-format-date-and-time-using-react-intl-formatted-date-and-formatted-time-numeric-date.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/05-format-date-and-time-using-react-intl-formatted-date-and-formatted-time-numeric-date.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/06-format-a-date-relative-to-the-current-date-using-react-intl-formatted-relative-relative-date-days.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/06-format-a-date-relative-to-the-current-date-using-react-intl-formatted-relative-relative-date-days.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/06-format-a-date-relative-to-the-current-date-using-react-intl-formatted-relative-short.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/06-format-a-date-relative-to-the-current-date-using-react-intl-formatted-relative-short.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/06-format-a-date-relative-to-the-current-date-using-react-intl-formatted-relative-update-interval.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/06-format-a-date-relative-to-the-current-date-using-react-intl-formatted-relative-update-interval.gif -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/07-format-numbers-with-separators-and-currency-symbols-using-react-intl-formatted-number-currency.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/07-format-numbers-with-separators-and-currency-symbols-using-react-intl-formatted-number-currency.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/08-render-content-based-on-a-number-using-react-intl-formatted-message-conditional-reviews-many.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/08-render-content-based-on-a-number-using-react-intl-formatted-message-conditional-reviews-many.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/08-render-content-based-on-a-number-using-react-intl-formatted-message-reviews-before.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/08-render-content-based-on-a-number-using-react-intl-formatted-message-reviews-before.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/08-render-content-based-on-a-number-using-react-intl-formatted-message-zero-reviews.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/08-render-content-based-on-a-number-using-react-intl-formatted-message-zero-reviews.png -------------------------------------------------------------------------------- /add-internationalization-to-react-app-using-react-intl/notes/images/09-use-a-react-intl-higher-order-component-to-format-messages-and-get-current-locale-object-placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/add-internationalization-to-react-app-using-react-intl/notes/images/09-use-a-react-intl-higher-order-component-to-format-messages-and-get-current-locale-object-placeholder.png -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/exercises/01-import-data.md: -------------------------------------------------------------------------------- 1 | # Import Data 2 | 3 | ## 01. 4 | 5 | Your goal is to bulk import CSV data into the users, purchases, and products tables. You will have to use the method shown in https://egghead.io/lessons/postgresql-bulk-insert-and-export-data-with-csv-files to complete this exercise. 6 | -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/exercises/02-cast-int-to-string.md: -------------------------------------------------------------------------------- 1 | # Cast Int to String 2 | 3 | ## 01. 4 | 5 | Your goal is to cast an integer into a string. Use both the long and shorthand methods of casting types. You will have to research the correct syntax yourself in order to complete this exercise. -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/exercises/03-enum.md: -------------------------------------------------------------------------------- 1 | # Create a Custom ENUM Type 2 | 3 | ## 01. 4 | 5 | Your goal is to add role column to the users table. You've been asked to add the "buyer", "seller", and "admin" roles to the user. You will have to create an ENUM type and then alter the user's table. -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/exercises/04-profile.md: -------------------------------------------------------------------------------- 1 | # Profile Queries 2 | 3 | ## 01. 4 | 5 | The goal is to profile two queries. You've been asked to profile a query where the users are younger than 40 and another query where the users are older than 40. You will need to use analyze to see a difference. -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/exercises/06-filter-data.md: -------------------------------------------------------------------------------- 1 | # Filter Data 2 | 3 | ## 01. 4 | Your goal is to return all female users in their 20's that have purchased more than 100 products. You will need to filter aggregate and row data. 5 | 6 | ## 02. 7 | What other ways can you filter this data? 8 | How could find demographic purchases the most of a single product? -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/exercises/README.md: -------------------------------------------------------------------------------- 1 | # adv-sql 2 | -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/exercises/solutions/02-cast-int-to-string.md: -------------------------------------------------------------------------------- 1 | # Solutions 2 | 3 | ## 01. 4 | 5 | ### Longhand 6 | `select cast (10 as text);` 7 | 8 | ### Shorthand 9 | `select 10::text;` -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/exercises/solutions/03-enum.md: -------------------------------------------------------------------------------- 1 | # Solutions 2 | 3 | ## 01. 4 | First create the ENUM 5 | ```sql 6 | create type user_role as enum ('buyer', 'seller', 'admin'); 7 | ``` 8 | 9 | Then add the column to the users table 10 | ```sql 11 | alter table users add column role user_role; 12 | ``` 13 | -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/exercises/solutions/04-profile.md: -------------------------------------------------------------------------------- 1 | # Solutions 2 | 3 | ## 01. 4 | Profile users younger than 40 5 | ```sql 6 | explain analyse select * from users where age < 40; 7 | ``` 8 | 9 | Profile users older than 40 10 | ```sql 11 | explain analyse select * from users where age > 40; 12 | ``` 13 | 14 | What's the difference in performance time? -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/exercises/solutions/06-filter-data.md: -------------------------------------------------------------------------------- 1 | ```sql 2 | SELECT 3 | u.user_handle, 4 | sum(p.quantity) 5 | FROM 6 | users u 7 | LEFT JOIN 8 | purchases p 9 | ON 10 | u.user_handle = p.user_handle 11 | WHERE 12 | u.age > 19 13 | AND 14 | u.age < 30 15 | AND 16 | u.gender = 'Female' 17 | GROUP BY 18 | u.user_handle 19 | HAVING 20 | sum(p.quantity) > 100 21 | ORDER BY 22 | user_handle; 23 | ``` 24 | Answer: 25 | ``` 26 | user_handle | sum 27 | -------------+----- 28 | 2 | 146 29 | 36 | 126 30 | 93 | 110 31 | ``` -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/notes/images/bulk-insert-reverse-to.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/advanced-sql-for-professional-developers/notes/images/bulk-insert-reverse-to.png -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/notes/images/bulk-insert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/advanced-sql-for-professional-developers/notes/images/bulk-insert.png -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/notes/images/case-statement-anatomy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/advanced-sql-for-professional-developers/notes/images/case-statement-anatomy.jpg -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/notes/images/casting-types-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/advanced-sql-for-professional-developers/notes/images/casting-types-1.png -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/notes/images/casting-types-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/advanced-sql-for-professional-developers/notes/images/casting-types-2.png -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/notes/images/explain-sql-output.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/advanced-sql-for-professional-developers/notes/images/explain-sql-output.jpg -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/notes/images/json-data.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/advanced-sql-for-professional-developers/notes/images/json-data.png -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/notes/images/like-illustration.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/advanced-sql-for-professional-developers/notes/images/like-illustration.jpeg -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/notes/images/sql-bulkimport.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/advanced-sql-for-professional-developers/notes/images/sql-bulkimport.gif -------------------------------------------------------------------------------- /advanced-sql-for-professional-developers/notes/images/withwithoutfilter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/advanced-sql-for-professional-developers/notes/images/withwithoutfilter.jpg -------------------------------------------------------------------------------- /auditing-react-apps-for-accessibility-08733265/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/auditing-react-apps-for-accessibility-08733265/README.md -------------------------------------------------------------------------------- /auditing-react-apps-for-accessibility-08733265/notes/01-react-audit-component-accessibility-using-storybook.md: -------------------------------------------------------------------------------- 1 | # [Audit Component Accessibility Using Storybook]() 2 | 3 | 4 | 5 | 6 | To install storybook you need to run `npm install @storybook/addon-a11y --save-dev` or you can also use `yarn` 7 | 8 | 9 | 10 | 11 | 12 | You can find more information about the problems in the storybook website. 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd/notes/01-react-course-introduction-beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd.md: -------------------------------------------------------------------------------- 1 | ## :movie_camera: [Lesson 1](https://egghead.io/lessons/react-course-introduction-beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd) 2 | 3 | No code was done in this lesson. Just a quick overview of what is going to go on in the course. -------------------------------------------------------------------------------- /build-a-backend-with-prisma-in-a-typescript-node-project-ca6628d3/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-a-backend-with-prisma-in-a-typescript-node-project-ca6628d3/README.md -------------------------------------------------------------------------------- /build-a-backend-with-prisma-in-a-typescript-node-project-ca6628d3/notes/01-prisma-install-the-prisma-vs-code-extension.md: -------------------------------------------------------------------------------- 1 | # [Install the Prisma VS Code Extension](https://egghead.io/lessons/prisma-install-the-prisma-vs-code-extension) 2 | 3 | 4 | 5 | [Here](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma) is where you can download the Prisma VSCode Extension 6 | 7 | 8 | -------------------------------------------------------------------------------- /build-a-site-from-scratch-with-nextjs-typescript-emotion-and-netlify/notes/15-change-a-site-name-in-netlify.md: -------------------------------------------------------------------------------- 1 | # Change a site name in Netlify 2 | 3 | [Video Link](https://egghead.io/lessons/netlify-change-a-site-name-in-netlify?pl=build-a-blog-with-next-js-typescript-emotion-and-netlify-adcc) 4 | 5 | - With Netlify there are two main ways of changing the domain name. 6 | - You can change the site name (free but will end in `.netlify.app`) 7 | - Or you can use a custom domain that you've purchased. 8 | - 📜 [Netlify Docs on Custom Domains](https://docs.netlify.com/domains-https/custom-domains/) 9 | -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/13-react-get-previous-resource-values-with-react-s-usedeferredstate-hook.md: -------------------------------------------------------------------------------- 1 | # Get Previous Resource Values with React’s useDeferredState Hook 2 | 3 | **[📹 Video](https://egghead.io/lessons/react-get-previous-resource-values-with-react-s-usedeferredstate-hook)** 4 | 5 | TODO 6 | 7 | --- 8 | 9 | 📹 [Go to Previous Lesson](https://egghead.io/lessons/react-delay-the-appearance-of-a-loading-spinner-with-css-in-react) 10 | 📹 [Go to Next Lesson](https://egghead.io/lessons/react-hoist-react-component-state) 11 | -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/14-react-hoist-react-component-state.md: -------------------------------------------------------------------------------- 1 | # Hoist React Component State 2 | 3 | **[📹 Video](https://egghead.io/lessons/react-hoist-react-component-state)** 4 | 5 | TODO 6 | 7 | --- 8 | 9 | 📹 [Go to Previous Lesson](https://egghead.io/lessons/react-get-previous-resource-values-with-react-s-usedeferredstate-hook) 10 | 📹 [Go to Next Lesson](https://egghead.io/lessons/react-avoid-this-common-suspense-gotcha-in-by-reading-data-from-components) 11 | -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/15-react-avoid-this-common-suspense-gotcha-in-by-reading-data-from-components.md: -------------------------------------------------------------------------------- 1 | # Avoid this Common Suspense Gotcha in by Reading Data From Components 2 | 3 | **[📹 Video](https://egghead.io/lessons/react-avoid-this-common-suspense-gotcha-in-by-reading-data-from-components)** 4 | 5 | TODO 6 | 7 | --- 8 | 9 | 📹 [Go to Previous Lesson](https://egghead.io/lessons/react-hoist-react-component-state) 10 | 📹 [Go to Next Lesson](https://egghead.io/lessons/react-coordinate-fallback-rendering-with-the-react-suspenselist-component) 11 | -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/16-react-coordinate-fallback-rendering-with-the-react-suspenselist-component.md: -------------------------------------------------------------------------------- 1 | # Coordinate Fallback Rendering with the React SuspenseList Component 2 | 3 | **[📹 Video](https://egghead.io/lessons/react-coordinate-fallback-rendering-with-the-react-suspenselist-component)** 4 | 5 | TODO 6 | 7 | --- 8 | 9 | 📹 [Go to Previous Lesson](https://egghead.io/lessons/react-avoid-this-common-suspense-gotcha-in-by-reading-data-from-components) 10 | 📹 [Go to Next Lesson](https://egghead.io/lessons/react-reveal-suspense-components-in-order-with-suspenselist-s-revealorder-prop-in-react) 11 | -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/18-react-avoid-too-many-spinners-with-react-suspenselist-s-tail-prop.md: -------------------------------------------------------------------------------- 1 | # Avoid Too Many Spinners with React SuspenseList’s tail Prop 2 | 3 | **[📹 Video](https://egghead.io/lessons/react-avoid-too-many-spinners-with-react-suspenselist-s-tail-prop)** 4 | 5 | TODO 6 | 7 | --- 8 | 9 | 📹 [Go to Previous Lesson](https://egghead.io/lessons/react-reveal-suspense-components-in-order-with-suspenselist-s-revealorder-prop-in-react) 10 | 📹 [Go to Next Lesson](https://egghead.io/lessons/react-pass-react-components-a-usetransition-wrapped-state-setting-callback) 11 | -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/19-react-pass-react-components-a-usetransition-wrapped-state-setting-callback.md: -------------------------------------------------------------------------------- 1 | # Pass React Components a useTransition-Wrapped, State-Setting, Callback 2 | 3 | **[📹 Video](https://egghead.io/lessons/react-pass-react-components-a-usetransition-wrapped-state-setting-callback)** 4 | 5 | TODO 6 | 7 | --- 8 | 9 | 📹 [Go to Previous Lesson](https://egghead.io/lessons/react-avoid-too-many-spinners-with-react-suspenselist-s-tail-prop) 10 | 📹 [Go to Next Lesson](https://egghead.io/lessons/react-augment-react-resource-json-with-custom-properties) 11 | -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/20-react-augment-react-resource-json-with-custom-properties.md: -------------------------------------------------------------------------------- 1 | # Augment React Resource JSON with Custom Properties 2 | 3 | **[📹 Video](https://egghead.io/lessons/react-augment-react-resource-json-with-custom-properties)** 4 | 5 | TODO 6 | 7 | --- 8 | 9 | 📹 [Go to Previous Lesson](https://egghead.io/lessons/react-pass-react-components-a-usetransition-wrapped-state-setting-callback) 10 | 📹 [Go to Next Lesson](https://egghead.io/lessons/react-extract-reusable-react-components-with-an-as-prop-render-props-and-react-fragment) 11 | -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/21-react-extract-reusable-react-components-with-an-as-prop-render-props-and-react-fragment.md: -------------------------------------------------------------------------------- 1 | # Extract Reusable React Components with an As Prop, Render Props, and React.Fragment 2 | 3 | **[📹 Video](https://egghead.io/lessons/react-extract-reusable-react-components-with-an-as-prop-render-props-and-react-fragment)** 4 | 5 | TODO 6 | 7 | --- 8 | 9 | 📹 [Go to Previous Lesson](https://egghead.io/lessons/react-augment-react-resource-json-with-custom-properties) 10 | 📹 [Go to Next Lesson](https://egghead.io/lessons/react-connect-a-new-endpoints-in-a-react-suspense-app) 11 | -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/22-react-connect-a-new-endpoints-in-a-react-suspense-app.md: -------------------------------------------------------------------------------- 1 | # Connect a New Endpoints in a React Suspense App 2 | 3 | **[📹 Video](https://egghead.io/lessons/react-connect-a-new-endpoints-in-a-react-suspense-app)** 4 | 5 | TODO 6 | 7 | --- 8 | 9 | 📹 [Go to Previous Lesson](https://egghead.io/lessons/react-extract-reusable-react-components-with-an-as-prop-render-props-and-react-fragment) 10 | 📹 [Go to Next Lesson](https://egghead.io/lessons/react-provide-suspensified-data-to-react-components-with-context-and-usecontext) 11 | -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/23-react-provide-suspensified-data-to-react-components-with-context-and-usecontext.md: -------------------------------------------------------------------------------- 1 | # Provide Suspensified Data to React Components with Context and useContext 2 | 3 | **[📹 Video](https://egghead.io/lessons/react-provide-suspensified-data-to-react-components-with-context-and-usecontext)** 4 | 5 | TODO 6 | 7 | --- 8 | 9 | 📹 [Go to Previous Lesson](https://egghead.io/lessons/react-connect-a-new-endpoints-in-a-react-suspense-app) 10 | -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/images/03-review-an-aws-cloud-formation-stack-deployed-with-aws-cdk-trigger-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-react-suspense/notes/images/03-review-an-aws-cloud-formation-stack-deployed-with-aws-cdk-trigger-image.png -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/images/07-change-the-properties-of-a-lambda-function-deployed-with-aws-cdk-lambda-config-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-react-suspense/notes/images/07-change-the-properties-of-a-lambda-function-deployed-with-aws-cdk-lambda-config-image.png -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/images/08-attach-an-api-gateway-to-a-lambda-function-deployed-with-aws-cdk-api-gateway.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-react-suspense/notes/images/08-attach-an-api-gateway-to-a-lambda-function-deployed-with-aws-cdk-api-gateway.png -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/images/09-pass-environment-variables-to-a-lambda-function-deployed-with-aws-cdk-env-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-react-suspense/notes/images/09-pass-environment-variables-to-a-lambda-function-deployed-with-aws-cdk-env-image.png -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/images/11-create-and-deploy-an-s3-bucket-with-aws-cdk-s3-buckets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-react-suspense/notes/images/11-create-and-deploy-an-s3-bucket-with-aws-cdk-s3-buckets.png -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/images/12-make-the-contents-of-an-s3-bucket-deployed-with-cdk-public-closed-buckets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-react-suspense/notes/images/12-make-the-contents-of-an-s3-bucket-deployed-with-cdk-public-closed-buckets.png -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/images/15-create-a-custom-aws-cdk-construct-custom-construct-images.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-react-suspense/notes/images/15-create-a-custom-aws-cdk-construct-custom-construct-images.png -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/images/16-create-a-dynamo-db-table-with-aws-cdk-dynamodb-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-react-suspense/notes/images/16-create-a-dynamo-db-table-with-aws-cdk-dynamodb-image.png -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/images/16-create-a-dynamo-db-table-with-aws-cdk-storage-illustration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-react-suspense/notes/images/16-create-a-dynamo-db-table-with-aws-cdk-storage-illustration.png -------------------------------------------------------------------------------- /build-an-app-with-react-suspense/notes/images/25-deploy-a-site-with-https-support-behind-a-cdn-with-cdk-cdn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-react-suspense/notes/images/25-deploy-a-site-with-https-support-behind-a-cdn-with-cdk-cdn.png -------------------------------------------------------------------------------- /build-an-app-with-the-AWS-cloud-development-kit/exercises/community-solutions.md: -------------------------------------------------------------------------------- 1 | # Community Solutions 2 | 3 | - ⚛️ [React form powered by AWS](https://github.com/zacjones93/aws-cdk-performance-task) from zacjones93 -------------------------------------------------------------------------------- /build-an-app-with-the-AWS-cloud-development-kit/notes/26-destroy-an-aws-cdk-stack.md: -------------------------------------------------------------------------------- 1 | # Destroy an AWS CDK stack 2 | 3 | **[📹 Video](https://egghead.io/lessons/aws-destroy-an-aws-cdk-stack)** 4 | 5 | If at some point you want to delete your app (along with all of its resources), you just need to run: 6 | 7 | * `cdk destroy`. 8 | 9 | The only thing that won't get deleted is the `s3` `LogoBucket` which you can delete manually. 10 | 11 | 👍 And if you want to redeploy the app again in the future (assuming you didn't delete the code on your computer!), just run `cdk deploy` and your app will be live again. 12 | -------------------------------------------------------------------------------- /build-an-app-with-the-AWS-cloud-development-kit/notes/images/03-review-an-aws-cloud-formation-stack-deployed-with-aws-cdk-trigger-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-the-AWS-cloud-development-kit/notes/images/03-review-an-aws-cloud-formation-stack-deployed-with-aws-cdk-trigger-image.png -------------------------------------------------------------------------------- /build-an-app-with-the-AWS-cloud-development-kit/notes/images/07-change-the-properties-of-a-lambda-function-deployed-with-aws-cdk-lambda-config-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-the-AWS-cloud-development-kit/notes/images/07-change-the-properties-of-a-lambda-function-deployed-with-aws-cdk-lambda-config-image.png -------------------------------------------------------------------------------- /build-an-app-with-the-AWS-cloud-development-kit/notes/images/08-attach-an-api-gateway-to-a-lambda-function-deployed-with-aws-cdk-api-gateway.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-the-AWS-cloud-development-kit/notes/images/08-attach-an-api-gateway-to-a-lambda-function-deployed-with-aws-cdk-api-gateway.png -------------------------------------------------------------------------------- /build-an-app-with-the-AWS-cloud-development-kit/notes/images/09-pass-environment-variables-to-a-lambda-function-deployed-with-aws-cdk-env-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-the-AWS-cloud-development-kit/notes/images/09-pass-environment-variables-to-a-lambda-function-deployed-with-aws-cdk-env-image.png -------------------------------------------------------------------------------- /build-an-app-with-the-AWS-cloud-development-kit/notes/images/11-create-and-deploy-an-s3-bucket-with-aws-cdk-s3-buckets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-the-AWS-cloud-development-kit/notes/images/11-create-and-deploy-an-s3-bucket-with-aws-cdk-s3-buckets.png -------------------------------------------------------------------------------- /build-an-app-with-the-AWS-cloud-development-kit/notes/images/12-make-the-contents-of-an-s3-bucket-deployed-with-cdk-public-closed-buckets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-the-AWS-cloud-development-kit/notes/images/12-make-the-contents-of-an-s3-bucket-deployed-with-cdk-public-closed-buckets.png -------------------------------------------------------------------------------- /build-an-app-with-the-AWS-cloud-development-kit/notes/images/15-create-a-custom-aws-cdk-construct-custom-construct-images.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-the-AWS-cloud-development-kit/notes/images/15-create-a-custom-aws-cdk-construct-custom-construct-images.png -------------------------------------------------------------------------------- /build-an-app-with-the-AWS-cloud-development-kit/notes/images/16-create-a-dynamo-db-table-with-aws-cdk-dynamodb-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-the-AWS-cloud-development-kit/notes/images/16-create-a-dynamo-db-table-with-aws-cdk-dynamodb-image.png -------------------------------------------------------------------------------- /build-an-app-with-the-AWS-cloud-development-kit/notes/images/16-create-a-dynamo-db-table-with-aws-cdk-storage-illustration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-the-AWS-cloud-development-kit/notes/images/16-create-a-dynamo-db-table-with-aws-cdk-storage-illustration.png -------------------------------------------------------------------------------- /build-an-app-with-the-AWS-cloud-development-kit/notes/images/25-deploy-a-site-with-https-support-behind-a-cdn-with-cdk-cdn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-an-app-with-the-AWS-cloud-development-kit/notes/images/25-deploy-a-site-with-https-support-behind-a-cdn-with-cdk-cdn.png -------------------------------------------------------------------------------- /build-static-pages-dynamically-using-next-js-and-the-notion-api-34849fc4/notes/01_next-js-request-page-data-for-next-js-from-the-notion-api.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | `npm i @notionhq/client` 4 | 5 | 6 | 7 | 8 | 9 | [Notion - Authentication](https://developers.notion.com/reference/authentication) 10 | 11 | -------------------------------------------------------------------------------- /build-static-pages-dynamically-using-next-js-and-the-notion-api-34849fc4/notes/02_next-js-use-the-notion-api-to-request-block-data-in-next-js.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Next.js - next/link](https://nextjs.org/docs/api-reference/next/link) 4 | 5 | 6 | 7 | 8 | 9 | [Next.js - Dynamic Routes](https://nextjs.org/docs/routing/dynamic-routes) 10 | 11 | -------------------------------------------------------------------------------- /build-static-pages-dynamically-using-next-js-and-the-notion-api-34849fc4/notes/03_next-js-use-slugified-titles-for-url-in-next-js-with-the-notion-api.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/build-static-pages-dynamically-using-next-js-and-the-notion-api-34849fc4/notes/03_next-js-use-slugified-titles-for-url-in-next-js-with-the-notion-api.md -------------------------------------------------------------------------------- /build-static-pages-dynamically-using-next-js-and-the-notion-api-34849fc4/notes/04_next-js-request-notion-database-data-from-the-api-with-next-js.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [More filter conditions](https://developers.notion.com/reference/post-database-query#post-database-query-filter) 4 | 5 | -------------------------------------------------------------------------------- /build-static-pages-dynamically-using-next-js-and-the-notion-api-34849fc4/notes/05_next-js-request-paginated-data-from-notion-api-with-next-js.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Notion - Pagination](https://developers.notion.com/reference/pagination) 4 | 5 | -------------------------------------------------------------------------------- /build-static-pages-dynamically-using-next-js-and-the-notion-api-34849fc4/notes/06_next-js-mutate-database-fields-with-next-js-using-the-notion-api.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Next.js - API Routes](https://nextjs.org/docs/api-routes/introduction) 4 | 5 | -------------------------------------------------------------------------------- /build-static-pages-dynamically-using-next-js-and-the-notion-api-34849fc4/notes/07_next-js-use-next-js-incremental-static-regeneration-to-pregenerate-notion-api-pages-on-demand.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Next.js - Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration) 4 | 5 | -------------------------------------------------------------------------------- /building-a-customizable-animated-skeleton-loader-in-react-native-51f6231d/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/building-a-customizable-animated-skeleton-loader-in-react-native-51f6231d/README.md -------------------------------------------------------------------------------- /building-an-opengraph-image-generation-api-with-cloudinary-netlify-functions-and-react-914e/notes/07-puppeteer-setting-the-viewport-on-a-playwright-headless-browser.md: -------------------------------------------------------------------------------- 1 | # 7 - Setting the viewport on a Playwright headless browser 2 | 3 | [Video Link](https://egghead.io/lessons/puppeteer-setting-the-viewport-on-a-playwright-headless-browser) 4 | 5 | -------------------------------------------------------------------------------- /building-an-opengraph-image-generation-api-with-cloudinary-netlify-functions-and-react-914e/notes/images/Screen Shot 2020-08-11 at 9.09.39 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/building-an-opengraph-image-generation-api-with-cloudinary-netlify-functions-and-react-914e/notes/images/Screen Shot 2020-08-11 at 9.09.39 PM.png -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/01 - A Little Overview of Maps/03-update-the-avatar-image-to-a-picture-of-yourself.md: -------------------------------------------------------------------------------- 1 | # Update the Avatar Image to a Picture of Yourself 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-update-the-avatar-image-to-a-picture-of-yourself)** 4 | 5 | 💻 If you are ever lost, go to [starter template](https://github.com/colbyfayock/launchtime-workshop), open `lessons/01 - A Little Overview About Maps` 6 | 7 | Change the **LaunchTime** app avatar, by swapping the `avatar.jpg` asset with your own chosen asset inside the `shared-assets` folder. 8 | -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/02 - Add React Leaflet Map to a React App/08-style-leaflet-map-using-css.md: -------------------------------------------------------------------------------- 1 | # Style leaflet Map using CSS 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-style-leaflet-map-using-css)** 4 | 5 | Remove the extra padding from the `main` element to give the map more space to shine! 6 | 7 | ```js 8 | main { 9 | padding: 0; 10 | } 11 | ``` 12 | -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/03 - Customizing Maps with Mapbox/10-create-a-mapbox-account.md: -------------------------------------------------------------------------------- 1 | # Create a Mapbox Account 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-create-a-mapbox-account)** 4 | 5 | Create a free [Mapbox account](https://www.mapbox.com/). 6 | 7 | 🤓 Mapbox is a type of GIS (Geographic Information System) 8 | -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/03 - Customizing Maps with Mapbox/11-creating-a-map-style-in-mapbox.md: -------------------------------------------------------------------------------- 1 | # Creating a Map Style in Mapbox 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-creating-a-map-style-in-mapbox)** 4 | 5 | Once logged in, go to studio.mapbox.com (you can also select Studio from the dropdown menu - click on your Account icon). 6 | 7 | Click **New Style** and select your preferred map options (colors, styles). 8 | -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/03 - Customizing Maps with Mapbox/12-creating-an-api-key-in-mapbox.md: -------------------------------------------------------------------------------- 1 | # Creating an API key in Mapbox 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-creating-an-api-key-in-mapbox)** 4 | 5 | In Mapbox account dashboard (account.mapbox.com) click **Create a Token**. 6 | 7 | Give it a name and leave the checked options as they are. 8 | -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/03 - Customizing Maps with Mapbox/17-create-an-environment-variable-for-the-api-key.md: -------------------------------------------------------------------------------- 1 | # Create an Environment Variable for the API Key 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-create-an-environment-variable-for-the-api-key)** 4 | 5 | Time to get creative! Create a new style in Mapbox studio. 6 | 7 | Replace the `style_id` in the `.env.shared` file, restart the server and test out the new map. 8 | -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/04 - Add Your First Location Marker/19-find-our-favorite-location.md: -------------------------------------------------------------------------------- 1 | # Find Our Favorite Location 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-find-our-favorite-location)** 4 | 5 | To get the coordinates of a specific location, find the location on Google maps, right-click, select **What's here** and copy the coordinates. 6 | 7 | For example: 38.891652, -77.026070 (for Smithsonian museum) 8 | -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/05 - Leaflet State in a React App with Hooks/24-group-2-managing-map-data.md: -------------------------------------------------------------------------------- 1 | # Group 2 - Managing Map Data 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-group-2---managing-map-data)** 4 | 5 | In this lesson, we'll cover: 6 | 7 | - managing leaflet state with React hooks 8 | - What is GeoJSON? 9 | - how to add more data to our popups! 10 | -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/05 - Leaflet State in a React App with Hooks/29-review-a-simple-example-of-mismanaged-state.md: -------------------------------------------------------------------------------- 1 | # Review a Simple Example of Mismanaged State 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-review-a-simple-example-of-mismanaged-state)** 4 | 5 | A quick reminder to comment out (or delete) the initial Marker/Popup combo: 6 | 7 | ```js 8 | 9 | Smithsonian National Air and Space Museum 10 | 11 | ``` 12 | 13 | 👍 Instead, we'll be using the ones we created programmatically in the previous video. 14 | -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/06 - Your First GeoJSON Document/34-manually-add-a-new-restaurant-location-to-the-geo-json-document.md: -------------------------------------------------------------------------------- 1 | # Manually Add a New Restaurant Location to the GeoJSON Document 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-manually-add-a-new-restaurant-location-to-the-geojson-document)** 4 | 5 | Instead of placing a marker on the map, we can also create a GeoJSON object by inputting the coordinates manually. 6 | 7 | 👍 Some mapping interfaces put longitude first and latitude last, others swap the two - make sure to learn which order is correct! 8 | -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/06 - Your First GeoJSON Document/37-add-another-location-to-the-map.md: -------------------------------------------------------------------------------- 1 | # Add Another Location to the Map 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-add-another-location-to-the-map)** 4 | 5 | For extra practice, let's add another location to the GeoJSON object. 6 | 7 | Remember, there are two ways of doing it: 8 | 9 | 1. search for a location on GeoJSON.io and drag a marker to the location (to get all the data) 10 | 2. copy an existing `feature` and replace the latitude and longitude 11 | -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/07 - Smarter Popups with GeoJSON/43-change-the-background-color-of-the-popup.md: -------------------------------------------------------------------------------- 1 | # Change the Background Color of the Popup 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-change-the-background-color-of-the-popup)** 4 | 5 | We can add some additional styling by overriding the default styling from the default `leaflet-popup` class. 6 | 7 | The sky is the limit! 🌈 8 | -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/07 - Smarter Popups with GeoJSON/44-add-another-restaurant-attribute.md: -------------------------------------------------------------------------------- 1 | # Add Another Restaurant Attribute 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-add-another-restaurant-attribute)** 4 | 5 | Let's practice our GeoJSON wrangling by adding a new attribute of `vegan: true` for vegan-friendly locations. 6 | 7 | First, let's destructure the `vegan` attribute from the `properties` object. 8 | 9 | Then inside the HTML popup, we can add another `li` with: 10 | 11 | ```HTML 12 |
  • 13 | Vegan Friendly: ${vegan ? 'Yes' : 'No'} 14 |
    • 15 | ``` 16 | -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/08 - Markers and Shaded Regions/45-group-3-customizing-your-map.md: -------------------------------------------------------------------------------- 1 | # Group 3 - Customizing Your Map 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-group-3---customizing-your-map)** 4 | 5 | In this group of lessons, we'll: 6 | 7 | 1. add restaurant delivery zones (with a delivery radius) 8 | 2. replace the default markers (the location pins) with custom images 9 | 3. use Geolocation API to find locations closeby 10 | -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/08 - Markers and Shaded Regions/50-change-the-color-of-the-delivery-zone.md: -------------------------------------------------------------------------------- 1 | # Change the Color of the Delivery Zone 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-change-the-color-of-the-delivery-zone)** 4 | 5 | We can change the color of the delivery radius circle by adding the `color` option to the radius: 6 | 7 | ```js 8 | deliveryZoneCircle = L.circle(coordinates.reverse(), { 9 | radius: deliveryRadius, 10 | color: "red", 11 | }); 12 | ``` 13 | -------------------------------------------------------------------------------- /building-maps-with-react-leaflet/notes/10 - Leaflet's Geolocation API/61-clean-up-location-event-handler-resources-when-page-unmounts.md: -------------------------------------------------------------------------------- 1 | # Clean up Location Event handler Resources when Page Unmounts 2 | 3 | **[📹 Video](https://egghead.io/lessons/egghead-clean-up-location-event-handler-resources-when-page-unmounts)** 4 | 5 | Clean up time! 🧹 6 | 7 | Inside the `locationfound` event handler add: 8 | 9 | ```js 10 | return () => { 11 | map.off("locationfound", handleOnLocationFound); 12 | }; 13 | ``` 14 | 15 | **Aaaaaaaaaaaaaaaaaaaaaand, you did it! Course complete 🎉🎆🍾🎊💃** 16 | -------------------------------------------------------------------------------- /building-serverless-web-applications-with-react-aws-amplify/notes/images/05_aws-console-search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/building-serverless-web-applications-with-react-aws-amplify/notes/images/05_aws-console-search.png -------------------------------------------------------------------------------- /building-serverless-web-applications-with-react-aws-amplify/notes/images/05_aws-console.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/building-serverless-web-applications-with-react-aws-amplify/notes/images/05_aws-console.png -------------------------------------------------------------------------------- /composing-closures-and-callbacks-in-javascript/images/19-operators.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/composing-closures-and-callbacks-in-javascript/images/19-operators.png -------------------------------------------------------------------------------- /composing-closures-and-callbacks-in-javascript/images/egghead-exploring-the-patterns-in-the-operators-closures_callbacks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/composing-closures-and-callbacks-in-javascript/images/egghead-exploring-the-patterns-in-the-operators-closures_callbacks.png -------------------------------------------------------------------------------- /composing-closures-and-callbacks-in-javascript/images/javascript-compose-closures-and-callbacks-to-create-new-functions-compose-pipe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/composing-closures-and-callbacks-in-javascript/images/javascript-compose-closures-and-callbacks-to-create-new-functions-compose-pipe.png -------------------------------------------------------------------------------- /composing-closures-and-callbacks-in-javascript/images/javascript-create-an-ifelse-operator-to-fork-on-a-condition-ifElseOperator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/composing-closures-and-callbacks-in-javascript/images/javascript-create-an-ifelse-operator-to-fork-on-a-condition-ifElseOperator.png -------------------------------------------------------------------------------- /composing-closures-and-callbacks-in-javascript/images/javascript-walkthrough-the-data-flow-of-the-word-game-combine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/composing-closures-and-callbacks-in-javascript/images/javascript-walkthrough-the-data-flow-of-the-word-game-combine.png -------------------------------------------------------------------------------- /composing-closures-and-callbacks-in-javascript/images/javascript-walkthrough-the-data-flow-of-the-word-game-fetching_word.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/composing-closures-and-callbacks-in-javascript/images/javascript-walkthrough-the-data-flow-of-the-word-game-fetching_word.png -------------------------------------------------------------------------------- /composing-closures-and-callbacks-in-javascript/images/javascript-walkthrough-the-data-flow-of-the-word-game-initial_steps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/composing-closures-and-callbacks-in-javascript/images/javascript-walkthrough-the-data-flow-of-the-word-game-initial_steps.png -------------------------------------------------------------------------------- /composing-closures-and-callbacks-in-javascript/images/javascript-walkthrough-the-data-flow-of-the-word-game-repeatif_logic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/composing-closures-and-callbacks-in-javascript/images/javascript-walkthrough-the-data-flow-of-the-word-game-repeatif_logic.png -------------------------------------------------------------------------------- /composing-closures-and-callbacks-in-javascript/images/javascript-what-is-a-callback-in-javascript-callback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/composing-closures-and-callbacks-in-javascript/images/javascript-what-is-a-callback-in-javascript-callback.png -------------------------------------------------------------------------------- /composing-closures-and-callbacks-in-javascript/images/map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/composing-closures-and-callbacks-in-javascript/images/map.png -------------------------------------------------------------------------------- /composing-closures-and-callbacks-in-javascript/notes/01-intro-to-callbacks-broadcasters-and-listeners/01-what-is-a-closure-in-javascript.md: -------------------------------------------------------------------------------- 1 | # Lesson 1 - What is a Closure in Javascript 2 | 3 | [📹 Video](https://egghead.io/lessons/egghead-what-is-a-closure-in-javascript) 4 | 5 | - A closure is just a function that accesses things outside of it 6 | - It can capture anything outside of it and use that value each time the function is called 7 | 8 | _questions:_ 9 | 10 | - shouldn't `i` increase to 1 when logging `i++`? 11 | 12 | This is like a for loop, it wipes down the variable alignment. 13 | -------------------------------------------------------------------------------- /courses/architect-an-extensible-digital-garden-with-next-js-tailwind-and-nx-53f7628f/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/courses/architect-an-extensible-digital-garden-with-next-js-tailwind-and-nx-53f7628f/README.md -------------------------------------------------------------------------------- /courses/architect-an-extensible-digital-garden-with-next-js-tailwind-and-nx-53f7628f/notes/02-next-js-create-a-new-next-js-page-component-with-nx-generators.md: -------------------------------------------------------------------------------- 1 | # 2 - Create a new Next.js Page Component with Nx Generators 2 | 3 | [Video Link]() 4 | 5 | 6 | 7 | Nx has generators built in for us in its console, the best way to use them is to add the `Nx` plugging in your editor. 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /courses/architect-an-extensible-digital-garden-with-next-js-tailwind-and-nx-53f7628f/notes/12-mdx-render-markdown-with-next-mdx-remote-in-our-next-js-page-component.md: -------------------------------------------------------------------------------- 1 | # 12 - Render Markdown with next-mdx-remote in our Next.js Page Component 2 | 3 | [Video Link]() 4 | 5 | 6 | 7 | `yarn add next-mdx-remote --save-dev` 8 | 9 | 10 | 11 | 12 | 13 | 14 | ```jsx 15 | export function renderMarkdown(markdownContent: string) { 16 | return serialize(markdownContent || ''); 17 | } 18 | ``` 19 | 20 | -------------------------------------------------------------------------------- /courses/architect-an-extensible-digital-garden-with-next-js-tailwind-and-nx-53f7628f/notes/16-next-js-using-environment-variables-with-next-js-and-nx.md: -------------------------------------------------------------------------------- 1 | # 17 - Add Fast Refresh Support to our MDX Files with Nx Support for Custom Next.js Servers 2 | 3 | [Video Link]() 4 | 5 | 6 | 7 | [next:server documentation](https://nx.dev/l/a/next/server) 8 | 9 | 10 | 11 | 12 | 13 | 14 | `yarn add chokidar` 15 | 16 | -------------------------------------------------------------------------------- /courses/architect-an-extensible-digital-garden-with-next-js-tailwind-and-nx-53f7628f/notes/17-next-js-add-fast-refresh-support-to-our-mdx-files-with-nx-support-for-custom-next-js-servers.md: -------------------------------------------------------------------------------- 1 | # 16 - Using Environment Variables with Next.js and Nx 2 | 3 | [Video Link]() 4 | 5 | 6 | 7 | [Environment Variables in Nx](https://nx.dev/l/r/guides/environment-variables) 8 | 9 | 10 | 11 | 12 | 13 | 14 | [Environment Variables in Next.js](https://nextjs.org/docs/basic-features/environment-variables) 15 | 16 | -------------------------------------------------------------------------------- /courses/architect-an-extensible-digital-garden-with-next-js-tailwind-and-nx-53f7628f/notes/19-next-js-run-an-nx-generator-with-the-nx-console-vscode-extension.md: -------------------------------------------------------------------------------- 1 | # 19 - Run an Nx Generator With the Nx Console VSCode Extension 2 | 3 | [Video Link]() 4 | 5 | 6 | 7 | You can take advantage of the GUI experience by using the Nx console while creating a new article. 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /courses/architect-an-extensible-digital-garden-with-next-js-tailwind-and-nx-53f7628f/notes/20-next-js-add-prompts-to-an-nx-workspace-generator.md: -------------------------------------------------------------------------------- 1 | # 20 - Run an Nx Generator With the Nx Console VSCode Extension 2 | 3 | [Video Link]() 4 | 5 | 6 | 7 | To add prompts while creating a new article, you need to implement the following code for every input required: 8 | 9 | ```jsx 10 | "x-prompt": "What's the title of your new article?" 11 | ``` 12 | 13 | 14 | -------------------------------------------------------------------------------- /courses/architect-an-extensible-digital-garden-with-next-js-tailwind-and-nx-53f7628f/notes/27-next-js-export-a-next-js-application-with-nx.md: -------------------------------------------------------------------------------- 1 | # 27 - Export a Next.js Application with Nx 2 | [Video Link]() 3 | 4 | 5 | 6 | `yarn nx export site` 7 | 8 | 9 | 10 | 11 | 12 | - `cd dist/apps/site/exported` 13 | - `npx http-server` 14 | 15 | 16 | -------------------------------------------------------------------------------- /courses/architect-an-extensible-digital-garden-with-next-js-tailwind-and-nx-53f7628f/notes/29-nx-only-build-what-changed-with-nx-affected-commands.md: -------------------------------------------------------------------------------- 1 | # 29 - Only Build What Changed with Nx Affected Commands 2 | 3 | [Video Link]() 4 | 5 | # Notes 6 | 7 | 8 | 9 | `yarn nx dep-graph` 10 | 11 | 12 | 13 | 14 | 15 | `yarn nx g @nrwl/react:application reactapp` 16 | 17 | 18 | 19 | 20 | 21 | 22 | `yarn nx affected:dep-graph --base=25-export-nextjs-site` 23 | 24 | -------------------------------------------------------------------------------- /courses/architect-an-extensible-digital-garden-with-next-js-tailwind-and-nx-53f7628f/notes/30-mdx-register-our-markdown-articles-with-the-nx-dependency-graph.md: -------------------------------------------------------------------------------- 1 | # 30 - Register our Markdown Articles with the Nx Dependency Graph 2 | 3 | [Video Link]() 4 | 5 | # Notes 6 | 7 | 8 | 9 | `yarn nx dep-graph` 10 | 11 | 12 | 13 | 14 | 15 | ```json 16 | "site-articles": { 17 | "root": "_articles", 18 | "sourceRoot: "_articles", 19 | "projectType": "application", 20 | "target": {} 21 | } 22 | ``` 23 | 24 | 25 | -------------------------------------------------------------------------------- /courses/build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de/notes/nuxt-js-create-a-new-nuxt-project.md: -------------------------------------------------------------------------------- 1 | # 01 nuxt digital garden 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-01-nuxt-digital-garden-c0278cba?pl=build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de) 4 | 5 | 6 | 7 | `npm init nuxt-app my-digital-garden` 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de/notes/nuxt-js-create-dynamic-pages-to-render-content-pages.md: -------------------------------------------------------------------------------- 1 | # 06 nuxt digital garden 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-06-nuxt-digital-garden-19a46a31?pl=build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de) 4 | 5 | 6 | 7 | Using `_`, we can actually create [dynamic pages](https://nuxtjs.org/docs/directory-structure/pages/#dynamic-pages). You can name the file anything you want but it must be prefixed with an underscore. 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de/notes/nuxt-js-deploy-your-digital-garden-on-netlify.md: -------------------------------------------------------------------------------- 1 | # 10 nuxt digital garden 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-10-nuxt-digital-garden-a9350c48?pl=build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de) 4 | 5 | 6 | 7 | [Netlify.com](https://www.netlify.com/) 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de/notes/nuxt-js-explore-writing-content-in-markdown-files-using-nuxt-content.md: -------------------------------------------------------------------------------- 1 | # 03 nuxt digital garden 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-03-nuxt-digital-garden-7726f1d3?pl=build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de) 4 | 5 | 6 | 7 | [Writing Content](https://content.nuxtjs.org/writing/) 8 | 9 | -------------------------------------------------------------------------------- /courses/build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de/notes/nuxt-js-fetch-content-using-the-created-lifecycle-hook.md: -------------------------------------------------------------------------------- 1 | # 04 nuxt digital garden 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-04-nuxt-digital-garden-71ad75a4?pl=build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de) 4 | 5 | 6 | 7 | [v-for](https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for) is used to loop through a list of items based on an array. 8 | 9 | -------------------------------------------------------------------------------- /courses/build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de/notes/nuxt-js-statically-generate-notes-using-asyncdata.md: -------------------------------------------------------------------------------- 1 | # 07 nuxt digital garden 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-07-nuxt-digital-garden-2e0035bb?pl=build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de) 4 | 5 | 6 | 7 | Nuxt has two hooks for asynchronous data loading. [asyncData](https://nuxtjs.org/docs/features/data-fetching/) can only be placed on *page* components. 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de/notes/nuxt-js-use-frontmatter-to-add-metadata-to-notes.md: -------------------------------------------------------------------------------- 1 | # 05 nuxt digital garden 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-05-nuxt-digital-garden-d183e00e?pl=build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de) 4 | 5 | 6 | 7 | Frontmatter in markdown is used to create metadata where you can include a set of key/value pairs for additional information for your document. 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de/notes/nuxt-js-use-sortby-to-sort-notes-by-frontmatter-keys.md: -------------------------------------------------------------------------------- 1 | # 08 nuxt digital garden 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-08-nuxt-digital-garden-0edb9447?pl=build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de) 4 | 5 | 6 | 7 | [Nuxt gives you](https://content.nuxtjs.org/fetching/) lots of other functions available to you to better help sort or query and filter out the data before returning it to the client. 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de/notes/nuxt-js-use-the-computed-property-to-filter-notes-by-tag.md: -------------------------------------------------------------------------------- 1 | # 09 nuxt digital garden 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-09-nuxt-digital-garden-93a60be7?pl=build-a-digital-garden-with-nuxt-and-nuxt-content-module-9b67f0de) 4 | -------------------------------------------------------------------------------- /courses/build-a-react-app-with-authorization-and-authentication-8bbacfe9/notes/aws-check-for-user-specific-roles-using-aws-amplify.md: -------------------------------------------------------------------------------- 1 | # 09-create-post 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-09-create-post?pl=build-a-react-app-with-authorization-and-authentication-8bbacfe9) 4 | 5 | 6 | 7 | Being able to create and save posts client side is a huge part of our app. We can access the save option for our posts using [DataStore.save](https://docs.amplify.aws/lib/datastore/data-access/q/platform/js/#create-and-update) 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/build-a-react-app-with-authorization-and-authentication-8bbacfe9/notes/aws-configure-authorization-on-aws-amplify.md: -------------------------------------------------------------------------------- 1 | # 04-generate-frontend 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-04-generate-frontend?pl=build-a-react-app-with-authorization-and-authentication-8bbacfe9) 4 | 5 | -------------------------------------------------------------------------------- /courses/build-a-react-app-with-authorization-and-authentication-8bbacfe9/notes/aws-create-data-models-using-aws-amplify-and-populate-data.md: -------------------------------------------------------------------------------- 1 | # 01-data-schema 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-01-data-schema?pl=build-a-react-app-with-authorization-and-authentication-8bbacfe9) 4 | 5 | null 6 | -------------------------------------------------------------------------------- /courses/build-a-react-app-with-authorization-and-authentication-8bbacfe9/notes/aws-create-new-posts-using-aws-amplify-s-datastore.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/courses/build-a-react-app-with-authorization-and-authentication-8bbacfe9/notes/aws-create-new-posts-using-aws-amplify-s-datastore.md -------------------------------------------------------------------------------- /courses/build-a-react-app-with-authorization-and-authentication-8bbacfe9/notes/aws-create-sample-data-using-aws-amplify-s-auto-generate-seed-data.md: -------------------------------------------------------------------------------- 1 | # 03-add-backend-auth 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-03-add-backend-auth?pl=build-a-react-app-with-authorization-and-authentication-8bbacfe9) 4 | 5 | null 6 | -------------------------------------------------------------------------------- /courses/build-a-react-app-with-authorization-and-authentication-8bbacfe9/notes/aws-deploy-data-models-on-aws-amplify.md: -------------------------------------------------------------------------------- 1 | # 02-deploy 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-02-deploy?pl=build-a-react-app-with-authorization-and-authentication-8bbacfe9) 4 | 5 | null 6 | -------------------------------------------------------------------------------- /courses/build-a-react-app-with-authorization-and-authentication-8bbacfe9/notes/aws-deploy-your-app-to-aws-amplify.md: -------------------------------------------------------------------------------- 1 | # 10-deploy 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-10-deploy?pl=build-a-react-app-with-authorization-and-authentication-8bbacfe9) 4 | 5 | -------------------------------------------------------------------------------- /courses/build-a-react-app-with-authorization-and-authentication-8bbacfe9/notes/aws-fetch-data-server-side-using-withssrcontext.md: -------------------------------------------------------------------------------- 1 | # 08-check-if-admin 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-08-check-if-admin?pl=build-a-react-app-with-authorization-and-authentication-8bbacfe9) 4 | 5 | 6 | 7 | The [withSSRContext](https://docs.amplify.aws/lib/ssr/q/platform/js/#withssrcontext) allows you to get the currently signed in user's session and be able to fetch their data. 8 | 9 | -------------------------------------------------------------------------------- /courses/build-a-react-app-with-authorization-and-authentication-8bbacfe9/notes/aws-sign-in-and-out-users-using-aws-amplify-s-auth.md: -------------------------------------------------------------------------------- 1 | # 07-data-fetching 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-07-data-fetching?pl=build-a-react-app-with-authorization-and-authentication-8bbacfe9) 4 | 5 | 6 | 7 | [Auth](https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js/) is an amazing tool from AWS Amplify that we can leverage to get users to `Auth.signUp`, `Auth.signIn` and `Auth.signOut` and get the information about that user. 8 | 9 | -------------------------------------------------------------------------------- /courses/build-a-react-app-with-authorization-and-authentication-8bbacfe9/notes/aws-use-withauthenticator-to-create-a-sign-in-ui.md: -------------------------------------------------------------------------------- 1 | # 06-get-current-signed-in-user 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-06-get-current-signed-in-user?pl=build-a-react-app-with-authorization-and-authentication-8bbacfe9) 4 | 5 | 6 | 7 | The [withAuthenticator](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components) component is a higher order component that we will use to wrap our sign-in exported function. 8 | 9 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/01_supabase-create-a-supabase-project.md: -------------------------------------------------------------------------------- 1 | # Create a Supabase project 2 | 3 | [Video link](https://www.egghead.io/lessons/supabase-create-a-supabase-project?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | 5 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/02_supabase-create-a-table-in-supabase.md: -------------------------------------------------------------------------------- 1 | # Create a table in Supabase 2 | 3 | [Video link](https://www.egghead.io/lessons/supabase-create-a-table-in-supabase?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | 5 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/03_next-js-create-a-next-js-app-with-tailwind-css.md: -------------------------------------------------------------------------------- 1 | # Create a Next.js app with Tailwind CSS 2 | 3 | [Video link](https://www.egghead.io/lessons/next-js-create-a-next-js-app-with-tailwind-css?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | 5 | 6 | 7 | `npx create-next-app -e with-tailwindcss .` 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/05_supabase-use-next-js-to-query-a-single-record-from-supabase.md: -------------------------------------------------------------------------------- 1 | # Use Next.js to query a single record from Supabase 2 | 3 | [Video link](https://www.egghead.io/lessons/supabase-use-next-js-to-query-a-single-record-from-supabase?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | 5 | 6 | 7 | [Dynamic routes](https://nextjs.org/docs/routing/dynamic-routes) are created by adding brackets to a page/file. 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/07_supabase-add-relationships-between-tables-in-supabase-using-foreign-keys.md: -------------------------------------------------------------------------------- 1 | # Add relationships between tables in Supabase using foreign keys 2 | 3 | [Video link](https://www.egghead.io/lessons/supabase-add-relationships-between-tables-in-supabase-using-foreign-keys?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | 5 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/09_supabase-use-supabase-to-subscribe-to-database-events-with-postgres-triggers.md: -------------------------------------------------------------------------------- 1 | # Use Supabase to subscribe to database events with Postgres triggers 2 | 3 | [Video link](https://www.egghead.io/lessons/supabase-use-supabase-to-subscribe-to-database-events-with-postgres-triggers?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | 5 | 6 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/10_supabase-create-a-stripe-customer-with-next-js-api-routes.md: -------------------------------------------------------------------------------- 1 | # Create a Stripe customer with Next.js API routes 2 | 3 | [Video link](https://www.egghead.io/lessons/supabase-create-a-stripe-customer-with-next-js-api-routes?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | 5 | 6 | 7 | [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) is a lightweight Rest API Client Extension for Visual Studio Code. 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/11_next-js-generate-a-custom-api-key-to-secure-an-api-route-in-next-js.md: -------------------------------------------------------------------------------- 1 | # Generate a custom API key to secure an API route in Next.js 2 | 3 | [Video link](https://www.egghead.io/lessons/next-js-generate-a-custom-api-key-to-secure-an-api-route-in-next-js?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | 5 | 6 | 7 | `node -e "console.log(crypto.randomBytes(32).toString('hex'))` 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/12_supabase-automatically-create-a-stripe-customer-for-each-user-with-supabase-function-hooks.md: -------------------------------------------------------------------------------- 1 | # Automatically create a Stripe customer for each user with Supabase Function Hooks 2 | 3 | [Video link](https://www.egghead.io/lessons/supabase-automatically-create-a-stripe-customer-for-each-user-with-supabase-function-hooks?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | 5 | 6 | 7 | `npm i ngrok -g` 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/16_next-js-use-stripe-js-to-query-product-data-and-pre-render-with-next-js.md: -------------------------------------------------------------------------------- 1 | # Use Stripe.js to query product data and pre-render with Next.js 2 | 3 | [Video link](https://www.egghead.io/lessons/next-js-use-stripe-js-to-query-product-data-and-pre-render-with-next-js?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | 5 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/17_next-js-create-shared-nav-bar-in-next-js-with-_app-js.md: -------------------------------------------------------------------------------- 1 | # Create shared nav bar in Next.js with _app.js 2 | 3 | [Video link](https://www.egghead.io/lessons/next-js-create-shared-nav-bar-in-next-js-with-_app-js?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | 5 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/18_supabase-query-dynamic-supabase-data-in-static-pages-using-next-js.md: -------------------------------------------------------------------------------- 1 | # Query dynamic Supabase data in static pages using Next.js 2 | 3 | [Video link](https://www.egghead.io/lessons/supabase-query-dynamic-supabase-data-in-static-pages-using-next-js?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | 5 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/20_next-js-charge-customer-for-stripe-subscription-in-next-js.md: -------------------------------------------------------------------------------- 1 | # Charge customer for Stripe subscription in Next.js 2 | 3 | [Video link](https://www.egghead.io/lessons/next-js-charge-customer-for-stripe-subscription-in-next-js?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | 5 | 6 | 7 | The [loadStripe](https://stripe.com/docs/stripe-js/react#elements-provider) function asynchronously loads the Stripe.js script and initializes a Stripe object. 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/22_supabase-use-the-supabase-service-key-to-bypass-row-level-security.md: -------------------------------------------------------------------------------- 1 | # Use the Supabase service key to bypass Row Level Security 2 | 3 | [Video link](https://www.egghead.io/lessons/supabase-use-the-supabase-service-key-to-bypass-row-level-security?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/23_supabase-create-a-client-page-that-requires-authentication-in-next-js-using-getserversideprops.md: -------------------------------------------------------------------------------- 1 | # Create a client page that requires authentication in Next.js using getServerSideProps 2 | 3 | [Video link](https://www.egghead.io/lessons/supabase-create-a-client-page-that-requires-authentication-in-next-js-using-getserversideprops?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | 5 | 6 | -------------------------------------------------------------------------------- /courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20/notes/24_next-js-allow-customer-to-manage-their-subscription-with-stripe-customer-portal.md: -------------------------------------------------------------------------------- 1 | # Allow customer to manage their subscription with Stripe customer portal 2 | 3 | [Video link](https://www.egghead.io/lessons/next-js-allow-customer-to-manage-their-subscription-with-stripe-customer-portal?pl=build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20) 4 | 5 | 6 | 7 | [Termly](https://termly.io/) is a free, all-in-one compliance solution for small businesses. 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/build-data-driven-applications-on-the-edge-with-workers-and-workers-kv-4932f3ea/notes/cloudflare-create-a-cloudflare-workers-kv-namespace.md: -------------------------------------------------------------------------------- 1 | # Create a KV namespace 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-create-a-kv-namespace?pl=build-data-driven-applications-on-the-edge-with-workers-and-workers-kv-4932f3ea) 4 | 5 | 6 | 7 | `wrangler kv:nwamespace create MY_FIRST_KV` will create our first KV! This will also print out both the name well as giving it an id in an object we will put in our `wrangler.toml` file. 8 | 9 | -------------------------------------------------------------------------------- /courses/build-data-driven-applications-on-the-edge-with-workers-and-workers-kv-4932f3ea/notes/cloudflare-create-a-new-cloudflare-workers-project-with-wrangler.md: -------------------------------------------------------------------------------- 1 | # Create a new Workers project with Wrangler 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-create-a-new-workers-project-with-wrangler?pl=build-data-driven-applications-on-the-edge-with-workers-and-workers-kv-4932f3ea) 4 | 5 | 6 | 7 | `npm i -g @cloudflare/wrangler` 8 | 9 | 10 | 11 | 12 | 13 | `wrangler generate my-kv-project` 14 | 15 | -------------------------------------------------------------------------------- /courses/cloud-infrastructure-fundamentals-with-aws-ee4bb845/notes/aws-configure-an-aws-s3-user-in-the-aws-cli.md: -------------------------------------------------------------------------------- 1 | # Cloud Infrastructure configure aws cli with s3 user 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-cloud-infrastructure-configure-aws-cli-with-s3-user?pl=cloud-infrastructure-fundamentals-with-aws-ee4bb845) 4 | 5 | simple create react app 6 | 7 | build the site 8 | 9 | 10 | 11 | Run `aws configure` and paste in the keys created after making a user with IAM 12 | 13 | -------------------------------------------------------------------------------- /courses/cloud-infrastructure-fundamentals-with-aws-ee4bb845/notes/aws-delete-an-aws-rds-instance.md: -------------------------------------------------------------------------------- 1 | # Cloud Infrastructure deleting the rds database 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-cloud-infrastructure-deleting-the-rds-database?pl=cloud-infrastructure-fundamentals-with-aws-ee4bb845) 4 | 5 | 6 | 7 | 8 | Delete your instance now! 9 | 10 | -------------------------------------------------------------------------------- /courses/cloud-infrastructure-fundamentals-with-aws-ee4bb845/notes/aws-overview-of-s3-simple-storage-service.md: -------------------------------------------------------------------------------- 1 | # Cloud Infrastructure s3 overview 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-cloud-infrastructure-s3-overview?pl=cloud-infrastructure-fundamentals-with-aws-ee4bb845) 4 | 5 | null 6 | -------------------------------------------------------------------------------- /courses/cloud-infrastructure-fundamentals-with-aws-ee4bb845/notes/aws-streamline-deployments-to-aws-s3-with-a-deploy-script-in-package-json.md: -------------------------------------------------------------------------------- 1 | # Cloud Infrastructure deploy react to s3 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-cloud-infrastructure-deploy-react-to-s3?pl=cloud-infrastructure-fundamentals-with-aws-ee4bb845) 4 | 5 | null 6 | 7 | 8 | 9 | Run `aws s3 sync` with the path to your build folder and the s3 bucket URL 10 | 11 | -------------------------------------------------------------------------------- /courses/cloudflare-pages-6aaa00a1/notes/00_egghead-deploy-a-nextjs-and-contentful-project-to-cloudflare-pages.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | The API keys are needed to integrate pages with Contentful 4 | 5 | -------------------------------------------------------------------------------- /courses/cloudflare-pages-6aaa00a1/notes/01_egghead-set-up-cloudflare-workers-locally.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | `npm install -g @cloudflare/wrangler` 4 | 5 | 6 | 7 | 8 | 9 | Make sure to run `wrangler whoami` and assign the `account_id` variable in your `wrangler.toml` to it 10 | 11 | -------------------------------------------------------------------------------- /courses/cloudflare-pages-6aaa00a1/notes/02_egghead-create-a-secret-with-cloudflare-wrangler-and-add-airtable-credentials.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | "The vars key defines a table of environment variables provided to your Worker script. All values are plaintext values." - [Configuration - Cloudflare Workers](https://developers.cloudflare.com/workers/cli-wrangler/configuration#vars) 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /courses/cloudflare-pages-6aaa00a1/notes/03_egghead-create-an-airtable-data-handler.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | `https://api.airtable.com/v0/${AIRTABLE_BASE_ID}/${encodeURIComponent(AIRTABLE_TABLE_NAME)}` 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /courses/cloudflare-pages-6aaa00a1/notes/04_egghead-create-an-airtable-form-submission-function.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Response Objects](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#response_objects) are created programmatically in JS when we are providing custom responses to requests. 4 | 5 | -------------------------------------------------------------------------------- /courses/cloudflare-pages-6aaa00a1/notes/05_egghead-publish-a-cloudflare-worker-and-submit-data-with-an-html-form.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/courses/cloudflare-pages-6aaa00a1/notes/05_egghead-publish-a-cloudflare-worker-and-submit-data-with-an-html-form.md -------------------------------------------------------------------------------- /courses/cloudflare-pages-6aaa00a1/notes/06_egghead-redirects.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | When in a repo press the `.` key to access the editor 4 | 5 | -------------------------------------------------------------------------------- /courses/cloudflare-pages-6aaa00a1/notes/07_egghead-rollbacks.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/courses/cloudflare-pages-6aaa00a1/notes/07_egghead-rollbacks.md -------------------------------------------------------------------------------- /courses/cloudflare-pages-6aaa00a1/notes/08_egghead-setting-up-airtable.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | The [Airtable api docs](https://airtable.com/api) are personalized to your base 4 | 5 | -------------------------------------------------------------------------------- /courses/cloudflare-pages-6aaa00a1/notes/09_egghead-setup-deploy-hooks.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | Learn more about filtering for events [here in the contentful docs](https://www.contentful.com/developers/docs/concepts/webhooks/) 4 | 5 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/06_egghead-adding-more-test-cases-for-a-redux-reducer.md: -------------------------------------------------------------------------------- 1 | # Adding More Test Cases for a Redux Reducer 2 | 3 | 4 | 5 | Even if your code coverage looks good, there are always more cases you need to test. Think about input your application should expect or not expect to receive. 6 | 7 | 8 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/08_egghead-unit-testing-a-basic-redux-selector.md: -------------------------------------------------------------------------------- 1 | # Unit Testing a Basic Redux Selector 2 | 3 | 4 | 5 | Start Jest in watch mode for this file only by running the command `npx jest --watch -- cartSlice` 6 | 7 | 8 | 9 | 10 | 11 | The `RootState` is the combined state of all the reducers. 12 | 13 | 14 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/11_egghead-mocking-out-our-api-helper-with-jest-mock.md: -------------------------------------------------------------------------------- 1 | # Mocking out our API Helper with jest.mock 2 | 3 | 4 | 5 | `fetch` is a browser API that doesn't exist natively in Node. The easiest way to fix this for testing purposes is to mock out the entire API surface. 6 | 7 | 8 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/13_egghead-unit-testing-redux-thunks-using-redux-mock-store.md: -------------------------------------------------------------------------------- 1 | # Unit Testing Redux Thunks using Redux Mock Store 2 | 3 | 4 | 5 | Install mock redux store by running the command `npm install -D redux-mock-store` 6 | 7 | 8 | 9 | 10 | 11 | Using the mock redux store isn't that different from mocking out dispatch and calling our thunks directly, but it is a little cleaner. 12 | 13 | 14 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/15_egghead-additional-redux-thunk-unit-tests-for-increased-code-coverage.md: -------------------------------------------------------------------------------- 1 | # Additional Redux Thunk Unit Tests for Increased Code Coverage 2 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/16_jest-intermission-pep-talk-testing-redux-applications.md: -------------------------------------------------------------------------------- 1 | # Intermission Pep Talk - Testing Redux Applications 2 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/18_redux-dispatching-actions-to-a-redux-store-to-test-a-redux-connected-react-component.md: -------------------------------------------------------------------------------- 1 | # Dispatching Actions to a Redux Store to Test a Redux Connected React Component 2 | 3 | 4 | 5 | `import { addToCart, updateQuantity, removeFromCart } from "./cartSlice"` 6 | 7 | Since we're using the same redux store as our app, the easiest way to populate the store is by dispatching those actions and letting the reducers update the store for us. 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/19_redux-creating-a-utility-file-for-rendering-redux-connected-react-components-in-tests.md: -------------------------------------------------------------------------------- 1 | # Creating a Utility File for Rendering Redux Connected React Components in Tests 2 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/20_redux-applying-our-redux-test-helpers-to-an-existing-component-test.md: -------------------------------------------------------------------------------- 1 | # Applying our Redux Test Helpers to an Existing Component Test 2 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/21_redux-troubleshooting-tests-with-react-testing-library-s-debug-helper.md: -------------------------------------------------------------------------------- 1 | # Troubleshooting Tests with React Testing Library's Debug Helper 2 | 3 | 4 | 5 | The `debug` utility is provided by the `@testing-library/react` render function. 6 | 7 | 8 | 9 | 10 | 11 | `debug` will log all the HTML for a given component. 12 | 13 | 14 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/22_redux-using-react-testing-library-s-waitfor-method-to-test-asynchronous-behavior.md: -------------------------------------------------------------------------------- 1 | # Using React Testing Library's waitFor Method to Test Asynchronous Behavior 2 | 3 | 4 | 5 | 'jest.spyOn' can be used to spy on the API to track how many times a method was called, and also to override the value. 6 | 7 | 8 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/23_redux-using-react-testing-library-s-findby-methods-to-test-asynchronous-behavior.md: -------------------------------------------------------------------------------- 1 | # Using React Testing Library's findBy Methods to Test Asynchronous Behavior 2 | 3 | 4 | 5 | Using `findByRole` with `await` will wait until the heading is found, so you don't need to explicitly call `waitFor`. 6 | 7 | 8 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/24_redux-simulate-clicks-in-a-test-with-the-user-event-library.md: -------------------------------------------------------------------------------- 1 | # Simulate Clicks in a Test with the User Event Library 2 | 3 | 4 | 5 | The heading and button for "Bananas" are siblings that share the same parent, which will allow us to programmatically access the button for testing. 6 | 7 | 8 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/26_redux-testing-visible-text-with-react-testing-library-s-getbytext-query.md: -------------------------------------------------------------------------------- 1 | # Testing Visible Text with React Testing Library's getByText Query 2 | 3 | 4 | 5 | `screen.getByText` will throw an error if the specified text doesn't exist, so there's no need to include `expect`. 6 | 7 | 8 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/27_redux-using-preloaded-state-from-multiple-reducers-for-testing-a-react-component.md: -------------------------------------------------------------------------------- 1 | # Using Preloaded State from Multiple Reducers for Testing a React Component 2 | 3 | 4 | 5 | We only need a partial definition of a product, just the name and price, for this test, so we'll need to cast it as `Product` to render it correctly without all the required fields. 6 | 7 | 8 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/28_redux-simulate-typing-into-form-fields-in-tests-with-the-user-event-library.md: -------------------------------------------------------------------------------- 1 | # Simulate Typing into Form Fields in Tests with the User Event Library 2 | 3 | 4 | 5 | `userEvent.clear(input)` will clear out any text that's currently in the selected field. 6 | 7 | 8 | 9 | 10 | 11 | `userEvent.tab()` will blur the field so that the page updates. 12 | 13 | 14 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/29_redux-testing-accessible-form-elements-with-react-testing-library-s-getbytitle-query.md: -------------------------------------------------------------------------------- 1 | # Testing Accessible Form Elements with React Testing Library's getByTitle Query 2 | -------------------------------------------------------------------------------- /courses/confidently-testing-redux-applications-with-jest-typescript-16e17d9b/notes/31_redux-a-comprehensive-example-of-testing-redux-connected-react-components.md: -------------------------------------------------------------------------------- 1 | # A Comprehensive Example of Testing Redux Connected React Components 2 | -------------------------------------------------------------------------------- /courses/craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/courses/craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898/README.md -------------------------------------------------------------------------------- /courses/craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898/notes/06-tailwind-building-a-hoverable-server-selector-with-svg.md: -------------------------------------------------------------------------------- 1 | # 06 - Building a Hoverable Server Selector With SVG 2 | 3 | 4 | ## Notes 5 | 6 | 7 | 8 | [Tool for translating your code](https://transform.tools/) 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /courses/craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898/notes/07-tailwind-conditionally-applying-classes-based-on-the-active-url.md: -------------------------------------------------------------------------------- 1 | # 07 - Building the Active Server Indicator using Group and Transform Utilities 2 | 3 | 4 | ## Notes 5 | 6 | 7 | 8 | 9 | TO use the hover mode change the following in `tailwind.css.js` 10 | 11 | ```jsx 12 | mode: "jit" 13 | ``` 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /courses/craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898/notes/08-tailwind-conditionally-applying-classes-based-on-the-active-url.md: -------------------------------------------------------------------------------- 1 | # 08 - Conditionally Applying Classes Based on the Active URL 2 | 3 | ## Notes 4 | 5 | 6 | -------------------------------------------------------------------------------- /courses/craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898/notes/09-tailwind-building-the-active-server-indicator-using-group-and-transform-utilities.md: -------------------------------------------------------------------------------- 1 | # 09 - Building the Active Server Indicator using Group and Transform Utilities 2 | 3 | 4 | ## Notes 5 | 6 | 7 | 8 | To transform a className to a component you need to do the following: 9 | 10 | ```jsx 11 | className={`${router.pathname === "/" ? "" : "" }`} 12 | ``` 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /courses/craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898/notes/11-tailwind-building-the-server-header-using-arbitrary-values-from-the-jit-compiler.md: -------------------------------------------------------------------------------- 1 | # 10 - Solving the Duplication Problem with Components 2 | 3 | 4 | ## Notes 5 | 6 | -------------------------------------------------------------------------------- /courses/craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898/notes/12-tailwind-styling-the-channel-list-and-controlling-layout.md: -------------------------------------------------------------------------------- 1 | # 12 - Styling the Channel List and Controlling Layout 2 | ## Notes 3 | 4 | 5 | 6 | ```jsx 7 | 8 | Welcome 9 | 10 | ``` 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /courses/craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898/notes/13-tailwind-identifying-repeated-patterns-while-dynamically-generating-the-channel-list.md: -------------------------------------------------------------------------------- 1 | # 13 - Identifying Repeated Patterns while Dynamically Generating the Channel List 2 | ## Notes 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /courses/craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898/notes/14-tailwind-styling-the-active-channel-link-with-a-new-dynamic-url-segment.md: -------------------------------------------------------------------------------- 1 | # 14 - Styling the Active Channel Link with a New Dynamic URL Segment 2 | ## Notes 3 | 4 | 5 | 6 | ```jsx 7 | active ||= router.asPath === href; 8 | ``` 9 | 10 | 11 | 12 | 13 | 14 | ```jsx 15 | let icon = channel.icon ? Icons(channel.icon) : Icons.Hashtag; 16 | let router = useRouter(); 17 | let active = +channel.id === +router.query.cid; 18 | ``` 19 | 20 | -------------------------------------------------------------------------------- /courses/craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898/notes/16-tailwind-building-collapsible-categories-with-rotating-arrow-icons.md: -------------------------------------------------------------------------------- 1 | # 16 - Building Collapsible Categories with Rotating Arrow Icons 2 | ## Notes 3 | 4 | 5 | 6 | ```jsx 7 | function toggleCategory(categoryId) { 8 | setClosedCategories((closedCategories) => 9 | closedCategories.includes(categoryId) 10 | ? closedCategories.filter((id) => id !== categoryId) 11 | : [...closedCategories, categoryId] 12 | ); 13 | } 14 | ``` 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /courses/craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898/notes/17-tailwind-building-the-channel-header-with-flexbox-shrink-and-truncating-text.md: -------------------------------------------------------------------------------- 1 | # 17 - Building the Channel Header with Flexbox Shrink and Truncating Text 2 | ## Notes 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /courses/craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898/notes/18-tailwind-styling-the-search-box-using-the-forms-plugin.md: -------------------------------------------------------------------------------- 1 | # 18 - Styling the Search Box Using the Forms Plugin 2 | 3 | ## Notes 4 | 5 | 6 | 7 | `npm install @tailwindcss/forms` or `yarn add @tailwindcss/forms` 8 | 9 | 10 | 11 | 12 | 13 | In yor `tailwind.config.js` add `plugins: [require("@tailwindcss/forms")]` 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /courses/craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898/notes/20-tailwind-dynamically-generating-the-server-and-channel-navs.md: -------------------------------------------------------------------------------- 1 | # 20 - Dynamically Generating the Server and Channel Navs 2 | 3 | ## Notes 4 | 5 | -------------------------------------------------------------------------------- /courses/craft-scalable-highly-customizable-interfaces-with-tailwind-css-8dfee898/notes/21-tailwind-using-responsive-design-to-hide-the-desktop-navigation.md: -------------------------------------------------------------------------------- 1 | # 21 - Using Responsive Design to Hide the Desktop Navigation 2 | 3 | ## Notes 4 | 5 | 6 | 7 | [Responsive Design with Tailwind](https://tailwindcss.com/docs/responsive-design) 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /courses/effectively-build-restful-apis-using-next-js-api-routes-41c2b1ea/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/courses/effectively-build-restful-apis-using-next-js-api-routes-41c2b1ea/README.md -------------------------------------------------------------------------------- /courses/effectively-build-restful-apis-using-next-js-api-routes-41c2b1ea/notes/08-next-js-add-middleware-to-an-api-route-created-with-next-connect.md: -------------------------------------------------------------------------------- 1 | ## 08. Add middleware to an API Route created with next-connect 2 | 3 | 4 | 5 | ```jsx 6 | const handler = nextConnect() 7 | .use(withAuthentication) 8 | .get((req,res) => res.json({message: 'get'})) 9 | ``` 10 | 11 | 12 | -------------------------------------------------------------------------------- /courses/effectively-build-restful-apis-using-next-js-api-routes-41c2b1ea/notes/09-next-js-hide-sensitive-information-from-the-consumers-of-the-api.md: -------------------------------------------------------------------------------- 1 | ## 09. Hide Sensitive Information from the Consumers of the API 2 | 3 | -------------------------------------------------------------------------------- /courses/graphql-and-vue-3-8152749d/notes/vue-js-create-a-conditionally-rendered-modal-in-vue-3.md: -------------------------------------------------------------------------------- 1 | # GraphQL and Vue 3 allowing a modal to appear conditionally 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-graphql-and-vue-3-allowing-a-modal-to-appear-conditionally?pl=graphql-and-vue-3-8152749d) 4 | 5 | 6 | 7 | Use `v-if` when you need to conditionally render UI 8 | 9 | -------------------------------------------------------------------------------- /courses/graphql-and-vue-3-8152749d/notes/vue-js-create-a-dynamic-route-with-vue-router.md: -------------------------------------------------------------------------------- 1 | # GraphQL and Vue 3 use dynamic route with vue router 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-graphql-and-vue-3-use-dynamic-route-with-vue-router?pl=graphql-and-vue-3-8152749d) 4 | 5 | 6 | 7 | Create a dynamic route by prefixing the desired variable part of the URL with a colon `:` 8 | 9 | 10 | 11 | 12 | 13 | `$route` gives you access to the global route object 14 | 15 | -------------------------------------------------------------------------------- /courses/graphql-and-vue-3-8152749d/notes/vue-js-create-a-graphql-mutation-in-graphiql.md: -------------------------------------------------------------------------------- 1 | # GraphQL and Vue 3 using mutations in graphiql 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-graphql-and-vue-3-using-mutations-in-graphiql?pl=graphql-and-vue-3-8152749d) 4 | 5 | null 6 | 7 | 8 | 9 | Make sure you declare your mutations with `mutation {}` 10 | 11 | 12 | 13 | 14 | 15 | Declare your variable's types in `mutation` arguments 16 | 17 | -------------------------------------------------------------------------------- /courses/graphql-and-vue-3-8152749d/notes/vue-js-create-a-vue-3-form-with-v-model.md: -------------------------------------------------------------------------------- 1 | # GraphQL and Vue 3 use vmodel to create a form 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-graphql-and-vue-3-use-vmodel-to-create-a-form?pl=graphql-and-vue-3-8152749d) 4 | 5 | null 6 | 7 | 8 | 9 | "Deep" in this context means the comparison is done on the inner items of a data structure. 10 | 11 | 12 | 13 | 14 | 15 | Use `v-model` to update your reactive data 16 | 17 | -------------------------------------------------------------------------------- /courses/graphql-and-vue-3-8152749d/notes/vue-js-handle-graphql-request-errors-in-vue-3.md: -------------------------------------------------------------------------------- 1 | # GraphQL and Vue 3 handling errors 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-graphql-and-vue-3-handling-errors?pl=graphql-and-vue-3-8152749d) 4 | 5 | 6 | What do we do with optimistic updates when things don't go the way we planned? 7 | 8 | 9 | 10 | The Apollo client is smart and corrects the data, but it might not be clear to the user. 11 | 12 | -------------------------------------------------------------------------------- /courses/graphql-and-vue-3-8152749d/notes/vue-js-listen-for-custom-emitted-events-in-vue-3-parent-components.md: -------------------------------------------------------------------------------- 1 | # GraphQL and Vue 3 have parent respond to a custom emit event 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-graphql-and-vue-3-have-parent-respond-to-a-custom-emit-event?pl=graphql-and-vue-3-8152749d) 4 | 5 | 6 | We want a form that updates our craft data inside the modal 7 | 8 | 9 | 10 | You could also read the emitted close event with `v-on:close` 11 | 12 | -------------------------------------------------------------------------------- /courses/graphql-and-vue-3-8152749d/notes/vue-js-pass-an-id-in-a-vue-3-app-through-query-parameters-to-a-graphql-query.md: -------------------------------------------------------------------------------- 1 | # GraphQL and Vue 3 use variables in our graphql query 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-graphql-and-vue-3-use-variables-in-our-graphql-query?pl=graphql-and-vue-3-8152749d) 4 | 5 | 6 | We want to query on each craft view page 7 | 8 | 9 | 10 | Second argument to `useQuery` is a query params object 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /courses/graphql-and-vue-3-8152749d/notes/vue-js-use-graphql-mutations-in-vue-3-with-the-usemutation-composable.md: -------------------------------------------------------------------------------- 1 | # GraphQL and Vue 3 using mutations in vue 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-graphql-and-vue-3-using-mutations-in-vue?pl=graphql-and-vue-3-8152749d) 4 | 5 | Time to use our mutation in Vue 6 | 7 | useMutation composable 8 | 9 | 10 | 11 | Prevent `form` default with `@submit.prevent` 12 | 13 | -------------------------------------------------------------------------------- /courses/graphql-and-vue-3-8152749d/notes/vue-js-use-refetch-from-vue-3-usequery-composable-to-ensure-fresh-data.md: -------------------------------------------------------------------------------- 1 | # GraphQL and Vue 3 use refetch to ensure data is fresh 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-graphql-and-vue-3-use-refetch-to-ensure-data-is-fresh?pl=graphql-and-vue-3-8152749d) 4 | 5 | 6 | 7 | `refetch` runs the query it's destructured off of when called 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /courses/graphql-and-vue-3-8152749d/notes/vue-js-use-template-literals-with-router-link-to-create-dynamic-routes-in-vue-3.md: -------------------------------------------------------------------------------- 1 | # GraphQL and Vue 3 using router link dynamically 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-graphql-and-vue-3-using-router-link-dynamically?pl=graphql-and-vue-3-8152749d) 4 | 5 | 6 | 7 | 8 | Use template literals to create dynamic links 9 | 10 | -------------------------------------------------------------------------------- /courses/local-app-development-with-the-firebase-emulator-ebd4a2a8/notes/firebase-disable-firebase-emulators-when-in-production.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | Do not use the emulators in production 4 | 5 | 6 | 7 | 8 | 9 | All you have to do is prevent the emulator connection functions from being called in production. 10 | 11 | -------------------------------------------------------------------------------- /courses/local-app-development-with-the-firebase-emulator-ebd4a2a8/notes/firebase-get-started-with-firebase-http-cloud-functions.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | "After you write and deploy a function, Google's servers begin to manage the function immediately. You can fire the function directly with an HTTP request, or, in the case of background functions, Google's servers will listen for events and run the function when it is triggered." - **[Firebase Documentation](https://firebase.google.com/docs/functions)** 4 | 5 | -------------------------------------------------------------------------------- /courses/local-app-development-with-the-firebase-emulator-ebd4a2a8/notes/firebase-initialize-firebase-emulators-in-your-app.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | `firebase init emulators` 4 | 5 | 6 | 7 | 8 | 9 | `firebase emulators:start` 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /courses/local-app-development-with-the-firebase-emulator-ebd4a2a8/notes/firebase-initialize-the-firestore-emulator.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | Remember that `connectFirestoreEmulator` takes three arguments unlike `connectAuthEmulator` which just takes the authentication instance and the full URL. 4 | 5 | 6 | 7 | 8 | 9 | Edit fields in your firestore database with the emulator suite 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /courses/local-app-development-with-the-firebase-emulator-ebd4a2a8/notes/firebase-intro-to-use-the-firebase-emulator-to-create-safe-test-environments-for-angular.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/courses/local-app-development-with-the-firebase-emulator-ebd4a2a8/notes/firebase-intro-to-use-the-firebase-emulator-to-create-safe-test-environments-for-angular.md -------------------------------------------------------------------------------- /courses/local-app-development-with-the-firebase-emulator-ebd4a2a8/notes/firebase-overview-of-the-demo-application-and-tools-we-ll-use.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/courses/local-app-development-with-the-firebase-emulator-ebd4a2a8/notes/firebase-overview-of-the-demo-application-and-tools-we-ll-use.md -------------------------------------------------------------------------------- /courses/local-app-development-with-the-firebase-emulator-ebd4a2a8/notes/firebase-overview-of-the-different-firebase-cloud-functions.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/courses/local-app-development-with-the-firebase-emulator-ebd4a2a8/notes/firebase-overview-of-the-different-firebase-cloud-functions.md -------------------------------------------------------------------------------- /courses/local-app-development-with-the-firebase-emulator-ebd4a2a8/notes/firebase-setup-the-firebase-authentication-emulator.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | You could also create environment variables for the port numbers 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /courses/local-app-development-with-the-firebase-emulator-ebd4a2a8/notes/firebase-watch-for-changes-and-trigger-functions-with-the-firestore-emulator.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | Check out Firebase's other database triggers [here in the official docs](https://firebase.google.com/docs/functions/database-events) 4 | 5 | -------------------------------------------------------------------------------- /courses/local-app-development-with-the-firebase-emulator-ebd4a2a8/notes/firebase-when-to-use-the-oncall-or-onrequest-firebase-cloud-functions.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | `.onCall` functions are a lot more convenient to use on the client side 4 | 5 | -------------------------------------------------------------------------------- /courses/migrate-a-client-side-application-to-react-18-beta-9379f0d1/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/courses/migrate-a-client-side-application-to-react-18-beta-9379f0d1/README.md -------------------------------------------------------------------------------- /courses/migrate-a-client-side-application-to-react-18-beta-9379f0d1/notes/01-react-gradual-adoption-strategy-of-react-18.md: -------------------------------------------------------------------------------- 1 | # Gradual Adoption Strategy of React 18 2 | 3 | [Video link]() 4 | 5 | 6 | 7 | [Documentation for React 18](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html) 8 | 9 | -------------------------------------------------------------------------------- /courses/migrate-a-client-side-application-to-react-18-beta-9379f0d1/notes/06-react-conditionally-render-with-legacy-root-api-or-new-root-api.md: -------------------------------------------------------------------------------- 1 | # Conditionally Render with Legacy Root API or New Root API 2 | 3 | [Video link]() 4 | 5 | 6 | 7 | 8 | Based on the environment we can render either the legacy API or the new API 9 | 10 | ```jsx 11 | const REACT_18 = true; 12 | 13 | if (REACT_18) { 14 | ReactDOM.createRoot(root).render(); 15 | } else { 16 | ReactDOM.render(, root); 17 | } 18 | ``` 19 | 20 | -------------------------------------------------------------------------------- /courses/migrate-a-client-side-application-to-react-18-beta-9379f0d1/notes/08-react-remove-unstable_batchedupdates-calls.md: -------------------------------------------------------------------------------- 1 | # Remove unstable_batchedUpdates Calls 2 | 3 | [Video link]() 4 | 5 | 6 | 7 | With React 18, there is not need to use the undocumented API `ReactDOM.unstable_batchedUpdates` 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/migrate-a-client-side-application-to-react-18-beta-9379f0d1/notes/09-react-opt-out-of-automatic-batching-with-reactdom-flushsync.md: -------------------------------------------------------------------------------- 1 | # Opt-out of Automatic Batching with ReactDOM.flushSync 2 | 3 | [Video link]() 4 | 5 | 6 | 7 | ```jsx 8 | ReactDOM.flushSync(() => { 9 | updateCount((count) => count + 1) 10 | }); 11 | ``` 12 | 13 | 14 | -------------------------------------------------------------------------------- /courses/migrate-a-client-side-application-to-react-18-beta-9379f0d1/notes/11-react-stay-up-to-date-on-react-18-progress-with-the-react-working-group.md: -------------------------------------------------------------------------------- 1 | # Stay up-to-date on React 18 progress with the React Working Group 2 | 3 | [Video link]() 4 | 5 | 6 | 7 | [React Working Group for React 18](https://github.com/reactwg/react-18) 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/react-optimization-cookbook-d67d54ba/notes/react-add-the-why-did-you-render-package-to-catch-unnecessary-updates-in-react.md: -------------------------------------------------------------------------------- 1 | # Add the why-did-you-render Package to Catch Unnecessary Updates 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-add-the-why-did-you-render-package-to-catch-unnecessary-updates?pl=react-optimization-cookbook-d67d54ba) 4 | 5 | 6 | 7 | [Why Did You Render](https://github.com/welldone-software/why-did-you-render) can help you to simply track when and why a certain component re-renders. 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/react-optimization-cookbook-d67d54ba/notes/react-code-split-components-with-react-lazy-loadable-components.md: -------------------------------------------------------------------------------- 1 | # Code Split Components with React Lazy & Loadable Components 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-code-split-components-with-react-lazy-loadable-components?pl=react-optimization-cookbook-d67d54ba) 4 | 5 | -------------------------------------------------------------------------------- /courses/react-optimization-cookbook-d67d54ba/notes/react-containerization-of-state-within-child-react-components.md: -------------------------------------------------------------------------------- 1 | # Containerization of state within child components 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-containerization-of-state-within-child-components?pl=react-optimization-cookbook-d67d54ba) 4 | 5 | -------------------------------------------------------------------------------- /courses/react-optimization-cookbook-d67d54ba/notes/react-course-introduction-react-optimization-cookbook.md: -------------------------------------------------------------------------------- 1 | # Introducing Optimizing React Applications 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-introducing-optimizing-react-applications?pl=react-optimization-cookbook-d67d54ba) 4 | 5 | -------------------------------------------------------------------------------- /courses/react-optimization-cookbook-d67d54ba/notes/react-memoize-a-function-with-usecallback-in-react.md: -------------------------------------------------------------------------------- 1 | # Memoize a Function with useCallback 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-memoize-a-function-with-usecallback?pl=react-optimization-cookbook-d67d54ba) 4 | 5 | 6 | 7 | [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) returns a memoized callback that only changes if one of the dependencies has changed. 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/react-optimization-cookbook-d67d54ba/notes/react-memoized-values-with-react-usememo.md: -------------------------------------------------------------------------------- 1 | # Memoized Values with useMemo 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-memoized-values-with-usememo?pl=react-optimization-cookbook-d67d54ba) 4 | 5 | 6 | 7 | [useMemo](https://reactjs.org/docs/hooks-reference.html#usememo) will only recompute the memoized value when on eof the dependencies has changed. 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/react-optimization-cookbook-d67d54ba/notes/react-optimize-function-components-with-react-memo.md: -------------------------------------------------------------------------------- 1 | # Optimize Function Components with React.memo 2 | 3 | [Video link](https://www.egghead.io/lessons/react-optimize-function-components-with-react-memo?pl=react-optimization-cookbook-d67d54ba) 4 | 5 | 6 | 7 | 8 | [React.memo](https://reactjs.org/docs/react-api.html#reactmemo) is a higher order component that boosts performance by skipping rendering components and reusing the last rendered result. 9 | 10 | 11 | -------------------------------------------------------------------------------- /courses/react-optimization-cookbook-d67d54ba/notes/react-profile-react-components-with-the-devtools-profiler.md: -------------------------------------------------------------------------------- 1 | # Profile Components with the Devtools Profiler 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-profile-components-with-the-devtools-profiler?pl=react-optimization-cookbook-d67d54ba) 4 | 5 | -------------------------------------------------------------------------------- /courses/react-optimization-cookbook-d67d54ba/notes/react-use-the-react-production-build.md: -------------------------------------------------------------------------------- 1 | # Use the React Production Build 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-use-the-react-production-build?pl=react-optimization-cookbook-d67d54ba) 4 | 5 | 6 | 7 | When working in a dev mode, React will ship more of your code to help with error handling and such that you won't get while in a production build, thus slowing down your application. 8 | 9 | -------------------------------------------------------------------------------- /courses/react-optimization-cookbook-d67d54ba/notes/react-view-package-sizes-in-a-react-app-with-webpack-analyzer.md: -------------------------------------------------------------------------------- 1 | # View Package Sizes with Webpack Analyzer 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-view-package-sizes-with-webpack-analyzer?pl=react-optimization-cookbook-d67d54ba) 4 | 5 | -------------------------------------------------------------------------------- /courses/react-optimization-cookbook-d67d54ba/notes/react-virtualize-long-lists-of-data-in-react.md: -------------------------------------------------------------------------------- 1 | # Virtualize Long Lists of Data 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-virtualize-long-lists-of-data?pl=react-optimization-cookbook-d67d54ba) 4 | 5 | 6 | 7 | Here is a really cool application that you can use to test out different sizes for [FixedSizedList](https://react-window.vercel.app/#/examples/list/fixed-size). 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/refactor-a-react-application-to-typescript-c70bffa0/notes/eslint-configure-emmet-eslint-and-prettier-extensions.md: -------------------------------------------------------------------------------- 1 | # 03 part 2 plugins setup 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-03-part-2-plugins-setup?pl=refactoring-react-components-to-typescript-9b045938) 4 | 5 | -------------------------------------------------------------------------------- /courses/refactor-a-react-application-to-typescript-c70bffa0/notes/react-configure-build-tools-to-work-with-typescript.md: -------------------------------------------------------------------------------- 1 | # 05 project build setup 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-05-project-build-setup?pl=refactoring-react-components-to-typescript-9b045938) 4 | 5 | 6 | 7 | `npm i -D @babel/preset-typescript` 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/refactor-a-react-application-to-typescript-c70bffa0/notes/react-refactor-a-react-application-to-typescript.md: -------------------------------------------------------------------------------- 1 | # 01 refactoring intro 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-01-refactoring-intro?pl=refactoring-react-components-to-typescript-9b045938) 4 | 5 | -------------------------------------------------------------------------------- /courses/refactor-a-react-application-to-typescript-c70bffa0/notes/react-type-a-radio-button-component-in-react-using-typescript.md: -------------------------------------------------------------------------------- 1 | # 09 typed context 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-09-typed-context?pl=refactoring-react-components-to-typescript-9b045938) 4 | -------------------------------------------------------------------------------- /courses/refactor-a-react-application-to-typescript-c70bffa0/notes/react-type-react-hooks-using-typescript.md: -------------------------------------------------------------------------------- 1 | # 07 typed hooks 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-07-typed-hooks?pl=refactoring-react-components-to-typescript-9b045938) 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /courses/refactor-a-react-application-to-typescript-c70bffa0/notes/react-use-typescript-to-type-a-react-class-component.md: -------------------------------------------------------------------------------- 1 | # 10 typed class components 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-10-typed-class-components?pl=refactoring-react-components-to-typescript-9b045938) 4 | -------------------------------------------------------------------------------- /courses/refactor-a-react-application-to-typescript-c70bffa0/notes/react-use-typescript-to-type-react-usereducer.md: -------------------------------------------------------------------------------- 1 | # 08 typed use reducer 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-08-typed-use-reducer?pl=refactoring-react-components-to-typescript-9b045938) 4 | 5 | -------------------------------------------------------------------------------- /courses/refactor-a-react-application-to-typescript-c70bffa0/notes/react-walkthrough-of-the-refactoring-project.md: -------------------------------------------------------------------------------- 1 | # 02 project assesment 2 | 3 | [Video link](https://www.egghead.io/lessons/egghead-02-project-assesment?pl=refactoring-react-components-to-typescript-9b045938) 4 | 5 | -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/02-javascript-queue-data-structure-in-javascript-Dequeue.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/02-javascript-queue-data-structure-in-javascript-Dequeue.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/02-javascript-queue-data-structure-in-javascript-Enqueue.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/02-javascript-queue-data-structure-in-javascript-Enqueue.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/02-javascript-queue-data-structure-in-javascript-Length.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/02-javascript-queue-data-structure-in-javascript-Length.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/02-javascript-queue-data-structure-in-javascript-Peek.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/02-javascript-queue-data-structure-in-javascript-Peek.png -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/02-javascript-queue-data-structure-in-javascript-Queue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/02-javascript-queue-data-structure-in-javascript-Queue.png -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/02-javascript-queue-data-structure-in-javascript-isEmpty.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/02-javascript-queue-data-structure-in-javascript-isEmpty.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/03-javascript-priority-queue-javascript-data-structure-Priority-Queue.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/03-javascript-priority-queue-javascript-data-structure-Priority-Queue.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/04-javascript-stack-data-structure-in-javascript-Stack-Length.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/04-javascript-stack-data-structure-in-javascript-Stack-Length.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/04-javascript-stack-data-structure-in-javascript-Stack-Peek.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/04-javascript-stack-data-structure-in-javascript-Stack-Peek.png -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/04-javascript-stack-data-structure-in-javascript-Stack-Pop.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/04-javascript-stack-data-structure-in-javascript-Stack-Pop.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/04-javascript-stack-data-structure-in-javascript-Stack-Push.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/04-javascript-stack-data-structure-in-javascript-Stack-Push.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/04-javascript-stack-data-structure-in-javascript-Stack-isEmpty.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/04-javascript-stack-data-structure-in-javascript-Stack-isEmpty.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/04-javascript-stack-data-structure-in-javascript-Stack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/04-javascript-stack-data-structure-in-javascript-Stack.png -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-Delete.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-Delete.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-Get.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-Get.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-Head.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-Head.png -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-Length.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-Length.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-Pop.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-Pop.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-Push.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-Push.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-Tail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-Tail.png -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-isEmpty.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List-isEmpty.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/05-javascript-linked-list-data-structure-in-javascript-Linked-List.png -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/06-javascript-javascript-graph-data-structure-Graph-Add-Edge.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/06-javascript-javascript-graph-data-structure-Graph-Add-Edge.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/06-javascript-javascript-graph-data-structure-Graph-Add.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/06-javascript-javascript-graph-data-structure-Graph-Add.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/06-javascript-javascript-graph-data-structure-Graph-Find.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/06-javascript-javascript-graph-data-structure-Graph-Find.png -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/06-javascript-javascript-graph-data-structure-Graph-Symmetry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/06-javascript-javascript-graph-data-structure-Graph-Symmetry.png -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/06-javascript-javascript-graph-data-structure-Graph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/06-javascript-javascript-graph-data-structure-Graph.png -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/07-javascript-breadth-first-javascript-search-algorithm-for-graphs-Breadth-First-Search.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/07-javascript-breadth-first-javascript-search-algorithm-for-graphs-Breadth-First-Search.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/08-javascript-write-a-depth-first-search-algorithm-for-graphs-in-javascript-Depth-First-Search.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/08-javascript-write-a-depth-first-search-algorithm-for-graphs-in-javascript-Depth-First-Search.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/09-javascript-tree-data-structure-in-javascript-Tree-Traversal.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/09-javascript-tree-data-structure-in-javascript-Tree-Traversal.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/09-javascript-tree-data-structure-in-javascript-Tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/09-javascript-tree-data-structure-in-javascript-Tree.png -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/10-javascript-build-a-binary-tree-in-javascript-and-several-traversal-algorithms-Binary-Tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/10-javascript-build-a-binary-tree-in-javascript-and-several-traversal-algorithms-Binary-Tree.png -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/10-javascript-build-a-binary-tree-in-javascript-and-several-traversal-algorithms-Tree-In-Order.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/10-javascript-build-a-binary-tree-in-javascript-and-several-traversal-algorithms-Tree-In-Order.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/10-javascript-build-a-binary-tree-in-javascript-and-several-traversal-algorithms-Tree-Post-Order.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/10-javascript-build-a-binary-tree-in-javascript-and-several-traversal-algorithms-Tree-Post-Order.gif -------------------------------------------------------------------------------- /data-structures-and-algorithms-in-javascript/assets/10-javascript-build-a-binary-tree-in-javascript-and-several-traversal-algorithms-Tree-Pre-Order.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/eggheadio-course-notes/257932cf8e2bdc6d8a08adb30a2542873ac7e73d/data-structures-and-algorithms-in-javascript/assets/10-javascript-build-a-binary-tree-in-javascript-and-several-traversal-algorithms-Tree-Pre-Order.gif -------------------------------------------------------------------------------- /develop-accessible-web-apps-with-react/notes/07-color-contrast-windows.md: -------------------------------------------------------------------------------- 1 | # 07. Enable High Contrast Mode on Windows 2 | 3 | **[📹 Video](https://egghead.io/lessons/microsoft-enable-high-contrast-mode-on-windows)** 4 | 5 | 6 | To enable high contrast mode (in Windows 10), search for **high contrast mode**. 7 | 8 | You can choose between four settings: 9 | - high contrast number 1 10 | - high contrast number 2 11 | - black theme 12 | - white theme 13 | 14 | 👍 For easier access in the future, you can right-click on **High contrast** and click **Pin to Start**. 15 | -------------------------------------------------------------------------------- /develop-accessible-web-apps-with-react/notes/12-semantic-HTML.md: -------------------------------------------------------------------------------- 1 | # 12. Define Landmark Regions of a web page using HTML5 sectioning elements 2 | 3 | **[📹 Video](https://egghead.io/lessons/react-define-landmark-regions-of-a-web-page-using-html5-sectioning-elements)** 4 | 5 | 6 | * 👍 Instead of ARIA landmark regions, you can use HTML5 semantic elements (which are often more intuitive and less verbose). 7 | 8 | Most common semantic HTML elements include: 9 | 10 | - `
    ` 11 | - `